1493 - Dreamweaver - Usando o Macro Media Dream Weaver 8

Usando o Dreamweaver
Marcas comerciais 1-Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev e WebHelp so marcas registradas ou comerciais da Macromedia, Inc. e podem estar registradas nos Estados Unidos ou em outras jurisdies, inclusive jurisdies internacionais. Outros nomes de produtos, logotipos, desenhos, ttulos, palavras ou frases mencionadas nesta publicao podem ser marcas comerciais ou de servio, bem como nomes comerciais da Macromedia, Inc. ou de outras entidades, podendo estar registrados em determinadas jurisdies, inclusive internacionais. Informaes sobre outros fabricantes Este guia contm links para sites de terceiros que no esto sob controle da Macromedia, e a Macromedia no se responsabiliza pelo contedo de quaisquer sites de terceiros. O acesso a um site da Web de terceiros mencionado neste guia deve ser feito por sua prpria conta e risco. A Macromedia fornece esses links apenas para a sua convenincia e a incluso desses no implica endosso ou responsabilidade pelo contedo dos sites de outros fabricantes. Copyright 1997-2005 Macromedia, Inc. Todos os direitos reservados. Este manual no pode ser copiado, fotocopiado, reproduzido, traduzido ou convertido para qualquer meio eletrnico ou formato legvel por mquina, parcial ou integralmente, sem aprovao por escrito da Macromedia, Inc. No obstante o acima exposto, o proprietrio ou o usurio autorizado de uma cpia vlida do software com o qual este manual foi fornecido pode imprimir uma cpia deste manual a partir de uma verso eletrnica deste manual com a nica finalidade de tal proprietrio ou usurio autorizado aprender a usar o referido software, desde que nenhuma parte deste manual possa ser impressa, reproduzida, distribuda, revendida ou transmitida para quaisquer outras finalidades, incluindo, mas no limitado a, finalidades comerciais, tais como a venda de cpias desta documentao ou o fornecimento de servios de suporte pago. Agradecimentos Gerente de projeto: Charles Nadeau Redatores: Michael Varese Demais redatores: Jennifer Rowe, Paul Gubbay, Charles Nadeau Edio: Rosana Francescato, Lisa Stanziano, Anne Szabla, Mary Ferguson, Mark Nigara Gerentes de produo e edio: Patrice ONeill e Rosana Francescato Projeto e produo de mdia: Adam Barnett, Aaron Begley, Paul Benkman, John Francis, Geeta Karmarkar, Paul Rangel, Arena Reed, Mario Reynoso Gerente de localizao: Melissa Baerwald Agradecimentos especiais para Sheila McGinn, Paul Gubbay, Vic Mitnick, Jim Doubek, Joaquin Blas, Wenlan Du, Ken Karleskint, Jennifer Taylor, Jorge Taylor, Nick Halbakken, Scott Richards, Sami Kaied, John Skidgel, Masayo Noda, Kristin Conradi, Yuko Yagi, os responsveis pelos testes da verso beta e toda a equipe de engenharia e de controle de qualidade da Dreamweaver. Primeira edio: Setembro de 2005 Macromedia, Inc. 601 Townsend St. San Francisco, CA 94103, EUA
Sumrio
PARTE 1: PRINCPIOS BSICOS DO DREAMWEAVER Introduo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Novidades do Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Onde iniciar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Fluxo de trabalho do Dreamweaver para criar sites da Web . . . . . . . 28 Utilizar o Dreamweaver com outros aplicativos. . . . . . . . . . . . . . . . . . . 33 Dreamweaver e acessibilidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Guia para a mdia de treinamento do Dreamweaver. . . . . . . . . . . . . . . 36 Convenes tipogrficas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Recursos de tecnologias da Web e HTML. . . . . . . . . . . . . . . . . . . . . . . 40 Captulo 1: Explorar a rea de trabalho. . . . . . . . . . . . . . . . . . . . . 43 Sobre a rea de trabalho do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 43 Trabalhar na janela do documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Utilizar barras de ferramentas, inspetores e menus contextuais . . . . 59 Utilizar painis e grupos de painis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67 Utilizar os recursos de acessibilidade do Dreamweaver . . . . . . . . . . . .70 Otimizar a rea de trabalho para o projeto de pgina acessvel. . . . . .76 Utilizar guias visuais no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Dreamweaver conceitos bsicos de personalizao . . . . . . . . . . . . . . .78 Captulo 2: Configurar um site do Dreamweaver . . . . . . . . . . . . .87 Sobre sites do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87 Configurar um novo site do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . 90 Utilizar as definies avanadas para configurar um site do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 Editar definies de um site do Dreamweaver . . . . . . . . . . . . . . . . . . . .97 Editar sites da Web j existentes no Dreamweaver . . . . . . . . . . . . . . . .97
Captulo 3: Criar e abrir documentos . . . . . . . . . . . . . . . . . . . . . . 101 Criar novos documentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Salvar um novo documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Definir um novo tipo de documento padro . . . . . . . . . . . . . . . . . . . . . 106 Definir a extenso de arquivo padro de novos documentos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Abrir documentos existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Limpar arquivos HTML do Microsoft Word. . . . . . . . . . . . . . . . . . . . . . 108
PARTE 2: TRABALHAR COM SITES DO DREAMWEAVER Captulo 4: Gerenciar arquivos . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Sobre o gerenciamento de sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114 Acessar sites, um servidor e unidades locais . . . . . . . . . . . . . . . . . . . . . 118 Exibir arquivos e pastas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Comparar arquivos para conhecer as diferenas . . . . . . . . . . . . . . . . . 126 Reverter arquivos (usurios do Contribute) . . . . . . . . . . . . . . . . . . . . . . 132 Gerenciar arquivos e pastas no painel Files (Arquivos) . . . . . . . . . . . 132 Trabalhar com um mapa visual do site . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Importar e exportar sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Remover um site do Dreamweaver da lista de sites . . . . . . . . . . . . . . 148 Devolver e retirar arquivos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Obter e colocar arquivos no servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Sincronizar os arquivos nos sites local e remoto . . . . . . . . . . . . . . . . . .161 Identificar e excluir arquivos no-utilizados . . . . . . . . . . . . . . . . . . . . . . 162 Mascarar as pastas e os arquivos do site . . . . . . . . . . . . . . . . . . . . . . . . 163 Armazenar informaes sobre arquivos nas Design Notes . . . . . . . . 167 Testar o site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 Captulo 5: Gerenciar bibliotecas e propriedades de sites . . . . 177 Sobre itens de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Trabalhar com propriedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Criar e gerenciar uma lista de propriedades favoritas . . . . . . . . . . . . . 188 Trabalhar com itens de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191
Sumrio
Captulo 6: Gerenciar sites do Contribute com o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Sobre o gerenciamento de sites do Contribute . . . . . . . . . . . . . . . . . . 202 Preparar um site para utilizar com o Contribute . . . . . . . . . . . . . . . . . 207 Administrar um site do Contribute utilizando o Dreamweaver . . . . . 208 Gerenciar arquivos do Contribute utilizando o Dreamweaver . . . . . .210 Solucionar problemas de um site do Contribute . . . . . . . . . . . . . . . . . .214
PARTE 3: CRIAR LAYOUTS DE PGINA Captulo 7: Criar layouts de pginas com CSS . . . . . . . . . . . . . . 219 Sobre camadas no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Inserir uma camada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Definir propriedades e preferncias de camadas . . . . . . . . . . . . . . . . 225 Gerenciar camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Manipular camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 Converter camadas em tabelas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Animar camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Inserir tags div no layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Trabalhar com tags div no layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 Alterar a cor de realce de tags div. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Trabalhar com visualizao de layout CSS . . . . . . . . . . . . . . . . . . . . . 248 Utilizar rguas, guias e grades para definir o layout de pginas. . . . 250 Utilizar uma imagem de rastreamento . . . . . . . . . . . . . . . . . . . . . . . . . . 254 Captulo 8: Apresentar contedo com tabelas . . . . . . . . . . . . . 257 Sobre as tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Inserir uma tabela e adicionar contedo . . . . . . . . . . . . . . . . . . . . . . . . 260 Importar e exportar dados tabulares . . . . . . . . . . . . . . . . . . . . . . . . . . . .261 Selecionar os elementos da tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Usar o modo Expanded Tables (Tabelas expandidas) para facilitar a edio da tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Formatar tabelas e clulas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Redimensionar tabelas, colunas e linhas . . . . . . . . . . . . . . . . . . . . . . . 270 Adicionar e remover linhas e colunas . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Dividir e mesclar clulas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Copiar, colar e excluir clulas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Aninhar tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281 Ordenar tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281
Sumrio
Captulo 9: Criao de pginas no modo Layout . . . . . . . . . . . 283 Sobre o modo Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .284 Alternar do modo Standard (Padro) para o modo Layout . . . . . . . .288 Desenhar no modo Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .289 Adicionar contedo a uma clula de layout . . . . . . . . . . . . . . . . . . . . . .293 Limpar automaticamente as alturas das clulas . . . . . . . . . . . . . . . . . 295 Redimensionar e mover clulas e tabelas de layout . . . . . . . . . . . . . 295 Formatar clulas e tabelas de layout . . . . . . . . . . . . . . . . . . . . . . . . . . . .297 Definir a largura da coluna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .298 Definir preferncia para o modo Layout. . . . . . . . . . . . . . . . . . . . . . . . 302 Captulo 10: Utilizao de quadros . . . . . . . . . . . . . . . . . . . . . . . 303 Sobre quadros e conjuntos de quadros . . . . . . . . . . . . . . . . . . . . . . . . 303 Trabalhar com conjuntos de quadros na janela do documento. . . . 309 Criar quadros e conjuntos de quadros . . . . . . . . . . . . . . . . . . . . . . . . . 309 Selecionar quadros e conjuntos de quadros . . . . . . . . . . . . . . . . . . . . . 313 Abrir um documento em um quadro . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 Salvar arquivos de quadros e de conjuntos de quadros . . . . . . . . . . . 316 Visualizao e definio de propriedades e atributos de quadros . . 318 Exibir e definir propriedades de conjuntos de quadros . . . . . . . . . . . 320 Controlar o contedo de quadros com links . . . . . . . . . . . . . . . . . . . . . 321 Lidar com um navegador que no pode exibir quadros . . . . . . . . . . .323 Utilizar comportamentos JavaScript com quadros . . . . . . . . . . . . . . .323 Captulo 11: Gerenciar modelos . . . . . . . . . . . . . . . . . . . . . . . . . . 325 Sobre modelos do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326 Criar um modelo no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 Criar modelos para um site do Contribute . . . . . . . . . . . . . . . . . . . . . . 344 Criar regies editveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .346 Criar regies repetitivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350 Usar regies opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .353 Definir atributos de tag editveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .356 Criar um modelo aninhado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357 Editar e atualizar modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 Gerenciar modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .363 Exportar e importar o contedo XML de um modelo . . . . . . . . . . . . .364 Exportar um site sem markup de modelo. . . . . . . . . . . . . . . . . . . . . . . .365 Aplicar ou remover um modelo de um documento existente. . . . . . .366 Editar contedo em um documento baseado em modelo . . . . . . . . .368
Sumrio
PARTE 4: ADICIONAR CONTEDO S PGINAS Captulo 12: Trabalhar com pginas . . . . . . . . . . . . . . . . . . . . . . 375 Sobre o trabalho com pginas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 Salvar pginas da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380 Especificar HTML em vez de CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .381 Definir propriedades de pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .381 Trabalhar com cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384 Selecionar elementos na janela do documento. . . . . . . . . . . . . . . . . . 386 Aplicar zoom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389 Utilizar o painel History (Histrico) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 Automatizar tarefas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .391 Utilizar comportamentos JavaScript para detectar navegadores e plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Visualizar e testar pginas em navegadores . . . . . . . . . . . . . . . . . . . . 399 Definir preferncias de tamanho e tempo de download . . . . . . . . . . 402 Captulo 13: Inserir e formatar texto . . . . . . . . . . . . . . . . . . . . . . 405 Formatar texto no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 Inserir texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .418 Formatar pargrafos e estruturas de documento . . . . . . . . . . . . . . . . 422 Formatao do texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 Utilizar a opo Cascading Style Sheets (Folha de estilo em cascata) para formatar texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 Verificar a ortografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443 Procurar e substituir texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444 Captulo 14: Inserir imagens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445 Sobre as imagens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445 Inserir uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448 Redimensionar uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453 Cortar uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454 Usar o Fireworks para otimizar uma imagem . . . . . . . . . . . . . . . . . . . . 455 Ajustar o brilho e o contraste de uma imagem . . . . . . . . . . . . . . . . . . . 456 Definir a nitidez de uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456 Criar uma imagem cambivel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457 Usar um editor de imagens externo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458 Aplicar comportamentos a imagens. . . . . . . . . . . . . . . . . . . . . . . . . . . . 459
Sumrio
Captulo 15: Links e navegao. . . . . . . . . . . . . . . . . . . . . . . . . . . 461 Localizaes e caminhos dos documentos. . . . . . . . . . . . . . . . . . . . . .462 Menus de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .465 Barras de navegao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .466 Sobre mapas de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 Criar links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 Gerenciar links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .479 Inserir menus de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .483 Usar as barras de navegao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .486 Usar mapas de imagens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .488 Anexar comportamentos JavaScript aos links . . . . . . . . . . . . . . . . . . . 491 Verificar links rompidos, externos e rfos . . . . . . . . . . . . . . . . . . . . . . 491 Corrigir links rompidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493 Abrir documentos vinculados no Dreamweaver. . . . . . . . . . . . . . . . . 495 Captulo 16: Trabalhar com outros aplicativos . . . . . . . . . . . . . 497 Sobre a integrao com o Fireworks e com o Flash . . . . . . . . . . . . . .497 Otimizar o ambiente de trabalho para Fireworks e Flash . . . . . . . . . 498 Trabalhar com o Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499 Trabalhar com o Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512 Captulo 17: Adicionar udio, vdeo e elementos interativos . . . 515 Sobre os arquivos de mdia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516 Inserir e editar um objeto de mdia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518 Iniciar um editor de arquivos de mdia externo . . . . . . . . . . . . . . . . . . . 521 Utilizar as Design Notes (Notas de design) com um objeto de mdia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .523 Inserir e modificar um objeto de boto Flash . . . . . . . . . . . . . . . . . . . .523 Inserir um objeto de texto do Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . .526 Inserir contedo Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .526 Fazer o download e instalar os elementos Flash . . . . . . . . . . . . . . . . . 527 Inserir elementos Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .528 Editar atributos de elementos Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 Inserir documento do FlashPaper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 Inserir contedo do Flash Video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530 Inserir filmes Shockwave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .534 Adicionar vdeo (no-Flash) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .535 Adicionar som a uma pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .535 Inserir contedo de plug-in para Netscape Navigator. . . . . . . . . . . . . 537 Inserir um controle ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 Inserir um applet Java. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
Sumrio
Utilizar comportamentos para controlar elementos de mdia . . . . . . 540 Captulo 18: Utilizar comportamentos JavaScript. . . . . . . . . . . . 541 Utilizar o painel Behaviors (Comportamentos) . . . . . . . . . . . . . . . . . . 543 Sobre os eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543 Aplicao de um comportamento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544 Anexar um comportamento ao texto . . . . . . . . . . . . . . . . . . . . . . . . . . . 545 Alterar um comportamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546 Atualizar um comportamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547 Criar novas aes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548 Fazer o download e instalar os comportamentos de outros fabricantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548 Utilizar as aes de comportamentos enviadas com o Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549
PARTE 5: TRABALHAR COM CDIGOS DE PGINA Captulo 19: Configurar o ambiente de codificao . . . . . . . . . 583 Exibir o cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583 Utilizar a rea de trabalho orientada a codificador (apenas no Windows) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585 Definir preferncias de codificao . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585 Personalizar atalhos de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589 Abrir arquivos na visualizao do cdigo por padro . . . . . . . . . . . . . 589 Definir preferncias do Validator (Validador) . . . . . . . . . . . . . . . . . . . . 590 Gerenciar bibliotecas de tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .591 Importar tags personalizadas para o Dreamweaver . . . . . . . . . . . . . 596 Utilizar um editor de HTML externo com o Dreamweaver . . . . . . . . 599 Captulo 20: Codificar no Dreamweaver . . . . . . . . . . . . . . . . . . 603 Sobre a codificao no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 604 Escrever e editar o cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .613 Procurar e substituir tags e atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . 628 Fazer alteraes rpidas em uma seleo do cdigo . . . . . . . . . . . . 630 Utilizar o material de referncia de linguagens . . . . . . . . . . . . . . . . . . .631 Imprimir o cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 632
Sumrio
Captulo 21: Otimizar e depurar o cdigo. . . . . . . . . . . . . . . . . . 633 Limpar o cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .633 Verificar se as tags e as chaves esto ajustadas . . . . . . . . . . . . . . . . .634 Verificar a compatibilidade com navegadores . . . . . . . . . . . . . . . . . . .635 Validar tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .639 Tornar pginas compatveis com XHTML . . . . . . . . . . . . . . . . . . . . . . 640 Usar o depurador ColdFusion (somente no Windows) . . . . . . . . . . . . 641 Captulo 22: Editar o cdigo na Design View (Visualizao do projeto) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 643 Editar o cdigo com o Property inspector (Inspetor de propriedades) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644 Alterar atributos com o Tag inspector (Inspetor de tags) . . . . . . . . . 644 Editar o cdigo com o Quick Tag Editor. . . . . . . . . . . . . . . . . . . . . . . . .646 Editar cdigo com o seletor de tags . . . . . . . . . . . . . . . . . . . . . . . . . . . 649 Editar scripts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650 Trabalhar com incluses do servidor. . . . . . . . . . . . . . . . . . . . . . . . . . . .652 Utilizar comportamentos JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . .653 Exibir e editar o contedo do cabealho . . . . . . . . . . . . . . . . . . . . . . . .654
PARTE 6: PREPARAR PARA A CRIAO DE SITES DINMICOS Captulo 23: Configurar um aplicativo para a Web . . . . . . . . . .657 O que necessrio para criar aplicativos para a Web. . . . . . . . . . . . . 657 Configurar um servidor da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .658 Configurar um servidor de aplicativos. . . . . . . . . . . . . . . . . . . . . . . . . . 659 Criar uma pasta raiz para o aplicativo . . . . . . . . . . . . . . . . . . . . . . . . . . .663 Definir um site do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .665 Efetuar a conexo com um banco de dados . . . . . . . . . . . . . . . . . . . . .668 Captulo 24: Conexes de banco de dados para desenvolvedores ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . 669 Conectar-se a um banco de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . .669 Editar ou excluir uma conexo de banco de dados . . . . . . . . . . . . . . . 672 Captulo 25: Conexes de banco de dados para desenvolvedores de ASP.NET. . . . . . . . . . . . . . . . . . . . . . . . . . . .673 Conectar-se a um banco de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673 Editar ou excluir uma conexo de banco de dados . . . . . . . . . . . . . . . 678
10
Sumrio
Captulo 26: Conexes de banco de dados para desenvolvedores de ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681 Sobre conexes de banco de dados no ASP . . . . . . . . . . . . . . . . . . . .681 Criar uma conexo DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684 Criao de uma conexo sem DSN . . . . . . . . . . . . . . . . . . . . . . . . . . . 688 Efetuar a conexo com um banco de dados atravs de um ISP . . . 689 Editar ou excluir uma conexo de banco de dados. . . . . . . . . . . . . . . 693 Captulo 27: Conexes de banco de dados para desenvolvedores JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695 Sobre conexes de banco de dados no JSP . . . . . . . . . . . . . . . . . . . . 695 Conectar-se a um banco de dados. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 697 Conectar-se atravs de um driver ODBC . . . . . . . . . . . . . . . . . . . . . . . 699 Editar ou excluir uma conexo de banco de dados. . . . . . . . . . . . . . . 702 Captulo 28: Conexes de banco de dados para desenvolvedores PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705 Conectar-se a um banco de dados. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705 Editar ou excluir uma conexo de banco de dados. . . . . . . . . . . . . . . 706 Captulo 29: Solucionar problemas de conexes de banco de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 709 Solucionar problemas de permisses . . . . . . . . . . . . . . . . . . . . . . . . . . 709 Solucionar mensagens de erro da Microsoft . . . . . . . . . . . . . . . . . . . . . 711 Solucionar mensagens de erro do MySQL . . . . . . . . . . . . . . . . . . . . . . 718
PARTE 7: TORNAR DINMICAS AS PGINAS Captulo 30: Otimizar a rea de trabalho para desenvolvimento visual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 721 Exibir painis de desenvolvimento de aplicativos para a Web . . . . . . 721 Exibir o banco de dados no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . 724 Exibir o Live Data na visualizao do projeto . . . . . . . . . . . . . . . . . . . 725 Trabalhar na visualizao do projeto sem o Live Data. . . . . . . . . . . . . 731 Visualizar pginas dinmicas em um navegador . . . . . . . . . . . . . . . . . 732 Restringir uma informao do banco de dados no Dreamweaver . 733
Sumrio
11
Captulo 31: Fluxo de trabalho para projetos de pginas dinmicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .735 Projetar a pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735 Criar uma fonte de contedo dinmico. . . . . . . . . . . . . . . . . . . . . . . . . . 736 Adicionar contedo dinmico a uma pgina da Web . . . . . . . . . . . . . 738 Aprimorar a funcionalidade de uma pgina dinmica . . . . . . . . . . . . .739 Testar e depurar a pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741 Captulo 32: Obter dados para a pgina . . . . . . . . . . . . . . . . . . 745 Utilizar um banco de dados para armazenar contedo. . . . . . . . . . . .745 Coletar dados enviados por usurios . . . . . . . . . . . . . . . . . . . . . . . . . . . 747 Acessar dados armazenados em variveis de sesso . . . . . . . . . . . . 752 Captulo 33: Definir as fontes de contedo dinmico . . . . . . . 759 Sobre fontes de contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . .760 Definir um recordset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765 Definir os parmetros de URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .769 Definir os parmetros de formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 771 Definir as variveis de sesso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 772 Definir variveis de aplicativo ASP e ColdFusion . . . . . . . . . . . . . . . . 773 Utilizar uma varivel como fonte de dados para um recordset ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 774 Definir variveis de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 775 Armazenar em cache as fontes de contedo . . . . . . . . . . . . . . . . . . . . 778 Alterar ou excluir as fontes de contedo . . . . . . . . . . . . . . . . . . . . . . . . 778 Copiar um recordset para outra pgina . . . . . . . . . . . . . . . . . . . . . . . . . 779 Captulo 34: Adicionar contedo dinmico a pginas da Web . 781 Sobre a adio de contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . 781 Tornar dinmico o texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 783 Tornar dinmicas as imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 785 Tornar dinmicos atributos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 786 Tornar dinmicos objetos ActiveX, Flash e outros parmetros de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 788 Editar contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 789 Excluir o contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 789 Criar pginas dinmicas em um site do Contribute . . . . . . . . . . . . . . .790
12
Sumrio
Captulo 35: Exibir registros de bancos de dados . . . . . . . . . . 793 Sobre a exibio de registros de bancos de dados . . . . . . . . . . . . . . 793 Utilizar formatos de dados predefinidos . . . . . . . . . . . . . . . . . . . . . . . . 800 Criar links de navegao para recordsets . . . . . . . . . . . . . . . . . . . . . . 802 Mostrar ou ocultar regies com base em resultados do recordset . 806 Exibir vrios resultados de recordsets . . . . . . . . . . . . . . . . . . . . . . . . . 806 Criar uma tabela com um comportamento de servidor Repeat Region (Repetir regio). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 808 Criar um contador de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 809 Captulo 36: Exibir dados XML em pginas da Web . . . . . . . . . 813 Sobre como usar XML e XSL com pginas da Web . . . . . . . . . . . . . .814 Sobre transformaes de XSL no lado servidor . . . . . . . . . . . . . . . . . .816 Sobre transformaes de XSL no lado cliente . . . . . . . . . . . . . . . . . . .819 Sobre dados XML e elementos repetidos . . . . . . . . . . . . . . . . . . . . . . 822 Sobre a visualizao de dados XML . . . . . . . . . . . . . . . . . . . . . . . . . . . 824 Executar transformaes de XSL no servidor . . . . . . . . . . . . . . . . . . . 826 Executar transformaes de XSL no cliente . . . . . . . . . . . . . . . . . . . . 842 Aplicar estilos a fragmentos XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 844 Solucionar problemas de transformaes de XSL . . . . . . . . . . . . . . . 845 Captulo 37: Usar os servios da Web . . . . . . . . . . . . . . . . . . . . 847 Sobre os servios da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 848 Configurar geradores proxy para utilizao com o Dreamweaver. . 852 Adicionar um proxy para servios da Web utilizando a descrio WSDL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 855 Adicionar um servio da Web a uma pgina . . . . . . . . . . . . . . . . . . . . 856 Editar a lista de sites de servios da Web UDDI . . . . . . . . . . . . . . . . . 859 Captulo 38: Adicionar comportamentos de servidor personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 861 Sobre os comportamentos de servidor . . . . . . . . . . . . . . . . . . . . . . . . . .861 Instalar comportamentos de servidor de terceiros . . . . . . . . . . . . . . . 873 Usar o Server Behavior Builder (Criador de comportamentos de servidor) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 874 Usar parmetros em comportamentos de servidor . . . . . . . . . . . . . . 878 Posicionar blocos de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 878 Criar uma caixa de dilogo para um comportamento de servidor personalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 880 Editar e modificar comportamentos de servidor . . . . . . . . . . . . . . . . . 883
Sumrio
13
Captulo 39: Criar formulrios. . . . . . . . . . . . . . . . . . . . . . . . . . . 885 Sobre os formulrios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .886 Criar formulrios HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 890 Inserir objetos de formulrio HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . .892 Inserir objetos de formulrio HTML dinmicos. . . . . . . . . . . . . . . . . . .898 Validar dados de formulrio HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . 902 Anexar comportamentos JavaScript a objetos de formulrio HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 903 Anexar scripts personalizados a botes de formulrio HTML. . . . . 903 Criar formulrios HTML acessveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904
PARTE 8: DESENVOLVER APLICATIVOS RAPIDAMENTE Captulo 40: Criar aplicativos ColdFusion rapidamente . . . . . 909 Sobre o desenvolvimento rpido de aplicativos (todos os servidores). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 909 Criar formulrios no ColdFusion MX 7 . . . . . . . . . . . . . . . . . . . . . . . . . . 915 Criar pginas-mestras/detalhes (ColdFusion) . . . . . . . . . . . . . . . . . . .928 Criar pginas de busca/resultados (ColdFusion, ASP, JSP, PHP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .937 Criar uma pgina de insero de registros (todos os servidores) . . 944 Criar pginas para atualizar um registro (ColdFusion) . . . . . . . . . . . 948 Criar pginas para excluir um registro (ColdFusion) . . . . . . . . . . . . . 955 Utilizar os procedimentos armazenados para modificar bancos de dados (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 965 Criar pginas que restrinjam o acesso ao site (ColdFusion, ASP, JSP, PHP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .966 Proteger uma pasta em em seu aplicativo (ColdFusion) . . . . . . . . . . 977 Utilizar componentes ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 978 Captulo 41: Criar aplicativos ASP.NET rapidamente . . . . . . . .987 Criar formulrios ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 987 Criar controles da WeB DataGrid e DataList do ASP.NET . . . . . . 992 Criar pginas-mestras/detalhes (ASP.NET) . . . . . . . . . . . . . . . . . . . . .997 Criar uma pgina de busca do banco de dados (ASP.NET) . . . . . .1004 Criar uma pgina de insero de registros (ASP.NET) . . . . . . . . . . . 1010 Criar pginas para atualizar um registro (ASP.NET) . . . . . . . . . . . . . . 1011 Criar pginas para excluir um registro (ASP.NET). . . . . . . . . . . . . . .1020 Utilizar procedimentos armazenados para modificar bancos de dados (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1030 Criar pginas que restringem o acesso ao site (ASP.NET) . . . . . . . 1031
14
Sumrio
Captulo 42: Criar aplicativos ASP e JSP rapidamente. . . . . 1033 Criar pginas-mestras/detalhes (ASP e JSP) . . . . . . . . . . . . . . . . . . Criar pginas de busca/resultados (ASP e JSP). . . . . . . . . . . . . . . . Criar uma pgina de insero de registro (ASP e JSP) . . . . . . . . . . Criar pginas para atualizar um registro (ASP e JSP) . . . . . . . . . . . Criar pginas para excluso de um registro (ASP e JSP) . . . . . . . . Criar pginas com objetos avanados de manipulao de dados (ASP e JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Criar pginas que restrinjam o acesso ao site (ASP e JSP) . . . . . . Utilizar o JavaBeans (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1033 1038 1038 1038 1045 1049 1054 1054
Captulo 43: Criar aplicativos PHP rapidamente . . . . . . . . . . .1057 Criar pginas-mestras/detalhes (PHP) . . . . . . . . . . . . . . . . . . . . . . . . 1057 Criar pginas de busca/resultados (PHP). . . . . . . . . . . . . . . . . . . . . . 1064 Criar uma pgina de insero de registros (PHP) . . . . . . . . . . . . . . . 1064 Criar pginas para atualizar um registro (PHP) . . . . . . . . . . . . . . . . . 1064 Criar pginas para excluir um registro (PHP) . . . . . . . . . . . . . . . . . . . 1072 Criar pginas que restringem o acesso ao site (PHP) . . . . . . . . . . . . 1081
PARTE 9: APNDICES Apndice A: Guia do iniciante em bancos de dados . . . . . . . . 1085 Sobre os bancos de dados. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1085 Conceitos bsicos do projeto de um banco de dados . . . . . . . . . . . 1086 Conexes de bancos de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1094 Apndice B: Manual bsico de SQL . . . . . . . . . . . . . . . . . . . . . . 1101 Princpios bsicos de sintaxe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1101 Definir as colunas de um recordset . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1103 Limitar o nmero de registros de um recordset . . . . . . . . . . . . . . . . . . 1103 Ordenar os registros em um recordset . . . . . . . . . . . . . . . . . . . . . . . . . 1107 Unir tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1107 ndice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1109
Sumrio
15
16
Sumrio
PARTE 1
Princpios bsicos do Dreamweaver

Aprenda a utilizar a documentao e outros recursos do Macromedia Dreamweaver 8, bem como a configurar a rea de trabalho do programa de acordo com suas preferncias de trabalho. Planeje e configure um site e comece a criar pginas. Esta seo contm os seguintes captulos:
Introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Captulo 1: Explorar a rea de trabalho. . . . . . . . . . . . . . . . . . . . . . . .43 Captulo 2: Configurar um site do Dreamweaver. . . . . . . . . . . . . . . 87 Captulo 3: Criar e abrir documentos . . . . . . . . . . . . . . . . . . . . . . . . 101
17
Introduo
O Dreamweaver MX2004 da Macromedia um editor de HTML profissional para desenhar, codificar e desenvolver sites, pginas e aplicativos para a Web. Para aqueles que gostam do controle da codificao manual HTML ou para os que preferem trabalhar em um ambiente de edio visual, o Dreamweaver fornece ferramentas teis para aprimorar a sua experincia de criao para Web. Os recursos de edio visual do Dreamweaver permitem criar pginas, de modo rpido, sem que seja necessrio escrever uma nica linha de cdigo. possvel visualizar todos os elementos ou propriedades do site e arrast-los de um painel fcil de usar diretamente para um documento. Dinamize o fluxo de trabalho de desenvolvimento de sites criando e editando as imagens no Fireworks da Macromedia ou em outro aplicativo grfico e, posteriormente, importando-as diretamente para o Dreamweaver ou incluindo objetos do Flash da Macromedia. O Dreamweaver tambm fornece um ambiente de codificao completo que inclui ferramentas de edio de cdigos (como codificao por cores e preenchimento de tags) e material de referncia de linguagens sobre Cascading Style Sheets (Folha de estilo em cascata) (CSS), JavaScript e ColdFusion Markup Language (CFML), entre outros. A tecnologia HTML do Macromedia Roundtrip permite importar documentos HTML codificados manualmente sem reformatar o cdigo; em seguida, voc pode optar por reformatar o cdigo, aplicando o seu estilo de formatao preferido. O Dreamweaver tambm permite criar aplicativos dinmicos e com suporte de banco de dados para a Web, utilizando tecnologia de servidor como CFML, ASP.NET, ASP, JSP e PHP. O Dreamweaver inteiramente personalizvel. Crie os seus prprios objetos e comandos, modifique os atalhos de teclado e adicione cdigos JavaScript para ampliar ainda mais os recursos do Dreamweaver com novos comportamentos, Property inspectors (Inspetores de propriedades) e relatrios de site.
19
Este captulo contm as seguintes sees:

Novidades do Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Onde iniciar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Fluxo de trabalho do Dreamweaver para criar sites da Web . . . . . . . . . . . . . . . . . . . 28 Utilizar o Dreamweaver com outros aplicativos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Dreamweaver e acessibilidade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Guia para a mdia de treinamento do Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Convenes tipogrficas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Recursos de tecnologias da Web e HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Novidades do Dreamweaver 8
O Dreamweaver 8 inclui vrios recursos novos que melhoram a utilizao e ajudam a criar pginas nos ambientes de criao e de codificao. O Dreamweaver 8 oferece suporte s melhores prticas e padres da indstria, incluindo suporte utilizao avanada do CSS, leitores RSS e XML, e requisitos de acessibilidade.
Trabalhar com as melhores prticas
Autoria visual com dados XML Ganhe velocidade com XML utilizando ferramentas visuais poderosas para integrar leitores ao trabalho e acabe com o mistrio da converso de XML para HTML. Integrate dados baseados em XML, como leitores RSS, a pginas da Web utilizando um simples fluxo de trabalho de arrastar e soltar. Passe para a visualizao de cdigo a fim de personalizar a transformao, utilizando referncias de cdigo aprimoradas para XML e XSLT. Para obter mais informaes, consulte Captulo 36, Exibir dados XML em pginas da Web, na pgina 813. O painel do CSS, novo e unificado, um local central para estudar, compreender e trabalhar com os estilos CSS aplicados s pginas de um modo visual. Toda a funcionalidade do CSS consolidada em um nico painel, que foi definido e aprimorado para facilitar o trabalho com os estilos CSS e torn-lo mais produtivo. A nova interface facilita a visualizao da cascata de estilos aplicados a um elemento especfico, de modo que voc pode facilmente identificar onde os atributos esto definidos. Uma grade de propriedades permite fazer edies rpidas. Para obter mais informaes, consulte Utilizar o painel CSS Styles (Estilos CSS) na pgina 433.
Painel do CSS novo e unificado
20
Introduo
Trabalhar com as melhores prticas

Visualizao do layout CSS Aplique auxlios visuais na fase de projeto para fazer o contorno de bordas de layout CSS ou colorir layouts CSS. A aplicao de auxlios visuais revela esquemas complexos de aninhamento e melhora a seleo. Clique no layout do CSS para obter dicas de ferramentas valiosas que vo ajud-lo a compreender os elementos que controlam o projeto. Consulte Captulo 7, Criar layouts de pginas com CSS, na pgina 219. Barra de ferramentas Style Visualize o contedo do mesmo modo que os usurios, no Rendering (Processamento importando o mecanismo de entrega, com o novo suporte para de estilo) tipos de mdia CSS. Utilize a barra de ferramentas Style Rendering para alternar para a visualizao do projeto e ver como ele ficar ao ser impresso ou ao ser apresentado em um dispositivo porttil ou na tela. Consulte A barra de ferramentas Style Rendering na pgina 54. Aprimoramentos no processamento de CSS Veja como os layouts de CSS complexos sero processados na maioria dos navegadores, com aprimoramentos substanciais na preciso da visualizao do projeto. Agora o Dreamweaver oferece suporte total a tcnicas avanadas de CSS, como estouro, pseudo-elementos e elementos de formulrio. Alm da ferramenta integrada de avaliao da acessibilidade referente Seo 508 e os pontos de verificao de prioridade 1 da WCAG, agora o Dreamweaver suporta o CSS e a acessibilidade utilizando uma ferramenta de avaliao atualizada que inclui pontos de verificao de prioridade 2 da WCAG. Agora no Dreamweaver 8, o WebDAV suporta autenticao resumida e SSL para transferncia segura de arquivos, e oferece conectividade aprimorada com um conjunto maior de servidores. Consulte Utilizar o protocolo WebDAV para devolver e retirar arquivos na pgina 151.
Acessibilidade: Suporte para pontos de verificao de prioridade 2 da WCAG/ W3C
WebDAV aprimorado
21
Obtenha mais resultados em menos tempo com fluxos de trabalho de usurio aprimorados que reduzem o tempo necessrio para completar tarefas comuns. O Dreamweaver 8 simplifica os pequenos detalhes para que voc possa gastar mais tempo desenhando e desenvolvendo sites da Web e aplicativos que sejam interessantes.
Obtenha mais resultados
Transferncia de arquivos em segundo plano Zoom Continue trabalhando enquanto o Dreamweaver 8 faz o upload de arquivos para o servidor. Para obter mais informaes, consulte Gerenciar transferncias de arquivos na pgina 160. Tenha um controle maior sobre o seu desenho com o zoom. Amplie uma imagem e inspecione-a ou trabalhe com um layout complexo de tabela aninhada. Reduza o zoom para visualizar a aparncia que uma pgina ter. Para obter mais informaes, consulte Aplicar zoom na pgina 389. Compare o layout de pgina a esboos de pginas com a preciso de pixels perfeitos, utilizando guias para medir layouts de pgina. A visualizao das alteraes ajuda a medir distncias com preciso e suporta encaixes inteligentes. Para obter mais informaes, consulte Utilizar guias na pgina 251. A nova barra de ferramentas Coding fornece botes para recursos comuns de codificao em uma barra da medianiz ao longo da lateral da visualizao de cdigo. Para obter mais informaes, consulte Inserir cdigo rapidamente com a barra de ferramentas Coding (Codificao) na pgina 617. Concentre-se apenas no cdigo que voc deseja ver, ocultando e expandindo blocos de cdigo. Para obter mais informaes, consulte Reduzir e expandir fragmentos de cdigo na pgina 623.
Guias
Barra de ferramentas Coding (Codificao)
Reduo de cdigo
Layouts da rea de trabalho Personalize e salve configuraes da rea de trabalho. O Dreamweaver 8 fornecido com quatro configuraes diferentes, feitas sob medida para as necessidades de designers e codificadores. Tambm possvel criar uma rea de trabalho personalizada. Para obter mais informaes, consulte Salvar layouts personalizados da rea de trabalho na pgina 80. Documentos com guias para Macintosh Novas guias de documentos no Mac ajudam a simplificar a interface do usurio e facilitam a seleo de documentos. Para obter mais informaes, consulte Exibir documentos com guias (Macintosh) na pgina 79. Novos layouts e desenhos permitem criar sites rapidamente.
Novas pginas do iniciante
22
Introduo
Obtenha mais resultados

Sincronia do site e sistema de devolues/retiradas aprimorados Gerencie sites com mais confiabilidade. Os recursos de sincronizao aprimorada de sites ajudam a garantir que o arquivo que est em uso a verso mais recente. Evite substituies acidentais do trabalho de outras pessoas utilizando uma funcionalidade aprimorada de devolues e retiradas. Para obter mais informaes, consulte Sincronizar os arquivos nos sites local e remoto na pgina 161. Compare arquivos rapidamente para identificar quais foram as alteraes. Voc pode comparar dois arquivos locais, um arquivo do computador local e um do computador remoto ou dois arquivos do computador remoto. Utilize sua ferramenta favorita de comparao de arquivos com o Dreamweaver, nas plataformas Macintosh e Windows. Para obter mais informaes, consulte Comparar arquivos para conhecer as diferenas na pgina 126. Com as novas opes de colagem do Dreamweaver, voc pode reter toda a formatao de origem criada no Microsoft Word ou apenas colar o texto. Para obter mais informaes, consulte Adicionar texto a um documento na pgina 418.
Comparar arquivos
Paste Special (Colar especial)
Referncias relativas a sites Trabalhe de forma totalmente integrada com incluses do servidor na fase de projeto e execuo, certificando-se de que as referncias so relativas a sites e no a arquivos locais. Para obter mais informaes, consulte Definir o caminho relativo de novos links na pgina 473. Aprimoramentos na edio de cdigos Tenha um maior controle sobre como o Dreamweaver fornece referncias de cdigo e tags completas que se ajustam ao seu estilo de cdigo.
23
O Dreamweaver 8 suporta esforos para assimilar e tirar proveito de novas tecnologias, incluindo PHP 5, Flash Video, ColdFusion MX 7 e o Macromedia Web Publishing System.
Integrado s tecnologias e aos padres mais recentes
Suporte ao ColdFusion MX O suporte atualizado ao ColdFusion MX 7 inclui novos 7 comportamentos de servidor e referncias de cdigo. Para estabelecer a correspondncia das referncias de cdigo e da depurao com a verso correta do ColdFusion, o Dreamweaver detecta automaticamente a verso do servidor na primeira conexo com o site. A estreita integrao do Dreamweaver com o ColdFusion permite adicionar e remover bancos de dados diretamente no painel Databases (Bancos de dados) e visualizar apenas os componentes ColdFusion definidos no site atual. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916. Suporte ao PHP 5 Flash Video Tire proveito do suporte atualizado ao PHP 5, incluindo comportamentos de servidor e referncias de cdigo. Insira um arquivo Flash Video com rapidez e facilidade em uma pgina da Web. Para obter mais informaes, consulte Inserir contedo do Flash Video na pgina 530. Controle tudo que ocorre no seu site. Os eventos do Dreamweaver so notificados ao servidor do Macromedia Web Publishing System, de modo que so registradas todas as alteraes de um site da Web no sistema WPS. Consulte novo contedo de referncia para XML, XSLT e XPath, e contedo atualizado para ASP e JSP.
Macromedia Web Publishing System: notificao e registro de eventos Material de referncia atualizado de O'Reilly
Onde iniciar
A documentao do Dreamweaver inclui informaes para leitores de vrios nveis. Para tirar o melhor proveito desta documentao, inicie lendo as partes mais adequadas ao seu nvel de experincia. Para obter informaes sobre recursos do Dreamweaver, consulte Guia para a mdia de treinamento do Dreamweaver na pgina 36.
Novidades do projeto da Web

Se voc estiver comeando a criar desenhos da Web, esta seo indicar as sees da documentao do Dreamweaver mais apropriadas para o seu nvel de experincia.
24
Introduo
Para iniciantes em desenho da Web:

1. 2.
Inicie pela leitura dos tutoriais no Getting Started in Dreamweaver. Em Usando o Dreamweaver (Help [Ajuda]> Using Dreamweaver [Usando o Dreamweaver]), leia Captulo 1, Explorar a rea de trabalho, na pgina 43, Captulo 2, Configurar um site do Dreamweaver, na pgina 87, Captulo 4, Gerenciar arquivos, na pgina 113 e Captulo 3, Criar e abrir documentos, na pgina 101. Aprenda sobre layouts de pginas no Captulo 9, Criao de pginas no modo Layout, na pgina 283. Para saber como formatar texto e incluir imagens nas pginas, consulte o Captulo 13, Inserir e formatar texto, na pgina 405 e o Captulo 14, Inserir imagens, na pgina 445.
3.
4.
Isso tudo de voc precisa para comear a produzir sites da Web de alta qualidade. Quando estiver pronto para aprender a utilizar ferramentas mais avanadas, poder continuar lendo os captulos restantes sobre pginas estticas, em Usando o Dreamweaver. Talvez seja mais conveniente adiar a leitura dos captulos sobre pginas dinmicas para quando estiver criando pginas da Web.
Designers da Web experientes

Se voc for um designer experiente da Web, esta seo indicar as sees da documentao do Dreamweaver mais adequadas ao seu nvel de experincia. Existem dois mtodos diferentes: um para designers iniciantes do Dreamweaver e outro para designers experientes do Dreamweaver que gostariam de aprender mais sobre a criao de pginas dinmicas.
Para os designers experientes da Web que ainda no trabalharam com o Dreamweaver:
1. 2.
Inicie pela leitura dos tutoriais no Getting Started in Dreamweaver. Em Usando o Dreamweaver, leia Captulo 1, Explorar a rea de trabalho, na pgina 43 para aprender mais sobre a interface de usurio do Dreamweaver. Embora provavelmente voc esteja familiarizado com grande parte do contedo em Captulo 2, Configurar um site do Dreamweaver, na pgina 87 e Captulo 4, Gerenciar arquivos, na pgina 113, examine esses captulos para saber como os conceitos j conhecidos so implementados no Dreamweaver. D ateno especial s sees que tratam da configurao de um site do Dreamweaver. Para obter informaes teis sobre os detalhes da utilizao do Dreamweaver na criao de pginas HTML bsicas, consulte Captulo 13, Inserir e formatar texto, na pgina 405 e Captulo 14, Inserir imagens, na pgina 445.
3.
4.
Onde iniciar
25
5.
Para obter informaes sobre a codificao no Dreamweaver, consulte Configurar o ambiente de codificao na pgina 583, Codificar no Dreamweaver na pgina 603, Otimizar e depurar o cdigo na pgina 633 e Editar o cdigo na Design View (Visualizao do projeto) na pgina 643. Consulte a viso geral, no incio de cada um dos outros captulos em Usando o Dreamweaver para verificar se os tpicos so de seu interesse.
6.
Para os designers experientes da Web, que j esto familiarizados com o Dreamweaver, e desejam aprender a criar pginas dinmicas:
1.
Inicie pela leitura de Appendix A, Understanding Web Applications e Tutorial: Developing a Web Application no Getting Started with Dreamweaver. Em Usando o Dreamweaver, leia o Captulo 1, Explorar a rea de trabalho, na pgina 43 para aprender sobre os novos aspectos da interface de usurio do Dreamweaver e depois leia Otimizar a rea de trabalho para desenvolvimento visual na pgina 721. Familiarize-se com o fluxo de trabalho do Dreamweaver para pginas dinmicas lendo Fluxo de trabalho para projetos de pginas dinmicas na pgina 735. Configure um servidor da Web e um servidor de aplicativos. Consulte Captulo 23, Configurar um aplicativo para a Web, na pgina 657. Conecte-se a um banco de dados. Consulte Efetuar a conexo com um banco de dados na pgina 668. Leia a viso geral, no incio de cada um dos outros captulos em Usando o Dreamweaver, para verificar se os tpicos so de seu interesse. Se estiver interessado em personalizar manualmente o Dreamweaver, leia Customizing Dreamweaver (Personalizao do Dreamweaver) no Centro de Suporte da Macromedia, em www.macromedia.com/go/customizing_dreamweaver. Se desejar criar extenses para o Dreamweaver, leia Extending Dreamweaver (Extenso dos recursos do Dreamweaver).
2.
3.
4.
5.
6.
7.
Codificadores manuais experientes

Se voc for um codificador manual experiente, esta seo indicar as sees da documentao do Dreamweaver mais adequadas ao seu nvel de experincia.
Para os codificadores manuais experientes:
1.
Em Usando o Dreamweaver, leia Captulo 1, Explorar a rea de trabalho, na pgina 43 para aprender mais sobre a interface de usurio do Dreamweaver.
26
Introduo
2.
Embora voc esteja provavelmente familiarizado com grande parte do contedo em Captulo 2, Configurar um site do Dreamweaver, na pgina 87 e Captulo 4, Gerenciar arquivos, na pgina 113, examine esses captulos para saber como os conceitos j conhecidos so implementados no Dreamweaver. D ateno especial s sees que tratam da configurao de um site do Dreamweaver. Para mais detalhes sobre codificao com o Dreamweaver, consulte o Captulo 19, Configurar o ambiente de codificao, na pgina 583, Captulo 20, Codificar no Dreamweaver, na pgina 603, Captulo 21, Otimizar e depurar o cdigo, na pgina 633 e Captulo 22, Editar o cdigo na Design View (Visualizao do projeto), na pgina 643. Leia a viso geral, no incio de cada um dos outros captulos em Usando o Dreamweaver, para verificar se os tpicos so de seu interesse.
3.
4.
Desenvolvedores de aplicativos para a Web

Se voc for um desenvolvedor de aplicativos para a Web, esta seo indicar as sees da documentao do Dreamweaver mais apropriadas ao seu nvel de experincia. H dois mtodos diferentes: um para quem j utilizou o Dreamweaver anteriormente e outro para aqueles que ainda no o utilizaram.
Para os desenvolvedores de aplicativos para a Web que ainda no utilizaram o Dreamweaver:
1.
Inicie pela leitura rpida de Getting Started with Dreamweaver para familiarizar-se com os conceitos bsicos sobre a utilizao do Dreamweaver. Em Usando o Dreamweaver, leia Captulo 1, Explorar a rea de trabalho, na pgina 43 para aprender mais sobre a interface de usurio do Dreamweaver. Embora voc esteja provavelmente familiarizado com grande parte do contedo em Captulo 2, Configurar um site do Dreamweaver, na pgina 87 e Captulo 4, Gerenciar arquivos, na pgina 113, examine esses captulos para saber como os conceitos j conhecidos so implementados no Dreamweaver. D ateno especial s sees que tratam da configurao de um site do Dreamweaver. Configurar um servidor da Web e um servidor de aplicativos utilizando o Dreamweaver. Consulte Captulo 23, Configurar um aplicativo para a Web, na pgina 657. Conecte-se a um banco de dados. Consulte Efetuar a conexo com um banco de dados na pgina 668. Leia a viso geral, no incio de cada um dos outros captulos em Usando o Dreamweaver, para verificar se os tpicos so de seu interesse.
2.
3.
4.
5.
6.
Onde iniciar
27
Para os desenvolvedores experientes de aplicativos para a Web que j utilizaram o Dreamweaver:

1. 2.
Comece pela leitura de Novidades do Dreamweaver 8 na pgina 20. Em Usando o Dreamweaver, leia o Captulo 1, Explorar a rea de trabalho, na pgina 43 para aprender sobre os novos aspectos da interface de usurio do Dreamweaver. Se estiver interessado em personalizar manualmente o Dreamweaver, leia Customizing Dreamweaver (Personalizao do Dreamweaver) no Centro de Suporte da Macromedia, em www.macromedia.com/go/customizing_dreamweaver. Se desejar criar extenses para o Dreamweaver, leia Extending Dreamweaver.
3.
Fluxo de trabalho do Dreamweaver para criar sites da Web

H diversos mtodos possveis para se criar um site da Web. O fluxo de trabalho apresentado nesta documentao inicia-se pela definio da estratgia ou dos objetivos de um 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 usurio projetar a aparncia do site. Quando o projeto estiver completo, sero criados o site e as pginas de cdigo, adicionando o contedo e a interatividade. Em seguida, as pginas sero vinculadas e a funcionalidade do site ser testada para verificar se atende aos objetivos definidos. possvel incluir tambm pginas dinmicas no site. No final do ciclo, o site publicado em um servidor. Muitos programadores efetuam ainda uma manuteno peridica para assegurar que o site permanea atualizado e funcional.
Planejar o site
O cuidado no planejamento e na organizao do site desde o incio pode economizar tempo posteriormente. A organizao do site no consiste apenas em determinar onde os arquivos sero armazenados, mas tambm examinar os requisitos e objetivos do site, bem como o perfil do pblico-alvo. Alm disso, necessrio considerar certos requisitos tcnicos, como o acesso dos usurios e tambm as restries do navegador, dos plug-ins e de download. Quando as informaes estiverem organizadas e a estrutura tiver sido determinada, possvel iniciar a criao do seu site.
28
Introduo
Utilize o painel Files (Arquivos) do Dreamweaver para configurar a estrutura organizacional do site. No painel Files, possvel adicionar, excluir e renomear arquivos e pastas com facilidade para alterar a organizao de acordo com as suas necessidades. (Consulte Captulo 2, Configurar um site do Dreamweaver, na pgina 87 e Captulo 4, Gerenciar arquivos, na pgina 113). Inicie criando pginas simples que podero se tornar mais complexas posteriormente. Crie novas pginas em branco ou pginas baseadas em projetos de pgina predefinidos. Consulte Captulo 3, Criar e abrir documentos, na pgina 101.
Caso voc faa parte de uma equipe de desenvolvimento para a Web, os tpicos a seguir podero ser do seu interesse:
Configure um sistema para evitar que os membros da equipe substituam os arquivos. Consulte Devolver e retirar arquivos na pgina 148. Utilize as Design Notes (Notas de design) para se comunicar com os membros da equipe da Web. Consulte Armazenar informaes sobre arquivos nas Design Notes na pgina 167.
Gerenciar arquivos de sites

Os painis Files e Assets (Propriedades) do Dreamweaver facilitam o gerenciamento de arquivos de site.
No painel Files do Dreamweaver, voc obter vrias ferramentas para ajudar a gerenciar o site, transferir arquivos de/para um servidor remoto, configurar um processo de devoluo/retirada, para evitar que os arquivos sejam substitudos, e sincronizar os arquivos nos seus sites local e remoto. Consulte Gerenciar arquivos na pgina 113. O painel Assets permite organizar facilmente as propriedades em um site. A maioria das propriedades pode ser arrastada diretamente do painel Assets para um documento do Dreamweaver. Consulte Captulo 5, Gerenciar bibliotecas e propriedades de sites, na pgina 177. Voc pode utilizar o Dreamweaver para gerenciar aspectos dos sites do Contribute. Consulte Captulo 6, Gerenciar sites do Contribute com o Dreamweaver, na pgina 201.
Criar o layout de pginas da Web

O Dreamweaver oferece a flexibilidade necessria durante os processos de teste e criao de um layout final para as pginas. Escolha sua tcnica de layout preferida ou utilize as opes de layout do Dreamweaver juntas para criar uma aparncia para o seu site.
29
Voc pode utilizar os estilos de posicionamento CSS ou as camadas do Dreamweaver para criar um layout. Consulte Captulo 7, Criar layouts de pginas com CSS, na pgina 219. As ferramentas de tabelas e a visualizao de layout no Dreamweaver permitem projetar rapidamente as pginas da Web, atravs do desenho e da reorganizao da estrutura da pgina. (Consulte Captulo 8, Apresentar contedo com tabelas, na pgina 257 e Captulo 9, Criao de pginas no modo Layout, na pgina 283). Para exibir vrios documentos simultaneamente em um navegador da Web, possvel criar documentos utilizando quadros. Consulte Captulo 10, Utilizao de quadros, na pgina 303. Os modelos do Dreamweaver permitem aplicar facilmente projetos de pginas e contedo reutilizveis ao site. Novas pginas 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 Captulo 11, Gerenciar modelos, na pgina 325.
Adicionar contedo a pginas

Com o Dreamweaver, possvel adicionar facilmente diversos tipos de contedo s pginas da Web. Adicione propriedades e elementos de projeto, como texto, imagens, cores, filmes, som e outras formas de mdia.
Os recursos de criao de pginas do Dreamweaver permitem especificar propriedades de pginas da Web, como ttulos, imagens de fundo e cores. Alm disso, o Dreamweaver fornece ferramentas para ajudar a maximizar o desempenho do site da Web e testar as pginas para garantir a compatibilidade com diversos navegadores da Web. Consulte Captulo 12, Trabalhar com pginas, na pgina 375. Digite diretamente em um documento do Dreamweaver ou importe o texto de outros documentos e, em seguida, formate o texto utilizando o Property inspector (Inspetor de propriedades) do Dreamweaver. possvel criar facilmente as suas prprias folhas de estilos em cascata (CSS). Consulte Captulo 13, Inserir e formatar texto, na pgina 405. Insira imagens, incluindo imagens cambiveis, mapas de imagens e imagens cortadas do Fireworks, e utilize as ferramentas de alinhamento para posicionar as imagens em uma pgina. Tambm possvel redimensionar imagens diretamente no Dreamweaver. (Consulte Captulo 14, Inserir imagens, na pgina 445 e Captulo 16, Trabalhar com outros aplicativos, na pgina 497). Com o Dreamweaver, possvel criar links HTML padro, incluindo links ncora e de correio eletrnico ou configurar facilmente sistemas de navegao grfica, como menus de salto e barras de navegao. Consulte Captulo 15, Links e navegao, na pgina 461.
30
Introduo
Insira outros tipos de mdia numa pgina da Web, como filmes Flash, Shockwave e QuickTime, som e miniaplicativos. Consulte Captulo 17, Adicionar udio, vdeo e elementos interativos, na pgina 515. Utilize os comportamentos para realizar tarefas em resposta a determinados eventos, como o realce de um boto quando o visitante passar o ponteiro sobre ele, a validao de um formulrio quando o visitante clicar no boto Submit (Enviar) ou a abertura de uma segunda janela do navegador quando a pgina principal terminar de ser carregada. Consulte Captulo 18, Utilizar comportamentos JavaScript, na pgina 541.
Codificao manual
A codificao manual de pginas outro mtodo de criao de pginas. O Dreamweaver fornece ferramentas de edio visual fceis de usar, alm de um sofisticado ambiente de codificao. Voc pode utilizar um dos mtodos, ou ambos, para criar e editar suas pginas.
possvel trabalhar em um ambiente de codificao sem utilizar as ferramentas visuais. Essas ferramentas ajudam a criar e editar o cdigo, format-lo e verificar sua compatibilidade com os padres. Consulte Captulo 19, Configurar o ambiente de codificao, na pgina 583, Captulo 20, Codificar no Dreamweaver, na pgina 603 e Captulo 21, Otimizar e depurar o cdigo, na pgina 633. possvel tambm utilizar as ferramentas de codificao no modo de visualizao do projeto, que o ambiente de criao visual do Dreamweaver. Consulte Captulo 22, Editar o cdigo na Design View (Visualizao do projeto), na pgina 643.
Configurar um aplicativo para a Web

Vrios sites da Web contm pginas dinmicas que permitem aos visitantes exibir as informaes armazenadas em bancos de dados. Alm disso, alguns visitantes podem adicionar informaes aos bancos de dados e edit-las. Para criar essas pginas, necessrio executar vrias etapas preparatrias.
Configurar um servidor da Web e um servidor de aplicativos, em seguida, criar ou modificar um site do Dreamweaver. Consulte Captulo 23, Configurar um aplicativo para a Web, na pgina 657. Conecte-se a um banco de dados. Consulte Efetuar a conexo com um banco de dados na pgina 668.
31
Criar pginas dinmicas

No Dreamweaver, possvel definir vrias origens de contedo dinmico, inclusive recordsets extrados de bancos de dados, parmetros de formulrio e componentes de software reutilizveis para Java. Para adicionar o contedo dinmico a uma pgina, basta arrast-lo at a pgina. A pgina pode ser definida para exibir um ou muitos registros de uma s vez, mais de uma pgina de registros, adicionar links especiais para que se possa passar de uma pgina de registros prxima (e retornar) e criar contadores de registros, para ajudar os usurios a controlar os registros.
Se voc no estiver familiarizado com a criao de aplicativos para a Web no Dreamweaver, aprenda a utilizar o Dreamweaver para criar pginas dinmicas. (Consulte Captulo 30, Otimizar a rea de trabalho para desenvolvimento visual, na pgina 721 e Captulo 31, Fluxo de trabalho para projetos de pginas dinmicas, na pgina 735). Defina e exiba o contedo dinmico nas suas pginas. Consulte Captulo 32, Obter dados para a pgina, na pgina 745, Captulo 33, Definir as fontes de contedo dinmico, na pgina 759, Captulo 34, Adicionar contedo dinmico a pginas da Web, na pgina 781 e Captulo 35, Exibir registros de bancos de dados, na pgina 793. Encapsule aplicativos ou lgica empresarial utilizando tecnologias avanadas, como os servios da Web e os componentes do Macromedia ColdFusion. (Consulte Utilizar componentes ColdFusion na pgina 978 e Captulo 37, Usar os servios da Web, na pgina 847). Se necessitar de mais flexibilidade, crie os seus prprios comportamentos de servidor e formulrios interativos. (Consulte Captulo 38, Adicionar comportamentos de servidor personalizados, na pgina 861 e Captulo 39, Criar formulrios, na pgina 885).
Desenvolvimento rpido de aplicativos

O Dreamweaver oferece vrias ferramentas de desenvolvimento rpido 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 gerar um cdigo do servidor.
Crie rapidamente pginas que efetuam buscas e modificam bancos de dados, alm de exibir os resultados da pesquisa. Oferea segurana restringindo o acesso s pginas. Consulte Criar aplicativos ColdFusion rapidamente na pgina 909, Criar aplicativos ASP.NET rapidamente na pgina 987, Criar aplicativos ASP e JSP rapidamente na pgina 1033 e Criar aplicativos PHP rapidamente na pgina 1057.
32
Introduo
Utilizar o 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 informaes sobre o trabalho com outros aplicativos, como navegadores, editores de HTML e de imagens, e ferramentas de animao, consulte os seguintes tpicos:
Para obter informaes sobre a utilizao do Dreamweaver com outros editores de HTML, como HomeSite ou BBEdit, consulte Utilizar um editor de HTML externo com o Dreamweaver na pgina 599. possvel especificar os navegadores preferidos para visualizar o site. Consulte Visualizar e testar pginas em navegadores na pgina 399. possvel iniciar um editor de imagens externo, como o Macromedia Fireworks ou o Adobe Photoshop, no Dreamweaver. Consulte Usar um editor de imagens externo na pgina 458. possvel configurar o Dreamweaver para iniciar um editor diferente de acordo com o tipo de arquivo. Consulte Iniciar um editor de arquivos de mdia externo na pgina 521. Para obter informaes sobre como adicionar interatividade no seu site utilizando o Macromedia Flash, consulte Inserir e modificar um objeto de boto Flash na pgina 523,Inserir um objeto de texto do Flash na pgina 526 ou Fazer o download e instalar os elementos Flash na pgina 527. Para obter informaes sobre como utilizar o ColdFusion, consulte Using ColdFusion (Usando o ColdFusion) (Help> Using ColdFusion).
Dreamweaver e acessibilidade
A acessibilidade refere-se a projetar sites e produtos da Web teis para portadores de deficincia auditiva, visual, motora e outras. Os exemplos de recursos de acessibilidade para produtos de software e sites da Web incluem suporte leitora de tela, equivalentes de texto para grfico, atalhos de teclado, alterao de cores para alto contraste, etc.
N O TA
Para obter mais informaes sobre duas iniciativas de acessibilidade importantes, consulte World Wide Web Consortium Web Accessibility Initiative (www.w3.org/wai) e a seo 508 da Lei Federal sobre Reabilitao dos Estados Unidos (www.section508,gov).
O Dreamweaver fornece ferramentas que tornam o produto acessvel e ajudam a criar contedo acessvel.
33
Utilizao de recursos de acessibilidade do Dreamweaver Para os designers da Web do Dreamweaver que precisam utilizar recursos de acessibilidade, o Dreamweaver oferece suporte para leitoras de tela, navegao por teclado e acessibilidade do sistema operacional.
Para obter mais informaes, consulte Utilizar os recursos de acessibilidade do Dreamweaver na pgina 70.
Autoria para acessibilidade Para os designers da Web do Dreamweaver que precisam criar contedo acessvel, o Dreamweaver ajuda a produzir pginas acessveis com contedo til para leitoras de tela que seguem as diretrizes do governo.
O Dreamweaver oferece caixas de dilogo onde voc deve fornecer atributos de acessibilidade ao inserir elementos de pgina (consulte Otimizar a rea de trabalho para o projeto de pgina acessvel na pgina 76). Por exemplo, a caixa de dilogo de acessibilidade para imagens lembra que voc deve adicionar equivalentes em texto aos diagramas. Em seguida, quando a imagem aparece na pgina para um usurio com deficincia visual, a leitora de tela l a descrio. O Dreamweaver tambm fornece exemplos de pginas da Web projetadas para oferecer acessibilidade (consulte Criar um documento com base em um arquivo de projeto do Dreamweaver na pgina 103) e um relatrio de acessibilidade que voc pode executar para testar sua pgina ou site em relao s diretrizes de acessibilidade contidas na seo 508 (consulte Testar o site na pgina 171).
NO TA 34
Lembre-se de que nenhuma ferramenta de autoria pode automatizar o processo de desenvolvimento. O projeto de sites da Web acessveis exige que voc compreenda os requisitos de acessibilidade e tome vrias decises subjetivas sobre a forma como os usurios com deficincias interagem com pginas da Web. A melhor maneira de garantir que um site da Web est acessvel por meio de planejamento deliberado, desenvolvimento, teste e avaliao.
Introduo
O recurso de validao de acessibilidade do Dreamweaver

O recurso de validao de acessibilidade do Dreamweaver utiliza a tecnologia da UsableNet. A UsableNet lder no desenvolvimento de software fcil de utilizar para automatizar a utilizao e o processo de correo e teste de acessibilidade. Para obter auxlio adicional com o teste de acessibilidade, use o UsableNet LIFT for Macromedia Dreamweaver, uma soluo completa para desenvolvimento de sites da Web teis e acessveis. O UsableNet Lift for Macromedia Dreamweaver inclui assistentes de correo para tabelas complexas, formulrios e imagens, um editor ALT global, relatrios personalizveis e um novo modo de monitoramento ativo que garante a acessibilidade do contedo durante a criao das pginas. Solicite uma demonstrao do Lift for Macromedia Dreamweaver em www.usablenet.com.
35
Guia para a mdia de treinamento do Dreamweaver

O Dreamweaver inclui vrias mdias para ajud-lo rapidamente a programar e a tornar-se um autor experiente de pginas e sites da Web. O sistema de Ajuda do Dreamweaver inclui vrios documentos para ajud-lo a conhecer o Dreamweaver, Dreamweaver Extensibility e ColdFusion. H tambm diversos recursos online adicionais que voc poder consultar quando souber criar pginas da Web.
Acessar a documentao do Dreamweaver

A tabela a seguir resume a documentao includa no sistema de Ajuda do Dreamweaver. possvel adquirir as verses impressas dos ttulos selecionados. Para obter mais informaes, consulte www.macromedia.com/go/buy_books.
Ttulo
Getting Started with Dreamweaver (Guia de introduo ao Dreamweaver)
Descrio/ Pblico
Onde encontrar
Visualize no Dreamweaver: Fornece uma Selecione Help > Getting Started introduo bsica with Dreamweaver aos conceitos e Visualize online: http:// interface do livedocs.macromedia.com/go/ Dreamweaver, livedocs_dreamweaver/ com tutoriais Obtenha o PDF: detalhados para www.macromedia.com/go/ iniciantes. dw_documentation Destina-se a usurios iniciantes, bem como a usurios intermedirios e avanados que tenham interesse em conhecer novos recursos.
36
Introduo
Ttulo
Usando o Dreamweaver
Descrio/ Pblico
Onde encontrar
Visualize no Dreamweaver: Informaes Selecione Help > Dreamweaver completas sobre Help (Ajuda do Dreamweaver) ou todos os recursos Help > Using Dreamweaver do Dreamweaver. Visualize online: http:// Destina-se a livedocs.macromedia.com/go/ todos os usurios livedocs_dreamweaver/ do Dreamweaver. Obtenha o PDF: www.macromedia.com/go/ dw_documentation Descreve a estrutura e a API (interface de programao de aplicativos) do Dreamweaver. Destina-se a usurios avanados que desejem criar extenses e personalizar a interface do Dreamweaver. Visualize no Dreamweaver: Selecione Help > Extending Dreamweaver Visualize online: http:// livedocs.macromedia.com/go/ livedocs_dreamweaver/ Obtenha o PDF: www.macromedia.com/go/ dw_documentation
Extending Dreamweaver
Dreamweaver API Reference (Manual de Referncia da API do Dreamweaver)
Visualize no Dreamweaver: Descreve a API Selecione Help > Dreamweaver do utilitrio e a API Reference API JavaScript, sendo que ambas Visualize online: http:// livedocs.macromedia.com/go/ permitem livedocs_dreamweaver/ executar vrias Obtenha o PDF: tarefas de suporte www.macromedia.com/go/ ao desenvolver dw_documentation extenses do Dreamweaver. Destina-se a usurios avanados que desejem criar extenses e personalizar a interface do Dreamweaver.
37
Ttulo
Descrio/ Pblico
Onde encontrar
Visualize no Dreamweaver: Selecione Help > Using ColdFusion Visualize online: http:// livedocs.macromedia.com/go/ livedocs_coldfusion/ Obtenha o PDF: www.macromedia.com/go/ cf_documentation
Using ColdFusion Inclui uma (Usando o seleo dos ColdFusion) manuais mais
importantes do conjunto de documentos do ColdFusion. (O conjunto completo encontra-se disponvel no LiveDocs.) Destina-se a qualquer pessoa que tenha interesse no ColdFusion, desde iniciantes at desenvolvedores avanados. Reference (Referncia)
Inclui vrios tipos Visualize no Dreamweaver: Selecione Help > Reference. Para de manuais de obter uma lista de completa dos referncia sobre manuais, clique no menu pop-up HTML, modelos Book (Manual) no painel de servidor e Reference. outros tpicos, principalmente aqueles que foram publicados pela editora OReilly. Destinase a qualquer pessoa que necessite de mais informaes sobre sintaxe de cdigos, conceitos, etc.
38
Introduo
Acessar os recursos online adicionais do Dreamweaver

A tabela a seguir resume os recursos online adicionais para conhecer o Dreamweaver.
Recurso Descrio/ Pblico Onde encontrar
www.macromedia.com/go/ Centro de suporte TechNotes, dreamweaver_support do Dreamweaver suporte e informaes para resoluo de problemas para os usurios do Dreamweaver. Centro de desenvolvedores Dreamweaver Artigos e tutoriais www.macromedia.com/go/ para ajudar-lhe a dreamweaver_devcenter aprimorar suas habilidades e a adquirir novas. Manuais do www.macromedia.com/go/ produto no dw_documentation formato PDF, erratas, tutoriais e notas de verso. www.macromedia.com/go/ Discusses e dreamweaver_newsgroup informaes sobre resolues de problemas com a participao de usurios do Dreamweaver, representantes do suporte tcnico e a equipe de desenvolvimento do Dreamweaver. Os cursos www.macromedia.com/go/ englobam tarefas dreamweaver_training prticas e cenrios reais.
Centro de recursos de documentao do Dreamweaver Fruns online Macromedia
Treinamento da Macromedia
39
Para aproveitar ao mximo os recursos do Dreamweaver, consulte Onde iniciar na pgina 24.
Convenes tipogrficas
As seguintes convenes tipogrficas so utilizadas neste guia:
Os itens de menu so mostrados neste formato: nome do menu > nome do item de menu. Os itens nos submenus so mostrados neste formato: nome do menu > nome do submenu > nome do item de menu.
Fonte de cdigo indica os nomes de tags e atributos HTML, bem como o texto literal usado nos exemplos. Fonte de cdigo em itlico
indica os itens substituveis (s vezes denominados
metassmbolos) no cdigo.
Texto romano em negrito indica o texto a ser digitado exatamente conforme a indicao.
Para obter uma lista completa de recursos do Dreamweaver, consulte Guia para a mdia de treinamento do Dreamweaver na pgina 36.
Recursos de tecnologias da Web e HTML

A seguir, esto alguns recursos teis, disponveis na Web:
N OT A 40
Para obter uma lista de recursos do Dreamweaver, consulte Guia para a mdia de treinamento do Dreamweaver na pgina 36.
(www.w3.org/TR/REC-CSS1) e a especificao de nvel 2 (CSS2) (www.w3.org/TR/REC-CSS2/) so as especificaes oficiais para folhas de estilo do World Wide Web Consortium.
A especificao de nvel 1 para estilos CSS (CSS1) A especificao HTML 4.01 (www.w3.org/TR/REC-html40/) a especificao oficial para HTML do World Wide Web Consortium. ndice DOT HTML (www.blooberry.com/indexdot/html/)
uma lista completa de tags, atributos e valores HTML, bem como de sua compatibilidade com os diversos navegadores.
((www.w3.org/TR/xhtml1/ ) a especificao oficial para a Extensible Markup HyperText Language.

Especificao XHTML 1.0 O site OReilly XML.com (www.xml.com/)
fornece informaes, tutoriais e dicas sobre a Extensible Markup Language (XML), bem como outras tecnologias da Web.
Introduo
O site xFront (www.xfront.com/rescuing-xslt.html) fornece uma introduo a transformaes XSL para novos usurios. As pginas de descrio geral sobre ASP (http://msdn.microsoft.com/library/en-us/
dnasp/html/ASPover.asp) fornecem informaes sobre Active Server Pages (ASP).

A pgina Microsoft ASP.NET (http://msdn.microsoft.com/asp.net/)
fornece informaes
sobre ASP.NET.
A pgina Sun JSP (http://java.sun.com/products/jsp/)
fornece informaes sobre JavaServer
Pages (JSP).
O site PHP na Web (www.php.net/) O site MySQL
fornece informaes sobre PHP.
(www.mysql.com/) fornece informaes sobre MySQL.
A tabela de entidades
(www.bbsinc.com/iso8859.html) apresenta uma lista de nome de entidades utilizadas pelo padro ISO 8859-1 (Latin-1).
A pgina do produto Macromedia ColdFusion (www.macromedia.com/go/coldfusion/)
fornece informaes sobre o ColdFusion.

A pgina do produto Macromedia JRun Server (www.macromedia.com/go/jrun/)
fornece
informaes sobre o servidor de aplicativos JRun Java.

Web Services Demystified
(www.sitepoint.com/article/692) explica o que so os servios da
Web e como eles funcionam.

A JavaScript Bible, de autoria de Danny Goodman (IDG Books), oferece uma abordagem abrangente da linguagem JavaScript 1.2. JavaScript: O Definitive Guide,
de autoria de David Flanagan (OReilly & Associates), fornece informaes de referncia para cada funo, objeto, mtodo, propriedade e manipulador de evento JavaScript. contm um conjunto de todas as questes relativas a CGI, incluindo scripts prontos, documentao, livros e at mesmo programadores que oferecem seus servios. inclui uma
O ndice de recursos CGI (www.cgi-resources.com/)
O site Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/)
introduo CGI.
Recursos de tecnologias da Web e HTML
41
42
Introduo
CAPTULO 1
Explorar a rea de trabalho

Para obter o mximo de aproveitamento do Macromedia Dreamweaver 8, voc dever compreender os conceitos bsicos inerentes rea de trabalho do Dreamweaver e saber como selecionar opes, utilizar os inspetores e os painis e definir as preferncias mais adequadas ao seu estilo de trabalho. Este captulo contm as seguintes sees:
Sobre a rea de trabalho do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Trabalhar na janela do documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Utilizar barras de ferramentas, inspetores e menus contextuais . . . . . . . . . . . . . . . . 59 Utilizar painis e grupos de painis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Utilizar os recursos de acessibilidade do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . 70 Otimizar a rea de trabalho para o projeto de pgina acessvel. . . . . . . . . . . . . . . . . 76 Utilizar guias visuais no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Dreamweaver conceitos bsicos de personalizao . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Tpicos relacionados Otimizar a rea de trabalho para desenvolvimento visual na pgina 721
Sobre a rea de trabalho do Dreamweaver

A rea de trabalho do Dreamweaver permite exibir documentos e propriedades de objetos. Ela inclui vrias operaes comuns em barras de ferramentas para que voc possa fazer alteraes em documentos com rapidez.
43
O layout da rea de trabalho

No Windows, o Dreamweaver fornece um layout -integrado- em uma nica janela. Na rea de trabalho integrada, todos os painis e janelas so integrados em uma nica janela, que a maior do aplicativo.
barra Insert (Inserir) barra de ferramentas do documento janela do documento grupos de painis
Seletor de tags
NO T A 44
Property inspector (Inspetor de propriedades)
Files (Arquivos), painel
A rea de trabalho do Windows tambm possui uma opo Coder (Codificador), que, por padro, encaixa os grupos de painis no lado esquerdo e exibe a janela do documento no modo de visualizao do cdigo. Para obter mais informaes, consulte Utilizar a rea de trabalho orientada a codificador (apenas no Windows) na pgina 585. Para utilizar essa opo, consulte Escolher o layout de rea de trabalho (no Windows) na pgina 78.
No Macintosh, o Dreamweaver pode exibir vrios documentos em uma nica janela, com guias identificando cada documento. O Dreamweaver tambm pode exibir uma rea de trabalho flutuante, na qual cada documento aparece em uma janela individual. Os grupos de painis so inicialmente encaixados juntos, mas podem ser separados e colocados em suas prprias janelas. As janelas encaixam-se automaticamente umas nas outras, nas laterais da tela e na janela do documento, medida que so arrastadas ou redimensionadas.
barra de ferramentas do documento janela do documento grupos de painis
barra Insert
Seletor de tags
Property inspector
Files, painel
Voc pode alternar entre layouts diferentes no Windows e no Macintosh. Para obter mais informaes, consulte Escolher o layout de rea de trabalho (no Windows) na pgina 78 e Exibir documentos com guias (Macintosh) na pgina 79. Tpicos relacionados Elementos da rea de trabalho do Dreamweaver na pgina 46

Utilizar barras de ferramentas, inspetores e menus contextuais na pgina 59 Utilizar painis e grupos de painis na pgina 67.
45
Elementos da rea de trabalho do Dreamweaver

Esta seo descreve resumidamente alguns elementos da rea de trabalho do Dreamweaver.
N OT A 46
O Dreamweaver apresenta vrios outros painis, inspetores e janelas. Para abrir os painis, inspetores e janelas do Dreamweaver, utilize o menu Window (Janela). Se no conseguir localizar um painel, inspetor ou janela marcado como aberto, selecione Window > Arrange Panels (Organizar painis) para posicionar adequadamente todos os painis abertos.
A pgina inicial
permite que voc abra um documento recente ou crie um novo documento. Na pgina inicial, voc pode aprender mais sobre o Dreamweaver realizando um tour do produto ou um tutorial.
A barra Insert contm botes para inserir vrios tipos de objetos, como imagens, tabelas e camadas, em um documento. Cada objeto uma parte do cdigo HTML, que permite definir vrios atributos medida que so inseridos. Por exemplo, voc pode inserir uma tabela clicando no boto Table (Tabela), na barra Insert. Se preferir, inclua os objetos utilizando o menu Insert em vez da barra Insert. A barra de ferramentas do documento
contm botes que oferecem opes para diferentes visualizaes da janela do documento (como visualizao do projeto e do cdigo), vrias opes de exibio e algumas operaes comuns, como a visualizao em um navegador. (que no exibida no layout padro da rea de trabalho) contm botes para executar operaes comuns dos menus File (Arquivo) e Edit (Editar): New (Novo), Open (Abrir), Save (Salvar), Save All (Salvar tudo), Cut (Recortar), Copy (Copiar), Paste (Colar), Undo (Desfazer) e Redo (Refazer). Para exibir a barra de ferramentas padro, selecione View (Exibir) > Toolbars (Barras de ferramentas) > Standard (Padro).
A barra de ferramentas padro
A barra de ferramentas Coding (exibida
apenas na visualizao de cdigo) contm botes que permitem executar vrias operaes de codificao padro.
A barra de ferramentas Style Rendering (Processamento de estilo) (oculta
por padro) contm botes que possibilitam ver como ficaria o projeto com tipos de mdia diferentes se fossem utilizadas folhas de estilo dependentes de mdia. Ela tambm contm um boto que permite ativar ou desativar estilos CSS. exibe o documento que est sendo criado e editado.
A janela do documento
O Property inspector permite que voc exiba e altere vrias propriedades do objeto ou texto selecionado. Cada tipo de objeto apresenta diferentes propriedades. Por padro, o Property inspector no expandido no layout da rea de trabalho Coder. O seletor de tags,
localizado na barra de status situada na parte inferior da janela do documento, mostra a hierarquia das tags que fazem parte da seleo atual. Clique em qualquer tag na hierarquia para selecion-la e exibir todo o seu contedo.
Os grupos de painis
so conjuntos de painis relacionados, agrupados sob um cabealho. Para expandir um grupo de painis, clique na seta de expanso esquerda do nome do grupo. Para desencaixar um grupo de painis, arraste a pina na extremidade esquerda da barra de ttulo do grupo.
O painel Files permite gerenciar arquivos e pastas que faam parte de um site do Dreamweaver ou que estejam localizados em um servidor remoto. O painel Files tambm permite acessar todos os arquivos contidos no disco local, de forma semelhante ao Windows Explorer (Windows) ou ao Finder (Macintosh).
Tpicos relacionados Trabalhar na janela do documento na pgina 56

Utilizar barras de ferramentas, inspetores e menus contextuais na pgina 59 Utilizar painis e grupos de painis na pgina 67 Gerenciar arquivos e pastas no painel Files (Arquivos) na pgina 132
A janela do documento
A janela do documento mostra o documento que est aberto. possvel selecionar uma das seguintes visualizaes: A visualizao do projeto um ambiente de projeto que voc utiliza para criar o layout visual da pgina, executar a edio visual e desenvolver rapidamente os aplicativos. Nessa visualizao, o Dreamweaver exibe uma representao inteiramente editvel do documento, semelhante visualizao de uma pgina em um navegador. possvel configurar a visualizao do projeto para que exiba o contedo dinmico durante o trabalho com o documento (consulte Exibir o Live Data na visualizao do projeto na pgina 725). A visualizao do cdigo um ambiente de codificao manual para gravar e editar cdigo HTML, JavaScript, de linguagem de servidor como PHP ou ColdFusion Markup Language (CFML) e qualquer outro tipo de cdigo. Para obter mais informaes, consulte Captulo 20, Codificar no Dreamweaver, na pgina 603. As visualizaes do cdigo e do projeto permitem ver o documento nessas duas visualizaes em uma nica janela. Quando a janela do documento contiver uma barra de ttulo, esta exibir o ttulo da pgina e, entre parnteses, o nome e o caminho do arquivo. Aps o nome do arquivo, o Dreamweaver exibir um asterisco, se voc tiver feito alteraes ainda no salvas. No Windows, quando a janela do documento maximizada no layout de rea de trabalho integrada, ela no contm a barra de ttulo. Nesse caso, o ttulo da pgina, e o nome e caminho do arquivo aparecero na barra de ttulo da janela principal da rea de trabalho.
47
Quando a janela do documento est maximizada, as guias aparecem na parte inferior da rea da janela do documento, mostrando os nomes de arquivo de todos os documentos que estiverem abertos. Para alternar para um documento, clique na sua respectiva guia. Tpicos relacionados Trabalhar na janela do documento na pgina 56
A barra de ferramentas do documento

A barra de ferramentas do documento contm botes que permitem alternar rapidamente diferentes visualizaes do documento: A visualizao do cdigo, do projeto e uma visualizao dividida (que mostra as visualizaes do cdigo e do projeto). A barra de ferramentas tambm contm alguns comandos e opes comuns relacionados visualizao do documento e sua transferncia entre os sites local e remoto.
Show Code View (Mostrar visualizao do cdigo) Show Code and Design Views (Mostrar visualizaes do cdigo e do projeto) Show Design View (Mostrar visualizao do projeto) No Browser/Check Errors (Sem navegador/Verificar erros) Validate Markup (Validar o markup) File Management (Gerenciamento de arquivos)
Server Debug
Visual Aids (Auxlios visuais) View Options Ttulo do documento (Opes de exibio) Refresh Design View (Atualizar a visualizao do projeto) Preview/Debug in Browser (Visualizar/depurar no navegador)
As seguintes opes so mostradas na barra de ferramentas do documento:

Show Code View
exibe apenas a visualizao de cdigo na janela do documento.
Show Code and Design Views exibe a visualizao de cdigo em uma parte da janela do documento e a visualizao do projeto na outra parte. Quando essa visualizao combinada selecionada, a opo Design View on Top (Visualizao do projeto no alto) torna-se disponvel no menu View Options. Utilize essa opo para especificar qual visualizao aparecer na parte superior da janela do documento. Show Design View
exibe apenas a visualizao do projeto na janela do documento.
Server Debug exibe um relatrio para ajudar na depurao da pgina atual do ColdFusion. O
relatrio inclui erros da pgina, se houver.
48
Document Title permite que voc digite um ttulo para o documento, que ser exibido na barra de ttulo do navegador. Se j existir, o ttulo do documento aparecer nesse campo. No Browser/Check Errors Validate Markup
permite verificar a compatibilidade entre diferentes navegadores.
permite validar o documento atual ou uma tag selecionada. exibe o menu pop-up File Management.
File Management
permite visualizar ou depurar o documento em um navegador. Selecione um navegador no menu pop-up.

Preview/Debug in Browser Refresh Design View atualiza a visualizao do projeto do documento aps as alteraes feitas na visualizao de cdigo. As alteraes feitas na visualizao de cdigo no so exibidas automaticamente na visualizao do projeto at que sejam executadas determinadas aes, por exemplo: salvar o arquivo ou clicar neste boto.
permite definir as opes das visualizaes de cdigo e do projeto, inclusive qual visualizao deve aparecer em primeiro plano. As opes do menu so relacionadas exibio atual: a visualizao do projeto, a visualizao do cdigo ou ambas. Para obter informaes sobre as opes da visualizao do cdigo, consulte Definir preferncias de codificao na pgina 585. Para obter informaes sobre as opes da visualizao do projeto, consulte Selecionar elementos na janela do documento na pgina 386, Exibir e editar o contedo do cabealho na pgina 654 e Utilizar guias visuais no Dreamweaver na pgina 77.
View Options Visual Aidspermite
utilizar auxlios visuais diferentes para projetar as pginas.
Tpicos relacionados Exibir barras de ferramentas na pgina 60
A barra de ferramentas padro

A barra de ferramentas padro contm botes para executar operaes comuns dos menus File e Edit : New, Open, Save, Save All, Cut, Copy, Paste, Undo e Redo. Utilize esses botes da mesma forma que os comandos equivalentes nos menus. Para obter mais informaes sobre operaes, como Open e Save, consulte o Captulo 3, Criar e abrir documentos, na pgina 101. Tpicos relacionados Exibir barras de ferramentas na pgina 60
49
A barra de status
A barra de status, situada na parte inferior da janela do documento, fornece informaes adicionais sobre o documento que est sendo criado.
Tamanho do documento e tempo estimado para download
Seletor de tags
Menu pop-up Window Size (Tamanho da janela) Ampliao definida Ferramenta Zoom Ferramenta Hand (Mo) Ferramenta Select (Selecionar)
O seletor de tags mostra a hierarquia das tags que fazem parte da seleo atual. Clique em qualquer tag na hierarquia para selecion-la e exibir todo o seu contedo. 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 boto direito do mouse (no Windows) ou pressione Ctrl e clique na tag (no Macintosh) e selecione uma classe ou identificao no menu contextual. A ferramenta Hand permite que voc clique no documento e arraste-o na janela do documento. Clique na ferramenta Select para desativar a ferramenta Hand. A ferramenta Zoom e o menu pop-up Set Magnification (Definir ampliao) permitem que voc defina um nvel de ampliao para o documento. Para obter mais informaes, consulte Aplicar zoom na pgina 389. O menu pop-up Window Size (visvel apenas na visualizao do projeto) permite redimensionar a janela do documento para um tamanho predeterminado ou personalizado. Para obter mais informaes, consulte Redimensionar a janela do documento na pgina 58. direita do menu pop-up Window Size so mostradas as estimativas de tamanho do documento e de tempo de download da pgina, incluindo todos os arquivos dependentes, como os arquivos de imagens e de outras mdias. Para obter mais informaes, consulte Definir preferncias de tamanho e tempo de download na pgina 402. Tpicos relacionados Definir as preferncias da barra de status na pgina 59
50
A barra Insert
A barra Insert contm botes para voc criar e inserir objetos, como tabelas, camadas e imagens. Quando voc passa o mouse sobre um boto, exibida uma dica de ferramenta com o nome desse boto. Os botes so organizados em diversas categorias, que podem ser alternadas no lado esquerdo da barra Insert. Categorias adicionais so exibidas quando o documento atual contm cdigo do servidor, como documentos ASP ou CFML. Quando o Dreamweaver inicializado, a ltima categoria com a qual voc trabalhou aberta.
N OT A
Se preferir exibir as categorias como guias na parte superior da barra Insert, altere o layout da barra Insert (consulte Definir as preferncias de fontes para a exibio do Dreamweaver na pgina 82).
Algumas categorias possuem botes com menus pop-up. Quando voc seleciona uma opo em um menu pop-up, ela se torna a ao padro do boto. Por exemplo, se voc selecionar Image Placeholder (Alocador de espao de imagem) no menu pop-up Image (Imagem), o Dreamweaver inserir um alocador de espao de imagem na prxima vez que o boto Image for clicado. Sempre que voc selecionar uma nova opo no menu pop-up, a ao padro do boto ser alterada. A barra Insert est organizada nas seguintes categorias:
A categoria Common (Comuns)
permite criar e inserir os objetos mais utilizados, como
imagens e tabelas.
A categoria Layout
permite inserir tabelas, tags div, camadas e quadros. Voc tambm pode escolher entre trs visualizaes de tabelas: Standard (Padro), Expanded Tables (Tabelas expandidas) e Layout. Quando o modo Layout for selecionado, podero ser utilizadas as ferramentas de layout do Dreamweaver : Draw Layout Cell (Desenhar a clula de layout) e Draw Layout Table (Desenhar a tabela de layout). contm botes para criar formulrios e inserir elementos de formulrio.
A categoria Forms (Formulrios)
A categoria Text (Texto) permite inserir uma variedade de tags de formatao de texto e de lista, como b, em, p, h1 e ul. A categoria HTML
permite inserir tags HTML para rguas horizontais, contedo do cabealho, tabelas, quadros e scripts.
51
As categorias de cdigo do servidor esto disponveis apenas para as pginas que utilizam determinada linguagem de servidor, como ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP e PHP. Cada uma dessas categorias fornece objetos de cdigo do servidor que podem ser inseridos na visualizao do cdigo. A categoria Application (Aplicativo) permite inserir elementos dinmicos, como conjuntos de registros, regies repetidas e formulrios de insero e de atualizao de registros. A categoria Flash elements (Elementos Flash)
permite inserir elementos Macromedia
Flash.
A categoria Favorites (Favoritos)
permite agrupar e organizar em um nico local os botes
da barra Insert mais utilizados. possvel modificar qualquer objeto na barra Insert ou criar seus prprios objetos. Consulte Customizing Dreamweaver (Personalizao do Dreamweaver) no Centro de Suporte da Macromedia, em www.macromedia.com/go/customizing_dreamweaver. Tpicos relacionados Utilizar a barra Insert na pgina 61
52
A barra de ferramentas Coding

A barra de ferramentas Coding contm botes que permitem executar vrias operaes de codificao padro, como reduzir e expandir selees de cdigos, realar cdigo incorreto, aplicar e remover comentrios, recuar cdigo e inserir trechos de cdigo recentemente utilizados. A barra de ferramentas Coding fica visvel apenas na visualizao de cdigo e aparece verticalmente do lado esquerdo da janela do documento.
No possvel desencaixar nem mover a barra de ferramentas Coding, mas voc pode ocultla. Para obter mais informaes, consulte Exibir barras de ferramentas na pgina 60. Voc tambm pode editar a barra de ferramentas Coding para exibir mais botes (como Word Wrap [Quebra de linha], Show Hidden Characters [Mostrar caracteres ocultos] e Auto Indent [Recuo automtico]) ou ocultar botes que no deseja utilizar. Para isso, voc deve editar o arquivo XML que gera a barra de ferramentas. Para obter mais informaes, consulte Extending Dreamweaver (Extenso dos recursos do Dreamweaver). Tpicos relacionados Inserir cdigo rapidamente com a barra de ferramentas Coding (Codificao) na pgina 617
Exibir barras de ferramentas na pgina 60
53
A barra de ferramentas Style Rendering

A barra de ferramentas Style Rendering (oculta por padro) contm botes que possibilitam ver como ficaria o projeto com tipos de mdia diferentes, se voc usasse folhas de estilo dependentes de mdia. Ela tambm contm um boto que permite ativar ou desativar estilos CSS. Para exibir a barra de ferramentas padro, selecione View > Toolbars > Style Rendering.
Esta barra de ferramentas s funciona se os documentos utilizarem folhas de estilo dependentes de mdia. Por exemplo, sua folha de estilo poderia especificar uma regra body para impresso e uma regra body diferente para dispositivos portteis. Para obter mais informaes sobre a criao de folhas de estilo dependentes de mdia, consulte o site do World Wide Web Consortium em www.w3.org/TR/CSS21/media.html. Por padro, o Dreamweaver exibe seu projeto para o tipo de mdia de tela (que mostra como uma pgina apresentada em uma tela de computador). Voc pode visualizar as apresentaes de tipo de mdia a seguir, clicando nos respectivos botes na barra de ferramentas Style Rendering.
Render Screen Media Type (Apresentar tipo de mdia de tela) mostra
a aparncia da
pgina em uma tela de computador.

Render Print Media Type (Apresentar tipo de mdia de impresso)
mostra a aparncia da
pgina impressa em uma folha de papel.

Render Handheld Media Type (Apresentar tipo de mdia porttil) mostra
a aparncia da pgina em um dispositivo porttil, como um telefone celular ou um dispositivo BlackBerry. a aparncia
Render Projection Media Type (Apresentar tipo de mdia de projeo)mostra
da pgina em um dispositivo de projeo.

Render TTY Media Type (Apresentar tipo de mdia TTY) mostra
a aparncia da pgina em
uma mquina teletipo.

Render TV Media Type (Apresentar tipo de mdia TV)
mostra a aparncia da pgina em
uma tela de televiso.

Toggle Displaying of CSS Styles (Alternar exibio de estilos CSS) permite ativar ou desativar estilos CSS. O funcionamento deste boto no depende de outros botes de mdia.
Tpicos relacionados Exibir barras de ferramentas na pgina 60
54
Relatrios no Dreamweaver
Voc pode executar relatrios no Dreamweaver para localizar ou testar o contedo, ou para solucionar problemas. Voc pode gerar os seguintes tipos de relatrio:
Search (Busca) permite procurar tags, atributos e texto especfico em tags. Para procurar seu
cdigo, consulte Procurar e substituir tags e atributos na pgina 628.

Validation (Validao)
permite verificar erros de cdigo ou sintaxe. Para validar seu cdigo, consulte Validar tags na pgina 639.
Target Browser Check (Verificao de navegador de destino) permite testar o HTML nos documentos para ver se as tags ou os atributos no so suportados pelos navegadores de destino. Para executar uma verificao de navegador de destino, consulte Verificar a compatibilidade com navegadores na pgina 635. Link Checker (Verificador de links)
permite localizar e corrigir links rompidos, externos e rfos. Para executar o verificador de links, consulte Verificar links rompidos, externos e rfos na pgina 491.
melhorar o fluxo de trabalho e testar os atributos HTML no site. Os relatrios de fluxo de trabalho incluem Checked Out By (Retirado por), Recently Modified (Modificado recentemente) e Design Notes. Os relatrios HTML incluem Combinable Nested Font Tags (Tags combinveis de fontes aninhadas), Accessibility (Acessibilidade), Missing Alt Text (Texto alternativo ausente), Redundant Nested Tags (Tags aninhadas redundantes), Removable Empty Tags (Tags vazias removveis) e Untitled Documents (Documentos sem ttulo). Para executar relatrios de site, consulte Testar o site na pgina 171.
FTP Log (Registro de FTP)
Site Reports (Relatrios de site) permite
permite exibir todas as atividades de transferncia de arquivos por FTP. Para exibir o registro de FTP, consulte Obter arquivos de um servidor remoto na pgina 156 ou Colocar arquivos em um servidor remoto na pgina 157.
Server Debug permite exibir informaes para depurar um aplicativo ColdFusion. Para exibir informaes de depurao, consulte Usar o depurador ColdFusion (somente no Windows) na pgina 641.
Sobre a personalizao do Dreamweaver em sistemas multiusurio

Voc pode personalizar o Dreamweaver para adequ-lo s suas necessidades at mesmo em um sistema operacional multiusurio, como o Windows XP ou o Mac OS X.
55
O Dreamweaver impede que a configurao personalizada de um usurio afete a configurao personalizada de outros usurios. Para que isso ocorra, na primeira execuo do Dreamweaver em um sistema operacional multiusurio que o reconhea, o aplicativo criar cpias de vrios arquivos de configurao para voc. Estes arquivos de configurao do usurio so armazenados em uma pasta. No Windows XP, por exemplo, eles so armazenados em C:\Documents and Settings\username\Application Data\Macromedia\Dreamweaver 8\Configuration (que pode estar dentro de uma pasta oculta). No Mac OS X, eles so armazenados na pasta principal, especificamente em Users/username/ Library/Application Support/Macromedia/Dreamweaver 8/Configuration. Se o Dreamweaver for reinstalado ou atualizado, o Dreamweaver far automaticamente cpias de segurana dos arquivos de configurao do usurio existentes de modo que, se eles tiverem sido personalizados manualmente, o usurio ainda tenha acesso s alteraes efetuadas. Tpicos relacionados Dreamweaver conceitos bsicos de personalizao
Trabalhar na janela do documento

A janela do documento mostra o documento que est aberto. Voc pode exibir um documento na visualizao do projeto, na visualizao do cdigo ou em ambas. A barra de status da janela do documento apresenta informaes sobre o documento atual. Tpicos relacionados A janela do documento na pgina 47
A barra de status na pgina 50
Alternar entre visualizaes na janela do documento

Voc pode exibir um documento da janela do documento na visualizao do cdigo, na visualizao do projeto ou nas visualizaes do cdigo e do projeto.
Para alternar entre as visualizaes na janela do documento, execute um dos seguintes procedimentos:
Utilize o menu View:

Selecione View > Code (Cdigo). Selecione View > Design (Projeto). Selecione View > Code and Design (Cdigo e projeto).
56
Utilize a barra de ferramentas do documento:
Clique no boto Show Code View. Clique no boto Show Code and Design Views. Clique no boto Show Design View.
Para alternar entre a visualizao do cdigo e a visualizao do projeto:
Pressione Control+til (~), no Windows, ou Command+aspa simples (), no Macintosh.

N OT A
Se as duas visualizaes forem exibidas na janela do documento, esse atalho de teclado mudar o foco do teclado de uma visualizao para a outra.
Tpicos relacionados A janela do documento na pgina 47
Dispor janelas de documentos em cascata ou lado a lado

Se tiver vrios documentos abertos simultaneamente, voc poder mostr-los em cascata ou lado a lado.
Para dispor janelas de documentos em cascata, siga o procedimento abaixo:
Selecione Window > Cascade.
Para dispor janelas de documentos lado a lado, siga um dos procedimentos abaixo:
No Windows, selecione Window > Tile Horizontally (Lado a lado horizontalmente) ou Window > Tile Vertically (Lado a lado verticalmente). No Macintosh, selecione Window > Tile.
Tpicos relacionados Escolher o layout de rea de trabalho (no Windows) na pgina 78

Exibir documentos com guias (Macintosh) na pgina 79 Salvar layouts personalizados da rea de trabalho na pgina 80
Trabalhar na janela do documento
57
Redimensionar a janela do documento

A barra de status exibe as dimenses atuais da janela do documento (em pixels). Para criar uma pgina cuja aparncia seja melhor em determinado tamanho, voc poder ajustar a janela do documento para qualquer um dos tamanhos predeterminados, edit-los ou criar novos tamanhos.
Para redimensionar a janela do documento de acordo com um tamanho predeterminado:
Selecione um dos tamanhos no menu pop-up Window Size situado na parte inferior da janela do documento.
NO T A
No Windows, voc pode maximizar uma janela de documento para que ela preencha totalmente a rea do documento da janela integrada. Voc no pode redimensionar uma janela do documento quando ela est maximizada.
O tamanho da janela mostrado reflete as dimenses internas da janela do navegador, sem incluir as bordas. O tamanho do monitor exibido entre parnteses. Por exemplo: seria recomendvel utilizar o tamanho 536 x 196 (640 x 480, padro) se os visitantes do site estiverem utilizando o Microsoft Internet Explorer ou o Netscape Navigator com configuraes padro em um monitor de 640 x 480 pixels.
DICA
Para redimensionar manualmente, utilize os mtodos padro do sistema operacional de ajuste de janelas, como, por exemplo, arrastar o canto inferior direito da janela.
Para alterar os valores na lista do menu pop-up Window Size:

1. 2.
No menu pop-up Window Size, selecione Edit Sizes. Clique em qualquer dos valores de largura ou altura na lista Window Sizes e digite um novo valor. Para que a janela do documento se ajuste apenas a uma largura especfica (mantendo a altura inalterada), selecione um valor de altura e exclua-o.
3.
Clique na caixa de texto Description (Descrio), para digitar um texto descritivo sobre determinado tamanho.
58
4.
Clique em OK para salvar a alterao e retornar janela do documento.
Para adicionar um novo tamanho ao menu pop-up Window Size:

1. 2. 3.
No menu pop-up Window Size, selecione Edit Sizes. Clique no espao em branco abaixo do ltimo valor na coluna Width (Largura). Digite os valores de Width e Height (Altura). Para definir apenas os valores de largura ou de altura, basta deixar um desses campos vazio. Clique no campo Description, para inserir um texto descritivo sobre o tamanho adicionado. Clique em OK para salvar a alterao 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 permite ajustes para vrias dimenses em pixels.
4.
5.
Definir as preferncias da barra de status

Defina as preferncias da barra de status utilizando a caixa de dilogo Preferences (Preferncias).
Para definir as preferncias da barra de status:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences ser exibida. Selecione Status Bar (Barra de status) na lista Category (Categoria) esquerda. Defina as opes de preferncias. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
2. 3.
4.
Tpicos relacionados A barra de status na pgina 50
Utilizar barras de ferramentas, inspetores e menus contextuais

O Dreamweaver contm vrias ferramentas que permitem fazer alteraes rapidamente durante a criao ou a edio de um documento.
59
As barras de ferramentas padro, do documento e Coding servem para editar o documento atual e trabalhar nele. A barra Insert contm botes para criar e inserir objetos, como tabelas, camadas e imagens. E o Property inspector permite editar as propriedades desses objetos.
NO TA

possvel tambm utilizar o Tag inspector (Inspetor de tags) para exibir e editar propriedades (consulte Alterar atributos com o Tag inspector (Inspetor de tags) na pgina 644). O Tag inspector permite exibir e editar todos os atributos associados a uma determinada tag, enquanto o Property inspector mostra apenas os atributos mais comuns.
Como alternativa para a barra Insert e o Property inspector, utilize os menus contextuais para criar e editar objetos.
Exibir barras de ferramentas

Utilize as barras de ferramentas padro e do documento para executar operaes de edio padro e relacionadas ao documento. Utilize a barra de ferramentas Coding para inserir cdigo rapidamente e a barra de ferramentas Style Rendering para exibir a pgina da forma como ela seria apresentada em diferentes tipos de mdia. Voc pode optar por exibir ou ocultar as barras de ferramentas conforme necessrio.
Para mostrar ou ocultar uma barra de ferramentas, execute um dos seguintes procedimentos:
Selecione View > Toolbars e, em seguida, selecione a barra de ferramentas. Clique com o boto direito do mouse (no Windows) ou clique com a tecla Control pressionada (Macintosh) em uma das barras de ferramentas e, em seguida, selecione a barra de ferramentas no menu contextual.
N OT A
Para exibir ou ocultar a barra de ferramentas Coding no Code inspector (Inspetor de cdigo, Window > Code Inspector), selecione Coding Toolbar (Barra de Ferramentas Coding) no menu pop-up View Options localizado na parte superior do inspetor.
Tpicos relacionados A barra de ferramentas do documento na pgina 48 A barra de ferramentas padro na pgina 49 A barra de ferramentas Coding na pgina 53 A barra de ferramentas Style Rendering na pgina 54
60
Utilizar a barra Insert

A barra Insert contm botes para criar e inserir objetos, como tabelas e imagens. Os botes esto organizados em categorias. Quando voc passa o mouse sobre um boto, exibida uma dica de ferramenta com o nome desse boto. Tpicos relacionados A barra Insert na pgina 51
Exibir a barra Insert e respectivas categorias e menus

Voc pode ocultar, mostrar, reduzir ou expandir a barra Insert de acordo com a sua necessidade. Voc tambm pode exibir as categorias diferentes da barra Insert. Algumas categorias dessa barra tm botes que contm menus com comandos comuns. Se preferir exibir as categorias como guias na parte superior da barra Insert, altere o layout da barra Insert.
Para ocultar ou mostrar a barra Insert, execute um dos seguintes procedimentos:

Selecione Window > Insert. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) na barra Insert da barra de ferramentas do documento, da barra de ferramentas padro ou da barra de ferramentas Coding e selecione Insert Bar (Barra Insert).
Para mostrar os botes em uma determinada categoria:
Clique na seta ao lado do nome da categoria (no lado esquerdo da barra Insert) e selecione outra categoria no menu pop-up.
61
Para exibir o menu pop-up de um boto:
Clique na seta para baixo ao lado do cone do boto.
Para mostrar as categorias da barra Insert como guias:
Clique na seta ao lado do nome da categoria (no lado esquerdo da barra Insert) e selecione Show as Tabs (Mostrar como guias).
As categorias so exibidas como guias na parte superior da barra Insert.

NO T A
Talvez seja necessrio clicar na barra de ttulo da barra Insert para reabri-la.
Para mostrar as categorias da barra Insert como um menu:
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) na barra Insert e selecione Show as Menus (Mostrar como menus).
A barra Insert exibe as categorias em um menu, em vez de em guias. Tpicos relacionados Personalizar e usar a categoria Favorites (Favoritos) da barra Insert na pgina 64
Utilizar a barra Insert para inserir objetos

A barra Insert um mtodo conveniente para criar e inserir objetos.
Para inserir um objeto:
1. 2.
No lado esquerdo da barra Insert, selecione a categoria adequada. Siga um dos procedimentos abaixo:
Clique em um objeto de boto ou arraste o cone de boto para a janela do documento. Clique na seta em um boto e selecione uma opo no menu.
62
Dependendo do objeto, poder ser exibida uma caixa de dilogo de insero de objeto correspondente que solicita a busca um arquivo ou de parmetros especficos de um objeto. Como alternativa, o Dreamweaver poder inserir o cdigo no documento, ou abrir um editor de tags (consulte Editar tags utilizando Tag editors (Editores de tags) na pgina 621) ou um painel para que voc especifique informaes antes da insero do cdigo. Se um objeto for inserido na visualizao do projeto, nenhuma caixa de dilogo ser exibida; no entanto, se o objeto for inserido na visualizao de cdigo, o editor de tags ser exibido. No caso de alguns objetos, sua insero na visualizao do projeto far com que o Dreamweaver alterne para a visualizao do cdigo antes de inserir o objeto.
NO TA
Alguns objetos, como as ncoras com nome, no so visveis quando a pgina exibida na janela do navegador. Na visualizao do projeto, para exibir os cones que marcam a localizao desses objetos invisveis, consulte Mostrar e ocultar elementos invisveis na pgina 388.
Para ignorar a caixa de dilogo de insero de objetos e inserir um objeto alocador de espao vazio:
Pressione Control (no Windows) ou Option (no Macintosh) e clique no boto correspondente ao objeto. Por exemplo, para inserir um alocador de espao de uma imagem sem especificar um arquivo de imagem, pressione Control ou Option, e clique no boto Image.
N OT A
Esse procedimento no ignora todas as caixas de dilogo de insero de objeto. Muitos objetos, inclusive as barras de navegao, camadas, botes Flash e conjuntos de quadros (framesets), no inserem alocadores de espao ou objetos com valor padro.
Para modificar as preferncias da barra Insert:

1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences exibe a categoria de preferncias General (Geral). Desmarque Show Dialog When Inserting Objects (Mostrar a caixa de dilogo quando inserir objetos) para suprimir caixas de dilogo quando inserir objetos, como imagens, tabelas, scripts e elementos head, ou pressione a tecla Control (Windows) ou Option (Macintosh) durante a criao do objeto.
DICA
2.
Quando o objeto inserido com essa opo desativada, so conferidos valores de atributos padro ao objeto. Utilize o Property inspector para alterar as propriedades do objeto aps a insero.
63
3.
Clique em OK.
Tpicos relacionados Exibir a barra Insert e respectivas categorias e menus na pgina 61
Personalizar e usar a categoria Favorites (Favoritos) da barra Insert

A categoria Favorites da barra Insert permite agrupar e organizar os botes mais utilizados nessa barra. Voc pode adicionar, gerenciar e excluir botes da categoria Favorites.
Para adicionar, excluir ou gerenciar itens na categoria Favorites:
1. 2.
Selecione qualquer categoria na barra Insert. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) na rea em que os botes aparecem (no clique com o boto direito no nome da categoria); em seguida, selecione Customize Objects (Personalizar objetos). Ser exibida a caixa de dilogo Customize Favorite Objects (Personalizar objetos favoritos).
3.
Faa as alteraes necessrias. Para obter mais informaes, clique no boto Help da caixa de dilogo. Clique em OK. A categoria Favorites mostrar as alteraes efetuadas.
DICA
4.
Se voc no estiver nessa categoria, selecione-a para ver as alteraes.
Para inserir objetos utilizando botes da categoria Favorites:
No lado esquerdo da barra Insert, selecione a categoria Favorites e, em seguida, clique no boto de qualquer objeto da categoria Favorites que tenha sido adicionado.
N O TA
A categoria Favorites no conter boto algum at que voc a personalize para adicionar objetos.
Tpicos relacionados Exibir a barra Insert e respectivas categorias e menus na pgina 61
Utilizar a barra Insert para inserir objetos na pgina 62
64
Utilizar o Property inspector

O Property inspector permite examinar e editar as propriedades mais comuns do elemento da pgina que estiver selecionado, como um texto ou objeto inserido. O contedo do Property inspector varia de acordo com o elemento selecionado.
NO TA

Utilize o Tag inspector para exibir e editar todos os atributos associados s propriedades de determinada tag (consulte Alterar atributos com o Tag inspector (Inspetor de tags) na pgina 644).
Para mostrar ou ocultar o Property inspector:
Para expandir ou reduzir o Property inspector:
Para exibir as propriedades de um elemento de pgina:
Para alterar as propriedades de um elemento de pgina:

1. 2.
DICA
Por padro, o Property inspector fica localizado na parte inferior da rea de trabalho, mas voc poder encaix-lo na parte superior da rea de trabalho, se quiser. Voc tambm pode torn-lo um painel flutuante na rea de trabalho. Para obter mais informaes sobre como mover o Property inspector, consulte Encaixar e desencaixar painis e grupos de painis na pgina 68.
Selecione Window > Properties (Propriedades).
Clique na seta de expanso no canto inferior direito do Property inspector.
Na janela do documento, selecione o elemento de pgina.

NO T A N OT A
Talvez seja necessrio expandir o Property inspector para exibir todas as propriedades do elemento selecionado.
Selecione o elemento de pgina na janela do documento. Altere as propriedades no Property inspector.

Para obter informaes sobre propriedades especficas, selecione um elemento na janela do documento e, em seguida, clique no cone Help no canto superior direito do Property inspector.
Em sua maioria, as alteraes que voc fizer nas propriedades sero imediatamente aplicadas janela do documento.
65
3.
Se as alteraes no forem aplicadas imediatamente, siga um destes procedimentos:

Clique fora dos campos de texto de edio de propriedades. Pressione a tecla Enter (no Windows) ou Return (no Macintosh). Pressione a tecla Tab para alternar para outra propriedade.
Utilizar menus contextuais

O Dreamweaver utiliza amplamente os menus contextuais, que oferecem acesso conveniente aos comandos mais teis e s propriedades relacionadas ao objeto ou janela com a qual voc est trabalhando. Os menus contextuais apresentam apenas os comandos pertinentes seleo atual.
Para utilizar um menu contextual:
1.
Clique com o boto direito do mouse (no Windows) ou pressione Ctrl e clique (no Macintosh) no objeto ou na janela. Ser exibido o menu contextual correspondente ao objeto ou janela selecionada. Selecione um comando no menu contextual.
2.
66
Utilizar painis e grupos de painis

No Dreamweaver, os painis so reunidos em grupos de painis. O painel selecionado em um grupo de painis aparece como uma guia. Cada grupo pode ser expandido ou minimizado e encaixado ou separado de outros grupos de painis. Os grupos de painis tambm podem ser encaixados na janela integrada do aplicativo (apenas no Windows). Esse recurso facilita o acesso aos painis necessrios sem desorganizar a rea de trabalho.
NO TA

Quando um grupo de painis flutuante (separado), exibida uma barra vazia estreita na parte superior do grupo de painis. Nesta documentao, o termo barra de ttulo do grupo de painis se refere rea na qual o nome do grupo de painis mostrado, e no barra vazia estreita.
Exibir painis e grupos de painis

Na rea de trabalho, voc pode exibir ou ocultar painis ou grupos de painis conforme necessrio.
Para expandir ou minimizar um grupo de painis, siga um destes procedimentos:
Clique na seta de expanso no lado esquerdo da barra de ttulo do grupo de painis. Clique no ttulo do grupo de painis.
Para fechar um grupo de painis de modo que ele no seja visvel na tela:
No menu Options (Opes) da barra de ttulo do grupo de painis, selecione Close Panel Group (Fechar o grupo de painis). O grupo de painis desaparecer da tela.
Para abrir um painel ou um grupo de painis que no esteja visvel na tela:
Selecione o menu Window e, em seguida, selecione um nome de painel no menu. Uma marca de seleo ao lado de um item, no menu Window, indica que ele est aberto (embora possa estar oculto atrs de outras janelas).
DICA
Se voc no conseguir localizar um painel, inspetor ou janela marcado como aberto, selecione Window > Arrange Panels (Organizar painis) para posicionar adequadamente todos os painis abertos.
Para selecionar um painel dentro de um grupo expandido de painis:
Clique no nome do painel.
67
Para ver o menu Options de um grupo de painis, caso ele no esteja sendo exibido:
Para expandir o grupo de painis, clique em seu nome ou na seta de expanso. O menu Options ficar visvel quando o grupo de painis for expandido.
DICA
Algumas opes esto disponveis no menu contextual do grupo de painis mesmo quando o grupo est reduzido. Clique com o boto direito do mouse (no Windows) ou pressione Control e clique (no Macintosh) na barra de ttulo do grupo de painis para exibir o menu contextual.
Encaixar e desencaixar painis e grupos de painis

Voc pode mover painis e grupos de painis como necessrio, e pode organiz-los para que flutuem ou sejam encaixados na rea de trabalho. A maioria dos painis pode ser encaixada apenas esquerda ou direita da janela do documento na rea de trabalho integrada, enquanto os outros, como o Property inspector e a barra Insert, podem ser encaixados somente nas partes superior e inferior da janela integrada.
Para separar um grupo de painis:
Arraste o grupo de painis utilizando a pina (no lado esquerdo da barra de ttulo do grupo de painis) at que o contorno indique que ele no est mais encaixado.
Para encaixar um grupo de painis em outros grupos de painis (rea flutuante de trabalho) ou na janela integrada, apenas no Windows:
Arraste o grupo de painis utilizando a pina, at que o seu contorno indique que ele no est mais acoplado.
Para desanexar um painel de um grupo de painis:
No menu Options da barra de ttulo do grupo de painis, selecione Group With (Agrupar a) > New Panel Group (Novo grupo de painis). O nome do comando Group With alterado de acordo com o nome do painel ativo. O painel ser exibido em um novo grupo de painis individual.
Para encaixar um painel em um grupo de painis:
Selecione o nome de um grupo de painis no submenu Group With do menu Options do grupo de painis. O nome do comando Group With alterado de acordo com o nome do painel ativo.
68
Para arrastar um grupo de painis flutuantes (separados) sem encaix-lo:
Arraste o grupo de painis pela barra situada acima da barra de ttulo. O grupo de painis no ser encaixado caso no seja arrastado pela respectiva pina.
Redimensionar e renomear grupos de painis

Voc pode alterar o tamanho e o nome dos grupos de painis de acordo com as suas necessidades.
Para alterar o tamanho dos grupos de painis:
No caso de painis flutuantes, arraste o conjunto de grupos de painis utilizando o mesmo procedimento para redimensionar qualquer janela no seu sistema operacional. Por exemplo, voc pode arrastar a rea de redimensionamento no canto inferior direito do conjunto de grupos de painis.
No caso de painis encaixados, arraste a barra de diviso entre os painis e a janela do documento.
Para maximizar um grupo de painis, siga um destes procedimentos:
No menu Options, na barra de ttulo do grupo de painis, escolha Maximize Panel Group (Maximizar o grupo de painis). Clique duas vezes em qualquer parte da barra de ttulo do grupo de painis. O grupo de painis ser verticalmente expandido de modo a preencher todo o espao vertical disponvel.
Para renomear um grupo de painis:

1.
No menu Options da barra de ttulo do grupo de painis, selecione Rename Panel Group (Renomear grupo de painis). Digite um novo nome e, em seguida, clique em OK.
2.
69
Salvar grupos de painis

O Dreamweaver permite que voc salve e restaure diferentes grupos de painis, para que possa personalizar sua rea de trabalho em relao a diferentes atividades. Quando voc salva um layout de rea de trabalho, o Dreamweaver memoriza os painis no layout especificado, bem como outros atributos como as posies e os tamanhos dos painis, seu estado expandido ou minimizado, a posio e o tamanho da janela do aplicativo, e a posio e o tamanho da janela do documento. Para obter mais informaes, consulte Salvar layouts personalizados da rea de trabalho na pgina 80.
Definir as preferncias de painis

Voc pode definir preferncias para especificar quais painis e inspetores sempre aparecero em primeiro plano na janela do documento e quais sero ocultos por essa janela.
Para definir preferncias de painis:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences ser exibida. Selecione Panels na lista Category esquerda. Selecione opes. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
2. 3.
4.
Utilizar os recursos de acessibilidade do Dreamweaver

O Dreamweaver fornece recursos que o tornam acessvel aos usurios com deficincias. Especificamente, o Dreamweaver oferece suporte a leitoras de tela, recursos de acessibilidade do sistema operacional e navegao por teclado. Tpicos relacionados Dreamweaver e acessibilidade na pgina 33
70
Utilizar as leitoras de tela com o Dreamweaver

Uma leitora de tela relaciona o texto exibido na tela do computador. Ela tambm l as informaes no textuais, tais como identificadores de boto ou descries de imagem no aplicativo, fornecidas nas guias de acessibilidade ou atributos durante a autoria. Como usurio do Dreamweaver, possvel utilizar uma leitora de tela para auxili-lo na criao de pginas da Web. A leitora de tela inicia a leitura no canto superior esquerdo da janela do documento. O Dreamweaver suporta as leitoras de tela JAWS for Windows da Freedom Scientific (www.freedomscientific.com) e Window-Eyes da GW Micro (www.gwmicro.com). Tpicos relacionados Utilizao do teclado para navegar Dreamweaver na pgina 72
Suporte para recursos de acessibilidade do sistema operacional

O Dreamweaver suporta recursos de acessibilidade nos sistemas operacionais Windows e Macintosh. Por exemplo, no Macintosh, voc define as preferncias visuais na caixa de dilogo Universal Access Preferences (Preferncias de acesso universal) (Apple > System Preferences [Preferncias de sistema]). Suas definies so refletidas na rea de trabalho do Dreamweaver. O Dreamweaver tambm suporta a definio de alto contraste do sistema operacional Windows. O usurio ativa esta opo por meio do Painel de Controle do Windows. Quando o alto contraste est ativado, ele afeta o Dreamweaver da seguinte maneira:
As caixas de dilogo e os painis utilizam as definies de cor do sistema. Por exemplo: se voc definir a cor como branco ou preto, todas as caixas de dilogo e painis do Dreamweaver sero exibidos com uma cor de primeiro plano branca e de segundo plano preta.
A sinalizao da sintaxe por cores da visualizao do cdigo est desativada. A visualizao do cdigo utiliza a janela do sistema e a cor do texto da janela, e ignora as definies de cor em Preferences. Por exemplo, se voc definir a cor do sistema como branco sobre preto e alterar as cores do texto em Preferences > Code Coloring (Codificao por cores), o Dreamweaver ignorar a definio de cores em Preferences e exibir o texto do cdigo com uma cor branca em primeiro plano e preta em segundo plano.
71
A visualizao do projeto utiliza as cores de segundo plano e de texto definidas em Modify (Modificar) > Page Properties (Propriedades de pgina) para que o projeto das pginas processe as cores como um navegador.
Tpicos relacionados Utilizar as leitoras de tela com o Dreamweaver na pgina 71
Utilizao do teclado para navegar Dreamweaver

possvel utilizar o teclado para navegar por painis, inspetores, caixas de dilogo, quadros e tabelas do Dreamweaver em vez de usar o mouse. Tpicos relacionados Utilizar as leitoras de tela com o Dreamweaver na pgina 71
Suporte para recursos de acessibilidade do sistema operacional na pgina 71
Painis de navegao
possvel utilizar o teclado para navegar nos painis
N OT A
A utilizao de tabulao e teclas de setas suportada somente pelo Windows.
Para navegar nos painis:

1.
Na janela do documento, pressione Control+Alt+Tab para mudar o foco para um painel. Um contorno branco em torno da barra de ttulos do painel indica que o foco est nesse painel. A leitora de tela l a barra de ttulos do painel que est no foco.
2.
Pressione Control+Alt+Tab novamente para mudar o foco para o prximo painel. Continue at ter o foco no painel com o qual deseja trabalhar. Pressione Control+Alt+ Shift+Tab para mudar o foco para o painel anterior, se necessrio. Se o painel desejado no estiver aberto, utilize os atalhos de teclado listados no menu Windows (Janelas) para exibir o painel apropriado e pressione Control+Alt+Tab para mudar o foco para esse painel. Se o painel desejado estiver aberto, mas no expandido, coloque o foco na barra de ttulo do painel e pressione a barra de espao. Pressione a barra de espao novamente para reduzir o painel.
3. 4.
5.
Pressione a tecla Tab para percorrer as opes no painel. Um contorno pontilhado em torno da opo indica que o foco est nessa opo.
72
6.
Utilize as teclas de seta quando apropriado.
Se uma opo contiver outras opes, utilize as teclas de seta para percorrer as opes e pressione a barra de espao para fazer uma seleo. Se houver guias no grupo de painel para abrir outros painis, 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 opes nesse painel.
Tpicos relacionados Navegar em caixas de dilogo na pgina 74

Navegar em quadros na pgina 74 Navegar nas tabelas na pgina 75
Navegar no Property inspector

possvel utilizar o teclado para navegar no Property inspector e fazer alteraes no documento.
N OT A
A utilizao das teclas de setas suportada somente pelo Windows.
Para navegar no Property inspector:

1.
Pressione Control+F3 (no Windows) ou Command+F3 (no Macintosh) para exibir o Property inspector, se ele ainda no estiver visvel. (Windows) Pressione Control+Alt+Tab at mudar o foco para o Property inspector. Pressione a tecla Tab para percorrer as opes do Property inspector. (Windows) Utilize as teclas de seta conforme apropriado para percorrer as opes. Pressione Control+Tab (no Windows) ou Option+Tab (no Macintosh) para abrir e fechar a seo expandida do Property inspector quando necessrio. Ou, com o foco na seta de expanso na parte inferior direita, pressione a barra de espao.
2. 3. 4. 5.
Tpicos relacionados Painis de navegao na pgina 72

Navegar em quadros na pgina 74 Navegar nas tabelas na pgina 75
73
Navegar em caixas de dilogo

possvel utilizar o teclado para navegar nas caixas de dilogo.
N OT A
Para navegar em uma caixa de dilogo:

1. 2.
Pressione a tecla Tab para percorrer as opes em uma caixa de dilogo. (Windows) Utilize as teclas de setas para percorrer as opes de uma opo. Por exemplo, se uma opo tem um menu pop-up, mova o foco para essa opo e utilize a seta para baixo para percorrer as opes.
3.
Se a caixa de dilogo tem uma lista de categorias, pressione Control+Tab (no Windows) ou Option+Tab (no Macintosh) 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. Pressione Control+Tab (no Windows) ou Option+Tab (no Macintosh) novamente para mudar as opes de uma categoria. Pressione Enter (no Windows) ou Return (no Macintosh) para sair da caixa de dilogo.
4.
5.

Navegar no Property inspector na pgina 73 Navegar nas tabelas na pgina 75
Navegar em quadros
Se o documento contm quadros, possvel utilizar as teclas de seta para mudar o foco para um quadro.
N OT A
Para selecionar um quadro:

1. 2.
Coloque o ponto de insero na janela do documento. Pressione Alt+Seta para Cima, para selecionar o quadro que atualmente est no foco. Uma linha pontilhada indica o quadro que est no foco. Continue pressionando Alt+Seta para Cima para mudar o foco para o conjunto de quadros e, em seguida, conjuntos de quadros pai, se houver conjuntos de quadros aninhados.
3.
74
4.
Pressione Alt+Seta para Baixo, para mudar o foco para um conjunto de quadros filho ou um nico quadro no conjunto de quadros. Com o foco em um nico quadro, pressione Alt+Seta para a Esquerda ou para a Direita para percorrer os quadros. Pressione Alt+Seta para a Direita para colocar o ponto de insero na janela do documento.
5.
6.

Navegar no Property inspector na pgina 73 Navegar em caixas de dilogo na pgina 74
Navegar nas tabelas

Aps selecionar uma tabela, possvel utilizar o teclado para navegar nela.
Para navegar em uma tabela:
1.
Utilize as teclas de setas ou pressione Tab para percorrer as outras clulas da tabela quando necessrio.
DICA
Quando a tecla de tabulao for pressionada na clula mais direita, ser adicionada automaticamente outra linha tabela.
2.
Para selecionar uma clula, pressione Control+A (no Windows) ou Command+A (Macintosh) enquanto o ponto de insero est na clula. Para selecionar uma tabela, pressione Control+A (no Windows) ou Command+A (Macintosh) duas vezes se o ponto de insero estiver em uma clula, ou uma vez se uma clula estiver selecionada. Para sair da tabela, pressione Control+A (no Windows) ou Command+A (no Macintosh) trs vezes se o ponto de insero estiver em uma clula, duas vezes se a clula estiver selecionada ou uma vez se a tabela estiver selecionada, e depois pressione a tecla de seta para cima, para a esquerda, para a direita ou para baixo.
3.
4.

Navegar no Property inspector na pgina 73 Navegar em caixas de dilogo na pgina 74 Navegar em quadros na pgina 74
75
Otimizar a rea de trabalho para o projeto de pgina acessvel

Ao criar pginas acessveis, necessrio associar informaes, tais como identificadores e descries, aos objetos da pgina para tornar o contedo acessvel a todos os usurios. Para fazer isso, ative a caixa de dilogo Accessibility para cada objeto, de modo que o Dreamweaver solicite informaes sobre acessibilidade quando voc inserir objetos. possvel ativar a caixa de dilogo para cada um dos objetos na categoria Accessibility em Preferences (Preferncias).
Para ativar as caixas de dilogo Accessibility:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences ser exibida. Na lista Category (Categoria), esquerda, selecione Accessibility. A caixa de dilogo Preferences exibe as opes de acessibilidade.
2.
3.
Selecione os objetos para os quais voc deseja ativar caixas de dilogo Accessibility. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
N OT A
Os atributos de acessibilidade aparecem automaticamente na caixa de dilogo Insert Table (Inserir tabela) quando voc insere uma nova tabela.
76
4.
Clique em OK.
Para cada objeto selecionado, uma caixa de dilogo Accessibility solicita a digitao de atributos e tags de acessibilidade quando voc insere o objeto em um documento. Tpicos relacionados Dreamweaver e acessibilidade na pgina 33

Inserir uma imagem na pgina 448 Validar dados de formulrio HTML na pgina 902 Criar quadros e conjuntos de quadros na pgina 309 Inserir e editar um objeto de mdia na pgina 518 Inserir uma tabela e adicionar contedo na pgina 260
Utilizar guias visuais no Dreamweaver

O Dreamweaver fornece diversos tipos de guias visuais para auxili-lo a projetar os documentos e prever (aproximadamente) a aparncia que eles tero nos navegadores. possvel executar qualquer um destes procedimentos:
Ajustar instantaneamente a janela do documento ao tamanho desejado para ver como os elementos se ajustam pgina. Consulte Redimensionar a janela do documento na pgina 58. Utilizar uma imagem de rastreamento como o fundo da pgina para ajudar a duplicar um projeto criado em um aplicativo de edio de imagens ou ilustraes, como o Macromedia Fireworks. Consulte Utilizar uma imagem de rastreamento na pgina 254. Utilizar as rguas e guias para que sirvam como um guia visual ao posicionar e redimensionar com preciso elementos de pgina. Consulte Utilizar rguas, guias e grades para definir o layout de pginas na pgina 250. Utilizar a grade para posicionar e redimensionar as camadas com preciso. Consulte Utilizar a grade na pgina 253. As marcas da grade exibidas na pgina ajudam a alinhar as camadas e, quando o encaixe for ativado, as camadas sero encaixadas automaticamente no ponto de grade mais prximo ao serem redimensionadas ou movidas (outros objetos, como imagens e pargrafos, no se encaixam na grade). O encaixe funcionar independentemente da visibilidade da grade.
Utilizar guias visuais no Dreamweaver
77
Dreamweaver conceitos bsicos de personalizao

Existem algumas tcnicas bsicas que podem ser utilizadas para personalizar o Dreamweaver, de modo a adequ-lo s suas necessidades, sem precisar conhecer cdigos complexos ou saber como editar arquivos de texto. Por exemplo, voc pode alterar o layout da rea de trabalho, ocultar ou exibir a pgina inicial, definir preferncias, criar seus prprios atalhos de teclado e adicionar extenses ao Dreamweaver. Para obter informaes sobre como personalizar o layout dos painis na rea de trabalho, consulte Utilizar painis e grupos de painis na pgina 67.
NO TA
Para obter informaes sobre como personalizar arquivos de configurao manualmente, consulte Customizing Dreamweaver no centro de suporte da Macromedia em www.macromedia.com/go/customizing_dreamweaver.
Esta seo descreve somente as opes mais comuns das preferncias. Para obter informaes sobre uma opo especfica das preferncias no includa aqui, consulte o tpico correspondente em Usando o Dreamweaver. Tpicos relacionados Sobre a personalizao do Dreamweaver em sistemas multiusurio Extending Dreamweaver
Escolher o layout de rea de trabalho (no Windows)

No Windows, possvel escolher entre os layouts Designer e Coder da rea de trabalho. Quando voc inicia o Dreamweaver pela primeira vez, possvel escolher um layout para a rea de trabalho em uma caixa de dilogo. possvel alternar para uma outra rea de trabalho a qualquer momento.
Para escolher um layout da rea de trabalho na primeira vez que voc iniciar o Dreamweaver:
1.
Selecione um dos seguintes layouts:

Designer uma rea de trabalho integrada que utiliza a interface de mltiplos documentos (MDI), na qual todas as janelas de documento e painis esto integrados em uma janela de aplicativo maior, com os grupos de painis encaixados direita.
78
Coder consiste na mesma rea de trabalho integrada. No entanto, os grupos de painis esto encaixados esquerda apresentando um layout semelhante ao utilizado pelo Macromedia HomeSite e pelo Macromedia ColdFusion Studio e a janela do documento mostra a visualizao do cdigo como padro.
NO TA
possvel encaixar grupos de painis em qualquer lados da rea de trabalho em qualquer dos layouts.
2.
Clique em OK.
Para alternar para uma rea de trabalho diferente da que foi escolhida:
Selecione Window > Workspace Layout (Layout da rea de trabalho) e selecione seu layout preferido para a rea de trabalho.
Alm de selecionar Coder e Designer, possvel selecionar Dual Screen Right (Monitor secundrio direita) ou Dual Screen Left (Monitor secundrio esquerda). Se voc tiver um monitor secundrio direita do monitor principal, a opo Dual Screen Right far com que todos os painis sejam exibidos no monitor da direita e manter a janela do documento no monitor principal. Se voc tiver um monitor secundrio esquerda do monitor principal, a opo Dual Screen Left far com que todos os painis sejam exibidos no monitor da esquerda e manter a janela do documento no monitor principal. Tpicos relacionados O layout da rea de trabalho na pgina 44

Salvar layouts personalizados da rea de trabalho na pgina 80 Dispor janelas de documentos em cascata ou lado a lado na pgina 57
Exibir documentos com guias (Macintosh)

No Macintosh, o Dreamweaver pode exibir vrios documentos em uma nica janela de documento, utilizando guias para identificar cada documento. O Dreamweaver tambm pode exibi-los como parte de uma rea de trabalho flutuante, na qual cada documento aparece na sua prpria janela.
Para abrir um documento com guias em uma janela separada:
Clique com o boto direito do mouse (no Windows) ou clique com a tecla Control pressionada (no Macintosh) e, em seguida, selecione New Window (Nova janela) no menu contextual.
Para combinar documentos separados em janelas com guias:
Selecione Window (Janela) > Combine as Tabs (Combinar como guias).
79
Para alterar a definio padro de documento com guias:

1.
Selecione Dreamweaver > Preferences (Preferncias) e depois selecione a categoria General (Geral). Marque ou desmarque Open Documents in Tabs (Abrir documentos em guias) e clique em OK.
NO T A
2.
O Dreamweaver no altera a exibio dos documentos que esto abertos quando voc altera as preferncias. No entanto, os documentos que forem abertos depois que voc selecionar uma nova preferncia sero exibidos de acordo com a preferncia selecionada.
Tpicos relacionados O layout da rea de trabalho na pgina 44
Dispor janelas de documentos em cascata ou lado a lado na pgina 57
Salvar layouts personalizados da rea de trabalho

O Dreamweaver permite salvar e restaurar conjuntos de painis diferentes, de modo que voc possa personalizar sua rea de trabalho para diferentes atividades. Quando voc salva um layout de rea de trabalho, o Dreamweaver memoriza os painis no layout especificado, bem como outros atributos como as posies e os tamanhos dos painis, seu estado expandido ou minimizado, a posio e o tamanho da janela do aplicativo.
Para salvar um layout personalizado da rea de trabalho:
1. 2.
Organize os painis como desejar. Selecione Window (Janela) > Workspace Layout (Layout da rea de trabalho) > Save Current (Salvar atual). Digite um nome para o layout e clique em OK.
3.
Para alternar para um outro layout personalizado da rea de trabalho:
Selecione Window > Workspace Layout e selecione seu layout personalizado.
Para renomear ou excluir um layout personalizado da rea de trabalho:

1. 2.
Selecione Window > Workspace Layout > Manage (Gerenciar). Selecione um layout e siga um dos procedimentos abaixo:
Para renomear um layout, clique no boto Rename (Renomear), digite um novo nome de layout e clique em OK. Para excluir um layout, clique no boto Delete (Excluir).
80
3.
Clique em OK.
Tpicos relacionados Utilizar painis e grupos de painis na pgina 67

Escolher o layout de rea de trabalho (no Windows) na pgina 78 Exibir documentos com guias (Macintosh) na pgina 79
Ocultar e exibir a pgina inicial

A pgina inicial do Dreamweaver aparece quando voc inicia o Dreamweaver e quando no h documentos abertos. Voc pode optar por ocultar a pgina inicial e, mais tarde, exibi-la novamente. Quando a pgina inicial estiver oculta e no houver documentos abertos, a janela do documento estar em branco.
NO TA
Voc pode definir o Dreamweaver para abrir o ltimo documento em que estava trabalhando toda vez que for iniciado. Para obter mais informaes, consulte Definir as preferncias gerais para o Dreamweaver na pgina 81.
Para ocultar a pgina inicial:
Marque a caixa de seleo Dont Show Again (No mostrar novamente) na pgina inicial.
A pgina inicial no ser exibida quando voc iniciar o Dreamweaver ou depois que voc abrir e fechar um documento.
Para exibir a pgina inicial:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences ser exibida com a categoria de preferncias General (Geral).
2.
Marque a caixa de seleo Show Start Page (Mostrar pgina inicial).
A pgina inicial ser exibida quando voc iniciar o Dreamweaver ou depois que abrir e fechar um documento.
Definir as preferncias gerais para o Dreamweaver

As preferncias gerais controlam a aparncia do Dreamweaver como um todo.
Para alterar as preferncias gerais:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences ser exibida com a categoria de preferncias General (Geral).
81
2.
Defina as opes de preferncias. Para obter mais informaes, clique em Help. Clique em OK.
3.
Definir as preferncias de fontes para a exibio do Dreamweaver

A codificao do documento determina como ele ser exibido em um navegador. As preferncias de fontes do Dreamweaver permitem mostrar determinada codificao utilizando a fonte e o tamanho preferidos, sem afetar a aparncia do documento quando visualizado por outras pessoas em um navegador.
Para definir as fontes a serem utilizadas no Dreamweaver para cada tipo de codificao:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida. Na lista Category (Categoria), esquerda, selecione Fonts (Fontes). Selecione o tipo de codificao, como Western (Latin1) (Ocidental [Latim1]) ou Japanese (Japons), na lista Font Settings (Definies de fontes). Em seguida, nos menus pop-up de fontes situados abaixo da lista Font Settings, escolha as fontes a serem utilizadas no Dreamweaver para essa codificao. Para obter mais informaes, clique em Help.
N OT A
2. 3.
As fontes selecionadas no afetam a aparncia do documento no navegador de um visitante.
4.
Clique em OK.
Tpicos relacionados Codificao de documentos na pgina 379
82
Personalizao de atalhos de teclado

Utilize o Keyboard Shortcut Editor (Editor de atalhos de teclado) para criar suas prprias teclas de atalho, incluindo atalhos de teclado para trechos de cdigo. Voc pode tambm remover atalhos, editar atalhos j existentes e selecionar um conjunto predeterminado de atalhos no Keyboard Shortcut Editor.
N OT A
Um diagrama com todos os atalhos de teclado da configurao padro do Dreamweaver est disponvel como guia de referncia rpida no site da Macromedia na Web, em www.macromedia.com/go/dw_documentation.
Para personalizar os atalhos de teclado:

1.
Selecione Edit > Keyboard Shortcuts (Atalhos de teclado, no Windows) ou Dreamweaver > Keyboard Shortcuts (no Macintosh). Ser exibida a caixa de dilogo Keyboard Shortcuts.
Duplicate Set (Conjunto duplicado), boto Delete Set (Excluir conjunto), boto Export Set as HTML (Exportar conjunto como HTML), boto Rename Set (Renomear conjunto), boto
2.
Adicionar, excluir ou editar atalhos de teclado. Para obter mais informaes, clique em Help. Clique em OK.
3.
83
Adicionar extenses ao Dreamweaver

As extenses so novos recursos que podem ser facilmente adicionados ao Dreamweaver. possvel utilizar muitos tipos de extenses, por exemplo: h extenses que permitem reformatar tabelas, efetuar conexes a bancos de dados auxiliares ou que podem ajud-lo a escrever scripts para navegadores.
N OT A
Para instalar extenses s quais todos os usurios tenham acesso em um sistema operacional multiusurio, necessrio ter efetuado login como Administrador (no Windows) ou raiz (no Mac OS X). Para obter mais informaes sobre os sistemas multiusurio, consulte Sobre a personalizao do Dreamweaver em sistemas multiusurio na pgina 55.
Para localizar as extenses mais recentes para o Dreamweaver, visite o site do Macromedia Exchange na Web, em www.macromedia.com/go/dreamweaver_exchange/. Neste site, possvel efetuar o login e o download das extenses (muitas das quais so gratuitas), participar de grupos de discusso, visualizar as avaliaes e crticas dos usurios, alm de instalar e utilizar o Extension Manager. necessrio instalar o Extension Manager antes de instalar as extenses. O Extension Manager um aplicativo independente que permite instalar e gerenciar as extenses nos aplicativos da Macromedia. Inicie o Extension Manager no Dreamweaver escolhendo Commands (Comandos) > Manage Extensions (Gerenciar extenses).
Para instalar e gerenciar as extenses:
1.
No site do Macromedia Exchange na Web, clique no link de download de uma extenso. O seu navegador talvez permita optar por abri-la e instal-la diretamente no site ou salvla em disco.
Se a extenso for aberta diretamente no site, o Extension Manager executar a instalao automaticamente. Se a extenso for salva no disco, um bom local para salvar o arquivo do pacote de extenso (.mxp) a pasta Downloaded Extensions, na pasta do aplicativo Dreamweaver do computador.
84
2.
Clique duas vezes no arquivo do pacote de extenso ou abra o Extension Manager e selecione File > Install Extension (Instalar a extenso). A extenso ser instalada no Dreamweaver. Algumas extenses no estaro acessveis enquanto o Dreamweaver no for reiniciado. possvel que voc seja solicitado a sair do aplicativo e reinici-lo.
N OT A
Utilize o Extension Manager para remover extenses ou ver mais informaes sobre uma determinada extenso.
85
86
CAPTULO 2
Configurar um site do Dreamweaver

Um site da Web um conjunto de documentos vinculados com atributos compartilhados, como tpicos relacionados, um projeto semelhante ou uma finalidade compartilhada. O Macromedia Dreamweaver 8 uma ferramenta de criao e gerenciamento de sites que voc pode utilizar para criar sites da Web completos, alm de documentos. A primeira etapa da criao de um site da Web o planejamento. Para obter os melhores resultados, projete e planeje a estrutura do site da Web antes de criar as pginas contidas nele. A prxima etapa configurar o Dreamweaver para que voc possa trabalhar na estrutura bsica do site. Se voc j tiver um site em um servidor da Web, poder utilizar o Dreamweaver para edit-lo.
DICA
medida que voc desenvolver o contedo do site, tente utilizar modelos do Dreamweaver como base para as pginas. Consulte Sobre modelos do Dreamweaver na pgina 326 e Criar um modelo no Dreamweaver na pgina 340.

Sobre sites do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Configurar um novo site do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Utilizar as definies avanadas para configurar um site do Dreamweaver . . . . . . 91 Editar definies de um site do Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Editar sites da Web j existentes no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Sobre sites do Dreamweaver

Um site do Dreamweaver fornece uma maneira de organizar todos os documentos associados a um site da Web. A organizao dos arquivos em um site permite utilizar o Dreamweaver para efetuar o upload do site no servidor da Web, controlar e manter automaticamente os links e gerenciar e compartilhar os arquivos. Para aproveitar todas as vantagens dos recursos do Dreamweaver, defina um site.
87
Um site do Dreamweaver consiste em at trs partes, ou pastas, dependendo do ambiente de desenvolvimento e do tipo de site da Web a ser criado:
A pasta local
o diretrio de trabalho. O Dreamweaver refere-se a essa pasta como site local. Essa pasta pode estar no computador local ou em um servidor da rede. Esse o local onde voc armazena os arquivos de um site do Dreamweaver nos quais est trabalhando. Para definir um site do Dreamweaver, basta configurar a pasta local. Para transferir arquivos para um servidor da Web ou desenvolver aplicativos para a Web, voc tambm precisa adicionar informaes relativas a um site remoto e um servidor de teste.
onde so armazenados os arquivos, dependendo do ambiente de desenvolvimento: teste, produo, colaborao e assim por diante. O Dreamweaver refere-se a essa pasta como site remoto no painel Files (Arquivos). Normalmente, a pasta remota est situada no computador onde estiver em execuo o servidor da Web.
A 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.
A pasta de servidor de teste a pasta onde o Dreamweaver processa pginas dinmicas. Para
obter mais informaes, consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667. Tpicos relacionados Configurar um novo site do Dreamweaver na pgina 90
Estrutura das pastas local e remota

Quando configurar o acesso pasta remota para o site do Dreamweaver (consulte Configurar uma pasta remota na pgina 94), determine o diretrio do host dessa pasta. O diretrio 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.
no diretrio de login (No deve ser o Diretrio Host nesse caso) public_html (deve ser o Diretrio Host) Propriedades (No deve ser o Diretrio Host) HTML
site local (pasta-raiz) Propriedades
sim
no
HTML
88
Captulo 2: Configurar um site do Dreamweaver
Se a estrutura da pasta remota no coincidir com a da pasta local, o Dreamweaver efetuar o upload dos arquivos para o local incorreto e eles no estaro visveis para os visitantes do site. Os caminhos para as imagens e os links tambm sero rompidos. necessrio que o diretrio raiz remoto exista para que o Dreamweaver possa se conectar a ele. Se no houver um diretrio raiz para a pasta remota, solicite ao administrador do servidor que crie um ou crie-o voc mesmo. Mesmo se pretender editar apenas uma parte do site remoto, duplique localmente toda a estrutura da ramificao 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, no haver necessidade de efetuar o download dos arquivos do Projeto2, porm ser necessrio mapear a pasta raiz local para public_html, em vez de Projeto1.
SITE REMOTO SITE LOCAL Pasta-raiz local (mapeie esta pasta em public_html, no em Projeto1 ou Projeto1/HTML)
public_html
Projeto 1 Projeto 1 (deve estar presente no site local; corresponde a Projeto1 no site remoto) HTML (deve estar presente no site local; corresponde a Projeto1/HTML no site remoto)
Propriedades
HTML
Projeto 2
Propriedades
HTML
Tpicos relacionados Sobre sites do Dreamweaver na pgina 87 Configurar uma pasta remota na pgina 94
Sobre sites do Dreamweaver
89
Configurar um novo site do Dreamweaver

Depois de planejar a estrutura do site, ou se j houver um site, defina um novo site no Dreamweaver antes de iniciar o desenvolvimento. A configurao de um site do Dreamweaver uma maneira de organizar todos os documentos associados a um site da Web. Para obter mais informaes, consulte Sobre sites do Dreamweaver na pgina 87.
NO T A
Voc tambm pode editar arquivos sem configurar um site do Dreamweaver. Para obter mais informaes, consulte Acessar sites, um servidor e unidades locais na pgina 118.
Aps configurar um site do Dreamweaver, recomendvel exportar o site para que voc tenha uma cpia de backup local. Para obter mais informaes, consulte Importar e exportar sites na pgina 147.
Para configurar um site do Dreamweaver:
1.
Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida.
N OT A
Se no houver um site do Dreamweaver definido, a caixa de dilogo Site Definition (Definio do site) aparecer e voc poder passar para a prxima etapa.
2.
Clique no boto New (Novo). A caixa de dilogo Site Definition (Definio do site) exibida. Siga um dos procedimentos abaixo:
3.
Clique na guia Basic (Bsica) para utilizar o Site Definition Wizard (Assistente de definio do site), que o orienta durante o processo de configurao.
NO T A
Recomenda-se aos usurios que ainda no conhecem o Dreamweaver que utilizem o Site Definition Wizard; os usurios mais experientes do Dreamweaver podero utilizar as definies avanadas.
Clique na guia Advanced (Avanado) para utilizar as definies avanadas, que permitem configurar individualmente pastas locais, remotas e de teste como necessrio.
N O TA
Para iniciar o procedimento, configure na ntegra um site do Dreamweaver ou inicie apenas a primeira etapa, configurando a pasta local.
90
4.
Conclua o processo de configurao do site do Dreamweaver:
Para o Site Definition Wizard, responda s perguntas de cada tela e, em seguida, clique em Next (Avanar) para continuar o processo de configurao ou clique em Back (Voltar) para retornar tela anterior. Para as definies avanadas, preencha as categorias Local Info (Informaes locais), Remote Info (Informaes remotas) e Testing Server (Servidor de teste), conforme necessrio (consulte Utilizar as definies avanadas para configurar um site do Dreamweaver na pgina 91).
D IC A
Se voc estiver configurando um site do Dreamweaver para um aplicativo para a Web, consulte Captulo 23, Configurar um aplicativo para a Web, na pgina 657.
Utilizar as definies avanadas para configurar um site do Dreamweaver

Voc pode utilizar as definies avanadas da caixa de dilogo Site Definition (Definio do site) para configurar um site do Dreamweaver. As definies avanadas permitem configurar pastas locais, remotas e de teste separadamente, para o processamento de pginas dinmicas, como necessrio. Esse mtodo recomendado aos usurios experientes do Dreamweaver.
N OT A
Para comear rapidamente, voc pode ir para a primeira etapa da configurao de um site do Dreamweaver, que configura a pasta local. Em seguida, voc pode adicionar informaes remotas e de teste. necessrio configurar pelo menos uma pasta local antes de comear a utilizar o Dreamweaver.
Se voc no tiver experincia com o Dreamweaver, poder utilizar o Site Definition Wizard (Assistente de definio do site), em vez das definies avanadas, para orient-lo durante o processo de configurao. Consulte Configurar um novo site do Dreamweaver na pgina 90.
91
Se voc estiver configurando um site do Dreamweaver para um aplicativo para a Web, ignore esta seo e consulte Captulo 23, Configurar um aplicativo para a Web, na pgina 657.
DICA
Tpicos relacionados Sobre sites do Dreamweaver na pgina 87 Especificar onde as pginas dinmicas podem ser processadas na pgina 667
Configurar uma pasta local

A pasta local o diretrio de trabalho do site do Dreamweaver. Essa pasta pode estar no computador local ou em um servidor da rede.
Para configurar uma pasta local:
1.
N OT A
Se no houver um site do Dreamweaver definido, a caixa de dilogo Site Definition (Definio do site) aparecer e voc poder passar para a prxima etapa.
2.
Clique em New (Novo). A caixa de dilogo Site Definition (Definio do site) exibida. Clique no boto Advanced (Avanado) se as definies avanadas no estiverem sendo exibidas.
3.
92
A guia Advanced da caixa de dilogo Site Definition exibir as opes da categoria Local Info (Informaes locais).
4.
Digite as opes de informaes locais. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. (Opcional) Se voc estiver pronto para configurar o servidor remoto agora, pule as etapas restantes; selecione a categoria Remote Info (Informaes remotas) esquerda e, em seguida, preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK. O Dreamweaver criar o cache inicial do site, e o novo site do Dreamweaver aparecer no painel Files (Arquivos).
5.
6.
93
Depois de configurar uma pasta local, voc poder adicionar pastas remotas ou de teste (consulte Configurar uma pasta remota na pgina 94 e Especificar onde as pginas dinmicas podem ser processadas na pgina 667). Tpicos relacionados Sobre sites do Dreamweaver na pgina 87
Gerenciar arquivos na pgina 113
Configurar uma pasta remota

Depois que voc tiver configurado uma pasta local de um site do Dreamweaver (consulte Configurar uma pasta local na pgina 92), configure uma pasta remota. Dependendo do ambiente de desenvolvimento, a pasta remota o local onde voc armazena arquivos para teste, colaborao, produo, disposio ou outros tipos de atividade.
N OT A
No ser necessrio especificar uma pasta remota se a pasta especificada como local for a mesma pasta criada para os arquivos do site no sistema que estiver executando o servidor da Web. Isso indica que o servidor da Web est em execuo no computador local.
Determine como voc acessar a pasta remota e anote as informaes de conexo. Esta seo descreve como configurar uma pasta remota e conectar-se a ela.
Para configurar uma pasta remota:
1.
Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. Selecione um site do Dreamweaver j existente. Se no houver sites do Dreamweaver definidos, crie uma pasta local antes de continuar (consulte Configurar uma pasta local na pgina 92).
2.
3.
Clique em Edit (Editar). A caixa de dilogo Site Definition (Definio do site) exibida. Clique no boto Advanced (Avanado) se as definies avanadas no estiverem sendo exibidas. Selecione Remote Info na lista Category (Categoria) esquerda. Selecione uma opo de acesso. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
4.
5. 6.
94
7.
Clique em OK. O Dreamweaver criar uma conexo para a pasta remota. Se voc estiver desenvolvendo um site dinmico, precisar adicionar uma pasta Testing Server (Servidor de teste) para processar as pginas dinmicas (consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667).
Para se conectar a uma pasta remota com o acesso de FTP:
No painel Files (Arquivos), clique no boto Connects to Remote Host (Conectar ao host remoto) na barra de ferramentas.
Para se desconectar de uma pasta remota com o acesso de FTP:
No painel Files, clique no boto Disconnect (Desconectar) na barra de ferramentas.
Para se conectar ou desconectar de uma pasta remota com acesso rede:
Voc no precisa se conectar pasta remota; voc est sempre conectado. Clique no boto Refresh (Atualizar) para ver os arquivos remotos.
Tpicos relacionados Sobre sites do Dreamweaver na pgina 87

Estrutura das pastas local e remota na pgina 88 Solucionar problemas de configurao da pasta remota na pgina 95
Solucionar problemas de configurao da pasta remota

Um servidor da Web pode ser configurado de vrias maneiras. A lista a seguir contm informaes sobre alguns problemas comuns que podem ocorrer durante a configurao de uma pasta remota (consulte Configurar uma pasta remota na pgina 94) e como solucionlos:
possvel que a implementao de FTP do Dreamweaver no funcione corretamente em determinados servidores proxy, firewalls em muitos nveis e outras formas de acesso indireto ao servidor. Caso voc tenha problemas com o acesso de FTP, pea ajuda ao administrador de sistemas local.
95
Para efetuar a implementao de FTP do Dreamweaver, necessrio estabelecer conexo com a pasta raiz do sistema remoto. Em muitos aplicativos, possvel conectar-se a qualquer diretrio remoto e, em seguida, navegar pelo sistema de arquivos remotos, para localizar o diretrio desejado. Certifique-se de indicar a pasta raiz do sistema remoto como diretrio do host. Se estiverem ocorrendo problemas na conexo e o diretrio do host tiver sido especificado com uma barra inclinada simples (/), possvel que voc precise especificar um caminho relativo do diretrio ao qual estiver se conectando, assim como a pasta raiz remota. Por exemplo: se a pasta raiz remota for um diretrio de nvel mais elevado, possvel que voc precise especificar ../../ correspondente ao diretrio do host.
Os nomes de pastas e arquivos que contm espaos e caracteres especiais geralmente causam problemas quando so transferidos para um site remoto. Utilize sinais de sublinhado em vez de espaos e evite os caracteres especiais nos nomes de arquivos e pastas, sempre que possvel. Em particular, dois pontos, barras inclinadas, pontos e apstrofes nos nomes de arquivos ou pastas podem causar problemas. Ocasionalmente, os caracteres especiais em nomes de pastas ou arquivos tambm podem impedir que o Dreamweaver crie um mapa do site.
Se ocorrerem problemas com nomes longos de arquivos, renomeie-os com designaes mais curtas. No Macintosh, os nomes de arquivos no podem exceder 31 caracteres. Observe que muitos servidores podem utilizar links simblicos (no UNIX), atalhos (no Windows) ou apelidos (no Macintosh), para conectar uma pasta em uma parte do disco do servidor a uma outra que esteja em uma localizao diferente. Por exemplo: o subdiretrio public_html do seu diretrio principal no servidor pode ser, na verdade, um link para outra parte do servidor. Na maioria dos casos, esses apelidos no tm efeito sobre a possibilidade de conexo pasta ou diretrio adequado, mas, se for possvel conectar-se a uma parte do servidor mas no a outras, talvez exista uma discrepncia de apelidos.
Caso aparea uma mensagem de erro como: cannot put file (no possvel colocar o arquivo), possvel que no haja espao na pasta remota. Para obter informaes mais detalhadas, consulte o registro do FTP.
N OT A
Em geral, se voc tiver um problema em uma transferncia por FTP, examine o registro do FTP selecionando Window (Janela) > Results (Resultados) (no Windows) ou Site > FTP Log (Registro do FTP) (no Macintosh), e clicando na tag FTP Log.
96
Editar definies de um site do Dreamweaver

Utilize as definies avanadas de Site Definition (Definio do site) para editar os sites do Dreamweaver.
Para editar as definies de um site do Dreamweaver, siga um dos seguintes procedimentos:
Selecione Site > Manage Sites (Gerenciar sites), selecione um site na caixa de dilogo Manage Sites e, em seguida, clique em Edit (Editar). No painel Files (Arquivos), selecione Manage Sites no menu pop-up em que o site atual, o servidor ou a unidade aparece; selecione um site na caixa de dilogo Manage Sites e, em seguida, clique em Edit.
Tpicos relacionados Configurar um novo site do Dreamweaver na pgina 90
Editar sites da Web j existentes no Dreamweaver

Voc pode utilizar o Dreamweaver para editar sites existentes, mesmo se o site original no tiver sido criado no Dreamweaver. possvel editar sites existentes no sistema local ou em um sistema remoto.
Editar um site local da Web j existente no Dreamweaver

Voc poder utilizar o Dreamweaver para editar um site da Web j existente no disco local, mesmo se o site original no tiver sido criado no Dreamweaver.
NO T A
Esta seo configura um site do Dreamweaver para editar um site local da Web j existente. Voc tambm pode editar o site existente sem criar um site do Dreamweaver. Para obter mais informaes, consulte Acessar sites, um servidor e unidades locais na pgina 118.
Para editar um site da Web local existente:

1.
97
2.
Clique em New (Novo). A caixa de dilogo Site Definition (Definio do site) exibida. Clique no boto Advanced (Avanado) se as definies avanadas no estiverem sendo exibidas. A guia Advanced da caixa de dilogo Site Definition exibir as opes da categoria Local Info (Informaes locais).
3.
4.
Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
5.
Editar um site remoto da Web j existente no Dreamweaver

Voc pode utilizar o Dreamweaver para copiar um site remoto j existente (ou uma ramificao desse site) para o disco local e edit-lo, mesmo se o site original no tiver sido criado no Dreamweaver.
N OT A
Esta seo configura um site do Dreamweaver para editar um site remoto da Web j existente. Voc tambm pode editar o site existente sem criar um site do Dreamweaver. Para obter mais informaes, consulte Acessar sites, um servidor e unidades locais na pgina 118.
Para editar um site remoto j existente:

1.
Crie uma pasta local que abrigar o site j existente e defina-a como a pasta local do site (consulte Configurar uma pasta local na pgina 92).
NO T A
Duplique localmente a estrutura inteira da ramificao em questo do site remoto existente. Para obter mais informaes, consulte Estrutura das pastas local e remota na pgina 88.
2.
Configure uma pasta remota (consulte Configurar uma pasta remota na pgina 94) utilizando as informaes sobre o site j existente. Escolha a pasta raiz correta para o site remoto. Para exibir o site remoto, no painel Files (Arquivos), em Window (Janela) > Files, clique no boto Connects to Remote Host (Conectar ao host remoto), para acesso ao FTP; ou clique no boto Refresh (Atualizar), para acesso rede, na barra de tarefas.
3.
98
4.
Dependendo de quanto deseje editar no site remoto, siga um destes procedimentos:
Para trabalhar com todo o site, selecione a pasta raiz do site remoto no painel Files e, em seguida, clique em Get (Obter), na barra de tarefas, para efetuar o download de todo o site para o disco local. Se desejar trabalhar apenas com um dos arquivos ou uma das pastas do site, localize o item na visualizao remota do painel Files e clique em Get para efetuar o seu download para o disco local.
O Dreamweaver duplicar automaticamente a parte necessria da estrutura do site remoto para posicionar o arquivo do qual voc efetuou o download no local adequado da hierarquia do site. Ao editar apenas uma parte de um site, opte preferencialmente por incluir os arquivos dependentes.
5.
Utilize o Dreamweaver para trabalhar no site.
Tpicos relacionados Editar um site local da Web j existente no Dreamweaver na pgina 97
99
100
CAPTULO 3
Criar e abrir documentos

O Macromedia Dreamweaver 8 oferece um ambiente flexvel para trabalhar com vrios documentos de desenvolvimento e criao na Web. Alm de documentos HTML, voc pode criar e abrir diversos documentos baseados em texto, inclusive CFML, ASP, JavaScript e CSS. O Dreamweaver tambm oferece suporte a arquivos de cdigo-fonte, como Visual Basic, .NET, C# e Java. O Dreamweaver fornece vrias opes para a criao de um novo documento. Voc pode criar qualquer um dos seguintes documentos:

Um novo modelo ou documento em branco Um documento baseado em um dos layouts de pgina predefinidos includos no Dreamweaver Um documento baseado em um dos seus modelos
Outras opes de documentos tambm esto disponveis. Por exemplo, se voc geralmente trabalha com um tipo de documento, poder defini-lo como o tipo de documento padro para as novas pginas que criar. No Dreamweaver, possvel definir com facilidade as propriedades de um documento, tais como tags meta, ttulo de documentos e cores de fundo, alm de vrias outras propriedades de pgina na visualizao do projeto ou na visualizao do cdigo. Este captulo contm as seguintes sees:
Criar novos documentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Salvar um novo documento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Definir um novo tipo de documento padro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Definir a extenso de arquivo padro de novos documentos HTML . . . . . . . . . . . 106 Abrir documentos existentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Limpar arquivos HTML do Microsoft Word . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
101
Criar novos documentos

O Dreamweaver fornece vrias opes de seleo de um novo documento de trabalho. possvel criar um novo documento das seguintes maneiras:
Comear com um documento em branco (consulte Criar um novo documento em branco na pgina 102). Criar um documento ou um modelo em branco com base em um arquivo de projeto do Dreamweaver (consulte Criar um documento com base em um arquivo de projeto do Dreamweaver na pgina 103). Utilizar um modelo que defina a aparncia de um documento e determine quais partes de um documento podero ser editadas (consulte Criar um documento a partir de um modelo existente na pgina 104).
DICA
Se, geralmente, voc trabalha com um tipo de documento especfico, poder definir um documento padro e automaticamente abrir um novo documento com base no documento padro por ele definido. Para obter informaes, veja Definir um novo tipo de documento padro na pgina 106.
Criar um novo documento em branco

Voc pode selecionar o tipo de documento em branco a ser criado.
Para criar um novo documento em branco:
1.
Selecione File (Arquivo)> New (Novo). A caixa de dilogo New Document (Novo documento) exibida. A guia General (Geral) j est selecionada.
2.
Na lista Category (Categoria), selecione Basic Page (Pgina bsica), Dynamic Page (Pgina dinmica), Template Page (Pgina de modelo), Other (Outros) ou Framesets (Conjuntos de quadros). Em seguida, na lista direita, selecione o tipo de documento a ser criado. Por exemplo, selecione Basic Page para criar um documento HTML, ou Dynamic Page para criar um documento ColdFusion ou ASP e assim por diante. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda) na caixa de dilogo.
102
Captulo 3: Criar e abrir documentos
3.
Clique no boto Create (Criar). O novo documento aberto na janela do documento. Salve o documento (consulte Salvar um novo documento na pgina 105).
4.
Tpicos relacionados Criar um documento a partir de um modelo existente na pgina 104
Criar um documento com base em um arquivo de projeto do Dreamweaver

O Dreamweaver vem com diversos arquivos de elementos de design e de layout de pgina com aparncia profissional. possvel utilizar esses arquivos de projeto como pontos de partida para criar pginas do seu prprio site. Quando voc cria um documento com base em um arquivo de projeto, o Dreamweaver gera uma cpia do arquivo.
NO TA
Se voc criar um documento com base em um conjunto de quadros predefinido, apenas a estrutura do conjunto de quadros ser copiada, e no o contedo do quadro. Alm disso, ser necessrio salvar cada arquivo de quadro separadamente. Para obter informaes sobre como salvar quadros, consulte Salvar arquivos de quadros e de conjuntos de quadros na pgina 316.
Para criar um novo documento a partir de um arquivo de projeto do Dreamweaver:

1.
Selecione File (Arquivo)> New (Novo). A caixa de dilogo New Document (Novo documento) exibida. A guia General (Geral) j est selecionada.
2.
Na lista Category (Categoria), selecione CSS Style Sheets (Folhas de estilo CSS), Table Based Layouts (Layouts baseados em tabelas), Page Designs (CSS) (Projetos de pgina [CSS]) Page Designs (Projetos de pgina) ou Page Designs (Accessible) (Projetos de pginas [acessveis]). Em seguida, selecione um arquivo de projeto na lista direita. Voc pode visualizar um arquivo de projeto e ler uma breve descrio dos elementos de projeto de um documento. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda) na caixa de dilogo.
3.
Clique no boto Create (Criar). O novo documento aberto na janela do documento. Se voc tiver selecionado uma folha de estilos CSS, o documento CSS aparecer na janela do documento e a folha de estilos CSS ser aberta na visualizao do cdigo.
Criar novos documentos
103
4.
Salve o documento (consulte Salvar um novo documento na pgina 105). Se o arquivo contiver links para os arquivos de propriedades, a caixa de dilogo Copy Dependent Files (Copiar os arquivos dependentes) ser aberta para voc salvar uma cpia dos arquivos dependentes.
5.
Se a caixa de dilogo Copy Dependent Files aparecer, defina as opes e, em seguida, clique em Copy (Copiar) para copiar as propriedades na pasta selecionada. Voc pode escolher sua prpria localizao para os arquivos dependentes ou utilizar a localizao da pasta padro gerada pelo Dreamweaver (com base no nome de origem do arquivo de projeto).
Tpicos relacionados Criar um novo documento em branco na pgina 102
Criar um documento a partir de um modelo existente

Voc pode selecionar, visualizar e criar um novo documento a partir de um modelo existente. possvel utilizar a caixa de dilogo New Document (Novo documento) para selecionar um modelo de qualquer um dos seus sites definidos pelo Dreamweaver ou utilizar o painel Assets (Propriedades) para criar um novo documento a partir de um modelo. Para obter informaes sobre como criar modelos, consulte Criar um modelo no Dreamweaver na pgina 340.
DICA
Se o seu site no contiver modelos, voc poder salvar um documento em uma das categorias do arquivo de projetos da caixa de dilogo New Document. Em seguida, crie pginas baseadas nesse modelo. Para obter informaes sobre como salvar um arquivo de projeto como um modelo, consulte Criar um documento com base em um arquivo de projeto do Dreamweaver na pgina 103.
Para criar um novo documento a partir de um modelo:

1.
Selecione File (Arquivo)> New (Novo). A caixa de dilogo New Document exibida. Clique na guia Templates (Modelos). Na lista Templates For (Modelos para), selecione o site do Dreamweaver que contm o modelo a ser utilizado e, em seguida, selecione um modelo na lista direita. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda) na caixa de dilogo.
2. 3.
4.
Clique em Create (Criar). O novo documento aberto na janela do documento.
104
5.
Salve o documento (consulte Salvar um novo documento na pgina 105).
Para criar um novo documento de um modelo no painel Assets:

1. 2.
Abra o painel Assets, em Window (Janela) > Assets, se ele ainda no estiver aberto. No painel Assets, clique no cone Templates esquerda para exibir a lista de modelos no seu site atual.
DICA
Se voc acabou de criar o modelo que deseja aplicar, talvez seja preciso clicar no boto Refresh (Atualizar) para visualiz-lo.
3.
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) no modelo a ser aplicado e, em seguida, selecione New From Template (Novo a partir de modelo). O documento aberto na janela do documento.
Tpicos relacionados Criar um novo documento em branco na pgina 102
Criar um documento com base em um arquivo de projeto do Dreamweaver na pgina 103
Salvar um novo documento

Quando voc cria um novo documento, preciso salv-lo.
Para salvar um novo documento:
1. 2.
Selecione File (Arquivo) > Save (Salvar). Na caixa de dilogo exibida, navegue at a pasta onde deseja salvar o arquivo.
DICA
aconselhvel salvar seu arquivo em um site do Dreamweaver. Para obter mais informaes, consulte Configurar um novo site do Dreamweaver na pgina 90.
3.
Na caixa de texto File Name (Nome do arquivo), digite um nome para o arquivo. Evite utilizar espaos e caracteres especiais em nomes de arquivos e de pastas e no inicie um nome de arquivo com um nmero. Particularmente, no utilize caracteres especiais (como , ou ) ou pontuao (como dois pontos, barras inclinadas ou pontos) nos nomes dos arquivos que sero colocados em um servidor remoto. Muitos servidores alteram esses caracteres durante o upload, o que causa o rompimento dos links para os arquivos.
4.
Clique em Save (Salvar).
Salvar um novo documento
105
Definir um novo tipo de documento padro

Voc pode definir o tipo de documento que o Dreamweaver utiliza como o documento padro de um site. Por exemplo, se a maioria das pginas de um site tiver um tipo de arquivo especfico (como documentos ColdFusion, HTML ou ASP), voc poder definir as preferncias de documento que criam automaticamente novos documentos do tipo de arquivo especificado.
Para definir um novo tipo de documento padro e suas preferncias:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida.
DICA
Voc tambm pode clicar no boto Preferences na caixa de dilogo New Document (Novo documento) para definir as preferncias quando criar um novo documento (consulte Criar um novo documento em branco na pgina 102).
2. 3.
Clique em New Document na lista de categorias esquerda. Defina ou altere as preferncias como necessrio. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda).
4.
Clique em OK. O Dreamweaver salva as preferncias.
Definir a extenso de arquivo padro de novos documentos HTML

possvel definir a extenso de arquivo padro de documentos HTML criados no Dreamweaver. Por exemplo, possvel indicar que o Dreamweaver utilize uma extenso .htm ou .html para todos os novos documentos HTML.
Para definir a extenso de arquivo padro de novos documentos HTML:
1.
DICA
Voc tambm pode clicar no boto Preferences na caixa de dilogo New Document (Novo documento) para definir as preferncias quando criar um novo documento (consulte Criar um novo documento em branco na pgina 102).
106
2. 3. 4.
Clique em New Document na lista de categorias esquerda. Em Default Document Type (Tipo de documento padro), selecione a opo HTML. Na caixa de texto Default Extension (Extenso padro), especifique a extenso de arquivo que deseja para os novos documentos HTML criados no Dreamweaver. Para Windows, possvel especificar as seguintes extenses: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml. Para Macintosh, possvel especificar as seguintes extenses: .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.
Abrir documentos existentes

No Dreamweaver, voc pode abrir uma pgina da Web existente ou um documento baseado em texto, mesmo que ele no tenha sido criado no Dreamweaver. possvel abrir o documento e utilizar o Dreamweaver para edit-lo na visualizao do projeto ou do cdigo. Se o documento aberto for um arquivo do Microsoft Word salvo como HTML, voc poder utilizar o comando Cleanup Word HTML (Limpar o HTML do Word) para remover as tags de markup irrelevantes que o Word insere em arquivos HTML. Para obter mais informaes, consulte Limpar arquivos HTML do Microsoft Word na pgina 108. Para limpar o HTML ou XHTML que no foi gerado pelo Microsoft Word, consulte Limpar o cdigo na pgina 633. Tambm possvel 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.
Para abrir um arquivo existente:
1.
Selecione File (Arquivo) > Open (Abrir). A caixa de dilogo Open exibida.
DICA
Tambm possvel utilizar o painel Files (Arquivos) para abrir arquivos. Para obter mais informaes, consulte Trabalhar com arquivos no painel Files (Arquivos) na pgina 134.
2.
Navegue e selecione o arquivo a ser aberto.

NO T A
Se ainda no tiver selecionado o arquivo, recomendvel organizar os arquivos que planeja abrir e editar em um site do Dreamweaver, e no em outro local. Para obter informaes sobre como configurar um site do Dreamweaver, consulte Configurar um novo site do Dreamweaver na pgina 90.
Abrir documentos existentes
107
3.
Clique em Open. O documento aberto na janela do documento. Por padro, documentos JavaScript, de texto e de Folhas de estilos CSS so abertos na visualizao do cdigo. possvel atualizar o documento enquanto se trabalha no Dreamweaver e, depois, salvar as alteraes feitas no arquivo. Para obter informaes sobre como definir um editor de texto externo para exibir esses tipos de arquivos, consulte Iniciar um editor de arquivos de mdia externo na pgina 521.
Limpar arquivos HTML do Microsoft Word

No Dreamweaver, possvel abrir documentos salvos pelo Microsoft Word como arquivos HTML e, ento, utilizar o comando Clean Up Word HTML (Limpar o HTML do Word) para remover o cdigo HTML irrelevante gerado pelo Word. O comando Clean Up Word HTML est disponvel para documentos salvos como arquivos HTML no Word 97 ou em verses posteriores. O cdigo que o Dreamweaver remove utilizado pelo Word basicamente para formatar e exibir os documentos no Word, no sendo necessrio exibio do arquivo HTML. recomendvel guardar uma cpia de segurana do arquivo original do Word (.doc), porque talvez no seja possvel reabrir o documento HTML no Word aps a aplicao do recurso Clean Up Word HTML. Para limpar o HTML ou XHTML que no foi gerado pelo Microsoft Word, consulte Limpar o cdigo na pgina 633.
Para abrir e limpar um arquivo HTML do Microsoft Word:
1.
No Microsoft Word, salve o documento como um arquivo HTML, se ainda no tiver feito isso.
N OT A
No Windows, feche o arquivo no Word para evitar uma violao de compartilhamento.
2.
Abra o arquivo HTML no Dreamweaver. Para exibir o cdigo HTML gerado pelo Word, alterne para a visualizao do cdigo (View [Exibir] > Code [Cdigo].
108
3.
Selecione Commands (Comandos) > Clean Up Word HTML (Limpar o HTML do Word). A caixa de dilogo Clean Up Word HTML exibida. Poder ocorrer um pequeno atraso enquanto o Dreamweaver tenta detectar a verso do Word utilizada para salvar o arquivo. Se o Dreamweaver no conseguir detect-la, selecione a verso correta no menu pop-up.
4.
Desmarque as opes da caixa de dilogo, se desejar. Para obter mais informaes sobre as opes dessa caixa de dilogo, clique no boto Help (Ajuda).
5.
Clique em OK. O Dreamweaver aplica as configuraes de limpeza ao documento HTML, e um registro das alteraes exibido (a menos que voc desmarque essa opo na caixa de dilogo).
Tpicos relacionados Importar documentos do Microsoft Office (apenas noWindows) na pgina 420
Limpar arquivos HTML do Microsoft Word
109
110
PARTE 2
Trabalhar com sites do Dreamweaver

Aprenda a gerenciar os sites do Macromedia Dreamweaver 8 e as propriedades especficas do site. Esta seo contm os seguintes captulos:
Captulo 4: Gerenciar arquivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Captulo 5: Gerenciar bibliotecas e propriedades de sites . . . . . 177 Captulo 6: Gerenciar sites do Contribute com o Dreamweaver 201
111
CAPTULO 4
Gerenciar arquivos
O Macromedia Dreamweaver 8 ajuda a organizar e gerenciar arquivos. O Dreamweaver inclui vrios recursos para gerenciar arquivos e transferir arquivos entre o seu computador e um servidor remoto. Quando os arquivos so transferidos entre os sites locais e remotos, o Dreamweaver mantm paralelas as estruturas de pastas e arquivos entre estes sites. Ao transferir arquivos entre os sites, o Dreamweaver automaticamente criar as pastas necessrias, se ainda no existirem em um dos sites. Voc tambm pode sincronizar os arquivos entre os sites locais e remotos. Quando apropriado, o Dreamweaver copia arquivos nas duas direes e remove os arquivos inteis. O Dreamweaver contm recursos para facilitar o trabalho de colaborao em sites da Web. possvel 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. possvel adicionar Design Notes aos arquivos, para compartilhar informaes com os membros da equipe sobre o status e prioridade de um arquivo, e assim por diante. Tambm possvel utilizar o recurso Workflow Reports (Relatrios de fluxo de trabalho), para executar relatrios relativos ao site, exibir informaes sobre o status das retiradas e devolues de arquivos e procurar as Design Notes anexadas aos arquivos. Este captulo contm as seguintes sees:
Sobre o gerenciamento de sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114 Acessar sites, um servidor e unidades locais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Exibir arquivos e pastas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Comparar arquivos para conhecer as diferenas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Reverter arquivos (usurios do Contribute) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Gerenciar arquivos e pastas no painel Files (Arquivos) . . . . . . . . . . . . . . . . . . . . . . . 132 Trabalhar com um mapa visual do site. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Importar e exportar sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Remover um site do Dreamweaver da lista de sites . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Devolver e retirar arquivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Obter e colocar arquivos no servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
113
Sincronizar os arquivos nos sites local e remoto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161 Identificar e excluir arquivos no-utilizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Mascarar as pastas e os arquivos do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Armazenar informaes sobre arquivos nas Design Notes . . . . . . . . . . . . . . . . . . . 167 Testar o site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Sobre o gerenciamento de sites

O Dreamweaver inclui diversos recursos para gerenciar um site e transferir arquivos entre o seu computador e um servidor remoto. O Dreamweaver tambm contm recursos para facilitar o trabalho em equipe em um site da Web, como o Check In/Check Out (Devolver/ retirar) e as Design Notes.
Sobre o sistema de devolues e retiradas

Em um ambiente com vrios usurios, utilize o sistema de devolues e retiradas de arquivos dos servidores local e remoto.
N OT A 114
possvel utilizar os recursos Get (Obter) e Put (Colocar) com um servidor de teste, mas no os recursos Check In/Check Out. Para obter mais informaes sobre como usar os recursos Get e Put, consulte Obter e colocar arquivos no servidor na pgina 155.
A retirada de um arquivo equivale a declarar: Estou trabalhando com este arquivo no o toque!. Quando um arquivo for retirado, o Dreamweaver exibir, no painel Files (Arquivos), o nome da pessoa que o retirou, juntamente com uma marca de seleo vermelha (se um membro da equipe o tiver retirado) ou verde (se voc for essa pessoa) ao lado do cone do arquivo. A devoluo de um arquivo possibilitar aos outros membros da equipe retir-lo e edit-lo. Quando voc devolver um arquivo depois de edit-lo, a sua verso local se tornar somente leitura e aparecer um smbolo de cadeado ao lado dela no painel Files para evitar modificaes. No servidor remoto, o Dreamweaver no modifica o status dos arquivos retirados para somente leitura. Caso os arquivos sejam transferidos com um aplicativo diferente do Dreamweaver, voc poder sobrescrever os arquivos retirados. No entanto, em aplicativos diferentes do Dreamweaver, o arquivo LCK estar visvel ao lado do arquivo retirado na hierarquia de arquivos para evitar acidentes desse tipo. Para obter mais informaes sobre os arquivos LCK e o funcionamento do sistema de devolues e retiradas, consulte TechNote 15447 no site da Macromedia na Web em www.macromedia.com/go/15447.
Captulo 4: Gerenciar arquivos
Tpicos relacionados Configurar o sistema Check In/Check Out (Devolver/retirar) na pgina 149
Devolver e retirar os arquivos de um servidor remoto na pgina 153
Sobre as transferncias de arquivos em segundo plano

O Dreamweaver permite a execuo de outras atividades no relacionadas com o servidor enquanto voc est obtendo ou colocando arquivos. A transferncia de arquivos em segundo plano funciona para todos os protocolos de transferncia suportados pelo Dreamweaver: FTP, SFTP, LAN, WebDAV, Microsoft Visual SourceSafe e RDS. As atividades no relacionadas com o servidor incluem operaes comuns como digitao, edio de folhas de estilos%% externas, gerao de relatrios de todo o site e criao de novos sites. As atividades relacionadas com o servidor e que o Dreamweaver no pode executar durante as transferncias de arquivos incluem as seguintes:

Obter/colocar/devolver/retirar arquivos. Desfazer a retirada. Criar uma conexo de banco de dados. Ligar dados dinmicos. Visualizar Live Data. Inserir um servio da Web. Excluir arquivos ou pastas remotas. Visualizar no navegador em um servidor de teste. Salvar um arquivo em um servidor remoto. Inserir uma imagem de um servidor remoto. Abrir um arquivo de servidor remoto. Colocar arquivos em salvamento automtico. Arrastar arquivos para o site remoto. Recortar, copiar ou colar arquivos no site remoto. Atualizar a visualizao remota.
Tpicos relacionados Gerenciar transferncias de arquivos na pgina 160
115
Sobre o mascaramento de sites

O mascaramento de sites permite excluir pastas e tipos de arquivo de operaes como obteno e colocao. possvel mascarar pastas individuais, mas no arquivos individuais. Para mascarar arquivos, selecione um tipo de arquivo. O Dreamweaver ir mascarar todos os arquivos desse tipo. Alm disso, o Dreamweaver memorizar as definies de cada site, de modo que voc no tenha que fazer selees sempre que trabalhar no site. Por exemplo, se estiver trabalhando em um site grande e no desejar efetuar o upload dirio dos arquivos de multimdia, utilize o mascaramento do site para esconder a pasta de multimdia. O sistema excluir os arquivos dessa pasta das operaes que afetarem o site. possvel mascarar pastas e tipos de arquivos do site remoto ou local. O mascaramento exclui as pastas e os arquivos mascarados nas seguintes operaes:
Executar as operaes Put (Colocar), Get (Obter), Check In (Devolver) e Check Out (Retirar) Gerao de relatrios Localizao de arquivos locais e remotos mais recentes Execuo de operaes no site inteiro, como a verificao e a alterao de links Sincronizao Trabalho com o contedo do painel Assets (Propriedades) Atualizao de modelos e bibliotecas
N OT A
O Dreamweaver exclui modelos e itens de biblioteca mascarados apenas das operaes de obteno (Get) e colocao (Put), mas no das operaes em lote, pois isso pode fazer com que fiquem fora de sintonia com suas respectivas instncias.
Tpicos relacionados Mascarar as pastas e os arquivos do site na pgina 163
Sobre o Design Notes

As Design Notes so notas que acompanham um arquivo. Elas esto associadas ao arquivo que descrevem, mas so armazenadas em outro arquivo. Voc pode ver quais arquivos apresentam Design Notes anexadas no painel Files (Arquivos) expandido: o cone Design Notes aparece na coluna Notes (Notas).
116
Utilize as Design Notes para controlar as informaes adicionais relativas aos documentos, como nomes de arquivos de origem de imagens e comentrios sobre o status de arquivos. Por exemplo: se um documento for copiado de um site para outro, possvel adicionar Design Notes a esse documento, informando que seu original est na pasta do outro site. Voc tambm pode utilizar as Design Notes para controlar as informaes confidenciais que no pode colocar em um documento por motivos de segurana, como notas sobre como uma configurao ou preo especfico foi escolhido, ou quais os fatores de marketing que influenciaram uma deciso de projeto. Se voc abrir um arquivo no Macromedia Fireworks ou no Macromedia Flash e export-lo para outro formato, esses programas salvaro automaticamente o nome do arquivo de origem inicial em um arquivo de Design Notes. Por exemplo, se voc abrir o arquivo minha_casa.png no Fireworks e export-lo para minha_casa.gif, o Fireworks criar um arquivo de Design Notes denominado minha_casa.gif.mno com o nome do arquivo original, como uma URL de arquivo: absoluto. Assim, as Design Notes correspondentes ao arquivo minha_casa.gif podero conter a seguinte linha:
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"
Uma Design Note semelhante do Flash poderia conter a seguinte linha:

fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"
N OT A
Para compartilhar as Design Notes, os usurios devero definir o mesmo caminho para a 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 voc seleciona a imagem no Dreamweaver e decide edit-la no Fireworks (consulte Iniciar um editor de arquivos de mdia externo na pgina 521), o Fireworks abre o arquivo original para edio. Tpicos relacionados Ativar e desativar as Design Notes de um site na pgina 168 Associar Design Notes a arquivos na pgina 169
Sobre os arquivos dependentes

Quando voc transfere um documento entre uma pasta local e uma remota no painel Files (Arquivos), o Dreamweaver oferece a opo de transferir os arquivos dependentes do documento. Os arquivos dependentes so imagens, folhas de estilos externas e outros arquivos referenciados no seu documento e que o navegador carrega junto com o documento.
117
O Dreamweaver tambm trata os itens de biblioteca como arquivos dependentes. Para obter mais informaes, consulte Sobre itens de biblioteca na pgina 177. Alguns servidores apresentaro erros na colocao de itens de biblioteca. Entretanto, possvel mascarar esses arquivos para impedir que sejam transferidos. Para obter instrues, consulte Mascarar as pastas e os arquivos do site na pgina 163. Tpicos relacionados Obter arquivos de um servidor remoto na pgina 156
Colocar arquivos em um servidor remoto na pgina 157
Acessar sites, um servidor e unidades locais

Voc pode acessar, modificar e salvar arquivos e pastas de sites do Dreamweaver, bem como arquivos e pastas que no fazem parte de um site do Dreamweaver. Alm dos sites do Dreamweaver, voc pode acessar um servidor, uma unidade local ou a rea de trabalho. Antes de acessar um servidor remoto, configure o Dreamweaver para trabalhar com esse servidor (consulte Configurar o Dreamweaver para trabalhar sem definir um site na pgina 120).
NO T A
A melhor maneira de gerenciar os arquivos consiste em criar um site do Dreamweaver (consulte Configurar um novo site do Dreamweaver na pgina 90).
Para abrir um site j existente do Dreamweaver:
No painel Files (Arquivos), em Window (Janela) > Files, selecione um site no menu popup (em que o site atual, o servidor ou a unidade aparece).
118
Para obter informaes sobre como alterar a visualizao do site, por exemplo, para exibir a pasta remota, consulte Exibir arquivos e pastas na pgina 122. Para obter informaes sobre como abrir arquivos no site, consulte Trabalhar com arquivos no painel Files (Arquivos) na pgina 134.
Para abrir uma pasta em um servidor FTP ou RDS remoto:
1.
No painel Files (Window > Files), selecione um nome de servidor no menu pop-up (em que aparece o site, o servidor ou a unidade atual).
2.
Navegue para os arquivos e edite-os normalmente. Para obter mais informaes, consulte Trabalhar com arquivos no painel Files (Arquivos) na pgina 134.
Para acessar uma unidade local ou a sua rea de trabalho:

1.
No painel Files (Window > Files), selecione Desktop (rea de trabalho), Local Disk (Disco local) ou CD Drive (Unidade de CD) no menu pop-up (em que o site atual, o servidor ou a unidade aparece).
NO TA
Nomes de servidores aparecem para os servidores com os quais o Dreamweaver foi configurado para trabalhar. Se voc ainda no configurou um servidor, consulte Configurar o Dreamweaver para trabalhar sem definir um site na pgina 120.
119
2.
Navegue para um arquivo e siga um destes procedimentos:

Abra arquivos no Dreamweaver ou em outro aplicativo Renomeie arquivos Copie arquivos Exclua arquivos Arraste arquivos Quando voc arrastar um arquivo de um site do Dreamweaver para outro ou para uma pasta que no esteja associada a um site do Dreamweaver, o Dreamweaver copiar o arquivo para o local em que for solto. Se voc arrastar um arquivo dentro do mesmo site do Dreamweaver, o Dreamweaver mover o arquivo para o local em que for solto. Se arrastar um arquivo que no esteja associado a um site do Dreamweaver para uma pasta que no faa parte de um site do Dreamweaver, o Dreamweaver mover o arquivo para o local em que for solto.
N OT A
Para mover um arquivo que o Dreamweaver copia como padro, mantenha pressionada a tecla Shift enquanto arrasta o arquivo. Para copiar um arquivo que o Dreamweaver move como padro, mantenha pressionada a tecla Control enquanto arrasta o arquivo.
Tpicos relacionados Gerenciar arquivos e pastas no painel Files (Arquivos) na pgina 132
Configurar o Dreamweaver para trabalhar sem definir um site

O Dreamweaver permite estabelecer uma conexo com um servidor FTP ou RDS para trabalhar nos seus documentos sem criar um site do Dreamweaver.
N OT A
Se voc trabalhar em arquivos sem criar um site do Dreamweaver, no poder executar operaes no site, como verificao de links. Para configurar um site do Dreamweaver, consulte Configurar um novo site do Dreamweaver na pgina 90.
Para configurar o Dreamweaver para trabalhar com um servidor na janela do documento:

1.
Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. Clique em New (Novo) e, em seguida, selecione FTP & RDS Servers (Servidores FTP e RDS). A caixa de dilogo Configure Server (Configurar servidor) exibida.
2.
120
3.
Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
N OT A
Voc s precisar preencher essa caixa de dilogo uma vez para cada servidor ao qual deseja se conectar.
4.
Clique em OK. O painel Files (Arquivos) exibe o contedo da pasta do servidor remoto ao qual voc se conectou, e o nome do servidor aparece no menu pop-up na parte superior do painel.
Para configurar o Dreamweaver para trabalhar com um servidor utilizando o painel Files:
1.
No painel Files (Window > Files), selecione Desktop (rea de trabalho) no menu pop-up (em que aparece o site, o servidor ou a unidade atual).
2.
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) no n FTP and RDS Servers, no painel Files. Em seguida, selecione Add FTP Server (Adicionar servidor FTP) ou Add RDS Server (Adicionar servidor RDS).
A caixa de dilogo Configure Server (Configurar servidor) exibida.
121
3.
N OT A
Voc s precisar preencher essa caixa de dilogo uma vez para cada servidor ao qual deseja se conectar.
4.
Clique em OK. O painel Files (Arquivos) exibe o contedo da pasta do servidor remoto ao qual voc se conectou, e o nome do servidor aparece no menu pop-up na parte superior do painel.
N OT A
No caso de pastas grandes, pode levar alguns minutos para que o painel Files exiba a pasta.
Tpicos relacionados Acessar sites, um servidor e unidades locais na pgina 118
Exibir arquivos e pastas

Voc pode exibir arquivos e pastas no painel Files (Arquivos), estejam eles associados a um site do Dreamweaver ou no. Quando voc exibir sites, arquivos ou pastas no painel Files, poder alterar o tamanho da rea de visualizao e, para os sites do Dreamweaver, poder expandir ou reduzir esse painel. Para sites do Dreamweaver, voc pode tambm personalizar o painel Files alterando a visualizao do site local ou remoto que aparece, por padro, no painel reduzido. Poder tambm alternar as visualizaes do contedo no painel Files expandido usando a opo Always Show (Mostrar sempre) (consulte Definir as preferncias do painel Files (Arquivos) na pgina 133.)
Para abrir ou fechar o painel Files:
Selecione Window (Janela) > Files.
Para alterar o tamanho da rea de visualizao no painel Files expandido:
Em Window > Files, no painel Files expandido, siga um destes procedimentos:
Arraste a barra divisria que separa as duas visualizaes para aumentar ou diminuir a rea de exibio do painel direito ou esquerdo. Utilize as barras de rolagem na parte inferior do painel Files para rolar pelo contedo das visualizaes. No mapa do site, arraste a seta acima de um arquivo para alterar o espao entre os arquivos.
122
Para expandir ou reduzir o painel Files (somente sites do Dreamweaver):
No painel Files (Window > Files), clique no boto Expand/Collapse (Expandir/Reduzir) na barra de ferramentas.
NO T A
Se voc clicar no boto Expand/Collapse 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 boto Expand/Collapse, para reduzir o painel. Se voc clicar no boto Expand/Collapse para expandir o painel enquanto ele estiver encaixado, ainda poder trabalhar na janela do documento. necessrio reduzir o painel antes de encaix-lo novamente.
Quando o painel Files estiver reduzido, ele exibir o contedo dos sites local e remoto ou do servidor de teste como uma lista de arquivos. Quando expandido, ele exibir o site local, alm do site remoto ou do servidor de teste. O painel Files tambm pode exibir um mapa visual do site local.
Para alterar a visualizao do site no painel Files, siga um destes procedimentos (somente sites do Dreamweaver):
No painel Files reduzido (Window > Files), selecione Local View (Visualizao local), Remote View (Visualizao remota), Testing Server (Servidor de teste) ou Map View (Visualizao do mapa) no menu pop-up Site View (Visualizao do site).
N OT A
Como padro, Local View aparecer nesse menu pop-up.
No painel Files expandido (Window > Files), clique no boto Site Files (Arquivos do site) do site remoto, Testing Server ou Site Map (Mapa do site) na barra de ferramentas.
Testing Server (Servidor de teste)
Site Map (Mapa do site) Site Files (Arquivos do site)
123
Ao clicar no boto Site Map, voc poder optar pela visualizao do mapa do site com ou sem os respectivos arquivos. Para obter mais informaes, consulte Exibir um mapa de site na pgina 138.
NO T A

Para poder exibir um site remoto ou um servidor de teste, necessrio configur-lo (consulte Configurar uma pasta remota na pgina 94 ou Especificar onde as pginas dinmicas podem ser processadas na pgina 667). Para poder exibir o mapa de um site, necessrio configurar uma home page (consulte Exibir um mapa de site na pgina 138).
Tpicos relacionados Acessar sites, um servidor e unidades locais na pgina 118 Gerenciar arquivos e pastas no painel Files (Arquivos) na pgina 132
Personalizar detalhes de arquivos e pastas exibidos no painel Files (Arquivos) expandido

Quando voc visualiza um site do Dreamweaver no painel Files expandido (consulte Exibir arquivos e pastas na pgina 122), o Dreamweaver exibe informaes sobre os arquivos e as pastas em colunas. Por exemplo, voc pode ver o tipo de arquivo ou a data em que um arquivo foi modificado. Pode personalizar as colunas seguindo qualquer destes procedimentos (algumas operaes esto disponveis apenas para as colunas adicionadas, e no as colunas padro): Reordenar ou realinhar colunas Adicionar novas colunas (dez, no mximo) Ocultar colunas (exceto a coluna do nome do arquivo) Designar colunas a serem compartilhadas com todos os usurios que estiverem conectados a um site Excluir colunas (somente colunas personalizadas) Renomear colunas (somente colunas personalizadas) Associar com uma Design Note (somente colunas personalizadas)
Para ordenar por qualquer coluna de detalhes do painel Files (Arquivos):
Clique no cabealho da coluna a ser ordenada.

DICA
Clique no cabealho novamente para inverter a ordem (ascendente ou descendente) de acordo com a qual o Dreamweaver ordenar a coluna.
124
Para adicionar, excluir ou alterar as colunas de detalhes:

1.
Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. Selecione um site e, em seguida, clique em Edit (Editar). A caixa de dilogo Site Definition (Definio do site) exibida. Selecione File View Columns (Colunas de visualizao de arquivos) na lista de categorias esquerda. A caixa de dilogo Site Definition exibir as opes das colunas de visualizao de arquivos.
2.
3.
4.
5.
125
Comparar arquivos para conhecer as diferenas

O Dreamweaver pode trabalhar com ferramentas de comparao de arquivos (tambm conhecidas como ferramentas diff ) para comparar o cdigo de verses locais e remotas do mesmo arquivo, dois arquivos remotos diferentes ou dois arquivos locais diferentes. A comparao de verses locais e remotas til quando voc est trabalhando em um arquivo localmente e suspeita que a cpia desse arquivo no servidor foi modificada por outra pessoa. Sem sair do Dreamweaver, voc pode visualizar e mesclar as alteraes remotas na sua verso local antes de colocar o arquivo no servidor. A comparao de dois arquivos locais ou dois arquivos remotos tambm til quando voc mantm verses anteriores renomeadas dos seus arquivos. Caso voc tenha se esquecido das alteraes feitas em um arquivo de uma verso anterior, uma comparao rpida far com que voc se lembre. Antes de comear, preciso instalar no sistema uma ferramenta de comparao de arquivos de terceiros. Para obter mais informaes sobre ferramentas de comparao de arquivos, consulte o site da Macromedia na Web em www.macromedia.com/go/dw8_compare_util. Voc tambm deve especificar a ferramenta no Dreamweaver aps sua instalao, conforme descrito mais adiante nesta seo. Esta seo contm os tpicos a seguir:

Comparar antes de colocar arquivos na pgina 129 Comparar durante a sincronizao de arquivos na pgina 130 Especificar uma ferramenta de comparao no Dreamweaver na pgina 130
Comparar dois arquivos

Aps instalar uma ferramenta de comparao de arquivos no sistema e especific-la no Dreamweaver, voc poder executar qualquer uma das seguintes tarefas no Dreamweaver:

Comparar dois arquivos locais na pgina 127 Comparar dois arquivos remotos na pgina 127 Comparar um arquivo local com um arquivo remoto na pgina 128 Comparar um arquivo remoto com um arquivo local na pgina 128 Comparar um arquivo aberto com um arquivo remoto na pgina 129
126
Tpicos relacionados Comparar antes de colocar arquivos na pgina 129
Comparar durante a sincronizao de arquivos na pgina 130
Comparar dois arquivos locais

Voc pode comparar dois arquivos localizados em qualquer parte do seu computador.
Para comparar dois arquivos locais:
1.
No painel Files (Arquivos), pressione a tecla Control (no Windows) ou a tecla Command (no Macintosh) e clique nos dois arquivos para selecion-los.
DICA
Para selecionar arquivos fora do site definido, selecione seu disco local no menu pop-up localizado esquerda no painel Files e selecione-os.
2.
Clique com o boto direito do mouse nos arquivos selecionados e selecione Compare Local Files (Comparar arquivos locais) no menu contextual.
N OT A
Caso o seu mouse s tenha um boto, pressione a tecla Control e clique em um dos arquivos selecionados.
A ferramenta de comparao de arquivos iniciada, e a comparao dos dois arquivos comea.
Comparar dois arquivos remotos

Voc pode comparar dois arquivos localizados no servidor remoto. preciso definir um site do Dreamweaver com definies remotas antes de realizar essa tarefa. Para obter mais informaes, consulte Configurar um novo site do Dreamweaver na pgina 90.
Para comparar dois arquivos remotos:
1.
No painel Files (Arquivos), exiba os arquivos do servidor remoto selecionando Remote View (Visualizao remota) no menu pop-up direita. Pressione a tecla Control (no Windows) ou a tecla Command (no Macintosh) e clique nos dois arquivos para selecion-los.
2.
127
3.
Clique com o boto direito do mouse em um dos arquivos selecionados e selecione Compare Remote Files (Comparar arquivos remotos) no menu contextual.
NO T A
Caso o seu mouse s tenha um boto, pressione a tecla Control e clique em um dos arquivos selecionados.
Comparar um arquivo local com um arquivo remoto

Voc pode comparar um arquivo local com um arquivo localizado no servidor remoto. Para fazer isto, necessrio primeiro definir um site do Dreamweaver com definies remotas. Para obter mais informaes, consulte Configurar um novo site do Dreamweaver na pgina 90.
Para comparar um arquivo local com um arquivo remoto:
No painel Files (Arquivos), clique com o boto direito do mouse em um arquivo local e selecione Compare with Remote (Comparar com remoto) no menu contextual.
NO TA
Caso o seu mouse s tenha um boto, pressione a tecla Control e clique no arquivo local.
Comparar um arquivo remoto com um arquivo local

possvel comparar um arquivo remoto com um arquivo local. preciso definir um site do Dreamweaver com definies remotas antes de realizar essa tarefa. Para obter mais informaes, consulte Configurar um novo site do Dreamweaver na pgina 90.
Para comparar um arquivo remoto com um arquivo local:
1.
No painel Files (Arquivos), exiba os arquivos do servidor remoto selecionando Remote View (Visualizao remota) no menu pop-up direita. Clique com o boto direito do mouse em um arquivo do painel e selecione Compare with Local (Comparar com local) no menu contextual.
NO T A
Caso o seu mouse s tenha um boto, pressione a tecla Control e clique no arquivo.
128
Comparar um arquivo aberto com um arquivo remoto

possvel comparar um arquivo aberto no Dreamweaver com seu correspondente no servidor remoto.
Para comparar um arquivo aberto no Dreamweaver com sua cpia remota:
Na janela Document (Documento), selecione File (Arquivo) > Compare with Remote. A ferramenta de comparao de arquivos iniciada, e a comparao dos dois arquivos comea.
DICA
Tambm possvel clicar com o boto direito do mouse na guia do documento, na parte superior da janela Document (Documento), e selecionar Compare with Remote no menu contextual.
Comparar antes de colocar arquivos

Se voc editar um arquivo localmente e depois tentar carreg-lo para o servidor remoto, o Dreamweaver enviar uma notificao se a verso remota do arquivo tiver sido alterada. O Dreamweaver permite que voc compare os dois arquivos antes de carregar o arquivo e sobrescrever a verso remota. Antes de comear, preciso instalar no sistema uma ferramenta de comparao de arquivos e especific-la no Dreamweaver. Para obter mais informaes, consulte Especificar uma ferramenta de comparao no Dreamweaver na pgina 130.
Para comparar arquivos ao colocar um arquivo:
1.
Aps editar um arquivo em um site do Dreamweaver, coloque-o (Site > Put (Colocar)) no site remoto. Se a verso remota do arquivo tiver sido modificada, o Dreamweaver enviar uma notificao e permitir que voc veja as diferenas.
2.
Para visualizar as diferenas, clique no boto Compare (Comparar). A ferramenta de comparao de arquivos iniciada, e a comparao dos dois arquivos comea. Se voc no especificou nenhuma ferramenta de comparao de arquivos, o Dreamweaver solicitar que voc especifique uma.
3.
Aps analisar ou mesclar as alteraes na ferramenta, voc poder prosseguir com a operao Put (Colocar) ou cancel-la.
Tpicos relacionados Comparar dois arquivos na pgina 126
129
Comparar durante a sincronizao de arquivos

possvel comparar as verses locais dos arquivos com as verses remotas ao sincronizar os arquivos do site com o Dreamweaver. Antes de comear, preciso instalar no sistema uma ferramenta de comparao de arquivos e especific-la no Dreamweaver. Para obter mais informaes, consulte Especificar uma ferramenta de comparao no Dreamweaver na pgina 130.
Para comparar arquivos durante uma sincronizao:
1.
Clique com o boto direito do mouse em qualquer parte do painel Files (Arquivos) e selecione Synchronize (Sincronizar) no menu contextual. A caixa de dilogo Synchronize Files (Sincronizar os arquivos) exibida. Preencha a caixa de dilogo Synchronize Files (Sincronizar os arquivos) e clique em Preview (Visualizar). Para obter mais informaes, consulte Sincronizar os arquivos nos sites local e remoto na pgina 161. Depois que voc clicar em Preview, o Dreamweaver listar os arquivos selecionados e as aes que executar durante a sincronizao.
2.
3.
Na lista, selecione cada arquivo que voc deseja comparar e clique no boto Compare (o cone com duas pequenas pginas).
N OT A
O arquivo deve ser baseado em texto, como os arquivos HTML ou ColdFusion.
O Dreamweaver inicia a ferramenta de comparao, que compara a verso local com a verso remota de cada arquivo selecionado. Tpicos relacionados Comparar dois arquivos na pgina 126
Comparar antes de colocar arquivos na pgina 129
Especificar uma ferramenta de comparao no Dreamweaver

preciso instalar no sistema uma ferramenta de comparao de arquivos de terceiros para comparar arquivos no Dreamweaver. Para obter mais informaes sobre ferramentas de comparao de arquivos, consulte o site da Macromedia na Web em www.macromedia.com/ go/dw8_compare_util.
130
Aps a instalao de uma ferramenta de comparao de arquivos, preciso especific-la no Dreamweaver, conforme descrito nesta seo.
Para especificar uma ferramenta de comparao de arquivos:
1. 2.
Instale a ferramenta de comparao de arquivos no mesmo sistema do Dreamweaver. No Dreamweaver, abra a caixa de dilogo Preferences (Preferncias) selecionando Edit (Editar) > Preferences (no Windows) ou Dreamweaver > Preferences (no Macintosh), e depois selecione a categoria File Compare (Comparao de arquivos). No Windows, clique no boto Browse (Procurar) e selecione o aplicativo que compara arquivos. No Macintosh, clique no boto Browse e selecione a ferramenta ou script que inicia a ferramenta de comparao de arquivos na linha de comando, e no na ferramenta de comparao de arquivos propriamente dita. No Macintosh, as ferramentas ou scripts de iniciao geralmente esto localizados na pasta usr/bin. Por exemplo, se voc desejar utilizar o FileMerge, procure usr/bin e selecione opendiff, que a ferramenta que inicia o FileMerge. A tabela a seguir lista ferramentas comuns de comparao de arquivos para Macintosh e a localizao de suas respectivas ferramentas ou scripts de iniciao no disco rgido:
Se voc usar
FileMerge BBEdit TextWrangler
N OT A
3.
4.
Selecione o seguinte arquivo

usr/bin/opendiff usr/bin/bbdiff usr/bin/twdiff
Geralmente, a pasta usr fica oculta no Finder. No entanto, voc pode acess-la com o boto Browse no Dreamweaver.
Tpicos relacionados Comparar dois arquivos na pgina 126

Comparar antes de colocar arquivos na pgina 129 Comparar durante a sincronizao de arquivos na pgina 130
131
Reverter arquivos (usurios do Contribute)

O Dreamweaver salva automaticamente vrias verses de um documento quando voc ativa a compatibilidade do Contribute. Para ativar a compatibilidade do Contribute, consulte Preparar um site para utilizar com o Contribute na pgina 207.
NO T A
O Contribute e o Dreamweaver devem estar instalados na mesma mquina.
A reverso de arquivos deve estar ativada nas definies administrativas do Contribute. Para obter mais informaes, consulte Administering Contribute.
Para reverter um arquivo para uma verso anterior:
1.
No Windows, clique com o boto direito do mouse ou, no Macintosh, pressione Control e clique em um arquivo no painel Files (Arquivos). Selecione Roll Back Page (Reverter pgina). Se houver alguma verso anterior da pgina para reverter, a caixa de dilogo Rollback (Reverter) ser exibida.
2.
3.
Selecione a verso da pgina para a qual voc deseja reverter e clique em Roll Back (Reverter).
Tpicos relacionados Excluir, mover ou renomear um arquivo remoto em um site do Contribute na pgina 211
Gerenciar arquivos e pastas no painel Files (Arquivos)

Voc pode organizar e gerenciar os arquivos de um site estejam eles associados a um site do Dreamweaver ou localizados em um servidor ao qual voc est conectado, na unidade local ou na rea de trabalho.
N OT A 132
Na verso anterior do Dreamweaver, o painel Files era chamado painel Site.
Tpicos relacionados Acessar sites, um servidor e unidades locais na pgina 118
Exibir arquivos e pastas na pgina 122
Definir as preferncias do painel Files (Arquivos)

Selecione as preferncias para controlar os recursos de transferncia de arquivos no painel Files.
Para editar as preferncias do painel Files (Arquivos):
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida. Selecione Site, na lista de categorias esquerda. Aparecero as opes de preferncia do site.
2.
3.
Altere as opes conforme a necessidade. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
133
4.
Clique em OK.
DICA
Para definir se os tipos de arquivo sero transferidos no formato ASCII (texto) ou binrio, personalize o arquivo FTPExtensionMap.txt na pasta Dreamweaver/ Configuration (no Macintosh, FTPExtensionMapMac.txt). Para obter mais informaes, consulte Extending Dreamweaver.
Trabalhar com arquivos no painel Files (Arquivos)

Voc pode abrir, renomear, adicionar, mover ou excluir arquivos ou atualizar o painel Files depois de fazer alteraes. Para os sites do Dreamweaver, voc tambm pode determinar quais arquivos (do site local ou remoto) foram atualizados desde a ltima vez em que foram transferidos. Para obter mais informaes sobre a sincronizao do site local com o remoto, consulte Sincronizar os arquivos nos sites local e remoto na pgina 161.
Para abrir um arquivo:
1.
No painel Files (Arquivos), em Window (Janela) > Files, selecione um site, um servidor ou uma unidade no menu pop-up (em que o site atual, o servidor ou a unidade aparece). Navegue at o arquivo a ser aberto. Siga um dos procedimentos abaixo:

2. 3.
Clique duas vezes no cone do arquivo. No Windows, clique com o boto direito do mouse ou, no Macintosh, pressione Control e clique no cone do arquivo. Em seguida, selecione Open (Abrir).
O Dreamweaver abre o arquivo na janela do documento.

Para criar um novo arquivo ou uma nova pasta:
1.
No painel Files (Window > Files), selecione um arquivo ou uma pasta. O Dreamweaver criar o novo arquivo ou pasta dentro da pasta que estiver selecionada, ou na pasta do arquivo selecionado no momento.
2.
No Windows, clique com o boto direito do mouse ou, no Macintosh, pressione Control e, em seguida, selecione New File (Novo arquivo) ou New Folder (Nova pasta). Digite um nome para o novo arquivo ou pasta. Pressione a tecla Enter (no Windows) ou Return (no Macintosh).
3. 4.
134
Para excluir um arquivo ou uma pasta:

1. 2.
No painel Files (Window > Files), selecione a pasta ou o arquivo a ser excludo. No Windows, clique com o boto direito do mouse ou, no Macintosh, pressione Control e, em seguida, selecione Delete (Excluir).
Para renomear um arquivo ou uma pasta:

1. 2.
No painel Files (Window > Files), selecione a pasta ou o arquivo a ser renomeado. Siga um dos procedimentos abaixo, para ativar o nome do arquivo ou da pasta:

Clique no nome do arquivo, faa uma pausa e, em seguida, clique novamente. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) no cone do arquivo e, em seguida, selecione Rename (Renomear).
3. 4.
Digite o novo nome sobre o nome existente. Pressione a tecla Enter (no Windows) ou Return (no Macintosh).
Para mover um arquivo ou uma pasta:

1. 2.
No painel Files (Window > Files) selecione a pasta ou o arquivo a ser movido. Siga um dos procedimentos abaixo:

Copie o arquivo ou a pasta e cole em um novo local. Arraste o arquivo ou a pasta para um novo local.
3.
Atualize o painel Files para ver o arquivo ou a pasta em seu novo local.
Para atualizar o painel Files, siga um destes procedimentos:
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) em qualquer arquivo ou pasta e, em seguida, selecione Refresh (Atualizar). (Apenas para os sites do Dreamweaver) Clique no boto Refresh na barra de ferramentas do painel Files. Essa opo atualiza os dois painis.
N O TA
O Dreamweaver atualiza automaticamente o painel Files quando voc faz alteraes em outro aplicativo e retorna ao Dreamweaver.
Tpicos relacionados Exibir arquivos e pastas na pgina 122

Acessar sites, um servidor e unidades locais na pgina 118 Definir as preferncias do painel Files (Arquivos) na pgina 133
135
Localizar arquivos no site do Dreamweaver

O Dreamweaver facilita a localizao de arquivos selecionados, abertos, retirados ou modificados recentemente em um site. Voc tambm pode localizar arquivos mais recentes no site local ou remoto.
Para localizar um arquivo aberto no site:
1. 2.
Abra o arquivo na janela do documento. Selecione Site > Locate in Site (Localizar no site).
O Dreamweaver seleciona o arquivo no painel Files.

N OT A
Se o arquivo aberto na janela do documento no estiver associado ao site atual no painel Files, o Dreamweaver tentar determinar a qual dos seus sites do Dreamweaver esse arquivo pertence. Se o arquivo atual pertencer apenas a um site local, o Dreamweaver abrir esse site no painel Files e o realar.
Para localizar e selecionar arquivos retirados em um site do Dreamweaver:
No painel Files reduzido, em Window (Janela) > Files, clique no menu Options (Opes) no canto superior direito desse painel e, em seguida, selecione Edit (Editar) > Select Checked Out Files (Selecionar os arquivos retirados).
O Dreamweaver seleciona os arquivos no painel Files.

Para localizar um arquivo selecionado no site local ou remoto:
1. 2.
Selecione o arquivo na visualizao local ou remota do painel Files (Window > Files). No Windows, clique com o boto direito do mouse ou, no Macintosh, pressione Control e, em seguida, selecione Locate in Local Site (Localizar no site local) ou Locate in Remote Site (Localizar no site remoto), dependendo do local em que voc selecionou o arquivo.
O Dreamweaver seleciona o arquivo no painel Files.

Para localizar e selecionar arquivos que sejam mais recentes no site local do que no remoto:
No painel Files reduzido (Window > Files), clique no menu Options no canto superior direito desse painel e selecione Edit > Select Newer Local (Selecionar um local mais novo).
136
Para localizar e selecionar os arquivos que forem mais recentes no site remoto do que no local:
No painel Files reduzido (Window > Files), clique no menu Options no canto superior direito desse painel e selecione Edit > Select Newer Remote (Selecionar um remoto mais novo).

Para localizar arquivos modificados recentemente no site:
1.
No painel Files reduzido (Window > Files), clique no menu Options no canto superior direito desse painel e selecione Edit > Select Recently Modified (Selecionar modificados recentemente). A caixa de dilogo Select Recently Modified exibida. Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK para salvar as definies.
2.
3.
O Dreamweaver reala os arquivos modificados no intervalo de tempo selecionado no painel Files. Tpicos relacionados Acessar sites, um servidor e unidades locais na pgina 118

Exibir arquivos e pastas na pgina 122 Trabalhar com arquivos no painel Files (Arquivos) na pgina 134
Trabalhar com um mapa visual do site

Voc pode exibir uma pasta local de um site do Dreamweaver como um mapa visual de cones vinculados, denominado mapa do site. Utilize o mapa do site para adicionar novos arquivos a um site do Dreamweaver, ou para adicionar, modificar ou remover links. O mapa do site mostra a estrutura do site em dois nveis a partir da home page. Ele mostra as pginas como cones e exibe os links na ordem em que so encontrados no cdigo-fonte.
137
A visualizao do mapa do site ideal para criar o layout da estrutura do site. Voc pode configurar rapidamente a estrutura inteira do site e, em seguida, criar uma imagem grfica do mapa do site.
NO TA
O mapa do site se aplica apenas aos sites locais. Para criar o mapa de um site remoto, copie o contedo desse site para uma pasta na unidade local e utilize o comando Manage Sites (Gerenciar sites) para definir o site como local (consulte Configurar uma pasta local na pgina 92).
Tpicos relacionados Criar links para documentos usando o mapa do site na pgina 471
Exibir um mapa de site

necessrio definir uma home page correspondente ao site antes de exibir o mapa do mesmo. A home page pode ser qualquer pgina do site. No precisa ser a pgina principal. Nesse caso, a home page apenas o ponto de partida do mapa.
Para definir a home page do site:
1.
No painel Files (Arquivos), em Window (Janela) > Files, selecione um site no menu popup (em que o site atual, o servidor ou a unidade aparece). No Windows, clique com o boto direito do mouse ou, no Macintosh, pressione Control e clique no arquivo a ser designado como a home page. Em seguida, selecione Set as Home Page (Definir como home page).
NO T A
2.
Voc tambm pode definir a home page nas opes de Site Map Layout (Layout do mapa do site) na caixa de dilogo Site Definition (Definio do site) (consulte Modificar o layout do mapa do site na pgina 140).
Para exibir o mapa de um site:

1.
Para exibir o mapa do site, no painel Files (Window > Files), siga um destes procedimentos:
No painel Files reduzido, selecione Map View (Visualizao do mapa) no menu popup Site View (Visualizao do site).
138
No painel Files expandido, clique no boto Site Map (Mapa do site) na barra de ferramentas e, em seguida, selecione Map Only (Apenas o mapa) ou Map and Files (Mapa e arquivos).
Selecione Map Only, para exibir o mapa do site sem a estrutura de arquivos locais, ou Site and Map (Site e mapa), para exibir o mapa do site com a estrutura de arquivos locais.
N OT A NO TA
Se voc no tiver definido uma home page, ou se o Dreamweaver no conseguir localizar uma pgina index.html ou index.htm no site atual para utilizar como home page, o Dreamweaver solicitar a seleo de uma home page.
O painel Files exibe um mapa do site que mostra os dois nveis da estrutura do site.
Como padro, o mapa do site no exibe arquivos ocultos ou dependentes. Para obter mais informaes, consulte Mostrar e ocultar os arquivos do mapa do site na pgina 144.
2.
Clique no sinal de adio (+) ou subtrao () ao lado do nome de um arquivo para mostrar ou ocultar as pginas vinculadas abaixo do segundo nvel. Observe as cores do mapa do site:

3.
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 eletrnico ou de script). Uma marca de seleo verde indica um arquivo retirado por voc. Uma marca de seleo vermelha indica um arquivo retirado por outro usurio.
139
Um cone com um cadeado indica um arquivo somente leitura.
Tpicos relacionados Trabalhar com as pginas no mapa do site na pgina 141

Mostrar e ocultar os arquivos do mapa do site na pgina 144 Exibir o site a partir de uma ramificao na pgina 145
Modificar o layout do mapa do site

Utilize as opes de Site Map Layout (Layout do mapa do site) para personalizar a aparncia do mapa do site. Voc poder alterar a home page e o nmero de colunas exibidas, bem como definir se os identificadores de cones exibiro o nome do arquivo ou o ttulo da pgina, e se os arquivos ocultos e dependentes sero mostrados.
Para modificar o layout do mapa do site:
1.
Siga um dos procedimentos abaixo, para abrir a caixa de dilogo Site Definition (Definio do site):

Selecione Site > Manage Sites (Gerenciar Sites). No painel Files (Arquivos), selecione Manage Sites no menu pop-up em que o site atual, o servidor ou a unidade aparece.
A caixa de dilogo Manage Sites exibida.

2.
Clique em Edit (Editar). A caixa de dilogo Site Definition (Definio do site) exibida. Na lista de categorias esquerda, selecione Site Map Layout.
3.
140
A caixa de dilogo Site Definition exibe as opes de Site Map Layout.
4.
Faa as alteraes necessrias. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK para fechar a caixa de dilogo Site Definition. Clique em Done (Concludo) para fechar a caixa de dilogo Manage Sites, se ela estiver aberta.
5. 6.
Tpicos relacionados Exibir um mapa de site na pgina 138

Mostrar e ocultar os arquivos do mapa do site na pgina 144 Salvar o mapa do site na pgina 146
Trabalhar com as pginas no mapa do site

Durante o trabalho no mapa do site, possvel selecionar pginas, abrir uma pgina para edio, adicionar novas pginas ao site, criar links entre arquivos e alterar os ttulos das pginas.
141
Para selecionar vrias pginas no mapa do site, siga um dos procedimentos abaixo:

Pressione a tecla Shift e clique, para selecionar uma faixa de pginas adjacentes. Inicie em uma parte em branco da visualizao e arraste um grupo de arquivos para selecion-los. Pressione a tecla Control e d um clique, para selecionar pginas no-contguas.
Para abrir uma pgina do mapa do site para edio, siga um dos procedimentos abaixo:

Clique duas vezes no arquivo. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) no arquivo e, em seguida, selecione Open (Abrir).
Para adicionar um arquivo j existente ao site, siga um dos procedimentos abaixo:
Arraste um arquivo do Windows Explorer ou do Macintosh Finder e solte-o em um arquivo do mapa do site. A pgina ser adicionada ao site e um link ser criado entre ela e o arquivo no qual for solta. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) no arquivo no mapa do site, selecione Link to Existing File (Link a um arquivo existente) e procure o arquivo.
Para criar um novo arquivo e adicionar um link no mapa do site:

1. 2.
Selecione um arquivo no mapa do site. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e, em seguida, selecione Link to New File (Link a um novo arquivo). A caixa de dilogo Link to New File exibida.
3. 4.
Digite um nome, ttulo e o texto do link. Clique em OK. O Dreamweaver salvar o arquivo na mesma pasta que o arquivo selecionado. Se for adicionado um novo arquivo a uma ramificao oculta, o novo arquivo tambm estar oculto (consulte Mostrar e ocultar os arquivos do mapa do site na pgina 144).
142
Para modificar o ttulo de uma pgina no mapa do site:

1.
Certifique-se de que os ttulos das pginas estejam sendo exibidos clicando no menu Options (Opes), no canto superior direito do painel Files (Arquivos) reduzido e, em seguida, selecionando File (Arquivo) > Rename View (Renomear visualizao) > Show Page Titles (Mostrar ttulos das pginas).
2.
No mapa do site, selecione um arquivo e siga um dos seguintes procedimentos:

Clique no ttulo. Quando ele se tornar editvel, digite um novo ttulo. No canto superior direito, clique no menu Options e, em seguida, selecione File > Rename (Renomear).
3.
Depois de digitar o novo nome, pressione Enter.

NO TA
Quando voc trabalha no painel Files, o Dreamweaver atualiza automaticamente todos os links para os arquivos cujos nomes foram alterados.
Para alterar a home page no mapa do site, siga um dos procedimentos abaixo:
Na visualizao local do painel Files, selecione um arquivo; clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control (no Macintosh) pressionada e selecione Set as Home Page (Definir como home page). No painel Files, selecione Manage Sites (Gerenciar sites) no menu pop-up em que o site atual, o servidor ou a unidade aparece. Em seguida, clique em Edit (Editar). Selecione Site Map Layout (Layout do mapa do site) na lista de categorias da caixa de dilogo Site Definition (Definio do site). Procure uma nova home page e, em seguida, clique em OK.
Para atualizar a visualizao do mapa do site depois de ter concludo as alteraes:

1. 2.
Clique em qualquer ponto do mapa do site, para cancelar a seleo dos arquivos. Clique no boto Refresh (Atualizar) na barra de ferramentas do painel Files.

Modificar o layout do mapa do site na pgina 140 Salvar o mapa do site na pgina 146
143
Mostrar e ocultar os arquivos do mapa do site

possvel modificar o layout do mapa do site, para mostrar ou no os arquivos ocultos e dependentes. Esse procedimento til para enfatizar tpicos ou contedo importante e retirar a nfase de materiais menos relevantes. Para ocultar um arquivo utilizando o mapa do site, necessrio marcar o arquivo como oculto. Quando um arquivo for ocultado, os links a ele tambm se tornaro ocultos. Quando um arquivo marcado como oculto for exibido, o cone e os links a ele estaro visveis no mapa do site, porm os nomes aparecero em itlico.
N OT A
Como padro, os arquivos dependentes j esto ocultos.
Para marcar os arquivos como ocultos no mapa do site:

1. 2.
No mapa do site, selecione um ou mais arquivos. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e, em seguida, selecione Show/Hide Link (Mostrar/ocultar o link).
Para desmarcar os arquivos marcados como ocultos no mapa do site:

1. 2.
No mapa do site, selecione um ou mais arquivos. Siga um dos procedimentos abaixo:
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) no mapa do site e, em seguida, selecione Show/Hide Link (Mostrar/ocultar o link). No painel Files (Arquivos) reduzido, em Window (Janela) > Files, clique no menu Options (Opes) no canto superior direito e selecione View (Exibir) > Show Files Marked as Hidden (Mostrar os arquivos marcados como ocultos). No painel Files reduzido, em Window > Files, clique no menu Options no canto superior direito e selecione View > Show/Hide Link.
Para mostrar ou ocultar arquivos marcados como ocultos no mapa do site:

1.
No painel Files reduzido (Window > Files), clique no menu Options no canto superior direito.
144
2.
Siga um dos procedimentos abaixo:

Selecione View > Show Files Marked as Hidden. Selecione View > Layout para abrir a caixa de dilogo Site Definition (Definio do site) e marque a opo Display Files Marked as Hidden (Exibir os arquivos marcados como ocultos).
Para mostrar arquivos dependentes no mapa do site:

1.
No painel Files reduzido (Window > Files), clique no menu Options no canto superior direito. Siga um dos procedimentos abaixo:

2.
Selecione View (Exibir) > Show Dependent Files (Mostrar os arquivos dependentes). Selecione View > Layout para abrir a caixa de dilogo Site Definition e, em seguida, selecione a opo Display Dependent Files (Exibir os arquivos dependentes).

Modificar o layout do mapa do site na pgina 140 Trabalhar com as pginas no mapa do site na pgina 141 Salvar o mapa do site na pgina 146
Exibir o site a partir de uma ramificao

possvel exibir os detalhes de uma determinada seo de um site, tomando como ponto de referncia uma das ramificaes do mapa do site.
Para exibir uma outra ramificao no mapa do site:
1. 2.
Selecione a pgina a ser exibida. Siga um dos procedimentos abaixo:
No Windows, clique com o boto direito do mouse ou, no Macintosh, pressione Control e clique no mapa do site. Em seguida, selecione View as Root (Exibir como raiz). No painel Files (Arquivos) reduzido, em Window (Janela) > Files, clique no menu Options (Opes) no canto superior direito e selecione View (Exibir) > View as Root.
145
O mapa do site ser redesenhado na janela como se a pgina especificada estivesse na raiz do site. A caixa de texto Site Navigation (Navegao no site), situada acima do mapa do site, exibe o caminho da home page at a pgina especificada. Selecione qualquer item nesse caminho para exibir o mapa do site a partir desse nvel, clicando uma vez.
Para expandir ou contrair as ramificaes do mapa do site:
Clique no sinal de adio (+) ou subtrao () de uma ramificao.

Modificar o layout do mapa do site na pgina 140 Trabalhar com as pginas no mapa do site na pgina 141
Salvar o mapa do site

Voc pode 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 painel Files (Arquivos) reduzido, em Window (Janela) > Files, clique no menu Options (Opes) no canto superior direito e selecione File (Arquivo) > Save Site Map (Salvar o mapa do site).
A caixa de dilogo Save Site Map exibida.

2. 3. 4. 5.
Digite um nome na caixa de texto File Name (Nome do arquivo). No menu pop-up File Type, selecione .bmp ou .png. Selecione o local onde deseja salvar o arquivo e digite o nome da imagem. Clique em Save (Salvar).

Modificar o layout do mapa do site na pgina 140 Trabalhar com as pginas no mapa do site na pgina 141
146
Importar e exportar sites

Voc pode exportar um site como um arquivo XML que contm as definies do site e mais tarde importar o site para o Dreamweaver. Esse recurso permite transferir sites de um computador para outro e entre diferentes verses do produto, ou compartilh-los com outros usurios.
DICA
aconselhvel exportar os sites regularmente para manter uma cpia de backup de tudo o que acontece no site.
Para exportar seus sites:

1.
Selecione Site > Manage Sites. A caixa de dilogo Manage Sites exibida. Selecione um ou mais sites a serem exportados e depois clique no boto Export (Exportar). Para selecionar mais de um site, clique em cada site pressionando simultaneamente a tecla Control (no Windows) ou Command (no Macintosh). Para selecionar uma faixa de sites, clique no primeiro e no ltimo sites da lista, mantendo pressionada a tecla Shift.
2.
3.
Para cada site que voc desejar exportar, procure a localizao onde deseja salv-lo e clique em Save (Salvar). Caso deseje exportar um site que especifique um nome de usurio e senha para um servidor remoto, o Dreamweaver perguntar se voc deseja fazer uma cpia de segurana das suas definies ou se deseja compartilhar as definies com outros usurios. Se voc desejar compartilhar suas definies com outros usurios, selecione a segunda opo e clique em OK. O Dreamweaver no salvar as informaes que no serviriam para outros usurios, como suas informaes de login no servidor remoto e caminhos locais. O Dreamweaver salvar cada site como um arquivo XML com a extenso .ste no local especificado.
4.
Clique em Done (Concludo) para fechar a caixa de dilogo Manage Sites.
Para importar sites:

1.
Selecione Site > Manage Sites. A caixa de dilogo Manage Sites exibida. Clique no boto Import (Importar). A caixa de dilogo Import Site (Importar o site) exibida.
2.
Importar e exportar sites
147
3.
Procure e selecione um ou mais sites (definidos nos arquivos com a extenso de arquivo .ste) para importao. Para selecionar mais de um site, clique em cada arquivo .ste pressionando simultaneamente a tecla Control (no Windows) ou Command (no Macintosh). Para selecionar uma faixa de sites, clique no primeiro e no ltimo arquivos da lista, mantendo pressionada a tecla Shift.
4.
Clique em Open (Abrir) para iniciar a importao dos sites. Depois de o Dreamweaver importar os sites, os nomes aparecem na caixa de dilogo Manage Sites em seguida.
5.
Clique em Done (Concludo) para fechar a caixa de dilogo Manage Sites.
Remover um site do Dreamweaver da lista de sites

Se no desejar mais trabalhar com um site no Dreamweaver, remova-o da lista de sites. Os arquivos do site no sero removidos.
NO TA
Quando um site for removido da lista, todas as informaes de configurao sobre o site sero perdidas em carter permanente.
Para remover um site da lista de sites:

1.
Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. Selecione o nome do site. Clique em Remove (Remover). Aparecer uma caixa de dilogo, solicitando a confirmao da remoo. Clique em Yes, para remover o site da lista, ou em No, para manter o seu nome. Se voc clicar em Yes, o nome do site desaparecer da lista. Clique em Done (Concludo) para fechar a caixa de dilogo Manage Sites.
2. 3.
4.
5.
Devolver e retirar arquivos

Se estiver trabalhando em um ambiente com vrios usurios, voc poder utilizar o sistema Check In/Check Out (Devolver/retirar) para devolver e retirar arquivos dos servidores local e remoto.
148
Se apenas voc estiver trabalhando no servidor remoto, poder utilizar os comandos Put (Colocar) e Get (Obter) sem devolver ou retirar os arquivos (consulte Obter e colocar arquivos no servidor na pgina 155). Esta seo contm os tpicos a seguir:

Configurar o sistema Check In/Check Out (Devolver/retirar) na pgina 149 Utilizar o protocolo WebDAV para devolver e retirar arquivos na pgina 151 Devolver e retirar os arquivos de um servidor remoto na pgina 153 Desfazer a retirada de um arquivo na pgina 155
Tpicos relacionados Sobre o sistema de devolues e retiradas na pgina 114
Configurar o sistema Check In/Check Out (Devolver/ retirar)

Para poder utilizar o sistema Check In/Check Out, necessrio associar o site local a um servidor remoto (consulte Configurar uma pasta remota na pgina 94).
Para configurar o sistema de devolues e retiradas:
1.
Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. Selecione um site e, em seguida, clique em Edit (Editar). A caixa de dilogo Site Definition (Definio do site) exibida. Selecione Remote Info (Informaes remotas) na lista de categorias esquerda. A caixa de dilogo Site Definition exibir as opes de Remote Info. A seo Check In/ Out (Devolver/retirar) aparecer na parte inferior da caixa de dilogo.
2.
3.
4.
Selecione a opo Enable File Check In and Check Out (Ativar a devoluo e retirada de arquivos).
149
Sero mostradas opes adicionais.
5.
Preencha a seo Check In/Out. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
NO T A
Se as opes de Check In/Out no forem exibidas, significa que o servidor remoto no foi configurado (consulte Configurar uma pasta remota na pgina 94).
6.

Devolver e retirar os arquivos de um servidor remoto na pgina 153 Desfazer a retirada de um arquivo na pgina 155
150
Utilizar o protocolo WebDAV para devolver e retirar arquivos

O Dreamweaver pode se conectar a um servidor que utilize o protocolo WebDAV (Web-based Distributed Authoring and Versioning), que um conjunto de extenses para o protocolo HTTP que possibilita que os usurios de uma equipe editem e gerenciem arquivos em servidores Web remotos. Para obter mais informaes, consulte www.webdav.org.
Para configurar o acesso de WebDAV no Dreamweaver:
1.
Caso ainda no o tenha feito, defina um site do Dreamweaver que especifique a pasta local que voc utiliza para armazenar seus arquivos de projeto. Para obter mais informaes, consulte Configurar uma pasta local na pgina 92. Selecione Site > Manage Sites (Gerenciar sites) e depois clique duas vezes no seu site na lista. A caixa de dilogo Site Definition (Definio do site) exibida. Se a guia Basic (Bsica) estiver selecionada, clique na guia Advanced (Avanado).
2.
3.
151
4.
Clique na categoria Remote Info (Informaes remotas) e selecione WebDAV no menu pop-up Access (Acesso).
5.
Especifique como o Dreamweaver deve se conectar ao servidor WebDAV. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. Selecione a opo Enable File Check in and Check Out (Ativar a devoluo e retirada de arquivos) e digite as seguintes informaes:
6.
Na caixa de texto Check Out Name (Nome de retirada), digite um nome que identifique voc para os demais membros da equipe. Na caixa de texto Email Address (Endereo do correio eletrnico), digite o seu endereo do correio eletrnico.
O nome e o endereo do correio eletrnico so usados para identificar a propriedade do servidor WebDAV e aparecem no painel Files (Arquivos) para fins de contato.
7.
Clique em OK. O Dreamweaver configura o site para o acesso de WebDAV.
152
Para devolver e retirar arquivos utilizando o WebDAV:
Utilize os mtodos padro de devoluo e retirada descritos na seo a seguir. Quando voc utiliza o comando Check In (Devolver) ou Check Out (Retirar) para qualquer arquivo do site, o Dreamweaver transfere o arquivo usando WebDAV.
Devolver e retirar os arquivos de um servidor remoto

Depois de configurar o sistema Check In/Check Out (Devolver/retirar) (consulte Configurar o sistema Check In/Check Out (Devolver/retirar) na pgina 149), voc poder devolver e retirar arquivos em um servidor remoto utilizando o painel Files (Arquivos) ou na janela do documento.
Para retirar arquivos utilizando o painel Files (Arquivos):
1.
No painel Files, em Window (Janela) > Files, selecione os arquivos a serem retirados do servidor remoto.
NO TA
Voc pode selecionar arquivos na visualizao local ou remota, mas no na visualizao do servidor de teste.
Uma marca de seleo vermelha indica que outro membro da equipe retirou o arquivo, e um smbolo de cadeado indica que o arquivo somente leitura (no Windows) ou est bloqueado (Macintosh).
2.
Siga um dos procedimentos abaixo, para retirar o(s) arquivo(s):

Clique no boto Check Out (Retirar) na barra de ferramentas do painel Files. No Windows, clique com o boto direito do mouse ou, no Macintosh, pressione Control e clique em Check Out no menu contextual.
A caixa de dilogo Dependent Files (Arquivos dependentes) ser exibida.

3.
Clique em Yes para efetuar o download dos arquivos dependentes, juntamente com os arquivos selecionados, ou em No para no efetuar o download desses arquivos.
N O TA
recomendvel efetuar o download dos arquivos dependentes na retirada de um novo arquivo. Mas, se a verso mais recente dos arquivos dependentes j estiver no disco local, no haver necessidade de efetuar o download novamente.
Uma marca de seleo verde aparecer ao lado do cone do arquivo local indicando que ele foi retirado.
153
Para devolver arquivos utilizando o painel Files (Arquivos):

1.
No painel Files (Window > Files), selecione os arquivos novos ou retirados.

NO T A
Voc pode selecionar arquivos na visualizao local ou remota, mas no na visualizao do servidor de teste.
2.
Siga um destes procedimentos para devolver o(s) arquivo(s):

Clique no boto Check In (Devolver) na barra de ferramentas do painel Files. No Windows, clique com o boto direito do mouse ou, no Macintosh, pressione Control e clique em Check In no menu contextual.

3.
Clique em Yes para efetuar o download dos arquivos dependentes, juntamente com os arquivos selecionados, ou em No para no efetuar o download desses arquivos.
N OT A
recomendvel efetuar o upload dos arquivos dependentes na devoluo de um novo arquivo. Mas, se a verso mais recente dos arquivos dependentes j estiver no servidor remoto, no haver necessidade de efetuar o upload novamente.
Um smbolo de cadeado exibido ao lado do cone do arquivo local indicando que esse arquivo agora somente de leitura.
Para devolver ou retirar um arquivo aberto na janela do documento:
1.
Certifique-se de que o arquivo a ser devolvido ou retirado esteja ativo na janela do documento.
N OT A
Voc s pode devolver um arquivo aberto por vez.
2.

Selecione Site > Check In ou Site > Check Out. Clique no cone de File Management (Gerenciamento de arquivos) na barra de ferramentas da janela do documento e, em seguida, selecione Check In ou Check Out no menu pop-up.
NO T A
Se o arquivo ativo no estiver associado ao site atual no painel Files, o Dreamweaver tentar determinar a qual site definido localmente esse arquivo pertence. Se o arquivo pertencer a apenas um site local, o Dreamweaver abrir esse site e, em seguida, efetuar a operao de devoluo ou retirada.
154
Se o arquivo ativo for retirado, a verso aberta deste ser substituda pela nova verso retirada. Se o arquivo ativo for devolvido, ele poder ser salvo automaticamente antes da devoluo, dependendo das opes de preferncia definidas (consulte Definir as preferncias do painel Files (Arquivos) na pgina 133). Tpicos relacionados Sobre o sistema de devolues e retiradas na pgina 114
Configurar o sistema Check In/Check Out (Devolver/retirar) na pgina 149
Desfazer a retirada de um arquivo

Se voc retirar um arquivo e depois optar por no edit-lo (ou decidir descartar as alteraes feitas), poder desfazer a operao de retirada para que o arquivo volte ao seu estado original.
Para desfazer a retirada de um arquivo, siga um destes procedimentos:
Abra o arquivo na janela Document (Documento) e, em seguida, selecione Site > Undo Check Out (Desfazer a retirada). No painel Files (Arquivos), em Window (Janela) > Files, clique com o boto direito do mouse (no Windows) ou pressione a tecla Control (no Macintosh) e, em seguida, selecione Undo Check Out. A cpia local do arquivo se tornar somente de leitura e quaisquer alteraes feitas sero perdidas.

Configurar o sistema Check In/Check Out (Devolver/retirar) na pgina 149 Devolver e retirar os arquivos de um servidor remoto na pgina 153
Obter e colocar arquivos no servidor

Se voc estiver trabalhando em um ambiente com vrios usurios, utilize o sistema Check In/ Check Out (Devolver/retirar) para transferir os arquivos entre os sites local e remoto (consulte Devolver e retirar arquivos na pgina 148). Contudo, se for a nica pessoa trabalhando no site remoto, utilize os comandos Get (Obter) e Put (Colocar), para transferir os arquivos sem devolver ou retir-los.
155
Obter arquivos de um servidor remoto

Utilize o comando Get (Obter) para copiar arquivos do site remoto para seu site local. Voc pode utilizar o painel Files (Arquivos) ou a janela do documento para obter arquivos. O Dreamweaver cria um log da atividade dos arquivos durante a transferncia. Para exibir ou salvar este log, consulte Gerenciar transferncias de arquivos na pgina 160. O Dreamweaver tambm registra todas as atividades de transferncia de arquivos atravs de FTP. Se ocorrer um erro durante a transferncia de um arquivo com o FTP, o Registro de FTP do site poder auxili-lo a determinar o problema.
Para obter arquivos de um servidor remoto utilizando o painel Files (Arquivos):
1.
No painel Files, em Window (Janela) > Files, selecione os arquivos desejados para download. Em geral, esses arquivos so selecionados na visualizao remota, mas possvel selecionar os arquivos correspondentes na visualizao local, se for apropriado. Se a visualizao remota estiver ativa, o Dreamweaver copiar os arquivos selecionados para o site local. Se a visualizao local estiver ativa, o Dreamweaver copiar as verses remotas dos arquivos locais selecionados para o site local.
N OT A
Para obter apenas os arquivos cuja verso remota for mais recente do que a local, utilize o comando Synchronize (Sincronizar) (consulte Sincronizar os arquivos nos sites local e remoto na pgina 161).
2.
Siga um dos procedimentos abaixo, para obter o arquivo:

Clique no boto Get (Obter) na barra de ferramentas do painel Files. No Windows, clique com o boto direito do mouse ou, no Macintosh, pressione Control e clique no arquivo no painel Files. Em seguida, selecione Get no menu contextual.
A caixa de dilogo Dependent files (Arquivos dependentes) ser exibida.

3.
Para efetuar o download dos arquivos dependentes, clique em Yes. Para ignor-los, clique em No.
NO T A
Se j houver cpias locais dos arquivos dependentes, clique em No.
O Dreamweaver efetua o download dos arquivos selecionados, do seguinte modo: Se estiver utilizando o sistema de devolues e retiradas, a obteno de um arquivo resultar em uma cpia local somente de leitura do arquivo. O arquivo continuar disponvel no site remoto ou no servidor de teste para a retirada por outros membros da equipe (consulte Devolver e retirar arquivos na pgina 148).
156
Se voc estiver utilizando o sistema de devolues e retiradas, a obteno de um arquivo resultar na transferncia de uma cpia com privilgios de leitura e gravao.
N OT A
Se voc estiver trabalhando em um ambiente com vrios usurios, isto , se outras pessoas estiverem utilizando os mesmos arquivos, no desative a opo Enable File Check In and Check Out (Ativar a devoluo e retirada de arquivos). Se as outras pessoas estiverem utilizando o sistema de devolues e retiradas no site, voc tambm dever utilizar o mesmo sistema.
Para interromper a transferncia de arquivos a qualquer momento, clique no boto Cancel (Cancelar) na caixa de dilogo Status. possvel que a transferncia no pare imediatamente.
Para obter um arquivo de um servidor remoto utilizando a janela do documento:
1. 2.
Certifique-se de que o documento esteja ativo na janela do documento. Siga um dos procedimentos abaixo, para obter o arquivo:

Selecione Site > Get (Obter). Clique no cone de File Management (Gerenciamento de arquivos) na barra de ferramentas da janela do documento e selecione Get no menu pop-up.
NO TA
Se o arquivo ativo no estiver associado ao site atual no painel Files, o Dreamweaver tentar determinar a qual site definido localmente esse arquivo pertence. Se o arquivo atual pertencer a apenas um site local, o Dreamweaver abrir esse site e, em seguida, efetuar a operao Get.
Para exibir o registro de FTP:
Clique no menu Options (Opes) no canto superior direito do painel Files (Arquivos) e selecione View (Exibir) > Site FTP Log (Registro de site do FTP).
Sobre as transferncias de arquivos em segundo plano na pgina 115
Colocar arquivos em um servidor remoto

Voc pode colocar arquivos do site local no site remoto geralmente sem alterar o status de retirada do arquivo. H duas situaes comuns nas quais possvel utilizar o comando Put (Colocar) em vez de Check In (Devolver):
157
Voc no est em um ambiente com muitos usurios e no est utilizando o sistema de devolues e retiradas de arquivos. Voc deseja colocar a verso atual do arquivo no servidor e continuar a edit-lo.
N OT A
Caso voc coloque um arquivo que ainda no exista no site remoto e esteja utilizando o sistema de devolues e retiradas, o arquivo ser copiado para o site remoto e, em seguida, retirado para que voc possa continuar a edit-lo.
Voc pode utilizar o painel Files (Arquivos) ou a janela do documento para colocar arquivos. O Dreamweaver cria um log da atividade dos arquivos durante a transferncia. Para exibir ou salvar este log, consulte Gerenciar transferncias de arquivos na pgina 160. O Dreamweaver tambm registra todas as atividades de transferncia de arquivos atravs de FTP. Se ocorrer um erro durante a transferncia de um arquivo com o FTP, o Registro de FTP do site poder auxili-lo a determinar o problema.
Para colocar arquivos em um servidor remoto ou de teste utilizando o painel Files:
1.
No painel Files, em Window (Janela) > Files, selecione os arquivos desejados para upload. Normalmente, voc os seleciona na visualizao local, embora tambm possa selecionar os arquivos correspondentes na visualizao remota, se preferir.
N OT A
Para colocar apenas os arquivos cuja verso local for mais recente do que a remota, consulte Sincronizar os arquivos nos sites local e remoto na pgina 161.
2.
Siga um dos procedimentos abaixo, para colocar o arquivo:

Clique no boto Put (Colocar) na barra de ferramentas do painel Files. No Windows, clique com o boto direito do mouse ou, no Macintosh, pressione Control e clique no arquivo no painel Files. Em seguida, selecione Put no menu contextual.
Se o arquivo no tiver sido salvo, possvel que aparea uma caixa de dilogo, dependendo da definio de preferncias na categoria Site da caixa de dilogo Preferences (Preferncias), que permita salvar o arquivo antes de coloc-lo no servidor remoto.
3.
Se uma caixa de dilogo for exibida, clique em Yes para salvar o arquivo ou clique em No para colocar a verso salva anteriormente no servidor remoto.
N O TA
Se voc no salvar o arquivo, as alteraes feitas desde o ltimo salvamento no sero colocadas no servidor remoto. Contudo, o arquivo continuar aberto para que ainda seja possvel salv-lo depois de coloc-lo no servidor.
158
4.
Para efetuar o upload dos arquivos dependentes, clique em Yes. Para ignor-los, clique em No.
NO T A
Se o site remoto j contiver cpias dos arquivos dependentes, clique em No.
Para interromper a transferncia de arquivos, clique no boto Cancel (Cancelar) na caixa de dilogo Status. possvel que a transferncia no pare imediatamente.
Para colocar arquivos em um servidor remoto utilizando a janela do documento:
1. 2.
Certifique-se de que o documento esteja ativo na janela do documento. Siga um dos procedimentos abaixo, para colocar o arquivo:

Selecione Site > Put (Colocar). Clique no cone de File Management (Gerenciamento de arquivos) na barra de ferramentas da janela do documento e selecione Put no menu pop-up.
N OT A
Se o arquivo ativo no estiver associado ao site atual no painel Files, o Dreamweaver tentar determinar a qual site definido localmente esse arquivo pertence. Se o arquivo atual pertencer a apenas um site local, o Dreamweaver abrir esse site e, em seguida, efetuar a operao Put.
Para exibir o registro de FTP:
Clique no menu Options (Opes) no canto superior direito do painel Files (Arquivos) e selecione View (Exibir) > Site FTP Log (Registro de site do FTP).

Obter arquivos de um servidor remoto na pgina 156 Sobre as transferncias de arquivos em segundo plano na pgina 115
159
Gerenciar transferncias de arquivos

possvel exibir o status das operaes de transferncias de arquivos, bem como uma lista de arquivos transferidos e seus respectivos resultados (transferncia bem-sucedida, ignorada ou falha na transferncia). Tambm possvel salvar um log da atividade dos arquivos.
NO TA

O Dreamweaver permite a execuo de outras atividades no relacionadas com o servidor enquanto voc est transferindo arquivos de/para um servidor. Para obter mais informaes, consulte Sobre as transferncias de arquivos em segundo plano na pgina 115.
Para cancelar uma transferncia de arquivo:
Clique no boto Cancel (Cancelar) ou feche a caixa de dilogo Background File Activity (Atividade de arquivos em segundo plano).
Para ocultar a caixa de dilogo Background File Activity durante as transferncias:
Clique no boto Hide (Ocultar) na caixa de dilogo Background File Activity.
Para exibir os detalhes da ltima transferncia de arquivo:

1.
Clique no boto Log (Registro) na parte inferior do painel Files (Arquivos) para abrir a caixa de dilogo Background File Activity. Clique na seta de expanso Details (Detalhes).
2.
Para salvar um log da ltima transferncia de arquivo:

1.
Clique no boto Log (Registro) na parte inferior do painel Files (Arquivos) para abrir a caixa de dilogo Background File Activity. Clique no boto Save Log (Salvar o registro) e salve as informaes como um arquivo de texto.
2.
possvel analisar a atividade dos arquivos ao abrir o arquivo de log no Dreamweaver ou em qualquer editor de texto. Tpicos relacionados Obter e colocar arquivos no servidor na pgina 155
160
Sincronizar os arquivos nos sites local e remoto

Depois que os arquivos forem criados nos sites local e remoto, possvel sincroniz-los.
NO TA

Caso o site remoto seja um servidor de FTP (em vez de um servidor de rede), a sincronizao dos arquivos utilizar o FTP.
Antes de sincronizar os sites, voc poder verificar quais arquivos deseja colocar, obter, excluir ou ignorar. O Dreamweaver confirma quais arquivos foram atualizados aps o trmino da sincronizao.
Para verificar quais arquivos so mais recentes no site local ou no site remoto, sem sincronizao, siga um dos procedimentos abaixo:
No canto superior direito do painel Files (Arquivos), clique no menu Options (Opes) e depois selecione Edit (Editar) > Select Newer Local (Selecionar um local mais novo) ou Select (Selecionar) > Select Newer Remote (Selecionar um remoto mais novo).
No painel Files, clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e, em seguida, selecione Select > Newer Local (Local mais novo) ou Select > Newer Remote (Remoto mais novo).
Para sincronizar os arquivos:

1.
No painel Files (Arquivos), em Window (Janela) > Files, selecione um site no menu popup (em que o site atual, o servidor ou a unidade aparece). (Opcional) Selecione pastas ou arquivos especficos. Se desejar sincronizar o site inteiro, ignore essa etapa. Clique no menu Options no canto superior direito do painel Files e selecione Site > Synchronize (Sincronizar). A caixa de dilogo Synchronize Files (Sincronizar os arquivos) exibida.
2.
3.
Sincronizar os arquivos nos sites local e remoto
161
4.
Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique no boto Preview (Visualizar). O Dreamweaver exibe os arquivos que sero sincronizados e permite que voc altere as aes (colocar, obter, excluir e ignorar) para esses arquivos antes de executar a sincronizao. Se todos os seus arquivos j estiverem sincronizados, o Dreamweaver o informar que a sincronizao no necessria. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
5.
Tpicos relacionados Devolver e retirar os arquivos de um servidor remoto na pgina 153

Obter arquivos de um servidor remoto na pgina 156 Colocar arquivos em um servidor remoto na pgina 157 Comparar arquivos para conhecer as diferenas na pgina 126
Identificar e excluir arquivos noutilizados

possvel identificar e excluir arquivos que no mais so usados por outros arquivos do site.
Para identificar e excluir arquivos no-utilizados:
1.
Escolha Site > Check Links Sitewide (Verificar os links no site inteiro). O Dreamweaver verifica todos os links do site e exibe os links rompidos no painel Results (Resultados).
2.
Selecione Orphaned Files (Arquivos rfos) no menu pop-up do painel Link Checker (Verificador de links). O Dreamweaver exibe todos os arquivos que no apresentam links de entrada. Isto significa que nenhum arquivo do seu site possui links apontando para esses arquivos.
3.
Selecione os arquivos que voc deseja excluir e pressione a tecla Delete (no Windows) ou Command+Delete (no Macintosh).
C U ID A D O
Apesar de nenhum outro arquivo do site possuir links apontando para esses arquivos, alguns dos arquivos listados podem ter links apontando para outros arquivos. Tenha cuidado com a excluso de arquivos.
162
Tpicos relacionados Verificar links rompidos, externos e rfos na pgina 491
Mascarar as pastas e os arquivos do site

O mascaramento de sites permite excluir pastas e tipos arquivos em um site de operaes no site inteiro, como Get (Obter) ou Put (Colocar). Tpicos relacionados Sobre o mascaramento de sites na pgina 116
Identificar e excluir arquivos no-utilizados na pgina 162
Ativar e desativar o mascaramento de sites

O mascaramento de sites est ativo como padro. possvel desativar o mascaramento em carter permanente ou temporrio, para realizar uma operao que afete todos os arquivos, inclusive os que estiverem mascarados. Quando o mascaramento de sites for desativado, todos os arquivos que estiverem mascarados sero revelados. Quando ele for reativado, todos os arquivos que estavam anteriormente mascarados retornaro a esse estado.
N OT A
Tambm possvel utilizar a opo Uncloak All (Revelar tudo) para revelar todos os arquivos, mas ela no desativar o mascaramento. No h uma maneira de mascarar novamente todas as pastas e os arquivos que estavam anteriormente mascarados, exceto redefinindo o mascaramento de cada pasta e tipo de arquivo.
Para ativar ou desativar o mascaramento de sites:

1.
No painel Files (Arquivos), em Window (Janela) > Files, selecione um site no menu popup em que o site atual, o servidor ou a unidade aparece. Selecione um arquivo ou uma pasta. Clique com o boto direito do mouse (no (Windows) ou mantenha a tecla Control pressionada (no Macintosh) e, em seguida, siga um destes procedimentos:

2. 3.
Selecione Enable/Disable Cloaking (Ativar/Desativar o mascaramento). Selecione Settings (Definies) e, em seguida, na guia Advanced (Avanado) da caixa de dilogo Site Definition (Definio do site), escolha Mascaramento (Cloaking) na lista de categorias esquerda. Selecione Enable Cloaking (Ativar o mascaramento) ou cancele sua seleo e, em seguida, clique em OK.
O mascaramento deste site estar ativado ou desativado.
163
Tpicos relacionados Sobre o mascaramento de sites na pgina 116

Mascarar e revelar determinados tipos de arquivos na pgina 164 Revelar todas as pastas e arquivos na pgina 167
Mascarar e revelar as pastas do site

possvel mascarar determinadas pastas, mas no todas as pastas ou um site inteiro. possvel mascarar diversas pastas simultaneamente.
Para mascarar ou revelar determinadas pastas de um site:
1.
No painel Files (Arquivos), em Window (Janela) > Files, selecione um site cujo mascaramento esteja ativado no menu pop-up em que o site atual, o servidor ou a unidade aparece. Selecione a(s) pasta(s) que deseja mascarar ou revelar. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada enquanto clica (no Macintosh). Em seguida, selecione Cloaking (Mascaramento)> Cloak (Mascarar) ou Cloaking > Uncloak (Revelar) no menu contextual.
2. 3.
Uma linha vermelha atravessando o cone correspondente pasta aparecer ou desaparecer, indicando se a pasta est mascarada ou no.
N OT A

Para realizar uma operao em determinada pasta mascarada, basta selecionar o item no painel Files. A realizao direta de uma operao em um arquivo ou uma pasta anula o mascaramento.
Tpicos relacionados Sobre o mascaramento de sites na pgina 116 Ativar e desativar o mascaramento de sites na pgina 163 Revelar todas as pastas e arquivos na pgina 167
Mascarar e revelar determinados tipos de arquivos

possvel indicar determinados tipos de arquivos a serem mascarados, de modo que o Dreamweaver mascare todos os arquivos que terminarem com um padro especificado. Por exemplo: mascare todos os arquivos que terminarem com a extenso .txt. Os tipos de arquivos digitados no precisam ser extenses, pois podem obedecer a qualquer padro no final dos nomes de arquivo.
164
Para mascarar determinados tipos de arquivos em um site:

1.
No painel Files (Arquivos), em Window (Janela) > Files, selecione um site cujo mascaramento esteja ativado no menu pop-up em que o site atual, o servidor ou a unidade aparece. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e, em seguida, selecione Settings (Definies). A caixa de dilogo Site Definition (Definio do site) exibe as opes de Cloaking (Mascaramento).
2.
3.
Marque a caixa de seleo Cloak Files Ending With (Mascarar os arquivos terminados com). Na caixa de texto, digite os tipos de arquivos a serem mascarados. Por exemplo: .jpg, para mascarar todos os arquivos do site que terminarem com .jpg.
N OT A
4.
Separe os diversos tipos de arquivos com um espao. No utilize vrgulas ou sinais de dois pontos.
5.
Clique em OK.
165
Aparecer uma linha vermelha atravessando os arquivos afetados, indicando o seu mascaramento.
DICA
Alguns programas criam arquivos de cpia de segurana com um determinado sufixo, como .bak. Esses arquivos podem ser mascarados. Para realizar uma operao em determinada pasta mascarada, basta selecionar o item no painel Files. A realizao direta de uma operao em um arquivo ou uma pasta anula o mascaramento.
Para revelar determinados tipos de arquivos em um site:

1.
2.
3.
4.
Tpicos relacionados Sobre o mascaramento de sites na pgina 116

166
NO TA

No painel Files (Arquivos), em Window (Janela) > Files, selecione um site cujo mascaramento esteja ativado no menu pop-up em que o site atual, o servidor ou a unidade aparece. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e, em seguida, selecione Cloaking > Settings. A guia Advanced (Avanado) da caixa de dilogo Site Definition (Definio do site) exibida. Siga um dos procedimentos abaixo: Desmarque a caixa de seleo Cloak Files Ending With para revelar todos os tipos de arquivos listados na caixa de texto. Exclua determinados tipos de arquivos da caixa de texto, para revel-los.
Clique em OK. As linhas vermelhas que atravessavam os arquivos afetados desaparecero, indicando que eles foram revelados.
Ativar e desativar o mascaramento de sites na pgina 163 Mascarar e revelar as pastas do site na pgina 164
Revelar todas as pastas e arquivos

possvel revelar todas as pastas e arquivos de um site simultaneamente. Essa ao no pode ser desfeita. No h como encobrir novamente todos os itens que estavam encobertos anteriormente. Ser necessrio mascar-los individualmente.
D IC A
Se desejar revelar temporariamente todas as pastas e arquivos e mascar-los novamente, desative o mascaramento de sites (consulte Ativar e desativar o mascaramento de sites na pgina 163).
Para revelar todas as pastas e arquivos de um site:

1.
No painel Files (Arquivos), em Window (Janela) > Files, selecione um site cujo mascaramento esteja ativado no menu pop-up em que o site atual, o servidor ou a unidade aparece. Selecione qualquer arquivo ou pasta do site. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e, em seguida, selecione Cloaking (Mascaramento) > Uncloack All (Revelar tudo).
N OT A
2. 3.
Essa etapa tambm desmarca a caixa Cloak Files Ending With (Mascarar os arquivos terminados com) em Site > Cloaking > Settings (Definies).
As linhas vermelhas que atravessavam os cones dos arquivos e das pastas desaparecero, indicando que eles foram revelados. Tpicos relacionados Sobre o mascaramento de sites na pgina 116

Ativar e desativar o mascaramento de sites na pgina 163 Mascarar e revelar as pastas do site na pgina 164 Mascarar e revelar determinados tipos de arquivos na pgina 164
Armazenar informaes sobre arquivos nas Design Notes

As Design Notes so notas associadas a um arquivo, mas armazenadas em um arquivo separado. Utilize as Design Notes para controlar as informaes adicionais relativas aos documentos, como nomes de arquivos de origem de imagens e comentrios sobre o status de arquivos.
167
Tpicos relacionados Sobre o Design Notes na pgina 116
Ativar e desativar as Design Notes de um site

Ative ou desative as Design Notes de um site na categoria Design Notes da caixa de dilogo Site Definition (Definio do site). Ao ativar as Design Notes, possvel optar por utiliz-las apenas localmente, se desejar.
Para ativar e desativar as Design Notes do site ou para utiliz-las localmente:
1.
Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. Selecione um site e, em seguida, clique em Edit (Editar). A caixa de dilogo Site Definition (Definio do site) exibida. Selecione as Design Notes na lista Category (Categoria) esquerda. A caixa de dilogo Site Definition exibe as opes das Design Notes.
2.
3.
4.
5.
168
Trabalhar com Design Notes na pgina 170
Associar Design Notes a arquivos

possvel criar um arquivo de Design Notes para cada documento ou modelo do site. Voc pode tambm criar Design Notes referentes a miniaplicativos, controles ActiveX, imagens, contedo Flash, objetos Shockwave e campos de imagem nos documentos.
N OT A
Se forem adicionadas Design Notes a um arquivo de modelo, elas no sero herdadas pelos documentos criados com esse modelo.
Para adicionar Design Notes a um documento:

1.
Abra o arquivo na janela do documento e, em seguida, selecione File (Arquivo) > Design Notes. No painel Files, clique com o boto direito do mouse (Windows) ou clique com a tecla Control pressionada (Macintosh) e clique no arquivo. Em seguida, selecione Design Notes.
N OT A
Se o arquivo residir em um site remoto, retire ou obtenha o arquivo e, em seguida selecione-o na pasta local (consulte Devolver e retirar os arquivos de um servidor remoto na pgina 153 ou Obter e colocar arquivos no servidor na pgina 155).
Aparecer a caixa de dilogo Design Notes.
2.
169
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, alm da extenso .mno. Por exemplo: se o nome do arquivo for ndice.html, o arquivo de Design Notes a ele associado ser denominado ndice.html.mno.
Ativar e desativar as Design Notes de um site na pgina 168
Trabalhar com Design Notes

Depois de associar uma Design Note a um arquivo (consulte Associar Design Notes a arquivos na pgina 169), voc poder abri-la, alterar seu status ou exclu-la.
Para abrir as Design Notes associadas a um arquivo, siga um destes procedimentos:
Abra o arquivo na janela do documento e, em seguida, selecione File (Arquivo) > Design Notes. No painel Files, clique com o boto direito do mouse (Windows) ou clique com a tecla Control pressionada (Macintosh) e clique no arquivo. Em seguida, selecione Design Notes. Na coluna Notes (Notas) do painel Files, 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). Clique na guia All Info (Todas as informaes). Clique no boto com o sinal de adio (+). No campo Name (Nome), digite a palavra status. No campo Value (Valor), digite o status. Se j existir um valor de status, ele ser substitudo pelo novo valor.
2. 3. 4. 5.
170
6.
Clique na guia Basic Info e observe que o novo valor de status mostrado no menu popup Status.
NO T A
possvel 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 associao:

1.
Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. Selecione o site e clique em Edit (Editar). A caixa de dilogo Site Definition (Definio do site) exibida. Selecione Design Notes na lista de categorias esquerda. Clique no boto Clean Up (Limpar). O Dreamweaver solicitar que verifique se as Design Notes que no esto mais associadas a um arquivo do site devero ser excludas. Se voc utilizar o Dreamweaver para excluir um arquivo ao qual est associado um arquivo de Design Notes, ele excluir tambm o arquivo de Design Notes. Por esse motivo, geralmente os arquivos rfos de Design Notes ocorrero apenas quando um arquivo for excludo ou renomeado fora do Dreamweaver.
N OT A
2.
3. 4.
Se a opo Maintain Design Notes (Manter as Design Notes) for desmarcada antes de clicar em Clean Up, o Dreamweaver excluir todos os arquivos de Design Notes associados ao site.
Ativar e desativar as Design Notes de um site na pgina 168
Testar o site
O Dreamweaver fornece diversos recursos para ajud-lo a testar um site, inclusive a visualizao de pginas e a verificao de compatibilidade de navegadores. Voc tambm pode executar vrios relatrios, como um relatrio de links rompidos.
Testar o site
171
Diretrizes de teste de site

Antes de carregar o site em um servidor e prepar-lo para a exibio, recomendvel test-lo localmente (recomenda-se testar e verificar se h problemas no site com freqncia durante a sua construo. Desta forma, possvel descobrir problemas logo e evitar que se repitam). Certifique-se de que a aparncia e o funcionamento das pginas nos navegadores de destino estejam de acordo com o esperado, que no haja links rompidos e que o download das pginas no demore demais. Tambm possvel testar e solucionar problemas em seu site como um todo executando um relatrio de local. As diretrizes a seguir o auxiliaro a criar uma experincia agradvel para os visitantes do seu site:
Certifique-se de que as pginas estejam funcionando conforme o esperado nos navegadores de destino e de que no apresentem problemas ou "falhas" em outros navegadores. As pginas devem ser legveis e funcionais nos navegadores que no oferecerem suporte aos estilos, camadas, plug-ins ao JavaScript (consulte Verificar a compatibilidade com navegadores na pgina 635). No caso das pginas que no funcionam adequadamente em navegadores de verses anteriores, h a possibilidade de utilizar o comportamento Check Browser (Verificar o navegador) para redirecionar os visitantes automaticamente a outra pgina (consulte Check Browser (Verificar o navegador) na pgina 551).
Visualize as pginas no maior nmero possvel de navegadores e plataformas diferentes. Este procedimento possibilita a exibio de diferenas no layout, cores, tamanhos de fonte e tamanho padro de janelas do navegador, que no podem ser previstos em uma verificao de navegador de destino (consulte Visualizar e testar pginas em navegadores na pgina 399).
Verifique se h links rompidos no site e ajuste-os. Uma vez que os outros sites tambm sofrem reformas e reorganizaes, a pgina qual est vinculando o seu site pode ter sido transferida ou excluda. possvel executar um relatrio de verificao de links para test-los (consulte Verificar links rompidos, externos e rfos na pgina 491 e Corrigir links rompidos na pgina 493).
172
Monitore o tamanho das pginas e o tempo de download (consulte Definir preferncias de tamanho e tempo de download na pgina 402). Lembre-se de que, se uma pgina consistir em uma grande tabela, em alguns navegadores, os visitantes no vero nada at que a tabela inteira seja carregada. Considere tambm a possibilidade de desmembrar tabelas grandes; se isto no for possvel, coloque um contedo pequeno, como uma mensagem de boas-vindas ou uma faixa de propaganda, fora da tabela no alto da pgina, de modo que os visitantes possam visualizar esse material enquanto for feito o download da tabela.
Execute alguns relatrios de site para testar e solucionar problemas no site como um todo. possvel verificar o seu site inteiro quanto a problemas como, por exemplo, documentos sem ttulos, tags vazias e tags redundantes aninhadas (consulte Testar o site na pgina 171).
Valide o cdigo para localizar erros de tag ou sintaxe (consulte Validar tags na pgina 639). Depois que poro maior do site tiver sido publicada, prossiga com sua atualizao e manuteno. A publicao do site, ou seja, coloc-lo "no ar", pode ser efetuada de vrias maneiras e um processo contnuo. A definio e implementao de um sistema de controle de verso uma parte importante do processo, tanto com as ferramentas do Dreamweaver, quanto com um aplicativo externo de controle de verso.
Utilize os fruns de discusso do Dreamweaver no site da Macromedia na Web, em www.macromedia.com/go/dreamweaver_newsgroup. Os fruns podem fornecer informaes importantes sobre navegadores, plataformas e assim por diante. Tambm possvel discutir assuntos tcnicos e compartilhar sugestes teis com outros usurios do Dreamweaver .
Utilizar relatrios para testar um site

Voc pode executar relatrios de site sobre o fluxo de trabalho ou sobre atributos HTML, inclusive acessibilidade, para o documento atual, os arquivos selecionados ou o site inteiro.
Testar o site
173
Os relatrios de fluxo de trabalho podem melhorar a colaborao entre membros de uma equipe da Web. Voc pode executar relatrios de fluxo de trabalho que exibem quem retirou um arquivo, quais arquivos esto associados a Design Notes e quais arquivos foram modificados recentemente. possvel refinar ainda mais os relatrios das Design Notes, especificando os parmetros nome/valor.
NO T A
necessrio contar com uma conexo a um site remoto definida para executar os relatrios de fluxo de trabalho. Para definir um site remoto, consulte Configurar uma pasta remota na pgina 94.
Os relatrios HTML permitem compilar e gerar relatrios de vrios atributos HTML. Voc pode verificar as tags de fontes aninhadas combinveis, a acessibilidade, a ausncia de texto alternativo, as tags aninhadas redundantes, as tags vazias removveis e os documentos sem ttulo. Aps executar um relatrio, voc poder salv-lo em um arquivo XML, import-lo para uma instncia de modelo, um banco de dados ou uma planilha eletrnica e imprimi-lo ou exibi-lo em um site da Web.
N OT A
possvel adicionar tambm diversos tipos de relatrios ao Dreamweaver atravs do site de intercmbio Macromedia Dreamweaver Exchange. (Consulte Adicionar extenses ao Dreamweaver na pgina 84).
Para utilizar o comando Reports (Relatrios) para verificar os links de um site, consulte Verificar links rompidos, externos e rfos na pgina 491.
Para executar relatrios de teste de um site:
1.
Selecione Site > Reports (Relatrios).

DICA
Para executar apenas um relatrio de acessibilidade do site, voc poder selecionar File (Arquivo) > Check Page (Verificar pgina) > Check Accessibility (Verificar acessibilidade) e o relatrio aparecer no painel Site Reports (Relatrios de site) do grupo de painis Results (Resultados).
174
A caixa de dilogo Reports (Relatrios) exibida.
2.
Selecione uma categoria para criar um relatrio e um tipo de relatrio para executar. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em Run (Executar) para criar o relatrio. Dependendo do tipo de relatrio a ser executado, talvez voc seja solicitado a salvar o arquivo, definir o site ou selecionar uma pasta (se ainda no tiver feito isso). Uma lista de resultados aparece no painel Site Reports no grupo de painis Results.
3.
Para utilizar e salvar um relatrio:

1. 2.
Execute um relatrio (consulte o procedimento anterior). No painel Site Reports, siga um destes procedimentos para exibir o relatrio:
Clique no cabealho da coluna de acordo com a qual deseja ordenar os resultados. possvel ordenar por nome de arquivo, nmero da linha ou descrio. Tambm possvel executar vrios relatrios diferentes e mant-los abertos.
Selecione qualquer linha do relatrio e clique no boto More Info (Mais informaes), no lado esquerdo do painel Site Reports, para obter uma descrio do problema. As informaes aparecero no painel Reference (Referncia). Clique duas vezes em qualquer linha do relatrio para exibir o cdigo correspondente na janela do documento.
NO TA
Na visualizao do projeto, o Dreamweaver altera a exibio para visualizao dividida para mostrar o problema relatado em cdigo.
Testar o site
175
3.
Clique em Save Report (Salvar o relatrio) para salvar o relatrio. Quando o relatrio for salvo, ele poder ser importado para um arquivo existente de modelo. Em seguida, possvel importar o arquivo para um banco de dados ou planilha e imprimir ou exibi-lo em um site da Web.
D IC A
Aps executar os relatrios HTML, utilize o comando Clean Up HTML (Limpar o HTML) para corrigir quaisquer erros de HTML que tiverem sido listados pelos relatrios (consulte Limpar o cdigo na pgina 633).
Tpicos relacionados Relatrios no Dreamweaver na pgina 55
176
CAPTULO 5
Gerenciar bibliotecas e propriedades de sites

Ao desenvolver sites da Web, voc pode acumular um nmero cada vez maior de propriedades. Em alguns casos, possvel utilizar as mesmas propriedades para vrios sites ou definir um conjunto de propriedades preferidas que podem ser utilizadas para todos os seus sites. Voc pode utilizar o Macromedia Dreamweaver 8 para gerenciar as propriedades do site. possvel localizar e visualizar facilmente diversos tipos de propriedades armazenadas no site, como imagens, filmes, cores, scripts e links. Voc tambm pode arrastar facilmente uma propriedade diretamente para o documento atual a fim de inseri-la em uma pgina. O Dreamweaver permite acesso a dois tipos especiais de recursos: bibliotecas e modelos. Os itens da biblioteca e modelos so propriedades vinculadas: edio de um item de biblioteca ou modelo atualiza todos os documentos nos quais as propriedades foram aplicadas. Os itens de biblioteca so reservados para uso com elementos de projeto especficos, como as informaes de direitos autorais de um site ou um logotipo. Os modelos permitem controlar uma rea de projeto maior. Para obter mais informaes, consulte Captulo 11, Gerenciar modelos, na pgina 325. Os seguintes tpicos so discutidos neste captulo:
Sobre itens de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Trabalhar com propriedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Criar e gerenciar uma lista de propriedades favoritas . . . . . . . . . . . . . . . . . . . . . . . . 188 Trabalhar com itens de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191
Sobre itens de biblioteca

Uma biblioteca um arquivo especial do Dreamweaver que contm uma coleo de propriedades especficas ou cpias de propriedades criadas por voc para serem inseridas nas pginas da Web. Essas propriedades contidas em uma biblioteca so chamadas de itens de biblioteca. Voc pode atualizar todas as pginas que utilizam um item de biblioteca sempre que alterar o contedo do item. possvel armazenar todos os tipos de elementos de pgina, como imagens, tabelas, sons e arquivos Flash em uma biblioteca.
177
A seguir um exemplo de utilizao de um item de biblioteca: suponha que esteja criando um site grande para uma empresa. O slogan da empresa deve aparecer em todas as pginas do site, mas o departamento de marketing ainda no se decidiu quanto aos detalhes do contedo do slogan. Se um item de biblioteca for criado para conter o slogan para ser utilizado em todas as pginas, quando o departamento de marketing fornecer o slogan final, voc poder alterar o item de biblioteca e automaticamente atualizar todas as pginas que o utilizarem. O Dreamweaver armazena os itens de biblioteca na pasta Library (Biblioteca) localizada na pasta raiz local de cada site. Cada site tem sua prpria biblioteca.
NO T A 178 N OT A
Se o item de biblioteca contiver links, os links podero no funcionar no novo site. Alm disso, as imagens de um item de biblioteca no sero copiadas para o novo site.
Quando voc utiliza um item de biblioteca, o Dreamweaver no insere esse item na pgina da Web; em vez disso, ele insere um link para o item. Isto , o Dreamweaver insere uma cpia do cdigo-fonte HTML desse item no documento e adiciona um comentrio de HTML com uma referncia para o item original e externo. A referncia ao item externo da biblioteca possibilita a atualizao simultnea do contedo inteiro de um site por meio da alterao do item e, em seguida, da utilizao dos comandos de atualizao do submenu Modify (Modificar) > Library. Em seguida, se voc precisar alterar parte do texto, por exemplo, ou uma imagem, a atualizao automtica do item de biblioteca atualizar a instncia da biblioteca em todas as pginas nas quais o item foi inserido. Quando voc criar um item de biblioteca que contenha um elemento com um anexo de comportamento, o Dreamweaver copiar, para o arquivo do item de biblioteca, o elemento e o seu manipulador de evento (o atributo que especifica o evento que iniciar a ao, como onClick, onLoad ou onMouseOver, e qual ao dever ser chamada quando ocorrer o evento). O programa no copiar para o item de biblioteca as funes JavaScript associadas. Em vez disso, quando voc inserir o item de biblioteca no documento, o Dreamweaver inserir automaticamente as funes JavaScript apropriadas na seo head do documento (caso ainda no estejam na seo).
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 se o comportamento Call JavaScript (Chamar o JavaScript) for utilizado para executar o cdigo. Se voc no utilizar um comportamento do Dreamweaver para executar o cdigo, este no ser mantido como parte do item de biblioteca.
Captulo 5: Gerenciar bibliotecas e propriedades de sites
Existem requisitos especiais para editar os comportamentos em itens de biblioteca (consulte Editar um comportamento em um item de biblioteca na pgina 199). Os itens de biblioteca no podem conter folhas de estilos, porque o cdigo correspondente a esses elementos integra a seo head.
Tpicos relacionados
Trabalhar com itens de biblioteca na pgina 191
Trabalhar com propriedades

As propriedades envolvem vrios elementos que voc pode armazenar em um site, como um arquivo de imagem ou de filme. possvel obter propriedades de vrias fontes. Por exemplo, voc pode criar propriedades em um aplicativo, como o Macromedia Fireworks ou Macromedia Flash, receb-las de um colega de trabalho ou copi-las de um CD de clip-art ou de um site grfico da Web. Tpicos relacionados Criar e gerenciar uma lista de propriedades favoritas na pgina 188 Trabalhar com itens de biblioteca na pgina 191
Exibir propriedades no painel Assets (Propriedades)

Voc pode exibir e gerenciar as propriedades do site atual no painel Assets. O painel Assets exibe as propriedades do site associadas ao documento ativo na janela do documento.
N OT A
preciso definir um site local antes de visualizar as propriedades no painel Assets. Para obter mais informaes sobre como configurar um site, consulte Configurar um novo site do Dreamweaver na pgina 90.
O painel Assets fornece duas visualizaes:

A lista Site
mostra todas as propriedades do site, inclusive as cores e as URLs utilizadas em qualquer documento desse site. mostra apenas as propriedades escolhidas explicitamente.
A lista Favorites (Favoritos)
179
Nas duas listas, as propriedades so divididas em categorias (no lado esquerdo do painel Assets). As listas Site e Favorites esto disponveis para todas as categorias de propriedades, exceto para modelos e itens de biblioteca.
NO TA

A maioria das operaes do painel Assets funciona do mesmo modo que as listas Site e Favorites. Contudo, h algumas tarefas que podem ser executadas apenas na lista Favorites (consulte Criar e gerenciar uma lista de propriedades favoritas na pgina 188).
Como padro, as propriedades em uma determinada categoria so listadas por nomes em ordem alfabtica. Voc tambm pode listar as propriedades por vrios outros critrios ou alterar o tamanho das colunas. possvel visualizar as propriedades de uma categoria e alterar o tamanho da rea de visualizao.
Para abrir o painel Assets:
Selecione Window (Janela) > Assets. O painel Assets exibido. A categoria Images (Imagens) selecionada por padro.
Para exibir a lista Site:
No painel Assets, em Window > Assets, selecione a opo Site na parte superior do painel.
N OT A
Nas categorias Templates (Modelos) e Library, localizadas no lado esquerdo do painel Assets, as opes Site e Favorites no estaro disponveis.
180
Para exibir a lista Favorites:
No painel Assets, em Window > Assets, selecione a opo Favorites na partes superior do painel. A lista Favorites permanecer vazia at que voc adicione propriedades a ela.
NO T A
Nas categorias Templates e Library, localizadas no lado esquerdo do painel Assets, as opes Site e Favorites no estaro disponveis.
Para exibir as propriedades de uma determinada categoria:
Clique no cone apropriado no lado esquerdo do painel Assets, em Window > Assets.
Para listar as propriedades em uma ordem diferente:
Clique em um dos cabealhos 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 cabealho de coluna Type (Tipo).
Para alterar a largura de uma coluna:
Arraste a linha que separa os dois cabealhos das colunas.
Para visualizar uma propriedade:
Selecione a propriedade no painel Assets. A rea de visualizao, no alto do painel, mostra a pr-visualizao da propriedade. Por exemplo: ao selecionar uma propriedade de filme, a rea de visualizao exibe um cone. Para exibir o filme, clique no boto Play (Executar), o tringulo verde no canto superior direito da rea de visualizao.
Para alterar o tamanho da rea de visualizao:
Arraste para cima ou para baixo a barra de diviso (entre a rea de visualizao e a lista de propriedades).
Tpicos relacionados Adicionar uma propriedade a um documento na pgina 182
Selecionar e editar as propriedades na pgina 184
Atualizar o painel Assets

O painel Assets pode demorar alguns segundos at criar a lista Site, pois necessrio ler o cache do site para criar essa lista.
181
Algumas alteraes no aparecero imediatamente no painel Assets:
Quando voc adicionar ou remover uma propriedade do site, as alteraes no aparecero no painel Assets at que a lista Site seja atualizada, clicando no boto Refresh Site List (Atualizar a lista Site). Se uma propriedade for adicionada ou removida fora do Dreamweaver, utilizando o Windows Explorer, por exemplo, recrie o cache do site para atualizar o painel Assets. Quando voc remover a nica instncia de determinada cor ou URL no site,, ou salvar um novo arquivo contendo uma cor ou URL ainda no utilizado no site, as alteraes no aparecero no painel Assets at que, a lista Site seja atualizada.
Para atualizar manualmente a lista Site:

1.
No painel Assets, em Window > Assets, selecione a opo Site na parte superior do painel para ver a lista Site. Clique no boto Refresh Site List na parte inferior do painel Assets. O Dreamweaver cria o cache do site ou o atualiza, conforme necessrio, e o painel Assets atualizado para exibir as propriedades do site.
2.
Para recriar o cache do site manualmente e atualizar a lista Site:
No painel Assets (Window > Assets), clique com o boto direito do mouse (no Windows) ou pressione a tecla Command (no Macintosh) na lista Assets e selecione Refresh Site List.
Tpicos relacionados Selecionar e editar as propriedades na pgina 184
Reutilizar propriedades em outro site na pgina 186
Adicionar uma propriedade a um documento

A maior parte dos tipos de propriedades pode ser inserida em um documento arrastando-as para a visualizao do projeto ou visualizao do cdigo da janela do documento ou utilizando o boto Insert (Inserir). possvel inserir cores e URLs ou aplic-las no texto selecionado, na visualizao do projeto (as URLs tambm podem ser aplicadas a outros elementos, como as imagens, na visualizao do projeto).
Para inserir uma propriedade em um documento:
1.
Coloque o ponto de insero na visualizao do projeto onde a propriedade dever aparecer.
182
2.
No painel Assets, em Window > Assets, selecione, no lado esquerdo do painel, a categoria relativa ao tipo de propriedade a ser inserida.
NO T A
Selecione qualquer categoria, exceto Templates. Um modelo pode ser aplicado apenas a um documento inteiro e no pode ser inserido em um documento. Para obter mais informaes sobre os modelos, consulte Captulo 11, Gerenciar modelos, na pgina 325.
3.
Selecione Site ou Favorites na parte superior do painel e, em seguida, escolha a propriedade a ser inserida. No h listas Site ou Favorites para os itens de biblioteca. Ignore essa etapa ao inserir um item de biblioteca.
4.
Arraste a propriedade do painel para o documento. Voc pode arrastar os scripts at a rea de contedo do cabealho na janela do documento. Se essa rea no estiver visvel, selecione View (Exibir) > Head Content (Contedo do cabealho).
Selecione a propriedade no painel e clique em Insert na parte inferior do painel.
A propriedade inserida no documento. Se a propriedade for uma cor, ela ser aplicada a partir do ponto de insero, ou seja, a digitao subseqente ser exibida nesta cor. Tpicos relacionados Aplicar uma URL a uma imagem ou um texto utilizando o painel Assets na pgina 184

Selecionar e editar as propriedades na pgina 184 Reutilizar propriedades em outro site na pgina 186
Aplicar uma cor ao texto utilizando o painel Assets

As cores no painel Assets representam as cores que voc aplicou a vrios elementos do site, como texto, borda da tabela, cor de fundo e assim por diante. possvel utilizar amostras de cores na categoria Color (Cores) para aplicar as opes de cores a objetos em uma pgina de maneira uniforme. Para obter mais informaes sobre como adicionar uma cor categoria Color, consulte Adicionar e remover propriedades da lista Favorites na pgina 188.
183
Para alterar a cor do texto selecionado em um documento:

1. 2.
Selecione o texto no documento. No painel Assets (Window > Assets) selecione a categoria Colors no lado esquerdo do painel. Selecione a cor desejada. Na parte inferior do painel, clique no boto Apply (Aplicar).
3. 4.

Selecionar e editar as propriedades na pgina 184 Reutilizar propriedades em outro site na pgina 186
Aplicar uma URL a uma imagem ou um texto utilizando o painel Assets

Voc pode utilizar o painel Assets para transformar o texto ou a imagem selecionada em um link ativo.
Para adicionar um link seleo atual em um documento:
1. 2.
Selecione o texto ou imagem em que deseja aplicar a URL. No painel Assets, em Window > Assets, selecione a categoria URLs no lado esquerdo do painel. Selecione a URL desejada. Siga um dos procedimentos abaixo:

3. 4.
Arraste a URL do painel para a seleo na visualizao do projeto. Selecione a URL e, em seguida, clique no boto Insert.

Aplicar uma cor ao texto utilizando o painel Assets na pgina 183 Reutilizar propriedades em outro site na pgina 186
Selecionar e editar as propriedades

O painel Assets permite selecionar vrias propriedades simultaneamente. Este painel tambm fornece um modo rpido de iniciar a edio das propriedades.
184
Para selecionar vrias propriedades:

1. 2.
No painel Assets, em Window > Assets, selecione uma das propriedades. Selecione as outras propriedades de uma das seguintes maneiras:

Pressione a tecla Shift e clique para selecionar uma srie consecutiva de propriedades. Pressione a tecla Control (no Windows) ou a tecla Command (no Macintosh) e clique para adicionar uma propriedade individual seleo (seja ela adjacente ou no seleo existente). Pressione a tecla Control ou Command e clique em uma propriedade escolhida para cancelar a sua seleo.
Para editar uma propriedade:

1.
No painel Assets (Window > Assets), selecione uma das propriedades.

Clique duas vezes na propriedade. Selecione a propriedade e, em seguida, clique no boto Edit (Editar) na parte inferior do painel.
No caso de alguns tipos de propriedades (imagens, por exemplo), a edio da propriedade ser iniciada em um aplicativo de edio externo. Quanto s cores e URLs, a edio da propriedade permite alterar o valor desta apenas na lista Favorites. As cores e URLs no podem ser editadas na lista Site. No caso dos modelos e itens de biblioteca, a edio da propriedade permite alter-la no Dreamweaver.
N OT A
Se no for aberto um editor externo para uma propriedade que deveria utiliz-lo, selecione Edit > Preferences (Preferncias) (no Windows) ou Dreamweaver > Preferences (no Macintosh), selecione a categoria File Types/Editors (Tipos de arquivos/editores) e certifique-se de que haja um editor externo definido para o tipo de arquivo da propriedade. Consulte Iniciar um editor de arquivos de mdia externo na pgina 521.
2. 3.
Altere a propriedade conforme desejar. Ao concluir a edio 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 edio na caixa de dilogo Edit URL (Editar URL). Se a propriedade for uma cor, o seletor de cores do Dreamweaver se fechar automaticamente quando uma cor for escolhida.
N O TA
Para desativar o seletor de cores sem escolher uma cor, pressione a tecla Esc.
185
Tpicos relacionados Exibir propriedades no painel Assets (Propriedades) na pgina 179
Atualizar o painel Assets na pgina 181
Reutilizar propriedades em outro site

O painel Assets mostra todas as propriedades (dos tipos reconhecidos) no site atual. Para utilizar uma propriedade do site atual em outro site, copie-a no outro site. possvel copiar uma propriedade individual, um conjunto de propriedades ou uma pasta Favorites inteira de uma s vez. Talvez voc precise localizar o arquivo no painel Files (Arquivos) que corresponde a uma propriedade no painel Assets antes de transferir a propriedade de ou para o site remoto.
N OT A
O painel Files pode exibir um site diferente daquele mostrado no painel Assets. Isso ocorre porque o painel Assets est associado ao documento ativo.
Para localizar um arquivo de propriedade no painel Files:

1.
No painel Assets, em Window > Assets, selecione, no lado esquerdo do painel, a categoria relativa ao tipo de propriedade a ser localizada. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e clique no nome da propriedade ou no cone correspondente no painel Assets. Em seguida, selecione Locate in Site (Localizar no site) no menu contextual.
N OT A
2.
A opo Locate in Site no est disponvel para cores e URLs que no correspondam a arquivos no site,
O painel Files exibido com o arquivo de propriedade selecionado. O comando Locate in Site localiza o arquivo correspondente propriedade, e no um arquivo que a utiliza.
186
Para copiar as propriedades da lista Site ou Favorites do painel Assets para outro site:
1.
No painel Assets (Window > Assets), selecione, no lado esquerdo do painel, a categoria relativa ao tipo de propriedade a ser copiada. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh), clique nas propriedades a serem copiadas e selecione Copy to Site (Copiar para o site). Em seguida, selecione o site de destino no submenu. O submenu listar todos os sites que o usurio tiver definido.
NO TA
2.
Na lista Favorites, possvel copiar uma pasta Favorites, bem como propriedades especficas. Para obter informaes sobre as pastas Favorites, consulte Agrupar as propriedades na pasta Favorites na pgina 191.
As propriedades so copiadas para o site especificado, para posies correspondentes s posies no site atual. O Dreamweaver cria novas pastas na hierarquia do site de destino como necessrio. As propriedades tambm so adicionadas lista Favorites do site especificado. Quando um documento for aberto no site de destino, o painel Assets alternar para esse site e exibir a propriedade copiada.
N OT A

Se a propriedade copiada for uma cor ou uma URL, ela aparecer na lista Favorites, e no na lista Site do outro site. Isso ocorre porque no h qualquer arquivo correspondente cor ou URL. Portanto, nenhum arquivo poder ser copiado no outro site.
Tpicos relacionados Exibir propriedades no painel Assets (Propriedades) na pgina 179 Atualizar o painel Assets na pgina 181 Selecionar e editar as propriedades na pgina 184
187
Criar e gerenciar uma lista de propriedades favoritas

Uma vez que a lista Site do painel Assets mostra todas as propriedades reconhecidas no site, essa lista torna-se muito longa no caso de alguns sites grandes. Voc pode adicionar as propriedades utilizadas com freqncia lista Favorites, agrupar as propriedades relacionadas, fornecer apelidos a elas que lembrem sua funo e localiz-las facilmente no painel Assets.
NO TA

As propriedades favoritas no so armazenadas como arquivos separados no disco rgido. Na verdade, so referncias de propriedades existentes na lista Site. O Dreamweaver controla quais propriedades da lista Site sero exibidas na lista Favorites.
A maioria das operaes do painel Assets a mesma nas listas Site e Favorites. Contudo, h vrias tarefas que podem ser executadas apenas na lista Favorites.
Adicionar e remover propriedades da lista Favorites

H vrias maneiras de adicionar propriedades lista Favorites no painel Assets. A adio de uma cor ou uma URL lista Favorites requer uma etapa extra. Observe que voc no pode adicionar cores ou URLs novas lista Site, que contm apenas as propriedades que j esto em uso no site.
N OT A 188
No h listas Favorites para os modelos e os itens de biblioteca.
Para adicionar propriedades lista Favorites, siga um destes procedimentos:
Selecione uma ou mais propriedades na lista Site do painel Assets e clique no boto Add to Favorites (Adicionar pasta Favoritos) na parte inferior do painel. Selecione uma ou mais propriedades na lista Site do painel Assets, clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e, em seguida, selecione Add to Favorites. Selecione um ou mais arquivos no painel Files, clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e, em seguida, selecione Add to Favorites. O Dreamweaver ignora os arquivos que no se enquadram em uma categoria no painel Assets.
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control (no Macintosh) pressionada e clique em um elemento na visualizao do projeto da janela do documento. Em seguida, selecione o comando no menu contextual para adicionar o elemento categoria Favorites apropriada. Observe que o menu contextual correspondente ao texto conter Add to Color Favorites (Adicionar pasta de cores favoritas) ou Add to URL Favorites (Adicionar pasta de URLs favoritas), dependendo do fato de haver ou no um link associado ao texto. Observe tambm que apenas os elementos que se enquadrarem em uma das categorias do painel Assets podero ser adicionados lista Favorites.
Para adicionar uma nova cor ou URL lista Favorites:

1.
No painel Assets, em Window > Assets, selecione a categoria Colors ou URLs no lado esquerdo do painel. Selecione a opo Favorites na parte superior do painel para exibir a lista Favorites. Na parte inferior do painel, clique no boto New Color (Nova cor) ou New URL (Nova URL). Siga um dos procedimentos abaixo
2. 3.
4.
Selecione uma cor utilizando o seletor de cores e, em seguida, d um apelido cor, se desejar (consulte Criar um apelido para uma propriedade favorita na pgina 190). Para sair do seletor de cores sem selecionar uma cor, pressione a tecla Esc ou clique na barra cinza, na parte superior do seletor. Para obter mais informaes sobre o uso do seletor de cores, consulte Trabalhar com cores na pgina 384.
Digite uma URL e um apelido na caixa de dilogo Add New URL (Adicionar nova URL) e, em seguida, clique em OK.
Para remover propriedades da lista Favorites :

1.
No painel Assets, em Window > Assets, selecione a opo Favorites na partes superior do painel. Selecione uma ou mais propriedades (ou uma pasta) na lista Favorites. Clique no boto Remove From Favorites (Remover da pasta Favoritos) na parte inferior do painel. As propriedades sero removidas da lista Favorites, mas ainda aparecero na lista Site. Se uma pasta Favorites for removida, essa pasta e todas as propriedades nela contidas sero excludas da lista Favorites.
2. 3.
Criar e gerenciar uma lista de propriedades favoritas
189
Criar um apelido para uma propriedade favorita na pgina 190
Criar um apelido para uma propriedade favorita

Voc pode fornecer apelidos para as propriedades da lista Favorites. 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_pgina ou cor_de_texto_importante. Voc pode fornecer apelidos para as propriedades da lista Favorites do painel Assets. Na lista Site, as propriedades so listadas pelos seus nomes de arquivos reais (ou seus valores, no caso das cores e URLs).
Para dar nomes s propriedades favoritas:
1.
No painel Assets, em Window > Assets, selecione a categoria no lado esquerdo do painel que contm a propriedade. Selecione a opo Favorites na parte superior do painel para exibir a lista Favorites. Siga um dos procedimentos abaixo:
2. 3.
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh), e clique no nome da propriedade ou no cone no painel Assets. Em seguida, escolha Edit Nickname (Editar o apelido). Clique uma vez no nome da propriedade, faa uma pausa e clique nele novamente.
4.
Digite um apelido para a propriedade, em seguida, pressione a tecla Enter (no Windows) ou Return (no Macintosh). O apelido aparecer na coluna Nickname (Apelido).
Adicionar e remover propriedades da lista Favorites na pgina 188
190
Agrupar as propriedades na pasta Favorites

Voc pode agrupar as propriedades da lista Favorites em pastas no painel Assets. Por exemplo: se houver um conjunto de imagens utilizadas em vrias pginas de catlogos em um site de comrcio eletrnico, elas podero ser agrupadas em uma pasta chamada Imagens_de_catlogo.
N OT A
A insero de uma propriedade em uma pasta de favoritos no altera a localizao do arquivo da propriedade no disco rgido.
Para criar uma pasta Favorites:

1.
No painel Assets, em Window > Assets, selecione a opo Favorites na parte superior do painel. Clique no boto New Favorites Folder (Nova pasta Favoritos) na parte inferior do painel. Digite um nome para a pasta e, em seguida, pressione a tecla Enter (no Windows) ou Return (no Macintosh). Arraste as propriedades para a pasta.
2. 3.
4.

Adicionar e remover propriedades da lista Favorites na pgina 188 Criar um apelido para uma propriedade favorita na pgina 190
Trabalhar com itens de biblioteca

As bibliotecas constituem uma maneira de armazenar elementos de pginas como, por exemplo, imagens, texto e outros objetos, que so reutilizados ou atualizados com freqncia em todo o site da Web. Estes elementos so denominados itens de biblioteca. Tpicos relacionados Sobre itens de biblioteca na pgina 177
Criar um item de biblioteca

possvel criar um item de biblioteca a partir de qualquer elemento da seo body de um documento, incluindo texto, tabelas, formulrios, applets Java, plug-ins, elementos ActiveX, barras de navegao e imagens.
191
No caso de itens vinculados, como as imagens, a biblioteca armazenar somente uma referncia 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, no utilize esta tcnica para alterar os atributos de width e height de uma imagem, a no ser que utilize tambm um editor de imagens para alterar o tamanho real da imagem.
Para criar um item de biblioteca baseado em uma seleo:
1.
Na janela do documento, selecione uma parte de um documento para salv-la como um item de biblioteca. Siga um dos procedimentos abaixo:

2.
Arraste a seleo at a categoria Library do painel Assets, em Window > Assets. Na parte inferior da categoria Library do painel Assets (Window > Assets), clique no boto New Library Item (Novo item de biblioteca). Selecione Modify (Modificar) > Library > Add Object to Library (Adicionar objeto biblioteca).
3.
Digite um nome para o novo item de biblioteca e, em seguida, pressione a tecla Enter (no Windows) ou Return (no Macintosh). O Dreamweaver salva cada item de biblioteca como um arquivo separado (com a extenso .lbi) na pasta Library da pasta raiz local do site.
Para criar um item de biblioteca vazio:

1.
Certifique-se de que no haja qualquer elemento selecionado na janela do documento. Se algum item for selecionado, a seleo ser colocada no novo item de biblioteca. No painel Assets (Window > Assets), selecione a categoria Library no lado esquerdo do painel. Na parte inferior do painel Assets, clique no boto New Library Item (Novo item de biblioteca). Um novo item sem ttulo adicionado lista de itens do painel. Enquanto o item estiver selecionado, digite um nome para ele e, em seguida, pressione Enter (no Windows) ou Return (no Macintosh).
2.
3.
4.
Tpicos relacionados Editar um item de biblioteca na pgina 194
Definir as preferncias de realce da biblioteca na pgina 197
192
Inserir um item de biblioteca em um documento

Quando um item de biblioteca for adicionado a uma pgina, o contedo atual ser inserido no documento juntamente com uma referncia ao item de biblioteca.
Para inserir um item de biblioteca em um documento:
1. 2.
Coloque o ponto de insero na janela do documento. No painel Assets, em Window > Assets, selecione a categoria Library no lado esquerdo do painel. Siga um dos procedimentos abaixo:
3.
Arraste um item de biblioteca do painel Assets para a janela do documento.

DICA
Para inserir o contedo de um item de biblioteca sem incluir no documento uma referncia a esse item, pressione a tecla Control (no Windows) ou Option (no Macintosh) enquanto arrasta um item para fora do painel Assets. Se inserir um item dessa forma, voc poder edit-lo no documento, mas o documento no ser atualizado quando voc atualizar as pginas que utilizam esse item de biblioteca.
Selecione um item de biblioteca e clique no boto Insert na parte inferior do painel.
193
Tpicos relacionados Criar um item de biblioteca na pgina 191

Editar as propriedades de um item de biblioteca na pgina 198 Tornar editveis os itens de biblioteca de um documento na pgina 198
Editar um item de biblioteca

Quando editar um item de biblioteca, voc poder atualizar todos os documentos que o utilizam. Se voc optar por no fazer uma atualizao, os documentos continuaro associados ao item de biblioteca e voc poder atualiz-los posteriormente. Outros tipos de alteraes em itens de biblioteca incluem a sua renomeao, para romper a conexo com os documentos ou modelos, a sua excluso da biblioteca do site e a recriao de um item de biblioteca perdido.
N OT A
O painel CSS Styles (Estilos CSS) no estar disponvel quando voc estiver editando um item de biblioteca, uma vez que esses itens podem conter apenas elementos body e o cdigo de folhas de estilos CSS inserido na seo head de um documento. A caixa de dilogo Page Properties (Propriedades da pgina) tambm no estar disponvel, pois um item de biblioteca no pode incluir uma tag body ou seus atributos.
Para editar um item de biblioteca:

1.
No painel Assets, em Window > Assets, selecione a categoria Library no lado esquerdo do painel. Selecione um item de biblioteca. A visualizao do item de biblioteca exibida na parte superior do painel Assets. No possvel editar os elementos da visualizao.
2.
3.

Na parte inferior do painel, clique no boto Edit (Editar). Clique duas vezes no item de biblioteca.
O Dreamweaver abrir uma nova janela para a edio do item de biblioteca. Essa janela semelhante a uma janela de documento, mas a sua visualizao do projeto tem um fundo cinza, indicando a edio de um item de biblioteca, e no de um documento.
4.
Edite o item de biblioteca e, em seguida, salve as alteraes.
194
5.
Na caixa de dilogo exibida, selecione se deseja atualizar os documentos do site local que utiliza o item de biblioteca editado:
Selecione Update (Atualizar) para atualizar todos os documentos do site local com o item de biblioteca editado. Selecione Dont Update (No atualizar) para evitar que os documentos sejam alterados at que voc utilize Modify > Library >Update Current Page (Atualizar a pgina atual) ou Update Pages (Atualizar pginas).
Para atualizar o documento atual de forma a utilizar a verso mais recente de todos os itens de biblioteca:
Selecione Modify > Library > Update Current Page.
Para atualizar o site inteiro ou todos os documentos que utilizarem um item de biblioteca especfico:
1.
Selecione Modify > Biblioteca > Update Pages. A caixa de dilogo Update Pages exibida. No menu pop-up Look In (Procurar em), siga um dos procedimentos abaixo:
2.
Selecione Entire Site (Site inteiro) e, em seguida, escolha o nome do site no menu pop-up adjacente. Este procedimento atualizar todas as pginas no site selecionado, para que utilizem a verso atual de todos os itens de biblioteca.
Selecione Files That Use (Arquivos que usam) e, em seguida, selecione um item de biblioteca no menu pop-up adjacente. Esse procedimento atualizar todas as pginas no site atual que utilizarem o item de biblioteca selecionado.
3.
Verifique se a opo Library Items (Itens de biblioteca) est selecionada na opo Update.
DICA
Para atualizar os modelos simultaneamente, verifique se a opo Templates tambm est selecionada. Para obter mais informaes, consulte Abrir um modelo para edio na pgina 359.
4.
Clique em Start (Iniciar). O Dreamweaver atualizar os arquivos conforme indicado. Se a opo Show Log (Mostrar registro) for selecionada, o Dreamweaver fornecer informaes sobre os arquivos que tentar atualizar, incluindo informaes sobre o xito em sua atualizao.
195
Para renomear um item de biblioteca:

1.
No painel Assets (Window > Assets), selecione a categoria Library no lado esquerdo do painel. Selecione o item de biblioteca a ser renomeado, faa uma pausa e, em seguida, clique nele novamente. Quando o nome se tornar editvel, digite um novo nome.
NO TA
2.
3.
Este mtodo funciona da mesma forma que a renomeao de um arquivo no Windows Explorer (no Windows) ou Finder (no Macintosh). Do mesmo modo que no Windows Explorer ou Finder, certifique-se de fazer uma pequena pausa entre os cliques. No clique duas vezes no nome, pois o item de biblioteca ser aberto para edio.
4. 5.
Clique em outro local ou pressione a tecla Enter (no Windows) ou Return (no Macintosh). O Dreamweaver perguntar se voc deseja atualizar os documentos que utilizam este item:

Para atualizar todos os documentos do site que utilizam esse item, clique em Update. Para evitar a atualizao de qualquer documento que utilize esse item, clique em Dont Update.
Para excluir um item de uma biblioteca:

1.
No painel Assets (Window > Assets), selecione a categoria Library no lado esquerdo do painel. Selecione o item de biblioteca a ser excludo. Siga um dos procedimentos abaixo:
2. 3.
Clique no boto Delete (Excluir) na parte inferior do painel e confirme que deseja excluir o item. Pressione a tecla Delete e confirme que deseja excluir o item.
Tenha cuidado ao excluir um item de biblioteca, pois no ser possvel utilizar o comando Undo (Refazer) para recuper-lo. No entanto, talvez voc possa recri-lo, como descrito no prximo procedimento.
O Dreamweaver remove o item de biblioteca, mas no altera o contedo dos documentos que utilizam esse item.
Para recriar um item de biblioteca ausente ou excludo:
1. 2.
Selecione uma instncia do item em um documento. Clique no boto Recreate (Recriar) do Property inspector (Inspetor de propriedades), em Window > Properties (Propriedades).
C UI D A D O 196

Tornar editveis os itens de biblioteca de um documento na pgina 198 Editar um comportamento em um item de biblioteca na pgina 199
Definir as preferncias de realce da biblioteca

A cor de realce dos itens de biblioteca pode ser personalizada, exibida ou ocultada, de acordo com a definio nas preferncias de realce.
Para alterar a cor de realce de itens de biblioteca:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida. Selecione a categoria Highlight (Realce) na lista esquerda. Clique na caixa de cor dos itens de biblioteca e selecione a cor de realce utilizando o seletor de cores ou digite o valor hexadecimal correspondente cor de realce na caixa de texto. Para obter informaes sobre como utilizar o seletor de cores, consulte Trabalhar com cores na pgina 384.
2. 3.
4. 5.
Selecione Show (Mostrar) para exibir a cor da biblioteca realada na janela do documento. Clique em OK.
Para exibir cores de realce na janela do documento:
Selecione View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis). As cores de realce aparecero na janela do documento apenas quando a opo View > Visual Aids> Invisible Elements for ativada e as opes apropriadas estiverem ativas nas preferncias de realce.

Editar um item de biblioteca na pgina 194 Editar as propriedades de um item de biblioteca na pgina 198
197
Editar as propriedades de um item de biblioteca

Voc pode utilizar o Property inspector de um item de biblioteca para abrir esse item e editlo, desanexar um item de biblioteca selecionado do arquivo de origem, ou sobregravar um item com o item de biblioteca selecionado no momento.
Para editar as propriedades de um item de biblioteca:
1. 2.
Selecione um item de biblioteca em um documento. Clique em um dos botes do Property Inspector, em Window > Properties, dependendo do que voc deseja fazer. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.

Inserir um item de biblioteca em um documento na pgina 193 Definir as preferncias de realce da biblioteca na pgina 197
Tornar editveis os itens de biblioteca de um documento

Se tiver adicionado um item de biblioteca ao documento e desejar edit-lo especificamente em uma pgina, ser necessrio romper o link entre o item do documento e a biblioteca. Quando a instncia do item de biblioteca tornar-se editvel, essa instncia no poder ser atualizada quando o item de biblioteca tiver sido modificado.
Para tornar editvel um item de biblioteca:
1. 2.
Selecione um item de biblioteca no documento atual. No Property Inspector, em Window > Properties, clique em Detach from Original (Desanexar do original). A instncia selecionada do item de biblioteca perder a cor de realce (se esta estiver visvel) e no poder mais ser atualizada quando o item de biblioteca original for alterado.

Inserir um item de biblioteca em um documento na pgina 193 Editar um item de biblioteca na pgina 194 Editar as propriedades de um item de biblioteca na pgina 198
198
Editar um comportamento em um item de biblioteca

Para editar o comportamento de um item de biblioteca, voc deve primeiramente inseri-lo em um documento e, em seguida, tornar o item editvel no documento. Depois de fazer as alteraes desejadas, possvel recriar o item de biblioteca substituindo o item na biblioteca pelo item editado do documento. Para obter mais informaes sobre os comportamentos, consulte Utilizar comportamentos JavaScript na pgina 541.
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 contm. Voc precisar dessas informaes mais tarde.
2.
Selecione o item de biblioteca e, em seguida, clique em Detach from Original no Property inspector, em Window > Properties. Selecione o elemento que contm o comportamento anexado. No painel Behaviors (Comportamentos) (Window> Behaviors), clique duas vezes na ao que deseja alterar. Na caixa de dilogo que aparecer, faa as alteraes necessrias e clique em OK. No painel Assets (Window > Assets), selecione a categoria Library no lado esquerdo do painel. Registre o nome exato do item de biblioteca original; selecione o item de biblioteca original e, em seguida, clique no boto Delete (Excluir), na parte inferior do painel. Na janela do documento, selecione todos os elementos que compem o item de biblioteca. Selecione exatamente os mesmos elementos contidos no item de biblioteca original. No painel Assets, clique no boto New Library Item (Novo item de biblioteca) e atribua ao novo item o mesmo nome do item que foi excludo. Certifique-se de utilizar exatamente a mesma grafia e caixa alta ou baixa. atualizar o item de biblioteca nos outros documentos do site, selecione Modify >Library > Update Pages. Na caixa de dilogo Update Pages, no menu pop-up Look In, selecione Files That Use. menu pop-up adjacente, selecione o nome do item de biblioteca que acaba de criar.
3. 4.
5. 6.
7.
8.
9.
10. Para
11.
12. No
199
13.
Na opo Update, certifique-se de que os itens de Library estejam selecionados e, em seguida, clique em Start (Iniciar). tiver concludo as atualizaes, clique em Close (Fechar) para sair da caixa de dilogo Update Pages.
14. Quando

Inserir um item de biblioteca em um documento na pgina 193 Editar um item de biblioteca na pgina 194
200
CAPTULO 6
Gerenciar sites do Contribute com o Dreamweaver

O Macromedia Contribute combina um navegador e um editor de pginas da Web bsico. Ele permite que seus colegas ou clientes naveguem em uma pgina de um site que voc criou, e editem ou atualizem a pgina se tiverem permisso para isso. Os usurios do Contribute podem adicionar e atualizar contedo bsico da Web, incluindo texto formatado, imagens, tabelas e links. Os administradores do site do Contribute podem limitar o que os usurios comuns (no-administradores) tm permisso para fazer em um site.
NO T A
Este captulo pressupe que voc um administrador do Contribute.
Como administrador do site, voc concede queles que no so administradores a capacidade de editar pginas ao criar uma chave de conexo e enviando-a para eles. (Para obter mais informaes, consulte Using Contribute.) Voc tambm pode configurar uma conexo com um site do Contribute utilizando o Macromedia Dreamweaver 8, que permite que voc ou outro usurio modifique os arquivos do site como faria em qualquer outro site do Dreamweaver. Isto pode ser til para as pessoas que desejam se conectar ao seu site do Contribute, mas que desejam faz-lo utilizando o Dreamweaver e no o Contribute. Por exemplo, seu designer de sites gostaria de se conectar ao site do Contribute, mas tendo todos os recursos de edio disponveis no Dreamweaver. O Contribute adiciona funcionalidade ao seu site da Web com o CPS (Servidor de publicao do Contribute, Contribute Publishing Server), um conjunto de aplicativos de publicao e ferramentas de gerenciamento de usurios que permite integrar o Contribute ao servio de diretrio de usurios da sua empresa por exemplo, o protocolo LDAP (Lightweight Directory Access Protocol) ou o Active Directory. Quando voc ativar o site do Dreamweaver como um site do Contribute, o Dreamweaver ler as configuraes administrativas do Contribute sempre que voc se conectar ao site remoto. Se o Dreamweaver detectar que o CPS est ativo, ele se comunicar diretamente com o CPS. Isso permite que o Dreamweaver herde algumas das funcionalidades do CPS, como reverso de arquivos e registro de eventos.
201

Sobre o gerenciamento de sites do Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Preparar um site para utilizar com o Contribute. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .207 Administrar um site do Contribute utilizando o Dreamweaver . . . . . . . . . . . . . . . . 208 Gerenciar arquivos do Contribute utilizando o Dreamweaver . . . . . . . . . . . . . . . . . 210 Solucionar problemas de um site do Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Sobre o gerenciamento de sites do Contribute

Voc pode se conectar a um site do Dreamweaver por meio do Contribute e modificar os arquivos do site como faria em qualquer site do Dreamweaver. A maioria das funcionalidades do Dreamweaver funciona to bem em um site do Contribute quanto em qualquer outro site. Existem apenas alguns aspectos do trabalho com arquivos em um site do Contribute diferentes do trabalho com arquivos em outros sites.
Estrutura de site e projeto de pgina de um site do Contribute

Para preparar seu site da Web para ser editado pelos usurios do Contribute, organize o site adequadamente. Crie as pastas que os usurios do Contribute devero utilizar em suas pginas, crie pginas de ndice para essas pastas e acrescente navegao bsica s pginas. Talvez seja preciso criar pastas especficas para que os usurios possam praticar. Voc tambm pode criar folhas de estilo CSS que definam os estilos para cada pgina ou pasta. possvel executar algumas dessas tarefas de configurao no Contribute, mas mais fcil configurar um site utilizando o Dreamweaver. Alm disso, possvel criar modelos que os usurios do Contribute podem utilizar para criar novas pginas (consulte Criar modelos para um site do Contribute na pgina 344). As sugestes a seguir podem ajudar a criar um site com o qual os usurios do Contribute podero contribuir facilmente:
Mantenha a estrutura do site simples. No aninhe pastas demasiadamente. Agrupe itens relacionados em uma pasta. Configure adequadamente as permisses de leitura e gravao das pastas no servidor. Para obter mais informaes, consulte Permitir aos usurios do Contribute o acesso a modelos sem acessar a pasta raiz na pgina 212.
202
Captulo 6: Gerenciar sites do Contribute com o Dreamweaver
medida que criar uma estrutura de pastas, adicione pginas de ndice s pastas para incentivar os usurios do Contribute a inserir as novas pginas nas pastas corretas. Por exemplo: se os usurios do Contribute fornecerem pginas contendo atas de reunio, possvel criar uma pasta na pasta raiz do site denominada atas_reuniao e criar uma pgina de ndice naquela pasta. Em seguida, voc pode fornecer um link da pgina principal de seu site para a pgina de ndice para as atas de reunio. O usurio do Contribute poder ento navegar naquela pgina de ndice e criar uma pgina nova de atas para uma reunio especfica vinculadas quela pgina; a nova pgina criada automaticamente dentro da pasta atas_reuniao.
Na pgina de ndice de cada pasta, fornea uma lista de links s pginas de contedo individuais e documentos naquela pasta. Mantenha o design da pgina o mais simples possvel, evitando qualquer formatao mais complexa. Nomeie os estilos CSS corretamente. Se os usurios do Contribute que estiverem trabalhando em seu site utilizarem um conjunto de estilos padro do Microsoft Word, nomeie os estilos CSS com os mesmos nomes que os estilos do Word correspondentes, de forma que o Contribute possa mapear os estilos quando um usurio copiar informaes de um documento do Word e col-lo em uma pgina do Contribute.
Para evitar que um estilo CSS fique disponvel para os usurios do Contribute, altere o nome do estilo de modo que o nome inicie com mmhide_ . Por exemplo, se voc utilizar um estilo denominado JustificadoDireita em uma pgina, mas no desejar que os usurios do Contribute tenham acesso a esse estilo, renomeie o estilo para mmhide_JustificadoDireita.
N OT A
Voc precisa adicionar mmhide_ ao nome do estilo na visualizao do cdigo; no possvel adicion-lo no painel CSS.
Utilize CSS em vez de tags HTML. O Contribute reconhece os estilos CSS e permite que eles sejam aplicados pelos usurios. Use o menor nmero possvel de estilos CSS, para manter o design de pginas simples e organizado. Se voc utilizar incluses de servidor para elementos de pgina HTML, como cabealhos ou rodaps, crie uma pgina HTML simples e desvinculada que contenha links para os arquivos de incluso. Os usurios do Contribute podero ento marcar essa pgina e utiliz-la para navegar at os arquivos de incluso e edit-los.
203
Tpicos relacionados Captulo 2, Configurar um site do Dreamweaver, na pgina 87

Criar novos documentos na pgina 102 Utilizar a opo Cascading Style Sheets (Folha de estilo em cascata) para formatar texto na pgina 433 Trabalhar com incluses do servidor na pgina 652
Conexo de site para compatibilidade com o Contribute

No Dreamweaver, voc pode se conectar a um site do Contribute existente e modificar os arquivos nesse site como faria em qualquer site do Dreamweaver (Configurar um novo site do Dreamweaver na pgina 90). Quando voc se conectar a um site configurado como um site do Contribute, que j tenha um administrador, o Dreamweaver solicitar a ativao da compatibilidade do Contribute. Se voc estiver preparando um site existente do Dreamweaver para os usurios do Contribute, precisar ativar explicitamente a compatibilidade do Contribute para usar recursos relacionados ao Contribute; o Dreamweaver no solicitar a ativao. Para obter mais informaes, consulte Preparar um site para utilizar com o Contribute na pgina 207. O Dreamweaver permite a conexo a um site remoto (inclusive a um site do Contribute) de diversas formas, mas nem todos os tipos de conexo suportam a compatibilidade do Contribute. Em especial, as restries a seguir so aplicveis aos tipos de conexo:
Se voc estiver se conectando a um site remoto por meio do WebDAV ou SourceSafe, no poder ativar a compatibilidade do Contribute, uma vez que os sistemas de controle de origem no so compatveis com as Design Notes e os sistemas de devoluo/retirada que o Dreamweaver utiliza para sites do Contribute. Se voc utilizar o RDS para conectar-se ao site remoto, possvel ativar a compatibilidade do Contribute, mas necessrio personalizar sua conexo antes de compartilh-la com usurios do Contribute. Se seu servidor da Web for um computador local, voc precisar configurar o site utilizando uma conexo FTP ou de rede com o seu computador (em vez de um caminho de pasta local apenas) para poder compartilhar sua conexo com os usurios do Contribute.
204
Transferncia de arquivos de e para um site do Contribute

O Contribute utiliza um sistema semelhante ao sistema Check In/Check Out (Devolver/ retirar) do Dreamweaver para assegurar que somente um usurio por vez possa editar determinada pgina da Web. Quando voc ativar a compatibilidade do Contribute no Dreamweaver, o sistema Check In/Check Out do Dreamweaver ser ativado automaticamente. Para transferir arquivos de e para um site do Contribute por meio do Dreamweaver, utilize sempre os comandos Check In (Devolver) e Check Out (Retirar). Se os comandos Put (Colocar) e Get (Obter) forem utilizados para transferir arquivos, possvel sobregravar a modificao que o usurio do Contribute acabou de fazer em um arquivo.
NO T A
Se o comando Put for utilizado em um site do Contribute, o Dreamweaver verificar o arquivo automaticamente e retirar esse arquivo novamente, para evitar que as alteraes entrem em conflito com as de outros usurios.
A retirada de um arquivo de um site Contribute funciona da mesma maneira que em qualquer outro site. Ao devolver um arquivo a um site Contribute, o Dreamweaver efetua uma cpia de backup automtico da verso do arquivo devolvido anteriormente na pasta _baks e adiciona o nome do usurio e um registro temporal a um arquivo do Design Notes, de modo que outros usurios possam visualizar quem retornou o arquivo e quando. Para obter mais informaes sobre cpias de backup, consulte Permitir aos usurios do Contribute o acesso a modelos sem acessar a pasta raiz na pgina 212. Tpicos relacionados Devolver e retirar arquivos na pgina 148 Preparar um site para utilizar com o Contribute na pgina 207
Permisses de arquivos e pastas do Contribute no servidor

O Contribute oferece uma maneira de gerenciar permisses de arquivo e pasta para cada funo de usurio definida. Para obter mais informaes, consulte Administering Contribute. Os usurios do Dreamweaver no so afetados por essas permisses, mas o Contribute executar as permisses para os usurios do Contribute.
205
No entanto, o Contribute no oferece uma maneira de gerenciar as permisses de leitura e gravao atribudas a arquivos e pastas pelo servidor. possvel gerenciar essas permisses diretamente no servidor. possvel imaginar as funes de usurio do Contribute como uma camada das permisses de leitura e gravao do servidor. Por exemplo, se um usurio no tiver permisso de gravao em uma pasta no servidor, ele no poder salvar nada nessa pasta, mesmo que seja membro de uma funo com autorizao para gravar na pasta (de acordo com as permisses do Contribute). Se um usurio do Contribute no tiver acesso de leitura no servidor a um arquivo dependente, como uma imagem exibida em uma pgina, o contedo do arquivo dependente no aparecer na janela do Contribute. Por exemplo, se um usurio no tiver acesso de leitura a uma pasta de imagens, as imagens dessa pasta aparecero como cones de imagens rompidos no Contribute. Do mesmo modo, os modelos do Dreamweaver so armazenados em uma subpasta da pasta raiz do site. Por isso, se um usurio do Contribute no tiver acesso de leitura pasta raiz, no poder utilizar os modelos desse site, a menos que voc copie os modelos para uma pasta apropriada. Ao criar um site, voc deve oferecer acesso de leitura a usurios no servidor para a pasta /_mm (a subpasta _mm na pasta raiz), pasta /Templates (Modelos) e todas as pastas contendo propriedades que os usurios podem necessitar. Se, por algum motivo, no for possvel conceder aos usurios o acesso de leitura pasta / Templates, consulte Permitir aos usurios do Contribute o acesso a modelos sem acessar a pasta raiz na pgina 212 para fornecer modelos aos usurios.
Arquivos especiais do Contribute

O Contribute utiliza vrios arquivos especiais que no devem ser visualizados pelos visitantes do site. Esses arquivos tambm possibilitam as seguintes aes:
O arquivo de configurao compartilhado, que possui um nome ofuscado com uma extenso CSI, aparece em uma pasta denominada _mm na pasta raiz do site, e contm informaes que o Contribute utiliza para gerenciar o site Verses antigas dos arquivos, em pastas denominadas _baks (consulte Permitir aos usurios do Contribute o acesso a modelos sem acessar a pasta raiz na pgina 212) Verses temporrias de pginas, de modo que os usurios podem visualizar as alteraes Arquivos temporariamente bloqueados, indicando que uma determinada pgina est sendo editada ou visualizada Arquivo de Design Notes contendo metadados sobre as pginas do site
206
Em geral, voc no deve editar esses arquivos especiais do Contribute utilizando o Dreamweaver; o Dreamweaver gerencia-os automaticamente. Para que esses arquivos especiais do Contribute no apaream no servidor acessvel ao pblico, voc pode configurar um servidor temporrio em que os usurios do Contribute possam trabalhar com as pginas. Em seguida, possvel copiar periodicamente essas pginas da Web do servidor temporrio a um servidor de produo na Web. Se este mtodo de servidor temporrio for utilizado, copie somente as pginas da Web ao servidor de produo, mas no os arquivos especiais do Contribute relacionados acima. Em especial, no copiar as pastas _mm e _baks ao servidor de produo.
NO TA N OT A
Para obter informaes sobre como configurar um servidor para evitar que os visitantes vejam arquivos nas pastas que comeam com sublinhado, consulte Segurana do site em Using Contribute.
Em alguns casos, pode ser necessrio excluir manualmente arquivos especiais do Contribute. Por exemplo: pode haver casos em que o Contribute no conseguir excluir pginas de visualizao temporrias quando o usurio terminar de visualizar as pginas. Nesse caso, ser necessrio excluir manualmente essas pginas temporrias. As pginas de visualizao temporrias tm nomes de arquivo que iniciam com TMP. Do mesmo modo, em alguns casos, um arquivo de bloqueio desatualizado poder ser mantido acidentalmente no servidor. Se isto ocorrer, preciso excluir manualmente o arquivo de bloqueio para permitir que outros usurios possam editar a pgina. Para obter mais informaes sobre como excluir arquivos bloqueados, consulte Desbloquear um arquivo em um site do Contribute na pgina 213.
Preparar um site para utilizar com o Contribute

Antes de utilizar o Dreamweaver para administrar um site do Contribute , ative a compatibilidade do Contribute. Dependendo do site ao qual est se conectando, voc poder ser automaticamente solicitado a ativar a compatibilidade do Contribute .
Quando voc ativa a compatibilidade do Contribute, o Dreamweaver ativa automaticamente as Design Notes, incluindo a opo Upload Design Notes for Sharing (Carregar as Design Notes para compartilhamento), e o sistema de Check In/Check Out (Devolver/retirar).
Preparar um site para utilizar com o Contribute
207
Para ativar os recursos de compatibilidade do Contribute para um site definido do Dreamweaver:

1.
Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. Selecione um site e, em seguida, clique em Edit (Editar). A caixa de dilogo Site Definition (Definio do site) exibida. Clique na guia Advanced (Avanado). Selecione a categoria do Contribute na lista Category (Categoria) esquerda. Selecione a opo Enable Contribute Compatibility (Ativar compatibilidade do Contribute) e preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda). Clique em OK para fechar a caixa de dilogo Site Definition. Clique em Done (Concludo) para fechar a caixa de dilogo Manage Sites.
2.
3. 4. 5.
6. 7.
Tpicos relacionados Conexo de site para compatibilidade com o Contribute na pgina 204
Administrar um site do Contribute utilizando o Dreamweaver

Aps ativar a compatibilidade do Contribute (consulte Preparar um site para utilizar com o Contribute na pgina 207), voc poder utilizar o Dreamweaver para iniciar o Contribute e executar tarefas de administrao do site.
NO T A

O Contribute e o Dreamweaver devem estar instalados na mesma mquina.
Como administrador de um site do Contribute, voc pode executar qualquer uma destas tarefas: Alterar as configuraes administrativas do site inteiro. As configuraes administrativas do Contribute so uma coleo de configuraes que se aplicam a todos os usurios do site da Web. Essas configuraes permitem que voc faa o ajuste fino do Contribute a fim de fornecer uma melhor experincia ao usurio. Alterar as permisses concedidas s funes de usurio do Contribute.
208
Configurar os usurios do Contribute. Os usurios do Contribute precisam de certas informaes sobre o site para poder se conectar a ele: possvel agrupar todas essas informaes em um arquivo chamado chave de conexo para enviar para os usurios do Contribute.
NO T A DICA
Uma chave de conexo no o mesmo que um arquivo do site do Dreamweaver exportado. Para exportar informaes sobre um site para utilizar com o Dreamweaver, consulteImportar e exportar sites na pgina 147. Antes de fornecer aos usurios do Contribute as informaes de conexo necessrias para editar pginas, utilize o Dreamweaver para criar a hierarquia de pastas bsicas para o site (consulte Estrutura de site e projeto de pgina de um site do Contribute na pgina 202) e para criar todas as folhas de estilos CSS e os modelos necessrios para o site (consulte Criar modelos para um site do Contribute na pgina 344).
Para administrar um site do Contribute na Web no Dreamweaver:

1.
Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. Selecione um site e, em seguida, clique em Edit (Editar). A caixa de dilogo Site Definition (Definio do site) exibida. Clique na guia Advanced (Avanado). Selecione uma categoria do Contribute na lista de categorias esquerda. Clique no boto Administer Site in Contribute (Administrar site no Contribute).
N OT A
2.
3. 4. 5.
Esse boto no ser exibido se voc no tiver ativado a compatibilidade do Contribute. Para obter informaes sobre como ativar esta opo, consulte Preparar um site para utilizar com o Contribute na pgina 207.
6.
Se solicitado, digite a senha de administrador e clique em OK. A caixa de dilogo Administer Website (Administrar site da Web) exibida. Siga qualquer um dos procedimentos abaixo:
7.
Para alterar as configuraes administrativas, selecione uma categoria na lista esquerda e depois altere as configuraes conforme a necessidade. Para alterar as configuraes de funo, na categoria Users and Roles (Usurios e funes), clique no boto Edit Role Settings (Editar configuraes de funo) e depois faa alteraes segundo a necessidade.
Administrar um site do Contribute utilizando o Dreamweaver
209
Para enviar uma chave de conexo para configurar usurios, na categoria Users and Roles, clique no boto Send Connection Key (Enviar chave de conexo) e preencha o Connection Wizard (Assistente de conexo).
DICA
Para obter mais informaes sobre as configuraes administrativas, gerenciamento de funes de usurio e criao de uma chave de conexo, consulte Using Contribute.
8. 9.
Clique em Close (Fechar) para fechar a caixa de dilogo Administer Website. Clique em OK para fechar a caixa de dilogo Site Definition. em Done (Concludo) para fechar a caixa de dilogo Edit Sites (Editar sites).
10. Clique
Tpicos relacionados Gerenciar arquivos do Contribute utilizando o Dreamweaver na pgina 210
Gerenciar arquivos do Contribute utilizando o Dreamweaver

A maioria das funcionalidades do Dreamweaver funciona to bem em um site do Contribute quanto em qualquer outro site. No entanto, ao utilizar o Dreamweaver com um site do Contribute, o Dreamweaver realiza automaticamente determinadas operaes de gerenciamento de arquivos, como salvar mltiplas revises de um documento e registrar certos eventos no console do CPS. Esta seo descreve os aspectos do trabalho com arquivos em um site do Contribute que diferem em relao a outros sites. Para obter informaes sobre a transferncia de arquivos de e para um site do Contribute, consulte Transferncia de arquivos de e para um site do Contribute na pgina 205. Para obter informaes sobre arquivos especiais do Contribute, consulte Arquivos especiais do Contribute na pgina 206.
N O TA 210
Um administrador do Contribute pode designar usurios a funes e pode especificar quais aes os membros de cada funo podem executar. Ao utilizar o Dreamweaver para gerenciar arquivos em um site do Contribute, as restries baseadas em funes no so aplicveis no seu caso; as nicas restries aplicveis so as permisses de leitura e gravao no servidor. Para obter mais informaes sobre os diferentes tipos de permisses, consulte Permisses de arquivos e pastas do Contribute no servidor na pgina 205.
Excluir, mover ou renomear um arquivo remoto em um site do Contribute

Excluir um arquivo do servidor remoto que est hospedando um site Contribute quase o mesmo que excluir um arquivo do servidor em qualquer site Dreamweaver. No entanto, ao excluir um arquivo de um site Contribute, o Dreamweaver perguntar se voc deseja excluir todas as verses anteriores do arquivo. Se voc desejar manter as verses anteriores, o Dreamweaver salvar tambm uma cpia da verso atual, para que seja possvel recuper-la mais tarde. Renomear um arquivo ou mov-lo de uma pasta para outra em um site Contribute funciona da mesma maneira como em qualquer site Dreamweaver. Em um site do Contribute, o Dreamweaver tambm renomeia ou move as verses anteriores do arquivo correspondentes salvas na pasta _baks.
Para excluir um arquivo remoto:
1.
Selecione o arquivo na janela remota do painel Files (Arquivos), em Window (Janela) > Files, e pressione Backspace (Windows) ou Delete (Macintosh). Ser exibida uma caixa de dilogo perguntando se voc deseja excluir o arquivo. Se a opo Delete Rollback Versions (Excluir verses anteriores) aparecer na caixa de dilogo de confirmao, siga um destes procedimentos:
2.
Para excluir todas as verses anteriores do arquivo, bem como da verso atual, selecione a opo Delete Rollback Versions. Para manter as verses anteriores do servidor, desmarque a opo Delete Rollback Versions.
3.
Clique em Yes (Sim) para excluir o arquivo. O arquivo ser excludo. Se voc optar por excluir as verses anteriores, elas tambm sero excludas. Se voc preferir no excluir as verses anteriores, uma cpia da verso atual ser salva na pasta _baks como uma nova reviso do arquivo.
Tpicos relacionados Permitir aos usurios do Contribute o acesso a modelos sem acessar a pasta raiz na pgina 212
Desbloquear um arquivo em um site do Contribute na pgina 213
211
Permitir aos usurios do Contribute o acesso a modelos sem acessar a pasta raiz
Em um site do Contribute, voc gerencia permisses de arquivo e pasta subjacentes diretamente no servidor. Para obter mais informaes, consulte Permisses de arquivos e pastas do Contribute no servidor na pgina 205. Ao configurar um site, seria adequado oferecer acesso de leitura a usurios no servidor para a pasta /_mm (a subpasta _mm na pasta raiz), pasta /Templates (Modelos) e todas as pastas contendo propriedades de que os usurios podem necessitar. Tambm aconselhvel dar aos usurios acesso de leitura no servidor para a pasta /Templates. Mesmo se, por algum motivo, no for possvel conceder aos usurios o acesso de leitura pasta /Templates, voc poder tornar os modelos disponveis para eles.
Para permitir que os usurios do Contribute utilizem modelos sem acesso de leitura pasta raiz do site principal:
1.
Configure o site do Contribute de modo que a pasta raiz seja a pasta a ser visualizada pelos usurios como raiz. Copie manualmente a pasta de modelos da pasta raiz do site principal para a pasta raiz do site do Contribute utilizando o painel Files (Arquivos). Aps atualizar os modelos do site principal, copie novamente os modelos modificados em subpastas apropriadas, conforme necessrio.
2.
3.
Se este mtodo for utilizado, no utilize os links relativos ao site raiz nas subpastas. Os links relativos raiz do site so relativos pasta raiz principal do servidor, no pasta raiz definida no Dreamweaver. Os usurios do Contribute no podem criar links relativos raiz do site. Para obter mais informaes sobre links relativos raiz do site, consulte Localizaes e caminhos dos documentos na pgina 462. Se os links em uma pgina do Contribute parecerem rompidos, possvel que haja um problema com as permisses da pasta, especialmente se os links levarem a pginas que estiverem fora da pasta raiz do usurio do Contribute. Verifique as permisses de leitura e gravao das pastas no servidor.
212
Desbloquear um arquivo em um site do Contribute

s vezes, um arquivo remoto em um site do Contribute parece ter sido retirado, mas, na verdade, ele est bloqueado no computador do usurio. Quando isso ocorrer, desbloqueie o arquivo para que os usurios possam edit-lo.
NO TA
Para seguir esse procedimento, certifique-se de que o arquivo tenha sido realmente retirado. Se um arquivo for desbloqueado enquanto um usurio do Contribute o estiver editando, diversos usurios podero editar o arquivo ao mesmo tempo.
Para desbloquear a retirada de um arquivo:

1.
Abra o arquivo na janela Document (Documento) e, em seguida, selecione Site > Undo Check Out (Desfazer a retirada). No painel Files (Arquivos), em Window (Janela) > Files, clique com o boto direito do mouse (no Windows) ou pressione a tecla Control (no Macintosh) e, em seguida, selecione Undo Check Out.
Uma caixa de dilogo pode ser exibida indicando quem retirou o arquivo e solicitando que voc confirme se deseja desbloque-lo.
2.
Se a caixa de dilogo for exibida, clique em Yes (Sim) para confirmar. O arquivo ser desbloqueado no servidor.
Registrar eventos
Se o CPS (Servidor de publicao do Contribute, Contribute Publishing Server) estiver ativado no site remoto ao qual voc est se conectando, o Dreamweaver enviar uma notificao ao CPS sempre que voc disparar uma operao de rede como devoluo, reverso ou publicao de um arquivo. O CPS registrar esses eventos, e voc poder visualizar o registro no console de administrao do CPS.
NO T A
O CPS ativado com o Contribute. Para obter mais informaes, consulte Administering Contribute.
Para iniciar o registro de eventos:
Ative os recursos de compatibilidade do Contribute no Dreamweaver. Para obter mais informaes, consulte Preparar um site para utilizar com o Contribute na pgina 207.
213
Para exibir o registro de eventos:
Alterne para o console de administrao do CPS. Para obter mais informaes, consulte Administering Contribute.
Para interromper o registro de eventos:
Desative os recursos de compatibilidade do Contribute.
Solucionar problemas de um site do Contribute

Se voc encontrar um problema em um site doContribute, consulte os tpicos especficos a seguir para obter informaes sobre como solucionar o problema:
Para problemas relacionados a um site do Contribute, consulte Soluo de problemas de conexo em um site do Contribute na pgina 214. Para problemas de uso das ferramentas de administrao, consulte Soluo de problemas de ferramentas administrativas do Contribute na pgina 215.
Para obter mais informaes sobre soluo de problemas, consulte a seo de soluo de problemas em Administrar o Contribute.
Soluo de problemas de conexo em um site do Contribute

Quando voc clica em qualquer boto relacionado administrao do site do Contribute, o Dreamweaver verifica se possvel conectar-se ao site remoto e se a opo Site Root URL (URL raiz do site) fornecida para o site vlida. Se o Dreamweaver no puder se conectar ou se a URL no for vlida, ser exibida uma mensagem de erro.
Para verificar uma conexo ao Contribute:
1.
Verifique a opo Site Root URL na categoria Contribute da caixa de dilogo Site Definition (Definio de site) abrindo essa URL em um navegador para certificar-se de que a pgina correta seja aberta. Utilize o boto Test (Testar) na categoria Remote Info (Informaes remotas) da caixa de dilogo Site Definition para se certificar de que possvel estabelecer conexo com o site. Se a URL estiver correta mas o boto Test resultar em uma mensagem de erro, pea ajuda ao administrador do sistema.
2.
3.
214
Soluo de problemas de ferramentas administrativas do Contribute

Se as ferramentas administrativas no estiverem funcionando corretamente, talvez haja um problema na pasta _mm.
Para verificar a pasta _mm:
1.
No servidor, assegure-se de que existe permisso de leitura e gravao, alm de permisses executveis, se necessrio, para a pasta _mm Verifique se a pasta _mm contm um arquivo de configuraes compartilhadas com uma extenso CSI. Se no contiver, utilize o Connection Wizard (Assistente de conexo) (no Windows) ou Connection Assistant (Assistente de conexo) (no Macintosh) para criar uma conexo ao site e tornar-se um administrador do site. O arquivo de configurao compartilhado criado automaticamente ao se tornar um administrador. Para obter mais informaes sobre como tornar-se um administrador para um site do Contribute j existente, consulte Administering Contribute.
2.
3.
Tpicos relacionados Soluo de problemas de conexo em um site do Contribute na pgina 214
Solucionar problemas de um site do Contribute
215
216
PARTE 3
Criar layouts de pgina

Utilize as ferramentas de projeto visual do Macromedia Dreamweaver 8 para criar layouts de pgina sofisticados. Esta seo contm os seguintes captulos:
Captulo 7: Criar layouts de pginas com CSS . . . . . . . . . . . . . . . 219 Captulo 8: Apresentar contedo com tabelas. . . . . . . . . . . . . . . 257 Captulo 9: Criao de pginas no modo Layout . . . . . . . . . . . . 283 Captulo 10: Utilizao de quadros . . . . . . . . . . . . . . . . . . . . . . . . . 303 Captulo 11: Gerenciar modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
217
CAPTULO 7
Criar layouts de pginas com CSS

No Macromedia Dreamweaver 8, voc pode utilizar estilos CSS para definir o layout das pginas. Voc pode inserir tags div manualmente e aplicar os estilos de posicionamento CSS a elas, ou utilizar as camadas do Dreamweaver para criar um layout. No Dreamweaver, uma camada um elemento da pgina HTML especificamente uma tag div ou qualquer outra tag qual foi atribuda uma posio absoluta.
N OT A DICA NO TA
O Dreamweaver trata como camadas todas as tags div com posio absoluta, mesmo que voc no tenha criado essas tags div utilizando a ferramenta de desenho Layer.
Voc pode utilizar um arquivo de projetos do Dreamweaver como um ponto de partida para o layout CSS. Na categoria Page Designs (CSS) (Projetos de pgina [CSS]) da caixa de dilogo New Document (Novo documento), selecione um arquivo (consulte Criar um documento com base em um arquivo de projeto do Dreamweaver na pgina 103).
Independentemente da utilizao de CSS, tabelas ou quadros para definir o layout das pginas, o Dreamweaver contm rguas e grades para a orientao visual no layout. O Dreamweaver tambm contm um recurso de imagem de rastreamento, que voc pode utilizar para recriar um projeto de pgina criado em um aplicativo grfico.
Se voc no estiver familiarizado com o uso de camadas e com as folhas de estilo em cascata (CSS), mas estiver familiarizado com o uso de tabelas, experimente utilizar tabelas ou o modo Layout para o layout da pgina (consulte Apresentar contedo com tabelas na pgina 257 e Criao de pginas no modo Layout na pgina 283).

Sobre camadas no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Inserir uma camada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222 Definir propriedades e preferncias de camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . .225 Gerenciar camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Manipular camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 Converter camadas em tabelas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233
219
Animar camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .235 Inserir tags div no layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Trabalhar com tags div no layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246 Alterar a cor de realce de tags div. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .247 Trabalhar com visualizao de layout CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248 Utilizar rguas, guias e grades para definir o layout de pginas. . . . . . . . . . . . . . . 250 Utilizar uma imagem de rastreamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Sobre camadas no Dreamweaver

Uma camada um elemento da pgina HTML especificamente uma tag div ou qualquer outra tag qual foi atribuda uma posio absoluta. Elas podem conter texto, imagens ou qualquer outro contedo que possa ser inserido no corpo de um documento HTML.
NO TA 220
As camadas, conforme descrito neste captulo, referem-se ao conceito de layout do Dreamweaver, no tag layer.
Camadas
Com o Dreamweaver, voc pode utilizar camadas para definir o layout da pgina. Voc pode colocar as camadas na frente ou atrs de outras, ocult-las enquanto outras so 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 oferecem bastante flexibilidade para inserir contedo. Contudo, os visitantes do site que tiverem navegadores da Web muito antigos poderiam ter problemas para visualizar as camadas. Para garantir que todos possam visualizar a sua pgina da Web, conceba o layout da pgina com camadas e, em seguida, converta-as em tabelas. Para obter mais informaes, consulte Converter camadas em tabelas na pgina 233. Contudo, se for provvel que o seu pblico esteja utilizando um navegador recente, crie layouts apenas com as camadas, sem convert-las em tabelas. Tpicos relacionados Gerenciar camadas na pgina 227
Captulo 7: Criar layouts de pginas com CSS
Cdigo HTML das camadas

Quando se coloca uma camada em um documento, o Dreamweaver insere a tag HTML correspondente camada no cdigo. Como padro, o Dreamweaver cria as camadas utilizando a tag div.
NO TA
Existem duas outras tags que podem ser utilizadas na criao de camadas: layer e ilayer. Contudo, essas tags so aceitas apenas no Netscape Navigator 4; o Internet Explorer no oferece suporte a essas tags e o Netscape deixou de oferec-lo nas verses posteriores. O Dreamweaver reconhece as tags layer e ilayer, mas no cria camadas utilizando-as.
Quando voc desenha uma camada utilizando a ferramenta Draw Layer (Desenhar camada), o Dreamweaver insere uma tag div no documento e atribui camada um valor de identificao (por padro, Layer1 (Camada1) para a primeira camada desenhada, Layer2 (Camada2) para a segunda camada desenhada e assim por diante). Mais tarde, voc poder renomear a camada com o nome desejado utilizando o painel Layers (Camadas) ou o Property inspector (Inspetor de propriedades). O Dreamweaver tambm utiliza CSS incorporado na seo head do documento para posicionar a camada e determinar as dimenses exatas da camada. A seguir, apresentamos um exemplo de cdigo HTML para uma camada:
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sample Layers Page</title> <style type="text/css"> <!-#Layer1 { position:absolute; left:62px; top:67px; width:421px; height:188px; z-index:1; } --> </style> </head> <body> <div id="Layer1"></div> </body> </html>
Voc pode definir as propriedades das camadas na pgina, inclusive as coordenadas x e y, o ndice z (ou ordem de empilhamento), alm da visibilidade. Para obter mais informaes, consulte Definir propriedades e preferncias de camadas na pgina 225.
Sobre camadas no Dreamweaver
221
Tpicos relacionados Camadas na pgina 220
Inserir uma camada

O Dreamweaver permite criar, com facilidade, camadas na pgina e posicion-las com preciso. Ele tambm permite criar camadas aninhadas. Para obter mais informaes, consulte Camadas aninhadas na pgina 223.
NO TA
Voc pode utilizar um arquivo de projetos do Dreamweaver como um ponto de partida para o layout CSS. Na categoria Page Designs (CSS) da caixa de dilogo New Document, selecione um arquivo (consulte Criar um documento com base em um arquivo de projeto do Dreamweaver na pgina 103).
Quando voc insere uma camada, o Dreamweaver exibe a borda da camada, por padro, e reala o bloco quando se passa o ponteiro sobre ele. Voc pode ativar bordas de camadas desativando as opes Layer Outlines (Contornos de camadas) e CSS Layout Outlines (Contornos de layout CSS) no menu View (Exibir) > Visual Aids (Auxlios visuais). Voc tambm pode ativar nveis e o modelo de caixa para as camadas como auxlios visuais enquanto est projetando. Para obter mais informaes, consulte Trabalhar com visualizao de layout CSS na pgina 248. Para alterar a cor de realce de uma camada ou desativar o realce, consulte Alterar a cor de realce de tags div na pgina 247. Depois de criar uma camada, para adicionar contedo a ela, coloque o ponto de insero na camada e adicione o contedo como faria em uma pgina.
Para desenhar uma nica camada ou vrias camadas consecutivamente:
1.
Na categoria Layout da barra Insert, clique no boto Expanded Tables Mode (Modo de tabelas expandidas). Na visualizao do projeto da janela do documento, siga um destes procedimentos:

2.
Arraste para desenhar uma nica camada. Mantenha a tecla Control (no Windows) ou Command (no Macintosh) pressionada e arraste para desenhar vrias camadas consecutivamente. Voc pode continuar a desenhar novas camadas, contanto que no solte a tecla Control ou Command.
222
Para inserir uma camada em um local especfico do documento:
Coloque o ponto de insero na janela do documento e selecione Insert> Layout Objects (Objetos de Layout) > Layer.
NO T A
Esse procedimento coloca a tag da camada onde voc clicou na janela do documento. Portanto, o processamento visual da camada pode afetar outros elementos da pgina (como texto) que a circundam.
Para colocar o ponto de insero em uma camada:
Clique em qualquer ponto dentro das bordas da camada.
As bordas da camada sero realadas e a ala de seleo aparecer, mas a camada no estar selecionada. Para obter informaes sobre como selecionar as camadas, consulte Selecionar camadas na pgina 227.
Para exibir as bordas das camadas:
Selecione View> Visual Aids e, em seguida, selecione Layer Outlines ou CSS Layout Outlines.
NO TA
A seleo simultnea das duas opes ter o mesmo efeito.
Para ocultar bordas de camadas:
Selecione View > Visual Aids e depois desmarque Layer Outlines e CSS Layout Outlines.
Tpicos relacionados Definir propriedades e preferncias de camadas na pgina 225

Gerenciar camadas na pgina 227 Manipular camadas na pgina 230
Camadas aninhadas
A camada aninhada aquela cujo cdigo est contido em uma outra camada. O aninhamento utilizado regularmente para agrupar as camadas. Uma camada aninhada se move com a sua camada-me e pode ser definida para herdar a visibilidade da me.
Inserir uma camada
223
Voc pode ativar a opo Nesting (Aninhamento) para aninhar automaticamente quando desenhar uma camada que comece dentro de outra camada.
Para desenhar uma camada aninhada:

1. 2.
Na categoria Layout da barra Insert, clique no boto Expanded Tables Mode. Na visualizao do projeto na janela do documento, arraste para desenhar uma camada dentro de uma camada existente: Se a opo Nesting estiver desativada nas preferncias de camadas, mantenha pressionada a tecla Alt (no Windows) ou Option (no Macintosh) e arraste para aninhar uma camada dentro de outra j existente.
DICA
Voc pode que as camadas aninhadas sejam exibidas de maneira diferente nos diversos navegadores. Ao criar camadas aninhadas, verifique com freqncia a sua aparncia em diversos navegadores durante o processo de criao.
Para inserir uma camada aninhada:
Coloque o ponto de insero dentro de uma camada existente na visualizao do projeto na janela do documento e selecione Insert > Layer.
Para aninhar uma camada existente dentro de uma outra camada utilizando o painel Layers:
1. 2.
Selecione Window (Janela) > Layers para abrir o painel Layers. Selecione uma camada no painel Layers, pressione a tecla Control (no Windows) ou Command (no Macintosh) e arraste-a at a camada de destino no painel Layers. Solte o boto do mouse quando o nome da camada de destino for realado.
3.
Para aninhar camadas automaticamente ao desenhar uma camada que comece dentro de outra:
Selecione a opo Nesting (Aninhamento) nas preferncias de camadas. Para obter mais informaes, consulte Definir preferncias de camadas na pgina 225.
224
Tpicos relacionados Inserir uma camada na pgina 222

Gerenciar camadas na pgina 227 Manipular camadas na pgina 230
Definir propriedades e preferncias de camadas

Voc pode especificar definies padro para camadas. Voc pode tambm exibir e definir vrios atributos de uma ou mais camadas utilizando o Property inspector.
Definir preferncias de camadas

Utilize a categoria Layers na caixa de dilogo Preferences (Preferncias) para especificar as definies padro das novas camadas criadas.
Para exibir ou definir as preferncias de camadas:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences ser exibida. Na lista Category (Categoria) esquerda, selecione Layers. Faa as alteraes necessrias. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
2. 3.
4.
Tpicos relacionados Exibir e definir as propriedades de diversas camadas na pgina 226
Exibir e definir propriedades de uma nica camada

Quando voc seleciona uma camada, o Property inspector exibe as propriedades dessa camada.
Para exibir e definir propriedades de camadas:
1.
Selecione uma camada (consulte Selecionar camadas na pgina 227).
Definir propriedades e preferncias de camadas
225
2.
No Property inspector, em Window > Properties (Propriedades), clique na seta de expanso, no lado inferior direito, se ela ainda no estiver expandida, para ver todas as propriedades.
3.
Altere os atributos da camada definindo as propriedades como necessrio. Para obter mais informaes, clique no boto Help do Property inspector.
Tpicos relacionados Definir preferncias de camadas na pgina 225
Gerenciar camadas na pgina 227
Exibir e definir as propriedades de diversas camadas

Quando voc selecionar duas ou mais camadas, o Property inspector das camadas exibir as propriedades de texto e um subconjunto de todas as propriedades das camadas, o que permite modificar vrias camadas simultaneamente.
Para selecionar diversas camadas:
Mantenha pressionada a tecla Shift enquanto seleciona as camadas (consulte Selecionar camadas na pgina 227).
Para exibir e definir propriedades para diversas camadas:

1. 2.
Selecione diversas camadas. No Property inspector, em Window > Properties, clique na seta de expanso, no lado inferior direito, se ela ainda no estiver expandida, para ver todas as propriedades.
3.
Altere os atributos das camadas, definindo as propriedades. Para obter mais informaes, clique no boto Help do Property inspector.
Tpicos relacionados Definir preferncias de camadas na pgina 225
Exibir e definir propriedades de uma nica camada na pgina 225
226
Gerenciar camadas
Voc pode selecionar camadas para trabalhar com elas. Voc tambm pode alterar a ordem de empilhamento e a visibilidade das camadas. O painel Layers fornece uma maneira conveniente de gerenciar camadas.
Utilizar o painel Layers

O painel Layers um meio de gerenciar as camadas dos documentos. Utilize o painel Layers para evitar sobreposies, alterar a visibilidade das camadas, aninhar ou empilhar camadas e selecionar uma ou mais camadas.
Para abrir o painel Layers:
Selecione Window > Layers.
As camadas so exibidas como uma lista de nomes organizada de acordo com o ndice z. Por padro, a primeira camada criada (com um ndice z igual a 1) mostrada na parte inferior da lista, enquanto que a camada criada mais recentemente (com um ndice z superior a 1) mostrada no alto da lista. No entanto, voc pode alterar o ndice z de uma camada para alterar seu lugar na ordem de empilhamento. Por exemplo, se voc tiver criado oito camadas e quiser que a quarta camada passe a ser a camada superior da ordem de empilhamento, ser possvel atribuir-lhe um ndice z superior ao das demais camadas. Para obter mais informaes sobre como utilizar o painel Layers, consulte os seguintes tpicos:

Inserir uma camada na pgina 222 Selecionar camadas na pgina 227 Alterar a ordem de empilhamento de camadas na pgina 228 Alterar a visibilidade das camadas na pgina 229 Evitar sobreposies de camadas na pgina 233
Selecionar camadas
Selecione uma ou mais camadas para manipul-las ou alterar as suas propriedades.
Para selecionar uma camada no painel Layers:
No painel Layers, em Window > Layers, clique no nome da camada.
Para selecionar uma camada na janela do documento, siga um destes procedimentos:
Clique na ala de seleo da camada.
Gerenciar camadas
227
Se a ala de seleo no estiver visvel, clique em qualquer ponto dentro da camada para tornar a ala visvel.
Clique na borda de uma camada. Mantenha pressionadas as teclas Control-Shift (no Windows) ou Command-Shift (no Macintosh) e clique dentro de uma camada. Clique dentro de uma camada e pressione Control+A (Windows) ou Command+A (Macintosh) para selecionar o contedo da camada. Pressione Control+A ou Command+A novamente para selecionar a camada. Clique dentro de uma camada e selecione a tag no seletor de tags.
Para selecionar camadas mltiplas, siga um dos procedimentos abaixo:
No painel Layers (Window > Layers), pressione a tecla Shift e clique em dois ou mais nomes de camadas. Na janela do documento, pressione a tecla Shift e clique dentro ou sobre a borda de duas ou mais camadas.
Tpicos relacionados Inserir uma camada na pgina 222

Definir propriedades e preferncias de camadas na pgina 225 Gerenciar camadas na pgina 227 Manipular camadas na pgina 230
Alterar a ordem de empilhamento de camadas

Utilize o Property inspector ou o painel Layers para alterar a ordem de empilhamento das camadas. A camada na parte superior do painel Layers est situada no alto da ordem de empilhamento e aparecer na frente das outras camadas. No cdigo HTML, a ordem de empilhamento das camadas, ou ndice z, determina a ordem segundo a qual elas sero desenhadas em um navegador. Quanto maior for o ndice z de uma camada, mais alta ser a posio da camada na ordem de empilhamento. O ndice z de cada camada pode ser alterado no Property inspector ou no painel Layers.
228
Para alterar a ordem de empilhamento das camadas no painel Layers:

1. 2.
Selecione Window > Layers para abrir o painel Layers. 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 boto do mouse quando a linha de colocao aparecer no ponto desejado da ordem de empilhamento.
Para alterar a ordem de empilhamento das camadas com o Property inspector:

1.
Selecione Window > Layers para abrir o painel Layers e ver a ordem de empilhamento atual. Selecione uma camada no painel ou na janela do documento. No Property inspector da camada, em Window > Properties, digite um nmero na caixa de texto Z-index (ndice Z).
2. 3.
Digite um nmero mais alto, para mover a camada at uma posio superior na ordem de empilhamento. Digite um nmero mais baixo, para mover a camada at uma posio inferior na ordem de empilhamento.
Tpicos relacionados Utilizar o painel Layers na pgina 227
Selecionar camadas na pgina 227
Alterar a visibilidade das camadas

Ao trabalhar em um documento, voc poder mostrar ou ocultar as camadas manualmente com o painel Layers, para examinar a aparncia da pgina em diversas condies.
NO T A
A camada selecionada ficar sempre visvel e aparecer na frente das outras camadas enquanto estiver selecionada.
Para alterar a visibilidade de uma camada:

1. 2.
Selecione Window > Layers para abrir o painel Layers. Clique na coluna do cone representando um olho para alterar a sua visibilidade.

Um olho aberto significa que a camada est visvel. Um olho fechado significa que a camada est invisvel.
Gerenciar camadas
229
Se no houver um cone representando um olho, lembre-se de que a camada costuma herdar as definies de visibilidade da camada-me. Quando as camadas no estiverem aninhadas, a camada-me ser o corpo do documento, que est sempre visvel. O cone representando um olho estar ausente quando no for especificada uma visibilidade, que aparecer no Property inspector como visibilidade padro.
Para alterar a visibilidade de todas as camadas simultaneamente:
No painel Layers (Window > Layers), clique no cone do olho do cabealho, na parte superior da coluna.
NO T A
Esse procedimento poder tornar todas as camadas visveis ou ocultas, mas estas no podero herdar a visibilidade da me.
Tpicos relacionados Utilizar o painel Layers na pgina 227
Alterar a ordem de empilhamento de camadas na pgina 228
Manipular camadas
As camadas podem ser selecionadas, movidas, redimensionadas ou alinhadas durante o trabalho no layout da pgina. necessrio selecionar uma camada, para poder mover, redimensionar ou alinh-la. Para evitar que as camadas se sobreponham quando forem movidas ou redimensionadas, utilize a opo Prevent Overlap (Evitar sobreposies). Consulte Evitar sobreposies de camadas na pgina 233.
Redimensionar camadas
Voc pode redimensionar uma nica camada ou vrias camadas simultaneamente para tornlas iguais s suas larguras e alturas.
230
Se a opo Prevent Overlaps estiver ativada, voc no poder redimensionar uma camada para que esta se sobreponha a outra. Consulte Evitar sobreposies de camadas na pgina 233.
Para redimensionar uma camada:
1.
Na visualizao do projeto, selecione uma camada (consulte Selecionar camadas na pgina 227). Siga um deste procedimentos para redimensionar a camada:
2.
Para redimensionar arrastando o cursor, arraste qualquer uma das alas de redimensionamento da camada. Para redimensionar um pixel por vez, pressione a tecla Control (no Windows) ou Option (no Macintosh) e uma das teclas de seta. As teclas de seta movero a borda direita e inferior da camada. Essa tcnica no 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 (no Windows) ou Shift-Option (no Macintosh) e uma das teclas de seta. Para obter informaes sobre a definio de incrementos de encaixe na grade, consulte Utilizar uma imagem de rastreamento na pgina 254.
No Property inspector, em Window > Properties, digite os valores da largura (W Width) e altura (H - Height).
O redimensionamento de uma camada ir alterar a sua largura e altura. Ele no definir a extenso do contedo da camada que estar visvel. Para definir a regio visvel de uma camada, consulte Definir propriedades e preferncias de camadas na pgina 225.
Para redimensionar diversas camadas simultaneamente:
1.
Na visualizao do projeto, selecione duas ou mais camadas (consulte Selecionar camadas na pgina 227). Siga um dos procedimentos abaixo:
2.
Selecione Modify (Modificar) > Align (Alinhar) > Make Same Width (Tornar as larguras iguais) ou Modify > Align > Make Same Height (Tornar as alturas iguais). As primeiras camadas selecionadas assumiro a largura ou altura da ltima camada selecionada.
No Property inspector, em Window > Properties, em Multiple Layers (Camadas mltiplas), digite os valores da largura e altura.
Os valores sero aplicados a todas as camadas selecionadas.
Manipular camadas
231
Tpicos relacionados Alinhar camadas na pgina 232
Utilizar uma imagem de rastreamento na pgina 254
Mover camadas
Voc pode mover as camadas na visualizao do projeto da mesma maneira que os objetos so deslocados na maioria dos aplicativos grficos bsicos. Se a opo Prevent Overlaps estiver ativa, voc no poder mover uma camada de modo que ela se sobreponha a outra. Consulte Evitar sobreposies de camadas na pgina 233.
Para mover uma ou mais camadas selecionadas:
1.
Na visualizao do projeto, selecione uma camada ou vrias camadas (consulte Selecionar camadas na pgina 227). Siga um destes procedimentos:
2.
Para mover arrastando, arraste a ala de seleo da ltima camada selecionada (realada em preto). Para mover um pixel de cada vez, utilize as teclas de seta. Mantenha pressionada a tecla Shift e utilize uma das teclas de seta para mover a camada de acordo com o incremento de encaixe na grade. Para obter informaes sobre a definio de incrementos de encaixe na grade, consulte Utilizar uma imagem de rastreamento na pgina 254.
Tpicos relacionados Redimensionar camadas na pgina 230 Utilizar uma imagem de rastreamento na pgina 254
Alinhar 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-me for selecionada e movida, talvez as camadas secundrias que no tenham sido selecionadas se movam. Para evitar esse tipo de problema, no utilize camadas aninhadas.
Para alinhar duas ou mais camadas:
1.
Na visualizao do projeto, selecione uma camada (consulte Selecionar camadas na pgina 227).
232
2.
Selecione Modify > Arrange (Organizar) e escolha uma opo de alinhamento. Por exemplo, se voc selecionar Top (No alto), todas as camadas se movero, de maneira que as suas bordas superiores assumiro a mesma posio vertical que a borda superior da ltima camada selecionada (realada em preto).
Tpicos relacionados Redimensionar camadas na pgina 230

Mover camadas na pgina 232 Utilizar uma imagem de rastreamento na pgina 254
Converter camadas em tabelas

Em vez de utilizar tabelas ou o modo Layout para criar o layout, alguns designers da Web preferem trabalhar com camadas. O Dreamweaver permite criar o layout utilizando camadas e, se desejar, convert-las em tabelas. Por exemplo, talvez seja necessrio converter suas camadas em tabelas, se voc precisar de suporte a navegadores anteriores verso 4.0.
N OT A N OT A
As camadas no 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 no seja um modelo e converta-o antes de salv-lo como um modelo.
Voc pode ajustar o layout e otimizar o desenho da pgina movimentando-se entre as diversas camadas e tabelas. Voc no pode converter uma tabela ou uma camada especfica de uma pgina; necessrio converter camadas em tabelas e tabelas em camadas de uma pgina inteira.
A converso de camadas em tabelas poder resultar em tabelas com um grande nmero de clulas vazias.
Evitar sobreposies de camadas

Uma vez que as clulas de tabelas no podem se sobrepor, o Dreamweaver no poder criar uma tabela a partir de camadas sobrepostas. Se estiver planejando converter as camadas de um documento em tabelas, utilize a opo Prevent Overlap, que restringir o movimento e o posicionamento das camadas de maneira que no haja sobreposio.
Converter camadas em tabelas
233
Quando esta opo estiver ativada, uma camada no poder ser criada na frente de uma camada existente, nem movida, redimensionada ou aninhada dentro de uma camada existente. Caso ative esta opo aps criar camadas sobrepostas, arraste cada camada sobreposta para afast-la das outras camadas. O Dreamweaver no corrigir automaticamente as camadas sobrepostas na pgina quando a opo Prevent Layer Overlaps estiver ativada. Quando essa opo e o encaixe estiverem ativados, a camada no se encaixar na grade se isso acarretar a sobreposio de duas camadas. Em vez disso, ela se encaixar na margem da camada mais prxima.
NO T A

Esta uma nova tabela Note (Nota). Encontra-se anexada a uma tag de pargrafo Table_anchor. Para criar uma, copie e cole da pgina de referncia.
NO T A C er t a s a es p e r mi t e m q u e a s ca ma d a s s e so b r e p o n ha m, me sm o q u a n d o a o p o P r e v e n t O v e r l a p s e s t a t iv a d a . S e v o c i n s e r i r u ma c a m a d a u t i l i z a n d o o m en u I n s e r ir , d ig i t a r n m er o s n o P r o p er t y i ns p ect o r o u r ep o s i c i o na r a s ca m a d a s e d it a n d o o c d i go - fo n t e H T M L , p o d e r p r o v o ca r a s o b r ep o s i o o u o a n i nh a m e nt o d e c a m a d a s e n q u a n t o e s s a o p o e st iv er a t i v a da . S e a s s ob r e p o s i e s o c o r r e r e m , a r r a s t e a s c a m a d a s s o b r e p o s t a s a t a v i s u a l iz a o d o p r o j et o , a fi m d e s ep a r - l a s .
Para evitar as sobreposies de camadas, siga um dos procedimentos abaixo:
No painel Layers, em Window > Layers, selecione a opo Prevent Overlaps. Na janela do documento, selecione Modify > Arrange > Prevent Layer Overlaps.
Converter entre camadas e tabelas

Voc pode criar o layout utilizando camadas e, em seguida, convert-las em tabelas, para que o layout possa ser visualizado nos navegadores mais antigos. Antes de converter camadas em tabelas, certifique de que as camadas no estejam sobrepostas (consulte Evitar sobreposies de camadas na pgina 233).
Para converter camadas em uma tabela:
1.
Selecione Modify > Convert (Converter) > Layers to Table (Camadas em tabela). A caixa de dilogo Convert Layers to Tables exibida. Selecione as opes desejadas. Para obter mais informaes, clique no boto Help da caixa de dilogo. Clique em OK. As camadas sero convertidas em uma tabela.
2.
3.
234
Para converter tabelas em camadas:

1.
Selecione Modify > Convert > Tables to Layers (Tabelas em camadas). A caixa de dilogo Convert Tables to Layers (Converter tabelas em camadas) aparece. Selecione as opes desejadas. Para obter mais informaes, clique no boto Help da caixa de dilogo. Clique em OK. As tabelas sero convertidas em camadas. As clulas vazias no sero convertidas em camadas, a no ser que elas tenham cores de fundo.
NO T A
2.
3.
Os elementos de pgina que estavam fora das tabelas tambm sero colocados em camadas.
Animar camadas
O termo HTML dinmico, ou DHTML, refere-se combinao de HTML com uma linguagem de scripts que permite alterar as propriedades de posicionamento ou estilo dos elementos HTML. As linhas de tempo do Dreamweaver utilizam HTML dinmico para alterar as propriedades de camadas e imagens ao longo do tempo. Utilize as linhas de tempo para criar animaes que no requerem nenhum controle ActiveX, plug-ins nem applets Java (mas que requerem JavaScript).
N OT A
A palavra 'dinmico' pode ter vrios significados em diferentes contextos relativos Web. No confunda HTML dinmico com a idia de uma pgina da Web dinmica, que uma pgina da Web gerada dinamicamente por um cdigo do lado do servidor antes de ser apresentada a um visitante.
As linhas de tempo permitem alterar a posio, tamanho, visibilidade e ordem de empilhamento de uma camada. (As funes de camada das linhas de tempo funcionam apenas em navegadores 4.0 ou posteriores.) As linhas de tempo tambm so teis para outras aes que voc deseja que ocorram aps a pgina ser carregada. Por exemplo, as linhas de tempo podem alterar o arquivo de origem de uma tag de imagem, de modo que imagens diferentes apaream na pgina ao longo do tempo. Para ver o cdigo JavaScript gerado por uma linha de tempo, abra a visualizao do cdigo da janela do documento. O cdigo da linha de tempo est na funo MM_initTimelines, dentro de uma tag de script na seo head do documento. Ao editar o HTML de um documento que contm linhas de tempo, certifique-se de no mover, renomear nem excluir nenhum item que seja referenciado por uma linha de tempo.
Animar camadas
235
Utilizar o painel Timelines (Linhas de tempo)

O painel Timelines mostra como as propriedades de camadas e imagens mudam ao longo do tempo. Selecione Window > Timelines para abrir o painel Timelines.
menu pop-up Timeline (Linha de tempo) cabea de execuo nmero do quadro
canal Behaviors (Comportamentos)
quadros-chave barra Animation (Animao)
canal Animation (Animao)
O menu pop-up Timeline especifica qual das linhas de tempo do documento est sendo exibida no painel Timelines. A cabea de execuomostra qual quadro da linha de tempo est sendo exibido na janela do documento. O nmero do quadroindica a numerao seqencial dos quadros. O nmero do quadro atual est entre os botes Back (Voltar) e Play (Executar). Voc pode controlar a durao da animao ao definir o total de quadros e o nmero de quadros por segundo (qps). A definio padro de 15 quadros por segundo uma boa taxa mdia para usar na maioria dos navegadores que esto sendo executados em sistemas comuns Windows e Macintosh.
N OT A 236
possvel que taxas mais velozes no melhorem o desempenho. Os navegadores sempre executam todos os quadros da animao, mesmo que no consigam obter a taxa de quadros especificada. A taxa de quadros ser ignorada se for superior que o navegador pode suportar.
O menu contextual contm vrios comandos relativos linha de tempo. O canal Behaviors o canal de comportamentos que devem ser executados em um determinado quadro da linha de tempo. As barras Animation mostram a durao da animao de cada objeto. Uma nica linha pode incluir vrias barras que representam objetos diferentes. Barras diferentes no podem controlar o mesmo objeto no mesmo quadro.
Os quadros-chaveso quadros de uma barra, onde voc especificou propriedades (como posio) para o objeto. O Dreamweaver calcula valores intermedirios para os quadros que esto entre os quadros-chave. Os quadros-chave so indicados por pequenos crculos. Os canais Animation exibem barras para camadas e imagens com animaes.
Opes de execuo
A seguir, so apresentadas as opes de execuo para visualizar a animao.
Rewind (Rebobinar)move Back move Play move
a cabea de execuo para o primeiro quadro na linha de tempo.
a cabea de execuo um quadro para a esquerda. Clique em Back e mantenha pressionado o boto do mouse para executar a linha de tempo para trs.
a cabea de execuo um quadro para a direita. Clique em Play e mantenha pressionado o boto do mouse para executar a linha de tempo para frente.
Autoplay (Execuo automtica)
faz com que a linha de tempo comece a execuo automaticamente quando a pgina atual for carregada em um navegador. A opo Autoplay anexa um comportamento tag body da pgina que executa a ao Play Timeline (Executar linha de tempo) quando a pgina carregada.
com que a linha de tempo atual fique em loop indefinidamente enquanto a pgina estiver aberta em um navegador. A opo Loop insere o comportamento Go to Timeline Frame (Ir para quadro da linha de tempo) no canal Behaviors aps o ltimo quadro da animao. Clique duas vezes no marcador do comportamento no canal Behaviors para editar os parmetros desse comportamento e alterar o nmero de loops.
Loop faz
Mover uma camada utilizando uma animao da linha de tempo

O tipo mais comum de animao da linha de tempo envolve a movimentao de uma camada ao longo de um caminho. As linhas de tempo s podem mover camadas. Para fazer com que imagens ou texto se movam, crie uma camada usando o boto Draw Layer (Desenhar camada) na barra Insert e, em seguida, insira na camada imagens, texto ou qualquer outro tipo de contedo (consulte Inserir uma camada na pgina 222). As linhas de tempo tambm podem alterar outros atributos de camadas e imagens. Para obter mais informaes, consulte Alterar propriedades de imagens e camadas com linhas de tempo na pgina 240.
Animar camadas
237
Para animar uma camada utilizando uma linha de tempo:

1. 2. 3.
Mova a camada para onde deve estar quando a animao comear. Selecione Window > Timelines. Selecione a camada que voc deseja animar. Certifique-se de que selecionou o elemento desejado. Clique no marcador da camada ou na ala de seleo da camada, ou utilize o painel Layers para selecionar uma camada. Para obter mais informaes, consulte Manipular camadas na pgina 230. Quando uma camada selecionada, so exibidas alas ao seu redor, conforme mostrado na ilustrao a seguir.
Clique na ala de seleo da camada para selecionar a camada
Camada selecionada com imagem dentro
Quando voc clica na camada, colocado um ponto de insero piscante dentro dela, mas a camada no selecionada.
4.
Selecione Modify > Timeline > Add Object to Timeline ou simplesmente arraste a camada selecionada at o painel Timelines. exibida uma barra no primeiro canal da linha de tempo. O nome da camada mostrado na barra.
5. 6.
Clique no marcador de quadro-chave mostrado no final da barra. Mova a camada dentro da pgina para onde ela dever ir no final da animao. exibida uma linha indicando o caminho da animao na janela do documento. Caso voc queira que a camada se mova em curva, selecione a barra de animao e pressione a tecla Control (no Windows) ou a tecla Command (no Macintosh) e clique em um quadro no meio da barra para adicionar um quadro-chave ao quadro em que voc clicou, ou clique em um quadro no meio da barra de animao e selecione Add Keyframe (Adicionar quadro-chave) no menu contextual. Repita esta etapa para definir quadros-chave adicionais.
7.
238
8.
Mantenha pressionado o boto Play para visualizar a animao na pgina. Repita o procedimento para adicionar mais camadas e imagens linha de tempo e criar uma animao mais complexa.
Criar uma linha de tempo arrastando um caminho

Se voc quiser criar uma animao com um caminho complexo, talvez seja mais eficiente gravar o caminho enquanto arrasta a camada, em vez de criar quadros-chave individuais.
Para criar uma linha de tempo arrastando um caminho:
1. 2.
Selecione uma camada. Mova a camada para onde deve estar quando a animao comear. Certifique-se de ter selecionado a camada; se o ponto de insero est na camada, isto significa que ela no est selecionada. Para selecionar uma camada, clique no marcador da camada ou na ala de seleo da camada, ou utilize o painel Layers. Para obter mais informaes, consulte Manipular camadas na pgina 230.
3. 4. 5.
Selecione Modify > Timeline > Record Path of Layer (Gravar caminho da camada). Arraste a camada pela pgina para criar um caminho. Solte a camada no ponto onde a animao deve parar. O Dreamweaver adiciona uma barra de animao linha de tempo, contendo o nmero apropriado de quadros-chave.
6.
No painel Timelines, clique no boto Rewind (Rebobinar); depois, mantenha pressionado o boto Play para visualizar a animao.
Modificar linhas de tempo

Aps definir os componentes bsicos de uma linha de tempo, voc poder fazer alteraes como adio e remoo de quadros, alterao da hora de incio da animao, etc.
Para modificar uma linha de tempo, siga um destes procedimentos:
Para fazer com que a animao seja executada por mais tempo, arraste para a direita o marcador do quadro final. Todos os quadros-chave da animao so deslocados, de modo que suas posies relativas permaneam constantes. Para evitar que os outros quadroschave sejam movidos, pressione a tecla Control e arraste o marcador do quadro final. Para fazer com que a camada alcance a posio de um quadro-chave mais cedo ou mais tarde, mova o marcador do quadro-chave na barra para a esquerda ou direita.
Animar camadas
239
Para alterar a hora de incio de uma animao, selecione uma ou mais barras associadas animao (pressione Shift para selecionar mais de uma barra simultaneamente) e arrastea(s) para a esquerda ou direita. Para mudar a localizao do caminho de uma animao inteira, selecione a barra inteira e depois arraste o objeto na pgina. O Dreamweaver ajustar a posio de todos os quadroschave. Se for feito qualquer tipo de alterao com uma barra inteira selecionada, todos os quadros-chave sero alterados. Para adicionar ou remover quadros da linha de tempo, selecione Modify > Timeline > Add Frame ou Modify > Timeline > Remove Frame. Para fazer com que a linha de tempo seja executada automaticamente quando a pgina for aberta em um navegador, clique em Autoplay (Execuo automtica). A opo Autoplay anexa pgina um comportamento que executa a ao Play Timeline quando a pgina carregada. Para fazer com que a linha de tempo fique em loop contnuo, clique em Loop. A opo Loop insere a ao Go To Timeline Frame (Ir para quadro da linha de tempo) no canal Behaviors (Comportamentos) aps o ltimo quadro da animao. Voc pode editar os parmetros desse comportamento para definir o nmero de loops.
Alterar propriedades de imagens e camadas com linhas de tempo

Alm de mover camadas com linhas de tempo, voc pode alterar a visibilidade, tamanho e ordem de empilhamento de uma camada. Voc tambm pode alterar o arquivo de origem de uma imagem.
Para alterar as propriedades de imagens e camadas com uma linha de tempo:
1.
No painel Timelines, siga um destes procedimentos:
Selecione um quadro-chave existente na barra que controla o objeto que voc deseja alterar. (Os quadros inicial e final so sempre quadros-chave.) Crie um novo quadro-chave, clicando em um quadro no meio da barra de animao e selecionando Modify > Timeline > Add Keyframe. Voc tambm pode criar um novo quadro-chave pressionando a tecla Control (no Windows) ou a tecla Command (no Macintosh) e clicando em um quadro da barra de animao. Para alterar o arquivo de origem de uma imagem, clique no cone de pasta junto caixa de texto Src (Orig.) no Property inspector; depois procure uma nova imagem e selecione-a.
2.
Defina novas propriedades para o objeto, seguindo um dos procedimentos abaixo:
240
Para alterar a visibilidade de uma camada, selecione inherit (herdar), visible (visvel) ou hidden (oculta) no menu pop-up da caixa de texto Vis do Property inspector. Uma alternativa usar os cones que representam um olho, no painel Layers. Consulte Alterar a visibilidade das camadas na pgina 229. Para alterar o tamanho de uma camada, arraste as alas de redimensionamento da camada ou digite novos valores nas caixas de texto Width (Largura) e Height (Altura) no Property inspector. Nem todos os navegadores podem alterar o tamanho de uma camada de forma dinmica. Para alterar a ordem de empilhamento de uma camada, digite um novo valor na caixa de texto Z-Index (ndice Z) ou utilize o painel Layers para alterar a ordem de empilhamento da camada atual (consulte Alterar a ordem de empilhamento de camadas na pgina 228).
3.
Mantenha pressionado o boto Play para ver a animao.
Utilizar vrias linhas de tempo

Em vez de tentar controlar todas as aes de uma pgina com uma linha de tempo, mais fcil trabalhar com linhas de tempo separadas que controlem partes diferentes da pgina. Por exemplo, uma pgina pode incluir elementos interativos, sendo que cada um deles aciona uma linha de tempo diferente.
Para gerenciar vrias linhas de tempo, siga um destes procedimentos:
Para criar uma nova linha de tempo, selecione Modify > Timeline > Add Timeline (Adicionar linha de tempo). Para remover a linha de tempo selecionada, selecione Modify > Timeline > Remove Timeline. Assim, todas as animaes da linha de tempo selecionada sero removidas permanentemente. Para renomear a linha de tempo selecionada, selecione Modify > Timeline > Rename Timeline (Renomear linha de tempo) ou digite um novo nome no menu pop-up Timeline no painel Timelines . Para exibir outra linha de tempo no painel Timelines, selecione uma nova linha de tempo no menu pop-up Timeline, no painel Timelines.
Animar camadas
241
Copiar e colar animaes

Quando gostar de uma seqncia de animaes , voc poder copi-la e col-la em uma outra rea da linha de tempo atual, em outra linha de tempo do mesmo documento ou em uma linha de tempo de outro documento. Voc tambm pode copiar e colar vrias seqncias de uma s vez.
Para recortar ou copiar e colar seqncias de animaes:
1.
Clique em uma barra de animao para selecionar uma seqncia. Para selecionar vrias seqncias, pressione a tecla Shift e clique em vrias barras de animao; para selecionar todas as seqncias, pressione Control+A (no Windows) ou Command+A (no Macintosh). Copie ou recorte a seleo. Siga um dos procedimentos abaixo:

2. 3.
Mova a cabea de execuo para um outro ponto da linha de tempo atual. Selecione uma outra linha de tempo no menu pop-up Timeline. Abra um outro documento, ou crie um novo, e depois clique no painel Timelines.
4.
Cole a seleo na linha de tempo. As barras de animao de um mesmo objeto no podem se sobrepor porque uma camada no pode estar em dois lugares ao mesmo tempo (nem tampouco uma imagem pode ter duas fontes diferentes ao mesmo tempo). Se a barra de animao que voc estiver colando for se sobrepor a uma outra barra de animao do mesmo objeto, o Dreamweaver deslocar automaticamente o primeiro quadro que no se sobrepe.
H dois princpios a serem seguidos ao colar seqncias de animaes em um outro documento:
Se voc copiar uma seqncia de animaes para uma camada, e o novo documento tiver uma camada com o mesmo nome, o Dreamweaver aplicar as propriedades de animao camada existente no novo documento. Se voc copiar uma seqncia de animaes para uma camada, e o novo documento no tiver uma camada com o mesmo nome, o Dreamweaver colar a camada (e seu contedo) do documento original juntamente com a seqncia de animaes. Para aplicar em uma outra camada do novo documento a seqncia de animaes colada, selecione Change Object (Alterar objeto) no menu contextual e depois selecione o nome da segunda camada no menu pop-up. Se desejar, exclua a camada que foi colada.
242
Aplicar uma seqncia de animaes a um objeto diferente

Para economizar tempo, voc pode criar uma seqncia de animaes e aplic-la a cada uma das camadas restantes no documento.
Para aplicar uma seqncia de animaes existente a outros objetos:
1. 2. 3.
No painel Timelines, selecione a seqncia de animaes e copie-a. Clique em qualquer quadro do painel Timelines e cole a seqncia nesse quadro. Clique com o boto direito do mouse (no Windows) ou clique com a tecla Control pressionada (Macintosh) na seqncia de animaes que foi colada e selecione Change Object (Alterar objeto) no menu contextual. Na caixa de dilogo apresentada, selecione um outro objeto no menu pop-up e clique em OK. Repita as etapas de 2 a 4 para os demais objetos que devam seguir a mesma seqncia de animaes.
4.
5.
Aps a criao de uma seqncia de animaes, voc tambm pode mudar de idia quanto camada que deve ser animada ; simplesmente siga as etapas 3 e 4 acima (no necessrio copiar nem colar).
Renomear linhas de tempo

Voc pode renomear uma linha de tempo.
Para renomear uma linha de tempo que est sendo exibida no painel Timelines:
1. 2.
Selecione Modify > Timeline > Rename Timeline. Na caixa de dilogo Rename Timeline, digite um novo nome.
Se o documento contiver a ao de comportamento Play Timeline (por exemplo, se ele contiver um boto no qual o visitante deve clicar para iniciar a linha de tempo), voc precisar editar o comportamento para que ele reflita o novo nome da linha de tempo.
Dicas de animao para linhas de tempo

As sugestes apresentadas a seguir podem melhorar o desempenho das suas animaes e facilitar a criao de animaes:
Animar camadas
243
Mostre e oculte camadas em vez de alterar o arquivo de origem nas animaes que tm vrias imagens. A alternncia de arquivos de origem de uma imagem poder tornar a animao mais lenta porque ser necessrio fazer o download da nova imagem. No haver pausas perceptveis nem imagens ausentes se for feito o download, de uma s vez, de todas as imagens em camadas ocultas, antes da execuo da animao. Estenda as barras de animao para criar um movimento mais suave. Se a animao parecer instvel , e as imagens ficarem trocando de posio, arraste o quadro final da barra de animao da camada, a fim de estender o movimento por mais quadros. O aumento da barra de animao cria mais pontos de dados entre os pontos inicial e final do movimento e tambm faz com que o objeto se mova mais lentamente. Tente aumentar o nmero de quadros por segundo (qps) para melhorar a velocidade, mas saiba que a maioria dos navegadores executados nos sistemas mais comuns no conseguem animar muito mais rpido do que 15 qps. Teste a animao em sistemas diferentes e com navegadores diferentes para estabelecer as melhores definies. No anime grandes mapas de bits. A animao de imagens grandes resulta em animaes lentas. Em vez disso, crie composies e mova pequenas partes da imagem. Por exemplo, mostre um carro em movimento animando apenas as rodas. Crie animaes simples. No crie animaes que exijam mais recursos do que os navegadores atuais podem proporcionar. Os navegadores sempre executam todos os quadros em uma animao de linha de tempo, mesmo quando h uma queda no desempenho do sistema ou da Internet.
Inserir tags div no layout

Voc pode utilizar tags div para criar blocos de layout CSS e posicion-los no documento. Essas tags so especialmente teis quando voc tem uma folha de estilos CSS com estilos de posicionamento anexada ao documento. O Dreamweaver permite inserir rapidamente uma tag div e aplicar os estilos existentes a ela.
N OT A
Voc pode utilizar um arquivo de projetos do Dreamweaver como um ponto de partida para o layout CSS. Na categoria Page Designs (CSS) da caixa de dilogo New Document, selecione um arquivo (consulte Criar um documento com base em um arquivo de projeto do Dreamweaver na pgina 103).
Para inserir uma tag div:

1.
Na janela do documento, coloque o ponto de insero no local onde a tag div dever aparecer.
244
2.

Selecione Insert (Inserir) > Layout Objects (Objetos de layout) > Div Tag (Tag div). Na categoria Layout da barra Insert, clique no boto Expanded Tables Mode (Modo de tabelas expandidas).
A caixa de dilogo Insert Div Tag (Inserir tag div) exibida.
3.
Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help da caixa de dilogo. Clique em OK. A tag div aparece como uma caixa no documento com o texto do alocador de espao. Quando voc move o mouse sobre a margem da caixa, o Dreamweaver a reala.
4.
Se a tag div estiver em uma posio absoluta, ela agir como uma camada do Dreamweaver. Para obter informaes sobre como trabalhar com camadas, consulte Definir propriedades e preferncias de camadas na pgina 225, Gerenciar camadas na pgina 227 ou Manipular camadas na pgina 230. Para obter informaes sobre como trabalhar com tags div que no estejam absolutamente posicionadas, consulte Trabalhar com tags div no layout na pgina 246. Tpicos relacionados Alterar a cor de realce de tags div na pgina 247
Inserir tags div no layout
245
Trabalhar com tags div no layout

Depois de inserir uma tag div (consulte Inserir tags div no layout na pgina 244), voc poder manipul-la ou adicionar contedo a ela.
NO TA
As tags div que tm uma posio absoluta so camadas do Dreamweaver. Para obter informaes sobre como trabalhar com essas tags div, pule esta seo e consulte Definir propriedades e preferncias de camadas na pgina 225, Gerenciar camadas na pgina 227 ou Manipular camadas na pgina 230.
As bordas das tags div so visveis quando voc as atribui ou quando a opo CSS Layout Outlines est selecionada. (Por padro, a opo CSS Layout Outlines permanec selecionada no menu View > Visual Aids.) Quando voc move o ponteiro sobre uma tag div, o Dreamweaver a reala. Para alterar a cor de realce ou para desativ-lo, consulte Alterar a cor de realce de tags div na pgina 247. Ao selecionar uma tag div, voc pode visualizar e editar regras para ela no painel CSS Styles (Estilos CSS). Voc tambm pode adicionar contedo tag div posicionando o ponto de insero dentro da tag div e, em seguida, adicionando contedo da mesma forma que em uma pgina.
Para exibir e editar as regras aplicadas a uma tag div:
1.
Siga um destes procedimentos para selecionar a tag div:
Clique na borda da tag div.

DICA
Procure o realce para ver a borda.
Clique dentro da tag div e pressione Control+A (no Windows) ou Command+A (no Macintosh) duas vezes. Clique dentro da tag div e selecione-a no seletor de tags, na parte inferior da janela do documento.
2.
Selecione Window > CSS Styles para abrir o painel CSS Styles, se j no estiver aberto. As regras aplicadas tag div aparecem no painel. Edite conforme a necessidade.
3.
Para colocar o ponto de insero em uma tag div para adicionar contedo:
Clique em qualquer ponto dentro das bordas da tag.
246
Para alterar o texto do alocador de espao em uma tag div:
Selecione o texto e digite sobre ele ou pressione a tecla Delete.

N OT A
Voc pode adicionar contedo tag div exatamente como faria em uma pgina.
Tpicos relacionados Inserir tags div no layout na pgina 244
Utilizar o painel CSS Styles (Estilos CSS) na pgina 433
Alterar a cor de realce de tags div

Quando voc move o ponteiro sobre a margem de uma tag div na visualizao do projeto, o Dreamweaver reala as bordas da tag. Voc pode ativar ou desativar o realce se necessrio, ou alterar a cor de realce na caixa de dilogo Preferences (Preferncias).
Para alterar as preferncias de realce das tags div:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida. Selecione Highlighting (Realce) na lista de categorias esquerda. Faa uma dessas alteraes:
2. 3.
Para alterar a cor do realce para as tags div, clique na caixa de cor Mouse-Over (Seleo do mouse) e selecione a cor de realce utilizando o seletor de cores (ou digite o valor hexadecimal relativo cor do realce na caixa de texto). Para obter informaes sobre como utilizar o seletor de cores, consulte Trabalhar com cores na pgina 384.
Para ativar ou desativar o realce para as tags div, marque ou desmarque a caixa de seleo Show (Mostrar) para Mouse-Over.
N OT A
Essas opes afetam todos os objetos, como tabelas, que o Dreamweaver reala quando voc move o mouse sobre eles.
4.
Clique em OK.
Alterar a cor de realce de tags div
247
Trabalhar com visualizao de layout CSS

O Dreamweaver inclui vrios recursos de visualizao que permitem exibir elementos do layout CSS na visualizao do projeto. Por exemplo, voc pode exibir os contornos das tags div que no tm bordas atribudas a elas, ou pode exibir cores de fundo temporrias para tags div, a fim de ver sua localizao na pgina. Esta seo contm os tpicos a seguir:

Sobre a visualizao de layout CSS na pgina 248 Exibir blocos de layout CSS na pgina 249 Utilizar folhas de estilo Design-time (Fase de projeto) com blocos de layout CSS na pgina 249
Sobre a visualizao de layout CSS

O Dreamweaver permite visualizar os blocos de layout CSS enquanto voc trabalha na visualizao do projeto. Os blocos de layout CSS so elementos de pgina HTML que podem ser posicionados em qualquer ponto da pgina. Mais especificamente, um bloco de layout CSS uma tag div sem display:inline ou qualquer outro elemento de pgina que inclua as declaraes CSS display:block, position:absolute ou position:relative. A seguir, so apresentados alguns exemplos de elementos que so considerados blocos de layout CSS no Dreamweaver:

Uma tag div Uma imagem com posio absoluta ou relativa a ela atribuda Uma tag a com o estilo display:block atribudo a ela Um pargrafo com posio absoluta ou relativa a ele atribuda
NO T A
Para fins de processamento visual, os blocos de layout CSS no incluem elementos em linha (isto , elementos cujo cdigo se encontra em uma linha de texto) nem elementos de bloco simples como pargrafos.
O Dreamweaver fornece vrios auxlios visuais para visualizar os blocos de layout CSS. Por exemplo, voc pode ativar contornos, fundos e o modelo de caixa para blocos de layout CSS enquanto voc est projetando. Voc tambm pode visualizar dicas de ferramenta que exibem propriedades de um bloco de layout CSS selecionado ao passar o ponteiro do mouse sobre o bloco de layout. A lista de auxlios visuais de blocos de layout CSS a seguir descreve o que o Dreamweaver apresenta como visvel para cada um destes itens:
248
CSS Layout Outlines
mostra os contornos de todos os blocos de layout CSS da pgina.
CSS Layout Backgrounds (Fundos de layout CSS) mostra
as cores de fundo temporariamente atribudas a blocos de layout CSS individuais e oculta as demais cores de fundo ou imagens que normalmente so mostradas na pgina. Sempre que voc ativar o auxlio visual para visualizar fundos de blocos de layout CSS, o Dreamweaver atribuir automaticamente a cada bloco de layout CSS uma cor de fundo distinta. (O Dreamweaver seleciona as cores utilizando um processo algortmico no existe uma forma de voc atribuir as cores pessoalmente.) As cores atribudas so visualmente identificveis, e seu uso foi projetado para ajudar a distinguir os blocos de layout CSS.
CSS Layout Box Model (Modelo de caixa de layout CSS) mostra o modelo de caixa (isto , preenchimento e margens) do bloco de layout CSS selecionado.
Exibir blocos de layout CSS

Voc pode ativar ou desativar os auxlios visuais de blocos de layout CSS, se necessrio. Para obter uma explicao sobre o que cada auxlio visual processa, consulte Sobre a visualizao de layout CSS na pgina 248.
Para exibir contornos de blocos de layout CSS:
Selecione View > Visual Aids > CSS Layout Outlines.
Para exibir os fundos de blocos de layout CSS:
Selecione View > Visual Aids > CSS Layout Backgrounds.
Para exibir os modelos de caixa de blocos de layout CSS:
Selecione View > Visual Aids > CSS Layout Outlines (Modelos de caixa de layout CSS).
Voc tambm pode acessar as opes de auxlios visuais de blocos de layout CSS ao clicar no boto Visual Aids na barra de ferramentas Document (Documento).
Utilizar folhas de estilo Design-time (Fase de projeto) com blocos de layout CSS
Voc pode utilizar uma folha de estilos Design-time para exibir os fundos, bordas ou modelo de caixa para elementos que geralmente no so considerados blocos de layout CSS. Para isso, necessrio primeiro criar uma folha de estilos Design-time que associe o atributo display:block ao elemento de pgina apropriado.
Trabalhar com visualizao de layout CSS
249
Para utilizar auxlios visuais de blocos de layout CSS com elementos de bloco de layout diferentes de CSS:
1.
Para criar uma folha de estilos CSS externa, selecione File (Arquivo) > New (Novo), selecione Basic Page (Pgina bsica) na coluna Category, selecione CSS na coluna Basic Page e clique em Create (Criar). Na nova folha de estilos, crie regras que associem o atributo display:block aos elementos de pgina que voc deseja exibir como blocos de layout CSS. Por exemplo, se voc quisesse exibir uma cor de fundo para os itens de lista e pargrafos, poderia criar uma folha de estilos com as seguintes regras:
p{ display:block; } li{ display:block; }
2.
3. 4. 5. 6.
Salve o arquivo. Na visualizao do projeto, abra a pgina qual deseja anexar os novos estilos. Selecione Text > CSS Styles > Design-time. Na caixa de dilogo Design-time Style Sheets (Folhas de estilo da fase de projeto), clique no boto com o sinal de adio (+) acima da caixa de texto Show Only at Design Time (Mostrar apenas na fase de projeto), selecione a folha de estilos que voc acaba de criar e clique em OK. Clique em OK para fechar a caixa de dilogo Design-time Style Sheets. A folha de estilos anexada ao seu documento. Se voc criar uma folha de estilos utilizando o exemplo anterior, todos os itens de lista e pargrafos sero formatados com o atributo display:block, possibilitando, assim, que voc ative ou desative os auxlios visuais de blocos de layout CSS para itens de lista e pargrafos.
7.
Tpicos relacionados Utilizar folhas de estilo Design-Time na pgina 442
Utilizar rguas, guias e grades para definir o layout de pginas

Utilize rguas, guias e grades como auxlios visuais para posicionar, medir ou redimensionar elementos na visualizao do projeto da janela do documento.
250
Utilizar rguas
As rguas ajudam a medir, organizar e planejar seu layout. Elas podem aparecer nas bordas superior e esquerda da pgina, marcadas em pixels, polegadas ou centmetros.
Para alterar as definies de rgua, siga um destes procedimentos:

Para mostrar ou ocultar as rguas, selecione View > Rulers > Show. Para alterar a origem, arraste o cone de origem da rgua (no canto superior esquerdo da visualizao do projeto da janela do documento) em qualquer lugar da pgina. Para redefinir a origem para a posio padro, selecione View > Rulers > Reset Origin (Redefinir a origem).
Para alterar a unidade de medida, selecione Pixels, Inches ou Centimeters no submenu View > Rulers .
Utilizar guias
As guias so linhas que voc arrasta das rguas para o documento. Elas ajudam a colocar e alinhar objetos com maior preciso. Voc tambm pode usar guias para medir o tamanho dos elementos de pgina ou emular as dobras (reas visveis) de navegadores da Web. Para ajudar a alinhar elementos, o Dreamweaver permite encaixar os elementos nas guias e vice-versa. (Os elementos devem ter uma posio absoluta para que o recurso de encaixe funcione.) Voc tambm pode bloquear as guias para impedir que sejam acidentalmente movidas por um outro usurio.
Para criar uma guia horizontal ou vertical:
1. 2.
Arraste o ponteiro do mouse a partir da rgua correspondente. Posicione a guia na janela do documento e libere o boto do mouse. Voc pode reposicionar a guia arrastando-a novamente.
N O TA
Por padro, as guias so gravadas como medidas absolutas em pixels, a partir da parte superior ou do lado esquerdo do documento, e so mostradas em relao origem da rgua. Para gravar a guia como um percentual, pressione a tecla Shift enquanto cria ou move a guia.
Para mostrar ou ocultar guias:
Selecione View> Guides> Show Guides (Mostrar guias).
251
Para encaixar os elementos nas guias:
Selecione View > Guides > Snap to Guides (Encaixar nas guias).
N OT A
Quando voc redimensiona elementos, como camadas, tabelas e imagens, os elementos redimensionados se encaixam nas guias.
Para encaixar as guias nos elementos:
Selecione View > Guides > Guides Snap to Elements (Guias se encaixam nos elementos).
Para bloquear ou desbloquear todas as guias:
Selecione View > Guides > Lock Guides (Bloquear guias).
Para mover uma guia para uma posio especfica:

1. 2.
Clique duas vezes na guia. Insira nova posio na caixa de dilogo Move Guide (Mover guia) e clique em OK.
Para exibir a posio de uma guia:
Mantenha o ponteiro do mouse posicionado em cima da guia.
Para exibir a distncia entre as guias:
Pressione a tecla Control (no Windows) ou a tecla Command (no Macintosh) e mantenha o ponteiro do mouse em qualquer posio entre as duas guias.
N OT A
A unidade de medida a mesma usada para as rguas.
Para alterar a cor da guia:

1. 2.
Selecione View > Guides > Edit Guides (Editar guias). Selecione a nova cor da guia no menu pop-up Guide Color (Cor da guia) e clique em OK.
Para alterar a cor que indica a distncia entre as guias:

1. 2.
Selecione View > Guides > Edit Guides. Selecione a cor no menu pop-up Distance Color (Cor para distncia) e clique em OK.
Para emular a dobra (rea visvel) de um navegador da Web:
Selecione View > Guides e selecione um tamanho predefinido de janela de navegador no menu.
Para remover uma guia:
Arraste a guia para fora do documento.
252
Para limpar todas as guias:
Selecione View > Guides > Clear Guides (Limpar guias).
Utilizar guias com modelos

Quando se adicionam guias a um modelo do Dreamweaver, todas as instncias do modelo herdam essas guias. Nas instncias de modelos, entretanto, as guias so tratadas como regies editveis, de modo que os usurios possam modific-las. As guias modificadas nas instncias de modelos so restauradas na sua localizao original sempre que a instncia atualizada com o modelo-mestre. Voc tambm pode adicionar suas prprias guias s instncias de um modelo. As guias adicionadas desse modo no so substitudas quando a instncia do modelo atualizada com o modelo-mestre. Tpicos relacionados Redimensionar camadas na pgina 230

Mover camadas na pgina 232 Alinhar camadas na pgina 232
Utilizar a grade
A grade exibe um sistema de linhas horizontais e verticais na janela do documento. til para posicionar objetos com preciso. medida que os elementos da pgina que tm posio absoluta forem movidos, voc poder encaix-los automaticamente na grade e alter-la ou controlar o comportamento de encaixe especificando as definies da grade. O encaixe funcionar independentemente da visibilidade da grade.
Para mostrar ou ocultar a grade:
Selecione View > Grid (Grade) > Show Grid (Mostrar grade).
Para ativar ou desativar o encaixe:
Selecione View > Grid > Snap to Grid (Encaixar na grade).
Para alterar as definies da grade:

1.
Selecione View> Grid > Grid Settings (Definies da grade).
253
A caixa de dilogo Grid Settings exibida.
2.
Defina as opes conforme desejado. Para obter mais informaes, clique no boto Help da caixa de dilogo. Clique em OK.
3.
Tpicos relacionados Redimensionar camadas na pgina 230

Mover camadas na pgina 232 Alinhar camadas na pgina 232
Utilizar uma imagem de rastreamento

Voc pode utilizar uma imagem de rastreamento como um guia para recriar uma pgina criada em um aplicativo grfico, como o Macromedia Freehand ou Fireworks. As imagens de rastreamento so imagens JPEG, GIF ou PNG que so colocadas no fundo da janela do documento. Voc pode ocultar a imagem, definir a sua opacidade e alterar a sua posio.
Para colocar uma imagem de rastreamento na janela do documento:
1.
Siga um destes procedimentos:

Selecione View > Tracing Image (Imagem de rastreamento) > Load (Carregar). Selecione Modify> Page Properties (Propriedades da pgina) e, em seguida, clique no boto Browse (Procurar) ao lado da caixa de texto Tracing Image.
2.
Na caixa de dilogo que exibida, selecione um arquivo de imagem e clique em Select (Selecionar), no Windows, ou em Choose (Escolher), no Macintosh. Ser exibida a caixa de dilogo Page Properties.
254
3.
Especifique a transparncia da imagem arrastando o boto deslizante Image Transparency (Transparncia da imagem) e clique em OK.
Para alternar para outra imagem de rastreamento ou alterar a transparncia da imagem de rastreamento atual a qualquer momento, selecione Modify > Page Properties.
Para mostrar ou ocultar a imagem de rastreamento:
Selecione View > Tracing Image > Show.
A imagem de rastreamento fica visvel apenas no Dreamweaver. Ela nunca fica visvel quando a pgina exibida em um navegador. Quando a imagem de rastreamento fica visvel, a imagem e a cor de fundo reais da pgina no podem ser visualizadas na janela do documento; contudo, elas aparecem quando a pgina exibida em um navegador.
Para alterar a posio de uma imagem de rastreamento:
1. 2.
Selecione View > Tracing Image > Adjust Position. Siga um destes procedimentos:
Para especificar com preciso a posio da imagem de rastreamento, digite valores de coordenadas nas caixas de texto X e Y. Para mover a imagem um pixel de cada vez, utilize as teclas de seta. Para mover a imagem cinco pixels de cada vez, pressione a tecla Shift e uma tecla de seta.
Para redefinir a posio da imagem de rastreamento:
Selecione View > Tracing Image > Reset Position. 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. 2.
Selecionar um elemento na janela do documento. Selecione View > Tracing Image > Align with Selection. O canto superior esquerdo da imagem de rastreamento alinhado com o canto superior esquerdo do elemento selecionado.
Utilizar uma imagem de rastreamento
255
256
CAPTULO 8
Apresentar contedo com tabelas

As tabelas so ferramentas poderosas para a apresentao de dados tabulares e para a definio do layout de textos e grficos em uma pgina. Muitos designers usam tabelas para definir o layout de pginas da Web. O Macromedia Dreamweaver 8 fornece dois modos de visualizao e manipulao de tabelas: O modo Standard (Padro), no qual as tabelas so apresentadas como grades de linhas e colunas, e o modo Layout (Layout), que permite desenhar, redimensionar e mover caixas na pgina enquanto estiver usando tabelas para a estrutura subjacente (consulte o Captulo 9, Criao de pginas no modo Layout, na pgina 283).
N OT A
possvel tambm definir o layout das pginas utilizando o posicionamento de CSS (consulte o Captulo 7, Criar layouts de pginas com CSS, na pgina 219).

Sobre as tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .258 Inserir uma tabela e adicionar contedo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Importar e exportar dados tabulares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Selecionar os elementos da tabela. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .262 Usar o modo Expanded Tables (Tabelas expandidas) para facilitar a edio da tabela. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .266 Formatar tabelas e clulas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Redimensionar tabelas, colunas e linhas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270 Adicionar e remover linhas e colunas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Dividir e mesclar clulas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Copiar, colar e excluir clulas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Aninhar tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 Ordenar tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
257
Sobre as tabelas
As tabelas so ferramentas poderosas para a apresentao de dados tabulares e para a definio do layout de textos e grficos em uma pgina HTML. Uma tabela consiste em uma ou mais linhas, sendo que cada linha formada por uma ou mais clulas. Embora normalmente as colunas no sejam especificadas de forma explcita no cdigo HTML, o Dreamweaver permite manipul-las, bem como linhas e clulas. O Dreamweaver exibe a largura da tabela e da coluna para cada coluna da tabela quando a tabela selecionada ou quando o ponto de insero est na tabela. Ao lado das larguras, esto as setas relativas ao menu do cabealho da tabela e aos menus do cabealho da coluna. Use os menus para ter acesso rpido a alguns comandos relacionados a tabelas. Voc pode ativar ou desativar as larguras e os menus, conforme a necessidade (consulte o Exibir larguras e menus de tabelas e colunas na pgina 274). Se voc no vir uma largura para a tabela ou para a coluna, isso significa que a tabela ou coluna no possuem uma largura especfica no cdigo HTML. Se aparecerem dois nmeros, a largura visual que aparece no modo Design no coincide com o que foi especificado no cdigo HTML. Isto poder ocorrer quando a tabela redimensionada arrastando seu canto inferior direito ou quando o contedo adicionado a uma clula maior do que a largura definida para essa clula. Por exemplo, se a largura de uma coluna for definida como 200 pixels, ao adicionar contedo que aumente a largura para 250 pixels, dois nmeros aparecero para essa coluna: 200 (a largura especificada no cdigo) e (250) entre parnteses (a largura visual da coluna, na forma como ele processada na sua tela). Para compatibilizar as duas larguras de coluna, veja Tornar as larguras das colunas consistentes com as larguras visuais na pgina 273. Tpicos relacionados Inserir uma tabela e adicionar contedo na pgina 260
Ordem de precedncia para a formatao de tabelas em HTML

Ao formatar tabelas na visualizao do projeto, possvel definir propriedades para toda a tabela ou para linhas, colunas ou clulas selecionadas da tabela. Quando uma propriedade, como cor de fundo ou alinhamento, definida com um valor para toda a tabela e outro valor para clulas individuais, a formatao da clula tem precedncia sobre a formatao da linha, que, por sua vez, tem precedncia sobre a formao da tabela.
258
Captulo 8: Apresentar contedo com tabelas
A ordem de precedncia para formatao da tabela esta:

1. 2. 3.
Clulas Linhas Tabela
Por exemplo: se voc definir a cor de fundo azul para uma nica clula e definir a cor de fundo amarelo para toda a tabela, a clula azul no mudar para a cor amarela, uma vez que a formatao das clulas tem precedncia sobre a formatao da tabela.
N OT A
Quando se definem propriedades em uma coluna, o Dreamweaver modifica os atributos da tag td correspondente a cada clula da coluna.
Tpicos relacionados Formatar tabelas e clulas na pgina 267
Sobre a diviso e a mesclagem de clulas da tabela

possvel mesclar qualquer nmero de clulas adjacentes (contanto que a seleo inteira seja uma linha ou um retngulo de clulas) para produzir uma nica clula abrangendo diversas colunas ou linhas. possvel dividir uma clula em vrias linhas ou colunas, independentemente de ela j ter sido mesclada. O Dreamweaver reestrutura automaticamente a tabela (adicionando quaisquer atributos colspan ou rowspan necessrios) para criar o formato especificado. Na ilustrao a seguir, as clulas no meio das duas primeiras linhas foram mescladas em uma nica clula, de forma a abrangerem duas linhas.
Tpicos relacionados Dividir e mesclar clulas na pgina 276
Sobre as tabelas
259
Inserir uma tabela e adicionar contedo

Utilize a barra Insert (Inserir) ou o menu Insert (Inserir) para criar uma nova tabela. possvel adicionar textos e imagens s clulas da tabela do mesmo modo que se adicionam textos e imagens fora de uma tabela (consulte o Captulo 13, Inserir e formatar texto, na pgina 405 e o Captulo 14, Inserir imagens, na pgina 445).
Para inserir uma tabela:
1.
Na visualizao do projeto da janela do documento, coloque o ponto de insero no local onde deseja que a tabela seja exibida.
N OT A
Se o documento estiver em branco, o nico local para colocar o ponto de insero ser o incio do documento.
2.

Selecione Insert (Inserir) > Table (Tabela). Na categoria Common (Comuns) da barra Insert, clique no boto Table.
A caixa de dilogo Insert Table (Inserir tabela) exibida.
3.
4.
A tabela ser exibida no documento. Tpicos relacionados Exibir e configurar as propriedades de tabelas, clulas, linhas e colunas na pgina 267
Editar atributos de acessibilidade para uma tabela na pgina 268
260
Importar e exportar 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 tabulaes, vrgulas, dois-pontos, ponto-e-vrgula ou outros delimitadores) podem ser importados para o Dreamweaver e formatados como uma tabela. Tambm possvel exportar dados da tabela, a partir do Dreamweaver, para um arquivo de texto com o contedo das clulas adjacentes separado por um delimitador. possvel utilizar vrgulas, dois-pontos, ponto-e-vrgulas ou espaos como delimitadores. Quando uma tabela exportada, toda ela exportada; impossvel selecionar partes de uma tabela para exportao.
DICA
Se desejar exportar somente alguns dados de uma tabela, por exemplo, as seis primeiras linhas ou as seis primeiras colunas, copie as clulas que contm os dados, col-las fora da tabela (para criar uma nova tabela) e exportar a nova tabela.
Para importar dados da tabela:

1.

Selecione File (Arquivo) > Import (Importar) > Tabular Data (Dados tabulares). Selecione Insert (Inserir) > Table Objects (Objetos de tabela) > Import Tabular Data (Importar dados tabulares).
A caixa de dilogo Import Tabular Data (Importar dados tabulares) exibida.
2.
Na caixa de dilogo, fornea as informaes sobre o arquivo que contm os dados. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
3.
Importar e exportar dados tabulares
261
Para exportar uma tabela:

1. 2.
Coloque o ponto de insero em qualquer clula da tabela. Selecione File (Arquivo) > Export (Exportar) > Table (Tabela). A caixa de dilogo Export Table (Exportar tabela) exibida.
3.
Na caixa de dilogo Export Table, especifique as opes para exportar a tabela. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em Export. A caixa de dilogo Export Table As (Exportar tabela como) exibida. Digite um nome para o arquivo. Clique em Save (Salvar).
4.
5. 6.
Selecionar os elementos da tabela

possvel selecionar uma tabela, uma linha ou uma coluna inteira ao mesmo tempo. Tambm possvel selecionar uma ou mais clulas individuais. Quando voc move o ponteiro sobre uma tabela, linha, coluna ou clula, o Dreamweaver reala todas as clulas dessa seo de modo que voc saiba exatamente quais clulas sero selecionadas se voc clicar na seleo. Esse procedimento pode ser til quando houver tabelas sem bordas, clulas que abrangem mltiplas colunas ou linhas ou, ainda, tabelas aninhadas. possvel destacar a cor de realce na caixa de dilogo Preferences (Preferncias).
DICA
Se o ponteiro do mouse for posicionado sobre a borda de uma tabela e a tecla Control (no Windows) ou Command (no Macintosh) for pressionada, toda a estrutura da tabela isto , todas as clulas da tabela ser realada. Esse procedimento pode ser til quando houver tabelas aninhadas e voc desejar ver a estrutura de uma das tabelas.
Para alterar a cor de realce para elementos selecionados da tabela:

1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida. Selecione Highlighting (Realce) na lista de categorias esquerda.
2.
262
3.
Faa uma dessas alteraes:
Para alterar a cor do realce para os elementos da tabela, clique na caixa de cor Mouseover (Seleo do mouse) utilizando o seletor de cores (ou digite o valor hexadecimal relativo cor do realce na caixa de texto). Para obter informaes sobre como utilizar o seletor de cores, consulte Trabalhar com cores na pgina 384.
Para ativar ou desativar o realce para elementos da tabela, marque ou desmarque a caixa de seleo Show (Mostrar) de Mouse-over.
NO T A
Essas opes afetam todos os objetos, como camadas e tabelas e clulas de visualizao do modo Layout que o Dreamweaver reala quando voc move o ponteiro sobre eles.
4.
Clique em OK.
Tpicos relacionados Formatar tabelas e clulas na pgina 267

Redimensionar tabelas, colunas e linhas na pgina 270 Copiar, colar e excluir clulas na pgina 278
Selecionar uma tabela

H vrias maneiras de selecionar a tabela inteira de uma s vez.
Para selecionar uma tabela inteira, siga um dos procedimentos abaixo:
Clique no canto superior esquerdo da tabela, em qualquer rea na margem superior ou inferior da tabela ou ainda na borda de uma linha ou coluna.
NO T A
O ponteiro passa para o cone de grade de tabela quando a tabela selecionada (a menos que voc clique na borda de uma linha ou coluna).
Clique em uma clula da tabela e, em seguida, selecione a tag <table> no seletor de tags, no canto inferior esquerdo da janela do documento. Clique em uma clula da tabela e selecione Modify (Modificar) > Table (Tabela) > Select Table (Selecionar tabela).
263
Clique em uma clula da tabela, clique no menu de cabealho da tabela e, em seguida, selecione Select Table (Selecionar tabela). Alas de seleo so exibidas na borda inferior e direita da tabela selecionada.
Tpicos relacionados Selecionar clulas na pgina 265
Selecionar linhas ou colunas

possvel selecionar uma linha ou coluna individual ou selecionar mltiplas linhas ou colunas.
Para selecionar linhas ou colunas individuais ou mltiplas:
1.
Posicione o ponteiro de forma que aponte para a margem esquerda de uma linha ou para a margem superior de uma coluna. Quando o ponteiro se transformar em uma seta de seleo, clique para selecionar uma linha ou coluna ou arrastar para selecionar vrias linhas ou colunas.
2.
Para selecionar uma nica coluna:

1. 2.
Clique na coluna. Clique no menu de cabealho da coluna e selecione Select Column (Selecionar coluna).
Tpicos relacionados Selecionar uma tabela na pgina 263
264
Selecionar clulas
possvel selecionar uma nica clula, uma linha ou bloco de clulas ou, ainda, clulas noadjacentes. Para selecionar linhas ou colunas inteiras, consulte Selecionar linhas ou colunas na pgina 264.
Para selecionar uma nica clula, siga um dos procedimentos abaixo:
Clique na clula e, em seguida, selecione a tag <td> no seletor de tags, no canto inferior esquerdo da janela do documento. Pressione a tecla Control (no Windows) ou Command (no Macintosh) na clula. Clique na clula e selecione Edit (Editar) > Select All (Selecionar tudo).
DICA
Escolha Edit (Editar) > Select All (Selecionar tudo) novamente quando a clula estiver selecionada a fim de selecionar a tabela inteira.
Para selecionar uma linha ou um bloco retangular de clulas, siga um dos procedimentos abaixo:

Arraste de uma clula a outra. Clique em uma clula, pressione a tecla Control (no Windows) ou a tecla Command (no Macintosh) na mesma clula para selecion-la e, em seguida, pressione a tecla Shift em outra clula. Todas as clulas dentro da regio linear ou retangular definida pelas duas clulas so selecionadas.
Para selecionar clulas no-adjacentes:
Mantenha a tecla Control (no Windows) ou a tecla Command (no Macintosh) pressionada e clique nas clulas, linhas ou colunas que deseja selecionar. Se as clulas, linhas ou colunas nas quais clicar ainda no estiverem selecionadas, elas sero adicionadas seleo. Se j tiverem sido selecionadas, sero removidas da seleo.
Tpicos relacionados Selecionar uma tabela na pgina 263
265
Usar o modo Expanded Tables (Tabelas expandidas) para facilitar a edio da tabela
O modo Expanded Tables (Tabelas expandidas) adiciona, temporariamente, o preenchimento e espaamento das clulas a todas as tabelas de um documento e aumenta as bordas das tabelas para facilitar a edio. Esse modo permite selecionar itens em tabelas ou posicionar com preciso o ponto de insero. Por exemplo, talvez seja preciso expandir uma tabela para posicionar o ponto de insero esquerda ou direita de uma imagem, sem selecionar acidentalmente a imagem ou a clula da tabela.
Para passar ao modo Expanded Tables:

1.
2.
Uma barra denominada Expanded Tables Mode aparece na parte superior da janela do documento. O Dreamweaver adiciona preenchimento e espaamento de clula a todas as tabelas da pgina e aumenta as bordas das tabelas.
266
N OT A

Aps fazer a seleo ou posicionar o ponto de insero, retorne ao modo Standard (Padro) da visualizao do projeto para fazer a edio necessria. Algumas operaes visuais, como redimensionamento, no tero os resultados esperados no modo Expanded Tables.
Se voc estiver no modo de exibio Code, selecione View (Exibir) > Design ou View > Code and Design (Cdigo e design). No possvel passar para o modo Expanded Tables na visualizao de cdigo. Siga um dos procedimentos abaixo: Selecione View (Exibir) > Table Mode (Modo da tabela) > Expanded Tables Mode (Modo de tabelas expandidas). Na categoria Layout da barra Insert (Inserir), clique no boto Expanded Tables Mode.
Para sair do modo Expanded Tables, siga um destes procedimentos:
Na barra Expanded Tables Mode, na parte superior da janela do documento, clique em Exit (Sair). Selecione View (Exibir) > Table Mode (Modo da tabela) > Layout Mode (Modo Layout). Na categoria Layout da barra Insert, clique no boto Modo Standard.
O Dreamweaver volta para o modo Standard.
Formatar tabelas e clulas

possvel alterar a aparncia das tabelas definindo-se as propriedades da tabela e das clulas ou aplicando-se um estilo predefinido tabela. Antes de alterar as propriedades de tabelas e clulas, recomendvel saber que propriedades tm precedncia sobre as outras (consulte Ordem de precedncia para a formatao de tabelas em HTML na pgina 258).
DICA
Para formatar o texto de uma clula da tabela, utilize os mesmos procedimentos que usaria para formatar texto fora de uma tabela. Para obter mais informaes, consulte Captulo 13, Inserir e formatar texto, na pgina 405.
Tpicos relacionados Redimensionar tabelas, colunas e linhas na pgina 270
Exibir e configurar as propriedades de tabelas, clulas, linhas e colunas

Quando uma tabela ou clula selecionada, o Property inspector (Inspetor de propriedades) permite exibir e alterar suas propriedades.
N OT A
Antes de alterar as propriedades de elementos da tabela, recomendvel saber que propriedades tm precedncia sobre outras (consulte Ordem de precedncia para a formatao de tabelas em HTML na pgina 258).
Para visualizar e definir propriedades da tabela ou de elementos da tabela:

1.
Selecione uma tabela, clula, linha ou coluna (consulte Selecionar os elementos da tabela na pgina 262). Clique na seta de expanso, no canto inferior direito do Property inspector, aberto a partir da seleo de Window (Janela) > Properties (Propriedades), para examinar todas as propriedades.
2.
267
3.
Altere as propriedades conforme a necessidade. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
N OT A
Quando se definem propriedades em uma coluna, o Dreamweaver modifica os atributos da tag td correspondente a cada clula da coluna. Ao definir 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 clulas de uma linha, a aplicao do formato tag tr produz um cdigo HTML mais conciso e limpo.
Editar atributos de acessibilidade para uma tabela

Caso no tenham sido adicionados atributos de acessibilidade sua tabela ao inseri-la (consulte Inserir uma tabela e adicionar contedo na pgina 260) e for preciso adicion-los posteriormente, ou se for preciso editar atributos de acessibilidade, possvel realizar essas tarefas na visualizao do cdigo ou na visualizao do projeto.
Para adicionar ou editar valores de acessibilidade para uma tabela na visualizao de cdigo:
Edite os atributos apropriados no cdigo.

DICA
Para localizar rapidamente as tags no cdigo, clique na tabela e, em seguida, selecione <table> no seletor de tags, na parte inferior da janela do documento.
Para adicionar ou editar valores de acessibilidade para uma tabela na visualizao do projeto, siga um destes procedimentos:

Para editar a legenda da tabela, realce a legenda e, em seguida, digite uma nova legenda. Para editar o alinhamento da legenda, coloque o ponto de insero na legenda da tabela, clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e, em seguida, selecione Edit Tag Code (Editar cdigo da tag). Para editar o resumo da tabela, selecione a tabela, clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e, em seguida, selecione Edit Tag Code.
Tpicos relacionados Exibir e configurar as propriedades de tabelas, clulas, linhas e colunas na pgina 267
268
Usar um esquema de desenho para formatar uma tabela

Utilizar o comando Format Table (Formatar tabela) para aplicar rapidamente um estilo predefinido a uma tabela. Em seguida, as opes podem ser selecionadas para personalizar o estilo ainda mais.
NO T A
Somente as tabelas mais simples podem ser formatadas usando estilos predefinidos. No possvel usar esses estilos para formatar tabelas que contm clulas mescladas (colspan ou rowspan) ou grupos de colunas ou, ainda, para formatar qualquer outra tabela que no consista em uma grade retangular simples de clulas.
Para utilizar um estilo de tabela predefinido:

1. 2.
Selecione uma tabela (consulte Selecionar uma tabela na pgina 263). Select Commands (Comandos) > Format Table (Formatar tabela). A caixa de dilogo Format Table exibida.
3.
Personalizar as opes, conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em Apply (Aplicar) ou em OK para formatar a tabela com o estilo selecionado.
4.
269
Redimensionar tabelas, colunas e linhas

possvel redimensionar uma tabela inteira ou determinadas linhas e colunas da tabela. Se houver dificuldade para redimensionar a largura das colunas ou altura das linhas, voltar e comear novamente. Algumas vezes, as larguras das colunas definidas no cdigo HTML no correspondem s suas larguras aparentes na tela. Quando isso acontecer, voc pode tornar as larguras iguais. As larguras das tabelas e das colunas e os menus dos cabealhos aparecem no Dreamweaver para ajudar a definir o layout das tabelas. possvel ativar ou desativar as larguras e os menus, conforme a necessidade.
Redimensionar uma tabela

possvel redimensionar uma tabela arrastando uma de suas alas de seleo. O Dreamweaver exibe a largura da tabela, juntamente com um menu dos cabealhos da tabela, na parte superior ou inferior da tabela, quando a tabela selecionada ou quando o ponto de insero est na tabela.
NO TA
A largura da tabela e o menu de cabealhos da tabela podem ser desativados, se necessrio (consulte Exibir larguras e menus de tabelas e colunas na pgina 274).
Quando uma tabela inteira redimensionada, o tamanho de todas as clulas da tabela alterado na mesma proporo. Se as clulas de uma tabela tiverem larguras ou alturas especificadas explicitamente, o redimensionamento da tabela alterar o tamanho visual das clulas na janela do documento, mas no modificar as larguras e alturas especificadas das clulas. Para limpar larguras ou alturas definidas, consulte Limpar larguras e alturas definidas na pgina 273.
Para redimensionar uma tabela:
1.
Selecione a tabela (consulte Selecionar uma tabela na pgina 263). So exibidas alas de seleo na tabela.
270
2.

Para redimensionar a tabela horizontalmente, arraste a ala de seleo direita. Para redimensionar a tabela verticalmente, arraste a ala de seleo da parte inferior. Para redimensionar a tabela em ambas as dimenses, arraste a ala de seleo no canto inferior direito.
Redimensionar colunas e linhas

possvel alterar a largura de uma coluna ou a altura de uma linha no Property inspector (Inspetor de propriedades) ou arrastando as bordas da coluna ou linha. Se houver dificuldade no redimensionamento, possvel limpar as larguras das colunas ou as alturas das linhas e comear novamente (consulte Limpar larguras e alturas definidas na pgina 273).
NO TA
Tambm possvel alterar a largura e a altura da clula diretamente no cdigo HTML utilizando a visualizao do cdigo. Para obter mais informaes, consulte Codificar no Dreamweaver na pgina 603.
O Dreamweaver exibe as larguras das colunas, juntamente com os menus de cabealhos das colunas, na parte superior ou inferior das colunas quando a tabela selecionada ou quando um ponto de insero est na tabela. Para obter mais informaes, consulte Sobre as tabelas na pgina 258.
NO T A
Se necessrio, possvel desativar as larguras das colunas e os menus de cabealhos (consulte Exibir larguras e menus de tabelas e colunas na pgina 274).
Para alterar a largura de uma coluna e manter a largura geral da tabela:
Arraste a borda direita da coluna a ser alterada. A largura da coluna adjacente tambm alterada; na verdade, duas colunas so redimensionadas. A visualizao das alteraes efetuadas mostra de que forma as colunas sero alteradas; a largura geral da tabela no alterada.
N OT A
Em tabelas com larguras baseadas em porcentagem (e no em pixels), se a borda direita da coluna mais direita for arrastada, a largura da tabela inteira alterada e todas as colunas tero a largura aumentada ou reduzida proporcionalmente.
271
Para alterar a largura de uma coluna e manter o tamanho das outras colunas:
Mantenha a tecla Shift pressionada e arraste a borda da coluna. A largura da coluna alterada. A visualizao das alteraes efetuada mostra de que forma a largura das colunas ser ajustada; a largura geral da tabela alterada para acomodar a coluna que est sendo redimensionada.
Para alterar visualmente a altura de uma linha:
Arraste a borda inferior da linha.
Para definir a largura de uma coluna ou a altura de uma linha utilizando o Property inspector:
1. 2.
Selecione a coluna ou linha (consulte Selecionar linhas ou colunas na pgina 264). No Property inspector, aberto a partir da seleo de Window (Janela) > Properties (Propriedades), digite um valor no campo de texto W (L) para a largura da coluna ou no campo de texto H (A) para a altura da linha. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
DICA
possvel especificar larguras e alturas como pixels ou porcentagens e tambm converter de pixels para porcentagens e vice-versa.
3.
Pressione a tecla Tab ou Enter (no Windows) ou Return (no Macintosh) para aplicar o valor.
Tpicos relacionados Redimensionar uma tabela na pgina 270

Limpar larguras e alturas definidas na pgina 273 Exibir larguras e menus de tabelas e colunas na pgina 274
272
Tornar as larguras das colunas consistentes com as larguras visuais

Se voc vir dois nmeros para a largura de uma coluna, isso significa que a largura de coluna definida no cdigo HTML no reflete a largura aparente da coluna na tela. possvel tornar a largura especificada no cdigo consistente com a largura visual. Para obter mais informaes, consulte Sobre as tabelas na pgina 258.
Para tornar as larguras consistentes:
1. 2.
Clique em uma clula. Clique no menu do cabealho da tabela e selecione Make All Widths Consistent (Tornar consistentes todas as larguras).
O Dreamweaver redefine a largura especificada no cdigo para que ela corresponda largura visual. Tpicos relacionados Redimensionar uma tabela na pgina 270
Redimensionar colunas e linhas na pgina 271
Limpar larguras e alturas definidas

Talvez seja preciso limpar as larguras e alturas definidas antes de redimensionar uma tabela ou caso haja problemas no redimensionamento de uma tabela ou de colunas ou linhas individuais e voc deseje reiniciar o processo.
N OT A
Ao redimensionar uma tabela arrastando uma de suas alas de seleo, o tamanho visual das clulas da tabela alterado, mas no alterada nenhuma das larguras ou alturas especificadas das clulas. recomendvel limpar larguras e alturas definidas antes do redimensionamento.
Para limpar todas as larguras ou alturas definidas em uma tabela:

1.
Selecione a tabela (consulte Selecionar uma tabela na pgina 263).
273
2.
Selecione Modify (Modificar) > Table (Tabela) > Clear Cell Widths (Limpar larguras das clulas) ou Modify > Table > Clear Cell Heights (Limpar alturas das clulas). No Property inspector (Inspetor de propriedades), aberto a partir da seleo de Window (Janela) > Properties (Propriedades), clique no boto Clear Row Heights (Limpar as alturas das linhas) ou no boto Clear Column Widths (Limpar as larguras das colunas). Clique no menu do cabealho da tabela e selecione Clear All Heights (Limpar todas as alturas) ou Clear All Widths (Limpar todas as larguras).
Para limpar a largura definida de uma coluna:

1. 2.
Clique na coluna. Clique no menu de cabealho da coluna e selecione Clear Column Width.

Redimensionar colunas e linhas na pgina 271 Tornar as larguras das colunas consistentes com as larguras visuais na pgina 273
Exibir larguras e menus de tabelas e colunas

O Dreamweaver exibe larguras de tabelas e colunas, juntamente com setas para acesso ao menu de cabealhos de tabelas e ao menu de cabealhos de colunas, quando uma tabela selecionada ou quando o ponto de insero est na tabela. Para obter mais informaes, consulte Sobre as tabelas na pgina 258. Voc pode ativar ou desativar as larguras e os menus, conforme a necessidade.
Para ativar ou desativar as larguras e os menus de tabelas e colunas, siga um destes procedimentos:
Selecione View (Exibir) > Visual Aids (Auxlios visuais) > Table Widths (Larguras da tabela).
274
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) na tabela e, em seguida, selecione Table (Tabela) > Table Widths.
Redimensionar colunas e linhas na pgina 271
Adicionar e remover linhas e colunas

Para adicionar e remover linhas e colunas, utilize o comando Modify (Modificar) > Table (Tabela) ou o menus dos cabealhos das colunas.
DICA
Quando voc pressiona Tab na ltima clula de uma tabela, outra linha adicionada automaticamente tabela.
Para adicionar uma nica linha ou coluna:

1. 2.
Clique em uma clula. Siga um dos procedimentos abaixo:
Selecione Modify (Modificar) > Table (Tabela) > Insert Row (Inserir linha) ou Modify (Modificar) > Table (Tabela) > Insert Column (Inserir coluna). Uma linha exibida acima do ponto de insero ou uma coluna exibida esquerda do ponto de insero.
Clique no menu do cabealho da coluna e selecione Insert Column Left (Inserir coluna esquerda) ou Insert Column Right (Inserir coluna direita).
Uma coluna exibida esquerda ou direita do ponto de insero.

Para adicionar mltiplas linhas ou colunas:
1. 2.
Clique em uma clula. Selecione Modify (Modificar) > Table (Tabela) > Insert Rows or Columns (Inserir linhas ou colunas). Ser exibida a caixa de dilogo Insert Rows or Columns.
Adicionar e remover linhas e colunas
275
3.
Selecione Rows (Linhas) ou Columns (Colunas) e, em seguida, preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
4.
As linhas ou colunas so exibidas na tabela.

Para excluir uma linha ou coluna, siga um dos procedimentos abaixo:
Clique em uma clula da linha ou coluna que deseja excluir e selecione Modify (Modificar) > Table (Tabela) > Delete Row (Excluir linha) ou Modify (Modificar) > Table (Tabela) > Delete Column (Excluir coluna). Selecione a linha ou coluna inteira (consulteSelecionar linhas ou colunas na pgina 264) e selecione Edit (Editar) > Clear (Limpar) ou pressione a tecla Delete.
A linha ou coluna inteira desaparece da tabela.

Para adicionar ou excluir linhas ou colunas utilizando o Property inspector (Inspetor de propriedades):
1. 2.
Selecione a tabela (consulte Selecionar uma tabela na pgina 263). No Property inspector, aberto a partir da seleo de Window (Janela) > Properties (Propriedades), siga um dos procedimentos abaixo:
Aumente ou diminua o valor de Rows (Linhas) para adicionar ou excluir linhas. O Dreamweaver permite adicionar e remover linhas na parte inferior da tabela. Aumente ou diminua o valor de Cols (Colunas) para adicionar ou excluir colunas. O Dreamweaver adiciona e remove colunas direita da tabela.
NO T A
O Dreamweaver no avisa quando as linhas ou colunas que contm dados esto sendo excludas.
Tpicos relacionados Inserir uma tabela repetitiva na pgina 351
Exibir vrios resultados de recordsets na pgina 806
Dividir e mesclar clulas

Utilize o Property inspector (Inspetor de propriedades) ou os comandos do submenu Modify (Modificar) > Table (Tabela) para dividir ou mesclar clulas. Para obter mais informaes, consulte Sobre a diviso e a mesclagem de clulas da tabela na pgina 259.
276
Como mtodo alternativo para mesclar e dividir clulas, o Dreamweaver tambm fornece ferramentas para aumentar e diminuir o nmero de linhas ou colunas estendidas por uma clula.
Para mesclar duas ou mais clulas de uma tabela:
1.
Selecione as clulas em uma linha contgua, usando o formato retangular. Na ilustrao a seguir, a seleo um retngulo de clulas, por isso elas podem ser mescladas.
Na ilustrao a seguir, a seleo no retangular, por isso as clulas no podem ser mescladas.
2.

Select Modify (Modificar) > Table (Tabela) > Merge Cells (Mesclar clulas). No Property inspector expandido, aberto a partir da seleo de Window (Janela) > Properties (Propriedades), clique no boto Merge Cells (Mesclar clulas).
NO T A
Se voc no vir o boto, clique na seta localizada no canto inferior direito do Property inspector para ver todas as opes.
O contedo das clulas individuais colocado na clula mesclada resultante. As propriedades da primeira clula selecionada so aplicadas clula mesclada.
Para dividir uma clula:
1. 2.
Clique na clula. Siga um dos procedimentos abaixo:
Selecione Modify (Modificar) > Table (Tabela) > Split Cells (Dividir clulas).
Dividir e mesclar clulas
277
No Property inspector, aberto a partir da seleo de Window > Properties, clique no boto Split Cells.
N OT A
Se voc no vir o boto, clique na seta localizada no canto inferior direito do Property inspector para ver todas as opes.
3.
Na caixa de dilogo Split Cell (Dividir clula), especifique o modo como a clula deve ser dividida. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
Para aumentar ou diminuir o nmero de linhas ou colunas estendidas por uma clula:
1. 2.
Selecione uma clula. Siga um dos procedimentos abaixo:
Selecione Modify (Modificar) > Table (Tabela) > Increase Row Span (Aumentar a extenso da linha) ou Modify > Table > Increase Column Span (Aumentar a extenso da coluna). Selecione Modify > Table > Decrease Row Span (Diminuir a extenso da linha) ou Modify > Table > Decrease Column Span (Diminuir a extenso da coluna).
Copiar, colar e excluir clulas

possvel copiar, colar ou excluir uma nica clula da tabela ou mltiplas clulas de uma s vez. conservando sua formatao. As clulas podem ser coladas no ponto de insero ou no lugar de uma seleo feita em uma tabela existente. Na colagem de vrias clulas de tabela, o contedo da rea de transferncia deve ser compatvel com a estrutura da tabela ou da parte selecionada na tabela em que as clulas sero coladas.
278
Para recortar ou copiar clulas da tabela:

1.
Selecione uma ou mltiplas clulas em uma linha contgua, usando o formato retangular. Na ilustrao a seguir, a seleo um retngulo de clulas, por isso as clulas podem ser recortadas ou copiadas.
Na ilustrao a seguir, a seleo no um retngulo, por isso as clulas no podem ser recortadas ou copiadas.
2.
Selecione Edit (Editar) > Cut (Recortar) ou Edit > Copy (Copiar).
NO T A
Se uma linha ou coluna inteira tiver sido selecionada e a opo Edit > Cut tiver sido escolhida, a linha ou coluna inteira ser removida da tabela (no apenas o contedo das clulas).
Para colar as clulas da tabela:

1.
Selecione onde deseja colar as clulas:
Para substituir as clulas existentes pelas clulas que esto sendo coladas, selecione um conjunto de clulas existentes com o mesmo layout das clulas que esto na rea de transferncia. Por exemplo: se um bloco de clulas 3 x 2 for copiado ou recortado, possvel selecionar outro bloco de clulas 3 x 2 para substituir aquele por colagem.
Para colar uma linha inteira de clulas acima de uma determinada clula, clique nesta clula.
Copiar, colar e excluir clulas
279
Para colar uma coluna inteira de clulas esquerda de uma determinada clula, clique nesta clula.
N OT A
Se houver menos de uma linha ou coluna inteira de clulas na rea de transferncia e o usurio clicar em uma clula e colar as clulas da rea de transferncia, a clula clicada e as clulas vizinhas podero ser substitudas pelas clulas que esto sendo coladas (dependendo de sua posio na tabela).
Para criar uma nova tabela com as clulas coladas, coloque o ponto de insero fora da tabela.
2.
Selecione Edit (Editar) > Paste (Colar). Se forem coladas linhas ou colunas inteiras em uma tabela existente, elas sero adicionadas tabela. Se estiver colando um clula separada, o contedo da clula selecionada ser substitudo. Se a colagem tiver que ser feita fora de uma tabela, as linhas, colunas ou clulas sero utilizadas para definir uma nova tabela.
Para remover o contedo das clulas e mant-las intactas:

1.
Selecione uma ou mais clulas.

N OT A
A seleo no pode ser composta inteiramente de linhas ou colunas completas.
2.
Selecione Edit (Editar) > Clear (Limpar) ou pressione a tecla Delete.

NO T A
Se forem selecionadas somente linhas ou colunas completas ao escolher Edit > Clear ou ao pressionar a tecla Delete, as linhas ou colunas inteiras sero removidas da tabela (no somente seu contedo).
Para excluir linhas ou colunas que contm clulas mescladas:

1. 2.
Selecione a linha ou coluna. Selecione Modify (Modificar) > Table (Tabela) > Delete Row (Excluir linha) ou Modify > Table > Delete Column (Excluir coluna).
280
Aninhar tabelas
Uma tabela aninhada uma tabela dentro de uma clula de outra tabela. possvel formatar uma tabela aninhada como qualquer outra tabela, contudo, sua largura est limitada pela largura da clula na qual exibida.
Para aninhar uma tabela na clula de uma tabela:

1. 2.
Clique em uma clula da tabela existente. Selecione Insert (Inserir) > Table (Tabela). A caixa de dilogo Insert Table (Inserir tabela) exibida. Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK. A tabela exibida na tabela existente.
3.
4.
Ordenar tabelas
possvel ordenar as linhas de uma tabela com base no contedo de uma nica coluna. Tambm possvel fazer uma ordenao mais complexa da tabela com base no contedo de duas colunas. No possvel ordenar tabelas que contenham os atributos colspan ou rowspan isto , aquelas que comportam clulas mescladas. Para obter mais informaes, consulte Dividir e mesclar clulas na pgina 276.
Para ordenar uma tabela:
1.
Selecione a tabela (consulte Selecionar uma tabela na pgina 263) ou clique em uma clula qualquer.
Ordenar tabelas
281
2.
Selecione Commands (Comandos) > Sort Table (Ordenar tabela). A caixa de dilogo Sort Table exibida. Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
3.
4.
282
CAPTULO 9
Criao de pginas no modo Layout

Um mtodo comum de se criar um layout de pgina consiste na utilizao de tabelas HTML para posicionar os elementos. No entanto, pode ser difcil utilizar tabelas para layouts, pois elas foram criadas originalmente para exibir dados tabulares e no para definir o layout de pginas da Web. Para dinamizar o processo de utilizao de tabelas para o layout de pgina, o Macromedia Dreamweaver 8 fornece o modo Layout. No modo Layout, possvel criar uma pgina utilizando tabelas como a estrutura bsica, ao mesmo tempo em que se evitam alguns dos problemas que ocorrem com freqncia na criao de projetos baseados em tabelas atravs dos meios convencionais.
N OT A
Para mais informaes sobre o trabalho com tabelas no modo Standard, veja Captulo 8, Apresentar contedo com tabelas, na pgina 257. Ou, como alternativa ao uso de tabelas nos modos Standard ou Layout, voc pode usar o posicionamento CSS para criar o layout das pginas (veja Inserir tags div no layout na pgina 244).
Este captulo contm as sees a seguir:

Sobre o modo Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .284 Alternar do modo Standard (Padro) para o modo Layout . . . . . . . . . . . . . . . . . . .288 Desenhar no modo Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .289 Adicionar contedo a uma clula de layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293 Limpar automaticamente as alturas das clulas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 Redimensionar e mover clulas e tabelas de layout . . . . . . . . . . . . . . . . . . . . . . . . . 295 Formatar clulas e tabelas de layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297 Definir a largura da coluna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .298 Definir preferncia para o modo Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
283
Sobre o modo Layout

No modo Layout, voc usa clulas e tabelas de layout para criar o layout da pgina antes de incluir contedo. Por exemplo, seria possvel desenhar uma clula na parte superior da pgina para conter um grfico de cabealho, outra clula no lado esquerdo da pgina para conter uma barra de navegao e uma terceira clula, direita, para o contedo. Ao adicionar contedo, voc pode mover as clulas o quanto for necessrio para ajustar o seu layout.
D IC A 284
Para maior flexibilidade, voc pode desenhar cada clula apenas quando tiver acabado de adicionar contedo nela. Isso permite que voc disponha de mais espao na tabela de layout por mais tempo, de modo que possa mover ou redimensionar clulas com mais facilidade.
As tabelas de layout aparecem com uma borda verde na pgina; as clulas de layout aparecem com uma borda azul na pgina. (Para modificar as cores de borda padro, veja Definir preferncia para o modo Layout na pgina 302.) Quando voc move o ponteiro sobre uma clula da tabela, o Dreamweaver reala essa clula. (Para ativar ou desativar o realce ou para alterar a cor de realce, consulte Desenhar clulas e tabelas de layout na pgina 289.)
possvel definir o layout de uma pgina utilizando vrias clulas de layout dentro de uma tabela de layout - que o mtodo mais comum para a definio do layout de uma pgina na Web - ou utilizar diversas tabelas de layout separadas para layouts mais complexos. O uso de diversas tabelas de layout isola sees do layout, de modo que no possam ser afetadas por alteraes feitas em outras sees.
Captulo 9: Criao de pginas no modo Layout
Tambm possvel aninhar tabelas de layout ao inserir uma nova tabela de layout dentro de uma tabela existente (veja Desenhar uma tabela de layout aninhada na pgina 292). Esta estrutura permite simplificar a estrutura da tabela quando as linhas ou coluna em uma parte do layout no estiveram alinhadas com as linhas ou colunas em outra parte do layout. Por exemplo, ao utilizar tabelas de layout aninhadas seria possvel criar facilmente um layout com duas colunas e quatro linhas na coluna esquerda e trs linhas na coluna direita. Tpicos relacionados Alternar do modo Standard (Padro) para o modo Layout na pgina 288
Desenhar no modo Layout na pgina 289
Como ver tabelas e clulas no modo Layout

As larguras de tabelas e clulas de layout (em pixels ou em um percentual da largura da pgina) aparecem na parte superior ou inferior da tabela quando ela selecionada ou quando o ponto de insero se encontra na tabela. Ao lado das larguras, encontram-se setas que indicam o menu de cabealho da tabela e os menus de cabealho de colunas. Use os menus para ter acesso rpido a alguns dos comandos mais comuns.
NO TA

Para desativar larguras de colunas, guias de tabela e menus de cabealho, preciso desativar todos os recursos visuais [View (Visualizar) > Visual Aids (Recursos visuais) > Hide All (Ocultar todos)].
Eventualmente, a largura pode no aparecer para uma coluna; voc provavelmente ver o seguinte: Sem largura. Se voc no vir uma largura para a tabela ou para a coluna, isso significa que a tabela ou coluna no possuem uma largura especfica no cdigo HTML. Para especificar uma largura fixa, veja Criando uma coluna com alongamento automtico ou com largura fixa na pgina 299. Dois nmeros. Se aparecerem dois nmeros, a largura visual que aparece no modo Design no coincide com o que foi especificado no cdigo HTML. Isto poder ocorrer quando a tabela redimensionada arrastando seu canto inferior direito ou quando o contedo adicionado a uma clula maior do que a largura definida para essa clula.
Sobre o modo Layout
285
Por exemplo, se a largura da coluna for definida como 200 pixels, ao adicionar contedo que aumente a largura para 250 pixels, dois nmeros aparecero na parte superior dessa coluna: 200 (a largura especificada no cdigo) e (250) entre parnteses (a largura visual da coluna, na forma como ele processada na sua tela). Para compatibilizar as duas larguras de coluna, veja Tornar as larguras das colunas consistentes com as larguras visuais na pgina 301.
Linha ondulada. Uma linha ondulada aparece para as colunas que esto configuradas com alongamento automtico. Para obter informaes sobre a definio do alongamento automtico de uma coluna, veja Criando uma coluna com alongamento automtico ou com largura fixa na pgina 299. Barras duplas. Colunas que contm imagens espacejadoras possuem barras duplas em volta da largura da coluna. Para obter informaes sobre as imagens, veja Utilizar imagens espaadoras na pgina 300.
Tpicos relacionados Definir a largura da coluna na pgina 298
Linhas de grade de tabelas e clulas de layout

Quando voc desenha uma clula de layout em uma tabela de layout, uma grade de linhas sutil aparece, indo das bordas de uma clula de layout qualquer at as bordas da tabela de layout que a contm. Estas linhas ajudam a alinhar as novas clulas s clulas antigas e visualizar a estrutura da tabela HTML oculta. No Dreamweaver, as extremidades das novas clulas so alinhadas automaticamente com as extremidades das clulas existentes. As clulas de layout no podem ser sobrepostas. As extremidades da clula tambm se encaixam automaticamente s extremidades da tabela de layout que contm a clula se uma clula for desenhada prxima extremidade de uma tabela. Voc tambm pode usar a grade do Dreamweaver, que pr-configurada e que no se modifica em funo do posicionamento das clulas, para criar o layout da sua pgina (veja Utilizar uma imagem de rastreamento na pgina 254). Tpicos relacionados Sobre o modo Layout na pgina 284
286
Largura das colunas com tamanho fixo e colunas com alongamento automtico
Uma coluna da tabela no modo Layout pode ter uma largura fixa ou uma largura que se expande automaticamente para preencher o mximo possvel a janela do navegador (alongamento automtico).
Colunas de largura fixa possuem uma largura numrica especfica, como 300 pixels. O Dreamweaver exibe a largura de cada coluna com largura fixa na parte superior ou inferior da coluna. Colunas com alongamento automtico se modificam automaticamente dependendo da largura da janela do navegador. Se o layout incluir uma coluna com alongamento automtico, ele sempre preencher a largura inteira da janela do navegador do visitante. possvel fazer com que somente uma coluna de uma determinada tabela de layout seja alongada automaticamente. Uma coluna com alongamento automtico exibe uma linha ondulada na rea de largura da coluna.
Um mtodo de layout comum consiste em provocar o alongamento automtico da coluna que comporta o contedo principal da pgina, o que define automaticamente todas as outras colunas para uma largura fixa. Por exemplo: suponha que o layout tenha uma imagem grande esquerda da pgina e uma coluna de texto direita. possvel definir a coluna da esquerda com uma largura fixa e provocar o alongamento automtico da rea da barra lateral. Ao provocar o alongamento automtico de uma coluna, o Dreamweaver insere imagens espaadoras nas colunas com largura fixa para assegurar que essas colunas tenham a largura apropriada, a menos que seja especificado que nenhuma imagem espaadora deva ser utilizada. Uma imagem espaadora uma imagem transparente utilizada para controlar o espaamento, mas no fica visvel na janela do navegador. Tpicos relacionados Criando uma coluna com alongamento automtico ou com largura fixa na pgina 299
Imagens espaadoras
Uma imagem espaadora (tambm conhecida como GIF de espaamento) uma imagem transparente utilizada para controlar o espaamento em tabelas com alongamento automtico. Uma imagem espaadora consiste em uma imagem GIF transparente de um nico pixel alongada para ter um nmero especfico de pixels. O navegador no pode desenhar uma coluna da tabela mais estreita do que a imagem mais larga contida em uma clula daquela coluna. Por isso, a insero de uma imagem espaadora em uma coluna da tabela exigir que os navegadores mantenham a coluna ao menos com a mesma largura da imagem.
Sobre o modo Layout
287
O Dreamweaver adiciona automaticamente imagens espaadoras ao definir uma coluna para alongamento automtico, a menos que seja determinado que nenhuma imagem espaadora deva ser utilizada. possvel inserir e remover imagens espaadoras manualmente em cada coluna, se preferir. As colunas que contm imagens espaadoras tm uma barra dupla na rea da largura da coluna. possvel inserir e remover manualmente as imagens espaadoras de colunas especficas ou remover todas as imagens espaadoras da pgina. Tpicos relacionados Utilizar imagens espaadoras na pgina 300
Alternar do modo Standard (Padro) para o modo Layout

Para poder desenhar tabelas de layout ou clulas de layout, necessrio alternar do modo Standard (Padro) para o modo Layout. mais fcil criar tabelas para layout no modo Layout do que no modo Standard, mas recomendvel retornar ao modo Standard antes de adicionar contedo ou editar as tabelas.
NO TA
Se o usurio criar uma tabela no modo Standard e depois alternar para o modo Layout,, a tabela de layout resultante poder conter clulas de layout vazias. Talvez seja preciso excluir essas clulas de layout vazias para poder criar novas clulas de layout ou mover as clula de layout pela tabela.
Para passar modo Layout:

1.
Se voc estiver no modo de exibio Code, selecione View (Exibir) > Design ou View > Code and Design (Cdigo e design). No possvel mudar para o modo Layout no modo de exibio Code. Siga um dos procedimentos abaixo:
2.
Selecione View (Exibir) > Table Mode (Modo da tabela) > Layout Mode (Modo Layout). Na categoria Layout da barra Insert, clique no boto Modo Layout.
Uma barra com o nome Layout Mode (Modo Layout) aparece ao longo da parte superior da janela Document (Documento). Se houver tabelas nesta pgina, sero exibidas como tabelas de layout.
288
A fim de mudar para o modo Layout, faa o seguinte:
Clique em Exit (Sair) na barra com o nome Layout Mode na parte superior da janela Document. Selecione View (Exibir) > Table Mode (Modo da tabela) > Layout Mode (Modo Layout). Na categoria Layout da barra Insert, clique no boto Modo Standard.
O Dreamweaver volta para o modo Standard.
Desenhar no modo Layout

O modo Layout permite desenhar clulas e tabelas, incluindo tabelas aninhadas em outras tabelas. A grade de encaixe o ajudar a alinhar as clulas (veja Utilizar uma imagem de rastreamento na pgina 254).
Desenhar clulas e tabelas de layout

possvel desenhar clulas e tabelas de layout na pgina enquanto se est no modo Layout. Ao desenhar uma clula de layout fora de uma tabela de layout, o Dreamweaver cria automaticamente uma tabela de layout como um recipiente para a clula. Uma clula de layout no pode existir fora de uma tabela de layout.
N OT A
No modo Layout, impossvel utilizar as ferramentas Insert Table (Inserir tabela) e Draw Layer (Desenhar camada) como no modo Standard (Padro). Para utilizar estas ferramentas, necessrio primeiro alternar para o modo Standard (Padro).
Quando o Dreamweaver cria uma tabela de layout de modo automtico, a tabela exibida inicialmente para preencher toda a visualizao do projeto, mesmo que o tamanho da janela do documento seja alterado. Esta tabela de layout padro que ocupa todo o espao da janela permite desenhar clulas de layout em qualquer local na visualizao do projeto. possvel definir um tamanho especfico para a tabela clicando na borda da tabela e arrastando suas alas de redimensionamento. Quando voc passa o cursor sobre uma clula de layout, o Dreamweaver aplica realce a ela. Voc pode ativar ou desativar o realce ou alterar a cor de realce na caixa de dilogo Preferences (Preferncias).
Para desenhar uma clula de layout:
1.
Verifique se est no modo Layout (veja Alternar do modo Standard (Padro) para o modo Layout na pgina 288).
289
2.
Na categoria Layout da barra Insert, clique no boto Draw Layout Cell (Desenhar clula de layout). O ponteiro convertido em uma cruz (+). Posicione o ponteiro onde deseja iniciar a clula na pgina e arraste-o para criar a clula de layout.
DICA
3.
Para desenhar mais de uma clula de layout sem ter que selecionar repetidamente Draw Layout Cell (Desenhar clula de layout), mantenha a tecla Control (no Windows) ou Command (no Macintosh) pressionada enquanto arrasta o mouse para desenhar a clula de layout. possvel continuar a desenhar clulas de layout uma aps a outra, contanto que no solte a tecla Control ou Command.
Se voc desenhar a clula prximo borda da tabela de layout, as bordas da clula automaticamente se alinham tabela de layout em que esto contidas. Para desativar temporariamente o encaixe, mantenha pressionada a tecla Alt (no Windows) ou a tecla Option (no Macintosh) ao desenhar a clula. A clula ser exibida contornada em azul na pgina. Para alterar a cor de contorno, veja Definir preferncia para o modo Layout na pgina 302.
Para desenhar uma tabela de layout:
1.
Verifique se est no modo Layout (veja Alternar do modo Standard (Padro) para o modo Layout na pgina 288). Na categoria Layout da barra Insert, clique no boto Draw Layout Table (Desenhar tabela de layout). O ponteiro convertido em uma cruz (+). Posicione o ponteiro do mouse na pgina e arraste-o para criar a tabela de layout.
DICA
2.
3.
Para desenhar mais de uma tabela de layout sem ter que selecionar repetidamente Draw Layout Table (Desenhar tabela de layout), mantenha a tecla Control (no Windows) ou Command (no Macintosh) pressionada enquanto arrasta o mouse para desenhar a tabela de layout. possvel continuar a desenhar tabelas de layout uma aps a outra, contanto que no solte a tecla Control ou Command.
290
possvel criar uma tabela de layout em uma rea vazia do layout da pgina, ao redor de clulas e tabelas de layout existentes ou mesmo aninhada em uma tabela de layout existente. Se a pgina possui contedo e voc desejar adicionar uma tabela de layout, possvel desenhar uma nova tabela de layout somente abaixo da parte inferior do contedo existente.
DICA NO T A
Se tentar desenhar uma tabela de layout sob um contedo existente e o ponteiro no disponvel surgir, tente redimensionar a janela do documento para aumentar o espao em branco entre a parte inferior do contedo existente e a parte inferior da janela. As tabelas no podem se sobrepor umas s outras, mas uma tabela pode ser totalmente inserida em outra tabela. Para obter mais informaes, consulte Desenhar uma tabela de layout aninhada na pgina 292.
A tabela de layout exibida com um contorno verde na pgina. Para alterar a cor de contorno, veja Definir preferncia para o modo Layout na pgina 302.
Para alterar as preferncias de realce de clulas de layout:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida. Selecione Highlighting (Realce) na lista de categorias esquerda. Faa uma dessas alteraes:
2. 3.
Para alterar a cor de realce, clique na caixa de cores e, em seguida, selecione a cor de realce utilizando o seletor de cores (ou digite o valor hexadecimal correspondente cor de realce na caixa de texto). Para obter informaes sobre como utilizar o seletor de cores, consulte Trabalhar com cores na pgina 384.
Para ativar ou desativar o realce, marque ou desmarque a caixa de seleo Show (Exibir) de Mouse-Over (Mouse sobre).
N OT A
Essas opes afetam todos os objetos, como tabelas e camadas, que o Dreamweaver reala quando voc passa o cursor do mouse sobre elas.
4.
Clique em OK.
291
Desenhar uma tabela de layout aninhada

possvel desenhar uma tabela de layout dentro de outra tabela de layout para criar uma tabela aninhada. As clulas internas de uma tabela aninhada no podem ser modificadas em relao tabela externa, por exemplo: ao modificar o tamanho de uma linha ou coluna na tabela externa, o tamanho das clulas da tabela interna no modificado. possvel inserir diversos nveis de tabelas aninhadas. Uma tabela de layout aninhada no pode ser maior do que a tabela que a contm.
NO TA
Se uma tabela de layout for desenhada no centro da pgina antes de uma clula de layout ser desenhada, a tabela desenhada ser aninhada automaticamente dentro de uma tabela maior.
Para desenhar uma tabela de layout aninhada:

1.
Verifique se est no modo Layout (veja Alternar do modo Standard (Padro) para o modo Layout na pgina 288). Na categoria Layout da barra Insert, clique no boto Draw Layout Table (Desenhar tabela de layout). O ponteiro convertido em uma cruz (+). Aponte para qualquer rea vazia (cinza) em uma tabela de layout existente e, em seguida, arraste para criar a tabela de layout aninhada.
N OT A
2.
3.
impossvel criar uma tabela de layout dentro de uma clula de layout. S possvel criar uma tabela de layout aninhada em uma rea vazia de uma tabela de layout existente ou ao redor de clulas existentes.
292
Para desenhar uma tabela de layout ao redor de clulas ou tabelas de layout j existentes:
1.
Verifique se est no modo Layout (veja Alternar do modo Standard (Padro) para o modo Layout na pgina 288). Na categoria Layout da barra Insert, clique no boto Draw Layout Table (Desenhar tabela de layout). O ponteiro convertido em uma cruz (+). Arraste o ponteiro para desenhar um retngulo ao redor de um conjunto de clulas ou tabelas de layout existentes. exibida uma tabela de layout aninhada, incluindo as clulas ou tabelas existentes.
DICA
2.
3.
Para encaixar perfeitamente uma clula de layout em uma das bordas da nova tabela aninhada, comece a arrast-la prximo borda da clula. A borda da nova tabela se encaixar borda da clula. impossvel arrastar do centro de uma clula de layout, pois no se pode criar uma tabela de layout inteiramente no interior de uma clula de layout.
Adicionar contedo a uma clula de layout

possvel adicionar texto, imagens e outros tipos de contedo s clulas de layout no modo Layout, do mesmo modo que o contedo adicionado s clulas da tabela no modo Standard (Padro). Clique na clula onde dever ser adicionado o contedo e, em seguida, digite o texto ou inserir outro contedo. possvel inserir contedo apenas em uma clula de layout, mas no em uma rea vazia (cinza) de uma tabela de layout. Desse modo, para poder adicionar contedo, necessrio primeiro criar as clulas de layout (veja Desenhar no modo Layout na pgina 289).
Para adicionar texto a uma clula de layout:
1. 2.
Coloque o ponto de insero na clula de layout em que deseja adicionar texto. Siga um dos procedimentos abaixo:
Digite o texto na clula. A clula se expande automaticamente medida que um texto digitado, se necessrio. Cole o texto copiado de outro documento. Para obter mais informaes, consulte Inserir texto na pgina 418.
Adicionar contedo a uma clula de layout
293
Ao adicionar contedo maior do que a clula, a clula de layout se expandir automaticamente. medida que a clula se expande, a coluna onde a clula est localizada tambm se expande, o que pode alterar o tamanho da clulas circunvizinhas. A largura dessa coluna modifica-se para mostrar a largura que aparece no cdigo, seguida da largura visual da coluna (a largura como aparece na tela do usurio) entre parnteses. Para obter mais informaes sobre larguras de colunas, veja Definir a largura da coluna na pgina 298.
Para adicionar uma imagem a uma clula de layout:

1. 2.
Coloque o ponto de insero na clula de layout em que deseja adicionar a imagem. Siga um dos procedimentos abaixo:

Selecione Insert (Inserir) > Image (Imagem). Na categoria Common (Comuns) da barra Insert, clique na seta suspensa do boto Images (Imagens) e selecione Images.
DICA
Se o boto Image estiver exibido (como no exemplo a seguir) na barra Insert, voc pode clicar no boto em vez de usar o menu pop-up.
A caixa de dilogo Select Image Source (Selecionar origem da imagem) exibida.

3.
Selecione um arquivo de imagem. Para obter mais informaes, consulte Inserir uma imagem na pgina 448. Clique em OK.
4.
A imagem exibida na clula de layout.
294
Limpar automaticamente as alturas das clulas

Ao criar uma clula de layout, o Dreamweaver especifica automaticamente uma altura para a clula, de modo que ela seja exibida com a altura selecionada mesmo que estiver vazia. Aps inserir contedo na clula, talvez no seja mais preciso especificar a altura; por isso possvel remover da tabela as alturas da clula.
Para limpar as alturas da clula, siga um dos procedimentos abaixo:
Clique no menu de cabealho da tabela e selecione Clear All Heights (Redefinir todas as alturas).
Selecione uma tabela de layout, clicando na guia exibida na parte superior da tabela e clique no boto Clear Row Heights (Limpar as alturas das colunas) do inspetor Property (Propriedades), aberto a partir da seleo de Window (Janela) > Properties (Propriedades).
O Dreamweaver limpa todas as alturas especificadas na tabela. Algumas clulas da tabela podem encolher verticalmente.
Redimensionar e mover clulas e tabelas de layout

Para ajustar o layout da pgina, possvel mover e redimensionar clulas de layout e tabelas de layout aninhadas (a parte externa da tabela s pode ser redimensionada).
N OT A
Para utilizar a grade do Dreamweaver como guia ao mover ou redimensionar as clulas e tabelas, veja Utilizar uma imagem de rastreamento na pgina 254.
Redimensionar e mover clulas de layout

possvel redimensionar ou mover clulas de layout, mas elas no podem ser sobrepostas. impossvel mover ou redimensionar uma clula para que ela ultrapasse os limites da tabela de layout que a contm. Uma clula de layout no pode ser reduzida a um tamanho menor do que seu contedo.
Redimensionar e mover clulas e tabelas de layout
295
Para obter informaes sobre como redimensionar e mover clulas de layout, veja Redimensionar e mover tabelas de layout na pgina 296.
Para redimensionar uma clula de layout:
1.
Selecione uma clula clicando em uma extremidade desta ou mantendo a tecla Control pressionada (no Windows) ou a tecla Command (no Macintosh) e clique em qualquer local da clula. So exibidas alas de seleo ao redor da clula. Arraste uma ala de seleo para redimensionar a clula.
2.
As extremidades da clula encaixam-se automaticamente para se alinhar com as extremidades de outras clulas.
Para mover uma clula de layout:
1.
Selecione uma clula clicando em uma extremidade desta ou mantendo a tecla Control pressionada (no Windows) ou a tecla Command (no Macintosh) e clique em qualquer local da clula. So exibidas alas de seleo ao redor da clula. Siga um dos procedimentos abaixo:

2.
Arraste a clula para outro local dentro da tabela de layout. Pressione as teclas de seta para mover a clula 1 pixel por vez.
DICA
Mantenha pressionada a tecla Shift ao utilizar as teclas de seta para mover a clula 10 pixels de cada vez.
Redimensionar e mover tabelas de layout

Uma tabela de layout no pode ser redimensionada a um tamanho menor do que o menor retngulo que contm todas as suas clulas. Uma tabela de layout tambm no pode ser redimensionada de modo que sobreponha outras tabelas ou clulas. Para redimensionar e mover clulas de layout, veja Redimensionar e mover clulas de layout na pgina 295.
296
Para redimensionar uma tabela de layout:

1.
Selecione uma tabela clicando na guia, na parte superior da tabela. So exibidas alas de seleo ao redor da tabela. Arraste as alas de seleo para redimensionar a tabela. As extremidades da tabela encaixam-se automaticamente para se alinhar com as extremidades de outras clulas e tabelas.
2.
Para mover uma tabela de layout:

1.
Selecione uma tabela clicando na guia, na parte superior da tabela. So exibidas alas de seleo ao redor da tabela.
N OT A
possvel mover uma tabela de layout somente se ela estiver aninhada no interior de outra tabela de layout.
2.

Arraste a tabela para outro local na pgina. Pressione as teclas de seta para mover a tabela 1 pixel por vez.
DICA
Mantenha pressionada a tecla Shift ao utilizar as teclas de seta para mover a tabela 10 pixels de cada vez.
Formatar clulas e tabelas de layout

possvel alterar a aparncia de qualquer clula ou tabela de layout utilizando o inspetor de propriedades.
Formatar clulas de layout

possvel definir vrios atributos de uma clula de layout no inspetor Property (Propriedades), incluindo largura e altura, cor de fundo e alinhamento do contedo da clula.
Para formatar uma clula de layout no inspetor Property (Propriedades):
1.
Selecione uma clula clicando em uma extremidade desta ou mantendo a tecla Control pressionada (no Windows) ou a tecla Command (no Macintosh) e clique em qualquer local da clula.
Formatar clulas e tabelas de layout
297
2.
Abra o inspetor Property (Propriedades), a partir da seleo de Window (Janela) > Properties (Propriedades), se ele ainda no estiver aberto.
3.
Modifique a formatao da clula definindo as propriedades. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
Formatar tabelas de layout

possvel definir vrios atributos de uma tabela de layout no inspetor Property, como largura, altura, preenchimento e espaamento.
Para formatar uma tabela de layout:
1. 2.
Selecione uma tabela clicando na guia, na parte superior da tabela. Abra o inspetor Property (Propriedades), a partir da seleo de Window (Janela) > Properties (Propriedades), se ele ainda no estiver aberto.
3.
Altere a formatao da tabela definindo as propriedades. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
Definir a largura da coluna

possvel definir uma largura especfica para uma coluna ou expandi-la para que ocupe o espao mximo possvel de uma janela do navegador. Tambm possvel especificar uma largura mnima para uma coluna usando uma imagem espaadora. Algumas vezes, as larguras das colunas da tabela definidas no cdigo HTML no correspondem s suas larguras aparentes na tela. Quando isso acontecer, voc pode tornar as larguras iguais.
298
Criando uma coluna com alongamento automtico ou com largura fixa

Uma coluna em uma tabela pode ter largura fixa ou alongamento automtico. Para obter mais informaes, consulte Largura das colunas com tamanho fixo e colunas com alongamento automtico na pgina 287. Provocar o alongamento automtico de uma coluna antes de o layout estar completo pode causar efeitos inesperados no layout da tabela. Para evitar que as colunas se tornem mais largas ou estreitas alm do esperado, finalize o layout e utilizar imagens espaadoras antes de provocar o alongamento automtico de uma coluna. No entanto, se cada coluna comporta outro contedo que mantm a coluna com a largura desejada, no necessrio utilizar imagens espaadoras.
Para provocar o alongamento automtico da coluna:
1.
Clique no menu de cabealho da coluna e selecione Make Column Autostretch (Criar coluna com alongamento automtico).
Selecione uma clula na coluna clicando em uma extremidade da clula e, em seguida, clique em Autostretch (Alongamento automtico) no inspetor Property (Propriedades).
N OT A
possvel alongar automaticamente apenas uma coluna de uma determinada tabela.
Se voc no definiu uma imagem espacejadora para esse site, aparece a caixa de dilogo Choose Spacer Image (Escolher imagem espacejadora).
2.
Se a caixa de dilogo Choose Spacer Image (Escolher imagem epacejadora) aparecer, selecione uma opo e, em seguida, clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
Uma linha ondulada aparece na parte superior ou inferior da coluna com alongamento automtico. Barras duplas aparecem na parte superior ou inferior de colunas que contm imagens espacejadoras.
299
Para definir uma largura fixa para a coluna, siga um dos procedimentos abaixo:
Clique no menu de cabealho da coluna e depois selecione Make Column Fixed Width (Criar coluna de largura fixa). A opo Make Column Fixed Width (Criar coluna de largura fixa) especifica uma largura para a coluna (no cdigo) que corresponde largura visual da coluna.
Selecione uma clula na coluna clicando em uma extremidade da clula, clique em Fixed (Fixa) e digite um valor numrico no inspetor Property (Propriedades). Se o usurio inserir um valor numrico menor que a largura do contedo da coluna, o Dreamweaver definir automaticamente a largura para corresponder largura do contedo.
A largura de uma coluna aparece na parte superior ou inferior da coluna. Tpicos relacionados Tornar as larguras das colunas consistentes com as larguras visuais na pgina 301
Utilizar imagens espaadoras

Para fazer uma coluna ter uma determinada largura mnima, possvel inserir uma imagem espaadora nessa coluna. Para obter mais informaes, consulte Imagens espaadoras na pgina 287. Voc pode remover imagens espacejadoras a partir de uma coluna ou de uma tabela inteira. Na primeira vez que insere uma imagem espacejadora, voc define uma imagem espacejadora para o site. Voc pode definir preferncias para imagens espacejadoras (veja Definir preferncia para o modo Layout na pgina 302).
Para inserir uma imagem espaadora em uma coluna:
1.
Clique no menu do cabealho da coluna e, em seguida, selecione Add Spacer Image (Adicionar imagem espacejadora).
Se voc no definiu uma imagem espacejadora para esse site, aparece a caixa de dilogo Choose Spacer Image (Escolher imagem espacejadora).
2.
Se a caixa de dilogo Choose Spacer Image (Escolher imagem epacejadora) aparecer, selecione uma opo e, em seguida, clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
300
O Dreamweaver insere a imagem espacejadora na coluna. A imagem no fica visvel, mas a coluna pode se deslocar ligeiramente e apresentar uma barra dupla na parte superior ou inferior, para indicar que a coluna contm uma imagem espaadora.
Para remover uma imagem espaadora de uma coluna:
Clique no menu do cabealho da coluna e, em seguida, selecione Remove Spacer Image (Remover imagem espacejadora).
O Dreamweaver remove a imagem espacejadora. A coluna pode sofrer um deslocamento.

Para remover todas as imagens espaadoras de uma tabela, siga um dos procedimentos abaixo:
Clique no menu de cabealho da tabela e, em seguida, selecione Remove All Spacer Images (Remover todas as imagens espacejadoras). Selecione a tabela e clique no boto Remove All Spacers (Remover todos os espaadores) do inspetor Property (Propriedades), aberto a partir da seleo de Window (Janela) > Properties (Propriedades).
O layout de toda a tabela pode ser modificado. Se algumas colunas no comportarem contedo, elas podero desaparecer completamente da visualizao do projeto.
Tornar as larguras das colunas consistentes com as larguras visuais

Se voc vir dois nmeros para a largura de uma coluna, isso significa que a largura de coluna definida no cdigo HTML no reflete a largura aparente da coluna na tela. possvel tornar a largura especificada no cdigo consistente com a largura visual. Para obter mais informaes, consulte Como ver tabelas e clulas no modo Layout na pgina 285.
Para tornar as larguras consistentes:
1. 2.
Clique em uma clula. Siga um dos procedimentos abaixo:
Clique no menu do cabealho da tabela e depois selecione Make All Widths Consistent (Tornar consistentes todas as larguras).
301
Selecione a tabela e clique no boto Remove All Spacers (Remover todos os espaadores) do inspetor Property (Propriedades), aberto a partir da seleo de Window (Janela) > Properties (Propriedades).
O Dreamweaver redefine a largura especificada no cdigo para que ela corresponda largura visual. Tpicos relacionados Criando uma coluna com alongamento automtico ou com largura fixa na pgina 299
Utilizar imagens espaadoras na pgina 300
Definir preferncia para o modo Layout

Voc pode especificar preferncias para arquivos de imagem espacejadora e para as cores que o Dreamweaver usa ao desenhar tabelas de layout e clulas de layout.
Para definir as preferncias do modo Layout:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida. Selecione Layout View (Visualizao de layout), na lista de categorias, esquerda. Faa as alteraes necessrias. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
2. 3.
4.
302
CAPTULO 10
Utilizao de quadros
Os quadros possibilitam dividir uma janela do navegador em vrias regies, podendo cada uma exibir um documento HTML diferente. Na utilizao mais comum dos quadros, um quadro exibe um documento que contm controles de navegao, enquanto o outro exibe um documento com contedo.
N O TA
10
Uma discusso detalhada sobre todas as maneiras de projetar e utilizar quadros, bem como o cdigo necessrio para codificao manual, est alm do escopo deste captulo. Se forem necessrias informaes detalhadas sobre o cdigo utilizado em layouts de quadro avanados, consulte um documento sobre quadros e conjuntos de quadros.

Sobre quadros e conjuntos de quadros. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 Trabalhar com conjuntos de quadros na janela do documento . . . . . . . . . . . . . . . 309 Criar quadros e conjuntos de quadros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 Selecionar quadros e conjuntos de quadros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Abrir um documento em um quadro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 Salvar arquivos de quadros e de conjuntos de quadros . . . . . . . . . . . . . . . . . . . . . . 316 Visualizao e definio de propriedades e atributos de quadros. . . . . . . . . . . . . . 318 Exibir e definir propriedades de conjuntos de quadros . . . . . . . . . . . . . . . . . . . . . . 320 Controlar o contedo de quadros com links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321 Lidar com um navegador que no pode exibir quadros. . . . . . . . . . . . . . . . . . . . . . .323 Utilizar comportamentos JavaScript com quadros . . . . . . . . . . . . . . . . . . . . . . . . . .323
Sobre quadros e conjuntos de quadros

Um quadro uma regio de uma janela do navegador que pode exibir um documento HTML independentemente do que est sendo exibido no restante da janela do navegador.
303
Um conjunto de quadros um arquivo HTML que define o layout e as propriedades de uma srie de quadros, inclusive o nmero de quadros, seu tamanho e posicionamento, bem como a URL da pgina a ser inicialmente exibida em cada quadro. O arquivo do conjunto de quadros em si no contm cdigo HTML a ser exibido em um navegador, exceto na seo noframes (consulte Lidar com um navegador que no pode exibir quadros na pgina 323). O arquivo do conjunto de quadros apenas fornece informaes para o navegador sobre a aparncia que um conjunto de quadros deve ter e que documentos devem ser exibidos nele. Tpicos relacionados Trabalhar com conjuntos de quadros na janela do documento na pgina 309
Criar quadros e conjuntos de quadros na pgina 309
Quadros e conjuntos de quadros

Um quadro uma regio de uma janela do navegador que pode exibir um documento HTML independentemente do que est sendo exibido no restante da janela do navegador. Um conjunto de quadros um arquivo HTML que define o layout e as propriedades de uma srie de quadros. Para exibir um conjunto de quadros em um navegador, digite a URL do arquivo do conjunto de quadros. O navegador abrir os documentos relevantes para exibio nos quadros. O arquivo do conjunto de quadros de um site geralmente denominado index.html, para que ele seja exibido como padro se um visitante no especificar um nome de arquivo.
304
Captulo 10: Utilizao de quadros
O exemplo a seguir mostra um layout de quadro que consiste em trs quadros: um quadro estreito lateral que contm uma barra de navegao, outra na parte superior com o logotipo e o nome do site da Web, e um quadro grande que ocupa o restante da pgina e acomoda o contedo principal. Cada um desses quadros exibe um documento HTML distinto.
Neste exemplo: o documento exibido no quadro superior nunca se altera medida que o visitante navega pelo site. A barra de navegao do quadro lateral contm links. Clique em um desses links para alterar o contedo do quadro principal de contedo, mas o contedo do prprio quadro lateral permanece inalterado. O quadro principal de contedo direita exibe o documento adequado para qualquer link em que o visitante clique esquerda. Observe que um quadro no um arquivo. Pode-se considerar o documento atualmente exibido em um quadro como uma parte integrante do quadro, mas na realidade o documento no faz parte dele. O quadro um recipiente que armazena o documento; qualquer quadro pode exibir qualquer documento.
N OT A
A palavra pgina pode ser utilizada livremente em referncia a um nico documento HTML ou a todo o contedo de uma janela do navegador em determinado momento, mesmo que vrios documentos HTML estejam sendo exibidos simultaneamente. A frase uma pgina que utiliza quadros, por exemplo, normalmente refere-se a um conjunto de quadros e aos documentos que so exibidos inicialmente nesses quadros.
Um site que exibido em um navegador como uma pgina nica compreendendo trs quadros consiste, na verdade, de pelo menos quatro documentos HTML distintos: o arquivo do conjunto de quadros e os trs documentos que comportam o contedo que exibido inicialmente dentro dos quadros. Quando uma pgina for projetada utilizando conjuntos de quadros no Dreamweaver, esses quatro arquivos devero ser salvos, para que a pgina funcione corretamente no navegador.
305
Tpicos relacionados Conjuntos de quadros aninhados na pgina 307
Decidir se um quadro ser utilizado

A utilizao mais comum de quadros para navegao. Um conjunto de quadros geralmente inclui um quadro contendo uma barra de navegao e outro quadro para exibir as pginas principais de contedo. Entretanto, projetar com quadros pode ser confuso e, em muitos casos, possvel criar uma pgina da Web sem quadros, atingindo muitos dos mesmos objetivos de um conjunto de quadros. Por exemplo: se voc desejar que a barra de navegao seja exibida no lado esquerdo da pgina, substitua a pgina por um conjunto de quadros ou apenas inclua a barra de navegao em cada pgina do site (O Dreamweaver ajuda a criar vrias pginas que utilizam o mesmo layout (veja Sobre modelos do Dreamweaver na pgina 326). A imagem a seguir mostra um projeto de pgina com um layout semelhante a quadro, mas que no utiliza quadros.
Muitos designers da Web profissionais preferem no utilizar quadros, e muitas pessoas que navegam na Web no as apreciam. Na maioria dos casos, isso devido existncia de sites que utilizam mal ou desnecessariamente os quadros (como um conjunto de quadros que recarrega o contedo dos quadros de navegao todas as vezes em que um visitante clica em um boto de navegao). Se os quadros forem bem utilizados (quando so utilizados para manter os controles de navegao estticos em um quadro enquanto permitem que o contedo de outro quadro se altere), eles podem ser muito teis para alguns sites.
306
Nem todos os navegadores fornecem um bom suporte a quadros e podem ser difceis de navegar para visitantes portadores de deficincias. Portanto, se usar quadros, sempre inclua uma seo noframes no conjunto de quadros para os visitantes que no podem v-los (consulte Lidar com um navegador que no pode exibir quadros na pgina 323). Oferea tambm um link explcito para uma verso sem quadros do site, para visitantes com navegadores que ofeream suporte a quadros mas que no gostem de us-los. As vantagens de utilizar quadros so as seguintes:
O navegador de um visitante no precisa recarregar imagens relacionadas navegao para cada pgina. Cada quadro tem sua prpria barra de rolagem (se o contedo for muito grande para caber em uma janela) para que um visitante possa rolar os quadros independentemente. Por exemplo: se um visitante usar a barra de rolagem para ir para a parte inferior de uma longa pgina de contedo em um quadro, no precisar voltar para a parte superior para usar a barra de navegao, se ela estiver em outro quadro.
As desvantagens de se utilizar quadros incluem:

O alinhamento grfico preciso dos elementos em diversos quadros pode ser difcil. O teste de navegao pode consumir muito tempo. As URLs das pginas individuais com quadros no so exibidas no navegador; portanto, pode ser difcil para um visitante incluir um marcador em uma pgina especfica (exceto se for fornecido o cdigo do servidor que permite ao visitante carregar uma verso com quadros de determinada pgina).
Tpicos relacionados Quadros e conjuntos de quadros na pgina 304
Lidar com um navegador que no pode exibir quadros na pgina 323
Conjuntos de quadros aninhados

Um conjunto de quadros que estiver dentro de outro denominado um conjunto aninhado de quadros. Um nico arquivo do conjunto de quadros pode conter vrios conjuntos de quadros aninhados. A maioria das pginas da Web que utilizam quadros contm quadros aninhados e muitos dos conjuntos de quadros predefinidos no Dreamweaver tambm utilizam o aninhamento. Qualquer conjunto de quadros em que houver nmeros diferentes de quadros em linhas ou colunas distintas requer um conjunto de quadros aninhado.
307
Por exemplo: o layout de quadros mais comum tem um quadro na linha da parte superior (onde exibido o logotipo da empresa) e dois quadros na linha da parte inferior (um quadro de navegao e um quadro de contedo). Esse layout requer um conjunto de quadros aninhado: um conjunto de quadros de duas linhas, com um conjunto de quadros de duas colunas aninhado na segunda linha
Conjunto de quadros principal
Os quadros do menu e do contedo esto aninhados dentro do conjunto de quadros principal
O Dreamweaver se encarrega do aninhamento de conjuntos de quadros, se necessrio. Se forem utilizadas ferramentas para diviso de quadros no Dreamweaver, no necessrio se preocupar com os detalhes de quais quadros so aninhados ou no. Para obter mais informaes sobre essas ferramentas, consulte Criar um conjunto de quadros na pgina 312. H duas maneiras de aninhar conjuntos de quadros em HTML: o conjunto de quadros interno pode ser definido no mesmo arquivo que o do conjunto de quadros externo ou em um arquivo prprio distinto. Cada conjunto de quadros predefinido no Dreamweaver define todos os seus conjuntos de quadros no mesmo arquivo. Os dois tipos de aninhamento produzem os mesmos resultados visuais. No fcil diferenciar, sem examinar o cdigo, o tipo de aninhamento que est sendo utilizado. A situao mais provvel na qual um arquivo de conjunto de quadros externo seria utilizado no Dreamweaver seria quando o comando Abrir no quadro utilizado para abrir um arquivo do conjunto de quadros dentro de um quadro. Isto poderia resultar em problemas ao definir destinos para os links. Em geral mais simples manter todos os conjuntos de quadros definidos em um nico arquivo. Tpicos relacionados Quadros e conjuntos de quadros na pgina 304
Decidir se um quadro ser utilizado na pgina 306
308
Trabalhar com conjuntos de quadros na janela do documento

O Dreamweaver permite exibir e editar todos os documentos associados a um conjunto de quadros em uma nica janela do documento. Essa abordagem permite exibir aproximadamente como as pginas com quadros so exibidas em um navegador, medida que so editadas. Entretanto, alguns aspectos dessa abordagem podem ser confusos, at que se tornem familiares. Lembre-se, especialmente, que cada quadro exibe um documento HTML distinto. Mesmo que os documentos estejam vazios, necessrio salv-los antes de poder visualiz-los (porque o conjunto de quadros pode ser visualizado com preciso apenas se ele contiver a URL de um documento a ser exibido em cada quadro).
Para garantir que seu conjunto de quadros ser corretamente exibido em navegadores:
1.
Crie seu conjunto de quadros e especifique um documento para ser exibido em cada quadro (consulte Criar quadros e conjuntos de quadros na pgina 309). Salve todos os arquivos que aparecero em um quadro (consulte Salvar arquivos de quadros e de conjuntos de quadros na pgina 316). Lembre-se de que cada quadro exibe um documento HTML especfico e voc deve salvar cada documento junto com o arquivo do conjunto de quadros.
2.
3.
Defina as propriedades de cada quadro e do conjunto de quadros (consulte Visualizao e definio de propriedades e atributos de quadros na pgina 318 e Exibir e definir propriedades de conjuntos de quadros na pgina 320). Isso inclui o nome de cada quadro e a definio de opes fixas e de rolagem, entre outros Certifique-se de que foi definida a propriedade Target (Destino) no Property inspector (Inspetor de propriedades) para todos os seus links, de forma que o contedo com links seja exibido na rea correta (veja Controlar o contedo de quadros com links na pgina 321).
4.
Criar quadros e conjuntos de quadros

H duas maneiras de criar um conjunto de quadros no Dreamweaver: voc pode selecion-lo entre vrios conjuntos de quadros predefinidos ou criar um novo. A seleo de um conjunto de quadros predefinido configura automaticamente todos os conjuntos de quadros e os quadros necessrios criao do layout, e a maneira mais fcil de criar rapidamente um layout com base em quadros. S possvel inserir um conjunto de quadros predefinido na visualizao do projeto da janela do documento.
309
Utilizar um conjunto de quadros predefinido

Os conjuntos de quadros predefinidos permitem selecionar facilmente o tipo de conjunto de quadros que voc deseja criar. Se preferir criar o seu prprio conjunto de quadros, consulte Criar um conjunto de quadros na pgina 312. H duas maneiras de criar um conjunto predefinido de quadros:
A barra Insert (Inserir) permite criar um conjunto de quadros e exibir o documento atual em um dos novos quadros criados. A caixa de dilogo New Document (Novo documento) cria um novo conjunto de quadros vazio.
Para criar um conjunto de quadros predefinido e exibir um documento existente em um quadro:

1. 2.
Coloque o ponto de insero em um documento. Siga um dos procedimentos abaixo:
Selecione um conjunto de quadros predefinido no submenu Insert (Inserir)> HTML > Frames (Quadros). Na categoria Layout da barra Insert (Inserir), clique na seta drop-down do boto Frames (Quadros) e selecione um conjunto de quadros predefinido.
310
Os cones dos conjuntos de quadros fornecem uma representao visual de cada conjunto de quadros conforme aplicado ao documento atual. A rea azul de um cone de conjunto de quadros representa o documento atual e as reas brancas representam quadros que exibem outros documentos.
A caixa de dilogo Frame Tag Accessibility Attributes (Atributos de acessibilidade de tags de quadros) aparecer se voc tiver configurado o Dreamweaver para solicitar-lhe atributos de acessibilidade de quadro (consulte Otimizar a rea de trabalho para o projeto de pgina acessvel na pgina 76).
3.
Se a caixa de dilogo Frame Tag Accessibility Attributes (Atributos de acessibilidade de tags de quadros) for exibida, preencha-a para cada quadro e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
N OT A
Para editar atributos de acessibilidade da tag de quadros, consulte Visualizao e definio de propriedades e atributos de quadros na pgina 318.
Para criar um novo conjunto de quadros predefinido vazio:
1. 2.
Selecione File (Arquivo) > New (Novo). Na caixa de dilogo New Document (Novo documento), selecione a categoria Framesets (Conjuntos de quadros).
N OT A
Ao aplicar um conjunto de quadros, o Dreamweaver automaticamente configura o conjunto de quadros para exibir o documento atual (o documento no qual o ponto de insero est localizado) em um dos quadros.
Caso clique em Cancel (Cancelar), o conjunto de quadros ser exibido no documento, mas o Dreamweaver no associar tags ou atributos de acessibilidade a ele.
311
3. 4.
Selecione um conjunto de quadros na lista Framesets (Conjuntos de quadros). Clique em Create (Criar). O conjunto de quadros exibido no seu documento e a caixa de dilogo Frame Tag Accessibility Attributes (Atributos de acessibilidade da tag de quadros) exibida, se ela tiver sido ativada em Preferences (Preferncias) (consulte Otimizar a rea de trabalho para o projeto de pgina acessvel na pgina 76).
5.
Se a caixa de dilogo Frame Tag Accessibility Attributes (Atributos de acessibilidade da tag de quadros) for exibida, preencha-a para cada quadro e, em seguida, clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
N OT A
Caso pressione Cancel (Cancelar), o conjunto de quadros exibido no documento, mas o Dreamweaver no associa tags de acessibilidade a ele.
Para editar atributos de acessibilidade da tag de quadros, consulte Visualizao e definio de propriedades e atributos de quadros na pgina 318.
Criar um conjunto de quadros

possvel criar o seu prprio conjunto de quadros no Dreamweaver adicionando divisores janela. Se preferir utilizar um conjunto de quadros predefinido, consulte Utilizar um conjunto de quadros predefinido na pgina 310.
DICA

Antes de criar um conjunto de quadros ou de trabalhar com quadros, torne as bordas dos quadros visveis na visualizao do projeto da janela do documento, selecionando View (Exibir) > Visual Aids (Auxlios visuais) > Frame Borders (Bordas do quadro).
Para criar um conjunto de quadros:
Selecione Modify (Modificar) > Frameset (Conjunto de quadros) e, em seguida, selecione um item de diviso, como Split Frame Left (Dividir o quadro para a esquerda) ou Split Frame Right (Dividir o quadro para a direita), no submenu. O Dreamweaver divide a janela em quadros. Se houver um documento aberto, ele ser exibido em um dos quadros.
Para dividir um quadro em quadros menores, siga um dos procedimentos abaixo:
Para dividir o quadro onde est posicionado o ponto de insero, selecione um item de diviso no submenu Modify (Modificar) > Frameset (Conjunto de quadros). Para dividir um quadro ou conjunto de quadros vertical ou horizontalmente, arraste uma borda do quadro da margem da visualizao do projeto para o meio da visualizao do projeto.
312
Para dividir um quadro utilizando uma borda de quadro que no est na margem da visualizao do projeto, mantenha pressionada a tecla Alt (no Windows) e arraste a borda do quadro. Para dividir um quadro em quatro quadros, arraste uma borda do quadro de uma das margens da visualizao do projeto para o meio de um quadro.
D IC A
Para criar trs quadros, inicie com dois quadros e depois divida um deles. No fcil mesclar dois quadros adjacentes sem editar o cdigo do conjunto de quadros, portanto, transformar quatro quadros em trs mais difcil do que transformar dois quadros em trs.
Para excluir um quadro:
Arraste a borda do quadro para fora da pgina ou at a borda do quadro principal. Se houver contedo no salvo de um documento localizado em um quadro que esteja sendo removido, o Dreamweaver solicitar que o documento seja salvo.
N OT A
impossvel remover um conjunto de quadros inteiro arrastando as bordas. Para remover um conjunto de quadros, feche a janela do documento que o exibe. Se o arquivo do conjunto de quadros tiver sido salvo, exclua o arquivo.
Para redimensionar um quadro, faa o seguinte:
Para definir tamanhos aproximados de quadros, arraste as bordas do quadro na visualizao do projeto da janela do documento. Use o Property Inspetor (Inspetor de propriedades) para especificar os tamanhos exatos e o espao que o navegador alocar para uma linha ou coluna de quadros quando o tamanho da janela do navegador no permitir que os quadros sejam exibidos no tamanho mxim (consulte Exibir e definir propriedades de conjuntos de quadros na pgina 320).
Selecionar quadros e conjuntos de quadros

Para fazer alteraes nas propriedades de um quadro ou de um conjunto de quadros, comece selecionando o quadro ou o conjunto de quadros que deseja modificar. possvel selecionar um quadro ou um conjunto de quadros na janela do documento ou utilizar o painel Frames (Quadros).
313
Selecionar quadros e conjuntos de quadros no painel Frames (Quadros)

O painel Frames (Quadros) fornece uma representao visual dos quadros em um conjunto de quadros. Ele mostra a hierarquia da estrutura do conjunto de quadros de uma forma que pode no ser visvel na janela do documento. Nesse painel, uma borda tridimensional muito espessa envolve cada conjunto de quadros. Cada quadro contornado por uma linha fina cinza e identificado por um nome de quadro.
Para exibir o painel Frames (Quadros):
Selecione Window (Janela) > Frames (Quadros).
Para selecionar um quadro no painel Frames (Quadros):
Clique no quadro, no painel Frames (Quadros). Um contorno da seleo exibido ao redor do quadro, tanto no painel Frames (Quadros) quanto na visualizao do projeto na janela do documento.
Para selecionar um conjunto de quadros no painel Frames (Quadros):
Clique na borda que circunda os quadros, no painel Frames (Quadros). Um contorno da seleo exibido ao redor do conjunto de quadros, tanto no painel Frames (Quadros) quanto na visualizao do projeto na janela do documento.
Tpicos relacionados Visualizao e definio de propriedades e atributos de quadros na pgina 318
Exibir e definir propriedades de conjuntos de quadros na pgina 320
314
Selecionar quadros e conjuntos de quadros na janela do documento

Na visualizao do projeto da janela do documento, quando um quadro selecionado, suas bordas so marcadas com uma linha pontilhada. Quando um conjunto de quadros selecionado, todas as bordas dos quadros nesse conjunto so marcadas com uma linha pontilhada leve.
NO TA

Colocar o ponto de insero em um documento que exibido em um quadro no o mesmo que selecionar um quadro. H vrias operaes (como definir propriedades do quadro) nas quais preciso selecionar um quadro.
Para selecionar um quadro na janela do documento:
Pressione a tecla Alt (no Windows), ou as teclas Shift-Option (no Macintosh), e clique dentro de um quadro na visualizao do projeto. Um contorno da seleo exibido ao redor do quadro.
Para selecionar um conjunto de quadros na janela do documento:
Clique em uma das bordas do quadro interna do conjunto de quadros na visualizao do projeto. As bordas do quadro devem estar visveis para que isso seja possvel. Selecione View (Exibir) >Visual Aids (Auxlios visuais)> Frame Borders (Bordas do quadro) para tornar as bordas do quadro visveis, caso no estejam. Um contorno da seleo exibido ao redor do conjunto de quadros.
N OT A
Em geral mais fcil selecionar conjuntos de quadros no painel Frames (Quadros) do que na janela do documento. Para obter mais informaes, consulte Selecionar quadros e conjuntos de quadros no painel Frames (Quadros) na pgina 314.
Para selecionar outro quadro ou conjunto de quadros, siga um dos procedimentos abaixo:
Para selecionar o quadro ou conjunto de quadros anterior ou seguinte no mesmo nvel hierrquico que a seleo atual, pressione Alt e seta para a esquerda ou Alt e seta para a direita (Windows) ou Command e seta para a esquerda ou Command e seta para a direita (Macintosh). Ao utilizar essas teclas, possvel alternar os quadros e conjuntos de quadros na ordem na qual eles so definidos no arquivo do conjunto de quadros. Para selecionar o conjunto-me de quadros (o conjunto de quadros que contm a seleo atual), pressione Alt+Seta para Cima (Windows) ou Command+Seta para Cima (Macintosh).
315
Para selecionar o primeiro quadro filho ou conjunto de quadros do conjunto de quadros atualmente selecionado (isto , o primeiro na ordem em que esto definidos no arquivo do conjunto de quadros), pressione Alt+Seta para Baixo (Windows) ou Command+Seta para Baixo (Macintosh).
Tpicos relacionados Selecionar quadros e conjuntos de quadros no painel Frames (Quadros) na pgina 314

Visualizao e definio de propriedades e atributos de quadros na pgina 318 Exibir e definir propriedades de conjuntos de quadros na pgina 320
Abrir um documento em um quadro

Pode-se especificar o contedo inicial de um quadro inserindo o novo contedo em um documento vazio em um quadro ou abrindo um documento existente em um quadro.
Para abrir um documento existente em um quadro:
1. 2. 3.
Coloque o ponto de insero em um quadro. Selecione File (File) > Open in Frame (Abrir no quadro). Selecione um documento a ser aberto no quadro e clique em OK (Windows) ou em Choose (Escolher) (Macintosh). O documento ser exibido no quadro. (Opcional) Para tornar esse o documento padro a ser exibido no quadro quando o conjunto de quadros for aberto em um navegador, salve o conjunto de quadros.
4.
Salvar arquivos de quadros e de conjuntos de quadros

Para visualizar um conjunto de quadros em um navegador, voc deve salvar o arquivo do conjunto de quadros e todos os documentos que sero exibidos nos quadros. possvel salvar cada arquivo do conjunto de quadros e o documento com quadro individualmente ou salvar o arquivo do conjunto de quadros e todos os documentos exibidos em quadros de uma s vez.
N O TA 316
Ao utilizar ferramentas visuais no Dreamweaver para criar um conjunto de quadros, cada novo documento que exibido em um quadro recebe um nome de arquivo padro. Por exemplo: o primeiro arquivo do conjunto de quadros denominado UntitledFrameset-1, enquanto o primeiro documento em um quadro denominado UntitledFrame-1.
Para salvar um arquivo de conjunto de quadros:

1.
Selecione o conjunto de quadros no painel Frames (Quadros) ou na janela do documento (consulte Selecionar quadros e conjuntos de quadros na pgina 313). Siga um dos procedimentos abaixo:
2.
Para salvar o arquivo do conjunto de quadros, selecione File (Arquivo) > Frameset (Salvar conjunto de quadros). Para salvar um novo arquivo de conjunto de quadros, selecione File (Arquivo) > Save Frameset As (Salvar conjunto de quadros como).
Caso o arquivo do conjunto de quadros no tenha sido salvo anteriormente, os dois comandos sero equivalentes.
Para salvar um documento que exibido em um quadro:
Clique no quadro e selecione File (Arquivo) > Save Frame (Salvar quadro) ou File > Save Frame As (Salvar quadro como).
Para salvar todos os arquivos associados a um conjunto de quadros:
Selecione File (Arquivo) > Save All Frames (Salvar todos os quadros).
Salvar arquivos de quadros e de conjuntos de quadros
317
Isso salvar todos os documentos abertos no conjunto de quadros, incluindo o arquivo do conjunto de quadros e todos os documentos com quadro. Se o arquivo do conjunto de quadros ainda no tiver sido salvo, uma borda mais espessa ser exibida ao redor do conjunto de quadros na visualizao do projeto e uma caixa de dilogo permitir escolher um nome de arquivo. Para cada quadro que ainda no tiver sido salvo, ser exibida uma borda mais espessa ao redor do quadro e uma caixa de dilogo permitir escolher um nome de arquivo.
Visualizao e definio de propriedades e atributos de quadros

Utilize o Property inspector (Inspetor de propriedades) para exibir e definir a maioria das propriedades do quadro. Voc tambm pode definir alguns atributos de quadros, como o atributo de ttulo (que diferente do atributo de nome), para aumentar a acessibilidade. Voc pode ativar a opo de autoria de acessibilidade de quadros para definir atributos ao criar quadros (consulte Otimizar a rea de trabalho para o projeto de pgina acessvel na pgina 76) ou pode definir atributos aps inserir um quadro. Para editar atributos de acessibilidade de um quadro, voc pode usar o Tag inspector (Inspetor de tags) para editar o cdigo HTML diretamente. Para definir propriedades para um conjunto de quadros, consulte Exibir e definir propriedades de conjuntos de quadros na pgina 320.
N OT A 318
Se File (Arquivo) > Open in Frame (Abrir no quadro) tiver sido utilizado para abrir um documento em um quadro, ao salvar o conjunto de quadros, o documento aberto no quadro se tornar o documento padro a ser exibido naquele quadro. Se no desejar que o documento seja o padro, no salve o arquivo do conjunto de quadros.
Para exibir ou definir as propriedades do quadro:

1.
Selecione um quadro seguindo um dos procedimentos abaixo:
Mantenha pressionada a tecla Alt (no Windows), ou as teclas Shift-Option (no Macintosh), e clique em um quadro na visualizao do projeto da janela do documento. Clique em um quadro no painel Frames (Quadros) (Window (Janela) > Frames (Quadros)).
2.
No Property inspector (Inspetor de propriedades) (Window (Janela) > Properties (Propriedades)), clique na seta de expanso no canto inferior direito para exibir todas as propriedades do quadro.
3.
Faa as alteraes necessrias. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
DICA
Para alterar a cor de fundo de um quadro, defina a cor de fundo do documento no quadro, nas propriedades de pgina.
Para definir os valores de acessibilidade de um quadro:

1.
No painel Frames (Quadros) (Window (Janela) > Frames (Quadros)), selecione um quadro posicionando o ponto de insero em um dos quadros. Selecione Modify (Modificar) > Edit Tag (Editar tag). O Tag Editor (Editor de tags) ser aberto. Na lista de categorias esquerda, selecione Style Sheet/Accessibility (Folha de estilos/ Acessibilidade). Digite os valores desejados. Clique em OK.
2.
3.
4. 5.
Para editar os valores de acessibilidade de um quadro:

1.
Use as visualizaes Code (Cdigo) ou Code and Design (Cdigo e design) do documento, caso esteja na visualizao Design (Design). No painel Frames (Quadros) (Window (Janela) > Frames (Quadros)), selecione um quadro posicionando o ponto de insero em um dos quadros. O Dreamweaver reala a tag do quadro no cdigo.
2.
Visualizao e definio de propriedades e atributos de quadros
319
3.
Clique com o boto direito (Windows) ou clique e mantenha pressionada a tecla Control (Macintosh) no cdigo e selecione Edit Tag (Editar tag). O Tag Editor (Editor de tags) ser aberto. Faa as alteraes necessrias. Clique em OK.
4. 5.
Para alterar a cor de fundo de um documento em um quadro:

1. 2.
Coloque o ponto de insero no quadro. Selecione Modify (Modificar) > Page Properties (Propriedades da pgina). Ser exibida a caixa de dilogo Page Properties. Clique no menu pop-up Background (Fundo) e selecione uma cor. Clique em OK.
3. 4.
Tpicos relacionados Criar quadros e conjuntos de quadros na pgina 309
Exibir e definir propriedades de conjuntos de quadros

Utilize o Property inspector (Inspetor de propriedades) para exibir e definir a maioria das propriedades dos conjuntos de quadros. Para definir propriedades para um quadro, consulte Visualizao e definio de propriedades e atributos de quadros na pgina 318.
Para exibir ou definir as propriedades de conjuntos de quadros:
1.
Selecione um conjunto de quadros, seguindo um dos procedimentos abaixo:
Clique em uma borda entre dois quadros no conjunto de quadros da visualizao do projeto da janela do documento. Clique na borda que circunda um conjunto de quadros no painel Frames (Window > Frames).
320
2.
No Property inspector (Inspetor de propriedades), em Window > Properties (Propriedades), clique na seta de expanso no canto inferior direito para exibir todas as propriedades do conjunto de quadros.
3.
Faa as alteraes necessrias. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
Para definir um ttulo para um documento do conjunto de quadros:

1.
Selecione um conjunto de quadros, seguindo um dos procedimentos abaixo:
Clique em uma borda entre dois quadros no conjunto de quadros da visualizao do projeto da janela do documento. Clique na borda que circunda um conjunto de quadros no painel Frames (Window > Frames).
2.
No campo Title (Ttulo) da barra de ferramentas Document (Documento), digite um nome para o documento do conjunto de quadros.
Quando um visitante exibe o conjunto de quadros em um navegador, o ttulo exibido na barra de ttulos do navegador. Tpicos relacionados Criar quadros e conjuntos de quadros na pgina 309
Controlar o contedo de quadros com links

Para utilizar um link de um quadro para abrir um documento em outro quadro, necessrio definir um destino para o link. O atributo target de um link especifica a quadro ou janela na qual o contedo com link ser aberto.
Controlar o contedo de quadros com links
321
Por exemplo: se a barra de navegao estiver no quadro esquerda e se desejar que o material com link seja exibido no quadro principal de contedo direita, ser necessrio especificar o nome do quadro principal de contedo como destino para cada um dos links da barra de navegao. Quando um visitante clica em um link de navegao, o contedo especificado aberto no quadro principal.
Para designar um quadro:
1. 2.
Na visualizao do projeto, selecione um texto ou um objeto. No campo Link do Property inspector (Inspetor de propriedades) (Window (Janela) > Properties (Proopriedades)), siga um destes procedimentos:

Clique no cone da pasta e selecione o arquivo a ser vinculado. Arraste o cone Point to File (Apontar para arquivo) para o painel Files (Arquivos) para selecionar o arquivo ao qual se vincular.
3.
No menu pop-up Target (Destino) no Property inspector (Inspetor de propriedades), selecione o quadro ou janela no qual o documento vinculado deve aparecer:
_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 quadros do quadro na qual o link ser exibido, substituindo o conjunto de quadros inteiro. _self
abre o link no quadro atual, substituindo o contedo desse quadro. todos os
_top abre o documento vinculado na janela atual do navegador, substituindo
quadros. Nomes de quadros tambm aparecem neste menu. Selecione um quadro com nome para abrir o documento vinculado nesse quadro.
N OT A DICA 322
Os nomes de quadro sero exibidos apenas ao editar um documento em um conjunto de quadros. Quando voc edita um documento em sua janela Document (Documento), os nomes dos quadros no so exibidos no menu pop-up Target (Destino). Se estiver editando um documento fora do conjunto de quadros, voc pode digitar o nome do quadro de destino na caixa de texto Target (Destino). Se estiver vinculando a uma pgina fora do seu site, utilizar sempre target="_top" ou target="_blank" para garantir que a pgina no parea fazer parte do seu site.
Lidar com um navegador que no pode exibir quadros

O Dreamweaver permite especificar o contedo a ser exibido em navegadores com base em texto e em navegadores grficos mais antigos e sem suporte a quadros. Esse contedo armazenado no arquivo do conjunto de quadros, contido em uma tag noframes. Quando um navegador sem suporte a quadros carrega o arquivo do conjunto de quadros, o navegador exibe apenas o contedo delimitado pela tag noframes.
N OT A
O contedo na rea noframes deve ser maior do que apenas uma observao que diz: necessrio fazer upgrade para um navegador que pode lidar com quadros. Algumas pessoas tm boas razes para utilizar um sistema que no permite a exibio de quadros. Tentar tornar o contedo o mais acessvel possvel para tais visitantes.
Para definir o contedo para navegadores sem suporte a quadros:

1.
Selecione Modify (Modificar) > Frameset (Conjunto de quadros) > Edit NoFrames Content (Editar contedo NoFrames). O Dreamweaver limpar a visualizao do projeto e a mensagem NoFrames Content (Contedo NoFrames) ser exibida na parte superior da visualizao do projeto.
2.
Para criar o contedo NoFrames, siga um dos procedimentos abaixo:
Na janela do documento, digite ou insira o contedo do mesmo modo que seria feito em um documento normal. Selecione Window (Janela) > Code Inspector (Inspetor de cdigo), posicione o ponto de insero entre as tags body que so exibidas dentro das tags noframes e digite o cdigo HTML do contedo.
3.
Selecione novamente Modify (Modificar) > Frameset (Conjunto de quadros)> Edit NoFrames Content (Editar contedo NoFrames) para retornar exibio normal do documento com o conjunto de quadros.
Utilizar comportamentos JavaScript com quadros

H vrios comportamentos JavaScript e comandos relacionados navegao que so particularmente apropriados para utilizao com quadros.
Utilizar comportamentos JavaScript com quadros
323
A ao Set Text of Frame (Definir o texto do quadro) substitui o contedo e a formatao de determinado quadro pelo contedo especificado. O contedo pode incluir qualquer HTML vlido. Utilize esta ao para exibir informaes dinamicamente em um quadro. Consulte Set Text of Frame (Definir o texto do quadro) na pgina 566. A ao Go to URL (Ir para a URL) abre uma nova pgina na janela atual ou no quadro especificado. Esta ao especialmente til para alterar o contedo de dois ou mais quadros com um nico clique. Consulte Go to URL (Ir para a URL) na pgina 559. O comando Insert Navigation Bar (Inserir barra de navegao) adiciona uma barra de navegao a uma pgina; aps inserir uma barra de navegao, possvel anexar comportamentos as suas imagens e definir qual imagem ser exibida com base nas aes de um visitante. Por exemplo: uma imagem de boto pode ser mostrada no estado para cima ou para baixo, para permitir que o visitante saiba qual pgina de um site est sendo exibida. Consulte Inserir uma barra de navegao na pgina 486. O comando Insert Jump Menu (Inserir menu de salto) configura uma lista de menu de links que abrem arquivos em uma janela do navegador quando clicados. Voc tambm pode designar uma janela ou quadro em que o documento aberto. Consulte Inserir menus de salto na pgina 483.
324
CAPTULO 11
Gerenciar modelos
Um modelo do Dreamweaver 8 consiste em um tipo especial de documento que voc pode usar para projetar um layout de pgina fixo; voc pode criar documentos com base no modelo que herdar o layout de pgina do modelo. Ao projetar um modelo, voc especifica quais reas de documentos baseados no modelo podem ser editadas pelos usurios.
N O TA
11
Os modelos permitem controlar uma rea de design maior e reutilizar layouts inteiros. Se quiser reutilizar elementos de design, como informaes de direitos autorais ou um logotipo, voc pode criar itens de biblioteca. Para obter mais informaes, consulte Captulo 5, Gerenciar bibliotecas e propriedades de sites, na pgina 177.

Sobre modelos do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326 Criar um modelo no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 Criar modelos para um site do Contribute. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 Criar regies editveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .346 Criar regies repetitivas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350 Usar regies opcionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .353 Definir atributos de tag editveis. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .356 Criar um modelo aninhado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357 Editar e atualizar modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 Gerenciar modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .363 Exportar e importar o contedo XML de um modelo . . . . . . . . . . . . . . . . . . . . . . . . .364 Exportar um site sem markup de modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .365 Aplicar ou remover um modelo de um documento existente . . . . . . . . . . . . . . . . . .366 Editar contedo em um documento baseado em modelo. . . . . . . . . . . . . . . . . . . . .368
325
Sobre modelos do Dreamweaver

O autor de um modelo projeta um layout de pgina fixo em um modelo. O autor cria ento regies em um modelo que podem ser editadas em documentos baseados nesse modelo; se o autor no definir uma regio como editvel, os usurios do modelo no podero editar contedo nessa rea. Os modelos permitem aos autores controlar os elementos da pgina que podem ser editados pelos usurios redatores, artistas grficos ou outros desenvolvedores de Web. H vrios tipos de regies de modelo que o autor pode incluir em um documento. Uma das principais e mais poderosas caractersticas dos modelos sua capacidade de atualizar diversas pginas simultaneamente. Um documento criado a partir de um modelo permanece conectado a esse modelo (a menos que o documento seja posteriormente desanexado). Voc pode modificar um modelo e atualizar imediatamente o design em todos os documentos baseados nele. Tpicos relacionados Criar um modelo no Dreamweaver na pgina 340
Tipos de regies de modelo

O Dreamweaver bloqueia automaticamente a maioria das regies de um documento ao salvar o documento como modelo. Como autor do modelo, voc pode especificar as regies de um documento baseado em modelo que podem ser editadas, inserindo regies ou parmetros editveis no modelo. Enquanto o arquivo de modelo estiver sendo criado, possvel alterar regies editveis e regies bloqueadas. Em um documento baseado em modelo, no entanto, um usurio do modelo pode efetuar alteraes somente nas regies editveis. As regies bloqueadas no podem ser modificadas. H quatro tipos de regies de modelo: uma regio desbloqueada de um documento baseado em modelo, ou seja, uma seo editvel pelo usurio do modelo. O autor do modelo pode definir qualquer rea de um modelo como editvel. Para que um modelo seja efetivo, ele deve conter uma regio editvel pelo menos, caso contrrio, as pginas baseadas no modelo no podero ser editadas. Para obter informaes sobre como inserir uma regio editvel, consulte Inserir uma regio editvel na pgina 347.
Regio editvel:
326
Captulo 11: Gerenciar modelos
Regio repetitiva:
uma seo do layout definida em um documento para ser repetida vrias vezes. Por exemplo, voc pode definir que a linha de uma tabela deve ser repetida. Geralmente, as sees repetitivas so editveis, de modo que o usurio do modelo pode editar o contedo do elemento repetitivo, embora o design em si seja controlado pelo autor do modelo. O usurio do modelo utiliza as opes de controle da regio repetitiva para adicionar ou excluir cpias de regies repetitivas em um documento baseado no modelo, caso necessrio. Existem dois tipos de regies repetitivas que voc pode inserir em um modelo: regio repetitiva e tabela repetitiva. Para obter mais informaes sobre como inserir uma regio repetitiva em um modelo, consulte Criar uma regio repetitiva em um modelo na pgina 350. Para obter informaes sobre como criar uma tabela repetitiva, consulte Inserir uma tabela repetitiva na pgina 351. Para obter informaes sobre como trabalhar com uma regio repetitiva em uma pgina baseada em modelo, consulte Adicionar, excluir e modificar a ordem de uma entrada de regio repetitiva na pgina 370.
Regio opcional
uma seo de um modelo que voc define como opcional, para armazenar contedo (como texto opcional ou uma imagem) que pode ou no aparecer no documento baseado no modelo. Em uma pgina baseada em modelo, o usurio do modelo normalmente controla se o contedo ser exibido. Para obter mais informaes sobre como definir regies opcionais em um modelo, consulte Inserir uma regio opcional na pgina 353. Para obter informaes sobre como definir regies opcionais em uma pgina baseada em modelo, consulte Modificar propriedades de modelos na pgina 368.
Atributo de tag editvel: permite desbloquear um atributo de tag em um modelo, de modo que o atributo possa ser editado em uma pgina baseada em modelo. Por exemplo, voc pode bloquear a imagem que aparece no documento, mas permitir que o usurio do modelo defina o alinhamento esquerda, direita ou centralizado. Para obter mais informaes sobre como definir atributos de tags editveis, consulte Definir atributos de tag editveis em um modelo na pgina 356. Para obter informaes sobre como editar as tags em uma pgina baseada em modelo, consulte Modificar propriedades de modelos na pgina 368.
Tpicos relacionados Criar regies editveis na pgina 346

Criar regies repetitivas na pgina 350 Usar regies opcionais na pgina 353 Definir atributos de tag editveis na pgina 356
327
Modelos e documentos baseados em modelo nas visualizaes do projeto e do cdigo

possvel exibir, nas visualizaes do projeto e do cdigo, modelos e documentos baseados em modelo.
Exibir modelos na visualizao do projeto

Nos modelos, as regies editveis aparecem na visualizao do projeto da janela do documento, entre contornos retangulares na cor de realce predefinida. Uma pequena guia aparece no canto superior esquerdo de cada regio, exibindo o nome de cada regio.
NO TA
Para obter informaes sobre como definir preferncias de cor de realce, consulte Definir preferncias de realce para regies de modelo na pgina 342.
possvel identificar um arquivo de modelo olhando para a barra de ttulo na janela do documento. A barra de ttulo de um arquivo de modelo exibe a palavra <<Template>> e a extenso de nome de arquivo .dwt.
Tpicos relacionados Exibir documentos baseados em modelo na visualizao do projeto na pgina 330 Exibir documentos baseados em modelo na visualizao de cdigo na pgina 330
328
Exibir modelos na visualizao do cdigo

Na visualizao do cdigo possvel efetuar alteraes tanto no cdigo-fonte editvel como no cdigo HTML bloqueado em um modelo.
DICA
Voc pode usar preferncias de cores de cdigo para definir seu esquema de cores, de modo a poder distinguir facilmente as regies do modelo ao exibir um documento na visualizao de cdigo (consulte Personalizar preferncias de cores de cdigo para um modelo na pgina 342).
As regies de contedo editvel so marcadas em HTML com os seguintes comentrios:


Qualquer item entre esses comentrios editvel em documentos baseados no modelo. O cdigo-fonte HTML de uma regio editvel pode ter a seguinte aparncia:
<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>
N OT A
Ao editar cdigo e modelo na visualizao de cdigo, tome cuidado para no alterar nenhuma das tags de comentrios relacionados ao modelo de que o Dreamweaver necessita.
Tpicos relacionados Exibir modelos na visualizao do projeto na pgina 328 Exibir documentos baseados em modelo na visualizao de cdigo na pgina 330
329
Exibir documentos baseados em modelo na visualizao do projeto

Em um documento baseado em um modelo, as regies editveis aparecem na visualizao do projeto na janela do documento circundadas por contornos retangulares em uma cor de realce predefinida. Uma pequena guia aparece no canto superior esquerdo de cada regio, exibindo o nome de cada regio.
NO TA
Para obter informaes sobre como definir preferncias de cor de realce, consulte Definir preferncias de realce para regies de modelo na pgina 342.
Alm dos contornos de regies editveis, a pgina inteira 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 retngulo realado est presente para lembrar que o documento est baseado em um modelo e que nada poder ser modificado fora das regies editveis.
Tpicos relacionados Exibir modelos na visualizao do projeto na pgina 328 Exibir modelos na visualizao do cdigo na pgina 329
Exibir documentos baseados em modelo na visualizao de cdigo

Na visualizao de cdigo, as regies editveis em um documento baseado em um modelo aparecem em uma cor diferente do cdigo nas regies no-editveis. Voc pode alterar cdigos apenas nas regies editveis ou em parmetros editveis; o Dreamweaver no permite que voc digite em regies bloqueadas.
330
O contedo editvel marcado em HTML com os seguintes comentrios do Dreamweaver:


Tudo o que estiver entre esses comentrios editvel em um modelo baseado em documento. O cdigo-fonte HTML de uma regio editvel pode ter a seguinte aparncia:
<body bgcolor="#FFFFFF" leftmargin="0"> <table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366"> <td>Name</td> <td><font color="#FFFFFF">Address</font></td> <td><font color="#FFFFFF">Telephone Number</font></td> </tr>  <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr>  </table> </body>
A cor padro para textos no-editveis cinza. possvel selecionar outra cor para as regies editveis e no-editveis na caixa de dilogo Preferences (Preferncias). Para obter mais informaes, consulte Personalizar preferncias de cores de cdigo para um modelo na pgina 342. Tpicos relacionados Exibir modelos na visualizao do projeto na pgina 328 Exibir modelos na visualizao do cdigo na pgina 329 Exibir documentos baseados em modelo na visualizao do projeto na pgina 330
Sintaxe de tags de modelo

Esta seo descreve as regras gerais de sintaxe e lista as tags de comentrios HTML usadas pelo Dreamweaver para especificar regies em modelos e em documentos baseados em modelos. O Dreamweaver insere automaticamente tags de modelos no cdigo quando voc insere um objeto de modelo.
N O TA
O Dreamweaver usa tags de comentrios HTML para definir regies de modelos, para que os documentos baseados em modelos sejam arquivos HTML vlidos.
331
Regras gerais de sintaxe

A seguir so descritas as regras gerais de sintaxe:
possvel substituir qualquer quantidade de espao em branco (espaos, tabulaes, quebras de linha), independentemente de onde ele aparea. O espao em branco obrigatrio, menos no comeo ou final de um comentrio. Os atributos podem estar em qualquer ordem. Por exemplo, em TemplateParam, possvel especificar o tipo antes do nome. Os comentrios e nomes de atributos reconhecem maisculas e minsculas. Todos os atributos devem estar entre aspas. Podem ser utilizadas aspas simples ou duplas.
Para obter informaes sobre como verificar a sintaxe, consulte Verificar a sintaxe de modelos na pgina 362. Tpicos relacionados Tags de instncia na pgina 333
Tags de modelo
O Dreamweaver usa as seguintes tags de modelo:
                
332
 (equivalent to @@...@@)  
Tpicos relacionados Regras gerais de sintaxe na pgina 332
Tags de instncia
O Dreamweaver usa as seguintes tags de modelo:
<!-<!-<!-<!-<!-<!-<!-<!-<!-InstanceBegin template="..." codeOutsideHTMLIsLocked="..." --> InstanceEnd --> InstanceBeginEditable name="..." --> InstanceEndEditable --> InstanceParam name="..." type="..." value="..." passthrough="..." --> InstanceBeginRepeat name="..." --> InstanceEndRepeat --> InstanceBeginRepeatEntry --> InstanceEndRepeatEntry -->
Tpicos relacionados Regras gerais de sintaxe na pgina 332
Tags de modelo na pgina 332
Links em modelos
Para criar um link em um arquivo de modelo, utilize o cone de pasta ou o cone indicador de arquivo) no Inspetor de propriedades. No digite o nome do arquivo a ser vinculado. Se voc digitar o nome, o link no funcionar como esperado. Esta seo explica como o Dreamweaver trata links em modelos. Ao criar um arquivo de modelo a partir de uma pgina existente, salve a pgina como modelo. O Dreamweaver atualizar os links de modo que apontem para os mesmos arquivos que antes. Como os modelos so salvos na pasta Templates (Modelos), o caminho para o link relativo ao documento modificado ao salvar a pgina como um modelo. No Dreamweaver, ao criar um novo documento baseado nesse modelo e salvar o novo documento, todos os links relativos ao documento so atualizados de modo que continuem apontando para os arquivos corretos.
333
Entretanto, ao adicionar um link relativo ao documento em um arquivo de modelo, se o caminho for digitado na caixa de texto do link no Inspetor de propriedades, possvel digitar um caminho incorreto por engano. O caminho correto o caminho da pasta Templates (Modelos) para o documento vinculado, e no o caminho da pasta do documento baseado em modelo para o documento vinculado. Para obter mais informaes sobre como vincular usando o cone indicador de arquivo, consulte Vincular arquivos e documentos na pgina 468.
N OT A 334
Em alguns casos (como, por exemplo, caminhos de arquivo em manipuladores de eventos em modelos) no ser possvel utilizar o cone de pasta ou o cone indicador de arquivo. Nesses casos, digite o caminho correto manualmente.
Modelos aninhados
Um modelo aninhado um modelo cujo projeto e regies editveis so baseados em outro modelo. Para criar um modelo aninhado, salve o modelo original ou bsico primeiro e, em seguida, crie um novo documento baseado no modelo e salve o documento como modelo. No novo modelo, possvel definir posteriormente regies editveis em reas originalmente definidas como editveis do modelo bsico. Os modelos aninhados so utilizados para controlar o contedo em pginas de um site que compartilham muitos elementos de design, mas possuem poucas variaes entre as pginas. Por exemplo, um modelo bsico pode conter reas de projeto maiores e ser utilizvel por diversos fornecedores de contedo de um site, enquanto um modelo aninhado pode definir as regies editveis de pginas em uma seo especfica do site. As regies editveis em um modelo bsico so repassadas ao modelo aninhado e permanecem editveis em pginas criadas a partir de um modelo aninhado, a menos que novas regies de modelo sejam inseridas nessas regies. As modificaes feitas em um modelo bsico so automaticamente atualizadas nos modelos baseados no modelo bsico, e em todos os documentos baseados em modelo que esto baseados no modelo principal e nos modelos aninhados.
No exemplo a seguir, o modelo contm trs regies editveis, denominadas Body, Nav Bar e Footer:
Para criar um modelo aninhado, criamos um novo documento baseado no modelo e salvamos o documento como modelo com o nome TrioNested. Em seguida, adicionamos ao modelo aninhado duas regies editveis, com contedo, na regio editvel Body.
335
Ao adicionar uma nova regio editvel a uma regio editvel repassada ao modelo aninhado, a cor de realce da regio editvel muda para laranja. O contedo adicionado por voc a uma regio editvel, como a imagem em editableColumn, no ser mais editvel em documentos baseados no modelo aninhado. As reas editveis realadas em azul, adicionadas ao modelo aninhado ou repassadas do modelo bsico, permanecem editveis nos documentos baseados no modelo aninhado. As regies de modelo s quais no so inseridas regies editveis so repassas aos documentos baseados no modelo como regies editveis. Tpicos relacionados Criar um modelo aninhado na pgina 357
Scripts do servidor em modelos e em documentos baseados em modelo

Alguns scripts do servidor so inseridos bem no incio ou no final do documento (antes da tag <html> ou aps a tag </html>). Esses scripts requerem tratamento especial em modelos e documentos baseados em modelo. Normalmente, se voc fizer alteraes no cdigo do script antes da tag <html> ou aps a tag </html> em um modelo, as alteraes no sero copiadas para os documentos baseados nesse modelo. Isso pode causar erros de servidor se outros scripts de servidor, dentro do corpo principal do modelo, dependerem dos scripts que no foram copiados. Como resultado, o Dreamweaver o alertar se uma alterao for feita nos scripts antes da tag <html> ou aps a tag </html> em um modelo. Para evitar este problema, insira o cdigo a seguir na seo head do modelo:

Quando esse cdigo estiver presente em um modelo, as alteraes feitas nos scripts antes da tag <html> ou aps a tag </html> sero copiadas para os documentos baseados nesse modelo. No entanto, no ser mais possvel 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 no em ambos.
Parmetros de modelo
Os parmetros de modelo especificam valores para controlar o contedo em documentos baseados em um modelo. possvel usar parmetros de modelo com regies opcionais ou atributos de tags editveis, ou definir os valores que deseja repassar para um documento anexado. Para cada parmetro, voc seleciona um nome, um tipo de dados e um valor padro. Cada parmetro deve ter um nome exclusivo, com distino de maisculas e de minsculas.
336
Os parmetros do modelo so repassados para um documento como parmetros de instncia. Na maioria dos casos, o usurio de um modelo pode editar o valor padro do parmetro para personalizar o que aparece em um documento baseado em modelo. Em outros casos, o autor do modelo pode determinar o que aparece no documento com base no valor de uma expresso de modelo. Tpicos relacionados Usar regies opcionais na pgina 353
Definir atributos de tag editveis na pgina 356
Expresses de modelo
As expresses de modelo so instrues utilizadas para computar ou avaliar um valor. Voc poder utilizar uma expresso para armazenar um valor e exibi-lo em um documento. Por exemplo, uma expresso pode ser simples como o valor de um parmetro, como @@(Param)@@, ou complexa o bastante para calcular valores que alternam a cor de fundo de uma linha da tabela, como @@((_index&1) ? red : blue)@@. Tambm possvel definir expresses para as condies if e if mltipla (para um exemplo, consulte Condio If mltipla em cdigos de modelo na pgina 339). Quando uma expresso usada em uma instruo condicional, o Dreamweaver a avalia como sendo true (verdadeira) ou false (falsa). Se a condio for verdadeira, a regio opcional aparecer no documento baseado em um modelo; se for falsa, no aparecer. Voc pode definir expresses na visualizao de cdigo ou na caixa de dilogo Optional Region (Regio opcional) ao inserir uma regio opcional. Para obter mais informaes sobre como criar expresses de modelos, consulte A linguagem de expresso do modelo na pgina 337. Na visualizao de cdigo, h duas maneiras de definir expresses de modelos: usando o comentrio  ou @@(your expression)@@. Quando voc insere uma expresso no cdigo do modelo, um marcador de expresso aparece na visualizao do projeto. Ao aplicar no modelo, o Dreamweaver avalia a expresso e exibe o valor no documento baseado no modelo.
A linguagem de expresso do modelo

A linguagem da expresso do modelo um pequeno subconjunto do JavaScript e utiliza sintaxe e regras de precedncia do JavaScript. possvel utilizar operadores do JavaScript para escrever uma expresso do seguinte modo:
@@(firstName+lastName)@@
337
Os seguintes recursos e operadores so suportados:
literais numricos, literais de seqncia de caracteres (somente sintaxe entre aspas duplas), literais booleanos (true ou false) referncia varivel (consulte a lista de variveis definidas mais adiante nesta seo) referncia de campo (operador dot) operadores unrios: +, -, ~, ! operadores binrios: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >> operador condicional: ?: parnteses: ()
Os seguintes tipos de dados so usados: booleano, ponto flutuante IEEE de 64 bits, seqncia de caracteres e objeto. Os modelos do Dreamweaver no suportam o uso dos tipos nulo ou indefinido do JavaScript. No permitem tambm tipos escalares para serem convertidos implicitamente em um objeto. Assim, a expresso "abc".length resultaria em erro, em vez de produzir o valor 3. Os nicos objetos disponveis so aqueles definidos pelo modelo de objeto de expresso. As variveis a seguir so definidas:
_document
Contm os dados do modelo no nvel do documento com um campo para cada parmetro do modelo.
_repeat
Definido apenas para expresses que aparecem dentro de uma regio repetitiva. Fornece informaes incorporadas sobre a regio:
_index
ndice numrico (a partir de 0) da entrada atual Nmero total de entradas nesta regio repetitiva Verdadeiro se a entrada atual for a primeira entrada na regio repetitiva Verdadeiro se a entrada atual for a ltima entrada na regio repetitiva
_numRows _isFirst _isLast
_prevRecord O objeto _repeat da entrada anterior. um erro acessar esta propriedade para a primeira entrada da regio. _nextRecord O objeto _repeat da entrada seguinte. um erro acessar esta propriedade para a ltima entrada da regio. _parent Em uma regio repetitiva aninhada, fornece o objeto _repeat para a regio repetitiva final (externa). um erro acessar esta propriedade fora de uma regio repetitiva aninhada.
338
Durante a avaliao da expresso, todos os campos dos objetos _document e _repeat esto implicitamente disponveis. Por exemplo, possvel digitar title em vez de _document.title para acessar o parmetro de ttulo do documento. Em casos em que no h um conflito de campos, os campos do objeto _repeat tm precedncia sobre os campos do objeto _document. Portanto, no ser necessrio fazer referncia explcita a _document ou _repeat, a menos que _document seja necessrio dentro de uma regio repetitiva para fazer referncia a parmetros de documento que estejam ocultados por parmetros de regies repetitivas. Quando as regies repetitivas aninhadas forem utilizadas, somente os campos das regies repetitivas internas estaro implicitamente disponveis. As regies externas devem ser explicitamente indicadas por meio de _parent.
Condio If mltipla em cdigos de modelo

possvel definir expresses de modelo para condies if e if mltipla (consulte Expresses de modelo na pgina 337). Este exemplo demonstra a definio de um parmetro denominado Dept, definindo um valor inicial e definindo uma condio if mltipla que determina o logotipo a ser exibido. O exemplo a seguir mostra um cdigo que voc pode digitar na seo de cabealho do modelo:

A instruo de condio a seguir verifica o valor atribudo ao parmetro Dept. Quando a condio for verdadeira (true) ou correspondente, a imagem apropriada ser exibida.
   <img src=".../sales.gif">   <img src=".../ support.gif">   <img src=".../hr.gif">   <img src=".../ spacer.gif">  
Quando voc cria um documento baseado em um modelo, os parmetros do modelo so automaticamente repassados para ele. O usurio do modelo determina a imagem a ser exibida (consulte Modificar propriedades de modelos na pgina 368).
339
Criar um modelo no Dreamweaver

possvel criar um modelo a partir de um documento existente (como um documento HTML, Macromedia ColdFusion ou Microsoft Active Server Pages) ou a partir de um documento novo, vazio. Aps criar um modelo, voc pode inserir regies de modelos (consulte Tipos de regies de modelo na pgina 326). Voc tambm pode definir preferncias de modelo para cores de cdigo e cores de realce para regies de modelos (consulte Personalizar preferncias de cores de cdigo para um modelo na pgina 342 e Definir preferncias de realce para regies de modelo na pgina 342).
DICA
Voc pode armazenar informaes adicionais sobre um modelo (como nome do criador, data da ltima alterao, ou porque tomou determinadas decises sobre o layout) em um arquivo do Design Notes para o modelo (consulte Associar Design Notes a arquivos na pgina 169). Os documentos baseados em um modelo no herdaro as Design Notes.
Para criar um modelo:

1.
Abra o documento que deseja salvar como modelo:
Para abrir um documento, selecione File (Arquivo) > Open (Abrir) e, em seguida, selecione o documento. Para abrir um documento novo e em branco, escolha File (Arquivo) > New (Novo). Na caixa de dilogo exibida, selecione Basic Page (Pgina bsica) ou Dynamic Page (Pgina dinmica), selecione o tipo de pgina desejada e, em seguida, clique em Create (Criar).
N OT A
Para obter informaes sobre como criar um novo documento, consulte Criar um novo documento em branco na pgina 102.
2.
Com o documento aberto, siga um destes procedimentos:

Selecione File (Arquivo) > Save as Template (Salvar como modelo). Na categoria Common (Comuns) da barra Insert (Inserir), clique na seta do boto Templates (Modelos) e selecione Make Template (Criar modelo).
N OT A 340
A menos que a opo Dont Show This Dialog Again (No notificar novamente) esteja selecionada, ser exibido um aviso informando que o documento sendo salvo no possui regies editveis. Clique em OK para salvar o documento como modelo ou clique em Cancel (Cancelar) para sair dessa caixa de dilogo sem criar um modelo.
A caixa de dilogo Save as Template (Salvar como modelo) exibida.
3.
Selecione um site para salvar o modelo no meu pop-up Site e, em seguida, digite um nome para o modelo na caixa de texto Save As (Salvar como). Clique em Save (Salvar). O Dreamweaver salva o modelo na pasta Templates (Modelos) do site, na pasta raiz local do site, com a extenso de arquivo .dwt. Se a pasta Templates (Modelos) ainda no existir no site, o Dreamweaver criar a pasta quando voc salvar um novo modelo.
N OT A
4.
No remova os modelos da pasta Templates (Modelos) e no coloque arquivos que no sejam modelos nesta pasta. Alm disso, no mova a pasta Templates (Modelos) da pasta raiz local. Ao fazer isto, voc estar provocando erros nos caminhos dos modelos.
Para utilizar o painel Assets (Propriedades) para criar um novo modelo:

1.
No painel Assets [Window > Assets], selecione a categoria Templates (Modelos) no lado esquerdo do painel. A categoria Templates exibida no painel Assets. Clique no boto New Template (Novo modelo) na parte inferior do painel Assets. Um novo modelo vazio e sem ttulo adicionado lista de modelos no painel Assets. Com o modelo ainda selecionado, digite um nome para ele e, em seguida, pressione Enter (Windows) ou Return (Macintosh). Dreamweaver cria um modelo novo e vazio no painel Assets da pasta Templates.
2.
3.
Tpicos relacionados Definir preferncias de realce para regies de modelo na pgina 342

Criar modelos para um site do Contribute na pgina 344 Inserir uma regio editvel na pgina 347
341
Personalizar preferncias de cores de cdigo para um modelo

As preferncias de cores do cdigo controlam texto, cor de fundo e atributos de estilo do texto exibidos na visualizao do cdigo. Defina o seu esquema de cores, de modo a distinguir facilmente regies do modelo ao exibir um documento na visualizao de cdigo.
Para definir um esquema de cores para modelos na visualizao do cdigo:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida. Selecione Code Coloring (Codificao por cores) na lista de categorias esquerda. Selecione HTML na lista Document Type (Tipo de documento) e clique no boto Edit Coloring Scheme (Editar esquema de cores). A caixa de dilogo Edit Code Coloring Scheme (Editar esquema de codificao por cores) exibida.
2. 3.
4. 5.
Na lista Styles For (Estilo para), selecione Template Tags (Tags de modelo). Defina cor, cor de fundo e atributos de estilo para o texto na visualizao do cdigo efetuando um dos procedimentos a seguir:
Para alterar a cor do texto, digite na caixa de texto Text Color (Cor do texto) o valor hexadecimal da cor a ser aplicada ao texto selecionado, ou utilize o seletor de cores para selecionar uma cor a ser aplicada ao texto. Repita o procedimento no campo Background (Cor de fundo) para adicionar ou modificar uma cor de fundo existente para o texto selecionado. Se desejar adicionar um atributo de estilo ao cdigo selecionado, clique nos botes B (N) (negrito), I (I) (itlico) ou U (S) (sublinhado) para definir o estilo desejado.
6.
Clique em OK.
Definir preferncias de realce para regies de modelo

possvel utilizar as preferncias de realce do Dreamweaver para personalizar as cores de realce dos contornos das regies editveis e bloqueadas de um modelo na visualizao do projeto. A cor de regio editvel aparece no modelo, bem como em documentos baseados no modelo. Para mais informaes sobre a exibio de modelos e de documentos baseados em modelos na visualizao de projeto, consulte Exibir modelos na visualizao do projeto na pgina 328 e Exibir documentos baseados em modelo na visualizao do projeto na pgina 330.
342
Para alterar as cores de realce do modelo:

1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida. Selecione Highlighting (Realce) na lista de categorias esquerda. Clique na caixa de cor Editable Regions, Nested Regions, or Locked Regions (Regies editveis, regies aninhadas, regies bloqueadas) e, em seguida, selecione a cor de realce com o seletor de cores (ou digite o valor hexadecimal correspondente cor de realce na caixa de texto). Para obter informaes sobre como utilizar o seletor de cores, consulte Trabalhar com cores na pgina 384.
2. 3.
4. 5.
(Opcional) Repita este processo para outros tipos de regies de modelo, se necessrio. Clique na opo Show (Mostrar) para ativar ou desativar a exibio das cores na janela do documento.
N OT A
A caixa de cor Nested Region (Regio aninhada) no possui uma opo Show (Mostrar). Sua exibio controlada pela opo Editable Region (Regio editvel).
6.
Clique em OK.
Para exibir cores de realce na janela do documento:
Selecione View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis). As cores de realce aparecero na janela do documento apenas quando a opo View > Visual Aids > Invisible Elements for ativada e as opes apropriadas estiverem ativas nas preferncias de realce.
N OT A
Se os elementos invisveis forem exibidos, mas as cores de realce no, selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh) e, em seguida, selecione a categoria Highlight (Realce). Certifique-se de que a opo Show (Exibir) ao lado da cor de realce apropriada esteja selecionada. Assegure-se tambm de que a cor desejada esteja visvel em relao cor de fundo da pgina
Tpicos relacionados Personalizar preferncias de cores de cdigo para um modelo na pgina 342
343
Criar modelos para um site do Contribute

Com o Dreamweaver, voc pode criar modelos para ajudar os usurios do Macromedia Contribute na criao de novas pginas, para assegurar um aspecto consistente ao seu site, e para que possa atualizar o layout de vrias pginas ao mesmo tempo. Ao criar um modelo e transferi-lo para o servidor, o modelo fica disponvel para todos os usurios do Contribute que se conectam ao seu site, a menos sejam estabelecidas restries ao uso do modelo para determinadas funes do Contribute. Caso tenha definido restries de uso para o modelo, talvez precise adicionar cada novo modelo a uma lista de modelos que podem ser usados pelo usurio do Contribute (consulte Administering Contribute).
NO TA 344
Verifique se a pasta raiz do site especificada em cada definio do site do usurio do Contribute a mesma que a pasta raiz do site especificada na definio do seu site no Dreamweaver. Se a pasta raiz do site de um usurio no corresponder sua pasta, aquele usurio no poder utilizar os modelos.
Alm de modelos do Dreamweaver, possvel criar modelos no-Dreamweaver usando as ferramentas administrativas do Contribute. Um modelo no-Dreamweaver uma pgina existente que os usurios do Contribute podem utilizar para criar novas pginas. Ele similar a um modelo do Dreamweaver, exceto que as pginas baseadas nesse modelo no so atualizadas quando o modelo alterado. Alm disso, os modelos no-Dreamweaver no podem conter elementos de modelos do Dreamweaver, como regies editveis, bloqueadas, repetitivas e opcionais.
Quando um usurio do Contribute cria um novo documento em um site contendo modelos do Dreamweaver, o Contribute lista os modelos disponveis (tanto modelos Dreamweaver como no-Dreamweaver) na caixa de dilogo New Page (Nova pgina).
Para incluir em seu site pginas que utilizem outro tipo de codificao que no Latin-1, talvez voc precise criar modelos (modelos Dreamweaver ou no-Dreamweaver). O Contribute pode editar pginas que utilizam qualquer codificao, mas quando um usurio do Contribute cria uma nova pgina em branco, a codificao Latin-1 utilizada. Para criar uma pgina com uma codificao diferente, o usurio do Contribute pode criar uma cpia de uma pgina existente com uma outra codificao, ou utilizar um modelo com uma codificao diferente. No entanto, se no houver nenhuma pgina ou modelo no site com outras codificaes, ser preciso criar primeiro uma pgina ou modelo no Dreamweaver com outra codificao. Para obter mais informaes sobre como criar, editar e atualizar modelos do Dreamweaver, consulte Sobre modelos do Dreamweaver na pgina 326.
Criar modelos para um site do Contribute
345
Para criar um modelo no-Dreamweaver :

1.
Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. Selecione um site e, em seguida, clique em Edit (Editar). A caixa de dilogo Site Definition (Definio do site) exibida. Clique na guia Advanced (Avanado). Selecione uma categoria do Contribute na lista de categorias esquerda. Caso ainda no o tenha feito, voc dever ativar agora a compatibilidade do Contribute. Selecione a opo Enable Contribute Compatibility (Ativar compatibilidade) e, em seguida, digite um URL de site raiz. Para obter mais informaes, clique no boto Help (Ajuda).
2.
3. 4. 5.
6. 7.
Clique no boto Administer Site in Contribute. Se solicitada, insira a senha de administrador e depois clique em OK. A caixa de dilogo Administer Website (Administrar site da Web) exibida. Na categoria Users and Roles (Usurios e funes), selecione uma funo e depois clique no boto Edit Role Settings (Editar configuraes de funo). Selecione a categoria New Pages (Novas pginas) e adicione pginas existentes lista em Create a New Page by Copying a Page from This List (Criar nova pgina copiando uma pgina desta lista). Para obter mais informaes, consulte Administering Contribute. em OK para fechar a caixa de dilogo Edit Settings (Editar configuraes).
8.
9.
10. Clique 11.
Clique em Close (Fechar) para fechar a caixa de dilogo Administer Website.
Tpicos relacionados Criar um modelo no Dreamweaver na pgina 340
Criar regies editveis

As regies de modelo editveis controlam as reas de uma pgina baseada em modelo que podem ser editadas. Tpicos relacionados Tipos de regies de modelo na pgina 326
346
Inserir uma regio editvel

Antes de inserir uma regio editvel, salve o documento atual como modelo (consulte Criar um modelo no Dreamweaver na pgina 340).
NO T A

Se voc inserir uma regio editvel em um documento em vez de fazer isso em um arquivo de modelo, o Dreamweaver o advertir que o documento ser salvo automaticamente como um modelo.
Voc pode inserir uma regio editvel em qualquer parte da pgina, mas observe o seguinte ao criar uma tabela ou camada editvel: possvel marcar como editvel uma tabela inteira ou uma clula de tabela. No entanto, no possvel marcar vrias clulas da tabela como uma nica regio editvel. Se uma tag <td> for selecionada, a regio editvel incluir a regio ao redor da clula; caso contrrio, a regio editvel afetar apenas o contedo dentro da clula. As camadas e seu contedo so elementos distintos. Ao tornar editvel uma camada, sua posio e seu contedo podem ser alterados. Mas ao tornar editvel o contedo da camada, somente o contedo da camada (e no sua posio) poder ser alterado.
Para inserir uma regio de modelo editvel:

1.
Na janela do documento, siga um dos procedimentos abaixo para selecionar a regio:

Selecione o texto ou contedo a ser definido como uma regio editvel. Coloque o ponto de insero onde deseja inserir uma regio editvel. Selecione Insert (Inserir) > Template Objects (Objetos de modelo) > Editable Region (Regio editvel). Clique com o boto direito (Windows) ou clique mantendo pressionada a tecla Control (Macintosh) e, em seguida, selecione Templates (Modelos) > New Editable Region (Nova regio editvel). Na categoria Common da barra Insert, clique na seta do boto Templates e selecione Make Template (Criar modelo).
2.
Siga um dos procedimentos abaixo para inserir uma regio editvel:
A caixa de dilogo Editable Region (Regio editvel) exibida.
347
3.
Na caixa de texto Name (Nome), digite um nome exclusivo para a regio. Em um determinado modelo, no possvel utilizar o mesmo nome para mais de uma regio editvel.
NO TA
No permitido o uso de caracteres especiais na caixa de texto Name.
4.
Clique em OK. A regio editvel delimitada por um contorno retangular realado no modelo com a cor de realce definida em preferncias. Uma guia no canto superior esquerdo da regio mostra o nome da regio. Se uma regio editvel vazia for inserida no documento, o nome da regio tambm aparecer dentro da regio.
NO T A
Para obter informaes sobre como definir opes de realce de modelos, consulte Definir preferncias de realce para regies de modelo na pgina 342.
Tpicos relacionados Remover uma regio editvel na pgina 349
Alterar o nome de uma regio editvel na pgina 349
Selecionar regies editveis

possvel identificar e selecionar facilmente regies de modelo no documento de modelo e em documentos baseados em modelos.
Para selecionar uma regio editvel na janela do documento:
Clique na guia no canto superior esquerdo de uma regio editvel.
Para localizar uma regio editvel e selecion-la no documento:
Selecione Modify (Modificar) > Templates (Modelos) e, em seguida, escolha o nome da regio na lista localizada na parte inferior do submenu.
N OT A
As regies editveis dentro de uma regio repetitiva no aparecem no menu. necessrio localizar estas regies procurando pelas bordas com guia na janela do documento.
A regio editvel selecionada no documento.
348
Tpicos relacionados Definir preferncias de realce para regies de modelo na pgina 342

Inserir uma regio editvel na pgina 347 Alterar o nome de uma regio editvel na pgina 349
Remover uma regio editvel

Se tiver marcado uma regio do arquivo de modelo como editvel e quiser bloque-la (torn-la no-editvel nos documentos baseados no modelo) novamente, use o comando Remove Template Markup (Remover markup do modelo).
Para remover uma regio editvel:
1. 2.
Clique na guia no canto superior esquerdo da regio editvel para selecion-la. Siga um dos procedimentos abaixo:
Selecione Modify (Modificar) > Templates (Modelos) > Remove Template Markup (Remover markup do modelo). Clique com o boto direito (Windows) ou mantendo pressionada a tecla Control (Macintosh) e, em seguida, selecione Templates > Remove Template Markup.
A regio no ser mais editvel. Tpicos relacionados Inserir uma regio editvel na pgina 347
Alterar o nome de uma regio editvel

Aps inserir uma regio editvel, voc pode alterar o seu nome.
Para alterar o nome de uma regio editvel:
1. 2. 3.
Clique na guia no canto superior esquerdo da regio editvel para selecion-la. No Inspetor de propriedades [Window > Properties], insira um novo nome. Pressione a tecla Enter (no Windows) ou Return (no Macintosh).
Dreamweaver aplica o novo nome regio editvel. Tpicos relacionados Inserir uma regio editvel na pgina 347
349
Criar regies repetitivas

Uma regio repetitiva uma seo de um modelo que pode ser duplicada o nmero de vezes desejado em uma pgina baseada em modelo. As regies repetitivas so normalmente usadas em tabelas, embora tambm seja possvel definir uma regio repetitiva para outros elementos da pgina. As regies repetitivas permitem que voc controle o layout da sua pgina repetindo determinados itens, como um item de catlogo e um layout de descrio, ou uma linha de dados como, por exemplo, uma lista de itens. H dois objetos de modelo de regio repetitiva que podem ser utilizados: regio repetitiva e tabela repetitiva. Tpicos relacionados Tipos de regies de modelo na pgina 326
Criar uma regio repetitiva em um modelo

Regies repetitivas permitem aos usurios do modelo duplicar uma regio especificada no modelo tantas vezes quanto forem necessrias. Uma regio repetitiva no uma regio editvel. Para tornar editvel o contedo de uma regio repetitiva (por exemplo, para permitir a um usurio inserir texto em uma clula de tabela em um documento baseado em modelo), insira uma regio editvel na regio repetitiva (consulte Inserir uma regio editvel na pgina 347). Para obter informaes sobre como criar uma tabela repetitiva, consulte Inserir uma tabela repetitiva na pgina 351.
Para inserir uma regio repetitiva em um modelo:
1.
Na janela do documento, siga um dos procedimentos abaixo:

Selecione o texto ou contedo a ser definido como uma regio repetitiva. Coloque o ponto de insero onde deseja inserir a regio repetitiva no documento. Selecione Insert (Inserir) > Template Objects (Objetos de modelo) > Repeating Region (Regio repetitiva). Clique com o boto direito (Windows) ou clique mantendo pressionada a tecla Control (Macintosh) e, em seguida, selecione Templates > New Editable Region.
2.
Siga um dos procedimentos abaixo para criar uma regio repetitiva:
350
Na categoria Common da barra Insert, clique na seta do boto Templates e selecione Repeating Region.
A caixa de dilogo New Repeating Region (Nova regio repetitiva) exibida.

3.
Na caixa de texto Name (Nome), digite um nome exclusivo para a regio de modelo (no possvel utilizar o mesmo nome para mais de uma regio repetitiva em um modelo).
NO T A
No utilize caracteres especiais ao nomear uma regio.
4.
Clique em OK. A regio repetitiva ser inserida no documento.

N OT A
Uma regio repetitiva no editvel no documento baseado em modelo, a menos que ela contenha uma regio editvel. Para obter informaes sobre como inserir uma regio editvel, consulte Inserir uma regio editvel na pgina 347.
Inserir uma tabela repetitiva

Voc pode usar uma tabela repetitiva para criar uma regio editvel (em formato de tabela) com linhas repetitivas. possvel definir atributos de tabela e, em seguida, quais clulas sero editveis.
Para inserir uma tabela repetitiva:
1.
Na janela do documento, coloque o ponto de insero onde deseja inserir a tabela repetitiva no documento. Siga um dos procedimentos abaixo:
2.
Selecione Insert (Inserir) > Template Objects (Objetos de modelo) > Repeating Table (Tabela repetitiva). Na categoria Common da barra Insert, clique na seta do boto Templates e selecione Repeating Table.
Criar regies repetitivas
351
A caixa de dilogo Insert Repeating Table (Inserir tabela repetitiva) exibida.
3.
Digite novos valores conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK. A tabela repetitiva aparece no modelo.
4.
Definir cores de fundo diferentes em uma regio repetitiva

Aps inserir uma tabela repetitiva em um modelo (consulte Inserir uma tabela repetitiva na pgina 351), voc pode personaliz-la alternando a cor de fundo das linhas da tabela.
Para definir cores de fundo alternativas para linhas da tabela:
1. 2.
Na janela do documento, selecione uma linha na tabela repetitiva. Clique no boto Show Code view (Mostrar visualizao do cdigo) ou no boto Show Code and Design view (Mostrar visualizao do cdigo e do projeto), na barra de ferramentas do documento, para acessar o cdigo para a linha da tabela selecionada. Na visualizao do cdigo, edite a tag <tr> para incluir o cdigo a seguir:
<tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">
3.
Substitua os valores hexadecimais #FFFFFF e #CCCCCC por outras cores de sua escolha.
352
4.
Salve o modelo.
O exemplo de cdigo a seguir usado para uma tabela que inclui cores de fundo alternativas para as linhas da tabela:
<table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr>  <tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@"> <td>  name <!-TemplateEndEditable --> </td> <td>  phone <!-TemplateEndEditable --> </td> <td>  email <!-TemplateEndEditable --> </td> </tr>  </table>
Usar regies opcionais

Uma regio opcional uma regio em um modelo que os usurios podem configurar para ser exibida ou ocultada em um documento baseado em modelo. Use uma regio opcional quando voc desejar definir as condies de exibio do contedo em um documento. Ao inserir uma regio opcional, voc pode definir valores especficos para um parmetro de modelo ou definir instrues condicionais em um modelo. Se necessrio, voc poder modificar a regio opcional posteriormente. Com base nas condies definidas por voc, os usurios do modelo podem editar os parmetros em documentos criados por eles e controlar se a regio opcional deve ou no ser exibida.Modificar propriedades de modelos na pgina 368 Tpicos relacionados Tipos de regies de modelo na pgina 326
Inserir uma regio opcional

Use a regio opcional para controlar o contedo que pode ou no ser exibido em um documento baseado em modelo. H dois objetos de regio opcional:
353
Uma regio opcional permite aos usurios do modelo exibir ou ocultar regies com marcas especiais sem precisar editar seu contedo. A guia Templates (Modelos) de uma regio opcional precedida pela palavra if. Com base na condio definida no modelo, os usurios do modelo podem definir se a regio visvel nas pginas que criarem.
Uma regio opcional editvel permite aos usurios do modelo especificar se a regio ser ou no exibida, sendo que eles podem editar o contedo da regio. Por exemplo, se a regio opcional incluir uma imagem ou texto, o usurio do modelo pode definir se o contedo ser exibido, bem como editar o contedo, se desejado. Uma regio editvel controlada por uma instruo condicional.
NO TA
Para configurar regies opcionais para serem exibidas ou ocultadas em documentos baseados em modelos, consulte Modificar propriedades de modelos na pgina 368.
Para inserir uma regio opcional:

1. 2.
Na janela do documento, selecione o elemento que deseja definir como regio opcional. Siga um dos procedimentos abaixo:
Selecione Insert (Inserir) > Template Objects (Objetos de modelo) > Optional Region (Regio opcional). Clique com o boto direito (Windows) ou clique mantendo pressionada a tecla Control (Macintosh) no contedo selecionado e, em seguida, selecione Templates > New Optional Region. Na categoria Common da barra Insert, clique na seta do boto Templates e selecione Optional Region.
A caixa de dilogo Optional Region (Regio opcional) exibida.

3.
Especifique as opes para a regio opcional. Para obter mais informaes sobre como definir a regio opcional, clique no boto Help (Ajuda) da caixa de dilogo.
4.
Clique em OK.
Para inserir uma regio opcional editvel:

1.
Na janela do documento, coloque o ponto de insero onde deseja inserir a regio opcional.
D IC A
No possvel marcar uma seleo para criar uma regio editvel opcional. Insira a regio e, em seguida, insira o contedo na regio.
354
2.
Siga um dos procedimentos abaixo para abrir a caixa de dilogo Optional Region (Regio opcional):
Selecione Insert (Inserir) > Template Objects (Objetos de modelo) > Editable Optional Region (Regio opcional editvel). Na categoria Common da barra Insert, clique na seta do boto Templates e selecione Editable Optional Region.
A caixa de dilogo Optional Region (Regio opcional) exibida.

3.
Digite o nome da regio opcional e, em seguida, clique na guia Advanced (Avanado) se quiser definir outras opes. Para obter mais informaes sobre como definir a regio opcional, clique no boto Help (Ajuda) da caixa de dilogo.
4.
Clique em OK.
Modificar uma regio opcional

possvel editar as configuraes da regio opcional aps inserir a regio em um modelo. Por exemplo, voc pode definir se o padro do contedo deve ser exibido ou no, vincular um parmetro a uma regio opcional existente ou modificar uma expresso de modelo.
N O TA
Para configurar regies opcionais para serem exibidas ou ocultadas em documentos baseados em modelos, consulte Modificar propriedades de modelos na pgina 368.
Para reabrir a caixa de dilogo Optional Region (Regio opcional):

1.
Na visualizao do projeto, clique na guia do modelo da regio opcional a ser modificada. Na visualizao do projeto, posicione o ponto de insero na regio do modelo; em seguida, no seletor de tags na parte inferior da janela do documento, selecione a tag do modelo, <mmtemplate:if>. Na visualizao do cdigo, clique na tag de comentrio da regio de modelo a ser modificada.
2.
No Inspetor de propriedades (Window > Properties), clique em Edit. A caixa de dilogo Optional Region (Regio opcional) exibida.
355
3.
Faa as alteraes necessrias. Para obter informaes sobre opes da caixa de dilogo, clique no boto Help (Ajuda) da caixa de dilogo.
4.
Clique em OK.
Definir atributos de tag editveis

Voc pode permitir que o usurio de um modelo modifique atributos de tag especificados em um documento baseado em um modelo. Por exemplo, voc pode definir uma cor de fundo no documento de modelo, mas permitir que os usurios definam outra cor de fundo para as pginas criadas por eles. Os usurios podem atualizar somente os atributos que voc especificar como editveis.
NO TA
Para modificar atributos de tags editveis em documentos baseados em modelos, consulte Modificar propriedades de modelos na pgina 368.
Tpicos relacionados Tipos de regies de modelo na pgina 326
Definir atributos de tag editveis em um modelo

Voc pode definir vrios atributos editveis em uma pgina, de modo que os usurios do modelo possam modificar esses atributos em documentos baseados em modelos. Os tipos de dados a seguir so suportados: texto, booleanos (true/false), cores e URL.
Para definir um atributo de tag editvel:
1.
Na janela do documento, selecione um item para o qual deseja definir um atributo de tag editvel. Selecione Modify (Modificar) > Templates (Modelos) > Make Attribute Editable (Tornar editvel o atributo). A caixa de dilogo Editable Tag Attributes (Atributos de tag editveis) exibida. Preencha a caixa de dilogo para cada atributo que deseja tornar editvel. Para obter informaes sobre como preencher a caixa de dilogo, clique no boto Help (Ajuda) da caixa de dilogo.
2.
3.
356
4.
Clique em OK. Crie um atributo de tag editvel para inserir um parmetro de modelo no cdigo. Um valor inicial para o atributo definido no documento de modelo. Quando um documento baseado em modelo for criado, o parmetro ser atribudo automaticamente ao documento. Um usurio do modelo pode ento editar o parmetro no documento baseado em modelo (consulte Modificar propriedades de modelos na pgina 368).
Tornar no-editvel um atributo de tag editvel

Uma tag marcada como editvel pode ser marcada como no-editvel.
Para redefinir um atributo de tag editvel:
1.
No documento de modelo, clique no elemento associado ao atributo editvel, ou use o seletor de tags para selecionar a tag. Selecione Modify (Modificar) > Templates (Modelos) > Make Attribute Editable (Tornar editvel o atributo). A caixa de dilogo Editable Tag Attributes (Atributos de tag editveis) exibida. No menu pop-up Attributes (Atributos), selecione o atributo a ser modificado. Desmarque a caixa de seleo Make Attribute Editable (Tornar editvel o atributo). Clique em OK. Atualize os documentos baseados no modelo.
2.
3. 4. 5. 6.
Tpicos relacionados Definir atributos de tag editveis em um modelo na pgina 356
Criar um modelo aninhado

Os modelos aninhados permitem criar variaes de um modelo bsico. Voc pode criar um modelo aninhado salvando um documento baseado em um modelo e, em seguida, salvando o documento como um novo modelo. possvel aninhar diversos modelos para definir layouts cada vez mais especficos. Para obter mais informaes, consulte Modelos aninhados na pgina 334. Por padro, todas as regies de modelo editveis do modelo bsico so repassadas do modelo aninhado para o documento baseado no modelo aninhado. Isto significa que, se voc criar uma regio editvel em um modelo de base e, em seguida, criar um modelo aninhado, a regio editvel aparecer nos documentos baseados no modelo aninhado (se nenhuma nova regio de modelo tiver sido inserida naquela regio no modelo aninhado).
Criar um modelo aninhado
357
Em modelos aninhados, as regies editveis repassadas possuem uma borda azul . Voc pode inserir um markup de modelo em uma regio editvel, de modo que ela no aparea como regio editvel em documentos baseados no modelo aninhado. Essas regies tm uma borda cor de laranja em vez de azul.
Para criar um modelo aninhado: 1.
Crie um documento a partir do modelo no qual pretende basear o modelo aninhado:
Na categoria Templates do painel Assets, clique com o boto direito (Windows) ou clique e mantenha pressionada a tecla Control (Macintosh) sobre o modelo a partir do qual deseja criar o documento e, em seguida, selecione New From Template (Novo a partir de modelo) no menu de contexto. Selecione File (Arquivo)> New (Novo). Na caixa de dilogo New Document (Novo documento), clique na guia Templates (Modelos) e selecione o site que contm o modelo desejado; na lista de documentos, clique duas vezes no modelo para criar um novo documento.
Um novo documento exibido na janela do documento.

2.
Siga um destes procedimentos para salvar o novo documento como um modelo aninhado:

Selecione File (Arquivo) > Save as Template (Salvar como modelo). Na categoria Common da barra Insert, clique na seta do boto Templates e selecione Make Nested Template (Criar modelo aninhado).
A caixa de dilogo Save as Template (Salvar como modelo) exibida.

3.
Insira um nome na caixa de texto Save As e, em seguida, clique em OK.
Em documentos baseados no modelo aninhado, possvel adicionar ou modificar contedo em regies editveis repassadas a partir do modelo bsico, bem como em regies editveis criadas no modelo novo.
Para impedir que uma regio editvel seja repassada a um modelo aninhado:
1.
Na visualizao de cdigo, localize a regio editvel que no quer que fique acessvel. As regies editveis so definidas por tags de comentrios de modelos. Delimite a regio editvel (incluindo as tags de comentrios) com os seguintes marcadores:
@@(" ")@@
2.
Para obter mais informaes, consulte TechNote 16416 no site da Macromedia na Web em www.macromedia.com/go/16416.
358
Editar e atualizar modelos

Quando voc altera e salva um modelo, o Dreamweaver atualiza automaticamente todos os documentos anexados ao modelo. Voc tambm pode atualizar manualmente documentos baseados em um modelo, se necessrio.
N OT A
Para editar um modelo para um site do Contribute, voc deve usar o Dreamweaver. No possvel editar modelos no Contribute.
O Dreamweaver verifica a sintaxe do modelo automaticamente ao salvar um modelo. Voc pode tambm verificar a sintaxe enquanto edita um modelo.
N OT A
Para obter informaes sobre como editar documentos baseados em modelos, consulte Editar contedo em um documento baseado em modelo na pgina 368.
Abrir um modelo para edio

Voc pode abrir um arquivo de modelo diretamente para edio ou ento, pode abrir um documento baseado no modelo e abrir o modelo anexado para edio. Quando uma alterao for feita em um modelo, o Dreamweaver solicitar a atualizao das pginas que o utilizarem.
NO T A
Se necessrio, voc tambm pode atualizar manualmente os documentos para refletir as alteraes no modelo (consulte Atualizar manualmente documentos baseados em modelo na pgina 361).
Para abrir e editar um arquivo de modelo:

1.
No painel Assets [Window > Assets], selecione a categoria Templates no lado esquerdo do painel. O painel Assets lista as propriedades de todos os modelos disponveis para seu site e exibe uma visualizao do modelo selecionado.
2.
Na lista de modelos disponveis, siga um destes procedimentos:

Clique duas vezes no nome do modelo que deseja editar. Selecione o modelo a ser editado e, em seguida, clique no boto Edit na parte inferior do painel Assets.
O modelo aberto na janela do documento.
359
3.
Modifique o contedo do modelo como desejar.

DICA
Para modificar as propriedades de pgina do modelo, selecione Modify (Modificar) > Page Properties (Propriedades da pgina) Os documentos baseados em um modelo herdam as propriedades de pgina do modelo.
4.
Salve o modelo. O Dreamweaver solicita que voc atualize as pginas baseadas no modelo. Clique em Update (Atualizar) para atualizar todos os documentos baseados no modelo modificado ou clique em Dont Update (No atualizar), se no quiser atualizar esses documentos. O Dreamweaver exibe um logotipo indicando os arquivos atualizados.
5.
Para abrir e modificar o modelo anexado ao documento atual:

1. 2.
Abra o documento baseado no modelo na janela do documento. Siga um dos procedimentos abaixo:
Selecione Modify (Modificar) > Templates (Modelos) > Open Attached Template (Abrir modelo anexado). Clique com o boto direito (Windows) ou mantendo pressionada a tecla Control (Macintosh) e, em seguida, selecione Templates >Open Attached Template.
3.
Modifique o contedo do modelo como desejar.

DICA
Para modificar as propriedades de pgina do modelo, selecione Modify (Modificar) > Page Properties (Propriedades da pgina) Os documentos baseados em um modelo herdam as propriedades de pgina do modelo.
4.
Salve o modelo. O Dreamweaver solicita que voc atualize as pginas baseadas no modelo. Clique em Update (Atualizar) para atualizar todos os documentos baseados no modelo modificado ou clique em Dont Update (No atualizar), se no quiser atualizar esses documentos. O Dreamweaver exibe um logotipo indicando os arquivos atualizados.
5.
Tpicos relacionados Atualizar modelos em um site do Contribute na pgina 361 Verificar a sintaxe de modelos na pgina 362
360
Atualizar manualmente documentos baseados em modelo

Quando voc altera um modelo, o Dreamweaver solicita que voc atualize os documentos baseados no modelo, mas voc pode atualizar o documento atual manualmente ou o site inteiro, se necessrio. A atualizao manual de documentos baseados em modelos como reaplicar um modelo.
Para aplicar as alteraes do modelo ao documento atual baseado no modelo:
1. 2.
Abra o documento na janela do documento. Selecione Modify (Modificar) > Templates (Modelos) > Update Current Page (Atualizar pgina atual).
O Dreamweaver atualiza o documento para refletir quaisquer alteraes no modelo.

Para atualizar o site inteiro ou todos os documentos baseados em um modelo especificado:
1.
Selecione Modify (Modificar) > Templates (Modelos) > Update Pages (Atualizar pginas). A caixa de dilogo Update Pages (Atualizar pginas) exibida. Preencha a caixa de dilogo e clique em Start (Iniciar). Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. O Dreamweaver atualiza os arquivos conforme indicado. Se a opo Show Log (Mostrar registro) for selecionada, o Dreamweaver fornecer informaes sobre os arquivos que tentar atualizar, incluindo informaes sobre o xito em sua atualizao.
2.
3.
Clique em Close para fechar a caixa de dilogo.
Tpicos relacionados Abrir um modelo para edio na pgina 359
Verificar a sintaxe de modelos na pgina 362
Atualizar modelos em um site do Contribute

Os usurios do Contribute no podem efetuar alteraes em um modelo do Dreamweaver. Entretanto, possvel utilizar o Dreamweaver para alterar um modelo para um site do Contribute.
361
Os fatores a seguir so importantes e devem ser levados em considerao ao atualizar modelos em um site do Contribute :
O Contribute recuperar modelos novos e modificados do site somente quando o Contribute for inicializado e quando o usurio do Contribute modificar suas informaes de conexo. Se forem feitas alteraes em um modelo enquanto um usurio do Contribute estiver editando um arquivo baseado nesse modelo, o usurio no ver as alteraes feitas no modelo at que o Contribute seja reinicializado. Se uma regio editvel for removida de um modelo, o usurio do Contribute que estiver editando uma pgina baseada nesse modelo poder ter dvidas sobre o que fazer com o contedo presente nessa regio editvel.
Para editar um modelo em um site do Contribute:

1.
Edite o modelo usando o Dreamweaver. Para obter mais informaes, consulte Abrir um modelo para edio na pgina 359. Informe a todos os usurios do Contribute que estejam trabalhando no site para sarem do Contribute e reinici-lo.
2.
Verificar a sintaxe de modelos

O Dreamweaver verifica automaticamente a sintaxe do modelo quando voc o salva, mas voc pode verific-la manualmente antes de salvar o modelo. Por exemplo, caso adicione um parmetro de modelo ou expresso na visualizao de cdigo, voc poder verificar se o cdigo obedece a sintaxe correta.
Para verificar a sintaxe de modelo vlida:
1. 2.
Abra o documento que deseja verificar na janela do documento. Selecione Modify (Modificar) > Templates (Modelos) > Check Template Syntax (Verificar sintaxe do modelo).
Uma mensagem de erro ser exibida se a sintaxe for digitada incorretamente. A mensagem de erro descreve o erro e indica a linha especfica no cdigo onde o erro ocorreu. Tpicos relacionados Sintaxe de tags de modelo na pgina 331
Expresses de modelo na pgina 337
362
Gerenciar modelos
Use a categoria Templates do painel Assets para gerenciar modelos existentes, como para renomear e excluir arquivos de modelo.
NO TA
Voc tambm pode usar o painel Assets para aplicar um modelo a um documento (consulteEditar e atualizar modelos na pgina 359) ou editar um modelo (consulte Abrir um modelo para edio na pgina 359).
Para renomear um modelo no painel Assets (Propriedades):

1.
No painel Assets [Window > Assets], selecione a categoria Templates no lado esquerdo do painel. Clique no nome do modelo para selecion-lo. Clique no nome novamente para tornar o texto selecionvel e digite um novo nome. Este mtodo funciona da mesma forma que o usado para renomear um arquivo no Windows Explorer (no Windows) ou Finder (no Macintosh). Do mesmo modo que no Windows Explorer, faa uma pequena pausa entre os cliques. No clique duas vezes no nome, pois essa ao abre o modelo para edio.
2. 3.
4.
Clique em outra rea do painel Assets ou pressione a tecla Enter (no Windows) ou Return (no Macintosh) para que a alterao tenha efeito. O Dreamweaver perguntar se voc deseja atualizar os documentos basedos neste modelo. Para atualizar todos os documentos no site baseados neste modelo, clique em Update. Para evitar a atualizao de todos os documentos baseados nesse modelo, clique em Dont Update (No atualizar).
5.
Para excluir um arquivo de modelo:

1.
No painel Assets [Window > Assets], selecione a categoria Templates no lado esquerdo do painel. Clique no nome do modelo para selecion-lo. Clique no boto Delete (Excluir) na parte inferior do painel e confirme que deseja excluir o modelo.
C U ID A D O
2. 3.
Aps excluir um arquivo de modelo, no ser possvel recuper-lo. O arquivo de modelo ser excludo do site.
Gerenciar modelos
363
Os documentos baseados no modelo excludo no so desanexados do modelo; eles preservam a estrutura e as regies editveis que o arquivo de modelo possua antes de ser excludo. Para converter esse documento em um arquivo HTML normal sem regies editveis ou bloqueadas, consulte Desanexar um documento de um modelo na pgina 367. Tpicos relacionados Criar um modelo no Dreamweaver na pgina 340

Aplicar ou remover um modelo de um documento existente na pgina 366 Editar e atualizar modelos na pgina 359
Exportar e importar o contedo XML de um modelo

Um documento baseado em um modelo contm dados representados por pares nome/valor. Cada par consiste em um nome de regio editvel e no respectivo contedo da regio. O Dreamweaver permite exportar os pares nome/valor para um arquivo XML, de modo que seja possvel 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, possvel importar os dados de um documento XML que esteja estruturado adequadamente para um documento baseado em um modelo do Dreamweaver.
Para exportar as regies editveis do documento como XML:
1. 2.
Abra um documento baseado em modelo que contenha regies editveis. Selecione File (Arquivo) > Export (Exportar) > Template Data as XML (Dados do modelo como XML). A caixa de dilogo Export Template Data as XML (Exportar dados do modelo como XML) exibida.
3.
Selecione uma das opes de Notation (Notao):
Se o modelo contiver regies repetitivas ou parmetros de modelo, selecione Use Standard Dreamweaver XML Tag (Utilizar tag XML padro do Dreamweaver). Se o modelo no contiver regies repetitivas ou parmetros de modelo, selecione Use Editable Region Names as XML Tags (Utilizar nomes de regies editveis como tags XML).
4.
Clique em OK. Uma caixa de dilogo exibida, onde voc pode salvar o arquivo XML.
364
5.
Selecione uma pasta, insira um nome para o arquivo XML e clique em Save (Salvar). O Dreamweaver ir gerar um arquivo XML contendo o material dos parmetros e regies editveis do documento, incluindo regies editveis dentro das regies repetitivas ou regies opcionais. O arquivo XML inclui o nome do modelo original, bem como o nome e o contedo de cada regio do modelo.
N OT A
O contedo nas regies bloqueadas no ser exportado para o arquivo XML.
Para importar um contedo XML:

1.
Selecione File (Arquivo) > Import (Importar) > Import XML into Template (Importar XML para o modelo). A caixa de dilogo Import XML (Importar XML) exibida. Selecione o arquivo XML e, em seguida, clique em Open (Abrir).
2.
O Dreamweaver criar um novo documento baseado no modelo especificado no arquivo XML. O programa preencher o contedo de cada regio editvel do documento utilizando os dados do arquivo XML. O documento resultante ser aberto na janela do documento.
DICA
Se o arquivo XML no estiver definido exatamente como o Dreamweaver espera, talvez no seja possvel importar os dados. Uma soluo para este problema exportar um arquivo XML fictcio 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 contm os dados apropriados, todos prontos para serem importados.
Exportar um site sem markup de modelo

Se voc no desejar incluir markup de modelo nos documentos baseados em modelo e que so exportados para outro site, utilize o comando Export Site Without Template Markup (Exportar site sem markup de modelo).
Para exportar um site sem markup de modelo:
1.
Selecione Modify (Modificar) > Templates (Modelos) > Export Without Markup (Exportar sem markup). A caixa de dilogo Export Site Without Template Markup (Exportar site sem markup de modelo) exibida.
Exportar um site sem markup de modelo
365
2.
Selecione uma pasta para a qual exportar o site e, em seguida, selecione opes de exportao adicionais conforme desejar.
NO T A
necessrio selecionar uma pasta fora do site atual.
Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
3.
Clique em OK.
Aplicar ou remover um modelo de um documento existente

Quando voc aplica um modelo a um documento existente, o Dreamweaver faz a correspondncia entre o contedo e as regies do modelo ou pergunta como deve resolver os erros de correspondncia. possvel remove o modelo posteriormente, se for necessrio fazer alteraes em regies bloqueadas.
Aplicar um modelo a um documento existente

Ao aplicar um modelo a um documento com contedo existente, o Dreamweaver tentar corresponder o contedo existente com uma regio do modelo. Se voc estiver aplicando uma verso revisada de um dos seus modelos existentes, provvel que os nomes sejam correspondentes. Se voc aplica um modelo a um documento que no possui um modelo aplicado, no existem regies editveis para comparar e ocorre um erro de correspondncia. O Dreamweaver controla esses erros de forma que voc possa selecionar a regio ou regies para onde o contedo da pgina atual deve ser movido, ou excluir o contedo com erro de correspondncia. Para aplicar um modelo a um documento existente, utilize o painel Assets ou a janela do documento. Voc pode cancelar a aplicao de um modelo, caso necessrio.
Para aplicar um modelo a um documento usando o painel Assets:
1. 2.
Abra o documento ao qual deseja aplicar o modelo. No painel Assets [Window > Assets], selecione a categoria Templates no lado esquerdo do painel.
366
3.

Arraste o modelo a ser aplicado do painel Assets para a janela do documento. Selecione o modelo que deseja aplicar e, em seguida, clique no boto Apply (Aplicar) na parte inferior do painel Assets.
Se houver contedo no documento que no pode ser atribudo automaticamente a uma regio de modelo, a caixa de dilogo Inconsistent Region Names ser exibida.
4.
Se houver contedo em aberto, selecione um destino para o contedo e, em seguida, clique em OK. Para obter informaes sobre como mover o contedo existente para regies editveis do documento, consulte Corrigir nomes de regio inconsistentes em Using Dreamweaver.
Para aplicar um modelo a um documento existente na janela do documento:

1. 2.
Abra o documento ao qual deseja aplicar o modelo. Selecione Modify (Modificar) > Templates (Modelos) > Apply Template to Page (Aplicar modelo pgina). A caixa de dilogo Select Template (Selecionar modelo) exibida. Escolha um modelo na lista e clique em Select. Se houver contedo no documento que no pode ser atribudo automaticamente a uma regio de modelo, a caixa de dilogo Inconsistent Region Names ser exibida.
3.
4.
Se houver contedo em aberto, selecione um destino para o contedo e, em seguida, clique em OK. Para obter informaes sobre como mover o contedo existente para regies editveis do documento, consulte Corrigir nomes de regio inconsistentes em Using Dreamweaver.
Para desfazer as alteraes feitas no modelo:
Selecione Edit (Editar) > Undo Apply Template (Desfazer Aplicar modelo).
O documento volta para o estado anterior aplicao do modelo.
Desanexar um documento de um modelo

Para fazer alteraes nas regies bloqueadas de um documento baseado em um modelo, voc deve desanexar o documento do modelo. Quando o documento desanexado, o documento inteiro passa a ser editvel.
Aplicar ou remover um modelo de um documento existente
367
Para desanexar um documento de um modelo:

1. 2.
Abra o documento baseado em modelo a ser desanexado. Selecione Modify (Modificar) > Templates (Modelos) > Detach from Template (Desanexar do modelo). O documento desanexado do modelo e todos os cdigos do modelo so removidos.
Tpicos relacionados Aplicar um modelo a um documento existente na pgina 366
Editar contedo em um documento baseado em modelo

Os modelos do Dreamweaver especificam as regies bloqueadas (no editveis) e as regies editveis para documentos baseados em modelo (consulte Sobre modelos do Dreamweaver na pgina 326). Em pginas baseadas em modelos (consulte Criar um documento a partir de um modelo existente na pgina 104), os usurios do modelo podem editar somente o contedo de regies editveis. fcil identificar e selecionar regies editveis para editar contedo (consulte Selecionar regies editveis na pgina 348). Os usurios do modelo no podem editar contedo em regies bloqueadas.
N OT A 368
Se voc tentar editar uma regio bloqueada em um documento baseado em modelo quando o realce estiver desativado, o ponteiro do mouse ser alterado para indicar que no possvel clicar na regio bloqueada.
Os usurios do modelo podem tambm modificar propriedades e editar entradas para uma regio repetitiva em documentos baseados em modelos.
Modificar propriedades de modelos

Quando os autores de um modelo criam parmetros em um modelo (consulte Parmetros de modelo na pgina 336), os documentos baseados no modelo automaticamente herdam os parmetros e as definies iniciais dos valores. O usurio de um modelo pode atualizar atributos de tags editveis e outros parmetros do modelo (como definies de regio opcionais).
Para modificar um atributo de tag editvel:

1. 2.
Abra o documento baseado em modelos. Selecione Modify (Modificar) > Template Properties (Propriedades do modelo). A caixa de dilogo Template Properties aberta, exibindo uma lista de propriedades disponveis. A caixa de dilogo exibe regies opcionais e atributos de tags editveis.
3.
Na lista Name, selecione a propriedade. A rea de fundo da caixa de dilogo atualizada para exibir o identificador da propriedade selecionada e seu valor atribudo.
4.
No campo direita do identificador da propriedade, edite o valor para modificar a propriedade no documento.
NO T A
O nome do campo e os valores atualizveis so definidos no modelo. Os atributos que no aparecem na lista Name no podem ser atualizados no documento baseado em modelo.
5.
Marque a caixa de seleo Allow Nested Templates to Control This (Permitir que modelos aninhados controlem isso), se quiser repassar a propriedade editvel aos documentos baseados no modelo aninhado.
Para modificar parmetros de modelo de regies opcionais:

1. 2.
Abra o documento baseado em modelos. Selecione Modify (Modificar) > Template Properties (Propriedades do modelo). A caixa de dilogo Template Properties aberta, exibindo uma lista de propriedades disponveis. A caixa de dilogo exibe regies opcionais e atributos de tags editveis.
3.
Na lista Name (Nome), selecione uma propriedade. A caixa de dilogo atualizada para exibir o identificador da propriedade selecionada e seu valor atribudo.
4.
Marque a caixa de seleo Show (Mostrar) para exibir a regio opcional no documento ou desmarque a caixa de seleo para ocult-la.
NO T A
O nome do campo e os valores padro so definidos no modelo.
5.
Marque a caixa de seleo Allow Nested Templates to Control This (Permitir que modelos aninhados controlem isso), se quiser repassar a propriedade editvel aos documentos baseados no modelo aninhado.
369
Tpicos relacionados Definir atributos de tag editveis na pgina 356
Usar regies opcionais na pgina 353
Adicionar, excluir e modificar a ordem de uma entrada de regio repetitiva

Use a regio repetitiva para controlar, excluir ou modificar a ordem das entradas em documentos baseados em modelos. Quando uma entrada de regio repetitiva adicionada, uma cpia de toda a regio repetitiva adicionada. Para atualizar o contedo das regies repetitivas, o modelo original deve incluir uma regio editvel na regio repetitiva.
Para adicionar, excluir ou modificar a ordem de uma regio repetitiva:

1. 2.
Posicione o ponto de insero na regio repetitiva para selecion-la. Siga um dos procedimentos abaixo:
Clique no boto de adio (+) para adicionar uma entrada de regio repetitiva abaixo da entrada selecionada no momento. Clique no boto de subtrao () para excluir a entrada de regio repetitiva selecionada. Clique no boto de seta para abaixo para mover a entrada selecionada uma posio para baixo. Clique no boto de seta para cima para mover a entrada selecionada uma posio acima.
N OT A
Voc pode tambm selecionar Modify > Template e, em seguida, selecionar uma das opes de entradas repetitivas prximas parte inferior do menu de contexto. Use este menu para inserir uma nova entrada repetitiva ou mover a posio da entrada selecionada.
370
Para recortar, copiar e excluir entradas:

1. 2.
Posicione o ponto de insero na regio repetitiva para selecion-la. Siga um dos procedimentos abaixo:
Para recortar uma entrada repetitiva, selecione Edit (Editar) > Repeating Entries (Entradas repetitivas) > Cut Repeating Entries (Recortar entradas repetitivas). Para copiar uma entrada repetitiva, selecione Edit > Repeating Entries > Copy Repeating Entries. Para remover uma entrada repetitiva, selecione Edit > Repeating Entries > Delete Repeating Entries. Para colar uma entrada repetitiva, selecione Edit > Paste.
NO TA
A opo colar insere uma nova entrada, mas no substitui uma entrada existente.
Tpicos relacionados Criar regies repetitivas na pgina 350

  <p><img src="/images/airfare_on.gif" width="85" height="22"> </p> 
371
372
PARTE 4
Adicionar contedo s pginas

Use as ferramentas visuais do Macromedia Dreamweaver 8 para adicionar uma variedade de contedo s pginas da Web. Com elas voc pode adicionar e formatar elementos como texto, imagens, cores, filmes, som e outras formas de mdia. Voc pode tornar o contedo de suas pginas acessvel a visitantes com deficincia fsica. Esta seo contm os seguintes captulos:
Captulo 12: Trabalhar com pginas . . . . . . . . . . . . . . . . . . . . . . . . 375 Captulo 13: Inserir e formatar texto . . . . . . . . . . . . . . . . . . . . . . . . 405 Captulo 14: Inserir imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445 Captulo 15: Links e navegao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461 Captulo 16: Trabalhar com outros aplicativos . . . . . . . . . . . . . . . 497 Captulo 17: Adicionar udio, vdeo e elementos interativos . . . . 515 Captulo 18: Utilizar comportamentos JavaScript . . . . . . . . . . . . . 541
373
CAPTULO 12
Trabalhar com pginas

O Macromedia Dreamweaver 8 fornece muitos recursos para ajud-lo a criar novas pginas da Web. Esses recursos para a criao de pginas ajudam a facilitar a especificao das propriedades das pginas, como ttulos, imagens e cores de fundo e cores do texto e de links. Alm disso, o Dreamweaver fornece ferramentas para ajudar a maximizar o desempenho do site da Web e para criar e testar as pginas para garantir a compatibilidade com diversos navegadores da Web. Este captulo contm as seguintes sees:
Sobre o trabalho com pginas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375 Salvar pginas da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380 Especificar HTML em vez de CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381 Definir propriedades de pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381 Trabalhar com cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .384 Selecionar elementos na janela do documento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .386 Aplicar zoom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .389 Utilizar o painel History (Histrico) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 Automatizar tarefas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391 Utilizar comportamentos JavaScript para detectar navegadores e plug-ins . . . .398 Visualizar e testar pginas em navegadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 Definir preferncias de tamanho e tempo de download . . . . . . . . . . . . . . . . . . . . . 402
12
Sobre o trabalho com pginas

Ao criar uma pgina da Web, leve em considerao os navegadores e sistemas operacionais que os usurios usaro para exibir suas pginas da Web e os conjuntos de idioma que planeja suportar. As prximas sees iro ajud-lo a entender como selecionar cores para exibio correta em diferentes navegadores da Web, como codificar caracteres (formatos de letra) para os diferentes idiomas e como verificar se um navegador da Web compatvel com seu site.
375
Sobre a configurao de propriedades de pgina

Para cada pgina criada no Dreamweaver, voc pode especificar propriedades de layout e formatao na caixa de dilogo Page Properties (Propriedades de pgina) aberta a partir de Modify > Page Properties. Essa caixa de dilogo permite especificar a famlia e o tamanho da fonte padro, a cor de fundo, margens, estilos de links e muitos outros aspectos do design de uma pgina. Voc pode atribuir novas propriedades de pgina para cada nova pgina criada e modificar aquelas de pginas existentes. Por padro, o Dreamweaver formata o texto usando folhas de estilo CSS (Cascading Style Sheet, Folha de estilo em cascata). Para alterar as preferncias de formatao de pgina para HTML, use a caixa de dilogo Preferences (Preferncias), acessada a partir de Edit > Preferences. Ao usar propriedades de pgina CSS, o Dreamweaver utiliza tags CSS para todas as propriedades definidas nas categorias Appearance (Aparncia), Links e Headings (Cabealhos) da caixa de dilogo Page Properties (Propriedades da pgina). As tags de CSS que definem esses atributos so incorporadas na seo de cabealho da pgina.
N OT A 376
As propriedades de pgina definidas por voc so aplicadas somente ao documento ativo. Se uma pgina utilizar uma folha de estilo CSS externa, o Dreamweaver no substituir o conjunto de tags definidas na folha de estilo, pois isso afetar todas as outras pginas que utilizarem essa folha de estilo.
Propriedades de pgina CSS versus HTML

Por padro, o Dreamweaver utiliza CSS para atribuir propriedades de pgina. Se ao invs disso, quiser usar tags HTML, voc deve especificar na caixa de dilogo Preferences (consulte Especificar HTML em vez de CSS na pgina 381 para mais informaes).
Captulo 12: Trabalhar com pginas
Mesmo que decida usar HTML em vez de CSS, o Inspetor de propriedades ainda exibir o menu pop-up Style (Estilo). Entretanto, os controles de fonte, tamanho, cor e alinhamento mostraro apenas as propriedades definidas usando tags HTML. Os valores de propriedades de CSS aplicados seleo atual no sero mais visveis e o menu pop-up Size (Tamanho) ser desativado. Tpicos relacionados Especificar HTML em vez de CSS na pgina 381
Definir propriedades de pgina na pgina 381
Sobre o painel History (Histrico)

O painel History (Histrico) exibe uma lista das etapas realizadas no documento ativo desde que voc o criou ou o abriu, at um nmero especificado de etapas. Esse painel no mostra as etapas realizadas em outros quadros, janelas do 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
Replay
Boto Save As Command Boto Copy Steps
O boto deslizante (polegar) do painel History (Histrico) indica inicialmente a ltima etapa efetuada. Tpicos relacionados Utilizar o painel History (Histrico) na pgina 390
377
Sobre as cores aceitas pela Web

Em HTML, as cores so expressas como valores hexadecimais (por exemplo, #FF0000) ou como nomes de cores (vermelho). Uma cor aceita pela Web aquela que tem a mesma aparncia no Netscape Navigator e no Microsoft Internet Explorer, tanto nos sietemas Windows e Macintosh, quando esto em execuo no modo de 256 cores. Na prtica, 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, no interpreta corretamente as cores #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) e #33FF00 (51,255,0). Quando os navegadores da Web surgiram, a maioria dos computadores exibia apenas 256 cores (8 bits). Como a maioria dos computadores atuais exibe milhares ou milhes de cores (16 e 32 bits), h pouca justificativa para usar a paleta de cores seguras para a Web ao desenvolver seu site para usurios com sistemas de computador atuais. Uma razo para utilizar a paleta de cores segura para a Web se planeja desenvolver para dispositivos de Web alternativos, como telas de PDAs e de telefones celulares. Muitos desses dispositivos oferecem apenas telas em preto e branco (1 bit) ou 256 cores (8 bits). No Dreamweaver, as paletas Color Cubes (Cubos de cor) (padro) e Continuous Tone (Tom contnuo) utilizam a paleta de 216 cores aceita pela Web; a seleo de uma cor em uma dessas paletas exibir o valor hexadecimal da cor. Para escolher uma cor fora da faixa de cores aceitas pela Web, abra o seletor de cores do sistema, clicando no boto Color Wheel (Crculo de cores) localizado no canto superior direito do seletor de cores do Dreamweaver. O seletor de cores do sistema no se limita s cores aceitas pela Web. As verses para UNIX do Netscape Navigator utilizam uma paleta de cores diferente daquela usada nas verses para Windows e Macintosh. Se a programao for exclusiva para navegadores UNIX (ou se o pblico-alvo for composto por usurios do Windows ou Macintosh com monitores de 24 bits e por usurios do UNIX com monitores de 8 bits), devese 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. Tpicos relacionados Trabalhar com cores na pgina 384
378
Codificao de documentos
A opo Document encoding (Codificao do documento) especifica a codificao de caracteres utilizada no documento. A codificao do documento especificada em uma tag meta no cabealho do documento; ela informa ao navegador e ao Dreamweaver como o documento dever ser decodificado e quais fontes devero ser usadas para exibir o texto decodificado. Por exemplo, se for especificado Western (Latin1) (Ocidental [Latin1]), a seguinte tag meta ser inserida: <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1">. O Dreamweaver exibir o documento com as fontes especificadas em Fonts Preferences para a codificao Western (Latin1); um navegador exibir o documento com as fontes especificadas pelo usurio do navegador para a codificao Western (Latin1). Se for especificado japons (Shift JIS), a seguinte tag meta ser inserida: <meta httpequiv="Content-Type" content="text/html; charset=Shift_JIS">. O Dreamweaver exibir o documento utilizando as fontes especificadas para as codificaes do idioma japons. O navegador exibir o documento utilizando as fontes especificadas pelo usurio do navegador para a codificao do idioma japons. Para alterar a codificao do documento para uma pgina, consulte Definir propriedades de pgina na pgina 381. Para alterar a codificao padro que o Dreamweaver utiliza para criar novos documentos, consulte Definir um novo tipo de documento padro na pgina 106. Para alterar as fontes que o Dreamweaver utiliza para exibir cada codificao, consulte Definir as preferncias de fontes para a exibio do Dreamweaver na pgina 82.
Utilizar comandos salvos versus repetir etapas

O Dreamweaver permite gravar um comando temporrio para uso por um perodo curto ou executar etapas anteriores a partir do painel History. Quando voc grava um comando temporrio:
As etapas so gravadas medida que so executadas, dispensando a necessidade de selecion-las no painel History (Histrico) antes de execut-las novamente. Durante a gravao, o Dreamweaver impede que sejam efetuados movimentos do mouse que no possam ser gravados (como clicar para selecionar um elemento de uma janela ou arrastar um elemento da pgina para um novo local). Se voc alternar para um outro documento durante a gravao, o Dreamweaver no gravar as alteraes feitas no outro documento. Para determinar se a gravao est sendo processada ou no, observe o ponteiro do mouse.
379
Tpicos relacionados Automatizar tarefas na pgina 391

Repetir etapas na pgina 392 Gravar comandos na pgina 397
Salvar pginas da Web

possvel salvar um documento usando seu nome e local atual ou salvar uma cpia de um documento usando um nome e local diferentes. Ao atribuir nomes a arquivos, evite usar espaos e caracteres especiais em nomes de arquivo e de pasta. Particularmente, no utilize caracteres especiais (como , ou ) ou pontuao (como dois pontos, barras inclinadas ou pontos) nos nomes dos arquivos que sero colocados em um servidor remoto. Muitos servidores alteram esses caracteres durante o upload, o que causa o rompimento dos links para os arquivos. Alm disso, no coloque um nmero no incio de um nome de arquivo.
Para salvar um documento:
1.
Para substituir a verso atual no disco e salvar quaisquer alteraes feitas, selecione File (Arquivo) > Save (Salvar). Para salvar o arquivo em uma pasta diferente ou usando um nome diferente, selecione File (Arquivo) > Save As (Salvar como).
2. 3. 4.
Na caixa de dilogo Save As (Salvar como), navegue at a pasta onde deseja salvar o arquivo. Na caixa de texto File Name (Nome do arquivo), digite um nome para o arquivo. Clique em Save (Salvar) para salvar o arquivo.
Para salvar todos os documentos abertos:

1. 2.
Selecione File (Arquivo) > Save All (Salvar tudo). Se existirem documentos no salvos abertos, a caixa de dilogo Save As (Salvar como) ser exibida para cada um desses documentos. Na caixa de dilogo exibida, navegue at a pasta onde deseja salvar o arquivo. Na caixa de texto File Name (Nome do arquivo), digite um nome para o arquivo. Clique em Save (Salvar) para salvar o arquivo.
3. 4.
380
Para reverter para a ltima verso salva do documento:

1.
Selecione File (Arquivo) > Revert (Reverter). Ser exibida uma caixa de dilogo perguntando se voc deseja descartar as alteraes e reverter para a verso salva anteriormente.
2.
Clique em Yes (Sim) para reverter para a verso anterior; clique em No (No) para manter as suas alteraes.
NO T A
Se voc salvar um documento e, em seguida, sair do Dreamweaver, no poder reverter para a verso anterior do documento ao reiniciar o Dreamweaver.
Tpicos relacionados Criar novos documentos na pgina 102
Salvar um novo documento na pgina 105
Especificar HTML em vez de CSS

Por padro, o Dreamweaver utiliza tags CSS para atribuir propriedades de pgina. Se preferir usar tags HTML, voc dever desmarcar a opo Use CSS Instead of HTML Tags (Usar tags CSS em vez de tags HTML) na categoria General da caixa de dilogo Preferences.
Para especificar tags HTML em vez de tags CSS para as propriedades de pgina:
1.
Selecione Edit (Editar) > Preferences (Preferncias). A caixa de dilogo Preferences exibida. Na categoria General da caixa de dilogo Page Properties, desmarque a caixa de seleo Use CSS Instead of HTML Tags (Utilizar tags CSS em vez de HMTL). Essa caixa de seleo est localizada na seo Editing Options (Opes de edio) do painel General Preferences (Preferncias gerais).
2.
3.
Clique em OK.
Tpicos relacionados Sobre a configurao de propriedades de pgina na pgina 376
Definir propriedades de pgina

Os ttulos, as cores e imagens de fundo, as cores do texto e dos links e as margens da pgina so propriedades bsicas de todo documento da Web. possvel definir ou alterar propriedades de pgina utilizando a caixa de dilogo Page Properties (Propriedades da pgina).
381
Para definir propriedades do documento:

1.
Selecione Modify (Modificar) > Page Properties (Propriedades da pgina), ou clique no boto Page Properties no Inspetor de propriedades do texto. A caixa de dilogo Page Properties (Propriedades da pgina) exibida. Faa as alteraes das propriedades, conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
2.
3.

Definir estilos de sublinhado para links CSS na pgina 383 Definir uma imagem de fundo ou uma cor de fundo para a pgina na pgina 383
Alterar o ttulo do documento

O ttulo de uma pgina HTML ajuda os visitantes do site a controlar o que esto exibindo enquanto navegam e tambm identifica a pgina nas listas de histrico e marcadores do visitante. Se uma pgina no tiver um ttulo, ela ser exibida na janela do navegador e nessas listas como um Untitled Document (Documento sem ttulo).
N OT A
Observe que atribuir um nome de arquivo a um documento (salvando-o) no o mesmo que atribuir um ttulo a uma pgina.
Para localizar todos os documentos sem ttulo existentes no seu site, utilize o comando Site > Reports (Relatrios do site). Consulte Testar o site na pgina 171.
Para alterar o ttulo de uma pgina:
1.
Com o documento aberto, siga um dos procedimentos abaixo:

Selecione Modify (Modificar) > Page Properties (Propriedades da pgina). Selecione View (Exibir) > Toolbar (Barra de ferramentas) >Document (Documento) (se ainda no estiver selecionado). Clique com o boto direito do mouse (no Windows), ou mantenha a tecla Control pressionada e clique (no Macintosh), em uma rea vazia do documento e, em seguida, selecione Page Properties (Propriedades da pgina).
2.
Na caixa de texto Title (Ttulo), digite o ttulo da pgina e pressione Enter (Windows) ou Return (Macintosh).
382
3.
Se estiver editando o ttulo na caixa de dilogo Page Properties (Propriedades da pgina), clique em OK. O ttulo exibido na barra de ttulo da janela do documento (e na barra de ferramentas do documento, se ela for exibida). O nome de arquivo da pgina e a pasta na qual o arquivo foi salvo so exibidos entre parnteses ao lado do ttulo na barra de ttulo. Um asterisco indica que o documento contm alteraes que ainda no foram salvas.
Definir estilos de sublinhado para links CSS

Se voc estiver usando a caixa de dilogo CSS Page Properties (Propriedades de pginas CSS) padro, o Dreamweaver facilitar a tarefa de especificar estilos especiais para links CSS. Ao usar as opes para links CSS, possvel escolher entre nunca sublinhar links, sublinhar links somente quando o mouse passar sobre eles ou desativar links quando o mouse passar sobre eles.
Para selecionar um estilo para um link CSS:
1.
Selecione Modify (Modificar) > Page Properties (Propriedades da pgina), ou selecione Page Properties (Propriedades da pgina) no menu contextual, na visualizao do projeto na janela do documento. Selecione a categoria Links na caixa de dilogo CSS Page Properties (Propriedades de pginas CSS). No menu pop-up Underline Style (Estilo de sublinhado), selecione o estilo de sublinhado que deseja usar como padro para a sua pgina. Clique em OK.
2.
3.
4.
Captulo 15, Links e navegao, na pgina 461
Definir uma imagem de fundo ou uma cor de fundo para a pgina

Para definir uma imagem ou cor de fundo da pgina, utilize a caixa de dilogo Page Properties (Propriedades da pgina).
383
Se utilizar tanto uma imagem de fundo quanto uma cor de fundo, a cor aparecer durante o download da imagem, que por sua vez cobrir a cor. Se a imagem de fundo contiver algum pixel transparente, a cor de fundo ficar visvel.
Para definir uma imagem ou cor de fundo:
1.
Selecione Modify (Modificar) > Page Properties (Propriedades da pgina), ou selecione Page Properties (Propriedades da pgina) no menu contextual, na visualizao do projeto na janela do documento. Selecione a categoria Appearance (Aparncia) na caixa de dilogo Page Properties (Propriedades da pgina). Para definir uma imagem de fundo, clique no boto Browse (Procurar) e, em seguida, procure a imagem para selecion-la. Uma alternativa digitar o caminho da imagem de fundo na caixa Background Image (Imagem de fundo). O Dreamweaver ir dispor lado a lado (repetir) a imagem de fundo se esta no preencher toda a janela, exatamente como fazem os navegadores. Para no dispor a imagem de fundo lado a lado, use a opo Cascading Style Sheets (Folhas de estilo em cascata) para desativar a repetio de imagens. Consulte Definir propriedades de fundo do estilo CSS em Usando o Dreamweaver.)
2.
3.
4.
Para definir uma cor de fundo, clique na caixa Background Color (Cor de fundo) e selecione uma cor no seletor de cores.
Tpicos relacionados: Sobre a configurao de propriedades de pgina na pgina 376
Trabalhar com cores

No Dreamweaver, muitas das caixas de dilogo, assim como o Inspetor de propriedades para muitos dos elementos da pgina, contm uma caixa de cores que abre um seletor de cores. Utilize o seletor de cores para selecionar uma cor para um elemento da pgina.
Para selecionar uma cor no Dreamweaver:
1.
Clique em uma caixa de cores de qualquer caixa de dilogo ou do Inspetor de propriedades.
384
O seletor de cores exibido.
2.
Utilize o conta-gotas para selecionar uma amostra de cor na paleta. Todas as cores exibidas nas paletas Color Cubes (Cubos de cor), o padro, e Continuous Tone (Tom contnuo) so aceitas pela Web, mas as cores de outras paletas no. Para obter mais informaes, consulte Sobre as cores aceitas pela Web na pgina 378. Utilize o conta-gotas para selecionar uma cor de qualquer lugar da tela, inclusive fora das janelas do Dreamweaver. Para escolher uma cor da rea de trabalho ou de outro aplicativo, mantenha pressionado o boto do mouse para manter o foco do contagotas e selecione uma cor fora do Dreamweaver. Caso clique na rea de trabalho ou em outro aplicativo, o Dreamweaver obter a cor de onde voc clicou. Entretanto, se alternar para outro aplicativo, talvez voc precise clicar em uma janela do Dreamweaver para continuar trabalhando no Dreamweaver. Para aumentar a seleo de cores, utilize o menu pop-up localizado no canto superior direito do seletor de cores. possvel selecionar Color Cubes (Cubos de cor), Continuous Tone (Tom contnuo), Windows OS (Windows), Mac OS (Mac), Grayscale (Escala de cinza) e Snap to Web Safe (Ajustar cor aceita pela Web).
N O TA
As paletas Color Cubes (Cubos de cor) e Continuous Tone (Tom contnuo) so seguras para a Web, mas as paletas Windows OS, Mac OS e Grayscale (Escala de cinza) no so. Se voc estiver utilizando uma paleta que aceita pela Web e, em seguida, selecionar Snap to Web Safe (Ajustar cor aceita pela Web), o Dreamweaver substituir a cor selecionada pela cor mais prxima aceita pela Web. Em outras palavras, possvel que a cor no corresponda quela que for visualizada.
Para limpar a cor atual sem precisar escolher outra cor, clique no boto Default Color. Para abrir o seletor de cores do sistema, clique no boto Color Wheel (Crculo de cores). Para obter mais informaes, consulte Sobre as cores aceitas pela Web na pgina 378.
Trabalhar com cores
385
Definir cores padro para o texto

Defina cores padro para texto comum, links, links visitados e links ativos na caixa de dilogo Page Properties (Propriedades da pgina), ou escolha um esquema de cores predefinido para definir as cores do texto e do fundo da pgina. Consulte Trabalhar com cores na pgina 384.
NO TA

A cor dos links ativos a cor assumida por um link quando se clica nele. Alguns navegadores da Web podem no utilizar a cor que voc especificar.
Para definir as cores padro do texto, siga um dos procedimentos abaixo:
Selecione Modify (Modificar) > Page Properties (Propriedades da pgina) e, em seguida, selecione as cores para as opes Text Color (Cor do texto), Link Color (Cor do link), Visited Links (Links visitados) e Active Links (Links ativos). Selecione Commands (Comandos) > Set Color Scheme (Definir esquema de cores) e, em seguida, selecione uma cor de fundo e um conjunto de cores para o texto e os links. A caixa de exemplo exibe a aparncia do esquema de cores no navegador.
NO TA
Caso defina essas configuraes na caixa de dilogo Page Properties (Propriedades da pgina) usando as tags CSS padro, o comando Color Scheme (Cor do esquema) no afetar a aparncia da sua pgina. Isso ocorre porque as tags CSS tm precedncia sobre as tags HTML.
Selecionar elementos na janela do documento

Para selecionar um elemento na visualizao do projeto da janela do documento, clique no elemento. Se um elemento estiver invisvel, voc dever torn-lo visvel para que possa selecion-lo. Para obter mais informaes sobre elementos invisveis, consulte Mostrar e ocultar elementos invisveis na pgina 388.
Para selecionar elementos, utilize as seguintes tcnicas:
Para selecionar um elemento visvel na janela do documento, clique nele ou arraste o mouse sobre o elemento. Para escolher um elemento invisvel, selecione View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis), se esse item de menu j no estiver selecionado. Em seguida, clique no marcador do elemento na janela do documento.
386
Alguns objetos so exibidos na pgina em um lugar diferente de onde foi inserido o cdigo correspondente. Por exemplo, uma camada pode estar em qualquer posio na pgina, mas o cdigo que a define estar em uma posio fixa. Quando elementos invisveis so exibidos, o Dreamweaver mostra marcadores na janela do documento para indicar a localizao do cdigo para tais elementos. A seleo de um marcador seleciona o elemento inteiro. Por exemplo, a seleo do marcador de uma camada seleciona toda a camada. Consulte Mostrar e ocultar elementos invisveis na pgina 388.
Para selecionar uma tag completa (inclusive o seu contedo, 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 visualizao do projeto como na visualizao do cdigo). O seletor sempre mostra as tags que contm a seleo atual ou o ponto de insero. A tag mais esquerda a tag mais externa que contm a seleo atual ou o ponto de insero. A tag seguinte est contida na tag mais externa e assim por diante. A tag mais direita a tag mais interna, que contm a seleo atual ou o ponto de insero. No exemplo a seguir, o ponto de insero est em uma tag de pargrafo, <p>. Para selecionar a tabela contendo o pargrafo desejado, selecione a tag <table> esquerda da tag <p>.
Para ver o cdigo HTML associado ao texto ou objeto selecionado, siga um dos procedimentos abaixo:
Na barra de ferramentas do documento, clique no boto Show Code view (Mostrar visualizao do cdigo). Selecione View (Exibir) > Code (Cdigo). Na barra de ferramentas do documento, clique no boto Show Code and Design View (Mostrar visualizao do cdigo e do projeto). Selecione View > Code and Design (Cdigo e projeto). Selecione Window (Janela)> Code Inspector (Inspetor de cdigo).
Para obter mais informaes sobre a visualizao de cdigo, consulte Exibir o cdigo na pgina 583. Ao selecionar um elemento em um dos editores de cdigo, seja na visualizao do cdigo ou no inspetor Code (Cdigo), ele geralmente tambm selecionado na janela do documento. Talvez seja preciso sincronizar as duas visualizaes para que a seleo seja exibida (consulte Exibir o cdigo na pgina 583).
Selecionar elementos na janela do documento
387
Mostrar e ocultar elementos invisveis

Alguns cdigos HTML no possuem uma representao visvel em um navegador. Por exemplo, as tags comment no so exibidas nos navegadores. Entretanto, durante a criao de uma pgina, ser til poder selecionar esses elementos invisveis, edit-los, mov-los e exclulos. O Dreamweaver permite especificar se cones devem ser exibidos marcando a localizao de elementos invisveis na visualizao do projeto da janela do documento. Para indicar os marcadores de elementos que sero exibidos ao selecionar a opo View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis), defina opes nas preferncias de Invisible Elements (Elementos invisveis). Por exemplo, voc pode especificar que as ncoras com nome sejam visveis, mas no as quebras de linha. possvel criar determinados elementos invisveis (tais como comentrios e ncoras com nome) utilizando botes da categoria Common (Comuns) da barra Insert (Inserir) (consulte Utilizar a barra Insert na pgina 61). Em seguida, voc pode modificar esses elementos usando o Inspetor de propriedades.
Para mostrar ou ocultar cones de marcadores para elementos invisveis:
Selecione View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis).
N OT A
A exibio de elementos invisveis pode alterar ligeiramente o layout da pgina, movendo outros elementos alguns pixels. Portanto, para obter um layout preciso, oculte os elementos invisveis.
Para alterar as preferncias em Invisible Elements (Elementos invisveis):

1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh) e clique em Invisible Elements. Selecione os elementos que devero se tornar visveis. A marca de seleo ao lado do nome do elemento, na caixa de dilogo, significa que ele estar visvel quando a opo View (Exibir) > Visual Aids (Auxlios visuais)> Invisible Elements (Elementos invisveis) for selecionada. Para obter uma explicao sobre cada uma das preferncias de Invisible Elements (Elementos invisveis), consulte Mostrar e ocultar elementos invisveis em Usando o Dreamweaver.
2.
3.
Clique em OK.
388
Aplicar zoom
O Dreamweaver permite ampliar ou reduzir um documento, de modo que voc possa verificar a preciso de pixels das figuras, selecionar itens pequenos mais facilmente, criar pginas com texto pequeno, criar pginas grandes, etc.
N OT A
As ferramentas de zoom estaro disponveis apenas na visualizao do projeto.
Para ampliar uma pgina:

1.
Selecione a ferramenta Zoom (cone da lente de aumento) no canto inferior direito da janela do documento. Siga um dos procedimentos abaixo: Clique na parte da pgina que voc deseja ampliar at obter a ampliao desejada. Arraste uma caixa pela rea da pgina que voc deseja ampliar e solte o boto do mouse. Selecione um nvel de ampliao predefinido no menu pop-up Zoom. Digite um nvel de ampliao na caixa de texto Zoom.
DICA
2.

Tambm possvel ampliar uma pgina sem utilizar a ferramenta Zoom, pressionando Control+= (Windows) ou Command+= (Macintosh).
Para reduzir uma pgina:

1. 2.
Selecione a ferramenta Zoom. Pressione a tecla Alt (no Windows) ou Option (no Macintosh) e clique na pgina.
DICA
Tambm possvel reduzir uma pgina sem utilizar a ferramenta Zoom, pressionando Control+- (Windows) ou Command+- (Macintosh).
Para editar uma pgina aps aplicar o zoom:
Selecione a ferramenta Pointer (Ponteiro) (cone do ponteiro) no canto inferior direito da janela do documento e clique na pgina.
Para ver uma panormica da pgina aps aplicar o zoom:

1.
Selecione a ferramenta Hand (Mo) (cone da mo) no canto inferior direito da janela do documento. Arraste a pgina.
2.
Para preencher a janela do documento com uma seleo:

1. 2.
Selecione um elemento da pgina. Selecione View (Exibir)> Fit Selection (Ajustar a seleo).
Aplicar zoom
389
Para preencher a janela do documento com uma pgina inteira:
Selecione View > Fit All (Ajustar tudo).
Para preencher a janela do documento com a largura inteira de uma pgina:
Selecione View > Fit Width (Ajustar a largura).
Tpicos relacionados A barra de status na pgina 50
Utilizar o painel History (Histrico)

O painel History (Histrico) controla cada etapa do seu trabalho no Dreamweaver. Utilize este painel para desfazer diversas etapas simultaneamente. Se desejar desfazer a ltima operao realizada em um documento, selecione Edit (Editar) > Undo (Desfazer), como em qualquer outro aplicativo. O nome do comando Undo (Desfazer) no menu Edit (Editar) ser alterado, refletindo a ltima operao efetuada. O painel History tambm permite executar novamente etapas j realizadas e automatizar tarefas, atravs da criao de novos comandos. Para obter mais informaes, consulte Automatizar tarefas na pgina 391.
Para abrir o painel History:
Selecione Window> History.
Para desfazer a ltima etapa:
Arraste o controle deslizante do painel History para a etapa anterior na lista. Esta ao provoca o mesmo efeito que a seleo de Edit (Editar) > Undo (Desfazer). A etapa desfeita aparecer acinzentada.
Para desfazer vrias 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 para rolar automaticamente at a etapa, desfazendo as etapas durante a rolagem.
NO T A
Para rolar automaticamente at uma determinada etapa, clique esquerda da mesma. Clique em uma etapa para selecion-la. A ao de selecionar uma etapa diferente de retornar a essa etapa no histrico de cancelamento.
390
Da mesma maneira que uma nica etapa no pode ser refeita, se vrias etapas forem desfeitas, no ser mais possvel refaz-las depois de efetuar uma nova ao no documento, pois elas desaparecero do painel History.
Para definir o nmero de etapas que o painel History manter e mostrar:
1. 2. 3.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). Selecione General (Geral) na lista de categorias, esquerda. Digite o Maximum Number of History Steps (Nmero mximo de etapas do painel History [Histrico]). O valor padro deve ser suficiente para a maioria dos usurios. Quanto mais alto for o nmero, maiores sero os requisitos de memria do painel History (Histrico). Isso poder afetar o desempenho e diminuir significativamente a velocidade do computador. Quando o painel History (Histrico) atingir o nmero mximo de etapas, as primeiras etapas sero descartadas.
NO TA
No possvel reordenar as etapas no painel History. No se deve imaginar o painel History como uma coleo arbitrria de comandos. Considere-o como uma maneira de visualizar as etapas j realizadas, na ordem em que foram executadas.
Para apagar a lista de histrico do documento atual:
No menu contextual do painel History (Histrico), selecione Clear History (Limpar histrico). Este comando tambm limpar todas as informaes relacionadas ao cancelamento de aes para o documento atual. Aps selecionar Clear History, no ser mais possvel desfazer as etapas que tiverem sido limpas. Observe que o comando Clear History no refaz as etapas, ele simplesmente remove o registro das etapas da memria do Dreamweaver.
Tpicos relacionados Sobre o painel History (Histrico) na pgina 377
Automatizar tarefas
Ao criar documentos, provvel que voc executa uma mesma tarefa vrias vezes. Para repetir uma srie de etapas uma ou duas vezes, deve-se execut-las diretamente no painel History (Histrico), que registra as etapas executadas pelo usurio enquanto ele trabalha em um documento. Para informaes bsicas sobre o painel History (Histrico), consulte Sobre o painel History (Histrico) na pgina 377. Para automatizar uma tarefa realizada com freqncia, deve-se criar um novo comando que execute essa tarefa automaticamente.
Automatizar tarefas
391
Alguns movimentos do mouse, como o ato de clicar ou arrastar para selecionar um elemento na janela do documento, no podero ser executados ou salvos como parte de comandos salvos. Ao realizar um destes movimentos, uma linha preta exibida no painel History (Histrico) (embora a linha no estar bvia enquanto uma outra ao no for efetuada). Para evitar movimentos que no podem ser executados novamente, utilize as teclas de seta em vez do mouse para mover o ponto de insero na janela do documento. Para efetuar ou estender uma seleo, mantenha pressionada a tecla Shift ao pressionar uma tecla de seta.
DICA

Se uma linha preta de indicao do movimento do mouse aparecer enquanto voc estiver executando uma tarefa que deseja repetir mais tarde, possvel desfazer at antes desta etapa e tentar novamente, talvez utilizando as teclas de seta.
Algumas outras etapas especficas tambm no podem ser repetidas, como arrastar um elemento de pgina para outro local na pgina. Ao efetuar uma destas etapas, um cone de comando de menu com um pequeno X vermelho exibido no painel History (Histrico). Tpicos relacionados Aplicar etapas a um outro objeto na pgina 394 Aplicar etapas a vrios objetos na pgina 394 Copiar e colar etapas entre documentos na pgina 395 Criar novos comandos a partir de etapas do histrico na pgina 396 Gravar comandos na pgina 397
Repetir etapas
possvel utilizar o painel History para repetir a ltima etapa realizada, repetir uma srie de etapas adjacentes ou uma srie de etapas no-adjacentes. Para informaes bsicas sobre o painel History (Histrico), consulte Sobre o painel History (Histrico) na pgina 377.
Para repetir uma nica etapa, siga um dos procedimentos abaixo:
Selecione Edit (Editar) > Redo (Refazer). O nome desse comando do menu Edit (Editar) alterado para refletir a ltima etapa realizada. Por exemplo, se a ltima etapa tiver sido a digitao de um texto, o nome do comando ser Redo Typing (Refazer digitao). No painel History (Histrico), selecione a etapa e clique no boto Replay (Executar novamente). A etapa ser executada novamente e uma cpia dessa etapa ser exibida no painel History (Histrico).
392
Para repetir uma srie de etapas adjacentes:

1.
Selecione as etapas no painel History (Histrico), seguindo um dos procedimentos abaixo:
Arraste de uma etapa para outra (no arraste o controle deslizante; arraste apenas do identificador de texto de uma etapa at o identificador de texto de uma outra etapa). Selecione a primeira etapa e, em seguida, mantenha a tecla Shift pressionada e clique na ltima etapa ou selecione a ltima etapa e mantenha a tecla Shift pressionada e clique na primeira etapa.
As etapas executadas so as etapas que esto selecionadas (realadas), e no necessariamente a etapa que o boto deslizante aponta no momento.
NO TA
Embora seja possvel selecionar uma srie de etapas que inclui uma linha preta de indicao do movimento do mouse, esse movimento do mouse ignorado quando as etapas so executadas novamente.
2.
Clique em Replay (Executar novamente). As etapas sero executadas novamente em ordem, e uma nova etapa, denominada Replay Steps (Executar etapas novamente), ser exibida no painel History (Histrico).
Para repetir etapas no-adjacentes:

1.
Selecione uma etapa, mantenha a tecla Control (Windows) ou Command (Macintosh) pressionada e clique nas outras etapas. Tambm possvel manter a tecla Control (no Windows) ou Command (no Macintosh) pressionada e clicar para desmarcar uma etapa selecionada.
2.
Clique em Replay (Executar novamente). As etapas selecionadas sero executadas novamente na ordem e uma nova etapa, denominada Replay Steps (Executar etapas novamente), ser exibida no painel History (Histrico).
Tpicos relacionados Aplicar etapas a vrios objetos na pgina 394
Automatizar tarefas
393
Aplicar etapas a um outro objeto

possvel aplicar um conjunto de etapas do painel History a qualquer objeto na janela do documento.
Para aplicar as etapas do painel History a um novo objeto:
1. 2.
Selecione o objeto. Selecione as etapas relevantes no painel History e, em seguida, clique em Replay (Executar novamente).
Aplicar etapas a vrios objetos

Se vrios objetos forem selecionados em um documento e, em seguida, forem aplicadas etapas a eles a partir do painel History, os objetos sero tratados como uma nica seleo e o Dreamweaver tentar aplicar as etapas em todos eles. Por exemplo, impossvel selecionar cinco imagens e aplicar a mesma alterao de tamanho a cada uma delas ao mesmo tempo. Uma alterao de tamanho uma operao que deve ser aplicada a cada imagem individualmente e no a um conjunto de imagens. Para aplicar uma srie de etapas a cada objeto existente em um conjunto de objetos, necessrio que a ltima etapa da srie selecione o prximo objeto do conjunto. O procedimento a seguir demonstra este princpio em uma determinada situao: definio do espaamento vertical e horizontal de uma srie de imagens.
Para definir o espaamento vertical e horizontal de uma srie de imagens:
1.
Inicie com um documento no qual cada linha consiste em uma pequena imagem (como um marcador grfico 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 Property inspector, em Window (Janela) > Properties (Propriedades), caso no esteja aberto. Selecione a primeira imagem. No Inspetor de propriedades, digite nmeros nas caixas de texto V Space (Espao V) e H Space (Espao H) para definir o espaamento entre as imagens. Clique na imagem novamente para tornar a janela do documento ativa sem mover o ponto de insero.
3. 4.
5.
394
6.
Pressione a tecla de seta esquerda para mover o ponto de insero para a esquerda da imagem. Em seguida, pressione a tecla de seta para baixo a fim de mover o ponto de insero uma linha abaixo, deixando-o esquerda da segunda imagem da srie. Pressione as teclas Shift+seta para a direita para selecionar a segunda imagem.
N OT A
No selecionar a imagem clicando nela, pois desse modo no ser possvel executar todas as etapas novamente.
7.
Selecione as etapas do painel History (Histrico) que correspondem alterao do espaamento da imagem e seleo da prxima imagem. Clique no boto Replay para repetir essas etapas.
O espaamento da imagem atual alterado, e a prxima imagem selecionada.
8.
Continue clicando em Replay (Executar novamente) at que todas as imagens sejam espaadas da forma correta.
Para aplicar etapas a um objeto de um outro documento, utilize o boto Copy Steps (Copiar etapas).
Copiar e colar etapas entre documentos

Cada documento aberto tem seu prprio histrico de etapas. possvel copiar as etapas de um documento e col-las em outro. O fechamento de um documento limpar o seu histrico. Se tiver certeza de que desejar utilizar etapas de um documento aps t-lo fechado, copie as etapas usando Copy Steps (Copiar etapas), ou salve-as como um comando (consulte Criar novos comandos a partir de etapas do histrico na pgina 396) antes de fechar o documento.
Automatizar tarefas
395
Para reutilizar as etapas de um documento em outro documento:

1. 2. 3.
Comece a tarefa com o documento que contm as etapas a serem reutilizadas. Selecione as etapas no painel History (Histrico). No painel History, clique no boto Copy Steps (Copiar etapas) para copiar essas etapas.
N OT A

O comando Copy Steps (um boto exibido no painel History) diferente da opo Copy do menu Edit. No possvel utilizar Edit (Editar) > Copy (Copiar) para copiar etapas, embora elas sejam coladas com o comando Edit (Editar) > Paste (Colar).
As etapas que incluem um comando Copy (Copiar) ou Paste (Colar) devem ser copiadas com cuidado: No utilizar Copy (Copiar) as etapas se uma das etapas for um comando Copy, pois talvez no seja possvel colar estas etapas da maneira desejada. Se as etapas inclurem um comando Paste (Colar), ser impossvel col-las, a no ser que tambm incluam um comando Copy (Copiar) antes do comando Paste.
4. 5.
Abra o outro documento. Coloque o ponto de insero no local desejado ou selecione um objeto ao qual deseja aplicar as etapas. Selecione Edit (Editar) > Paste (Colar) para colar as etapas. As etapas sero executadas novamente medida que forem coladas no painel History do documento. O painel History mostra as etapas como uma nica etapa, denominada Paste Steps (Colar etapas). Se as etapas forem coladas em um editor de texto, na visualizao do cdigo ou no Inspetor de cdigo, elas sero exibidas como cdigo JavaScript. Este procedimento poder ser til para aprender como gravar os seus prprios scripts. Para obter mais informaes sobre como utilizar o JavaScript no Dreamweaver, consulte Escrever e editar o cdigo na pgina 613.
6.
Criar novos comandos a partir de etapas do histrico

possvel salvar um conjunto de etapas do histrico como um comando com nome, que se tornar disponvel no menu Commands (Comandos). Crie e salve um novo comando caso planeje usar novamente determinado conjunto de etapas no futuro, principalmente se quiser us-las sempre que iniciar o Dreamweaver. Os comandos salvos so mantidos permanentemente (a menos que voc os exclua), ao passo que os comandos gravados so perdidos quando voc sai do Dreamweaver. As seqncias copiadas de etapas so perdidas quando outro elemento copiado.
396
possvel editar ou excluir os nomes de comandos inseridos no menu Commands (Comandos). mais complicado editar e excluir os comandos includos no menu Commands (Comandos), ou seja, os comandos que no foram adicionados voluntariamente.
Para criar um comando:
1. 2.
Selecione uma etapa ou conjunto de etapas no painel History (Histrico). Clique no boto Save As Command (Salvar como comando) ou selecione Save As Command (Salvar como comando) no menu contextual do painel History (Histrico). Digite um nome para o comando e clique em OK. O comando exibido no menu Commands (Comandos).
NO T A
3.
O comando salvo como um arquivo JavaScript (ou, s vezes, como um arquivo HTML) na pasta /Configuration/Commands (/Configurao/Comandos) do Dreamweaver. Se estiver usando o Dreamweaver em um sistema operacional multiusurio, o arquivo ser salvo na pasta de comandos do usurio especfico.
Para utilizar um comando salvo:

1.
Selecione um objeto ao qual se deseja aplicar o comando ou coloque o ponto de insero no local desejado. Selecione o comando no menu Commands (Comandos).
2.
Para editar os nomes de comandos no menu Commands:

1. 2. 3.
Selecione Commands > Edit Command List. Selecione o comando a ser renomeado e digite um novo nome para ele. Clique em Close (Fechar).
Para excluir um nome do menu Commands:

1. 2. 3.
Selecione Commands > Edit Command List. Selecione um comando. Clique em Delete (Excluir) e em Close (Fechar).
Gravar comandos
possvel gravar um comando temporrio para uso por um perodo curto. O Dreamweaver retm apenas um nico comando gravado de cada vez; assim que comea a gravao de um novo comando, o comando antigo perdido.
Automatizar tarefas
397
Para salvar um novo comando sem perder um comando j gravado, salve o comando no painel History. Para obter mais informaes ao usar comandos gravados para executar etapas anteriores a partir do painel History, consulte Utilizar o painel History (Histrico) na pgina 390 .
Para gravar temporariamente uma srie de etapas utilizadas com freqncia:
1.
Selecione Commands (Comandos) > Start Recording (Iniciar gravao), ou pressione Control+Shift+X (no Windows) ou Command+Shift+X (no Macintosh). O ponteiro se altera, indicando que um comando est sendo gravado. Ao terminar a gravao, selecione Commands (Comandos) >Stop Recording (Parar gravao), ou pressione Control+Shift+X (no Windows) ou Command+Shift+X (no Macintosh).
2.
Para reexecutar um comando gravado:
Selecione Commands (Comandos) > Play Recorded Command (Executar comando gravado), ou pressione Control+Shift+R (no Windows) ou Command+Shift+R (no Macintosh).
Para salvar um comando gravado:

1.
Selecione Commands (Comandos) > Play Recorded Command (Executar comando gravado) para executar o comando novamente. Uma etapa denominada Run Command (Executar comando) exibida na lista de etapas do painel History (Histrico).
2.
Selecione a etapa Run Command (Executar comando) e clique no boto Save As Command (Salvar como comando). Digite um nome para o comando e clique em OK. O comando exibido no menu Commands (Comandos).
3.
Utilizar comportamentos JavaScript para detectar navegadores e plug-ins

Os comportamentos podem ser utilizados para determinar qual navegador os visitantes do site esto utilizando e se possuem um plug-in instalado. Para obter mais informaes sobre os comportamentos, consulte Captulo 18, Utilizar comportamentos JavaScript, na pgina 541.
398
Check Browser (Verificar navegador):
envia os visitantes a outras pginas, dependendo do tipo e verso do navegador (consulte Check Browser (Verificar o navegador) na pgina 551). Por exemplo, voc pode querer enviar os usurios para uma pgina se eles estiverem usando a verso 4.0 ou mais avanada do Netscape Navigator, para outra pgina se usarem a verso 4.0 ou mais avanada do Microsoft Internet Explorer, ou mant-los na mesma pgina caso estejam usando outro navegador.
envia os visitantes a pginas diferentes, dependendo se o plug-in especificado estiver ou no instalado (consulte Check Plugin (Verificar o plug-in) na pgina 552). Por exemplo, possvel enviar os usurios que tenham o Macromedia Shockwave instalado para uma pgina, e os que no o tenham para outra pgina.
Check Plug-in
Visualizar e testar pginas em navegadores

possvel visualizar documentos em um navegador a qualquer momento. No necessrio salvar o documento primeiro, nem fazer upload para um servidor da Web Esta seo contm os tpicos a seguir:

Visualizar em um navegador na pgina 399 Definir preferncias de visualizao na pgina 400 Visualizar contedo ativo no Internet Explorer (Windows) na pgina 401
Visualizar em um navegador
Voc pode utilizar o Dreamweaver para visualizar e testar o seu documento em um navegador.
Para visualizar e testar o seu documento em um navegador:
1.
Siga um dos procedimentos abaixo para visualizar a pgina:
Selecione File (Arquivo) > Preview in Browser (Visualizar no navegador) e, em seguida, selecione um dos navegadores listados.
N O TA
Se voc ainda no tiver selecionado um navegador, selecione Edit > Preferences (no Windows) ou Dreamweaver > Preferences (no Macintosh) e, em seguida, selecione a categoria Preview in Browser (Visualizar no navegador) esquerda para selecionar um navegador.
Pressione as teclas F12 (no Windows) ou Option+F12 (no Macintosh) para exibir o documento atual no navegador primrio.
399
Pressione as teclas Control+F12 (no Windows), ou Command+F12 (no Macintosh), para exibir o documento no navegador secundrio.
2.
Clique em links e teste o contedo da sua pgina. Na maioria dos casos, todas as funes 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 necessrios estejam instalados. Se voc usa o Internet Explorer em um computador que tem instalado o Windows XP com Pacote de Servio 2, possvel que o navegador exiba uma mensagem indicando que ele proibiu o arquivo de mostrar contedo ativo. Voc pode resolver o problema incluindo o cdigo Mark of the Web no arquivo. Para obter mais informaes, consulte Visualizar contedo ativo no Internet Explorer (Windows) na pgina 401.
NO TA DICA
O contedo vinculado a um caminho relativo raiz no aparece quando os documentos so visualizados em um navegador local, a menos que voc especifique um servidor de teste ou selecione a opo Preview Using Temporary File (Visualizar utilizando arquivo temporrio) em Edit (Editar)> Preferences (Preferncias)> Preview in Browser (Visualizador no navegador). Isso se deve ao fato de que os navegadores no reconhecem a raiz do site, como os servidores reconhecem. Para visualizar o contedo vinculado a caminhos relativos raiz, coloque o arquivo em um servidor remoto e, em seguida, selecione File (Arquivo) > Preview in Browser (Visualizar no navegador) para visualiz-lo (consulte Caminhos relativos raiz do site na pgina 464).
3.
Feche a pgina no navegador aps concluir o teste.
Definir preferncias de visualizao

Voc pode definir at 20 navegadores para a visualizao. Os seguintes navegadores so recomendados para visualizao: Internet Explorer 6.0, Netscape Navigator 7.0 e Safari (apenas Macintosh). Alm desses navegadores grficos mais populares, possvel testar suas pginas utilizando um navegador somente de texto como o Lynx.
Para configurar ou alterar as preferncias dos navegadores primrio e secundrio:
1.
Siga um dos procedimentos abaixo para abrir as opes Preview in Browser (Visualizar no navegador):
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh) e selecione Preview in Browser (Visualizar no navegador) na lista de categorias esquerda.
400
Selecione File (Arquivo) > Preview in Browser (Visualizar no navegador) > Edit Browser List (Editar lista de navegadores).
A caixa de dilogo Preferences (Preferncias) exibida as opes de visualizao no navegador.
2.
Faa as alteraes necessrias. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
3.
Visualizar contedo ativo no Internet Explorer (Windows)

Se voc visualizar um documento que tem contedo ativo no Internet Explorer aps a instalao da atualizao do Pacote de Servio 2 do Windows XP, possvel que o navegador no exiba o documento corretamente. O navegador exibir uma mensagem indicando que ele proibiu o arquivo de mostrar contedo ativo. Voc pode resolver o problema inserindo o cdigo Mark of the Web no documento.
401
O Internet Explorer bloqueia o contedo ativo e os scripts que tentam ser executados na zona Mquina Local. Como os invasores tentam tirar proveito da zona Mquina Local, a Microsoft aumentou as restries aos programas que, por padro, podem ser executados nesta zona. O cdigo Mark of the Web instrui o navegador a executar o contedo ativo em uma outra zona, neste caso, a zona Internet.
Para visualizar contedo ativo no Internet Explorer, no Windows XP SP2:
Com o documento aberto no Dreamweaver, selecione Commands (Comandos) > Insert Mark of the Web (Inserir Mark of the Web). O Dreamweaver inserir a seguinte linha no cdigo:

Essa linha instrui o navegador a ignorar a zona Mquina Local e executar o contedo ativo na zona Internet. Voc tambm pode remover o cdigo Mark of the Web antes de enviar arquivos.
Para remover o cdigo Mark of the Web:
1. 2.
No Dreamweaver, abra o documento que contm o cdigo Mark of the Web. Selecione Commands > Remove Mark of the Web (Remover Mark of the Web).
Para obter mais informaes, consulte a seo TechNote 19578 no site da Macromedia, em www.macromedia.com/go/19578.
Definir preferncias de tamanho e tempo de download

O Dreamweaver calcula o tamanho com base no contedo total da pgina, incluindo todos os objetos vinculados, como imagens e plug-ins. O Dreamweaver estima o tempo de download com base na velocidade de conexo inserida nas preferncias de Status Bar (Barra de status). O tempo do download varivel e depende das condies gerais da Internet.
DICA
Uma boa diretriz a ser seguida na verificao dos perodos de download de uma determinada pgina da Web a regra de oito segundos. Ou seja, a maioria dos usurios no esperar mais do que oito segundos para que a pgina seja carregada completamente.
Para definir as preferncias de tempo e tamanho do download:

1.
402
2.
Selecione Status Bar (Barra de status) na lista Category (Categoria) esquerda. As opes de preferncias para Status Bar (Barra de status) so exibidas.
3.
Selecione uma velocidade de conexo com a qual deseja calcular o tempo de download. A velocidade mdia de conexo nos EUA 28,8 kbps. Se o seu projeto destinar-se a uma intranet, possvel que voc queira selecionar 1.500 (velocidade T1). Para obter mais informaes sobre as preferncias da barra de status, consulte Definir as preferncias da barra de status na pgina 59.
4.
Clique em OK.
Definir preferncias de tamanho e tempo de download
403
404
CAPTULO 13
Inserir e formatar texto

O Macromedia Dreamweaver 8 oferece vrias maneiras de adicionar e formatar texto em um documento. Voc pode inserir texto, definir atributos de tipo de fonte, tamanho, cor e alinhamento, assim como criar e aplicar seus estilos personalizados usando Cascading Style Sheets (Folhas de estilo em cascata) (CSS). Este captulo aborda os tpicos a seguir:
Formatar texto no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 Inserir texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418 Formatar pargrafos e estruturas de documento . . . . . . . . . . . . . . . . . . . . . . . . . . . .422 Formatao do texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .427 Utilizar a opo Cascading Style Sheets (Folha de estilo em cascata) para formatar texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .433 Verificar a ortografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443 Procurar e substituir texto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444
13
Formatar texto no Dreamweaver

O Dreamweaver oferece vrias ferramentas e comandos que permitem formatar texto usando CSS ou HTML. Esta seo contm os seguintes tpicos:

Inserir texto na pgina 406 Formatar texto na pgina 406 CSS (Cascading Style Sheets) na pgina 408 Regras CSS conflitantes na pgina 410 Propriedades abreviadas de CSS na pgina 410 O Property inspector (Inspetor de propriedades) e a formatao de texto na pgina 412 Utilizar o painel CSS Styles na pgina 414
405
Inserir texto
O Dreamweaver permite que voc inclua texto em pginas da Web digitando texto diretamente na pgina, copiando e colando texto de outro documento ou mesmo arrastando texto de outro aplicativo. Entre os tipos de documento mais comuns que os profissionais da Web recebem com contedo que deve ser incorporado a pginas da web, incluem-se arquivos de texto ASCII, arquivos em formato rich text e documento do Microsoft Office. O Dreamweaver permite que voc incorpore qualquer um desses tipos de documento a uma pgina da Web. Tpicos relacionados Inserir texto na pgina 418

Adicionar texto a um documento na pgina 418 Importar documentos de dados tabulares na pgina 419 Importar documentos do Microsoft Office (apenas noWindows) na pgina 420
Formatar texto
A formatao no Dreamweaver semelhante utilizao de um processador de texto padro. Voc pode definir os estilos de formatao padro (Pargrafo, Ttulo 1, Ttulo 2 e assim por diante) para um bloco de texto, alterar a fonte, o tamanho, a cor e o alinhamento do texto selecionado ou ainda aplicar estilos de texto, como, por exemplo, negrito, itlico, cdigo (monoespaado) e sublinhado. Por padro, o Dreamweaver formata texto usando CSS (Cascading Style Sheets). Os CSS do aos designers da Web e aos desenvolvedores maior controle sobre o design de pginas da Web, oferecendo ao mesmo tempo recursos avanados de acessibilidade, alm de arquivos menores. Quando voc formata e alinha texto usando comandos do Dreamweaver, as regras CSS so incorporadas ao documento atual. Isso permite reutilizar os estilos existentes com maior facilidade, bem como nomear os estilos que voc criar. As CSS esto se transformando no mtodo preferido de formatar texto e criar pginas da Web. Se preferir, voc pode usar tags de HTML para formatar e alinhar texto em suas pginas da Web. Caso precise usar tags HTML em vez de CSS, voc dever alterar as preferncias padro de formatao de texto do Dreamweaver. Para obter mais informaes, consulte Especificar HTML em vez de CSS na pgina 381.
406
Captulo 13: Inserir e formatar texto
Usar CSS uma maneira de controlar o estilo de uma pgina da Web sem comprometer sua estrutura. Ao separar os elementos visuais do design (fontes, cores, margens, etc.) da lgica estrutural da pgina da Web, o CSS oferece aos Web designers controle visual e tipogrfico, sem sacrificar a integridade do contedo. Alm disso, definir design tipogrfico e layout de pgina a partir de um determinado bloco de cdigo sem a necessidade de recorrer a image maps, fontes tags, tabelas e GIFs de espacejamento permite downloads mais rpidos, manuteno de sites mais racional e um ponto central de controle dos atributos de design em diversas pginas da Web. O CSS define a formatao para o texto inteiro em uma determinada classe ou redefine a formatao para uma tag HTML especfica (como h1, h2, p ou li). Os estilos criados com CSS podem ser armazenados diretamente no documento (padro quando voc formata texto utilizando o Property inspector [Inspetor de propriedades]) ou, para se obter mais capacidade e flexibilidade, em uma folha de estilos externa.. Se uma folha de estilos externa for anexada a vrias pginas da Web, todas as pginas refletiro automaticamente quaisquer alteraes feitas na folha de estilos. Para acessar todas as regras CSS de uma pgina, utilize o painel CSS Styles (Estilos CSS) (Window [Janela]> CSS Styles). Para obter mais informaes sobre como usar o Property inspector de texto para aplicar HTML ou CSS, consulte Definir opes de propriedades de texto. Para obter mais informaes sobre como usar o painel CSS para aplicar CSS, consulte Utilizar o painel CSS Styles (Estilos CSS).
N OT A
possvel combinar CSS e formatao HTML 3.2 na mesma pgina. A formatao aplicada de maneira hierrquica: A formatao em HTML 3.2 sobreposta formatao aplicada por outras folhas de estilos CSS, e o CSS incorporado a um documento sobreposto a um CSS externo. Para obter mais informaes, consulte Utilizar a opo Cascading Style Sheets (Folha de estilo em cascata) para formatar texto na pgina 433.
Tpicos relacionados Inserir texto na pgina 418 Formatao do texto na pgina 427
407
CSS (Cascading Style Sheets)

Os estilos CSS (folhas de estilo em cascata) so um conjunto de regras de formatao que controlam a aparncia do contedo em uma pgina da Web. Ao utilizar CSS para formatar uma pgina, voc separa da apresentao o contedo. O contedo da pgina o cdigo HTML reside no prprio arquivo HTML, embora as regras CSS que definam a apresentao do cdigo residam em um outro arquivo (uma folha de estilo externa) ou em uma outra parte do documento HTML (geralmente, na seo head). Com CSS, voc tem grande flexibilidade e controle sobre a aparncia da pgina, desde o posicionamento preciso do layout at fontes e estilos especficos. Com CSS, voc pode controlar vrias propriedades que o HTML sozinho no pode controlar. Por exemplo: possvel especificar diferentes tamanhos de fontes e unidades (pixels, pontos, etc.) para o texto selecionado. Tambm possvel garantir um tratamento mais consistente do layout e da aparncia da pgina em vrios navegadores, utilizando CSS para definir tamanhos de fontes em pixels. Alm da formatao do texto, possvel utilizar CSS para controlar o formato e o posicionamento de elementos em nvel de bloco em uma pgina da Web. possvel definir, por exemplo, margens e bordas para elementos em nvel de bloco, texto flutuante em torno de outro texto, e assim por diante. Uma regra de formatao CSS consiste em duas partes: o seletor e a declarao. O seletor um termo (como P, H1, um nome de classe ou uma id) que identifica o elemento formatado, e a declarao define os elementos de estilo. No exemplo a seguir, H1 o seletor, e tudo que est entre chaves ({}) a declarao:
H1 { font-size: 16 pixels; font-family: Helvetica; font-weight:bold; }
A declarao consiste em duas partes: a propriedade (como font-family) e o valor (como Helvetica). Na regra CSS anterior, foi criado um estilo especfico particular para tags H1: o texto de todas as tags H1 vinculadas a esse estilo ter 16 pixels, fonte Helvetica e negrito. O termo em cascata refere-se capacidade de aplicar vrios estilos ao mesmo elemento. Por exemplo: possvel criar uma regra CSS para aplicar cor e outra para aplicar margens, e apliclas ao mesmo texto em uma pgina. Os estilos definidos formam uma cascata decrescente com os elementos da pgina Web, criando, finalmente, o desenho desejado. Uma grande vantagem do CSS que ele oferece a capacidade de fcil atualizao. Quando uma regra CSS atualizada em um local, a formatao de todos os documentos que utilizam o estilo definido atualizada automaticamente para o novo estilo.
408
Voc pode definir os seguintes tipos de estilos no Dreamweaver:
Regras CSS personalizadas, tambm chamadas estilos de classe, permitem aplicar atributos de estilo a qualquer faixa ou bloco de texto. Consulte Aplicar um estilo de classe na pgina 437. Os estilos de tags HTML redefinem a formatao de uma tag especfica, como h1. Quando for criado ou alterado um estilo CSS para a tag h1, todos os textos formatados com a tag h1 sero imediatamente atualizados. Os estilos do seletor CSS (estilos avanados) redefinem a formatao de uma determinada combinao de elementos ou de outras formas de seletor permitidas pelo CSS (por exemplo, o seletor td h2 aplicado sempre que aparece um cabealho h2 dentro de uma clula da tabela.) Os estilos avanados tambm podem redefinir a formatao de tags que contm um atributo id especfico (por exemplo, os estilos definidos por #myStyle se aplicam a todas as tags que contm o par de valor do atributo id="myStyle").
As regras CSS podem residir nos seguintes locais:

Folhas de estilo CSS externas so colees de regras CSS armazenados em um arquivo CSS externo separado, com a extenso .css (e no um arquivo de HTML). Este arquivo vinculado a uma ou mais pginas em um site da Web atravs de um link na seo head do documento. Folhas de estilo CSS internas (ou incorporadas) so colees de regras CSS includas em uma tag style na seo head de um documento HTML. Estilos em linha
so definidos dentro de instncias especficas de tag por todo o documento
HTML. O Dreamweaver reconhece os estilos definidos em documentos existentes, contanto que eles estejam em conformidade com as instrues CSS.
DICA
Para exibir o guia de referncia de CSS da OReilly includo no Dreamweaver, selecione Help > Reference e selecione OReilly CSS Reference no menu pop-up do painel Reference.
A formatao HTML manual pode anular a formatao aplicada com CSS. Para que as regras CSS controlem a formatao de um pargrafo, remova toda a formatao HTML manual. O Dreamweaver processa a maioria dos atributos de estilos aplicados diretamente na janela do documento. Tambm possvel visualizar o documento em uma janela do navegador para ver os estilos aplicados. Alguns atributos de estilo CSS tm uma aparncia diferente no Microsoft Internet Explorer, no Netscape, no Opera e no Apple Safari, sendo que alguns no so suportados por nenhum navegador atual.
409
Regras CSS conflitantes

Quando duas ou mais regras CSS forem aplicadas ao mesmo texto, estas podero se tornar conflitantes e produzir resultados inesperados. Os navegadores aplicam regras CSS da seguinte maneira:
Se duas regras forem aplicadas ao mesmo texto, o navegador exibir todos os atributos de ambas as regras, a menos que os atributos especficos sejam conflitantes. Por exemplo: uma regra pode especificar azul para a cor do texto, e outra, definir vermelho. Se os atributos de duas regras aplicadas ao mesmo texto forem conflitantes, o navegador exibir o atributo da regra mais prxima (quela do texto). Por isso, se uma folha de estilo externa e um estilo inline forem aplicados a um determinado elemento de texto, o estilo inline prevalecer. Se houver um conflito direto, os atributos das regras CSS personalizadas (aplicadas com o atributo class) anularo 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 pargrafos h1, mas a regra CSS personalizada .Blue aplicada a esse pargrafo anula a definio de cor no estilo h1. A segunda regra CSS personalizada .Red anula o .Blue porque ela est contida no estilo .Blue.
<h1><span class="Blue">This paragraph is controlled by the .Blue custom style and h1 HTML tag style.<span class="Red">Except this sentence is controlled by the .Red style.</span> Now we're back to the .Blue style.</span></h1>
Propriedades abreviadas de CSS

A especificao de CSS permite criar estilos utilizando uma sintaxe abreviada conhecida como CSS abreviada. A CSS abreviada permite especificar os valores de vrias propriedades usando uma nica tag de propriedade. Por exemplo, a propriedade font permite configurar as propriedades font-style, font-variant, font-weight, font-size, line-height e fontfamily dentro de uma nica linha de sintaxe. Uma questo chave a ser observada ao usar CSS abreviada que valores omitidos em uma propriedade CSS abreviada assumem seu valor padro. Isso pode fazer com que algumas pginas sejam exibidas incorretamente quando duas ou mais regras CSS forem atribudas mesma tag.
410
Por exemplo, o tag H1 mostrado abaixo utiliza sintaxe CSS longa. Observe que foram atribudos os valores padro s propriedades font-variant, font-stretch, font-sizeadjust e font-style .
H1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none }
Se fosse reescrita como uma nica propriedade abreviada, a mesma tag teria o seguinte aspecto:
H1 { font: bold 16pt/18pt Arial }
Quando essa notao abreviada usada, so usados automaticamente valores padro para os valores omitidos. Portanto, o exemplo abreviado anterior omite as tags font-variant, fontstretch, font-size-adjust e font-style. Caso tenha estilos definidos em mais de um local (por exemplo, incorporados em uma pgina HTML e importados de uma folha de estilo externa) com ambas as formas de sintaxe de CSS, abreviada e longa, observe que as propriedades omitidas podem anular (ou se propagar em cascata) as propriedades configuradas explicitamente no outro local. Por isso, o Dreamweaver utiliza como padro a forma longa de notao de CSS. Isso evita possveis problemas causados por uma regra abreviada que anule uma regra longa. Se abrir uma pgina da Web que foi codificada com notao abreviada de CSS no Dreamweaver, observe que o Dreamweaver criar qualquer nova regra CSS usando a forma longa. Para especificar como o Dreamweaver cria e edita regras CSS, altere as preferncias de edio CSS na categoria CSS Styles da caixa de dilogo Preferences (Edit > Preferences no Windows ou Dreamweaver > Preferences no Macintosh).
NO T A
O painel CSS Styles (Estilos CSS) cria regras usando apenas notao longa. Se voc criar uma pgina ou folha de estilo CSS usando o painel CSS Styles, observe que a codificao manual de regras CSS abreviadas pode fazer com que as propriedades abreviadas anulem aquelas criadas na forma longa. Por isso, utilize sempre notao longa ao criar seus estilos.
Tpicos relacionados Regras CSS conflitantes na pgina 410 Utilizar o painel CSS Styles na pgina 414
411
O Property inspector (Inspetor de propriedades) e a formatao de texto

O Property inspector permite que voc formate um segmento de texto selecionado. medida que voc formata o texto usando o Property inspector, o Dreamweaver registra as propriedades de formatao que atribui a cada elemento de texto, atribuindo a cada um uma identificao usando a seguinte conveno de nomenclatura: Style1 (Estilo1), Style2 (Estilo2), Style3 (Estilo3), Stylen (Estilo n). Se voc atribuir os mesmos atributos de formatao a dois ou mais elementos de texto, Dreamweaver aplica rtulos a esses elementos com o mesmo ttulo, eliminando nomes de estilos redundantes. O rtulo aplicado pelo Dreamweaver a um determinado corpo de texto pode ser aplicado usando o menu pop-up Style, o que permite criar uma biblioteca de estilos dentro de uma pgina. Dessa forma, pode-se aplicar esses mesmos estilos selecionando o elemento de texto na pgina e selecionando um estilo no menu pop-up Styles. possvel renomear estilos com tags mais significativas, como Cabealho1, Cabealho2, Corpo e Tabela.
412
O menu pop-up Style (Estilo) exibe tanto os nomes dos estilos na sua pgina, como uma visualizao das propriedades do estilo. As propriedades mostradas na visualizao so famlia de fontes, espessura da fonte, peso de fonte, cor de texto e cor de fundo.
Tpicos relacionados Formatar pargrafos na pgina 423

Definir e alterar fontes e estilos na pgina 427 Renomear um estilo na pgina 428 Utilizar a opo Cascading Style Sheets (Folha de estilo em cascata) para formatar texto na pgina 433
413
Utilizar o painel CSS Styles

O painel CSS Styles (Estilos CSS) permite acompanhar as regras CSS e propriedades que afetam um elemento selecionado da pgina (modo Current [Atual]) ou as regras e as propriedades que afetam um documento inteiro (modo All [Tudo]). Um boto de alternncia na parte superior do painel CSS Styles permite alternar entre os dois modos. O painel CSS Styles tambm permite modificar as propriedades CSS nos modos All e Current.
Painel CSS Styles no modo Current

No modo Current (Atual), o painel CSS Styles (Estilos CSS) exibe trs painis: o painel Summary for Selection (Resumo para seleo) que exibe as propriedades CSS da seleo atual no documento, o painel Rules (Regras) que exibe a localizao das propriedades selecionadas (ou uma cascata de regras para a tag selecionada, dependendo da seleo) e o painel Properties (Propriedades) permite editar propriedades CSS para a regra que define a seleo.
possvel redimensionar qualquer um dos painis arrastando as bordas existentes entre eles.
414
O painel Summary for Selection exibe um resumo das propriedades CSS do item atualmente selecionado no documento ativo. O resumo mostra as propriedades para todas as regras que se aplicam diretamente seleo. So mostradas apenas as propriedades definidas. Por exemplo, as regras a seguir criam um estilo de classe e um estilo de tag (nesse caso, pargrafo):
.foo{ color: green; font-family: Arial; } P{ font-family: serif; font-size: 12px; }
Quando voc seleciona um texto de pargrafo com estilo de classe .foo na janela do documento, o painel Summary for Selection exibe as propriedades relevantes das duas regras porque as duas regras se aplicam seleo. Nesse caso, o painel Summary for Selection listaria as seguintes propriedades:
font-size: 12px font-family: Arial color: green
O painel Summary for Selection organiza as propriedades por ordem crescente de especificidade. No exemplo acima, o estilo da tag define o tamanho da fonte, e o estilo da classe define a famlia de fontes e a cor. (A famlia de fontes definida pelo estilo da classe anula a famlia de fontes definida pelo estilo da tag porque os seletores de classe tm especificidade superior aos seletores de tags. Para obter mais informaes sobre especificidade CSS, consulte www.w3.org/TR/CSS2/cascade.html.) O painel Rules exibe duas visualizaes diferentes visualizao About (Sobre) e visualizao Rules dependendo da seleo feita. Na visualizao About (padro), o painel exibe o nome da regra que define a propriedade CSS selecionada e o nome do arquivo que contm a regra. Na visualizao Rules, o painel exibe uma cascata, ou hierarquia, de todas as regras que se aplicam direta ou indiretamente seleo atual. (A tag qual a regra se aplica diretamente aparece na coluna da direita.) possvel alternar entre as duas visualizaes clicando nos botes Show Information (Mostrar informaes) e Show Cascade (Mostrar cascata) no canto superior direito do painel Rules.
415
Quando voc seleciona uma propriedade no painel Summary for Selection, todas as propriedades da regra de definio aparecem no painel Properties. (A regra de definio tambm ser selecionada no painel Rules, se a visualizao Rules for selecionada.) Por exemplo, se voc tiver uma regra denominada .maintext que defina uma famlia de fontes, tamanho e cor da fonte, ao selecionar qualquer uma dessas propriedades no painel Summary for Selection, sero exibidas todas as propriedades definidas pela regra .maintext no painel Properties, bem como a regra .maintext selecionada no painel Rules. (Alm disso, ao selecionar qualquer regra no painel Rules, sero exibidas as propriedades dessa regra no painel Properties.) possvel utilizar o painel Properties para modificar rapidamente o CSS, esteja ele incorporado no documento atual ou vinculado apenas por meio de uma folha de estilo anexada. Por padro, o painel Properties mostra apenas as propriedades que foram anteriormente definidas e as organiza por ordem alfabtica. Voc pode optar por exibir o painel Properties em duas outras visualizaes. A visualizao Category (Por categorias) exibe propriedades agrupadas em categorias, como Font (Fonte), Background (Fundo), Block (Bloco), Border (Borda), etc., com as propriedades definidas na parte superior de cada categoria, exibidas em azul. A visualizao List (Por lista) exibe uma lista alfabtica de todas as propriedades disponveis e, do mesmo modo, classifica as propriedades definidas na parte superior, exibindo-as em azul. Para alternar entre as visualizaes, clique no boto Show Category View (Mostrar visualizao de categoria) ou Show List View (Mostrar visualizao de lista) ou Show Only Set Properties (Mostrar apenas as propriedades definidas), localizado no canto inferior esquerdo do painel Properties. Em todas as visualizaes, as propriedades definidas so exibidas em azul; propriedades irrelevantes para uma seleo so exibidas em vermelho e riscadas. Se voc passar o cursor sobre uma regra irrelevante, ser exibida uma mensagem explicando por que a propriedade irrelevante. Normalmente, uma propriedade irrelevante porque foi sobrescrita ou por no ter sido herdada. Todas as alteraes feitas no painel Properties so aplicadas instantaneamente, permitindo que voc visualize o que est fazendo medida que trabalha. Tpicos relacionados Painel CSS Styles (Estilos CSS) no modo All (Tudo) na pgina 417
416
Painel CSS Styles (Estilos CSS) no modo All (Tudo)

No modo All, o painel CSS Styles exibe dois painis: o painel All Rules (Todas as regras) (na parte superior) e o painel Properties (Propriedades) (na parte inferior). O painel All Rules exibe uma lista com as regras definidas no documento atual, bem como todas as regras definidas nas folhas de estilos anexadas ao documento atual. O painel Properties permite editar propriedades CSS para qualquer regra selecionada no painel All Rules.
possvel redimensionar qualquer um dos painis arrastando a borda entre os painis. Quando voc seleciona uma regra no painel All Rules, todas as propriedades definidas nessa regra aparecem no painel Properties. possvel utilizar o painel Properties para modificar rapidamente o CSS, esteja ele incorporado no documento atual ou vinculado apenas por meio de uma folha de estilo anexada. Por padro, o painel Properties mostra apenas as propriedades que foram anteriormente definidas e as organiza por ordem alfabtica. Voc pode optar por exibir as propriedades em duas outras visualizaes. A visualizao Category (Por categorias) exibe propriedades agrupadas em categorias, como Font (Fonte), Background (Fundo), Block (Bloco), Border (Borda), etc., com as propriedades definidas na parte superior de cada categoria. A visualizao List (Por lista) exibe uma lista alfabtica de todas as propriedades disponveis e, desse modo, classifica as propriedades definidas na parte superior. Para alternar entre as visualizaes, clique no boto Show Category View (Mostrar visualizao de categoria) ou Show List View (Mostrar visualizao de lista) ou Show Only Set Properties (Mostrar apenas as propriedades definidas), localizado no canto inferior esquerdo do painel Properties. Em todas as visualizaes, as propriedades definidas so exibidas em azul.
417
Todas as alteraes feitas no painel Properties so aplicadas instantaneamente, permitindo que voc visualize o que est fazendo medida que trabalha. Tpicos relacionados Painel CSS Styles no modo Current na pgina 414
Inserir texto
O Dreamweaver permite que voc insira texto facilmente em um documento digitando, copiando e colando ou importando. Voc tambm pode inserir espao extra entre caracteres e linhas no texto.
Adicionar texto a um documento

Para adicionar texto a um documento do Dreamweaver, voc pode digitar diretamente na janela de documento do Dreamweaver ou recortar e colar. Voc tambm pode importar texto de outros documentos (consulte Importar documentos de dados tabulares na pgina 419 e Importar documentos do Microsoft Office (apenas noWindows) na pgina 420). Ao colar texto em um documento do Dreamweaver, voc pode usar o comando Paste (Colar) ou Paste Special (Colar especial). O comando Paste Special permite especificar o formato do texto colado de maneiras diferentes. Por exemplo, se voc quisesse colar o texto de um documento formatado do Microsoft Word no documento do Dreamweaver, mas quisesse remover toda a formatao, a fim de poder aplicar sua prpria folha de estilos CSS ao texto colado, seria possvel selecionar o texto no Word, copi-lo para a rea de transferncia e usar o comando Paste Special para selecionar a opo que permite colar apenas texto. Alm disso, ao utilizar o comando Paste para colar texto de outros aplicativos , voc pode definir as preferncias de colagem como opes padro. Para obter mais informaes, consulte Definir preferncias de cpia/colagem na pgina 419.
Para adicionar texto a um documento, siga um dos procedimentos abaixo:

Digite o texto diretamente na janela do documento. Copie o texto de outro aplicativo, alterne para o Dreamweaver, posicione o ponto de insero na visualizao do projeto da janela do documento e escolha Edit (Editar) > Paste (Coalr) ou Edit > Paste Special (Colar especial). Quando voc seleciona Edit > Paste Special, uma caixa de dilogo apresenta vrias opes de formatao de colagem. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
418
Tambm possvel colar texto utilizando os seguintes atalhos de teclado:

Opo de colagem
Paste (Colar) Paste Special (Colar especial)
Atalho de teclado
Control+V (Windows) Command+V (Macintosh) Control+Shift+V (Windows) Command+Shift+V (Macintosh)
Definir preferncias de cpia/colagem

Voc pode definir preferncias especiais de colagem como opes padro ao utilizar Edit (Editar) > Paste (Colar) para colar texto de outros aplicativos. Por exemplo, se voc deseja colar texto apenas como texto ou texto com formatao bsica, poder definir a opo padro na caixa de dilogo Copy/Paste Preferences (Preferncias de cpia/colagem).
NO TA
Para definir as opes padro para cpia e colagem:

1.
Selecione Edit > Preferences (Preferncias) (no Windows) ou Dreamweaver Preferences (Preferncias do Dreamweaver) (no Macintosh). Clique na categoria Copy/Paste (Copiar/colar). Preencha a caixa de dilogo e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda).
N OT A
Os atalhos Control+V (Windows) e Command+V (Macintosh) sempre colam apenas o texto (sem formatao) na visualizao de cdigo.
As preferncias definidas na caixa de dilogo Copy/Paste Preferences se aplicam apenas ao material colado na visualizao do projeto.
2. 3.
Importar documentos de dados tabulares

possvel importar dados tabulares para um documento atravs do salvamento inicial dos arquivos (como arquivos do Microsoft Excel ou de um banco de dados) como arquivos de texto delimitados. Para mais informaes sobre importao e formatao de dados de tabelas, veja Importar e exportar dados tabulares na pgina 261. Para mais informaes sobre importao de texto de documentos em HTML do Microsoft Word, consulte Abrir documentos existentes na pgina 107.
Inserir texto
419
Voc tambm pode adicionar texto de documentos do Microsoft Excel a um documento do Dreamweaver importando o contedo de um arquivo do Excel em uma pgina da Web (consulte Importar documentos do Microsoft Office (apenas noWindows) na pgina 420).
Para importar dados tabulares:
1.
Selecione File (Arquivo) > Import (Importar) > Import Tabular Data (Importar dados tabulados) ou Insert (Inserir) > Table Objects (Objetos de tabela) > Import Tabular Data (Importar dados tabulados). A caixa de dilogo Import Table (Importar os dados da tabela) exibida. Procure o arquivo desejado ou digite o seu nome na caixa de texto. Selecione o delimitador utilizado quando o arquivo foi salvo como texto delimitado. As opes disponveis so Tab (Tabulao), Comma (Vrgula), Semicolon (Ponto-e-vrgula), Colon (Dois-pontos), e Other (Outro). Se for selecionado Other (Outro), aparecer um campo em branco ao lado da opo. Digite o caractere que foi utilizado como um delimitador.
2. 3.
4.
Utilize as demais opes para formatar ou definir a tabela para a qual os dados sero importados. Clique em OK.
5.
Importar documentos do Microsoft Office (apenas noWindows)

possvel inserir todo o contedo de um documento do Microsoft Word ou do Excel em uma pgina da Web nova ou existente. Quando voc importa um documento do Word ou Excel, o Dreamweaver recebe o HTML convertido e insere-o na pgina da Web. O tamanho do arquivo, depois de o Dreamweaver receber o HTML convertido, deve ser menor que 300K.
DICA 420 N O TA
Em vez de importar todo o contedo de um arquivo, voc tambm pode colar partes de um documento do Word e preservar a formatao. Para obter mais informaes, consulte Adicionar texto a um documento na pgina 418. Se voc usar o Microsoft Office 97, no ser possvel importar o contedo a um documento do Word ou do Excel; voc dever inserir um link para documento. Para obter informaes, veja Inserir um link para um documento do Word ou do Excel na pgina 422.
Para inserir um documento do Word ou do Excel em uma pgina da Web nova ou preexistente:
1. 2.
Abra a pgina da Web na qual voc deseja inserir o documento do Word ou do Excel. Certifique-se de estar no modo de visualizao do projeto. Se no estiver, clique no boto Design View (Visualizao do projeto). Siga um dos procedimentos abaixo, para colocar o arquivo:
3.
Arraste o arquivo da sua posio atual para a pgina onde deseja que o contedo aparea. Quando a caixa de dilogo Insert Document (Inserir documento) for exibida, defina as opes e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Selecione File (Arquivo) > Import (Importar) > Word Document (Documento do Word) ou File (Arquivo) > Import (Importar) > Excel Document (Documento do Excel). Na caixa de dilogo Import Document (Importar documento), procure o arquivo que voc deseja adicionar, selecione as opes de formatao na parte inferior da caixa de dilogo e clique em Open (Abrir). As opes de formatao so:
Text Only (Somente texto)
permite inserir texto no formatado. Se o texto original estiver formatado, toda a formatao ser removida.
permite inserir texto que retm a estrutura, mas no retm a formatao bsica. Por exemplo, voc pode colar o texto e reter a estrutura de pargrafos, listas e tabelas, sem reter negrito, itlico e outras formataes.
Text with Structure (Texto com estrutura) Text with Structure Plus Basic Formatting (Texto com estrutura mais formatao bsica) permite inserir texto estruturado e texto com formatao HTML simples (por exemplo, pargrafos e tabelas, bem como texto formatado com as tags b, i, u, strong, em, hr, abbr ou acronym). Text with Structure Plus Full Formatting (Texto com estrutura mais formatao total)
permite inserir texto que retm toda a estrutura, formatao HTML e estilos
CSS.
Clean Up Word Paragraph Spacing (Limpar espaamento entre pargrafos)
permite eliminar o espao extra entre pargrafos ao colar o texto, se voc tiver selecionado Text with Structure (Texto com estrutura) ou Basic Formatting (Formatao bsica). O contedo do documento do Word ou do Excel aparece na sua pgina.
Inserir texto
421
Inserir um link para um documento do Word ou do Excel

possvel inserir um link para um documento do Microsoft Word ou do Microsoft Excel em uma pgina existente.
Para criar um link para um documento do Word ou do Excel:
1. 2.
Abra a pgina onde voc quer que o link aparea. Arraste o arquivo da sua posio atual para a pgina do Dreamweaver, posicionando o link onde voc desejar. A caixa de dilogo Insert Document (Inserir documento) exibida. Selecione Create a Link (Criar um link) e, em seguida, clique em OK. Se o documento para o qual voc est criando um link se localiza fora do site ou na pastaraiz do site, o Dreamweaver solicita que voc copie o documento para a raiz do site. Ao copiar o documento para a pasta-raiz do site, voc garante que o documento estar disponvel quando voc publicar o site.
3. 4.
5.
Ao fazer o upload da sua pgina para o servidor da Web, certifique-se de tambm fazer o upload do arquivo Word ou Excel.
Agora sua pgina contm um link para o documento do Word ou Excel. O texto do link o nome do arquivo vinculado; para alterar o texto do link, consulte Gerenciar links na pgina 479.
Formatar pargrafos e estruturas de documento

Dreamweaver suporta todos os padres da Web usados na formatao de pginas e objetos. Esta seo descreve como formatar pargrafos e como inserir rguas horizontais e datas. Tpicos relacionados Definir propriedades de pgina na pgina 381

Alinhar texto na pgina 423 Recuo de texto na pgina 424 Adicionar espaos entre pargrafos na pgina 424 Utilizar rguas horizontais na pgina 425 Inserir datas na pgina 431
422
Formatar pargrafos
Utilize o menu pop-up Format do Property inspector (Inspetor de propriedades), ou o submenu Text (Texto) > Paragraph Format (Formato do pargrafo) para aplicar as tags de cabealho e pargrafo padro.
Para aplicar uma tag de cabealho ou pargrafo:
1. 2.
Coloque o ponto de insero no pargrafo ou selecione uma parte do texto no pargrafo. No submenu Text (Texto) > Paragraph Format (Formato do pargrafo) ou no menu popup Format (Formato) do Property inspector, escolha uma opo:
Selecione um formato de pargrafo [por exemplo: Heading 1 (Cabealho 1), Heading 2 (Cabealho 2), Preformatted Text (Texto pr-formatado), etc.]. A tag HTML associada ao estilo selecionado (por exemplo: h1 para Cabealho 1, h2 para Cabealho 2, pre para Texto pr-formatado, etc.) ser aplicada ao pargrafo inteiro. Escolha None (Nenhum), para remover um formato de pargrafo.
Quando uma tag de cabealho aplicada a um pargrafo, o Dreamweaver adiciona automaticamente a prxima linha de texto como um pargrafo padro. Para alterar essa definio, escolha Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh) e, em seguida, na categoria General em Editing Options, certifique-se de que a opo Switch to Plain Paragraph after Heading (Alternar para pargrafo simples depois do cabealho) esteja desmarcada.
Alinhar texto
Para alinhar o texto na pgina, use o Property inspector ou o submenu Text > Align. possvel centralizar qualquer elemento em uma pgina utilizando o comando Texto > Alinhar > Centro.
Para alinhar o texto:
1. 2.
Selecione o texto a ser alinhado ou simplesmente insira o indicador no incio do texto. Clique em uma opo de alinhamento - Left, Right ou Center ( esquerda, direita, Centro) - no inspetor Properties ou escolha Text > Align e selecione um comando de alinhamento.
Para centralizar os elementos:

1.
Selecione o elemento (imagem, plug-in, tabela ou outro elemento da pgina) a ser centralizado.
423
2.
Selecione Text (Texto) > Align (Alinhar) > Center (Centro).

N OT A
possvel alinhar e centralizar blocos inteiros de texto, mas impossvel alinhar ou centralizar parte de um cabealho ou de um pargrafo.
Recuo de texto
O uso do comando Indent (Recuo) aplica a tag de HTML blockquote a um pargrafo de texto, recuando o texto nos dois lados da pgina.
Para recuar o texto e remover o recuo:
1. 2.
Coloque o ponto de insero no pargrafo a ser recuado. Clique no boto Indent (Recuo) ou Outdent (Remover o recuo) no Property inspector (Inspetor de propriedades), escolha Text > Indent ou Outdent, ou selecione List > Indent ou Outdent no menu contextual.
NO TA
possvel aplicar vrios recuos a um pargrafo. Cada vez que este comando escolhido, o texto recua mais nos dois lados do documento.
Adicionar espaos entre pargrafos

O Dreamweaver funciona de forma semelhante a vrios aplicativos de processamento de texto: o usurio pressiona Enter (no Windows) ou Return (no Macintosh) para criar um novo pargrafo. Navegadores da Web inserem automaticamente um espao de linha em branco entre os pargrafos. possvel adicionar um espao de uma nica linha entre pargrafos inserindo uma quebra de linha.
Para adicionar um retorno de pargrafo:
Pressione a tecla Enter (no Windows) ou Return (no Macintosh).
Para adicionar uma quebra de linha, siga um dos procedimentos abaixo:

Pressione Shift+Enter (no Windows) ou Shift+Return (no Macintosh). Na categoria Text (Texto) da barra Insert (Inserir), selecione Character (Caractere) e clique no cone Line Break (Quebra de linha). Escolha Insert (Inserir) > HTML > Special Characters (Caracteres especiais) > Line Break (Quebra de linha).
424
Utilizar rguas horizontais

As rguas horizontais (linhas) so teis para organizar informaes. Em uma pgina, o texto e os objetos podem ser separados visualmente por meio de uma ou mais rguas.
Para criar uma rgua horizontal:
1.
Na janela do documento, coloque o ponto de insero onde ser inserida uma rgua horizontal. Siga um dos procedimentos abaixo:

2.
Selecione Insert (Inserir) > HTML > Horizontal Rule (Rgua horizontal). Na categoria HTML da barra Insert, clique no boto Horizontal Rule.
Para modificar uma rgua horizontal:

1. 2.
Na janela do documento, selecione uma rgua horizontal. Escolha Window > Properties para abrir o Property inspector e modifique as propriedades desejadas.
WeH
especificam a largura e a altura da rgua em pixels ou como uma percentagem do tamanho da pgina. o alinhamento da rgua [Default (Padro), Left ( esquerda), Center (Centro), ou Right ( direita)]. Esta definio ser aplicada apenas quando a largura da rgua for menor do que a da janela do navegador.
Align (Alinhar) especifica
Shading (Sombreado) especifica
se a rgua ser desenhada com sombreado. Desmarque esta opo para desenhar a rgua com uma cor slida.
Criar listas com marcadores e listas numeradas

medida que digita na janela do documento, podem ser criadas listas numeradas (ordenadas), listas com marcadores (no-ordenadas) e listas de definies com base em um texto existente ou em um novo texto. As listas de definies no utilizam caracteres esquerda, como marcadores ou nmeros, porm estes so utilizados freqentemente em glossrios ou descries. As listas tambm podem ser aninhadas. Listas aninhadas so listas que contm outras listas. Por exemplo: o usurio poder querer aninhar uma lista ordenada ou com marcadores em uma outra lista numerada ou ordenada.
425
Para obter informaes sobre a definio de um tipo de lista especfico e outras opes de lista para uma lista inteira ou um item de lista especfico (por exemplo: redefinir a numerao, utilizar numerais romanos em uma lista ordenada ou definir marcadores quadrados), veja a caixa de dilogo Setting List Properties (Definir propriedades da lista) na Ajuda de Usando o Dreamweaver.
Para criar uma nova lista:
1.
No documento do Dreamweaver, coloque o ponto de insero onde ser adicionada uma lista e, em seguida, siga um dos procedimentos abaixo:
Clique no boto Bulleted (Lista com marcadores) ou Numbered List (Lista numerada) no Property inspector (Inspetor de propriedades) Escolha Text (Texto) > List (Lista) e selecione o tipo de lista desejado Unordered (bulleted) List [Lista no-ordenada (com marcadores)], Ordered (numbered) List [Lista ordenada (numerada)] ou Definition List (Lista de definies).
O caractere esquerda do item de lista especificado exibido na janela do documento.

2.
Digite o texto do item de lista e, em seguida, pressione Enter (no Windows) ou Return (no Macintosh) para criar um outro item de lista. Para concluir a lista, pressione duas vezes Enter (no Windows) ou Return (no Macintosh).
3.
Para criar uma lista usando texto j existente:

1. 2.
Selecione uma srie de pargrafos para transform-los em uma lista. Clique nos botes Bulleted (Lista com marcadores) ou Numbered List (Lista numerada) no Property inspector (Inspetor de propriedades) ou escolha Text (Texto) > List (Lista) e selecione o tipo de lista desejado: Unordered List (Lista no-ordenada), Ordered List (Lista ordenada) ou Definition List (Lista de definies).
Para criar uma lista aninhada:

1. 2.
Selecione os itens da lista a serem aninhados. Clique no boto Indent (Recuo) no Property inspector, ou escolha Text (Texto) > Indent (Recuo). O Dreamweaver recuar o texto e criar uma lista separada com os atributos HTML da lista original.
3.
Aplique um novo estilo ou tipo de lista ao texto recuado seguindo o mesmo procedimento utilizado acima.
426
Formatao do texto
Voc pode aplicar formatao de texto a um caractere ou a um conjunto de pargrafos e a blocos de texto. Tpicos relacionados Modificar combinaes de fontes na pgina 429

Alterar a cor do texto na pgina 430 Inserir datas na pgina 431 Inserir caracteres especiais na pgina 431 Adicionar espao entre os caracteres na pgina 432 Criar uma nova regra CSS na pgina 436
Definir e alterar fontes e estilos

Utilize opes do Property inspector ou do menu Text (Texto) para definir ou alterar caractersticas da fonte de um texto selecionado. possvel definir o tipo de fonte, o estilo (como negrito ou itlico) e o tamanho.
Para definir ou alterar as caractersticas da fonte:
1.
Selecione o texto. Se nenhum texto for selecionado, a alterao ser aplicada ao texto subseqente que for digitado. Selecione uma dentre as seguintes opes:
2.
Para alterar a fonte, escolha uma combinao de fontes no Property inspector (Inspetor de propriedades) ou no submenu Text (Texto) > Font (Fonte). Escolha Default (Padro) para remover as fontes aplicadas anteriormente; Padro aplica a fonte padro ao texto selecionado (a fonte padro do navegador ou aquela designada para essa tag na folha de estilo CSS).
Para alterar o estilo da fonte, clique em Bold (Negrito) ou Italic (Itlico), no Property inspector, ou escolha um estilo de fonte (negrito, itlico, sublinhado etc.) no submenu Text (Texto) > Style (Estilo).
N O TA
Quando utilizado o Property inspector para aplicar o estilo negrito ou itlico, o Dreamweaver aplica a tag <strong> ou <em>, respectivamente, de modo automtico. Se estiverem sendo criadas pginas para visitantes que possuem navegadores verso 3.0 ou mais antigas, alterar essa preferncia na categoria General (Geral) da caixa de dilogo Preferences (Preferncias) [Edit (Editar) > Preferences (Preferncias)].
Formatao do texto
427
Para alterar o tamanho da fonte, escolha um tamanho (1 a 7) no Property inspector ou no submenu Text > Size. Os tamanhos de fontes HTML so pontos de tamanho relativo e no especfico. Os usurios definem o tamanho do ponto da fonte padro para os seus navegadores. O tamanho da fonte ser visto quando for selecionado Default (Padro) ou 3, no Property inspector ou no submenu Text (Texto) > Size (Tamanho). Os tamanhos 1 e 2 aparecero menores do que o tamanho padro de fonte; os tamanhos 4 a 7 aparecero maiores. Alm 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 padro que o Windows.
DICA
Um modo de garantir a consistncia com o tamanho da fonte utilizar os estilos CSS com o tamanho da sua fonte definido em pixels. Para obter mais informaes sobre as CSS, consulte Utilizar a opo Cascading Style Sheets (Folha de estilo em cascata) para formatar texto na pgina 433.
Para aumentar ou diminuir o tamanho do texto selecionado, escolha um tamanho relativo (+1 a + 4 ou 1 a 3) no Property inspector ou no submenu Text (Texto) > Size Change (Alterar o tamanho).
N OT A
Esses nmeros indicam uma diferena relativa do tamanho da fonte bsica. O valor da fonte bsica padro 3. Portanto, um valor +4 resulta em um tamanho de fonte de 3 + 4 ou seja, 7. A soma mxima de valores de tamanho de fonte 7. Caso tente definir um valor superior, ele ser exibido como 7. O Dreamweaver no exibe a tag basefont (que aparece na seo head), embora o tamanho da fonte deva ser exibido corretamente em um navegador. Para testar esse procedimento, compare textos definidos para 3 e +3.
Renomear um estilo
medida em que voc formata texto, o Dreamweaver acompanha todos os estilos criados por voc em cada pgina, e gera uma biblioteca de estilos que pode ser reutilizada. Isso simplifica consideravelmente a aplicao de uma mesma formatao a um bloco de texto, assim como permite que voc crie um layout mais consistente para as suas pginas.
Para renomear um estilo:
1.
Selecione Rename Style (Renomear estilo) no menu pop-up Style do Property inspector de texto. A caixa de dilogo Rename Style exibida. Selecione o estilo que voc deseja renomear no menu pop-up Rename Style.
2.
428
3. 4.
Digite um novo nome no campo de texto New Name (Novo nome). Clique em OK.
Modificar combinaes de fontes

Utilize o comando Edit Font List (Editar lista de fontes) para definir as combinaes de fontes que aparecem no Property inspector e no submenu Text (Texto) > Font (Fonte). As combinaes de fontes determinam como um navegador exibe o texto na sua pgina da Web. O navegador utiliza a primeira fonte na combinao que estiver instalada no sistema do usurio. Se nenhuma das fontes na combinao estiver instalada, ele exibir o texto conforme a especificao das preferncias do navegador do usurio.
Para modificar as combinaes de fontes:
1. 2.
Escolha Text (Texto) > Font (Fonte) > Edit Font List (Editar lista de fontes). Selecione a combinao de fontes na lista situada no alto da caixa de dilogo. As fontes na combinao selecionada esto relacionadas na lista Chosen Fonts (Fontes escolhidas), no canto inferior esquerdo da caixa de dilogo. direita, h uma lista com todas as fontes disponveis, instaladas no seu sistema.
3.
Para adicionar ou remover fontes de uma combinao de fontes, clique no boto de seta (<< ou >>) entre as listas Chosen Fonts (Fontes escolhidas) e Available Fonts (Fontes disponveis). Para adicionar ou remover uma combinao de fontes, clique nos botes com sinal de adio (+) e de subtrao (), no alto da caixa de dilogo. Para adicionar uma fonte no instalada no sistema, digite o nome da fonte no campo de texto abaixo da lista Available Fonts e clique no boto << para adicionla combinao. A adio de uma fonte no instalada no sistema til, por exemplo, para designar uma fonte especfica do Windows quando o usurio est desenvolvendo pginas em um Macintosh. Para mover a combinao de fontes para cima ou para baixo na lista, clique nos botes de seta, na parte superior da caixa de dilogo.
Para adicionar uma nova combinao a uma lista de fontes:

1. 2.
Escolha Text (Texto) > Font (Fonte) > Edit Font List (Editar lista de fontes). Selecione uma fonte na lista de fontes disponveis e clique no boto << para mover a fonte para a lista Chosen Fonts (Fontes escolhidas).
Formatao do texto
429
3.
Repita a etapa 2 para cada fonte subseqente na combinao. Para adicionar uma fonte no instalada no sistema, digite o nome da fonte no campo de texto abaixo da lista Fontes disponveis e clique no boto << para adicion-la combinao. A adio de uma fonte no instalada no sistema til, por exemplo, para designar uma fonte especfica do Windows quando o usurio est desenvolvendo pginas em um Macintosh.
4.
Ao terminar a seleo das fontes especficas, selecione uma famlia de fontes genrica no menu Available Fonts (Fontes disponveis) e clique no boto <<, para mover a famlia genrica para a lista Chosen Fonts (Fontes escolhidas). As famlias de fontes genricas incluem cursivas, fantasia, monoespaadas, e com e sem serifas. Se nenhuma das fontes na lista Chosen Fonts (Fontes escolhidas) estiver disponvel no sistema do usurio, o texto aparecer na fonte padro associada famlia de fontes genrica. Por exemplo: a fonte monoespaada padro na maioria dos sistemas Courier.
Alterar a cor do texto

possvel alterar a cor do texto selecionado, para que a nova cor anule a cor do texto definida em Page Properties (Propriedades da pgina) (se nenhuma cor tiver sido definida em Page Properties, a cor de texto padro ser preto).
Para alterar a cor do texto:
1. 2.
Selecione o texto. Siga um dos procedimentos abaixo:
Para escolher uma cor na paleta de cores, clique no seletor de cores no Property inspector. Selecione Text (Texto) > Color (Cor). A caixa de dilogo System Color Picker (Seletor de cores do sistema) exibida. Selecione uma cor e clique em OK. Digite o nome da cor ou um nmero hexadecimal diretamente no campo do Property inspector. Para definir a cor padro do texto, utilize o comando Modify (Modificar) > Page Properties (Propriedades da pgina). Veja Definir cores padro para o texto na pgina 386.
Para retornar o texto cor padro:

1. 2.
No Property inspector, clique na caixa de cores para abrir a paleta de cores aceitas pela Web. Clique no boto Strike-through (Riscado) (o boto quadrado branco com uma linha vermelha cortando-o, situado no canto superior direito).
430
Inserir datas
O Dreamweaver fornece um objeto Date (Data) conveniente, que insere a data atual em qualquer formato preferido (com ou sem a hora) e d ao usurio a opo de atualizar a data sempre que o arquivo for salvo.
NO TA
As datas e horas mostradas na caixa de dilogo Inserir data no representam a data atual nem refletem as datas/horas vistas por um visitante quando ele exibe o seu site. Estes so apenas exemplos da maneira de mostrar essas informaes.
Para inserir a data atual em um documento:

1. 2.
Na janela do documento, coloque o ponto de insero onde deseja inserir a data. Siga um dos procedimentos abaixo:

Selecione Insert (Inserir) > Date (Data). Na categoria Common da barra Insert, clique no cone Date.
3.
Na caixa de dilogo que aparecer, selecione os formatos para o nome do dia da semana, a data e a hora. Para que a hora inserida seja atualizada sempre que o documento for salvo, selecione Update Automatically on Save (Atualizar automaticamente ao salvar). Para transformar a data em texto simples, quando for inserida, e nunca atualiz-la automaticamente, desmarque esta opo. Clique em OK para inserir a data.
DICA
4.
5.
Se for escolhida a opo Update Automatically on Save (Atualizar automaticamente ao salvar), possvel editar o formato da data aps ter sido inserida no documento, atravs do clique no texto formatado e da seleo de Edit Date Format (Editar formato da data), no Property inspector.
Inserir caracteres especiais

Alguns caracteres especiais so representados em HTML por um nome ou nmero, referenciado como uma entidade. O HTML inclui nomes de entidades para caracteres como smbolo de copyright (©), o "e" comercial (&) e o smbolo de marca registrada (®). Cada entidade contm um nome (por exemplo: —) e um equivalente numrico (por exemplo: ).
DICA
O HTML utiliza chaves <> no seu cdigo, mas talvez seja necessrio expressar os caracteres especiais correspondentes a maior ou menor do que, sem que o Dreamweaver os interprete como cdigo. Nesse caso, utilizar > para maior do que (>) e ⁢ para menor do que (<).
Formatao do texto
431
Infelizmente, muitos navegadores (especialmente, os mais antigos e aqueles diferentes do Navigator e Internet Explorer) no exibem corretamente muitas das entidades denominadas.
Para inserir um caractere especial em um documento:
1.
Na janela do documento, coloque o ponto de insero onde o caractere especial dever ser inserido. Siga um dos procedimentos abaixo:

2.
Escolha o nome do caractere no submenu Insert > HTML > Special Characters. Na categoria Text da barra Insert, clique no boto Characters e selecione o caractere desejado.
DICA
H muitos outros caracteres especiais disponveis; para selecionar um deles, selecione Insert > HTML > Special Characters > Other ou selecione a categoria HTML na barra Insert, clique no menu Characters e selecione Other Characters. Selecione um caractere na caixa de dilogo Insert Other Character (Inserir outro caractere) e clique em OK.
Adicionar espao entre os caracteres

O HTML s permite um espao entre caracteres. Para adicionar espao adicional em um documento, necessrio inserir um espao no-separvel. possvel definir uma preferncia para adicionar automaticamente espaos no-separveis em um documento.
Para inserir um espao no-separvel, siga um dos procedimentos abaixo:
Na categoria HTML da barra Insert, clique no boto Characters e selecione Insert Non-breaking Space (Inserir espao no-separvel). Escolha Insert > HTML > Special Characters >Non-Breaking Space. Pressione Control+Shift+Barra de espao (Windows) ou Option+Barra de espao (Macintosh).
Para definir uma preferncia para adicionar espaos no-separveis:

1. 2.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). Na categoria General, certifique-se de que Allow Multiple Consecutive Spaces (Permitir espaos consecutivos mltiplos) est selecionada.
432
Utilizar a opo Cascading Style Sheets (Folha de estilo em cascata) para formatar texto
Por padro, o Dreamweaver utiliza CSS ao formatar texto. Os estilos que voc aplica a texto usando o Property inspector ou comandos de menu criam regras CSS que so incorporadas ao cabealho do documento atual. Os estilos CSS fornecem maior flexibilidade e controle sobre a aparncia da pgina, desde o posicionamento preciso do layout at fontes especficas e estilos de texto. Tambm possvel utilizar o painel CSS Styles (Estilos CSS) para criar e editar regras CSS e propriedades. O painel CSS Styles um editor muito mais avanado do que o Property inspector (Inspetor de propriedades) e exibe todas as regras CSS definidas para o documento atual, estando essas regras incorporadas na seo head do documento ou em uma folha de estilos externa. A Macromedia recomenda a utilizao do painel CSS Styles (em vez do Property inspector) como ferramenta principal para criar e editar o CSS. Como conseqncia, seu cdigo ser mais limpo e mais fcil de manter. Alm dos estilos e das folhas de estilos criadas, possvel utilizar folhas de estilo que acompanham o Dreamweaver para aplicar estilos aos documentos. Consulte Criar um documento com base em um arquivo de projeto do Dreamweaver na pgina 103.
Utilizar o painel CSS Styles (Estilos CSS)

Voc pode utilizar o painel CSS Styles para visualizar, criar, editar e remover estilos CSS, assim como para anexar folhas de estilo externas a documentos. (Para obter uma viso geral deste painel, consulte Utilizar o painel CSS Styles na pgina 414.)
Para abrir o painel CSS Styles

Selecione Window (Janela) > CSS Styles (Estilos CSS). Pressione Shift+F11. Clique no boto CSS no Property inspector (Inspetor de propriedades).
Para editar uma regra no painel CSS Styles (modo Current [Atual]):
1. 2.
Clique no boto Current na parte superior do painel CSS Styles. Selecione um elemento de texto na pgina atual para que suas propriedades sejam exibidas.
433
3.
Siga um dos procedimentos abaixo: Clique duas vezes em uma propriedade no painel Summary for Selection (Resumo para seleo) para exibir a caixa de dilogo CSS Rule Definition (Definio de regra CSS) e depois faa as alteraes. Selecione uma propriedade no painel Summary for Selection e edite a propriedade no painel (Propriedades) que se encontra abaixo. Selecione uma regra no painel Rules (Regras) e depois edite as propriedades da regra no painel Properties apresentado abaixo.
NO T A
possvel alterar o comportamento de duplo clique para editar CSS, bem como outros comportamentos, alterando as preferncias do Dreamweaver. Para obter mais informaes, consulte Definir as preferncias de estilos CSS.
Para editar uma regra no painel CSS Styles (modo All):

1. 2.
Clique no boto All (Tudo) na parte superior do painel CSS Styles. Siga um dos procedimentos abaixo: Clique duas vezes em uma regra no painel All Rules (Todas as regras) para exibir a caixa de dilogo CSS Rule Definition e depois faa as alteraes. Selecione uma regra no painel All Rules e depois edite as propriedades da regra no painel Properties apresentado abaixo. Selecione uma regra no painel All Rules e clique no boto Edit Style (Editar estilo), localizado no canto inferior direito do painel CSS Styles.
N OT A N OT A
possvel alterar o comportamento de duplo clique para editar CSS, bem como outros comportamentos, alterando as preferncias do Dreamweaver. Para obter mais informaes, consulte Definir as preferncias de estilos CSS.
Para adicionar uma propriedade a uma regra:
1.
Selecione uma regra no painel All Rules (modo All) ou selecione uma propriedade no painel Summary for Selection (Resumo para seleo) (modo Current). Siga um dos procedimentos abaixo: Se a visualizao Show Only Set Properties (Mostrar apenas as propriedades definidas) estiver selecionada no painel Properties, clique no link Add Properties (Adicionar propriedades) e adicione uma propriedade.
2.
434
Se a visualizao Category (Por categorias) ou a visualizao List (Por lista) estiver selecionada no painel Properties, preencha um valor para a propriedade que voc deseja adicionar.
Nos modos All e Current, o painel CSS Styles contm trs botes que permitem alterar a visualizao no painel Properties (painel inferior):
Visualizao Category
Visualizao Set Properties Visualizao List
divide as propriedades CSS suportadas pelo Dreamweaver em oito categorias: font (fonte), background (fundo), block (bloco), border (borda), box (caixa), list (lista), positioning (posicionamento) e extensions (extenses). As propriedades de cada categoria encontram-se em uma lista que pode ser aberta ou fechada clicando-se no boto com o sinal de adio (+) prximo ao nome da categoria. As propriedades definidas so mostradas (em azul) na parte superior da lista.
A visualizao Category (Por categorias) A visualizao List (Por lista) exibe todas as propriedades CSS suportadas pelo Dreamweaver
em ordem alfabtica. As propriedades definidas so mostradas (em azul) na parte superior da lista.
A visualizao Set Properties (Propriedades definidas)
exibe apenas as propriedades que
foram definidas. A visualizao Set Properties o padro. Nos modos All e Current, o painel CSS Styles tambm contm os seguintes botes:
Attach Style Sheet New CSS Rule
Delete CSS Rule Edit Style
O boto Attach Style Sheet (Anexar a folha de estilo) abre a caixa de dilogo Link External Style Sheet (Vincular a folha de estilo externa). Selecione uma folha de estilo externa para vincular ou importar para o documento atual. Para obter informaes sobre como anexar uma folha de estilo externa, veja Vincular ou importar uma folha de estilo CSS externa na pgina 439. O boto New CSS Rule (Nova regra CSS) abre uma caixa de dilogo na qual possvel 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 mais informaes, consulte Criar uma nova regra CSS na pgina 436.
435
O boto Edit Style (Editar estilo) abre uma caixa de dilogo na qual possvel editar os estilos do documento atual ou de uma folha de estilos externa. Para obter informaes sobre como atualizar uma folha de estilo, consulte Editar uma regra CSS na pgina 441. O boto Delete CSS Rule (Excluir a regra CSS) remove a regra ou propriedade selecionada do painel CSS Styles e remove a formatao de qualquer elemento ao qual o estilo tenha sido aplicado. (No entanto, ele no remove as referncias a esse estilo).
D IC A

Clique com o boto direito (Windows) ou clique mantendo a tecla Control pressionada (Macintosh) no painel CSS Styles para abrir um menu contextual de opes para trabalhar com comandos de folhas de estilos CSS.
Tpicos relacionados Aplicar um estilo de classe na pgina 437 Vincular ou importar uma folha de estilo CSS externa na pgina 439 Editar uma folha de estilo CSS na pgina 441
Criar uma nova regra CSS

possvel criar uma regra CSS para automatizar a formatao das tags HTML ou uma faixa de texto identificada por um atributo class.
Para criar uma nova regra CSS:
1.
Coloque o ponto de insero no documento e siga um dos procedimentos abaixo para abrir a caixa de dilogo New CSS Rule (Nova regra CSS):
No painel CSS Styles (Window [Janela] > CSS Styles [Estilos CSS]), clique no boto New CSS Rule (+), localizado no lado inferior direito do painel. Escolha Text (Texto) > CSS Styles (Estilos CSS) > New CSS Rule (Nova regra CSS). Para criar um estilo personalizado que possa ser aplicado como um atributo class a uma faixa ou bloco de texto, selecione a opo Class (Classe) e digite um nome para o estilo na caixa de texto Name (Nome).
N O TA
2.
Defina o tipo de estilo CSS que deseja criar:
Os nomes de classe devem ser precedidos de um ponto, podendo conter qualquer combinao de letras e nmeros (por exemplo, .myhead1). Caso o ponto no seja inserido, o Dreamweaver o digitar automaticamente.
Para redefinir a formatao padro de uma HTML especfica, selecione a opo Tag e depois digite uma tag HTML na caixa de texto Tag ou selecione uma no menu pop-up.
436
Para definir a formatao de determinada combinao de tags ou de todas as tags que contenham um atributo Id especfico, selecione a opo Advanced (Avanado) e depois digite uma ou mais tags na caixa de texto Selector (Seletor) ou selecione uma no menu pop-up. Os seletores disponveis no menu pop-up so a:active, a:hover, a:link e a:visited. Para criar uma folha de estilo externa, escolha New Style Sheet File (Novo arquivo de folha de estilo). Para incorporar o estilo no documento atual, escolha This Document Only.
3.
Selecione o local onde o estilo ser definido:
4.
Clique em OK. A caixa de dilogo Style Definition (Definio do estilo) exibida. Escolha as opes de estilo a serem definidas para a nova regra CSS. Ao concluir a definio de atributos de estilo, clique em OK.
5. 6.
Para obter informaes sobre definies de estilo CSS especficas, consulte os seguintes tpicos em Usando o Dreamweaver:

Definir propriedades do tipo CSS Definir propriedades de fundo do estilo CSS Definir propriedades de bloco do estilo CSS Definir propriedades de caixa do estilo CSS Definir propriedades de borda do estilo CSS Definir propriedades de lista do estilo CSS Definir propriedades de posicionamento do estilo CSS Definir propriedades de extenses do estilo CSS
Tpicos relacionados Utilizar o painel CSS Styles (Estilos CSS) na pgina 433

Aplicar um estilo de classe na pgina 437 Editar uma regra CSS na pgina 441
Aplicar um estilo de classe

Os estilos de classe so o nico tipo de estilo CSS que pode ser aplicado a qualquer texto em um documento, sem levar em considerao as tags que o controlam. Todos estilos de classe associados ao documento atual so exibidos no painel CSS Styles (Estilos CSS) (com um ponto antes do nome), e no menu pop-up Style do Property inspector de texto.
437
A maioria dos estilos atualizados exibida de imediato, mas necessrio visualizar a pgina em um navegador para verificar se um estilo foi aplicado conforme esperado. Se dois ou mais estilos forem aplicados ao mesmo texto, poder ocorrer conflito e os resultados podero ser inesperados. Para obter mais informaes, consulte Regras CSS conflitantes na pgina 410.
DICA
Ao visualizar estilos definidos em uma folha de estilo CSS externa, certifique-se de salvar a folha de estilo para assegurar que suas alteraes sejam refletidas quando visualizar a pgina em um navegador.
Para aplicar um estilo CSS personalizado:

1.
No documento, selecione o texto ao qual ser aplicado um estilo CSS. Coloque o ponto de insero em um pargrafo, para aplicar o estilo ao pargrafo inteiro. Se for selecionada uma faixa de texto em um nico pargrafo, 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, siga um dos procedimentos abaixo:
No painel CSS Styles (Window [Janela] > CSS Styles), selecione o modo All (Tudo), clique com o boto direito no nome do estilo que deseja aplicar e selecione Apply (Aplicar) no menu de contexto. No Property inspector de texto, selecione o estilo de classe que deseja aplicar no menu pop-up Style. Na janela do documento, clique com o boto direito (Windows) ou clique mantendo pressionada a tecla Control (Macintosh) sobre o texto selecionado e, no menu contextual, escolha CSS Styles e selecione o estilo desejado. Selecione Text > CSS Styles e selecione o estilo desejado no submenu.
Para remover um estilo personalizado de uma seleo:

1. 2.
Selecione o objeto ou texto do qual voc deseja remover o estilo. No Property inspector de texto (Window > Properties [Propriedades]), selecione None (Nenhum) no menu pop-up Style.
Tpicos relacionados

CSS (Cascading Style Sheets) na pgina 408 Utilizar o painel CSS Styles na pgina 414 Editar uma regra CSS na pgina 441
438
Exportar estilos para criar uma folha de estilo CSS

Os estilos de um documento podem ser exportados para criar uma nova folha de estilo CSS. Em seguida, ela pode ser vinculada a outros documentos, para que os estilos sejam aplicados.
Para exportar os estilos CSS de um documento e criar uma folha de estilo CSS:
1.
Selecione File > Export > CSS Styles ou Text > CSS Styles > Export. A caixa de dilogo Export Styles as CSS File (Exportar os estilos como um arquivo CSS) exibida.
2.
Digite um nome para a folha de estilo e clique em Save (Salvar). O estilo ser salvo como uma folha de estilo CSS.

Editar uma folha de estilo CSS na pgina 441 Utilizar folhas de estilo Design-Time na pgina 442
Vincular ou importar uma folha de estilo CSS externa

Quando uma folha de estilo CSS externa for editada, todos os documentos a ela vinculados sero atualizados com essas alteraes. possvel exportar os estilos CSS de um documento para criar uma nova folha de estilo CSS e, em seguida, anexar ou vincular a uma folha de estilo externa, a fim de aplicar os estilos nela contidos. Voc pode, obviamente, anexar s suas pginas qualquer estilos qualquer folha de estilo criada ou copiada para o seu site. Alm disso, o Dreamweaver dispe de folhas de estilo predefinidas, que podem ser automaticamente movidas para o seu site e anexadas s suas pginas. Para obter informaes sobre como usar as folhas de estilos de projeto includas no Dreamweaver, consulte Criar um documento com base em um arquivo de projeto do Dreamweaver na pgina 103. Para obter informaes sobre como aplicar um estilo, consulte Aplicar um estilo de classe na pgina 437.
Para vincular ou importar uma folha de estilo CSS externa:
1.
Abra o painel CSS Styles (Estilos CSS) seguindo um dos procedimentos abaixo:

Selecione Window (Janela) > CSS Styles (Estilos CSS). Pressione Shift + F11.
439
2.
No painel CSS Styles (Estilos CSS), clique no boto Attach Style Sheet (Anexar folha de estilo). (Ele est no canto inferior direito do painel.) Preencha a caixa de dilogo e clique em OK. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo.
3.

Exportar estilos para criar uma folha de estilo CSS na pgina 439 Editar uma folha de estilo CSS na pgina 441
Usar as folhas de estilo de amostra do Dreamweaver

O Dreamweaver fornece folhas de estilo de amostra que voc pode aplicar s suas pginas ou usar como pontos de partida para desenvolver seus prprios estilos.
Para aplicar folhas de estilo do Dreamweaver:
1.
Abra o painel CSS Styles (Estilos CSS) seguindo um dos procedimentos abaixo:

Selecione Window (Janela) > CSS Styles (Estilos CSS). Pressione Shift+F11.
2.
No painel CSS Styles (Estilos CSS), clique no boto Attach External Style Sheet (Anexar folha de estilo externa). (Ele est no canto inferior direito do painel.) Na caixa de dilogo Attach External Style Sheet, clique em Sample Style Sheets (Amostras de folhas de estilo). Na caixa de dilogo Sample Style Sheets, selecione uma folha de estilo na caixa de lista. Quando voc seleciona folhas de estilo na caixa de lista, o painel Preview (Visualizar) exibe a formatao de texto e de cores da folha de estilo selecionada.
3.
4.
5.
Clique no boto Preview (Visualizar) para aplicar a folha de estilo e verificar se ela emprega os estilos desejados na pgina atual. Se no estiver satisfeito com os estilos aplicados, selecione outra folha de estilo na lista e clique em Preview (Visualizar) para ver esses estilos.
6.
Por padro, o Dreamweaver salva a folhas de estilo em uma pasta chamada CSS, logo abaixo da raiz do site que voc definiu na sua pgina. Se essa pasta no existir, ela ser criada pelo Dreamweaver. Para salvar o arquivo em outro local, clique em Browse (Procurar) e localize a pasta desejada. Quando encontrar uma folha de estilo cujas regras de formatao atendam aos seus critrios de design, clique em OK.
7.
440
Editar uma regra CSS

possvel editar facilmente as regras internas e externas aplicadas a um documento. Quando uma folha de estilo CSS que controla o texto no documento for editada, o texto inteiro controlado por essa folha de estilo CSS ser reformatado instantaneamente. As edies em uma folha de estilo externa afetam todos os documentos vinculados a ela. possvel definir um editor externo para editar folhas de estilo. Para obter informaes sobre como configurar um editor externo, consulte Iniciar um editor de arquivos de mdia externo na pgina 521.
Para editar uma regra CSS:
1. 2. 3.
Abra o painel CSS Styles (Estilos CSS) selecionando Window (Janela) > CSS Styles. Posicione o cursor no texto cuja regra CSS deseja editar. Utilize o painel CSS Styles para editar a regra. Para obter instrues, consulte Utilizar o painel CSS Styles (Estilos CSS) na pgina 433. As alteraes que voc fizer sero automaticamente aplicadas ao documento atual, permitindo que voc visualize suas alteraes medida que elas so feitas. Se estiver editando regras armazenadas em uma folha de estilo externa, certifique-se de salvar suas alteraes para ver suas atualizaes aplicadas. Se modificar regras CSS que se encontram em uma folha de estilo usada por mais de um documento, as modificaes sero refletidas tambm nessas pginas.
Tpicos relacionados Utilizar folhas de estilo Design-Time na pgina 442
Editar uma folha de estilo CSS

Uma folha de estilo CSS costuma incluir um ou mais regras. Voc pode editar uma regra individual em uma folha de estilo CSS utilizando o painel CSS Styles (Estilos CSS) (consulte Editar uma regra CSS na pgina 441) ou, caso prefira, trabalhando diretamente na folha de estilo CSS.
Para editar uma folha de estilo CSS:
1. 2.
No painel CSS Styles (Window [Janela]> CSS Styles), selecione o modo All (Tudo). No painel All Rules (Todas as regras), clique duas vezes no nome da folha de estilo que deseja editar. Na janela do documento, modifique a folha de estilo como desejar e depois salve-a.
3.
441
Editar uma regra CSS na pgina 441
Atualizar folhas de estilo CSS em um site do Contribute

Os usurios do Macromedia Contribute no podem efetuar alteraes em uma folha de estilo CSS Para modificar uma folha de estilo para um site do Contribute, use o Dreamweaver. Os fatores a seguir so importantes e devem ser levados em considerao ao atualizar folhas de estilo para um site do Contribute :
Se forem feitas alteraes em uma folha de estilo enquanto um usurio do Contribute estiver editando uma folha de estilo, o usurio no poder visualizar as alteraes feitas na folha de estilo at que sejam publicadas na pgina. Se um estilo for excludo de uma folha de estilo, o nome do estilo no ser excludo da pgina que utiliza aquela folha de estilo, mas uma vez que o estilo no existe mais, no ser exibido da forma que o usurio do Contribute esperava. Portanto, se nada acontecer ao ser aplicado um estilo em especial, o problema pode ser o estilo que no foi excludo da folha de estilo.
Para editar uma folha de estilo CSS em um site do Contribute:

1.
Edite a folha de estilo utilizando as ferramentas de edio de folha de estilo do Dreamweaver. Para obter mais informaes, consulte Utilizar a opo Cascading Style Sheets (Folha de estilo em cascata) para formatar texto na pgina 433. Informe a todos os usurios do Contribute que esto trabalhando no site para publicar as pginas que utilizam aquela folha de estilo, e editar novamente as pginas para visualizar a nova folha de estilo.
2.
Utilizar folhas de estilo Design-Time

As folhas de estilos Design-Time (Tempo de design) permitem mostrar ou ocultar o design aplicado por uma folha de estilo CSS, medida que voc trabalha em um documento do Dreamweaver. Por exemplo: voc pode usar essa opo para incluir ou excluir o efeito de uma folha de estilo apenas do Macintosh ou apenas do Windows, durante a criao da pgina. Essas folhas de estilos so vlidas apenas ao trabalhar no documento do Dreamweaver. Quando a pgina exibida em uma janela do navegador, apenas os estilos anexados ou incorporados no documento so exibidos.
442
Para mostrar ou ocultar uma folha de estilo CSS para tempo de projeto:
1.
Siga um destes procedimentos para abrir a caixa de dilogo Design-Time Style Definition (Definio de estilo de tempo de projeto):
Clique com o boto direito do mouse no painel CSS Styles e selecione Design-time no menu de contexto. Selecione Text > CSS Styles > Design-time.
2.
Na caixa de dilogo, defina as opes para mostrar ou ocultar uma folha de estilo selecionada.
Para exibir uma folha de estilo CSS em tempo de projeto, clique no boto de adio (+) acima de Show Only at Design Time (Mostrar apenas em tempo de projeto) e, em seguida, na caixa de dilogo Select a Style Sheet (Selecionar uma folha de estilo), localize a folha de estilo CSS desejada. Para exibir uma folha de estilo CSS em tempo de projeto, clique no boto de adio (+) acima de Hide at Design Time (Ocultar em tempo de projeto) e, em seguida, localize a folha de estilo CSS desejada na caixa de dilogo Select a Style Sheet. Para remover uma folha de estilo de uma das listas, clique na folha de estilo a ser removida e, em seguida, clique no boto de subtrao () apropriado.
3.
Clique em OK para fechar a caixa de dilogo.
O painel CSS Styles (Estilos CSS) atualizado com o nome da folha de estilo selecionada junto com um indicador, oculto ou design, para refletir o status da folha de estilo. Tpicos relacionados Utilizar o painel CSS Styles (Estilos CSS) na pgina 433

Exportar estilos para criar uma folha de estilo CSS na pgina 439 Vincular ou importar uma folha de estilo CSS externa na pgina 439 Editar uma folha de estilo CSS na pgina 441
Verificar a ortografia
Utilize o comando Check Spelling (Verificar ortografia) no menu Text para verificar a ortografia do documento atual. Esse comando ignora as tags HTML e valores de atributos.
Verificar a ortografia
443
Como padro, a verificao ortogrfica utiliza o dicionrio ortogrfico de ingls dos EUA. Para alterar o dicionrio, selecione Edit > Preferences > General (Windows) ou Dreamweaver > Preferences > General (Macintosh) e, em seguida, no menu pop-up Spelling Dictionary (Dicionrio ortogrfico), selecione o dicionrio desejado. Para fazer download de dicionrios para idiomas adicionais, visite o Centro de Suporte do Dreamweaver, em www.macromedia.com/support/dreamweaver.
Para verificar e corrigir a ortografia:
1.
Escolha Text (Texto) > Check Spelling (Verificar ortografia) ou pressione Shift+F7. Quando o Dreamweaver encontra uma palavra no reconhecida, a caixa de dilogo Check Spelling (Verificar ortografia) exibida.
2.
Selecione a opo adequada com base em como voc deseja lidar com essa discrepncia.
Procurar e substituir texto

Voc pode usar o comando Find and Replace (Localizar e substituir) para procurar por texto e tags HTML e atributos em um documento ou em um conjunto de documentos.
N OT A
Para procurar por arquivos em um site, usam-se comandos distintos: Locate in Local Site (Procurar no site local) and Locate in Remote Site (Procurar no site remoto).
Para procurar texto e/ou HTML nos documentos:

1.
Abra o documento no qual deseja fazer a busca, ou selecione documentos ou uma pasta no painel Files (Arquivos). Selecione Edit > Find e Replace. A caixa de dilogo Find and Replace exibida. Especifique os arquivos nos quais deseja fazer a busca e, em seguida, especifique o tipo de busca a ser executada, bem como o texto e as tags a serem procurados. Como alternativa, especifique tambm o texto de substituio. Em seguida, clique em um dos botes Find (Localizar) ou Replace (Substituir). Para obter mais informaes, clique no boto Help (Ajuda). Ao terminar, clique no boto Close (Fechar) para fechar a caixa de dilogo.
2.
3.
4.
Para fazer uma nova busca sem exibir a caixa de dilogo Find and Replace:
Pressione F3 (no Windows) ou Command+G (no Macintosh).
444
CAPTULO 14
Inserir imagens
No Macromedia Dreamweaver 8, possvel trabalhar na visualizao de projeto ou de cdigo para inserir imagens em um documento. Ao adicionar imagens em um documento do Dreamweaver, possvel definir ou modificar propriedades da imagem e exibir as alteraes diretamente na janela do documento. Para mais eficincia no fluxo de trabalho de criao da Web, voc pode selecionar uma preferncia de editor de imagens para inici-lo automaticamente para editar imagens ao trabalhar no Dreamweaver. Este captulo contm as seguintes sees:
Sobre as imagens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445 Inserir uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .448 Redimensionar uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .453 Cortar uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454 Usar o Fireworks para otimizar uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455 Ajustar o brilho e o contraste de uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .456 Definir a nitidez de uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .456 Criar uma imagem cambivel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .457 Usar um editor de imagens externo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .458 Aplicar comportamentos a imagens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459
14
Sobre as imagens
Existem muitos tipos diferentes de formatos de arquivos grficos, mas trs formatos so geralmente utilizados nas pginas da Web: GIF, JPEG e PNG. Atualmente, os formatos de arquivo GIF e JPEG so os que apresentam melhor suporte e podem ser exibidos na maioria dos navegadores.
445
Os arquivos PNG adaptam-se melhor a quase todos os tipos de imagens grficas da Web devido a sua flexibilidade e pequeno tamanho de arquivo, entretanto, a exibio de imagens PNG conta com suporte parcial apenas no Microsoft Internet Explorer (navegadores 4.0 e posteriores) e no Netscape Navigator (navegadores 4.04 e posteriores). Portanto, a menos que seu projeto se destine a um pblico-alvo especfico que utiliza um navegador com suporte para o formato PNG, utilize os formatos GIF ou JPEG para atingir um pblico maior. Os arquivos GIF (Graphic Interchange Format) utilizam um mximo de 256 cores e so mais apropriados para exibir imagens em tons descontnuos ou aquelas que contm grandes superfcies de cores slidas, como barras de navegao, botes, cones, logotipos ou outras imagens com matizes e cores uniformes, por exemplo). O formato de arquivo JPEG (Joint Photographic Experts Group) a opo mais avanada para imagens fotogrficas ou de tons contnuos, porque os arquivos JPEG podem conter milhes de cores. medida que a qualidade do arquivo JPEG aumenta, tambm aumentam o tamanho do arquivo e o tempo de download. Geralmente possvel equilibrar a qualidade da imagem e o tamanho do arquivo, compactando um arquivo JPEG. O formato de arquivo PNG (Portable Network Group) um substituto do GIF, no patenteado, que inclui suporte para imagens com cores indexadas, escala de cinza e True Color, alm de suporte ao canal alfa para transparncia. O PNG o formato de arquivo nativo do Macromedia Fireworks. Os arquivos PNG renem todas as informaes originais sobre camadas, vetores, cores e efeitos (como sombreamento), e todos os elementos so inteiramente editveis todas as vezes. Os arquivos devem ter extenso .png para serem reconhecidos como arquivos PNG pelo Macromedia Dreamweaver MX.
Editar imagens no Dreamweaver

O Dreamweaver fornece recursos bsicos de edio de imagens que permitem modificar imagens sem utilizar um aplicativo externo de edio de imagens, como o Macromedia Fireworks. As ferramentas de edio de imagens do Dreamweaver foram elaboradas para facilitar a tarefa dos designers de contedo responsveis pela criao de arquivos de imagem para uso nos sites da Web.
N OT A 446
No preciso ter o Macromedia Fireworks instalado no seu computador para usar os recursos de edio de imagem do Dreamweaver.
O Dreamweaver possui os seguintes recursos de edio de imagem:
Captulo 14: Inserir imagens
Image resampling (Reamostragem de imagens)
adiciona ou subtrai pixels de arquivos de imagem JPEG e GIF redimensionados, de modo a refletir o melhor possvel a imagem original. A reamostragem de uma imagem reduz o tamanho do arquivo de imagem, resultando em um melhor desempenho de download. Ao redimensionar uma imagem no Dreamweaver, voc pode fazer uma reamostragem da imagem para refletir suas novas dimenses. Ao fazer uma reamostragem de um objeto de bitmap, pixels so adicionados ou removidos da imagem para torn-la maior ou menor. A reamostragem de uma imagem para uma resoluo maior geralmente gera uma pequena perda de qualidade. Entretanto, a reamostragem para uma resoluo menor sempre gera perda de dados e geralmente queda na qualidade.
Cropping (Corte) permite editar imagens reduzindo a rea da imagem. Geralmente, voc desejar cortar uma imagem para enfatizar o assunto da imagem e remover aspectos indesejveis prximos ao centro de interesse na imagem. Brightness/Contrast (Brilho/Contraste):
modifica o brilho ou contraste de pixels em uma imagem. Esse recurso afeta os realces, sombreamentos e meios-tons de uma imagem. Normalmente, os recursos de brilho/contraste so utilizados na correo de imagens que esto muito escuras ou muito claras.
ajusta o foco de uma imagem para aumentar o contraste das bordas localizadas dentro da imagem. Ao digitalizar uma imagem ou tirar uma foto digital, a ao padro em muitos softwares de captura de imagem suavizar as bordas dos objetos na imagem. Isso evita que detalhes mais delicados se percam nos pixels que compem as imagens digitais. Entretanto, para realar os detalhes em arquivos de imagens digitais, em geral necessrio melhorar a nitidez da imagem, aumentando o contraste da borda e tornando a imagem mais ntida.
Sharpening (Nitidez)
NO T A

Os recursos de edio de imagem do Dreamweaver se aplicam somente aos formatos de arquivo de imagem JPEG e GIF. Outros formatos de arquivo de imagem de bitmap no podem ser editados com esses recursos de edio de imagem.
Tpicos relacionados Redimensionar uma imagem na pgina 453 Cortar uma imagem na pgina 454 Ajustar o brilho e o contraste de uma imagem na pgina 456 Definir a nitidez de uma imagem na pgina 456
Sobre as imagens
447
Inserir uma imagem

Ao inserir uma imagem em um documento do Dreamweaver, o programa gerar automaticamente uma referncia a esse arquivo de imagem no cdigo-fonte HTML. Para garantir que essa referncia esteja correta, o arquivo de imagem dever estar no site. Caso no esteja no site atual, o Dreamweaver perguntar se o arquivo deve ser copiado para o site. possvel inserir imagens dinamicamente. As imagens dinmicas so aquelas que se alteram com freqncia. Por exemplo, sistemas de rotao de propagandas precisam selecionar aleatoriamente uma nica propaganda a partir de uma lista de propagandas potenciais e, em seguida, exibir dinamicamente a imagem da propaganda quando uma pgina solicitada. Para obter mais informaes, consulte Tornar dinmicas as imagens na pgina 785.
Para inserir uma imagem:
1.
Posicione o ponto de insero onde a imagem dever ser exibida na janela do documento e siga um dos procedimentos abaixo:
Na categoria Common (Comuns) da barra Insert (Inserir), clique no cone Image (Imagem). Na categoria Common (Comuns) da barra Insert (Inserir), arraste o cone Image (Imagem) para a janela do documento (ou para a janela de visualizao do cdigo se estiver trabalhando no cdigo). Selecione Insert (Inserir) > Image (Imagem). Arraste uma imagem do painel Assets (Propriedades), aberto a partir da seleo de Window (Janela) > Assets (Propriedades), at a localizao desejada na janela do documento e prossiga para a etapa 3. Arraste uma imagem do painel Site at o local desejado na janela do documento e v para a etapa 3. Arraste uma imagem da rea de trabalho at o local desejado na janela do documento e v para a etapa 3. Selecione File System (Sistema de arquivos) para escolher um arquivo grfico. Selecione Data Source (Fonte de dados) para escolher uma fonte de imagem dinmica.
2.
Na caixa de dilogo exibida, siga um dos procedimentos abaixo:

3.
Procure a imagem ou origem do contedo a ser inserido. Se voc estiver trabalhando em um documento que no foi salvo, o Dreamweaver ir gerar uma referncia file:// para esse arquivo de imagem. Quando voc salva o documento em um local qualquer do site, o Dreamweaver converte a referncia em um caminho relativo ao documento. Clique no boto Help (Ajuda) na caixa de dilogo para aprender sobre as opes da caixa de dilogo.
448
4.
Clique em OK. A caixa de dilogo Image Tag Accessibility Attributes (Atributos de acessibilidade da tag de imagem) exibida se a caixa de dilogo tiver sido ativada em Preferences (Preferncias) (consulte Otimizar a rea de trabalho para o projeto de pgina acessvel na pgina 76).
5.
Digite valores nas caixas de texto Alternate text (Texto alternativo) e Long Description (Descrio longa) e clique em OK.
NO TA N OT A
possvel inserir informaes uma ou em ambas as caixas de texto, conforme a necessidade.
Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. A imagem exibida no documento.
Ao clicar em Cancel (Cancelar), a imagem exibida no documento, mas o Dreamweaver no associa tags de acessibilidade a ele.
6.
No Property inspector (Window > Properties), defina as propriedades da imagem. Para obter mais informaes, consulte Definir propriedades da imagem na Usando o Dreamweaver. Para editar atributos de acessibilidade para a imagem, consulte Editar atributos de acessibilidade para uma imagem na pgina 449.
Tpicos relacionados Definir uma imagem de fundo ou uma cor de fundo para a pgina na pgina 383
Utilizar imagens espaadoras na pgina 300
Editar atributos de acessibilidade para uma imagem

Se voc tiver inserido atributos de acessibilidade para uma imagem (consulte Inserir uma imagem na pgina 448), possvel editar esses valores no cdigo HTML.
Para editar valores de acessibilidade de uma imagem:
1.
Na janela do documento, selecione a imagem.
Inserir uma imagem
449
2.

Edite os atributos de imagem apropriados na visualizao do cdigo: Clique com o boto direito do mouse (no Windows), ou mantenha a tecla Control pressionada e clique (no Macintosh), e selecione Edit Tag Code (Editar cdigo da tag). Edite o valor Alt no Property inspector.
Inserir alocador de espao de imagem

Um alocador de espao de imagem um grfico utilizado at que a arte-final esteja pronta para ser adicionada a uma pgina da Web.
Para inserir um alocador de espao de imagem:
1.
Na janela do documento, coloque o ponto de insero onde deseja inserir o grfico do alocador de espao. Siga um dos procedimentos abaixo:
2.
Na barra Common Insert (Inserir comuns), clique no cone Image Placeholder (Alocador de espao de imagem). Selecione Insert (Inserir) > Image Placeholder (Alocador de espao de imagem).
A caixa de dilogo Image Placeholder (Alocador de espao de imagem) exibida.

3.
Na caixa de dilogo, selecione as opes para o alocador de espao de imagem. Voc tambm pode definir o tamanho e a cor do alocador de espao, bem como atribuirlhe um identificador de texto. Para obter mais informaes, clique no boto Help na caixa de dilogo.
4.
Clique em OK.
Os atributos de tamanho e cor do alocador de espao, assim como seu identificador, so exibidos da seguinte maneira:
Quando exibidos em uma janela do navegador, o identificador e o tamanho do texto no so mostrados. Tpicos relacionados Redimensionar uma imagem na pgina 453
Utilizar o Fireworks para modificar alocadores de espao de imagem do Dreamweaver na pgina 502.
450
Substituir um alocador de espao de imagem

Um alocador de espao de imagem no uma imagem grfica exibida em um navegador. Antes da publicao no seu site, necessrio substituir quaisquer alocadores de espaos de imagens que tiver adicionado com arquivos grficos amigveis para Web, como GIFs ou JPEGs. Com o Fireworks, ser possvel criar uma nova imagem no alocador de espao de imagem do Dreamweaver. A nova imagem est definida para o mesmo tamanho que a imagem do alocador de espao. possvel editar a imagem e depois recoloc-la no Dreamweaver. Para obter informaes sobre a criao de uma imagem de substituio em Fireworks MX, veja Utilizar o Fireworks para modificar alocadores de espao de imagem do Dreamweaver na pgina 502.
Para atualizar a origem da imagem:
1.

Clique duas vezes no alocador de espao de imagem. Clique no alocador de espao de imagem para selecion-lo e, no Property inspector (Window > Properties), clique no cone de pasta junto caixa de texto Src (Orig).
A caixa de dilogo Image Source (Origem da imagem) exibida.

2. 3.
Na caixa de dilogo, navegue at a imagem que substituir o alocador de espao de imagem. Clique em OK. A imagem selecionada exibida no documento.
Inserir uma imagem
451
Alinhar uma imagem

possvel alinhar uma imagem a um texto, a outra imagem, a um plug-in ou a outros elementos na mesma linha. Tambm possvel definir o alinhamento horizontal de uma imagem.
Para alinhar uma imagem:
1. 2.
Selecione a imagem na visualizao do projeto. Defina os atributos de alinhamento da imagem no Property inspector.
possvel definir o alinhamento em relao a outros elementos do mesmo pargrafo ou linha.

NO T A 452
O cdigo HTML no fornece um modo de dispor o texto ao redor dos limites de uma imagem, como possvel fazer em alguns processadores de texto.
A seguir so listadas as opes de alinhamento: A opo Default geralmente especifica um alinhamento da linha de base. O padro pode ser diferente, dependendo do navegador do visitante do site.
Baseline (Linha de base) e Bottom (Inferior): alinham a parte inferior do objeto selecionado
linha de base do texto (ou de outro elemento do mesmo pargrafo).

Top (Superior): alinha a parte superior de uma imagem com a parte superior do item mais alto (imagem ou texto) na linha atual. Middle (Centro):
alinha a parte central da imagem com a linha de base da linha atual.
Text Top (Parte superior do texto):
alinha a parte superior da imagem com a parte superior do caractere mais alto da linha de texto. alinha a parte central da imagem com a parte central do texto na linha atual.
Absolute Middle (No meio absoluto):
Absolute Bottom (O mais abaixo): alinha a parte inferior da imagem com a parte inferior da
linha de texto (o que inclui descendentes, como na letra g).
Left ( 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 forar os objetos alinhados esquerda a passarem para a prxima linha. Right ( 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 forar os objetos alinhados direita a passarem para a prxima linha.
Redimensionar uma imagem

possvel redimensionar visualmente elementos como imagens, plug-ins, filmes do Macromedia Shockwave ou Flash, applets e controles ActiveX no Dreamweaver. Redimensionar visualmente uma imagem no Dreamweaver o ajuda a visualizar como a imagem afeta o layout em diferentes dimenses. A escala do arquivo da imagem no alterada para as propores especificadas por voc. Se voc redimensionar visualmente uma imagem no Dreamweaver, mas no usar um aplicativo de edio de imagens (como o Macromedia Fireworks) para alterar o arquivo de imagem para o tamanho desejado, o navegador do usurio poder redimensionar a imagem quando a pgina for carregada. Isso pode causar retardo no tempo de download da pgina e exibio inadequada da imagem no navegador do usurio. Para reduzir o tempo de download e garantir que todas as instncias de uma imagem sejam exibidas com o mesmo tamanho, utilize um aplicativo de edio de imagens para redimension-las.
Para redimensionar visualmente um elemento:
1.
Selecione o elemento (por exemplo, uma imagem ou filme Shockwave) na janela do documento. As alas de redimensionamento so exibidas na parte inferior, no lado direito do elemento e no canto inferior direito. Se as alas de redimensionamento no forem exibidas, clique fora do elemento a ser redimensionado e, em seguida, na tag apropriada no seletor de tags para selecionar o elemento.
2.
Redimensione o elemento, seguindo um dos procedimentos abaixo:

Para ajustar a largura do elemento, arraste a ala de seleo no lado direito. Para ajustar a altura do elemento, arraste a ala de seleo da parte inferior. Para ajustar a largura e a altura do elemento simultaneamente, arraste a ala de seleo do canto. Pressione a tecla Shift e arraste a ala de seleo, localizada no canto do elemento, para preservar suas propores (largura e altura) ao ajustar suas dimenses.
Redimensionar uma imagem
453
Os elementos podem ser redimensionados visualmente at um mnimo 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), utilize o Property inspector para digitar um valor numrico. Para retornar um elemento redimensionado s suas dimenses originais, exclua os valores nos campos W (largura) e H (altura) no Property inspector, ou clique no boto Reset Size (Redefinir tamanho).
Para reverter uma imagem para seu tamanho original:
Clique no boto Reset size (Redefinir tamanho) no Property inspector da imagem.
Para fazer reamostragem de uma imagem redimensionada:

1. 2.
Redimensione a imagem como descrito acima. Clique no boto Resample (Fazer reamostragem) no Property inspector da imagem.
N OT A
Voc no pode fazer reamostragem de alocadores de espao de imagem ou elementos que no sejam imagens de bitmap.
Tpicos relacionados Editar imagens no Dreamweaver na pgina 446
Cortar uma imagem

O Dreamweaver permite cortar (ou aparar) arquivos de imagem de bitmap.
N OT A
Quando voc corta uma imagem utilizando o Dreamweaver, o arquivo de origem da imagem alterado no disco. Por isso, recomendvel manter uma cpia de backup do arquivo de imagem, caso precise reverter imagem original.
Para cortar um arquivo de imagem:

1.
Abra a pgina contendo a imagem que deseja cortar, selecione a imagem e siga um destes procedimentos:

Clique no cone Crop Tool (ferramenta Cortar) no Property inspector da imagem. Selecione Modify (Modificar) > Image (Imagem)> Crop (Cortar).
So mostradas alas ao redor da imagem selecionada.

2.
Mova essas alas at que a caixa delimitadora esteja ao redor da rea da imagem que deseja manter.
454
3.
Clique duas vezes no interior da caixa delimitadora ou pressione a tecla Enter para ajustar a seleo. Uma caixa de dilogo informa que o arquivo de imagem que voc est modificando ser alterado em disco. Clique em OK. Cada pixel do bitmap selecionado que esteja fora da caixa delimitadora removido, mas os outros objetos da imagem so mantidos.
4.
Visualize a imagem para garantir que ela atende as suas expectativas.
Para desfazer os efeitos do comando cortar:
Selecione Edit (Editar) > Undo Crop (Desfazer cortar) para reverter imagem original. Voc pode desfazer o comando Crop (Cortar) (e reverter para o arquivo original de imagem) somente antes de fechar o Dreamweaver, ou ao editar o arquivo em um aplicativo externo de edio de imagem.

Ajustar o brilho e o contraste de uma imagem na pgina 456 Definir a nitidez de uma imagem na pgina 456
Usar o Fireworks para otimizar uma imagem

possvel otimizar imagens em suas pginas da Web dentro do Dreamweaver.
Para otimizar uma imagem:
1.
Abra a pgina contendo a imagem que deseja otimizar, selecione a imagem e siga um destes procedimentos:
Clique no boto Optimize in Fireworks (Otimizar no Fireworks) no Property inspector da imagem. Selecione Modify > Image > Optimize Image in Fireworks.
A caixa de dilogo Fireworks Optimize Image (Imagem otimizada do Fireworks) exibida.

2.
Clique em OK.
Usar o Fireworks para otimizar uma imagem
455

Inserir uma imagem na pgina 448 Cortar uma imagem na pgina 454 Definir a nitidez de uma imagem na pgina 456
Ajustar o brilho e o contraste de uma imagem

Brightness/Contrast (Brilho/Contraste) modifica o brilho ou o contraste de pixels em uma imagem. Esse recurso afeta os realces, sombreamentos e meios-tons de uma imagem. Normalmente, os recursos de Brightness/Contrast so usados para corrigir imagens muito escuras ou muito claras.
Para ajustar o brilho e o contraste de uma imagem:
1.
Abra a pgina contendo a imagem que deseja ajustar, selecione a imagem e siga um destes procedimentos:

Clique no boto Brightness/Contrast no Property inspector da imagem. Selecione Modify > Image > Brightness/Contrast.
A caixa de dilogo Brightness/Contrast exibida.

2.
Arraste os controles deslizantes Brightness (Brilho) and Contrast (Contraste) para ajustar as configuraes. Os valores variam de -100 a 100. Clique em OK.
3.

Inserir uma imagem na pgina 448 Cortar uma imagem na pgina 454 Definir a nitidez de uma imagem na pgina 456
Definir a nitidez de uma imagem

O recurso Sharpening (Nitidez) aumenta o contraste de pixels em torno das extremidades dos objetos para aumentar a definio ou nitidez da imagem.
456
Para definir a nitidez de uma imagem:

1.
Abra a pgina contendo a imagem cuja nitidez deseja definir, selecione a imagem e siga um destes procedimentos:

Clique no boto Sharpen (Nitidez) no Property inspector da imagem. Selecione Modify > Image > Sharpen.
A caixa de dilogo Sharpen (Nitidez) exibida.

2.
Para especificar o grau de nitidez a ser aplicado pelo Dreamweaver imagem, arraste o controle deslizante ou insira um valor entre 0 e 10 na caixa de texto. medida que ajusta a nitidez da imagem na caixa de dilogo Sharpness (Nitidez), voc pode visualizar a alterao na imagem.
3. 4.
Clique em OK. Para salvar as alteraes, selecione File (Arquivo) > Save (Salvar), ou reverta a ao selecionando Edit (Editar) > Undo Sharpen More (Desfazer mais nitidez).
Para desfazer os efeitos do comando Sharpen:
Selecione Edit (Editar) > Undo Sharpen (Desfazer nitidez) para reverter imagem original. possvel desfazer o efeito do comando Sharpen (Nitidez) (e reverter para o arquivo de imagem original) somente antes de salvar a pgina contendo a imagem. Aps salvar a pgina, as alteraes feitas na imagem sero permanentemente salvas.

Cortar uma imagem na pgina 454 Ajustar o brilho e o contraste de uma imagem na pgina 456
Criar uma imagem cambivel

possvel inserir imagens cambiveis na sua pgina. Uma imagem cambivel aquela que, exibida em um navegador, alterada quando o ponteiro do mouse movido sobre ela. Antes de iniciar, obtenha um ou mais pares de imagens cambiveis. Para criar uma imagem cambivel com dois arquivos de imagem: a imagem primria (exibida quando a pgina for carregada pela primeira vez) e a imagem secundria (que ser exibida quando o cursor for deslizado sobre a imagem primria). Ambas as imagens em uma imagem cambivel devem ter o mesmo tamanho. Caso contrrio, o Dreamweaver redimensionar automaticamente a segunda imagem para que corresponda s propriedades da primeira imagem.
Criar uma imagem cambivel
457
As imagens cambiveis so automaticamente definidas para responder ao evento onMouseOver. Para obter informaes sobre a definio de uma imagem que responda a um evento diferente (um clique do mouse, por exemplo) ou sobre a edio de uma imagem cambivel para que exiba uma imagem diferente, veja Swap Image (Trocar imagem) na pgina 577.
Para criar uma imagem cambivel:
1.
Na janela do documento, coloque o ponto de insero no local onde dever ser exibida a imagem cambivel. Insira a imagem cambivel por meio de um destes mtodos:

2.
Na barra Insert, selecione Common e clique no cone de imagem cambivel. Na barra Insert, selecione Common e arraste o cone de imagem cambivel at o local desejado na janela do documento. Selecione Insert (Inserir) > Interactive Images (Imagens interativas) > Rollover Image (Imagem cambivel). A caixa de dilogo Insert Rollover Image (Inserir imagem cambivel) exibida.
3.
Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK. Selecione File (Arquivo) > Preview in Browser (Visualizar no navegador) ou pressione a tecla F12. No possvel ver o efeito de uma imagem cambivel na visualizao do projeto. No navegador, passe o cursor sobre a imagem original. A exibio pode alternar para a imagem cambivel.
4. 5.
6.
Tpicos relacionados Inserir uma barra de navegao na pgina 486
Usar um editor de imagens externo

No Dreamweaver, possvel abrir uma imagem selecionada em um editor de imagens externo. Ao retornar para o Dreamweaver, aps salvar o arquivo de imagem editado, as alteraes feitas na imagem estaro visveis na janela do documento. possvel configurar o Fireworks como o seu editor externo primrio. Para obter mais informaes, consulte Trabalhar com o Fireworks na pgina 499.
458
Para iniciar o editor de imagens externo, siga um destes procedimentos:

Clique duas vezes nas imagens a serem editadas. Na imagem a ser editada, clique com o boto direito (no Windows), ou mantenha a tecla Control pressionada e clique (no Macintosh). Em seguida, selecione Edit With (Editar com) >Browse (Procurar). Selecione a imagem a ser editada e clique em Edit no Property inspector. No painel Site, clique duas vezes no arquivo de imagem para iniciar o editor de imagens primrio. Se nenhum editor de imagens tiver sido especificado, o Dreamweaver iniciar o editor padro para esse tipo de arquivo.
NO T A
Quando uma imagem for aberta no painel Site (Site), os recursos de integrao do Fireworks descritos acima no estaro em vigor e o Fireworks no abrir o arquivo PNG original. Para utilizar os recursos de integrao do Fireworks, abra imagens na janela do documento.
Caso a imagem no aparea atualizada aps retornar janela do Dreamweaver, selecione a imagem e, em seguida, clique no boto Refresh (Atualizar) no Property inspector. Tpicos relacionados Especificar o editor a iniciar usando o Dreamweaver na pgina 522
Aplicar comportamentos a imagens

possvel aplicar qualquer comportamento disponvel a uma imagem ou ponto ativo de imagem. Quando um comportamento for aplicado a um ponto ativo, Dreamweaver inserir o cdigo-fonte HTML na tag area. Trs comportamentos se aplicam especificamente s imagens: Preload Images (Carregar imagens previamente), Swap Image (Trocar imagem) e Swap Image Restore (Restaurar troca de imagem).
Preload Images (Carregar imagens previamente): carrega imagens que no so exibidas na pgina imediatamente (como as que sero permutadas com comportamentos, camadas ou JavaScript) no cache do navegador. Esse processo evita os atrasos causados pelo download quando as imagens tiverem de ser exibidas. Consulte Preload Images (Pr-carregar as imagens) na pgina 564.
alterna de uma imagem para outra, modificando o atributo da tag img. Utilize esta ao para criar botes cambiveis e outros efeitos em imagens (inclusive a troca simultnea de mais de uma imagem). Consulte Swap Image (Trocar imagem) na pgina 577.
SRC
Swap Image (Trocar imagem):
Aplicar comportamentos a imagens
459
Swap Image Restore (Restaurar troca de imagem): restaura o ltimo conjunto de imagens
permutadas para seus arquivos de origem anteriores. Por padro, essa ao ser adicionada automaticamente, sempre que for anexada a ao Swap Image (Trocar imagem) a um objeto. No ser necessrio selecion-la manualmente. Consulte Swap Image Restore (Restaurar troca de imagem) na pgina 578. Tambm possvel utilizar comportamentos para criar sistemas de navegao mais sofisticados, como uma barra de navegao ou um menu de salto (veja Usar as barras de navegao na pgina 486 e Inserir menus de salto na pgina 483).
460
CAPTULO 15
Links e navegao
Aps criar um site do Macromedia Dreamweaver 8 para armazenar documentos do seu site e criar as pginas HTML, voc poder definir conexes entre seus documentos e outros documentos. O Dreamweaver oferece diversas formas de criar links de hipertexto para documentos, imagens, arquivos de multimdia ou softwares de download. possvel criar links para qualquer texto ou imagem, em qualquer parte de um documento, mesmo texto ou imagens localizados em um ttulo, lista, tabela, camada ou quadro. Para obter uma representao visual de como os arquivos so vinculados, utilize o mapa do site. Nesse mapa, possvel adicionar novos documentos ao seu site, criar e remover links de documento e verificar links para arquivos dependentes. Para obter mais informaes, consulte Exibir um mapa de site na pgina 138. H vrias maneiras diferentes de criar e gerenciar os links. Alguns designers da Web preferem criar links para pginas ou arquivos que ainda no existam medida que trabalham. Outros acham mais conveniente criar primeiro todos os arquivos e pginas e ento adicionar os links. Outra maneira de gerenciar os links criando pginas "alocadoras de espao", que representam o arquivo final e permitem adicionar e verificar links rapidamente, antes das pginas serem realmente concludas. Para obter informaes sobre como verificar links, consulteVerificar links rompidos, externos e rfos na pgina 491. Este captulo contm as seguintes sees:
Localizaes e caminhos dos documentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .462 Menus de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .465 Barras de navegao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .466 Sobre mapas de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 Criar links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 Gerenciar links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .479 Inserir menus de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .483 Usar as barras de navegao. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .486 Usar mapas de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .488
15
461
Anexar comportamentos JavaScript aos links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491 Verificar links rompidos, externos e rfos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491 Corrigir links rompidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493 Abrir documentos vinculados no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Localizaes e 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 pgina da Web tem um endereo nico chamado URL - Uniform Resource Locator (Localizador de recursos uniforme). Para mais informaes sobre URLs, consulte o site da World Wide Web Consortium na Web sobre atribuio de nomes e endereos, www.w3.org/ Addressing/. Contudo, quando criado um link local (entre dois documentos no mesmo site), normalmente, a URL inteira do documento que est sendo vinculado no especificada; em vez disso, indicado um caminho relativo ao documento atual ou pasta raiz do site. Existem trs tipos de caminhos de links:
Caminhos absolutos (por exemplo: http://www.macromedia.com/support/dreamweaver/ contents.html). Para obter mais informaes, consulte Caminhos absolutos na pgina 462. Caminhos relativos a documento (por exemplo: dreamweaver/contents.html). Para obter mais informaes, consulte Caminhos relativos a documentos na pgina 463. Caminhos relativos raiz do site (por exemplo: /support/dreamweaver/contents.html). Para obter mais informaes, consulte Caminhos relativos raiz do site na pgina 464.
Com o Dreamweaver, possvel selecionar facilmente o tipo de caminho do documento para os links (consulte Vincular arquivos e documentos na pgina 468).
NO T A 462
melhor utilizar o tipo de link de sua preferncia e que estiver mais acostumado, tanto relativo ao documento quanto ao site. A busca de links, ao contrrio da digitao de caminhos, garante que o caminho inserido estar sempre correto.
Caminhos absolutos
Caminhos absolutos fornecem o URL completo do documento vinculado, inclusive o protocolo a ser utilizado (normalmente http:// para as pginas da Web). Por exemplo: http:/ /www.macromedia.com/support/dreamweaver/contents.html um caminho absoluto.
Captulo 15: Links e navegao
Utilize um caminho absoluto ao criar um link para um documento em outro servidor. Os links de caminho absoluto tambm podem ser utilizados para os links locais (a documentos no mesmo site), mas essa abordagem no recomendada; se o site for deslocado para outro domnio, todos os seus links de caminho absoluto iro se partir. Alm disso, a utilizao de caminhos relativos para os links locais possibilita maior flexibilidade quando for necessrio mover os arquivos no site.
NO TA
Ao inserir imagens (mas no links): se for utilizado um caminho absoluto a uma imagem que resida em um servidor remoto e que no esteja disponvel no disco rgido local, no ser possvel exibi-la na janela do documento. Em vez disso, o documento deve ser visualizado em um navegador. Se for possvel, utilize os caminhos relativos a documento ou raiz do site para as imagens. Para obter mais informaes, consulte Inserir uma imagem na pgina 448.
Caminhos relativos a documentos

Caminhos relativos a documentos so os mais apropriados para os links locais na maioria dos sites da Web. Eles so particularmente teis quando o documento atual e o vinculado estiverem na mesma pasta, e possivelmente permanecero juntos. O caminho relativo tambm pode ser usado para criar um link para um documento em outra pasta. Para isso, especifique o caminho atravs de toda a hierarquia de pastas, desde o documento atual at o vinculado. Na especificao desse caminho, no consta a parte da URL absoluta, que a mesma para ambos os documentos. fornecido apenas o segmento do caminho que diferente. Por exemplo, suponha que o site tenha esta estrutura:
Localizaes e caminhos dos documentos
463
Voc pode criar links de contents.html para outros arquivos da seguinte forma:
Ao criar um link de contents.html para hours.html (ambos os arquivos esto na mesma pasta), o caminho relativo o nome do arquivo: hours.html. Para vincular a tips.html (na subpasta chamada resources), utilize o caminho relativo resources/tips.html. Cada barra inclinada (/) representa mover um nvel abaixo na hierarquia de pastas. Para vincular a index.html (na pasta pai, um nvel acima de contents.html), utilize o caminho relativo ../index.html. Cada ../ representa mover um nvel acima na hierarquia de pastas. Para vincular a catalog.html (em uma subpasta da pasta pai), utilize o caminho relativo ../ products/catalog.html. A ../ move um nvel acima em direo pasta pai; products/ move um nvel para baixo na subpasta products.
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 no precisaro ser atualizados entre esses arquivos. Contudo, quando um arquivo individual que contm links relativos a documento ou que est vinculado por esse mesmo tipo de ligao for movido, torna-se absolutamente necessrio atualizar esses links. (Se os arquivos forem movidos ou renomeados usando o painel Files, o Dreamweaver atualizar automaticamente todos os links relevantes). Tpicos relacionados Definir o caminho relativo de novos links na pgina 473
Caminhos relativos raiz do site

Caminhos relativos raiz do site fornecem o caminho completo desde a pasta raiz do site at um documento. Pode ser conveniente utilizar esses tipos de caminhos ao trabalhar em um site grande da Web, que use vrios servidores, ou um servidor que hospede diversos sites diferentes. Contudo, se voc no estiver familiarizado com esse tipo de caminho, recomendvel continuar utilizando 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.
464
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 freqncia de uma pasta para outra. Quando um documento que contm links relativos raiz for movido, no necessrio 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 sero vlidos. Contudo, quando os links dos documentos forem relativos raiz e estes forem movidos ou renomeados, absolutamente necessrio atualizar esses links, mesmo que os caminhos dos documentos relativos entre si no 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 usando o painel Files, o Dreamweaver atualizar automaticamente todos os links relevantes). Tpicos relacionados Definir o caminho relativo de novos links na pgina 473
Menus de salto
Um menu de salto um menu pop-up em um documento, visvel aos usurios do site, que lista as opes para criar links em documentos e arquivos. Podem ser criados links a documentos no seu site da Web, a documentos em outros sites da Web, links de correio eletrnico, links a imagens ou a qualquer tipo de arquivo que possa ser aberto em um navegador. Um menu de salto contm trs componentes bsicos:
(Opcional) Um aviso de seleo no menu, como instrues ou uma descrio da categoria dos itens do menu. Por exemplo: Escolha uma opo. (Obrigatrio) Uma lista de itens de menu vinculados: um usurio seleciona uma opo e o documento ou arquivo vinculado a ela aberto. (Opcional) Um boto Go (Ir).
Tpicos relacionados Inserir menus de salto na pgina 483
Menus de salto
465
Barras de navegao
Uma barra de navegao composta por uma imagem (ou um conjunto de imagens), que se altera de acordo nas aes do usurio. As barras de navegao so, com freqncia, um modo fcil de se mover entre as pginas e arquivos de um site.
Um elemento da barra de navegao pode apresentar quatro estados:
Up (Ativa): a imagem que aparece quando o usurio ainda no clicou ou interagiu com o elemento. Por exemplo: o elemento nesse estado parece que no foi clicado.
Over (Sobreposta): a imagem que aparecer quando o cursor for movido sobre uma imagem ativa. A aparncia do elemento alterada (por exemplo: poder ficar mais clara) para informar aos usurios que eles no podem interagir com o elemento.
Down (Inativa): a imagem que aparece aps o clique no elemento. Por exemplo: quando um usurio clica em um elemento, uma nova pgina carregada e a barra de navegao ainda estar em exibio, mas o elemento clicado estar escurecido para mostrar que foi selecionado.
Over While Down (Imagem sobreposta enquanto inativa): a imagem que aparecer quando o cursor for deslizado sobre a imagem inativa, aps o clique do usurio. Por exemplo: o elemento aparece esmaecido ou cinza. Esse estado pode ser utilizado como uma informao visual aos usurios de que esse elemento no pode ser clicado novamente enquanto estiverem nesta parte do site.
No necessrio incluir imagens na barra de navegao para todos os quatro estados; por exemplo: podem ser necessrios apenas os estados Up (Ativa) e Down (Inativa). Tpicos relacionados Usar as barras de navegao na pgina 486
466
Sobre mapas de imagens

Um mapa de imagens uma imagem que foi dividida em reas, ou pontos ativos. Quando se clica em um ponto ativo, ocorre uma ao (um novo arquivo aberto, por exemplo). Os mapas de imagens no lado do cliente armazenam as informaes sobre o link de hipertexto no documento HTML e no 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 do lado do cliente mais rpidos que os do servidor, porque o servidor no precisar interpretar onde o usurio clicou. Os mapas de imagens no lado do cliente so compatveis com o Netscape Navigator 2.0 e posteriores, NCSA Mosaic 2.1 e 3.0 e com todas as verses do Microsoft Internet Explorer. O Dreamweaver no altera as referncias de mapas de imagens do servidor nos documentos existentes; possvel 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 lado do cliente. Para incluir um mapa de imagens do lado do servidor em um documento, necessrio gravar o cdigo HTML adequado. Tpicos relacionados Usar mapas de imagens na pgina 488
Criar links
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. Consulte Vincular arquivos e documentos na pgina 468. Um link de ncora com nome, que salta para uma localizao especfica em um documento. Consulte Criar um link para um local especfico de um documento na pgina 475. Um link de correio eletrnico, que cria uma nova mensagem com o endereo do destinatrio j preenchido. Consulte Criar um link de correio eletrnico na pgina 476. Os links nulos e de script, que permitem anexar comportamentos a um objeto ou criar um link que execute cdigo JavaScript. Consulte Criar links nulos e de script na pgina 477.
N OT A
Antes de criar os links, voc deve compreender como funcionam os caminhos relativos ao documento, os caminhos relativos raiz do site e os caminhos absolutos. Consulte Localizaes e caminhos dos documentos na pgina 462.
Criar links
467
Vincular arquivos e documentos

Utilize o Property inspector e o cone do indicador de arquivos para criar links de uma imagem, objeto ou texto a outro documento ou arquivo. Para obter mais informaes sobre como usar o mapa do site para criar links, consulte Modificar links no mapa do site na pgina 481. O Dreamweaver cria links com outras pginas do site usando caminhos relativos a documentos. Tambm possvel instruir o Dreamweaver a criar novos links utilizando caminhos relativos raiz do site.
N OT A

Salve sempre um novo arquivo antes de criar um caminho relativo a documento, j que esse caminho no ser vlido 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.
Esta seo contm os tpicos a seguir: Vincular documentos usando o Property inspector (Inspetor de propriedades) na pgina 468 Vincular documentos usando o cone Point-to-File (Indicador de arquivos) na pgina 470 Criar links para documentos usando o mapa do site na pgina 471 Utilizar o comando Hyperlink na pgina 472 Definir o caminho relativo de novos links na pgina 473
Tpicos relacionados Localizaes e caminhos dos documentos na pgina 462
Vincular documentos usando o Property inspector (Inspetor de propriedades)

possvel usar o cone de pasta do Property inspector ou a caixa de texto Link para criar links de uma imagem, um objeto ou texto para outro documento ou arquivo.
Para vincular documentos utilizando o cone de pasta do Property inspector ou a caixa de texto Link:
1.
Selecione o texto ou uma imagem na visualizao do projeto, na janela do documento.
468
2.
Abra o Property inspector (Window > Properties) e siga um destes procedimentos:
Clique no cone pasta, direita da caixa de texto Link, para procurar e selecionar um arquivo. O caminho para o documento vinculado exibido na caixa de texto URL. Utilize o menu pop-up Relative To (Relativo a), na caixa de dilogo Select HTML File (Selecionar arquivo HTML), para decidir se o caminho ser relativo ao documento ou raiz e, em seguida, clique em Select (Selecionar). O tipo de caminho selecionado se aplica apenas ao link atual. Para obter mais informaes, consulte Localizaes e caminhos dos documentos na pgina 462. possvel alterar a definio padro da caixa de texto Relative To para o site. Para obter mais informaes, consulte Definir o caminho relativo de novos links na pgina 473.
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 para 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 no foi criado.
Em caminhos relativos, omita a parte do URL, que o mesmo para ambos os documentos, o documento atual e aquele para o qual est criando o link. Se o arquivo para o qual voc est criando um link estiver contido na mesma pasta que o documento atual, digite o nome do arquivo; se estiver em uma subpasta, digite o nome da subpasta seguido de uma barra inclinada (/) e do nome do arquivo; se estiver na pasta pai, preceda o nome do arquivo com ../ (onde .. significa um nvel acima na hierarquia de pastas).
3.
No menu pop-up Target (Destino), selecione um local para abrir o documento. Para que o documento vinculado aparea em um local diferente da janela ou quadro atual, selecione uma opo no menu pop-up Target (Destino) no Property inspector.
_blank carrega o documento vinculado em uma janela nova e sem nome do navegador. _parent carrega o documento vinculado na janela pai ou janela principal do quadro que contm o link. Se o quadro onde est o link no estiver aninhado, o documento vinculado ser carregado na janela inteira do navegador. _self
carrega o documento vinculado no mesmo quadro ou janela que o link. Esse destino o padro, portanto geralmente no necessrio especific-lo.
Criar links
469
_top
carrega o documento vinculado na janela inteira do navegador, removendo, portanto, todos os quadros.
DICA
Se todos os links da pgina forem definidos para o mesmo destino, voc poder especificar esse destino uma nica vez selecionando Insert (Inserir) > Head Tag (Tag de cabealho) > Base e selecionando as informaes do destino. Para obter informaes sobre como designar quadros, consulte Controlar o contedo de quadros com links na pgina 321.
Vincular documentos usando o cone Point-to-File (Indicador de arquivos)

O cone Point-to-File permite criar links a partir de imagens, objetos ou texto para outro documento ou arquivo.
Para vincular documentos usando o cone Point-to-File:
1. 2.
Selecione o texto ou uma imagem na visualizao do projeto, na janela do documento. Arraste o cone do indicador de arquivos, direita da caixa de texto Link no Property inspector para outro documento aberto, para uma ncora visvel em um documento aberto ou para um documento no painel Files (Arquivos). O campo Link ser atualizado para mostrar o link.
N OT A
Pode ser estabelecido um vnculo a um documento aberto apenas quando os seus documentos no estiverem maximizados na janela do documento. Quando se indica um documento, ele movido para o primeiro plano da tela durante a seleo.
3.
Solte o boto do mouse.
Para criar um link a partir de uma seleo em um documento aberto:

1. 2.
Selecione o texto na janela do documento. Mantenha a tecla Shift pressionada e arraste a partir da seleo. O cone do indicador de arquivos aparecer medida que o cursor for arrastado. Aponte para outro documento aberto, uma ncora visvel de um documento aberto ou um documento no painel Files.
NO T A
3.
Pode ser estabelecido um vnculo a um documento aberto apenas quando os seus documentos no estiverem maximizados na janela do documento. Quando se indica um documento, ele movido para o primeiro plano da tela durante a seleo.
4.
Solte o boto do mouse.
470
Tpicos relacionados Definir o caminho relativo de novos links na pgina 473
Criar links para documentos usando o mapa do site

possvel criar links usando o mapa do site. Os links criados sero colocados no final dos arquivos HTML selecionados, o que possibilitar a rpida criao de links em todo o site.
Para criar um link a documentos usando o mapa do site e o cone do indicador de arquivos:
1.
Expanda o painel Files e, em seguida, exiba as visualizaes Site Files (Arquivos do site) e Site Map (Mapa do site). Para isso, pressione o cone de mapa do site enquanto seleciona Map and Files (Mapa e arquivos). Selecione um arquivo HTML no mapa do site. O cone do indicador de arquivos aparecer ao lado do arquivo. Arraste o cone do indicador de arquivos e indique outro arquivo no mapa do site ou um arquivo local na visualizao dos arquivos do site. Solte o boto do mouse. Um link de hipertexto com o nome do arquivo vinculado ser colocado na parte inferior do arquivo HTML selecionado. Esse mtodo funciona bem quando um site est sendo construdo e se deseja criar links no site inteiro rapidamente.
2.
3.
4.
Para criar links entre documentos no mapa do site, siga um destes procedimentos:
Arraste uma pgina do Windows Explorer ou do Macintosh Finder e solte-a em uma pgina do mapa do site.
N OT A
Certifique-se de que o painel Files (Arquivos) esteja encaixado e, em seguida, clique na seta Expand (Expandir). Mantenha pressionado o boto Site Map (Mapa do site) e, em seguida, selecione Files and Map (Arquivos e mapa).
No mapa do site, marque uma pgina HTML e depois selecione Site > Link to Existing File (Vincular a um arquivo existente) (Windows), ou Site > Site Map View (Visualizao do mapa do site) > Link to Existing File (Macintosh) ou ainda, selecione Link to Existing File no menu contextual. No mapa do site, marque uma pgina HTML e depois selecione Site > Link to New File (Link a um novo arquivo) (no Windows), ou Site > Site Map View (Visualizao do mapa do site) > Link to New File (Link a um novo arquivo) (no Macintosh), ou escolha Link to New File (Link a um novo arquivo) no menu contextual.
Criar links
471
Tpicos relacionados Definir o caminho relativo de novos links na pgina 473
Utilizar o comando Hyperlink

O comando Hyperlink permite criar um link a partir de um texto para uma imagem, um objeto ou para outro documento ou arquivo.
Para adicionar um hiperlink utilizando o comando Hyperlink:
1. 2.
Coloque o ponto de insero onde o hiperlink deve ser inserido no documento. Siga um destes procedimentos para exibir a caixa de dilogo Insert Hyperlink:

Selecione Insert (Inserir) > Hyperlink. Na categoria Common (Comuns) da barra Insert (Inserir), clique no boto Hyperlink.
Aparecer a caixa de dilogo Hyperlink.
3.
4.
Tpicos relacionados Modificar links no mapa do site na pgina 481

Criar um link para um local especfico de um documento na pgina 475 Criar um link de correio eletrnico na pgina 476 Criar links nulos e de script na pgina 477
472
Definir o caminho relativo de novos links

Por padro, o Dreamweaver cria links para outras pginas do site utilizando caminhos relativos a documentos. Mas tambm possvel instruir o Dreamweaver a criar links para caminhos relativos raiz do site. Para obter mais informaes sobre caminhos relativos, consulte Localizaes e caminhos dos documentos na pgina 462. Para utilizar os caminhos relativos raiz do site, primeiro preciso definir um site local no Dreamweaver escolhendo uma pasta raiz local que seja equivalente raiz do documento em um servidor (consulte Configurar um novo site do Dreamweaver na pgina 90). O Dreamweaver utiliza essa pasta para determinar os caminhos relativos raiz do site para os arquivos. Voc define o caminho relativo de novos links na caixa de dilogo Site Definition (Definio do site).
Para definir o caminho relativo de novos links:
1.
Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Manage Sites exibida. Clique duas vezes no site na lista. A caixa de dilogo Site Definition (Definio do site) exibida. Clique na guia Advanced (Avanado) se as definies avanadas no estiverem sendo exibidas. A guia Advanced da caixa de dilogo Site Definition exibir as opes da categoria Local Info (Informaes locais).
2.
3.
4.
Defina o caminho relativo de novos links selecionando a opo Document or Site Root (Documento ou raiz do site).
Criar links
473
A alterao desta definio no converter o caminho dos links existentes quando voc clicar em OK. Essa definio s ser aplicada aos novos links que voc criar com o Dreamweaver.
NO T A D IC A
O contedo vinculado a um caminho relativo raiz no aparece quando os documentos so visualizados em um navegador local, a menos que voc especifique um servidor de teste ou selecione a opo Preview Using Temporary File (Visualizar utilizando arquivo temporrio) em Edit (Editar)> Preferences (Preferncias)> Preview in Browser (Visualizador no navegador). Isso se deve ao fato de que os navegadores no reconhecem a raiz do site, como os servidores reconhecem. (Consulte Visualizar e testar pginas em navegadores na pgina 399.) Para visualizar o contedo vinculado a caminhos relativos raiz, coloque o arquivo em um servidor remoto e, em seguida, selecione File (Arquivo) > Preview in Browser (Visualizar no navegador) para visualiz-lo (consulte Caminhos relativos raiz do site na pgina 464).
5.
Para caminhos relativos raiz do site, digite a URL a ser utilizada pelo site da Web finalizado na caixa de texto HTTP Address (Endereo HTTP). O Dreamweaver utiliza esse endereo para assegurar que os links relativos raiz funcionem no servidor remoto, que pode ter uma raiz do site diferente. Por exemplo, se voc estiver criando um vnculo para um arquivo de imagem localizado na pasta C:\Vendas\imagens\ do seu disco rgido (onde Vendas sua pasta raiz local), e a URL do site finalizado for http://www.meusite.com/AplVendas/ (onde AplVendas sua pasta raiz remota), ao digitar a URL na caixa de texto HTTP Address ficar assegurado que o caminho para o arquivo vinculado no servidor remoto ser /AplVendas/imagens/.
NO T A
Em verses anteriores, o Dreamweaver falhava ao anexar a pasta raiz remota correta, fazendo com que as pginas falhassem na execuo.
6.
Clique em OK.
A nova definio de caminho se aplica apenas ao site atual. Tpicos relacionados Localizaes e caminhos dos documentos na pgina 462
Utilizar as definies avanadas para configurar um site do Dreamweaver na pgina 91
474
Criar um link para um local especfico de um documento

O Property inspector pode ser usado para criar um link para uma determinada seo de um documento. Para isso, crie primeiro ncoras com nome. Estas permitem definir marcadores em um documento e so colocadas, com freqncia, em um tpico especfico ou no alto do documento. Podem ser criados links para essas ncoras com nome, que levam rapidamente o visitante at a posio especificada. A criao de um link a uma ncora com nome um processo em duas etapas. Primeiro, crie uma ncora com nome e, em seguida, estabelea um link para essa ncora.
Para criar uma ncora com nome:
1.
Na visualizao do projeto, na janela do documento, posicione o ponto de insero no local onde deseja inserir a ncora com nome. Siga um dos procedimentos abaixo:

2.
Selecione Insert (Inserir) > Named Anchor (ncora com nome). Pressione as teclas Control, Alt e A (no Windows), ou Command, Option e A (no Macintosh). Na categoria Common da barra Insert, clique no boto Named Anchor.
Ser exibida a caixa de dilogo Named Anchor (ncora com nome).
3.
Na caixa de texto Anchor Name, digite um nome para a ncora, e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. O marcador da ncora aparecer no ponto de insero.
N O TA
Se o marcador da ncora no estiver visvel, selecione View (Exibir) > Visual Aids (Auxlios Visuais) > Invisible Elements (Elementos invisveis).
Para criar um link para uma ncora com nome:

1.
Na visualizao do projeto, na janela do documento, selecione um texto ou uma imagem da qual ser criado um link.
Criar links
475
2.
No campo Link, no Property inspector, digite o caractere # e o nome da ncora. Por exemplo:
Para criar um link para uma ncora que possua o nome alto no documento atual, digite #alto. Para criar um link para uma ncora que possua o nome alto em outro documento na mesma pasta, digite nomedoarquivo.html#alto.
N OT A
Os nomes de ncora fazem distino entre maisculas e minsculas.
Para criar um link para uma ncora usando o mtodo de indicao de arquivos:
1.
Abra o documento que contm a ncora com nome escolhida.

N OT A
Se a ncora no estiver visvel, selecione View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis).
2.
Na visualizao 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. Siga um dos procedimentos abaixo:
3.
Clique no cone do indicador de arquivos, direita do campo Link, no Property inspector, 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 a ser vinculada a: uma ncora no mesmo documento ou em outro documento aberto.
Tpicos relacionados Vincular arquivos e documentos na pgina 468
Criar links nulos e de script na pgina 477
Criar um link de correio eletrnico

Um link de correio eletrnico abrir uma nova janela de mensagem (utilizando o programa de correio eletrnico associado ao navegador do usurio) sempre que for clicado. Na janela de mensagem de correio eletrnico, o campo de texto To (Para) atualizado automaticamente com o endereo especificado no link de correio eletrnico.
476
Para criar um link de correio eletrnico com o comando Insert E-mail Link:
1.
Na visualizao do projeto, na janela do documento, coloque o ponto de insero onde dever aparecer o link de correio eletrnico, ou selecione o texto ou a imagem a ser mostrada neste lugar. Siga um dos procedimentos abaixo para inserir o link:

2.
Selecione Insert > E-Mail Link (Inserir link de correio eletrnico). Na categoria Common da barra Insert, clique no boto Insert E-mail Link.
A caixa de dilogo E-mail Link (Link de correio eletrnico) exibida.
3.
4.
Para criar um link de correio eletrnico usando o Property inspector:

1. 2.
Selecione o texto ou uma imagem na visualizao do projeto, na janela do documento. Na caixa de texto Link do Property inspector, digite mailto: seguido de um endereo de correio eletrnico. No digite espaos entre os dois pontos e o endereo eletrnico. Por exemplo: digite mailto:jlydon@macromedia.com.
Tpicos relacionados Criar um link para um local especfico de um documento na pgina 475 Criar um link para um local especfico de um documento na pgina 475
Criar links nulos e de script

Os tipos mais comuns de links ocorrem entre documentos e ncoras com nome (consulte Vincular arquivos e documentos na pgina 468 e Criar um link para um local especfico de um documento na pgina 475), embora tambm existam outros tipos de links.
Criar links
477
Um link nulo aquele no designado. Utilize esse tipo de link para anexar comportamentos a objetos ou texto em uma pgina. Aps a criao 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 informaes sobre como anexar comportamentos a objetos, consulte Aplicao de um comportamento na pgina 544. Links de scripts executam cdigo JavaScript ou chamam uma funo JavaScript, sendo teis para fornecer informaes adicionais ao usurio sobre um item, sem sair da pgina atual da Web. Os links de scripts tambm podem ser utilizados para clculos, validaes de formulrios e outras tarefas de processamento, quando um usurio clicar em um determinado item.
Para criar um link nulo:

1.
Selecione o texto, uma imagem ou um objeto na visualizao do projeto, na janela do documento. No Property inspector, digite javascript:; (a palavra javascript, seguida de dois pontos e de um ponto-e-vrgula) na caixa de texto Link.
2.
Para criar um link de script:

1.
Selecione o texto, uma imagem ou um objeto na visualizao do projeto, na janela do documento. Na caixa de texto Link, no Property inspector, digite javascript: seguido de cdigo JavaScript ou de uma chamada de funo. Por exemplo, digitar javascript:alert('This link leads to the index') na caixa de texto Link cria um link que, ao ser clicado, exibe uma caixa de alerta de JavaScript com a mensagem This link leads to the index.
NO T A
2.
Como o cdigo JavaScript aparece entre aspas duplas no HTML (assim como o valor do atributo href ), necessrio utilizar aspas simples no cdigo do script ou preceder as aspas duplas por barras invertidas (por exemplo: \"Este link conduz ao ndice\").
Tpicos relacionados Criar um link para um local especfico de um documento na pgina 475 Criar um link de correio eletrnico na pgina 476
478
Gerenciar links
Para evitar o surgimento de links rompidos em seu site, possvel ativar o gerenciamento de links, de forma que o Dreamweaver realize automaticamente as atualizaes dos links sempre que voc fizer uma alterao. Tambm possvel usar uma representao visual do seu site para modificar os links e atualizar todos os links direcionados a um arquivo especfico com uma nica alterao.
Atualizar links automaticamente

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 seo inteira deste) no disco local. O Dreamweaver no altera os arquivos na pasta remota at que os arquivos locais sejam colocados ou devolvidos ao servidor remoto. Para tornar mais rpido o processo de atualizao, o Dreamweaver pode criar um arquivo de cache, no qual ele armazenar informaes sobre todos os links da pasta local. O arquivo de cache atualiza-se de forma invisvel, medida que voc adiciona, altera ou elimina links dos arquivos de seu site local.
Para ativar o gerenciamento de links no Dreamweaver:
1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). A caixa de dilogo Preferences (Preferncias) ser exibida. Selecione General (Geral) na lista de categorias, esquerda. Sero exibidas as opes de General Preferences (Preferncias gerais).
2.
Gerenciar links
479
3.
Na seo Document Options (Opes do documento), selecione Always (Sempre) ou Prompt (Solicitar), no menu pop-up Update Links when Moving Files (Atualizar os links ao mover os arquivos). Se for escolhida a opo Always (Sempre), o Dreamweaver atualizar automaticamente todos os links para e de um documento selecionado, sempre que este for movido ou renomeado. (Para obter instrues especficas sobre o que fazer quando um arquivo for excludo, consulte Alterar um link no site inteiro na pgina 482.) Quando for escolhida a opo Prompt (Solicitar), o Dreamweaver exibir primeiramente uma caixa de dilogo contendo uma lista de todos os arquivos afetados pela alterao. Clique em Update (Atualizar) para atualizar os links nesses arquivos ou em Don't Update (No atualizar) para deix-los inalterados.
4.
Clique em OK.
Para criar um arquivo de cache do site:

1.
Selecione Site > Manage Sites (Gerenciar Sites). A caixa de dilogo Edit Sites (Editar os sites) exibida. Selecione um site e, em seguida, clique em Edit (Editar). A caixa de dilogo Site Definition (Definio do site) exibida. Clique na guia Advanced para exibir a categoria Advanced da caixa de dilogo Site Definition (Definio de site). Selecione Local Info (Informaes locais), na lista de categorias, esquerda. A caixa de dilogo Site Definition (Definio do site) exibir as opes de Local Info (Informaes locais).
2.
3.
4.
5.
Na categoria Local Info (Informaes locais), marque a caixa de seleo Enable Cache (Ativar o cache).
Na primeira vez que voc alterar ou excluir os links de arquivo na pasta local aps inicializar o Dreamweaver, o Dreamweaver perguntar se voc deseja carregar o cache. Se voc clicar em Yes (Sim), o cache ser carregado e o Dreamweaver atualizar todos os links associados ao arquivo alterado. Se escolher No (No), as alteraes podero ser observadas no cache, porm este no ser carregado e o Dreamweaver no atualizar os links. possvel que o cache demore alguns minutos para ser carregado nos sites maiores; a maior parte deste perodo gasta na comparao entre os horrios 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, no haver problemas em clicar em Stop (Parar), quando o boto for exibido.
480
Para criar novamente o cache do seu site:
No painel Files (Arquivos), selecione Site > Advanced (Avanado) > Recreate Site Cache (Recriar cache do site).
Modificar links no mapa do site

A estrutura do site pode ser modificada no mapa do site atravs da incluso, alterao e remoo dos links. O Dreamweaver atualiza automaticamente o mapa do site para exibir as alteraes feitas no site.
Para alterar um link:
1.
No mapa do site, selecione uma pgina da qual ser alterado o link (para que o documento vinculado a esta pgina indique outra) e siga um dos procedimentos abaixo:
Escolha Site > Change Link (Alterar o link) (no Windows), ou Site > Site Map View (Visualizao do mapa do site) > Change Link (Alterar o link) (no Macintosh).
NO TA
Use o menu Site do painel Files (Arquivos).
Clique com o boto direito do mouse (no Windows) ou clique com a tecla Control pressionada (Macintosh) e, em seguida, escolha Change Link (Alterar o link), no menu contextual.
2. 3.
V at o arquivo que o link ir indicar ou digite uma URL. Clique em OK.
Para remover um link:

1. 2.
Selecione a pgina no mapa de sites. Siga um dos procedimentos abaixo:
Selecione Site > Remove Link (Windows) ou Site > Site Map View > Remove Link (Macintosh).
NO T A
Use o menu Site do painel Files (Arquivos).
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida, selecione Remove Link (Remover link) no menu de contexto.
A remoo de um link no exclui o arquivo, mas remove o link da origem de HTML na pgina que est indicando o link.
Gerenciar links
481
Para abrir a origem de um link:

1. 2.
Selecione um arquivo no mapa do site. Siga um dos procedimentos abaixo:
Selecione Site > Open Source of Link (Abrir a origem do link) (no Windows) ou Site > Site Map View (Visualizao do mapa do site) > Open Source of Link (Abrir a origem do link) (no Macintosh). Clique com o boto direito do mouse (no Windows) ou clique com a tecla Control pressionada (Macintosh) e, em seguida, escolha Open Source of Link (Abrir a origem do link), no menu de contexto.
O Property inspector e o arquivo de origem que contm o link sero abertos na janela do documento, com o link realado. Tpicos relacionados Vincular arquivos e documentos na pgina 468
Trabalhar com um mapa visual do site na pgina 137
Alterar um link no site inteiro

Alm de o Dreamweaver atualizar os links de modo automtico sempre que um arquivo for movido ou renomeado, tambm possvel alterar manualmente todos os links (inclusive os de correio eletrnico, FTP, nulos e de scripts) para que estes indiquem outras localizaes. Esta opo pode ser utilizada a qualquer momento (por exemplo: as palavras os filmes deste ms 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 necessrio excluir um arquivo vinculado a outros arquivos.
Para alterar um link no site inteiro:
1.
Selecione um arquivo na visualizao local do painel Files (Arquivos).

N OT A
Se a alterao for efetuada em um link de correio eletrnico, FTP ou script, no necessrio selecionar um arquivo.
2.
Selecione Site > Change Link Sitewide (Alterar o link no site inteiro).
482
Ser exibida a caixa de dilogo Change Link Sitewide (Alterar o link no site inteiro).
3.
Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK. O Dreamweaver atualizar todos os documentos que possuam links associados ao arquivo selecionado, de maneira que indiquem o novo arquivo, utilizando o formato de caminho utilizado no documento (por exemplo: se o caminho antigo for relativo ao documento, o novo caminho tambm ser deste tipo). O tipo de link, relativo ao documento ou raiz, no problema. O Dreamweaver atualizar automaticamente o link.
4.
Aps a alterao de um link no site inteiro, o arquivo selecionado se tornar rfo (ou seja, nenhum arquivo na unidade local o indicar). A excluso do mesmo no causar problemas, pois no romper quaisquer links existentes no site local do Dreamweaver.
NO T A
Como todas as alteraes esto ocorrendo localmente, ser necessrio excluir manualmente o arquivo rfo correspondente no site remoto e colocar ou devolver quaisquer arquivos nos quais tiverem ocorrido alteraes nos links para que os visitantes do seu site possam visualiz-las.
Inserir menus de salto

Os menus de salto permitem associar URLs a opes de uma lista de menu pop-up. Ao escolher um elemento da lista, o usurio ser redirecionado (ou saltar) para a URL definida. Menus de salto so inseridos com o objeto de formulrio Jump Menu (Menu de salto).
Para inserir um menu de salto:
1. 2.
Abra um documento, em seguida coloque o ponto de insero na janela do documento. Siga um dos procedimentos abaixo:

Selecione Insert (Inserir) > Form (formulrio) > Jump Menu (Menu de salto). Na categoria Form da barra Insert, clique no boto Jump Menu.
483
A caixa de dilogo Insert Jump Menu (Inserir menu de salto) exibida.
3.
Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK. O menu de salto ser exibido no documento.
4.
Tpicos relacionados Menus de salto na pgina 465
Solucionar problemas nos menus de salto na pgina 485
Editar itens do menu de salto

Ao editar os itens de um menu de salto, possvel alterar a ordem da lista ou o arquivo ao qual um item est vinculado. Tambm possvel adicionar, excluir ou renomear um item. Para alterar o local em que um arquivo vinculado aberto, para adicionar ou alterar um aviso de seleo no menu, deve ser utilizado o painel Behaviors (Comportamentos) (consulte Jump Menu (Menu de salto) na pgina 560).
Para editar um item do menu de salto com o Property inspector:
1.
Caso o Property inspector esteja fechado, escolha Window (Janela) > Properties (Propriedades). Na visualizao do projeto da janela do documento, clique no objeto menu de salto para selecion-lo. Aparecer o cone List/Menu (lista/menu), no Property inspector. No Property inspector, clique no boto List Values (Valores da lista).
2.
3.
484
A caixa de dilogo List Values (Valores da lista) ser exibida.
4.
Altere os itens do menu e, em seguida, clique em OK.
Inserir menus de salto na pgina 483
Solucionar problemas nos menus de salto

Depois que o usurio seleciona um item do menu de saltos, no h forma de voltar a selecion-lo caso o usurio navegue de volta para aquela pgina, ou se a caixa de texto Open URL In (Abrir a URL em) especificar um quadro como destino. H duas maneiras de contornar esse problema:
Utilize um aviso de seleo no menu, como uma categoria ou instruo do usurio, por exemplo: Escolha uma opo. O aviso de seleo no menu escolhido de novo, automaticamente, aps cada seleo no menu. Utilize um boto Go (Ir), que permite ao usurio visitar de novo o link selecionado.
N O TA
Selecione apenas uma dessas opes para cada menu de salto na caixa de dilogo Insert Jump Menu, pois elas aplicam-se a um menu de salto inteiro.

Inserir menus de salto na pgina 483 Editar itens do menu de salto na pgina 484
485
Usar as barras de navegao

Uma barra de navegao composta por uma imagem (ou um conjunto de imagens), que se altera de acordo nas aes do usurio. Antes de usar o comando Insert Navigation Bar (Inserir barra de navegao), voc deve criar um conjunto de imagens para exibir os estados de cada elemento de navegao. Pode ser mais fcil imaginar um elemento da barra de navegao como um boto porque, quando clicado, ele conduzir o usurio a outra pgina. Aps criar uma barra de navegao para um documento, voc pode adicionar ou remover imagens da barra de navegao com o comando Modify Navigation Bar (Modificar barra de navegao). Use esse comando para alterar uma imagem ou um conjunto de imagens, alterar o arquivo a ser aberto quando um elemento for clicado, selecionar outra janela ou quadro para abrir um arquivo e reordenar as imagens. Tpicos relacionados Barras de navegao na pgina 466
Inserir uma barra de navegao

Ao inserir uma barra de navegao, voc pode escolher nomes para os elementos dessa barra e imagens a serem usadas para represent-los.
DICA
Voc pode criar uma barra de navegao, copi-la para outra pginas do seu site, utiliz-la com quadros e editar os comportamentos da pgina, para mostrar os diferentes estados medida que as pginas so acessadas.
Para criar uma barra de navegao:

1.
Selecione Insert (Inserir) > Image Objects (Objetos de imagem) > Navigation Bar (Barra de navegao). Na categoria Common da barra Insert, clique no menu Images e selecione o boto Insert Navigation Bar (Inserir barra de navegao).
486
Aparecer a caixa de dilogo Insert Navigation Bar (Inserir barra de navegao).
2.
3.
Tpicos relacionados Barras de navegao na pgina 466
Modificar uma barra de navegao

Quando for criada uma barra de navegao para um documento, as suas imagens podero ser adicionadas ou removidas atravs do comando Modify Navigation Bar (Modificar a barra de navegao).
Para modificar uma barra de navegao:
1. 2.
Selecione a barra de navegao na pgina ativa. Selecione Modify (Modificar) > Navigation Bar (Barra de navegao).
Usar as barras de navegao
487
Aparecer a caixa de dilogo Modify Navigation Bar (Modificar a barra de navegao).
3.
Na lista Nav Bar Elements (Elementos da barra de navegao), selecione o elemento a ser editado. Faa as alteraes necessrias. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
4.
5.
Tpicos relacionados Barras de navegao na pgina 466
Inserir uma barra de navegao na pgina 486
Usar mapas de imagens

Um mapa de imagens uma imagem que foi dividida em regies, ou pontos ativos; quando um ponto ativo for clicado, ocorrer uma ao (um novo arquivo ser aberto, por exemplo). Tpicos relacionados Sobre mapas de imagens na pgina 467
488
Inserir mapas de imagens no lado do cliente

Quando voc inserir um mapa de imagens no lado do cliente, crie uma rea de ponto ativo e, em seguida, defina o link que ser aberto quando o usurio clicar nessa rea.
NO T A
Podem ser criadas vrias reas de pontos ativos, mas elas fazem parte do mesmo mapa de imagens.
Para criar um mapa de imagens no lado do cliente:

1. 2.
Na janela do documento, selecione a imagem. Clique na seta de expanso, no canto inferior direito do Property inspector, para examinar todas as propriedades. Na caixa de texto Map Name (Nome do mapa), digite um nome exclusivo para o mapa de imagens.
N OT A
3.
Caso sejam utilizados vrios 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 crculo e arraste o cursor sobre a imagem para criar um ponto ativo circular. Selecione a ferramenta de retngulo e arraste o cursor sobre a imagem para criar um ponto ativo retangular. Selecione a ferramenta de polgono e defina um ponto ativo com forma irregular, clicando uma vez em cada canto. Clique na ferramenta de seta para fechar o formato.
Aps a criao do ponto ativo, ser exibido o Property inspector de ponto ativo.
5.
Preencha o Property inspector de ponto ativo. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector. No final do mapeamento da imagem, clique em uma rea em branco do documento para alterar o Property inspector.
6.
Tpicos relacionados Sobre mapas de imagens na pgina 467
Usar mapas de imagens
489
Modificar um mapa de imagens

Os pontos ativos criados em um mapa de imagens podem ser facilmente editados. possvel mover uma rea de ponto ativo, redimensionar pontos ativos e mov-los para frente ou para trs em uma camada. possvel 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 tambm sero copiados no novo documento.
Para selecionar vrios pontos ativos em um mapa de imagens:
1. 2.
Utilize a ferramenta de indicador de ponto ativo para selecionar um ponto ativo. Siga um dos procedimentos abaixo:

Pressione a tecla Shift e clique nos outros pontos ativos a serem selecionados Pressione as teclas Control e A (no Windows), ou Command e A (no Macintosh), 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. Siga um dos procedimentos abaixo:

2.
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 direo selecionada. Utilize as teclas de seta para mover um ponto ativo um pixel na direo selecionada.
Para redimensionar um ponto ativo:

1.
Utilize a ferramenta de indicador de ponto ativo para selecionar o ponto ativo a ser redimensionado. Arraste uma ala do seletor de pontos ativos para alterar o tamanho ou a forma do ponto ativo.
2.
Tpicos relacionados Sobre mapas de imagens na pgina 467
Inserir mapas de imagens no lado do cliente na pgina 489
490
Anexar comportamentos JavaScript aos links

Um comportamento pode ser anexado a qualquer link em um documento (consulte Aplicao de um comportamento na pgina 544). Considere a possibilidade de utilizar os seguintes comportamentos ao inserir elementos vinculados em seus documentos: determina o texto da mensagem exibida na barra de status na parte inferior esquerda da janela do navegador. Por exemplo: possvel utilizar esta ao para descrever o destino de um link na barra de status, em vez de mostrar a URL a ele associada. Consulte Set Text of Status Bar (Definir a mensagem de status) na pgina 568.
Set Text of Status Bar (Definir texto da barra de status) Open Browser Window (Abrir a janela do navegador) abre um URL em uma nova janela.
possvel especificar as propriedades da nova janela, inclusive o seu tamanho, nome e atributos (se ela ser redimensionvel, possuir uma barra de menus etc.). Consulte Open Browser Window (Abrir a janela do navegador) na pgina 561.
Jump Menu (Menu de salto) edita
um menu de salto. possvel alterar a lista de menus, especificar um arquivo vinculado diferente ou modificar o local do navegador no qual os documentos vinculados sero abertos. Consulte Jump Menu (Menu de salto) na pgina 560.
Set Nav Bar Image (Definir imagem da barra de navegao) permite alterar o comportamento da barra de navegao. Utilize esse comportamento para personalizar a maneira como as imagens sero exibidas na barra de navegao. Por exemplo: quando o cursor estiver sobre uma parte da barra de navegao, a exibio das outras imagens na barra ou no documento ser alterada. Consulte Set Nav Bar Image (Definir imagem da barra de navegao) na pgina 565.
Verificar links rompidos, externos e rfos

Use o recurso Check Links (Verificar links) para procurar links rompidos e arquivos sem referncias tambm conhecidos como rfos (arquivos que ainda existem no site apesar de nenhum outro referir-se a ele) em um arquivo aberto, uma parte de um site local ou em todo o site local. 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, porm no os verificar.
Verificar links rompidos, externos e rfos
491
Tambm possvel identificar e excluir arquivos que no mais so usados por outros arquivos do site. Para obter mais informaes, consulte Identificar e excluir arquivos no-utilizados na pgina 162.
Para verificar os links no documento:
1. 2.
Salve o arquivo em um local no site Dreamweaver local. Selecione File (Arquivo) > Check Page (Verificar a pgina) > Check Links (Verificar os links). O relatrio Broken Links (Links rompidos) ser exibido no painel Link Checker (Verificador de links), dentro do grupo de painis Results (Resultados).
3.
No painel Link Checker (Verificador de links), selecione External Links (Links externos) no menu pop-up Show (Mostrar) para exibir outro relatrio. O relatrio External Links (Links externos) exibido no painel Link Checker (Verificador de links) dentro do grupo de painis (Resultados).
DICA
possvel verificar arquivos rfos ao verificar os links em todo o site.
4.
Para salvar o relatrio, clique no boto Save Report (Salvar o relatrio) no painel Link Checker (Verificador de links).
N OT A
O relatrio do navegador de destino um arquivo temporrio e ser perdido se no for salvo.
Para verificar os links em uma parte de um site local:

1. 2. 3.
No painel Files (Arquivos), selecione um site no menu pop-up Current Sites (Sites atuais). Em Local view (Visualizao local), selecione os arquivos ou pastas a serem verificados. Inicie a verificao seguindo um dos procedimentos abaixo:
Clique com o boto direito do mouse ou clique mantendo a tecla Control pressionada (no Macintosh) em um dos arquivos selecionados e, no menu contextual, selecione Check Links (Verificar os links) > Selected Files/Folders (Arquivos/pastas selecionadas). Selecione File (Arquivo) > Check Page (Verificar a pgina) > Check Links (Verificar os links).
O relatrio Broken Links (Links rompidos) ser exibido no painel Link Checker (Verificador de links), dentro do grupo de painis Results (Resultados).
492
4.
No painel Link Checker (Verificador de links), selecione External Links (Links externos) no menu pop-up Show (Mostrar) para exibir outro relatrio. O relatrio External Links (Links externos) exibido no painel Link Checker (Verificador de links) dentro do grupo de painis (Resultados).
D IC A
possvel verificar arquivos rfos ao verificar os links em todo o site (consulte o procedimento a seguir).
5.
Para salvar o relatrio, clique no boto Save Report (Salvar relatrio) no painel Link Checker (Verificador de links).
Para verificar os links no site inteiro:

1. 2.
No painel Files (Arquivos), selecione um site no menu pop-up Current Sites (Sites atuais). Escolha Site > Check Links Sitewide (Verificar os links no site inteiro). O relatrio Broken Links (Links rompidos) ser exibido no painel Link Checker (Verificador de links), dentro do grupo de painis Results (Resultados).
3.
No painel Link Checker (Verificador de links), selecione External Links (Links externos) ou Orphaned Files (Arquivos rfos) no menu pop-up Show (Mostrar) para exibir outro relatrio. Uma lista de arquivos correspondentes ao tipo de relatrio selecionado aparecer no painel Link Checker (Verificador de links).
N OT A
Se Orphaned Files for selecionado como tipo de relatrio, ser possvel exclulos diretamente na caixa de dilogo Link Checker selecionando um arquivo na lista e pressionando a tecla Delete.
4.
Para salvar o relatrio, clique no boto Save Report (Salvar relatrio) no painel Link Checker (Verificador de links).
Corrigir links rompidos

Aps obter um relatrio de links ser possvel corrigir diretamente no painel Link Checker (Verificador de links) links e referncias a imagens rompidos. Tambm possvel abrir os arquivos da lista e ajustar os links no Property inspector.
Para corrigir os links no painel Link Checker (Verificador de links):
1.
Execute um relatrio de verificao de links (consulte Verificar links rompidos, externos e rfos na pgina 491).
Corrigir links rompidos
493
2.
Na coluna Broken Links (e no na coluna Files) do painel Link Checker (no grupo de painel Results), selecione o link rompido. Ser exibido o cone com uma pasta ao lado do link rompido. Clique no cone correspondente pasta para localizar o arquivo correto ou digite o caminho correto e o nome do arquivo para associar o link. Clique na tecla Tab (Windows) ou Return (Macintosh). Se houver outras referncias rompidas a este mesmo arquivo, aparecer uma caixa de dilogo que o solicitar a ajustar as referncias tambm nos outros arquivos. Clique em Yes para que o Dreamweaver atualize todos os documentos da lista que fizerem referncia a esse arquivo. Clique em No para que o Dreamweaver atualize apenas a referncia atual.
NO T A
3.
4.
Se a opo Enable File Check In and Check Out (Ativar a devoluo e retirada de arquivos) estiver ativada neste site, o Dreamweaver tentar retirar os arquivos que precisarem ser alterados. Se no conseguir retirar um arquivo, o Dreamweaver exibir uma caixa de dilogo de aviso e manter inalteradas as referncias rompidas. Consulte Devolver e retirar arquivos na pgina 148.
Para corrigir links no Property inspector:

1.
Execute um relatrio de verificao de links (consulte Verificar links rompidos, externos e rfos na pgina 491). Clique no painel Link Checker (Verificador de links) no grupo de painis Results (Resultados) e clique duas vezes em uma entrada na coluna File (Arquivo). O Dreamweaver abrir o documento, selecionar a imagem ou link com problema e realar o caminho e o nome do arquivo no Property inspector. Caso o Property inspector no esteja visvel, escolha Window (Janela) > Properties (Propriedades), para abri-lo.
2.
3.
Clique no cone correspondente pasta para localizar o arquivo correto ou sobrescreva o texto realado para definir um novo caminho e nome de arquivo no Property inspector. Se estiver atualizando a referncia de uma imagem e a nova imagem aparecer com o tamanho incorreto, clique nos identificadores W (L) e H (A) no Property inspector, ou clique no boto Refresh (Atualizar) para redefinir os valores relativos altura e largura. Os identificadores W (L) e H (A) passaro de negrito para o tipo normal.
4.
Salve o arquivo.
medida que os links forem sendo corrigidos, suas entradas desaparecero da lista do Link Checker (Verificador de links). Se uma entrada for mostrada na lista aps digitar o novo caminho e nome de arquivo no Link Checker (ou aps salvar as alteraes feitas no Property inspector), isso indica que o Dreamweaver no conseguiu localizar o novo arquivo e o link no pde ser corrigido.
494
Abrir documentos vinculados no Dreamweaver

Os links no esto ativos no Dreamweaver, ou seja, no possvel 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 Modify (Modificar) > Open Linked Page (Abrir pgina vinculada). Pressione a tecla Control (no Windows) ou Command (no Macintosh) e clique duas vezes no link.
NO TA
O documento vinculado deve estar localizado no disco local.
Tpicos relacionados Visualizar e testar pginas em navegadores na pgina 399

Verificar links rompidos, externos e rfos na pgina 491 Corrigir links rompidos na pgina 493
Abrir documentos vinculados no Dreamweaver
495
496
CAPTULO 16
Trabalhar com outros aplicativos

Macromedia Fireworks 8 e Macromedia Flash 8 so poderosas ferramentas de desenvolvimento para a Web projetadas para criar grficos e arquivos SWF para visualizao de pginas da Web. Voc pode integrar totalmente essas ferramentas ao Macromedia Dreamweaver 8 para simplificar o fluxo de trabalho de design de sites da Web. possvel inserir facilmente imagens ou tabelas do Fireworks e contedo Flash (arquivos SWF) em um documento do Dreamweaver. Tambm possvel aproveitar os recursos de integrao entre o Dreamweaver e o Fireworks e o Flash para fazer alteraes em uma imagem ou filme aps sua insero em um documento Dreamweaver.
N OT A
16
Para usar o Dreamweaver junto com o Fireworks e o Flash, os trs aplicativos devem estar instalados no seu computador.

Sobre a integrao com o Fireworks e com o Flash . . . . . . . . . . . . . . . . . . . . . . . . .497 Otimizar o ambiente de trabalho para Fireworks e Flash . . . . . . . . . . . . . . . . . . . . 498 Trabalhar com o Fireworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499 Trabalhar com o Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512
Sobre a integrao com o Fireworks e com o Flash

A edio Roundtrip e as Design Notes ativam o Dreamweaver para operaes de integrao com o Fireworks e com o Flash. A edio Roundtrip garante que as atualizaes de cdigo sejam corretamente transferidas entre o Dreamweaver e estes outros aplicativos (por exemplo, para preservar os comportamentos cambiveis e os links para outros arquivos).
497
Design Notes (Anotaes de projeto) so pequenos arquivos que permitem que o Dreamweaver localize o documento de origem adequado para uma imagem ou um arquivo de filme exportado. Ao exportar os arquivos do Fireworks ou Flash diretamente para um site Dreamweaver definido, as Design Notes que contm as referncias ao arquivo de autoria PNG ou Flash (FLA) so automaticamente exportadas para o site junto com o arquivo pronto para Web (GIF, JPEG ou SWF). Para obter informaes, veja Sobre o Design Notes na pgina 116. Alm das informaes de localizao, as Design Notes contm outras informaes 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 contm pontos ativos ou cambiveis, o JavaScript dos pontos ativos ou cambiveis est contido no documento HTML que o Fireworks exporta.
Otimizar o ambiente de trabalho para Fireworks e Flash

A chave para desenvolver um fluxo de trabalho que se integre suavemente com Fireworks ou com Flash a otimizao do ambiente de trabalho.
Para otimizar seu ambiente de trabalho para Fireworks e Flash:
1.
Assegure-se de que as Design Notes estejam ativadas em seu site Dreamweaver. As Design Notes ativam-se automaticamente, a menos que voc tenha alterado as definies padro do seu site. Para obter mais informaes sobre a ativao das Design Notes, veja Ativar e desativar as Design Notes de um site na pgina 168. Para obter informaes sobre a funo das Design Notes, consulte Sobre a integrao com o Fireworks e com o Flash na pgina 497.
2.
Para iniciar facilmente o Fireworks do Dreamweaver, defina o Fireworks como o editor de imagens externo primrio do Dreamweaver. Defina o Fireworks como editor primrio para os arquivos grficos do tipo: GIF, PNG e JPEG. Para obter mais informaes, consulte Usar um editor de imagens externo na pgina 458 em Using Dreamweaver.
3.
Salve os arquivos-fonte e os arquivos prontos para Web do Fireworks e Flash na pasta definida do site do Dreamweaver. Esse procedimento garante que qualquer usurio 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.
498
Captulo 16: Trabalhar com outros aplicativos
4.
Ao exportar seus arquivos de imagens do Fireworks, exporte-os para a pasta do site do Dreamweaver. Ao exportar uma imagem grfica GIF ou JPEG do Fireworks para uma pasta do site do Dreamweaver, o Fireworks cria uma pasta named _notes na mesma pasta. Esta pasta contm as Design Notes que o Dreamweaver precisa para trabalhar com o Fireworks.
Trabalhar com o Fireworks

O Dreamweaver e o Fireworks reconhecem e compartilham muitos procedimentos de edio de arquivos, incluindo alteraes em links, mapas de imagens, cortes de tabela, etc. Juntos, os dois aplicativos fornecem um fluxo de trabalho contnuo para edio, otimizao e colocao dos arquivos grficos da Web em pginas HTML.
Inserir imagens do Fireworks

As imagens grficas do Fireworks podem ser colocadas em um documento Dreamweaver de vrias maneiras. possvel colocar uma imagem grfica exportada do Fireworks diretamente em um documento Dreamweaver, utilizando o comando Insert Image (Inserir imagem), ou criar uma nova imagem grfica do Fireworks a partir de um alocador de espao para imagem do Dreamweaver (consulte Utilizar o Fireworks para modificar alocadores de espao de imagem do Dreamweaver na pgina 502).
Para inserir um caractere especial em um documento:
1.
No documento Dreamweaver, coloque o ponto de insero onde deseja que a imagem seja exibida e, depois, siga um dos procedimentos abaixo:

Selecione Insert (Inserir) > Image (Imagem). Na categoria Common (Comuns) da barra Insert (Inserir), clique no boto Image (Imagem) ou arraste-o para o documento.
2.
Navegue para o arquivo exportado do Fireworks desejado e clique em OK (no Windows) ou Open (no Macintosh).
NO T A
Se o arquivo do Fireworks no estiver no site do Dreamweaver atual, ser exibida uma mensagem perguntando se o usurio deseja copiar o arquivo para a pasta raiz. Clique em Sim.
499
Edio de uma imagem ou tabela do Fireworks no Dreamweaver

possvel acionar o Fireworks do Dreamweaver para editar as imagens inseridas em um documento do Dreamweaver. Quando voc abre e edita uma imagem ou um corte da imagem que faz parte de uma tabela do Fireworks, o Dreamweaver inicia o Fireworks, que abre o arquivo PNG do qual a imagem ou a tabela foi exportada. Quando a imagem faz parte de uma tabela do Fireworks, possvel abrir a tabela inteira do Fireworks para edio, enquanto houver o comentrio  no cdigo HTML. Se o PNG de origem foi exportado do Fireworks para um site do Dreamweaver utilizando o HTML do estilo Dreamweaver e a definio de imagens, o comentrio da tabela do Fireworks automaticamente inserido no cdigo HTML.
Para iniciar e editar uma imagem do Fireworks colocada no Dreamweaver:
1.
No Dreamweaver, selecione Window > Properties para abrir o Property inspector, caso ainda no esteja aberto. Clique na imagem ou corte de imagem para selecion-la. Ao selecionar uma imagem exportada do Fireworks, o Property inspector (Inspetor de propriedades) identifica a seleo como uma imagem ou tabela do Fireworks e exibe o nome do arquivo PNG.
2.
3.
Para iniciar o Fireworks para edio, siga um dos procedimentos abaixo:

No Property inspector, clique em Edit (Editar). Pressione a tecla Control (no Windows) ou Command (no Macintosh) e clique duas vezes na imagem selecionada. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada e clique (no Macintosh) na imagem selecionada e escolha Edit With Fireworks (Editar com Fireworks) no menu contextual.
O Fireworks iniciado e abre o PNG associado para edio .

NO T A
Se o Fireworks no puder localizar o arquivo de origem, ele solicitar a localizao do arquivo de origem PNG. Ao trabalhar com o arquivo de origem do Fireworks, as alteraes so salvas para o arquivo de origem e para o arquivo exportado; caso contrrio, somente o arquivo exportado atualizado.
4.
No Fireworks, edite o PNG de origem.
500
5.
Ao terminar a edio, clique em Done (Concludo). O Fireworks salva as alteraes 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.
Otimizao de uma imagem do Fireworks no Dreamweaver

possvel iniciar o Fireworks do Dreamweaver para fazer alteraes de exportao rpidas, como redimensionamento de uma imagem ou alterao do tipo de arquivo, para imagens e animaes do Fireworks includas. O Fireworks permite as alteraes nas definies de otimizao, nas definies de animao, no tamanho e na rea da imagem exportada.
Para alterar as definies de otimizao de uma imagem do Fireworks colocada no Dreamweaver:
1.
No Dreamweaver, selecione a imagem desejada e escolha Commands (Comandos) > Optimize Image in Fireworks (Otimizar imagem no Fireworks). Se solicitado, especifique se um arquivo de origem do Fireworks deve ser iniciado para a imagem includa. No Fireworks, faa as alteraes desejadas na caixa de dilogo Optimization (Otimizao):
2.
3.
Para editar as definies de otimizao, clique na guia Options (Opes). Para obter mais informaes, consulte Using Fireworks (Usando o Fireworks). Para editar o tamanho e a rea da imagem exportada, clique na guia Arquivo.
4.
Ao terminar a edio da imagem, clique em Atualizar. Ao clicar em Atualizar, a imagem exportada utilizando as novas definies de otimizao, o GIF ou JPEG posicionado no Dreamweaver atualizado, e o arquivo de origem PNG salvo, se um arquivo de origem foi selecionado. Se o usurio alterou o formato da imagem, o verificador do link do Dreamweaver avisa sobre a atualizao das referncias imagem. Por exemplo, se o usurio alterou o formato de uma imagem chamada my_image de GIF para JPEG, clicando em OK neste prompt muda todas as referncias a my_image.gif no site para my_image.jpg.
501
Utilizar o Fireworks para modificar alocadores de espao de imagem do Dreamweaver

possvel criar uma imagem de alocao de espao em um documento do Dreamweaver e iniciar o Fireworks para projetar uma imagem grfica ou tabela do Fireworks para substitu-la. Para obter informaes sobre a insero de um alocador de espao de imagem, veja Inserir alocador de espao de imagem na pgina 450. Para criar uma nova imagem de um alocador de espao de imagem, o usurio deve ter o Dreamweaver e o Fireworks instalados no sistema.
Para editar uma imagem do alocador de espao do Dreamweaver no Fireworks:
1.
Certifique-se de que o Fireworks j esteja definido como editor de imagens para os arquivos .png. Para obter mais informaes, consulte Usar um editor de imagens externo na pgina 458 em Using Dreamweaver. Na janela do documento, clique no alocador de espao de imagem para selecion-la. Siga um dos procedimentos abaixo para iniciar o Fireworks para edio:

2. 3.
No Property inspector, clique em Create (Criar). Pressione a tecla Control (no Windows) ou Command (no Macintosh) e clique duas vezes no alocador de espao de imagem. Clique com boto direito (Windows) ou clique e mantenha pressionada a tecla Control (Macintosh) sobre o alocador de espao de imagem e selecione Create Image in Fireworks (Criar imagem no Fireworks).
O Fireworks ser iniciado no modo Editing from Dreamweaver (Edio do Dreamweaver).
502
4.
Utilize as opes do Fireworks para projetar a imagem. O Fireworks reconhece as definies a seguir do alocador de espao de imagem, que podem ter sido definidas ao trabalhar com o alocador de espao de imagem no Dreamweaver: tamanho da imagem (que diz respeito ao tamanho da tela do Fireworks), ID da imagem (que o Fireworks usa como nome de documento padro do arquivo de origem e do arquivo de exportao criado), alinhamento de texto e comportamentos reconhecidos pelo Fireworks (como imagem de troca, menu pop-up, barra de navegao e texto definido). O Fireworks tambm reconhece os links anexados ao alocador de espao de imagem enquanto trabalha no Dreamweaver.
NO T A
Apesar de os links adicionados a um alocador de espao de imagem no poderem ser vistos no Fireworks, eles so preservados. Se voc desenhar um ponto ativo e adicionar um link no Fireworks, ele no excluir o link adicionado ao alocador de espao de imagem no Dreamweaver; no entanto, se voc remover um corte do Fireworks da nova imagem, ele excluir o link do documento do Dreamweaver quando voc substituir o alocador de espao da imagem.
As seguintes definies do alocador de espao de imagem esto desativadas no Property inspector do alocador de espao de imagem, j que elas no so reconhecidas pelo Fireworks: alinhamento de imagem, cor, Vspace e Hspace e mapas.
5.
Ao finalizar, clique em Done (Concludo). A caixa de dilogo Save as (Salvar como) ser exibida. O Fireworks avisa o usurio para salvar o arquivo PNG.
6.
Na caixa de texto Save In (Salvar em), escolha a pasta definida como pasta do site local do Dreamweaver. Se voc tiver atribudo um nome ao alocador de espao de imagem ao inseri-lo no documento do Dreamweaver, o Fireworks preencher a caixa de texto File Name (Nome do arquivo) com esse nome. possvel alterar esse nome, se desejar.
7.
Clique em Save (Salvar) para salvar o arquivo PNG. A caixa de dilogo Export (Exportar) ser exibida. Use esta caixa de dilogo para exportar a imagem como GIF, JPEG ou, no caso de imagens cortadas, como HTML e imagens.
8. 9.
Na caixa de dilogo Export (Exportar), selecione a pasta do site local do Dreamweaver. A caixa de texto Name (Nome) ser atualizada automaticamente com o mesmo nome usado para o arquivo PNG. Digite o texto para alterar o nome, se desejar. Save As Type (Salvar como tipo), selecione os tipos de arquivo que deseja exportar, como Images only (Somente imagens) ou HTML and Images (HTML e Imagens).
10. Para
503
11.
Clique em Save (Salvar) para salvar o arquivo exportado. O arquivo ser salvo e o foco retornar ao Dreamweaver. No documento Dreamweaver, o arquivo exportado ou a tabela do Fireworks substitui o alocador de espao de imagens.
Editar menus pop-up do Fireworks no Dreamweaver

possvel criar um menu pop-up no Fireworks 8 ou posterior e depois edit-lo com o Dreamweaver ou com o Fireworks (usando a edio Roundtrip), mas no com ambos. Se voc editar os menus no Dreamweaver e depois edit-los no Fireworks, perder todas as suas edies anteriores, com exceo do contedo de texto. Caso voc prefira editar os menus com o Dreamweaver, possvel usar o Fireworks para criar o menu pop-up e depois usar o Dreamweaver exclusivamente para ajustar e personalizar o menu. Caso voc prefira editar os menus no Fireworks, possvel usar o recurso de edio Roundtrip no Dreamweaver, mas os menus no devem ser editados diretamente no Dreamweaver.
Para utilizar a edio Roundtrip para editar um menu pop-up do Fireworks:
1.
No Dreamweaver, selecione a tabela do Fireworks que contm o menu pop-up e depois clique em Edit (Editar) no Property inspector (Inspetor de propriedades).
O arquivo de origem PNG aberto no Fireworks.

2.
No Fireworks, edite o menu com o Pop-up Menu Editor (Editor de menus pop-up) e depois clique em Done (Concludo) na barra de ferramentas do Fireworks.
O Fireworks devolver o menu pop-up editado ao Dreamweaver.
504
Se voc criou um menu pop-up no Fireworks MX 2004 ou anterior, ser possvel edit-lo no Dreamweaver com a caixa de dilogo Show Pop-Up Menu (Mostrar o menu pop-up).
Para editar um menu pop-up criado no Fireworks MX 2004 ou anterior:
1. 2.
No Dreamweaver, selecione o ponto ativo ou a imagem que aciona o menu pop-up. No painel Behaviors (Comportamentos) (Shift+F3), clique duas vezes em Show Pop-Up Menu na lista Actions (Aes). A caixa de dilogo Show Pop-Up Menu exibida. O comportamento da opo Show PopUp menu (Mostrar menu pop-up) permite a edio ou atualizao do contedo de um menu pop-up baseado em HTML do Fireworks. possvel adicionar, excluir ou alterar os itens de menu, reorganiz-los e definir onde um menu est posicionado em uma pgina. Para obter informaes sobre a definio ou modificao das opes do menu pop-up, consulte Show Pop-Up Menu (Mostrar o menu pop-up) na pgina 572.
3.
Faa as alteraes que desejar no menu pop-up e clique em OK.
Especificar as preferncias de acionamento e edio para os arquivos de origem do Fireworks

As imagens que sero colocadas em suas pginas da Web sero exportadas pelo Fireworks normalmente de um arquivo de origem PNG, quando usar o Fireworks para edit-las. Quando abrir (acionar) um arquivo de imagem no Dreamweaver para edit-lo, o Fireworks automaticamente abrir o arquivo de origem PNG e solicitar a localizao do arquivo PNG, caso ele no possa ser encontrado. Se desejar, voc pode definir preferncias no Fireworks para que o Dreamweaver abra a imagem inserida ou lhe d a opo de usar o arquivo de imagem inserido ou o arquivo de origem do Fireworks sempre que voc abrir uma imagem no Dreamweaver.
NO T A
O Dreamweaver reconhece as preferncias de acionamento e edio do Fireworks somente em alguns casos. Especificamente, voc deve abrir e otimizar uma imagem que no faa parte de uma tabela do Fireworks e no contenha um caminho correto das Design Notes (Notas de design) para um arquivo PNG de origem.
Para especificar as preferncias de acionamento e edio do Fireworks:

1.
No Fireworks, selecione Edit (Editar) > Preferences (Preferncias) ou Fireworks > Preferences, no Macintosh, e clique na guia Launch and Edit (Acionar e editar), no Windows, ou selecione Launch and Edit no menu pop-up, no Macintosh.
505
2.
Especifique as opes de preferncia que sero utilizadas ao editar ou otimizar as imagens do Fireworks colocadas em um aplicativo externo: A opo Always Use Source PNG (Usar sempre o PNG de origem) abre automaticamente o arquivo PNG do Fireworks que ser definido na Design Note (Nota de design) como origem da imagem posicionada. As atualizaes so feitas tanto no PNG de origem quanto na imagem posicionada correspondente. A opo Never Use Source PNG (Nunca usar o PNG de origem) abre automaticamente a imagem posicionada do Fireworks, quer exista ou no um arquivo PNG de origem. As atualizaes so feitas somente na imagem posicionada. A opo Ask When Launching (Perguntar ao acionar) permite especificar a cada vez se voc deseja acionar ou no o arquivo PNG de origem. Ao editar ou otimizar uma imagem posicionada, o Fireworks exibe uma mensagem solicitando que ele tome uma deciso de acionamento e edio. Tambm possvel especificar as preferncias globais de acionamento e edio dessa mensagem.
Inserir cdigo HTML do Fireworks em um documento Dreamweaver

O comando Export (Exportar) no Fireworks permite exportar e gravar imagens otimizadas e arquivos HTML na pasta desejada do site do Dreamweaver. possvel inserir o arquivo no Dreamweaver. Para obter informaes sobre exportao de arquivos do Fireworks em formato HTML, consulte Using Fireworks (Usando o Fireworks). O Dreamweaver permite a insero de um cdigo HTML gerado pelo Fireworks, preenchido com imagens associadas, cortes e JavaScript, em um documento. Esse recurso de insero facilita a criao de elementos de design no Fireworks e a incorporao deles a um documento Dreamweaver existente.
Para inserir HTML proveniente do Fireworks em um documento Dreamweaver:
1.
No Dreamweaver, coloque o ponto de insero onde deseja que comece o cdigo HTML do Fireworks. Siga um dos procedimentos abaixo:
2.
Selecione Insert (Inserir) > Interactive Images (Imagens interativas) > Fireworks HTML (HTML do Fireworks). Na categoria Common (Comuns) da barra Insert (Insero), clique no boto Insert Fireworks HTML (Inserir HTML do Fireworks).
506
3.
Na caixa de dilogo que for exibida, clique em Browse (Procurar) para escolher o arquivo HTML desejado do Fireworks. Selecione a opo Delete File After Insertion (Excluir arquivo aps insero) para mover o arquivo HTML do Fireworks original para a Lixeira (no Windows) ou Trash (no Macintosh) quando a operao estiver concluda. Utilize essa opo, se no precisar mais do arquivo HTML do Fireworks aps inseri-lo. Essa opo no afeta o arquivo PNG de origem associado ao arquivo HTML.
NO TA
4.
Se o arquivo HTML estiver em uma unidade de disco da rede, ele ser permanentemente excludo no movido para a Lixeira.
5.
Clique em OK para inserir o cdigo HTML, junto com as imagens associadas, cortes e JavaScript, no documento Dreamweaver.
Colar o cdigo HTML do Fireworks no Dreamweaver

Uma maneira rpida de transferir as imagens e tabelas geradas pelo Fireworks para o Dreamweaver copiar e colar o cdigo HTML do Fireworks diretamente no documento Dreamweaver.
Para copiar e colar o cdigo HTML do Fireworks no Dreamweaver:
1. 2.
No Fireworks, escolha Edit (Editar) > Copy HTML Code (Copiar cdigo HTML). Siga o assistente pelas definies de exportao de HTML e imagens. Quando solicitado, especifique a pasta no site do Dreamweaver como destino para as imagens exportadas. O assistente exporta as imagens para o destino especificado e copia o cdigo HTML para a rea de transferncia.
3.
No Dreamweaver, posicione no documento o ponto de insero onde deseja colar o cdigo HTML e selecione Edit (Editar) > Paste (Colar). Todos os cdigos HTML e JavaScript associados aos arquivos Fireworks exportados so copiados para o documento Dreamweaver, e todos os links para as imagens so atualizados.
Para exportar e colar o cdigo HTML do Fireworks no Dreamweaver:

1. 2.
No Fireworks, escolha File (Arquivo) > Export (Exportar). Na caixa de dilogo Exportar, especifique a pasta no site do Dreamweaver como destino para as imagens exportadas. No menu pop-up Save As (Salvar como), escolha HTML and Images (HTML e Imagens).
3.
507
4.
No menu pop-up HTML, escolha Copy to Clipboard (Copiar para rea de transferncia) e, em seguida, clique em Save (Salvar). No Dreamweaver, posicione no documento o ponto de insero onde deseja colar o cdigo HTML exportado e escolha Edit (Editar) > Paste (Colar). Todos os cdigos HTML e JavaScript associados aos arquivos Fireworks exportados so copiados para o documento Dreamweaver, e todos os links para as imagens so atualizados.
5.
Atualizar o HTML do Fireworks colocado no Dreamweaver

No Fireworks, o comando File (Arquivo) > Update HTML (Atualizar HTML) fornece uma alternativa para a tcnica acionar e editar de atualizao de arquivos do Fireworks colocados no Dreamweaver. Com a Update HTML (Atualizao de HTML), possvel editar uma imagem do PNG de origem no Fireworks e atualizar automaticamente quaisquer cdigos HTML e arquivos de imagem exportados colocados em um documento Dreamweaver. Este comando permite a atualizao dos arquivos do Dreamweaver mesmo quando o Dreamweaver no est em execuo.
Para atualizar o cdigo HTML do Fireworks colocado no Dreamweaver:
1. 2. 3. 4.
No Fireworks, abra o PNG de origem e faa as edies desejadas nele. Selecione File (Arquivo) > Save (Salvar). No Fireworks, escolha File (Arquivo) > Update HTML (Atualizar HTML). Navegue para o arquivo do Dreamweaver que contm o cdigo HTML que deseja atualizar e clique em Open (Abrir). Navegue para o pasta de destino em que deseja colocar os arquivos de imagem atualizados e clique em Select (Selecionar) (no Windows) ou em Choose (no Macintosh). O Fireworks atualiza o cdigo HTML e JavaScript no documento Dreamweaver. O Fireworks tambm exporta as imagens atualizadas associadas ao cdigo HTML e coloca as imagens na pasta de destino especificada. Se o Fireworks no puder localizar o cdigo HTML correspondente para atualizar, ele fornece a opo de inserir um novo cdigo HTML no documento Dreamweaver. O Fireworks coloca a seo JavaScript do novo cdigo no comeo do documento e coloca a tabela HTML ou o link para a imagem no fim.
5.
508
Criao de um lbum de fotografias na Web

possvel gerar automaticamente um site da Web que apresente um lbum fotogrfico de imagens localizadas em uma determinada pasta. O Dreamweaver usa o Fireworks para criar uma imagem em miniatura e uma imagem maior para cada imagem na pasta. O Dreamweaver cria uma pgina da Web com todas as miniaturas, bem como os links para as imagens maiores. Para criar um lbum de fotografias na Web, preciso ter o Dreamweaver e o Fireworks 4 ou posterior instalados no sistema. Antes de comear, coloque todas as imagens do lbum de fotografias em uma nica pasta. (A pasta no precisa estar em um site.) Alm disso, assegure-se de que os nomes dos arquivos de imagem tenham uma das seguintes extenses: .gif, .jpg, .jpeg, .png, .psd, .tif ou .tiff. As imagens com extenses de arquivo no reconhecidas no so includas no lbum de fotografias.
Para criar um lbum de fotografias na Web:
1.
No Dreamweaver, escolha Commands (Comandos) > Create Web Photo Album (Criar lbum de fotografias na Web). Na caixa de texto Photo Album Title (Ttulo do lbum de fotografias), digite um ttulo. O ttulo ser exibido em um retngulo cinza na parte superior da pgina que contm as miniaturas. Caso deseje, possvel digitar at duas linhas de texto adicional a serem exibidas diretamente abaixo do ttulo, nas caixas de texto Subheading Info (Informaes do subcabealho) e Other info (Outras informaes).
2.
3.
Selecione a pasta que contm as imagens de origem clicando no boto Browse (Procurar) junto caixa de texto Source Images Folder (Pasta de imagens de origem). Em seguida, selecione (ou crie) uma pasta de destino para armazenar todas as imagens e arquivos HTML exportados clicando no boto Browse (Procurar) prximo caixa de texto Destination Folder (Pasta de destino). A pasta de destino no deve conter ainda um lbum de fotografias se contiver, e se alguma imagem nova tiver os mesmos nomes que as imagens utilizadas anteriormente, possvel sobregravar a miniatura existente e os arquivos de imagem.
4.
Especifique as opes de exibio das imagens miniaturas:
Selecione um tamanho para as miniaturas no menu pop-up Thumbnail Size (Tamanho da miniatura). As imagens so dimensionadas proporcionalmente para criar miniaturas que se ajustem a um quadrado com as dimenses de pixel indicadas.
509
Para exibir o nome de arquivo de cada imagem original embaixo da miniatura correspondente, selecione Show Filenames (Mostrar os nomes dos arquivos). Digite o nmero de colunas da tabela que exibe as miniaturas.
5.
Selecione um formato para as imagens em miniatura no menu pop-up Thumbnail Format (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 JPEGmelhor qualidade cria miniaturas JPEG com qualidade relativamente mais alta e arquivos maiores. O formato JPEGmenor arquivo cria miniaturas JPEG com qualidade relativamente mais baixa e arquivos menores.
6.
Selecione um formato para as imagens grandes do menu pop-up Photo Format (Formato da fotografia). Uma imagem grande do formato especificado criada para cada imagem original. possvel especificar um formato das imagens grandes diferente do formato especificado para as miniaturas.
N OT A
O comando Create Web Photo Album no permite o uso de arquivos de imagem originais como imagens grandes, pois formatos de imagem original diferentes de GIF e JPEG talvez no sejam exibidos corretamente em todos os navegadores. Observe que se as imagens originais so arquivos JPEG, as imagens grandes geradas podem ter tamanhos maiores ou qualidade menor que os arquivos originais.
7.
Selecione 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 no forem todas do mesmo tamanho, escal-las com o mesmo percentual talvez no produza os resultados desejados.
8.
Selecione Create Navigation Pane for Each Photo (Criar pgina de navegao para cada fotografia) para criar uma pgina da Web individual para cada imagem de origem, contendo os links de navegao Voltar, Inicial e Avanar. Caso selecione essa opo, as miniaturas so ligadas s pginas de navegao. Se no selecionar esta opo, as miniaturas so ligadas diretamente s imagens grandes.
510
9.
Clique em OK para criar o cdigo HTML e os arquivos de imagem do lbum de fotografias na Web. O Fireworks ser iniciado (se ainda no estiver em execuo) e criar as imagens em miniatura e as imagens grandes. Esse procedimento pode durar vrios minutos, se o usurio tiver includo um grande nmero de arquivos de imagem. Quando o processamento concludo, o Dreamweaver fica ativo novamente e cria a pgina que contm as miniaturas.
10. Quando for exibida uma caixa de dilogo que informa "Album Created" (lbum criado),
clique em OK. Talvez seja preciso aguardar alguns segundos para que a pgina do lbum de fotografias seja exibida. As miniaturas so mostradas em ordem alfabtica por nome de arquivo.
NO TA
Clicar no boto Cancel (Cancelar) da caixa de dilogo Dreamweaver, aps o incio do processamento, no interrompe a criao do lbum de fotografias, isso simplesmente impede o Dreamweaver de exibir a pgina principal do lbum de fotografias.
511
Trabalhar com o Flash

possvel usar o Dreamweaver para definir opes de execuo e de exibio de um arquivo do Flash em uma pgina da Web ou para atualizar links no filme. Se o Flash estiver instalado, tambm possvel selecionar um arquivo SWF em um documento do Dreamweaver e iniciar o Flash para edit-lo.
Edio de contedo Flash no Dreamweaver

Se o Flash estiver instalado, tambm possvel selecionar um arquivo SWF em um documento do Dreamweaver e iniciar o Flash para edit-lo. O Flash no edita diretamente o arquivo SWF; ele edita o documento de origem (arquivo FLA) e depois re-exporta o arquivo SWF.
Para abrir e editar contedo Flash inserido no Dreamweaver:
1.
No Dreamweaver, selecione Window > Properties para abrir o Property inspector, caso ainda no esteja aberto. No documento Dreamweaver, siga um dos procedimentos abaixo:
2.
Clique no alocador de espao do arquivo SWF para selecion-lo e depois clique em Edit (Editar) no Property inspector (Inspetor de propriedades).
Pressione a tecla Control (no Windows) ou Command (no Macintosh) e clique duas vezes no alocador de espao do filme que deseja editar.
NO TA
Caso no disponha do Flash, o boto Edit (Editar) ficar desativado.
512
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada e clique (no Macintosh) no filme desejado e escolha Edit With Flash (Editar com Flash) no menu contextual.
O Dreamweaver aciona o Flash, que tenta localizar o arquivo de autoria (.FLA) Flash correspondente ao arquivo SWF selecionado. Se o Flash no puder localizar o arquivo de autoria Flash, o sistema solicitar a sua localizao. Voc no pode atualizar um arquivo SWF diretamente; altere o arquivo de origem e o exporte como um arquivo SWF.
NO T A
Se o arquivo FLA ou SWF estiver bloqueado, o Dreamweaver avisa o usurio para verificar o arquivo, cancelar a solicitao ou exibir o arquivo.
3.
No Flash, edite o filme. A janela do documento indica que voc est modificando um filme no Dreamweaver. Ao terminar a edio, clique em Done (Concludo). O Flash atualiza o documento de autoria do Flash (arquivo FLA), exporta novamente o arquivo de filme (arquivo SWF), encerra e devolve o foco para o documento Dreamweaver.
4.
5.
Para exibir o SWF atualizado no documento, clique em Play (Executar) no Property inspector ou pressione F12 para visualizar a pgina em uma janela do navegador.
Atualizao de links em um arquivo SWF

Voc pode usar o Dreamweaver para atualizar um link em um arquivo do Flash (arquivo SWF) e depois atualizar as alteraes no documento de autoria Flash (arquivo FLA).
Para atualizar um link de URL em um arquivo SWF:
1.
Configure uma pgina inicial para o site, se ainda no o tiver feito. necessrio configurar uma pgina inicial para criar um mapa do site. Na visualizao no mapa do site, necessrio exibir os arquivos dependentes para atualizar um link em um arquivo SWF. Como padro, o mapa do site no apresenta arquivos dependentes. Para obter informaes sobre a exibio de arquivos dependentes, consulte Mostrar e ocultar os arquivos do mapa do site na pgina 144. Para obter informaes sobre a visualizao do mapa do site, consulte Exibir um mapa de site na pgina 138.
2.
Abra a visualizao Site Map (Mapa do site).
Trabalhar com o Flash
513
3.
Para exibir arquivos dependentes, faa o seguinte:

Selecione View (Exibir) > Show Dependent Files (Mostrar os arquivos dependentes). Selecione View > Layout para abrir a caixa de dilogo Site Definition e, em seguida, selecione a opo Display Dependent Files (Exibir 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 boto direito do mouse (Windows) ou mantenha pressionada a tecla Control e clique no link (Macintosh), selecione Change Link (Alterar link) e, na caixa de dilogo exibida na caixa de texto URL, digite o caminho da nova URL. Para atualizar todas as instncias do link, selecione Site (Site) > Change Link Sitewide (Alterar o link no site inteiro) e, na caixa de dilogo exibida, na caixa de texto Change All Links To (Alterar todos os links para), procure ou digite o caminho do link que est sendo alterado e, na caixa de texto Into Links To (Em links a), procure ou digite o caminho da nova URL.
5.
Clique em OK.
Qualquer link atualizado pelo Dreamweaver no arquivo SWF transmitido para o documento de origem FLA quando um acionamento e uma edio so realizados. O Dreamweaver registra automaticamente qualquer alterao de link no arquivo SWF nas Design Notes, e quando o Flash passa as alteraes para o arquivo FLA, ele as remove das Design Notes.
514
CAPTULO 17
Adicionar udio, vdeo e elementos interativos

Macromedia Dreamweaver 8 permite incluir som e filmes nos sites da Web de maneira rpida e fcil. possvel anexar Design Notes (Notas de design) a esses objetos, que permitem a comunicao com o grupo. Tambm possvel inserir botes e objetos de texto do Macromedia Flash 8 a partir do prprio Dreamweaver. Este captulo contm as seguintes sees:
Sobre os arquivos de mdia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516 Inserir e editar um objeto de mdia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518 Iniciar um editor de arquivos de mdia externo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521 Utilizar as Design Notes (Notas de design) com um objeto de mdia . . . . . . . . . . .523 Inserir e modificar um objeto de boto Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .523 Inserir um objeto de texto do Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .526 Inserir contedo Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .526 Fazer o download e instalar os elementos Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 Inserir elementos Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .528 Editar atributos de elementos Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 Inserir documento do FlashPaper. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 Inserir contedo do Flash Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530 Inserir filmes Shockwave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .534 Adicionar vdeo (no-Flash). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .535 Adicionar som a uma pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .535 Inserir contedo de plug-in para Netscape Navigator . . . . . . . . . . . . . . . . . . . . . . . . 537 Inserir um controle ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 Inserir um applet Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 Utilizar comportamentos para controlar elementos de mdia . . . . . . . . . . . . . . . . . 540
17
515
Sobre os arquivos de mdia

possvel incluir arquivos com os seguintes tipos de mdia em suas pginas Dreamweaver: filmes Flash e Shockwave, QuickTime, AVI, applets Java, controles Active X e arquivos de udio de vrios formatos.
Sobre Flash tipos de arquivos

Alguns objetos Flash acompanham o Dreamweaver e voc pode utiliz-los quer tenha ou no Flash instalado em seu computador. Caso disponha de Flash no seu sistema, consulte Trabalhar com o Flash na pgina 512 para obter mais informaes sobre a utilizao desses aplicativos de maneira integrada. Antes de utilizar os comandos Flash disponveis no Dreamweaver, voc deve conhecer os diferentes tipos de arquivo do Flash:
O arquivo Flash (.fla) um arquivo fonte de um projeto e criado no programa Flash. Esse tipo de arquivo pode ser aberto apenas em Flash, e no no Dreamweaver nem em navegadores. possvel abrir um arquivo Flash no software Flash e, subseqentemente, export-lo como um arquivo SWF ou SWT para ser utilizado nos navegadores.
uma verso compactada do arquivo Flash (.fla), otimizado para visualizao na Web. Esse arquivo pode ser executado em navegadores e visualizado no Dreamweaver, mas no pode ser editado no Flash. Esse o tipo de arquivo criado ao utilizar os objetos Flash de texto Flash e de boto. Para obter mais informaes, veja Inserir e modificar um objeto de boto Flash na pgina 523, Inserir um objeto de texto do Flash na pgina 526 e Inserir contedo Flash na pgina 526.
Os arquivos do modelo Flash (.swt) possibilitam
O arquivo Flash SWF (.swf)
modificar e substituir informaes em um arquivo Flash SWF. Esses arquivos so utilizados no objeto de boto Flash, o que permite modificar o modelo atravs da incluso de seus prprios textos e links, para criar um SWF personalizado e inseri-lo em seu documento. No Dreamweaver, estes arquivos de modelo podem ser encontrados nas pastas Dreamweaver/Configuration (Configurao)/Flash Objects (Objetos)/Flash Buttons (Botes) e Flash Text (Texto). Tambm possvel fazer download de novos modelos de boto do Macromedia Exchange for Dreamweaver no site da Web (www.macromedia.com/go/dreamweaver_exchange) e coloclos na sua pasta de botes do Flash. Para obter mais informaes sobre a criao de novos modelos de botes, consulte o artigo sobre este assunto no endereo www.macromedia.com/ go/flash_buttons.
516
Captulo 17: Adicionar udio, vdeo e elementos interativos
O arquivo do elemento Flash (.swc) um arquivo Flash SWF que permite criar aplicativos Rich Internet incorporando-os a uma pgina da Web. Os elementos Flash tm parmetros personalizveis que voc pode modificar para executar diferentes funes do aplicativo. Para obter mais informaes, consulte Inserir elementos Flash na pgina 528 e Editar atributos de elementos Flash na pgina 529. O formato de arquivo Flash Video (.flv) um arquivo de vdeo que contm dados de vdeo e
udio codificados para serem apresentados pelo Flash Player. Por exemplo, se tiver um arquivo de vdeo QuickTime ou Windows Media, voc pode usar um codificador (como Flash 8 Video Encoder ou Sorensen Squeeze) para converter o arquivo de vdeo em um arquivo FLV. Para mais informaes, visite o site Flash Video Developer Center no endereo www.macromedia.com/go/flv_devcenter.
Sobre 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 msica instrumental. Arquivos MIDI contam com suporte em diversos navegadores e no 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 no podem ser gravados e devem ser sintetizados num computador com hardware e software especiais. Os arquivos no formato .wav (extenso Waveform) tm boa qualidade de som, contam com suporte em vrios navegadores e no requerem um plug-in. possvel gravar arquivos WAV prprios 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 pginas da Web. O formato .aif (ou AIFF - Audio Interchange File Format), assim como o formato WAV, possui uma qualidade de som boa, pode ser reproduzido na maioria dos navegadores e no necessita de plug-ins; tambm possvel 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 pginas da Web.
Sobre os arquivos de mdia
517
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 de 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 MP3 permitem transferir o arquivo gradualmente, para que o visitante no precise esperar pelo download do arquivo inteiro at poder ouvi-lo. No entanto, o tamanho do arquivo maior do que o de um arquivo Real Audio; assim, o download de uma msica completa atravs de uma conexo via modem de acesso discado (linha telefnica) tradicional ainda pode ser bastante demorado. 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 compactao do formato .ra, .ram, .rpm ou Real Audio muito alto e os tamanhos de arquivos so menores do que os arquivos no formato MP3. possvel efetuar o download de arquivos de msica completos num perodo de tempo razovel. Como os arquivos podem ser transferidos gradualmente de um servidor da Web normal, os visitantes podem comear a ouvir o som antes que o download do arquivo tenha sido concludo. Para poder executar esses arquivos, os visitantes devero efetuar o download e instalar o aplicativo auxiliar RealPlayer ou plug-in.
.qt, .qtm, .mov ou QuickTime
um formato de udio e de vdeo desenvolvido pela Apple Computer. O QuickTime includo nos sistemas operacionais Apple Macintosh e usado pela maioria dos aplicativos Macintosh que usam udio, vdeo ou animao. Os PCs tambm podem reproduzir arquivos no formato QuickTime, mas exigem um driver QuickTime especial. O QuickTime suporta a maioria dos formatos de codificao, inclusive Cinepak, JPEG e MPEG.
N OT A
Alm dos formatos mais comuns listados acima, h muitos outros formatos de arquivos de udio e vdeo disponveis para uso na Web. Se voc encontrar um formato desconhecido de arquivo de mdia, localize o criador desse formato e solicite informaes sobre o melhor meio para us-lo e implant-lo.
Inserir e editar um objeto de mdia

possvel inserir objetos ou arquivos Flash SWF, filmes QuickTime ou Shockwave, applets Java, controles ActiveX ou outros objetos de udio e vdeo em um documento Dreamweaver.
Para inserir um objeto de mdia em uma pgina:
1.
Coloque o ponto de insero no local em que deseja inserir o objeto na janela do documento.
518
2.
Insira o objeto seguindo um dos procedimentos abaixo:
Na categoria Common (Comuns) da barra Insert (Inserir), clique no boto Media (Mdia) e selecione o boto relativo ao tipo de objeto que voc quer inserir.
Selecione o objeto apropriado no submenu Insert > Media. Se o objeto que voc deseja inserir no for um objeto Flash, Shockwave, Applet ou ActiveX, use o boto de plug-in do Netscape Navigator - o cone de uma pea de quebra-cabeas da barra Insert (Inserir) para inseri-lo. Para obter mais informaes, consulte Inserir contedo de plug-in para Netscape Navigator na pgina 537.
Na maioria dos casos, ser exibida uma caixa de dilogo que permite escolher um arquivo de origem e especificar certos parmetros do objeto de mdia.
DICA
Para evitar a exibio de certas caixas de dilogo, selecione Edit (Editar) > Preferences (Preferncias) > General (Geral) (Windows) ou Dreamweaver> Preferences > General (Mac OS X) e desmarque a opo Show Dialog When Inserting Objects (Mostrar a caixa de dilogo quando inserir objetos). Para anular qualquer preferncia definida para exibir caixas de dilogo, mantenha pressionada a tecla Control (no Windows) enquanto o objeto inserido (Por exemplo, para inserir um alocador de espao para um filme Shockwave sem especificar o arquivo, mantenha pressionada a tecla Control ou Option e clique no boto Shockwave no menu pop-up Media da guia Common da barra Insert, ou selecione Insert > Media > Shockwave.)
3.
Complete a caixa de dilogo Select File (Selecione arquivo) ou Insert Flash (Inserir Flash).
Inserir e editar um objeto de mdia
519
4.
Clique em OK. Ser exibida a caixa de dilogo Object Tag Accessibility Attributes (Atributos de acesso da tag de objeto) se essa caixa estiver ativada em Preferences (consulte Otimizar a rea de trabalho para o projeto de pgina acessvel na pgina 76).
5.
Se a caixa de dilogo Object Tag Accessibility Attributes (Atributos de acesso da tag de objeto) aparecer, preencha-a e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. O objeto de mdia ser exibido no documento.
N OT A
Caso pressione Cancel (Cancelar), o alocador de espao do objeto de mdia ser exibido no documento, mas o Dreamweaver no associar a ele tags de acessibilidade nem atributos.
Para especificar um arquivo de origem, definir as dimenses e outros parmetros e atributos, utilize o Property inspector (Inspetor de propriedades) para cada objeto.
Editar atributos de acessibilidade de objetos de mdia

Se voc agregou atributos de acessibilidade a um objeto de mdia (consulte Inserir e editar um objeto de mdia na pgina 518), possvel editar estes valores no cdigo HTML.
Para editar valores de acessibilidade de um objeto de mdia:
1. 2.
Na janela do documento, selecione o objeto. Siga um dos procedimentos abaixo:

Edite os atributos apropriados na visualizao do cdigo. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e selecione Edit Tag Code (Editar cdigo da tag).
520
Iniciar um editor de arquivos de mdia externo

possvel iniciar um editor externo ao Dreamweaver para editar a maioria dos arquivos de mdia. Tambm possvel definir o editor que deseja que o Dreamweaver inicie para editar o arquivo.
Iniciar um editor externo ao Dreamweaver

possvel iniciar um editor externo ao Dreamweaver para editar a maioria dos arquivos de mdia.
Para iniciar um editor externo a partir do Dreamweaver:
1.
Assegure-se de que o tipo do arquivo de mdia esteja associado a um editor em seu sistema. Para descobrir qual editor est associado ao tipo de arquivo, selecione Edit (Editar) > Preferences (Preferncias) em Dreamweaver e selecione File Types/Editors (Tipos de arquivos/Editores) na lista Category (Categoria). Clique na extenso do arquivo na coluna Extensions (Extenses) para descobrir os editores associados a ele na coluna Editors (Editores). Voc pode alterar o editor associado a um tipo de arquivo. Para obter mais informaes, consulte Especificar o editor a iniciar usando o Dreamweaver na pgina 522.
2.
Clique duas vezes no arquivo de mdia no painel Site para abri-lo no editor externo. O editor que iniciado quando voc clica duas vezes no arquivo no painel Site denominado editor primrio. Se voc clicar duas vezes em um arquivo de imagem, por exemplo, o Dreamweaver abrir o arquivo no editor de imagens externo primrio, como o Macromedia Fireworks.
3.
Se voc no deseja utilizar o editor externo primrio para editar o arquivo, possvel utilizar outro editor de seu sistema, seguindo um dos procedimentos abaixo:
No painel Site, clique com o boto direito do mouse (Windows) ou clique com a tecla Control pressionada (Macintosh) no nome do arquivo desejado e selecione Open With (Abrir com) no menu contextual Na visualizao do projeto, clique com o boto direito do mouse (Windows) ou clique com a tecla Control pressionada (Macintosh) no elemento de mdia da pgina atual e selecione Edit With (Editar com) no menu contextual.
Iniciar um editor de arquivos de mdia externo
521
Especificar o editor a iniciar usando o Dreamweaver

possvel especificar o editor desejado Dreamweaver para editar um tipo de arquivo e adicionar ou excluir tipos de arquivos reconhecidos pelo Dreamweaver.
Para especificar explicitamente quais editores externos devem ser iniciados para um tipo de arquivo definido:
1.
Selecione Edit (Editar) > Preferences (Preferncias) e selecione File Types/Editors (Tipos de arquivos/editores) na lista Category (Categoria). As extenses dos nomes de arquivos, como .gif, .wav e .mpg, encontram-se listadas esquerda, em Extensions (Extenses). Os editores associados extenso selecionada encontram-se listados direita, abaixo de Editors (Editores).
2.
Selecione a extenso do tipo de arquivo na lista Extensions e siga um dos procedimentos abaixo:
Para associar um novo editor ao tipo de arquivo, clique no boto com o sinal de adio (+) acima da lista Editors e preencha a caixa de dilogo que ser apresentada. Por exemplo, selecione o cone do aplicativo Acrobat para associ-lo ao tipo de arquivo.
Para fazer de um editor o editor primrio de um tipo de arquivo (ou seja, o editor que aberto quando voc clica duas vezes sobre o tipo de arquivo no painel Site), selecione o editor na lista Editors e clique em Make Primary (Tornar primrio). Para dissociar um editor de um tipo de arquivo, selecione-o na lista Editors e clique no boto com o sinal de subtrao (-) acima da lista Editors.
Para incluir um novo tipo de arquivo e um editor associado:

1.
Clique no boto com sinal de adio (+) acima da lista Extensions e digite a extenso de tipo de arquivo (incluindo o ponto no incio da extenso) ou as diversas extenses relacionadas, separadas por espaos. Por exemplo, voc pode digitar .xml .xsl se desejar associ-los com um editor XML instalado em seu sistema.
2.
Selecione um editor para o tipo de arquivo, clicando no boto com sinal de adio (+) acima da lista Editors, e preencha a caixa de dilogo que for exibida.
Para remover um tipo de arquivo:
Selecione o tipo de arquivo na lista Extensions (Extenses) e clique no boto com sinal de subtrao (-) localizado acima dessa lista.
N OT A
impossvel desfazer a ao aps remover um tipo de arquivo; portanto necessrio ter certeza de que deseja remov-lo.
522
Utilizar as Design Notes (Notas de design) com um objeto de mdia

Assim como em outros objetos no Dreamweaver, voc tambm pode adicionar Design Notes (Notas de design) a um objeto de mdia. Design Notes so anotaes associadas a um arquivo em particular que so armazenadas em um arquivo separado. Utilize as Design Notes para controlar as informaes adicionais relativas aos documentos, como nomes de arquivos de origem de imagens e comentrios sobre o status de arquivos. Para obter mais informaes sobre como trabalhar com Design Notes, veja Armazenar informaes sobre arquivos nas Design Notes na pgina 167.
Para adicionar Design Notes a um objeto de mdia:
1.
Clique com o boto direito do mouse (Windows) ou clique com a tecla Control pressionada (Macintosh) no objeto da janela do documento.
NO TA
necessrio definir o site antes de adicionar Design Notes a qualquer objeto (veja Ativar e desativar as Design Notes de um site na pgina 168).
2. 3.
No menu contextual, escolha Design Notes. Digite as informaes que deseja na Design Note.
DICA
Tambm possvel adicionar uma Design Note a um objeto de mdia na painel Site ao selecionar o arquivo, exibir o menu contextual e selecionar as Design Notes neste menu.
Inserir e modificar um objeto de boto Flash

Enquanto trabalha com o Dreamweaver, possvel criar, inserir e modificar botes Flash em seus documentos. No necessrio dispor do Macromedia Flash. Um objeto de boto Flash um boto atualizvel baseado em um modelo Flash. possvel personalizar um objeto de boto Flash , adicionando texto, cor de fundo e links para outros arquivos.
523
Criar e inserir um boto Flash

possvel criar e inserir um boto Flash em seus documentos atravs da visualizao do projeto ou da visualizao de cdigo.
NO T A
necessrio salvar os documentos antes de inserir um objeto Flash de boto ou de texto.
Para inserir um objeto de boto Flash:

1. 2.
Na janela do documento, coloque o ponto de insero onde deseja inserir o boto Flash. Para abrir a caixa de dilogo Insert Flash Object (Inserir objeto Flash), siga um dos procedimentos abaixo:
Na categoria Common (Comuns) da barra Insert (Inserir), selecione Media (Mdia) e, em seguida, clique no cone Flash Button (Boto Flash). Selecione Insert > Media > Flash Button.
A caixa de dilogo Insert Flash Button (Inserir boto Flash) ser exibida.
3.
Preencha a caixa de dilogo Insert Flash Button e clique em Apply (Aplicar) ou em OK para inserir o boto Flash na janela do documento.
DICA
Para visualizar o boto na visualizao de projeto, clique em Apply. A caixa de dilogo permanecer aberta e voc poder visualizar o boto em seu documento.
Modificao de um objeto de boto Flash

possvel modificar as propriedades e o contedo de um objeto de boto Flash.
524
Para modificar um objeto de boto Flash:

1. 2.
Na janela do documento, clique no objeto de boto Flash para selecion-lo. Abra o Property inspector (Inspetor de propriedades), se ele ainda no tiver sido aberto. O Property inspector exibir as propriedades do boto Flash. Utilize o Property inspector para modificar os atributos HTML do boto, como largura, altura e cor de fundo.
3.
Para alterar o contedo, abra a caixa de dilogo Insert Flash Button (Inserir boto Flash) utilizando um dos mtodos a seguir:

Clique duas vezes no objeto de boto Flash. No Property inspector, clique em Edit (Editar). Clique com o boto direito do mouse (Windows) ou clique com a tecla Control pressionada (Macintosh) e, em seguida, selecione Edit (Editar) no menu contextual.
4.
Na caixa de dilogo Insert Flash Button (Inserir boto Flash), faa as edies desejadas nas caixas de texto descritas anteriormente (consulte Inserir e modificar um objeto de boto Flash na pgina 523). Na visualizao do projeto, possvel redimensionar o objeto facilmente utilizando as alas de redimensionamento. Para redimensionar o objeto ao seu tamanho original, selecione Reset Size (Redefinir tamanho), no Property inspector (consulte Redimensionar uma imagem na pgina 453).
Execuo de um objeto de boto Flash no documento

possvel visualizar um boto Flash na janela do documento de Dreamweaver.
Para visualizar a execuo do objeto de boto Flash na janela do documento:
1. 2. 3.
Na visualizao do projeto, selecione um objeto de boto Flash. No Property inspector (Inspetor de propriedades), clique em Play (Executar). Clique em Stop (Parar), para terminar a visualizao.
N OT A
No possvel editar o objeto de boto Flash enquanto ele estiver em execuo.
Tambm conveniente visualizar o documento no navegador para ver exatamente como aparece o boto Flash.
525
Inserir um objeto de texto do Flash

O objeto de texto Flash possibilita criar e inserir um arquivo Flash SWF que contenha apenas texto. Isso permite criar um pequeno filme com grficos vetoriais com fontes e texto de sua escolha.
Para inserir um objeto de texto Flash:
1. 2.
Na janela do documento, coloque o ponto de insero onde deseja inserir o texto Flash. Para abrir a caixa de dilogo Insert Flash Text (Inserir texto Flash), siga um dos procedimentos abaixo:
Na categoria Common (Comuns) da barra Insert (Inserir), selecione Media (Mdia) e, em seguida, clique no cone Flash Text (Texto Flash). Selecione Insert > Media > Flash Text.
A caixa de dilogo Insert Flash Text (Inserir texto Flash) ser exibida.
3.
Preencha a caixa de dilogo Insert Flash Text e clique em Apply (Aplicar) ou em OK para inserir o texto Flash na janela do documento. Ao clicar em Apply (Aplicar), a caixa de dilogo permanecer aberta e ser possvel visualizar o texto no documento.
Para modificar ou executar o objeto de texto Flash, utilize o mesmo procedimento adotado para o boto Flash (consulte Modificao de um objeto de boto Flash na pgina 524).
Inserir contedo Flash

possvel usar o Dreamweaver para inserir contedo Flash em suas pginas.
526
Para inserir um arquivo SWF (contedo Flash):

1.
Na visualizao do projeto, na janela do documento, colocar o ponto de insero onde deseja inserir o filme.
Na categoria Common (Comuns) da barra Insert (Inserir), selecione Media (Mdia) e, em seguida, clique no cone Insert Flash. Selecione Insert (Inserir) > Media (Mdia) > Flash.
2.
Na caixa de dilogo que ser exibida, selecione um arquivo Flash (.swf). Um alocador de espao Flash ser exibido na janela do documento (diferentemente dos objetos de texto e do boto Flash). Para obter informaes sobre como definir propriedades para um arquivo Flash SWF, selecione o alocador de espao e clique no boto Help (Ajuda) do Property inspector.
Para visualizar o contedo do Flash na janela do documento:

1.
Na janela do documento, clique no alocador de espao do Flash para selecionar o contedo do Flash que deseja visualizar. No Property inspector, clique no boto Play (Executar). Clique em Stop (Parar), para terminar a visualizao. Tambm possvel visualizar o contedo do Flash em um navegador, pressionando a tecla F12.
DICA
2.
Para visualizar todo o contedo Flash numa pgina, pressionar simultaneamente as teclas Control+Alt+Shift+P (no Windows) ou Shift+Option+Command+P (Macintosh). Todos os objetos e arquivos SWF do Flash esto definidos para Play (Executar).
Fazer o download e instalar os elementos Flash

Para usar elementos Flash em suas pginas da Web, voc dever, primeiramente, adicionar os elementos ao Dreamweaver usando o Extension Manager. O Extension Manager um aplicativo independente que permite instalar e gerenciar as extenses nos aplicativos da Macromedia. Inicie o Extension Manager no Dreamweaver escolhendo Commands (Comandos) > Manage Extensions (Gerenciar extenses).
Fazer o download e instalar os elementos Flash
527
Para localizar os elementos mais recentes do Flash para o Dreamweaver, utilize o site do Macromedia Exchange na Web, em www.macromedia.com/go/dreamweaver_exchange. Neste site, possvel efetuar o login e o download de elementos Flash e de outras extenses do Dreamweaver (muitas das quais so gratuitas), participar de grupos de discusso, visualizar as avaliaes e crticas dos usurios, alm de instalar e utilizar o Extension Manager. Voc dever instalar o Extension Manager antes de instalar os novos elementos Flash ou outras extenses do Dreamweaver. Para obter informaes sobre a utilizao do Extension Manager para instalar elementos Flash (alm de outras extenses do Dreamweaver), consulte Adicionar extenses ao Dreamweaver na pgina 84.
Inserir elementos Flash

Usando o Dreamweaver, voc pode inserir elementos Flash em seus documentos. Os elementos Flash permitem construir, de modo fcil e rpido, aplicativos Rich Internet Application usando elementos predefinidos. Para obter mais informaes sobre elementos Flash e mostrar como eles podem ser usados em suas pginas da Web, consulte Sobre Flash tipos de arquivos na pgina 516.
Para inserir um elemento Flash:
1.
Na janela do documento, coloque o ponto de insero onde deseja inserir o elemento Flash e siga um dos procedimentos abaixo:
Na categoria de elementos Flash da barra Insert (Inserir), clique no cone do elemento Flash que voc quer inserir. Selecione Insert > Media > nome do elemento do Flash. Dreamweaver inclui um elemento Flash denominado Image Viewer (Visualizador de imagens).
A caixa de dilogo Save Flash Element (Salvar elemento Flash) ser exibida.
2.
Digite um nome de arquivo para o elemento Flash e salve-o em um local adequado no seu site. Clique em OK. O alocador de espao do elemento Flash ser exibido no documento. possvel modificar as propriedades do elemento Flash usando os inspetores de Tags e de Propriedades.
3.
4.
Selecione File (Arquivo) > Preview in Browser (Visualizar no navegador) para visualizar o elemento Flash.
528
Editar atributos de elementos Flash

Voc edita atributos de elementos Flash usando os inspetores de Tags e de Propriedades.
Para editar atributos de elementos Flash:
1.
Siga um destes procedimentos na janela Document (Documento):

Na visualizao do projeto, selecione o elemento Flash. Na visualizao do cdigo, clique em qualquer lugar do nome ou do contedo de um componente do Flash.
2.
Abra o Tag inspector (Inspetor de tags) (Windows > Tag inspector) se ele ainda no estiver sendo exibido. Edite os atributos do elemento Flash usando o Tag inspector e o Property inspector (Inspetor de propriedades). Pressione Enter (no Windows) ou Return (no Macintosh), ou clique em qualquer parte do Tag inspector, para atualizar a tag no documento. Para obter mais informaes, clique no boto Help (Ajuda) do Tag inspector.
3.
4.
Inserir documento do FlashPaper

possvel inserir documentos do Macromedia FlashPaper em pginas da Web. Quando o usurio abre no navegador uma pgina que contm um documento FlashPaper, ele pode fazer buscas em todas as pginas desse documento sem precisar carregar novas pginas da Web. Alm disso, ele pode fazer buscas no documento, imprimi-lo e aumentar ou reduzir seu tamanho (zoom). Para obter mais informaes sobre FlashPaper, consulte o site da Macromedia na Web, em www.macromedia.com/go/flashpaper.
Para inserir um documento FlashPaper em uma pgina da Web:
1.
Na janela do documento, posicione o ponto de insero no local da pgina onde deseja exibir o documento FlashPaper e, em seguida, selecione Insert > Media > FlashPaper. Na caixa de dilogo Insert FlashPaper (Inserir FlashPaper), selecione o documento FlashPaper desejado. Se preferir, especifique as dimenses do objeto FlashPaper na pgina da Web, inserindo a largura e a altura em pixels. FlashPaper ajustar o documento de acordo com a largura definida.
2.
3.
Inserir documento do FlashPaper
529
4.
Clique em OK para inserir o documento na pgina. Como o documento FlashPaper um objeto Flash, ser exibido um alocador de espao Flash na pgina.
5.
Para visualizar o documento FlashPaper, clique no alocador de espao e, em seguida, clique no boto Play (Executar) no Property inspector. Clique em Stop (Parar), para terminar a visualizao. Tambm possvel visualizar o documento em um navegador, pressionando a tecla F12. A barra de ferramentas do FlashPaper est totalmente ativa no navegador.
D IC A
Para visualizar todo o contedo Flash numa pgina, pressione simultaneamente as teclas Control+Alt+Shift+P (no Windows) ou Shift+Option+Command+P (Macintosh). Todos os objetos Flash e arquivos SWF esto definidos como Play (Executar).
6.
Se preferir, defina outras propriedades no Property inspector. Como um objeto Flash, o objeto FlashPaper compartilha o Property inspector do objeto Flash. Para obter informaes sobre como definir as propriedades, clique no boto Help (Ajuda) no Property inspector.
Inserir contedo do Flash Video

O Dreamweaver permite inserir facilmente o contedo do Flash Video nas pginas da Web sem precisar usar a ferramenta de autoria do Flash. O Dreamweaver insere o componente Flash Video; quando visualizado em um navegador, esse componente mostra o contedo do Flash Video que voc selecionou, bem como um conjunto de controles de execuo.
530
Esta seo contm os tpicos a seguir:

Sobre a insero do Flash Video na pgina 531 Inserir contedo do Flash Video na pgina 532 Detectar a verso do Flash Player para ver o Flash Video na pgina 532 Editar e excluir um componente Flash Video na pgina 533
Para obter mais informaes sobre o Flash Video, visite o Flash Video Developer Center, em www.macromedia.com/go/flv_devcenter.
Sobre a insero do Flash Video

O Dreamweaver oferece as seguintes opes para apresentar o Flash Video aos visitantes de seu site:
Progressive Download Vdeo (Download progressivo de vdeo) faz o download do arquivo Flash Video (FLV) para o disco rgido do visitante do site e o executa. Diferentemente dos mtodos tradicionais de download e execuo das apresentaes de vdeo, o download progressivo permite executar o arquivo de vdeo antes de concluir o download. Streaming Video (Vdeo de transmisso em fluxo contnuo) transmite o contedo do Flash
Video em fluxos e somente o executa na pgina da Web aps mant-lo por um breve perodo no buffer, o que assegura uma execuo estvel. Para ativar o recurso de vdeo de transmisso em fluxo contnuo nas pginas da Web, necessrio ter acesso ao Macromedia Flash Communication Server. Voc precisa ter um arquivo Flash Video (FLV) codificado para poder utiliz-lo no Dreamweaver. possvel inserir arquivos de vdeo criados por meio de dois tipos de codecs (tecnologias de compactao/descompactao): Sorenson Squeeze e On2.
Se voc criou o vdeo com a codec Sorenson Squeeze, os visitantes do site precisaro do Flash Player 7 ou de uma verso posterior para executar o download progressivo do vdeo; no caso do vdeo de transmisso contnua, eles precisaro do Flash Player 6.0.79 ou posterior. Se voc criou o vdeo com a codec On2, os visitantes do site precisaro do Flash Player 8 ou posterior.
Uma vez inserido um arquivo Flash Video em uma pgina, voc pode inserir cdigo na pgina para detectar se o usurio tem a verso correta do Flash Player para ver o Flash Video. Caso no tenham a verso correta, eles sero solicitados a fazer o download da ltima verso do Flash Player. Para obter mais informaes, consulte Detectar a verso do Flash Player para ver o Flash Video na pgina 532.
531
Para obter mais informaes sobre o Flash Video, visite o Flash Video Developer Center em www.macromedia.com/go/flv_devcenter. Tpicos relacionados Detectar a verso do Flash Player para ver o Flash Video na pgina 532
Editar e excluir um componente Flash Video na pgina 533

possvel usar o Dreamweaver para inserir contedo do Flash Video em suas pginas. Para isso, necessrio ter um arquivo Flash Video (FLV). Para obter mais informaes, consulte Sobre Flash tipos de arquivos na pgina 516.
Para inserir Flash Video em uma pgina da Web:
1. 2.
Selecione Insert (Inserir)> Media (Mdia) > Flash Video. Na caixa de dilogo Insert Flash Video (Inserir Flash Vdeo), selecione Progressive Download ou Streaming Video no menu pop-up Video Type (Tipo de vdeo). Para obter mais informaes sobre essas duas opes, consulte Sobre a insero do Flash Video na pgina 531.
3.
Complete o restante das opes da caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. possvel selecionar uma opo que insere o cdigo que detecta a verso Flash Player necessria para ver o Flash Vdeo; se o usurio no tiver a verso correta, essa opo o instruir a fazer o download da ltima verso do Flash Player. Para obter mais informaes, consulte Detectar a verso do Flash Player para ver o Flash Video na pgina 532.
4.
Clique em OK.
Tpicos relacionados Editar e excluir um componente Flash Video na pgina 533
Detectar a verso do Flash Player para ver o Flash Video

Ao inserir um arquivo Flash Video em sua pgina, voc tambm pode inserir um cdigo que detecta se o usurio possui a verso correta do Flash Player para ver o Flash Video. Caso no tenha a verso correta, ele ser solicitado a fazer o download da ltima verso do Flash Player.
532
Dependendo da codec utilizada para criar o vdeo, talvez seja necessria uma verso diferente do Flash Player para exibir o Flash Vdeo. Se voc criou o vdeo com a codec Sorenson Squeeze, os visitantes do site precisaro do Flash Player 7 ou posterior para executar o donwload progressivo do vdeo; no caso do vdeo de transmisso em fluxo contnuo, eles precisaro do Flash Player 6.0.79 ou posterior. Se o vdeo foi criado com a codec On2, os visitantes do site precisaro do Flash Player 8 ou posterior.
Para inserir o cdigo que detecta a verso do Flash Player:
1.
Ao inserir um Flash Video em uma pgina, selecione a opo Prompt Users to Download Flash Player if Necessary (Instruir usurios a fazerem download do Flas Player se necessrio) na caixa de dilogo Insert Flash Video (Inserir Flash Video).
Se o Flash Video j estiver na sua pgina, exclua-o e, em seguida, insira-o novamente com a opo selecionada.
NO T A
Se voc inserir outro Flash Video que requeira uma verso mais adiantada do Flash Player, o cdigo de deteco instruir o usurio a fazer o download da verso apropriada.
2.
Aceite a mensagem de aviso padro ou fornea sua prpria mensagem.
Se decidir remover o Flash Video de sua pgina, voc no precisar mais do cdigo de deteco. Use o Dreamweaver para remov-lo.
Para remover o cdigo que detecta a verso do Flash Player:
Selecione Commands (Comandos)> Remove Flash Video Detection (Remover deteco de Flash Video).
Tpicos relacionados Inserir contedo do Flash Video na pgina 532
Editar e excluir um componente Flash Video

Para alterar as definies do contedo Flash Video em sua pgina da Web, necessrio selecionar o alocador de espao do componente Flash Video na janela Dreamweaver Document (Documento do Dreamweaver) e usar o Property inspector; ou, voc pode excluir o componente Flash Video e inseri-lo novamente, selecionando Insert (Inserir) > Media (Mdia) > Flash Video.
533
Para editar o componente Flash Video:

1.
Selecione o alocador de espao do componente Flash Video na janela Dreamweaver Document, clicando no cone Flash Video no centro do alocador de espao. Abra o Property inspector (Inspetor de propriedades), em Window (Janela) > Properties (Propriedades). Faa as alteraes. As opes do Property inspector so semelhantes s da caixa de dilogo Insert Flash Video (Inserir Flash Video). Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
NO T A
2.
3.
Voc no pode alterar os tipos de vdeo (por exemplo, de download progressivo para fluxo contnuo) no Property inspector. Para fazer isso, necessrio excluir o componente Flash Video e, depois, inseri-lo novamente, selecionando Insert > Media > Flash Video.
Para excluir o componente Flash Video:
Selecione a alocador de espao do componente Flash Video na janela Dreamweaver Document e pressione Delete (Excluir).
Tpicos relacionados Inserir contedo do Flash Video
Inserir filmes Shockwave

possvel utilizar o Dreamweaver para inserir filmes Shockwave em seus documentos. Shockwave, o padro da Macromedia para multimdia interativa na Web, um formato compactado que permite o download rpido dos arquivos de mdia criados em Macromedia Director, para que sejam executados pela maior parte dos navegadores mais comuns.
Para inserir um filme Shockwave:
1.
Na janela do documento, coloque o ponto de insero onde deseja inserir um filme Shockwave e siga um dos procedimentos abaixo:
Na categoria Common (Comuns) da barra Insert (Inserir), clique no boto Media (Mdia) e selecione o cone Shockwave no menu. Selecione Insert > Media > Shockwave.
2. 3.
Na caixa de dilogo que ser exibida, selecione um arquivo de filme. No Property inspector, digite a largura e a altura do filme nas caixas W (L) e H (A).
534
Adicionar vdeo (no-Flash)

possvel adicionar vdeo pgina da Web de diversas maneiras e utilizando vrios formatos. possvel efetuar o download de vdeo para o usurio ou ele pode ser transferido gradualmente para que seja executado durante o download.
Para incluir um pequeno vdeo clipe em sua pgina para que o usurio possa fazer download:
1.
Coloque o clipe na pasta do seu site. Esses clipes esto geralmente no formato de arquivo AVI ou MPEG. Estabelea um link para o clipe ou incorpore-o sua pgina. Para estabelecer um link para o clipe, digite um texto que sirva de link, como Fazer download do clipe, selecione o texto e clique no cone da pasta do Property inspector (Inspetor de propriedades). Procure o arquivo de vdeo e selecione-o.
2.
Para obter informaes sobre como incluir um fluxo de vdeo em sua pgina, consulte Inserir contedo de plug-in para Netscape Navigator na pgina 537.
N OT A N OT A
O usurio deve fazer download de um aplicativo auxiliar para visualizar os formatos de fluxos mais comuns, como Real Media, QuickTime e Windows media.
Adicionar som a uma pgina

possvel adicionar som a uma pgina da Web. Existem diversos tipos diferentes de arquivos e formatos de som como .wav, .midi e .mp3. Para obter mais informaes, consulte Sobre formatos de arquivos de udio na pgina 517. Dentre os fatores a serem considerados antes de decidir qual formato e mtodo sero utilizados para adicionar o som, esto o objetivo, o pblico, o tamanho do arquivo, a qualidade do som e as diferenas entre os navegadores.
Os arquivos sonoros so tratados de forma diferente e inconsistente pelos diversos navegadores. Pode-se desejar adicionar um arquivo de som a um arquivo Flash SWF, em seguida, incorporar o arquivo SWF para melhorar a consistncia.
Vinculao a um arquivo de udio

A vinculao a um arquivo de udio uma maneira simples e efetiva de adicionar som s pginas da Web. Esse mtodo de incorporar arquivos de som permite aos visitantes escolher se desejam ouvir o arquivo e coloca o arquivo disposio de um pblico maior
Adicionar som a uma pgina
535
Para criar um link para um arquivo de udio:

1. 2.
Selecione o texto ou a imagem que deseja utilizar como link ao arquivo de udio. No Property inspector (Inspetor de propriedades), clique no cone de pasta, para procurar o arquivo de udio, ou digite o caminho e o nome do arquivo no campo Link.
Incorporao de um arquivo de som

A incorporao de udio acrescenta o som diretamente na pgina, mas o som ser reproduzido apenas se os visitantes do seu site contarem com o plug-in adequado ao arquivo escolhido. Incorpore arquivos caso deseje usar o som como msica de fundo ou controlar o volume, a aparncia do reprodutor na pgina ou os pontos de incio e fim do arquivo de som.
DICA
Ao incorporar arquivos de som s suas pginas da Web, considere cuidadosamente o uso apropriado no seu site e o modo como os visitantes desse site usam recursos de mdia. Fornea sempre um controle para ativar ou desativar a execuo do som, caso os visitantes no desejem ouvir o contedo sonoro.
Para incorporar um arquivo de udio

1.
Na visualizao do projeto, coloque o ponto de insero onde deseja incorporar o arquivo e siga um dos procedimentos abaixo:
Na categoria Common (Comuns) da barra Insert (Inserir), clique no boto Media (Mdia) e selecione o cone do plug-in. Selecione Insert > Media > Plugin.
Para obter mais informaes sobre o objeto de plug-in, veja Inserir contedo de plug-in para Netscape Navigator na pgina 537.
2.
No Property inspector (Inspetor de propriedades), clique no cone de pasta, para procurar o arquivo de udio, ou digite o caminho e o nome do arquivo no campo Link. Digite a largura e a altura, inserindo os valores nas caixas de texto apropriadas ou redimensionando o alocador de espao de plug-in na janela do documento. Esses valores determinam o tamanho com o qual os controles de udio sero exibidos no navegador.
3.
536
Inserir contedo de plug-in para Netscape Navigator

possvel criar contedo como um filme QuickTime para um plug-in para Netscape Navigator e usar o Dreamweaver para inserir este contedo em um documento HTML. Dentre os plug-ins mais freqentes esto o RealPlayer e QuickTime, enquanto alguns arquivos de contedo incluem MP3s e filmes QuickTime.
Inserir contedo de plug-in em sua pgina

Sua pgina pode abrigar contedo que ser reproduzido por um plug-in no navegador do usurio.
Para inserir contedo de plug-in para Netscape Navigator:
1.
Na visualizao do projeto, na janela do documento, colocar o ponto de insero onde deseja inserir o filme.
Na categoria Common (Comuns) da barra Insert (Inserir), selecione Media (Mdia) e, em seguida, clique no cone do plug-in. Selecione Insert > Media > Plugin.
2.
Na caixa de dilogo que ser exibida, selecione um arquivo de contedo para um plug-in para Netscape Navigator. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
Executar um plug-in na janela do documento

possvel visualizar filmes e animaes baseados em plug-ins para Netscape Navigator diretamente na visualizao do projeto da janela do documento. Voc pode reproduzir todos os elementos de plug-in simultaneamente, para verificar a aparncia que a pgina ter para o usurio, ou pode reproduzir cada elemento separadamente, para assegurar que o elemento de mdia correto tenha sido incorporado.
NO T A
No possvel visualizar filmes e animaes baseados em controles ActiveX.
Para reproduzir filmes na visualizao de projeto, necessrio que os plug-ins adequados tenham sido instalados no seu computador.
Inserir contedo de plug-in para Netscape Navigator
537
Para executar o contedo de plug-ins na janela do documento:

1.
Para inserir um ou mais elementos de mdia, selecione Insert (Inserir) > Media (Mdia) > Shockwave, Insert (Inserir) > Media (Mdia) > Flash ou Insert (Inserir) > Media (Mdia) > Plug-in. Siga um dos procedimentos abaixo:
2.
Selecione um dos elementos de mdia inseridos e selecione View (Exibir) > Plug-ins > Play (Executar), ou clique no boto Play, no Property inspector (Inspetor de propriedades). Selecione View > Plug-ins > Play All (Executar todos), para executar todos os elementos de mdia na pgina selecionada que dependerem de plug-ins.
NO T A
A opo Play All se aplica ao documento atual e no a outros documentos num conjunto de quadros, por exemplo.
Para parar a execuo do contedo de plug-ins:
Escolha um elemento de mdia e selecione View > Plug-ins > Stop (Parar) ou clique no boto Stop, no Property inspector (Inspetor de propriedades). Tambm possvel selecionar View > Plugins > Stop All (Parar todos) para parar a reproduo de todos os contedos de plug-in.
Soluo de problemas dos plug-ins para Netscape Navigator

Se, aps ter seguido essas etapas para executar o contedo do plug-in na janela do documento, algum contedo de plug-in no for executado, tente um dos procedimentos abaixo:
Certifique-se de que o plug-in associado esteja instalado no computador e de que o contedo do mesmo seja compatvel com a verso do plug-in existente. Abra o arquivo Configuration (Configurao)/Plugins (Plug-ins)/UnsupportedPlugins.txt (Plug-ins no suportados.txt) em um editor de texto e procure, na lista, o plug-in com problemas. Esse arquivo mantm um registro dos plug-ins que causam problemas no Dreamweaver e, por isso, no contam com suporte. (se houver problemas com qualquer outro plug-in, adicion-lo a esse arquivo). Verifique se h memria suficiente. Alguns plug-ins exigem entre 2 MB e 5 MB a mais de memria, para que sejam executados.
538
Inserir um controle ActiveX

Voc pode inserir um controle ActiveX em sua pgina. Os controles ActiveX (anteriormente conhecidos como controles OLE) so componentes reutilizveis semelhantes a applets que podem funcionar como plug-ins dos navegadores. Eles so executados em Internet Explorer com Windows, porm no so executados em Macintosh ou em Netscape Navigator. No Dreamweaver, o objeto ActiveX permite que voc defina atributos e parmetros para um controle ActiveX no navegador do visitante.
Para inserir o contedo de controles ActiveX:
1.
Na janela do documento, coloque o ponto de insero onde deseja inserir o contedo e siga um dos procedimentos abaixo:
Na categoria Common (Comuns) da barra Insert (Inserir), clique na seta para baixo no boto Media (Mdia) e selecione o cone ActiveX. Na categoria Common da barra Insert, clique na seta para baixo no boto Media e selecione o cone ActiveX. Com o cone ActiveX exibido na barra Insert, possvel arrast-lo para a janela do documento Selecione Insert > Media > ActiveX.
Um cone marca o local onde o controle ActiveX ser exibido na pgina no Internet Explorer. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
Inserir um applet Java

possvel usar o Dreamweaver para inserir um applet Java em um documento HTML. Java uma linguagem de programao que permite o desenvolvimento de aplicativos pequenos (applets) que podem ser incorporados s pginas da Web.
Para inserir um applet Java:
1.
Na janela do documento, coloque o ponto de insero onde deseja inserir o applet e siga um dos procedimentos abaixo:
Na categoria Common (Comuns) da barra Insert (Inserir), clique na seta para baixo no boto Media (Mdia) e selecione o cone Applet. Selecione Insert > Media > Applet.
2.
Na caixa de dilogo que ser exibida, selecione um arquivo que contenha o applet Java. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
Inserir um applet Java
539
Utilizar comportamentos para controlar elementos de mdia

possvel adicionar comportamentos pgina, para iniciar e interromper diversos objetos de mdia. A opo Control Shockwave ou Flash (Controlar Shocwave ou Flash) permite que voc reproduza, interrompa, rebobine ou v para um quadro em um filme do Shockwave ou arquivo Flash SWF (consulte Control Shockwave or Flash (Controlar o Shockwave ou Flash) na pgina 554). A opo Play Sound (Executar o som) permite reproduzir um som. Por exemplo, possvel reproduzir um efeito sonoro sempre que o usurio mover o ponteiro do mouse sobre um link (consulte Play Sound (Executar o som) na pgina 563). A opo Check Plugin (Verificar o plug-in) permite verificar se os visitantes do seu site j possuem o plug-in necessrio instalado e, em seguida, os direciona para outras URLs, caso tenham o plug-in correto. Isso se aplica somente aos plug-ins do Netscape Navigator, pois o comportamento Check Plugin no verifica os controles ActiveX. Para obter mais informaes, consulte Check Plugin (Verificar o plug-in) na pgina 552.
540
CAPTULO 18
Utilizar comportamentos JavaScript

Os comportamentos do Macromedia Dreamweaver 8 colocam o cdigo JavaScript nos documentos para permitir que os visitantes interajam com uma pgina da Web para alterar a pgina de diversas maneiras ou determinar a execuo de certas tarefas. Um comportamento uma combinao entre um evento e uma ao por ele disparada. No painel Behaviors (Comportamentos), possvel adicionar um comportamento a uma pgina especificando uma ao e, depois, o evento que ir dispar-la.
NO T A
18
O cdigo do comportamento um cdigo JavaScript no lado do cliente, ou seja, ele executado nos navegadores, no nos servidores.
Na realidade, os eventos so mensagens geradas por navegadores, que indicam algum tipo de interao do visitante com a sua pgina. 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 cdigo JavaScript (especificado na pgina que est sendo exibida) que deve ser chamado quando o evento for gerado para esse link. Diferentes eventos so definidos para diferentes elementos de pgina. Por exemplo, na maior parte dos navegadores, onMouseOver e onClick so eventos associados a links, enquanto onLoad um evento associado a imagens e seo body do documento. Uma ao consiste no cdigo previamente escrito em JavaScript, que executa uma tarefa especfica como, por exemplo, a abertura de uma janela do navegador, a exibio ou ocultao de uma camada, a execuo de um som ou a interrupo de um filme Macromedia Shockwave. As aes fornecidas com o Macromedia Dreamweaver so cuidadosamente escritas pelos programadores do Dreamweaver, para proporcionar o mximo de compatibilidade entre os diferentes navegadores.
541
Depois de anexar um comportamento a um elemento da pgina, sempre que o evento especificado ocorrer para o elemento, o navegador chamar a ao (o cdigo JavaScript) a ele associado. (Os eventos que podem ser utilizados para disparar uma determinada ao variam de acordo com o navegador utilizado.) Por exemplo: se voc anexar a ao Mensagem pop-up a um link e especificar que ela ser disparada pelo evento onMouseOver, sempre que algum indicar o link com o ponteiro do mouse no navegador, a mensagem ser exibida em uma caixa de dilogo. Um nico evento pode disparar diversas aes e possvel especificar a ordem na qual estas aes ocorrero. O Dreamweaver oferece cerca de duas dzias de aes de comportamentos; possvel ter acesso a outras aes no site da Web do Macromedia Exchange, assim como em sites de outros desenvolvedores. Consulte Fazer o download e instalar os comportamentos de outros fabricantes na pgina 548. Se souber utilizar os recursos JavaScript, voc poder gravar as suas prprias aes relacionadas a comportamentos. Para obter mais informaes sobre como gravar aes de comportamentos, consulte Extending Dreamweaver (Estender o Dreamweaver) (Help > Extending Dreamweaver).
N OT A 542
Os termos comportamento e ao se relacionam ao Dreamweaver, e no HTML. Do ponto de vista do navegador, uma ao se assemelha a qualquer outro tipo de cdigo JavaScript.

Utilizar o painel Behaviors (Comportamentos) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .543 Sobre os eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .543 Aplicao de um comportamento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544 Anexar um comportamento ao texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545 Alterar um comportamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .546 Atualizar um comportamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .547 Criar novas aes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .548 Fazer o download e instalar os comportamentos de outros fabricantes . . . . . . . .548 Utilizar as aes de comportamentos enviadas com o Dreamweaver . . . . . . . . . 549
Captulo 18: Utilizar comportamentos JavaScript
Utilizar o painel Behaviors (Comportamentos)

Utilize o painel Behaviors para anexar comportamentos a elementos de pgina (mais especificamente s tags) e para modificar parmetros de comportamentos anexados anteriormente.
Para abrir o painel Behaviors:
Selecione Window (Janela) > Behaviors.
Os comportamentos que j tiverem sido anexados ao elemento selecionado da pgina aparecero na lista de comportamentos (a rea principal do painel), em ordem alfabtica, conforme o evento. Se houver diversas aes para o mesmo evento, elas sero executadas na ordem em que so exibidas na lista. Se no houver qualquer comportamento na lista de comportamentos, o elemento selecionado no apresenta qualquer comportamento a ele anexado. Para obter mais informaes sobre as opes do painel Behaviors, selecione Help (Ajuda) no menu Options (Opes) na barra de ttulo do grupo de painis.
Sobre os eventos
Cada navegador fornece um conjunto de eventos que podem ser associados s aes listadas no menu pop-up Actions (+) [Aes (+)] do painel Behaviors. Quando um visitante de sua pgina da Web interagir com ela clicando em uma imagem, por exemplo o navegador gerar eventos, que podem ser utilizados para chamar as funes JavaScript responsveis pela ocorrncia da ao Os eventos tambm podem ser gerados sem a interao com o usurio, como no caso da definio de atualizao automtica de uma pgina a cada 10 segundos. O Dreamweaver fornece muita aes comuns que podem ser ativadas utilizando esses eventos. Para obter os nomes e as descries dos eventos fornecidos por cada navegador, visite o Dreamweaver Support Center (Centro de suporte do Dreamweaver) em www.macromedia.com/go/dreamweaver_support.
Sobre os eventos
543
Os eventos que aparecero no menu pop-up Events (Eventos) dependero do objeto selecionado e dos navegadores especificados no submenu Show Events For (Mostrar os eventos de). Para determinar quais so os eventos suportados por um determinado navegador para um elemento de pgina especfico, insira o elemento de pgina no documento e anexe um comportamento a ele. Em seguida, consulte o menu pop-up Events, no painel Behaviors. possvel que alguns eventos estejam desativados (esmaecidos), se os objetos relevantes ainda no existirem na pgina ou se o objeto selecionado no puder receber eventos. Se os eventos esperados no aparecerem, certifique-se de que o objeto correto esteja selecionado ou altere os navegadores de destino no menu pop-up Show Events For. Se voc estiver anexando um comportamento a uma imagem, alguns eventos (como aparecero entre parnteses. Estes eventos estaro disponveis 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 Property inspector, o link nulo representado por javascript:;. possvel alterar o valor do link se desejar torn-lo um link real a outra pgina, porm, se o link JavaScript for excludo e no for substitudo por outro link, o comportamento ser removido.
onMouseOver)
Para uma verificao detalhada das tags que podero ser utilizadas com um dado evento em um determinado navegador, localize o evento em um dos arquivos da pasta Dreamweaver/ Configuration (Configurao)/Behaviors/Events (Eventos).
Aplicao de um comportamento
possvel anexar comportamentos ao documento inteiro (ou seja, tag body) ou aos links, imagens, elementos de formulrios ou qualquer um dos vrios elementos HTML. O navegador de destino que tiver sido selecionado determinar quais eventos associados a um determinado elemento contaro com suporte. O Internet Explorer 4.0, por exemplo, dispe de um conjunto muito maior de eventos para cada elemento do que o Navigator 4.0 ou qualquer navegador de verso 3.0.
N OT A 544
No possvel anexar um comportamento a texto simples. Para obter mais informaes, consulte Anexar um comportamento ao texto na pgina 545.
possvel especificar mais de uma ao por evento. As aes ocorrem na ordem em que aparecem na lista da coluna Actions (Aes) do painel Behaviors. Para obter mais informaes sobre como alterar a ordem das aes, veja Alterar um comportamento na pgina 546.
Para anexar um comportamento:

1.
Selecione um elemento na pgina, como uma imagem ou link, por exemplo. Para anexar um comportamento pgina inteira, clique na tag <body>, no seletor de tags situado no canto inferior esquerdo da janela do documento.
2. 3.
Escolha Window (Janela) > Behaviors (Comportamentos), para abrir o painel Behaviors. Clique no boto com o sinal de adio (+) e escolha uma ao no menu pop-up Actions (Aes). As aes que estiverem esmaecidas no menu no podero ser escolhidas. possvel que elas estejam esmaecidas porque o documento no apresenta um objeto necessrio. Por exemplo, a ao Control Shockwave or Flash (Controlar o Shockwave ou Flash) encontrase esmaecida se o documento contm filmes do Shockwave ou do Macromedia Flash. Se no houver qualquer evento disponvel para o objeto selecionado, todas as aes estaro esmaecidas. Quando voc escolhe uma ao, exibida uma caixa de dilogo que mostra os parmetros e as instrues referentes a ela.
4.
Digite os parmetros relativos ao e clique em OK. Todas as aes enviadas com o Dreamweaver funcionam com os navegadores das verses 4.0 e posteriores. Algumas aes no funcionam nos navegadores mais antigos. Consulte Utilizar as aes de comportamentos enviadas com o Dreamweaver na pgina 549.
5.
O evento padro que desencadeia a ao aparecer na coluna Events (Eventos). Se este no for o evento desejado, escolha outro evento no menu pop-up Events. (Para abrir o menu pop-up Events, selecione um evento ou ao no painel Behaviors e clique na seta preta para baixo que aparecer entre o nome do evento e o da ao.)
Anexar um comportamento ao texto

No possvel anexar um comportamento a texto simples. As tags p e span no geram eventos nos navegadores, portanto no possvel desencadear uma ao a partir destas tags. No entanto, possvel 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 no indicar qualquer elemento) ao texto e, em seguida, anexar o comportamento ao link. Observe que, ao executar este procedimento, o texto aparecer como um link. possvel alterar a cor do texto e remover o seu sublinhado se for prefervel que ele no se assemelhe a um link; porm, possvel que o visitante do site no perceba que h um motivo para clicar no texto.
Anexar um comportamento ao texto
545
Para anexar um comportamento ao texto selecionado:

1.
No Property inspector (Inspetor de propriedades), digite javascript:; na caixa de texto Link. Assegure-se de ter includo os sinais de dois-pontos e ponto-e-vrgula.
NO TA
Em vez destes, possvel utilizar o sinal # na caixa de texto Link, se preferir. O problema em utilizar o sinal numrico que quando um visitante clica no link, alguns navegadores podem saltar para a parte superior da pgina. O ato de clicar no link nulo de JavaScript no provocar qualquer efeito sobre a pgina, sendo, portanto, geralmente prefervel.
2.
Mantendo o texto selecionado, abra o painel Behaviors (Comportamentos) [Window (Janela) > Behaviors]. No menu pop-up Actions (Aes), escolha uma ao, digite os parmetros a ela correspondentes e selecione um evento para dispar-la. Para obter informaes detalhadas, veja Aplicao de um comportamento na pgina 544.
3.
Para alterar a aparncia do texto do link de maneira que no se parea com um link:
1.
Abra a visualizao do cdigo da janela do documento, escolhendo View (Exibir) > Code (Cdigo). Localize o link. Na tag a href do link, insira este atributo: style="text-decoration:none; color:black". Esta definio 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. Observe que esse atributo um estilo CSS em linha. Um estilo em linha aplicado a um nico link substitui outros estilos CSS aplicveis a esse link, mas no tem efeito fora desse link. Para alterar a aparncia de texto com links em toda a pgina ou em todo o site, utilize os estilos CSS para criar um estilo novo para os links. Para obter informaes detalhadas, veja Captulo 13, Inserir e formatar texto, na pgina 405.
2. 3.
Alterar um comportamento
Aps anexar um comportamento, voc poder alterar o evento que dispara a ao, adicionar ou remover aes e alterar os parmetros relativos s aes.
Para alterar um comportamento:
1.
Selecione um objeto que possua um comportamento a ele anexado.
546
2.
Escolha Window (Janela) > Behaviors (Comportamentos), para abrir o painel Behaviors. Os comportamentos aparecero no painel, em ordem alfabtica, segundo o evento. Se houver diversas aes para o mesmo evento, elas sero exibidas na ordem em que sero executadas.
3.
Para editar os parmetros de uma ao, clique duas vezes no nome do comportamento ou selecion-lo e pressione a tecla Enter (no Windows), ou Return (no Macintosh). Em seguida, modifique os parmetros na caixa de dilogo e clique em OK. Para alterar a ordem das aes de um determinado evento, selecione uma ao e clique no boto de seta acima ou abaixo. Tambm possvel, dentre uma srie de outras aes, selecionar a ao e recortar e col-la no local desejado. Para excluir um comportamento, selecione-o e clique no boto com o sinal de subtrao (), ou pressione a tecla Delete.
Atualizar um comportamento
Se as suas pginas contiverem comportamentos criados com o Dreamweaver 1 ou com o Dreamweaver 2, esses comportamentos no sero atualizados automaticamente quando as pginas forem abertas na verso atual do Dreamweaver. No entanto, quando voc atualiza uma ocorrncia de um comportamento em uma pgina (seguindo o procedimento descrito nesta seo), todas as outras ocorrncias desse comportamento nessa pgina tambm so atualizadas. Os comportamentos criados com o Dreamweaver 3 funcionaro sem alteraes no Dreamweaver 4.
NO T A
Como afirmado anteriormente, quando voc atualiza uma ocorrncia de um comportamento em uma pgina, todas as outras ocorrncias desse comportamento nessa pgina tambm so atualizadas. Contudo, preciso atualizar comportamentos para cada pgina visitada no site.
Para atualizar um comportamento em uma pgina:

1. 2. 3. 4.
Selecione um elemento ao qual tiver sido anexado o comportamento. Abra o painel Behaviors (Comportamentos). Clique duas vezes no comportamento. Clique em OK na caixa de dilogo do comportamento.
Todas as ocorrncias desse comportamento na pgina sero atualizadas.
Atualizar um comportamento
547
Criar novas aes

As aes consistem em cdigo JavaScript e HTML. Se o usurio estiver bastante familiarizado com JavaScript, poder escrever novas aes e adicion-las ao menu pop-up Actions (Aes), no painel Behaviors (Comportamentos). Para obter mais informaes, veja Extending Dreamweaver (Extenso dos recursos do Dreamweaver).
Fazer o download e instalar os comportamentos de outros fabricantes

Um dos aspectos mais teis do Dreamweaver a possibilidade de estender os seus recursos, ou seja, ele oferece aos usurios que j esto familiarizados com JavaScript a oportunidade de escrever o cdigo JavaScript que poder estender os recursos do Dreamweaver. Muitos desses usurios optaram por compartilhar suas extenses com outros usurios enviando-as ao site do Macromedia Exchange para Dreamweaver na Web (www.macromedia.com/go/ dreamweaver_exchange).
Para efetuar o download e instalar novos comportamentos do site do Macromedia Exchange na Web:
1.
Abra o painel Behaviors (Comportamentos) e no menu pop-up Actions (+), escolha Get More Behaviors (Obter mais comportamentos). O navegador primrio ser aberto e o site de intercmbio aparecer. ( preciso estar conectado Web para poder efetuar o download de comportamentos).
2. 3.
Procure os pacotes. Efetue o download e instale o pacote de extenso desejado. Para obter informaes detalhadas, veja Adicionar extenses ao Dreamweaver na pgina 84.
548
Utilizar as aes de comportamentos enviadas com o Dreamweaver

As aes de comportamento includas com o Dreamweaver foram criadas para funcionar com todas as verses do Netscape Navigator 4.0 e posteriores e nas verses 4.0 e mais avanadas do Internet Explorer. A maioria dessas aes de comportamento tambm funciona no Netscape Navigator nas verses 3.0 e posteriores (Os comportamentos referentes camada no funcionam no Navigator 3.0). A maioria dessas aes de comportamento falha silenciosamente na verso 3.0 do Internet Explorer.
NO T A
As aes do Dreamweaver foram escritas para que possam ser executadas no maior nmero possvel de navegadores. Caso o cdigo de uma ao do Dreamweaver seja removido manualmente ou substitudo por cdigo de sua prpria autoria, possvel que a compatibilidade com outros navegadores seja perdida.
Embora as aes do Dreamweaver tenham sido escritas visando a maximizar a compatibilidade entre os diferentes navegadores, algumas aes no funcionam nas verses mais antigas de alguns navegadores. Alm disso, alguns navegadores no oferecem qualquer suporte ao JavaScript, e muitos usurios que consultam a Web mantm o JavaScript desativado em seus navegadores. Para obter os melhores resultados de compatibilidade entre diversas plataformas, fornea interfaces alternativas delimitadas por tags noscript, de maneira que os usurios que no contarem com o JavaScript possam utilizar o seu site.
Chamar o JavaScript
A ao Call JavaScript (Chamar o JavaScript) permite utilizar o painel Behaviors para especificar a execuo de uma funo ou linha de cdigo personalizada de JavaScript quando ocorrer um evento. ( possvel escrever o cdigo JavaScript ou utilizar o cdigo disponvel gratuitamente em diversas bibliotecas de JavaScript na Web.)
Para poder utilizar a ao Call JavaScript:
1. 2. 3.
Selecione um objeto e abra o painel Behaviors (Comportamentos). Clique no boto de adio (+) e escolha Call JavaScript no menu pop-up Actions. Digite o JavaScript a ser executado ou o nome de uma funo. Por exemplo, para criar um boto Back (Voltar), digite if (history.length > 0){history.back()}. Se tiver encapsulado o cdigo em uma funo, digite apenas o nome da funo (por exemplo, hogback()).
4.
Clique em OK.
549
5.
Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de).
Change Property (Alterar a propriedade)

Utilize a ao Change Property para alterar o valor de uma das propriedades de um objeto (a cor de fundo de uma camada ou a ao relacionada a um formulrio, por exemplo). As propriedades que podem ser alteradas so determinadas pelo navegador. O Internet Explorer 4.0 permite alterar um nmero maior de propriedades (comparado ao Internet Explorer 3.0 ou s verses 3.0 e 4.0 do Navigator). Por exemplo: voc pode definir dinamicamente a cor de fundo de uma camada.
NO TA
Utilize esta ao apenas se j estiver muito familiarizado com HTML e JavaScript.
Para utilizar a ao Change Property:

1. 2. 3.
Selecione um objeto e abra o painel Behaviors (Comportamentos). Clique no boto de adio (+) e escolha Change Property no menu pop-up Actions. No menu pop-up Type of Object (Tipo de objeto), escolha o tipo de objeto cuja propriedade deseje alterar. O menu pop-up Named Object passa a listar todos os objetos nomeados que pertencem ao tipo selecionado.
4. 5.
Escolha um objeto no menu pop-up Named Object. Escolha uma propriedade no menu pop-up Property (Propriedade) ou digite o nome da propriedade na caixa de texto. Para poder examinar as propriedades que podem ser alteradas em cada navegador, selecione navegadores diferentes ou verses 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 reconhecem maisculas e minsculas).
6.
Digite o novo valor da propriedade, na caixa de texto New Value (Novo valor) e clique em OK.
550
7.
Verifique se o evento padro corresponde ao desejado. Quando o evento ocorrer, a ao ser executada e a propriedade alterada. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de).
Check Browser (Verificar o navegador)

Utilize a ao Check Browser para enviar os visitantes a outras pginas, dependendo da marca e verso do seu navegador. Por exemplo: possvel optar por enviar os usurios para uma pgina se eles estiverem utilizando a verso 4.0 ou mais avanada do Netscape Navigator, para outra pgina se utilizarem a verso 4.0 ou mais avanada do Microsoft Internet Explorer 4.0 ou mant-los na mesma pgina, caso estejam utilizando qualquer outro navegador. til anexar este comportamento tag body de uma pgina que seja compatvel com praticamente qualquer navegador (e que no utilize outro JavaScript); desta maneira, mesmo os visitantes que chegarem pgina com o JavaScript desativado podero ver algo.
<a href="javascript:;">)
Uma outra opo seria anexar este comportamento a um link nulo (such as de forma que a ao determine o destino do link com base na marca e na verso do navegador do visitante.
Para poder utilizar a ao Check Browser:

1. 2.
Selecione um objeto e abra o painel Behaviors (Comportamentos). Clique no boto com o sinal de adio (+) e escolha Check Browser no menu pop-up Actions. Determine como gostaria de separar os visitantes: por marca de navegador, por verso de navegador ou por ambas. Por exemplo: voc gostaria que todos os visitantes com um navegador da verso 4.0 vissem uma pgina, enquanto os visitantes com outras verses vissem uma pgina diferente? Ou talvez que os usurios do Netscape Navigator vissem uma pgina e os usurios do Internet Explorer, outra.
3.
4. 5.
Especifique uma verso do Netscape Navigator. Nos menus pop-up adjacentes, escolha as opes que indicam as aes a serem tomadas se a verso do navegador corresponder ou for mais avanada do que a verso do Netscape Navigator especificada e como proceder no caso contrrio. As opes so Go to URL (Ir para a URL), Go to Alt URL (Ir para URL alternativa) e Stay on This Page (Continuar nesta pgina).
6.
Especifique uma verso do Internet Explorer.
551
7.
Nos menus pop-up adjacentes, escolha as opes que indicam as aes a serem tomadas se a verso do navegador corresponder ou for mais avanada do que a verso do Internet Explorer especificada e como proceder no caso contrrio. As opes so Go to URL (Ir para a URL), Go to Alt URL (Ir para URL alternativa) e Stay on This Page (Continuar nesta pgina).
8.
No menu pop-up Other Browsers (Outros navegadores), escolha uma opo para especificar as aes que sero tomadas se o navegador no for o Navigator nem o Internet Explorer. Por exemplo: possvel que o visitante esteja utilizando um navegador com base em texto, como o Lynx. Continuar nesta pgina a melhor opo para os navegadores diferentes do Navigator e IE porque a maioria no oferece suporte ao JavaScript. Nesse caso, se no puderem ler este comportamento, eles permanecero na pgina de qualquer maneira.
9.
Digite os caminhos e nomes de arquivos da URL e da URL alternativa nas caixas de texto situados na parte inferior da caixa de dilogo. Se voc digitar uma URL remota, digite tambm o prefixo http://, alm do endereo www. em OK. Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de). Lembre-se de que o objetivo desse comportamento verificar as diferentes verses do navegador, portanto, melhor escolher um evento que funcione nos navegadores 3.0 e mais avanados.
10. Clique 11.
Check Plugin (Verificar o plug-in)

Utilize a ao Check Plugin para enviar os visitantes a outras pginas, dependendo da ocorrncia de um determinado plug-in instalado. Por exemplo: possvel optar por enviar os usurios para uma pgina se eles possurem o Shockwave, ou para outra pgina, se no contarem com ele.
N OT A
No possvel detectar determinados plug-ins no Internet Explorer utilizando o JavaScript. Contudo, a seleo de Flash ou Director adicionar o cdigo VBScript apropriado pgina, para detectar os plug-ins no IE do Windows. A deteco de plugins no possvel no Internet Explorer que estiver sendo executado no Macintosh.
Para poder utilizar a ao Check Plugin:

1.
Selecione um objeto e abra o painel Behaviors (Comportamentos).
552
2.
Clique no boto com o sinal de adio (+) e escolha Check Plugin no menu pop-up Actions. No menu pop-up Plugin (Plug-in), escolha um plug-in, ou clique na tecla Enter e digite o nome exato do plug-in na caixa de texto adjacente. necessrio o nome exato do plug-in, conforme o especificado em negrito na pgina About Plug-ins (Sobre os plug-ins) no Navigator. No Windows, escolha Navigators Help (Ajuda do Navigator) > comando About Plug-ins (Sobre os plug-ins); no Macintosh, escolha About Plug-ins no menu Apple.
3.
4.
Na caixa de texto If Found (Se for localizado), na caixa de texto Go To URL (Ir para a URL), especifique uma URL para os visitantes que contam com o plug-in. Se voc especificar uma URL remota, digite tambm o prefixo http:// no endereo. Para que os visitantes com o plug-in permaneam na mesma pgina, deixe em branco este campo.
5.
Na caixa de texto Otherwise, Go To URL (Caso contrrio, ir para URL), especifique um URL alternativo para os visitantes que no possuem o plug-in. Para garantir que os visitantes sem o plug-in permanecero na mesma pgina, deixe este campo em branco.
6.
A maioria dos plug-ins no pode ser detectada no Internet Explorer executado no Windows e sua deteco impossvel no Macintosh. Como padro, quando a deteco for impossvel, o visitante ser enviado para a URL listada na caixa de texto Otherwise (Caso contrrio). Para enviar o visitante para a primeira URL (If Found), selecione a opo Always go to first URL if detection is not possible (Ir sempre para a primeira URL se a deteco no for possvel). A seleo desta opo implicar aceitar que o visitante dispe do plug-in, exceto se o navegador indicar explicitamente que o plug-in no est presente. Em geral, se o contedo do plug-in for parte integral da pgina, deve-se selecionar a opo "Always go to first URL if detection is not possible". Os visitantes que no tiverem o plugin recebero uma notificao do navegador para que efetuem o download do plug-in. Se o contedo do plug-in no for essencial para a pgina, no selecione esta opo. Esta opo se aplica apenas ao Internet Explorer; o Navigator sempre capaz de detectar os plug-ins.
7. 8.
Clique em OK. Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de).
553
Control Shockwave or Flash (Controlar o Shockwave ou Flash)

Utilize a ao Control Shockwave or Flash para executar, parar, rebobinar ou ir para um quadro de um arquivo Macromedia Shockwave or Macromedia Flash SWF. Para utilizar a ao Control Shockwave or Flash:
1.
Escolha Insert (Inserir) > Media (Mdia) > Shockwave, ou Insert > Media > Flash, para inserir um arquivo Shockwave ou Flash SWF, respectivamente. Escolha Window (Janela) > Properties (Propriedades) e digite o nome de um filme, na caixa de texto do canto superior esquerdo (ao lado do cone de Shockwave ou Flash). necessrio atribuir um nome ao filme para que se possa control-lo com a ao Control Shockwave or Flash. Selecione os itens a serem utilizados no controle do arquivo Shockwave ou Flash SWF. Por exemplo: se houver uma imagem de um boto Play (Executar) que ser utilizada na reproduo do filme, selecione-a. Abra o painel Behaviors (Comportamentos) [Window (Janela) > Behaviors]. Clique no boto com o sinal de adio (+) e escolha Control Shockwave or Flash (Controlar o Shockwave ou Flash) no menu pop-up Actions (Aes). Uma caixa de dilogo com os parmetros exibida. No menu pop-up Movie (Filme), escolha um filme. O Dreamweaver listar automaticamente os nomes de todos os filmes Shockwave e Flash SWF 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.
2.
3.
4. 5.
6.
7.
Escolha uma das aes para executar, parar, rebobinar ou ir para um quadro do filme. A opo Play (Executar) executa o filme a partir do quadro no qual ocorre a ao. Clique em OK. Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no submenu Show Events For (Mostrar os eventos de) no menu pop-up Events (Eventos).
8. 9.
554
Drag Layer (Arrastar a camada)

A ao Drag Layer permite ao visitante arrastar uma camada. Utilize esta ao para criar quebra-cabeas, controles deslizantes e outros elementos mveis de interface. possvel especificar, entre outros aspectos, em qual direo o visitante poder arrastar a camada (horizontal, verticalmente ou em qualquer uma das direes), um destino at o qual a camada dever ser arrastada, se a camada se encaixar no destino, se esta estiver distante um certo nmero de pixels, e o que dever ser feito quando a camada alcanar o destino. Como a ao Drag Layer deve ser chamada antes que a camada possa ser arrastada pelo visitante, certifique-se de que o evento que disparar a ao ocorrer antes que o visitante tente arrastar a camada. melhor anexar a ao Drag Layer ao objeto body (com o evento onLoad), embora ela tambm 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 ao Drag Layer:
1.
Escolha Insert (Inserir) > Layer (Camada), ou clique no boto Draw Layer (Desenhar camada) na barra Insert, e desenhe uma camada na visualizao do projeto da janela do documento. Selecione a tag body, clicando em <body>, no seletor de tags, situado na parte inferior da janela do documento. Abra o painel Behaviors (Comportamentos). Clique no boto de adio (+) e escolha Drag Layer no menu pop-up Actions. Se a opo Drag Layer no estiver disponvel, provvel que j haja uma camada selecionada. Como as camadas no aceitam eventos em ambos os navegadores da verso 4.0, selecione um outro objeto, como a tag body ou um link (a tag) ou, no menu pop-up Show Events For (Mostrar os eventos de), altere o navegador de destino para Internet Explorer 4.0.
2.
3. 4.
5. 6.
No menu pop-up Layer, selecione a camada que deseja tornar arrastvel. No menu pop-up Movement (Movimento), escolha Constrained (Restrito) ou Unconstrained (No restrito). O movimento no restrito adequado aos quebra-cabeas e outros jogos que envolvem arrastar e soltar elementos. No caso dos controles deslizantes e cenrios mveis, como gavetas de arquivos, cortinas e mini-persianas, opte pelo movimento restrito.
555
7.
Digite os valores do movimento restrito (em pixels) nas caixas de texto Up (Acima), Down (Abaixo), Left ( esquerda) e Right ( direita). Os valores se relacionam posio inicial da camada. Para restringir o movimento a uma regio retangular, digite valores positivos nas quatro caixas de texto. Para permitir apenas o movimento vertical, digite valores positivos em Up e Down, e zero em Left e Right. Para permitir apenas o movimento horizontal, digite valores positivos em Left e Right, e zero em Up e Down.
8.
Digite os valores do destino de soltura (em pixels) nas caixas de texto Left e Top. O destino de soltura o ponto at o qual voc deseja que o visitante arraste a camada. A camada ter alcanado o destino de soltura quando as suas coordenadas esquerda e do alto coincidirem com os valores digitados nas caixas de texto Left e Top. Os valores se relacionam ao canto superior esquerdo da janela do navegador. Clique em Get Current Position (Obter a posio atual), para preencher automaticamente as caixas de texto com a posio atual da camada.
9.
Digite um valor (em pixels) na caixa de texto Snap if Within (Encaixar, se distante) para determinar a distncia mnima do destino de soltura que o visitante dever adotar para que a camada se encaixe no destino. Quanto maior o valor, mais fcil ser para o visitante detectar o destino de soltura. caso de quebra-cabeas simples e manipulaes de cenrios, no h necessidade de ultrapassar este ponto. Para definir a ala de arraste da camada, controlar o movimento da camada enquanto esta estiver sendo arrastada e ativar uma ao quando a camada for solta, clique na guia Advanced. Para especificar se o visitante dever clicar em uma determinada rea da camada para que esta seja arrastada, escolha Area Within Layer (rea dentro da camada), no menu pop-up Drag Handle (Ala de arraste). Em seguida, digite as coordenadas da esquerda e do alto, assim como a largura e altura da ala de arraste. Esta opo til quando a imagem dentro da camada possuir um elemento que sugere o arraste, como uma barra de ttulo ou ala de desenho, por exemplo. No selecione esta opo se preferir permitir ao visitante clicar em qualquer ponto da camada para poder arrast-la.
10. No
11.
12. Escolha
qualquer opo While Dragging (Enquanto arrasta) que desejar utilizar:
Selecione Bring Layer to Front (Trazer a camada para frente), se preferir que a camada seja transferida para frente da ordem de empilhamento enquanto for arrastada. Se esta opo for selecionada, utilize o menu pop-up para optar por deixar a camada na frente ou restaur-la sua posio original na ordem de empilhamento.
556
Digite um cdigo JavaScript ou um nome de funo (monitorLayer(), por exemplo) na caixa de texto Call JavaScript (Chamar o JavaScript), a fim de executar repetidamente o cdigo ou a funo enquanto a camada estiver sendo arrastada. Por exemplo: possvel gravar uma funo que monitore as coordenadas da camada e exiba indicaes, tais como voc est prximo ou muito distante do destino de soltura, em uma caixa de texto. Para obter mais informaes, consulte Reunir informaes sobre a camada arrastvel na pgina 557.
13.
Digite um cdigo JavaScript ou um nome de funo (evaluateLayerPos(), por exemplo) na segunda caixa de texto Call JavaScript, a fim de executar o cdigo ou funo quando a camada for solta. Selecione Only if Snapped (Apenas se estiver encaixada), nos casos em que o JavaScript for executado apenas se a camada tiver alcanado o destino de soltura. em OK. Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de). Lembre-se de que as camadas no contam com o suporte dos navegadores da verso 3.0.
NO TA
14. Clique 15.
impossvel anexar a ao Drag Layer a um objeto associado aos eventos onMouseDown ou onClick.
Reunir informaes sobre a camada arrastvel

Ao ser anexada a ao Drag Layer (Arrastar a camada) a um objeto, o Dreamweaver inserir a funo MM_dragLayer() na seo head do documento. Alm de registrar a camada como arrastvel, esta funo definir trs propriedades de cada camada arrastvel MM_LEFTRIGHT, MM_UPDOWN, and MM_SNAPPED que voc poder utilizar nas suas prprias funes JavaScript para determinar as posies relativas horizontal e vertical da camada e se a camada atingiu o destino de soltura.
N O TA
As informaes fornecidas aqui se destinam ao uso apenas de programadores de JavaScript que j contem com experincia.
Por exemplo: a funo a seguir exibe o valor da propriedadeMM_UPDOWN (a posio vertical da camada) em um campo de formulrio denominado curPosField. Por serem dinmicos, os campos de formulrio so teis para exibir informaes atualizadas continuamente, ou seja, possvel alterar o seu contedo depois que a pgina tiver sido carregada, tanto no Netscape Navigator quanto no Internet Explorer.
557
function getPos(layername){ var layerRef = MM_findObj(layername); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; }
Em vez de exibir os valores de MM_UPDOWN ou MM_LEFTRIGHT em um campo de formulrio, possvel usar esses valores de diversas outras maneiras. Por exemplo, voc pode escrever uma funo que exibe uma mensagem em um campo de formulrio dependendo do quo prximo um valor esteja da zona ativa, ou voc pode chamar outra funo a fim de exibir ou ocultar uma camada dependendo do valor. recomendvel ler a propriedade MM_SNAPPED quando houver vrias camadas na mesma pgina. Todas estas camadas devero alcanar os seus destinos para que o visitante possa avanar at a prxima pgina ou tarefa. Por exemplo: grave uma funo 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 nmero desejado, envie o visitante para a prxima pgina ou exiba uma mensagem parabenizando-o. Se voc tiver utilizado o evento onMouseOver para anexar a ao Drag Layer a links localizados em diversas camadas, ser necessrio efetuar uma pequena alterao funo 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 prpria. Isto poder ocorrer quando tiver utilizado Drag Layer para criar um quebra-cabea, j que provvel que o visitante passe o ponteiro do mouse sobre as peas j encaixadas enquanto posiciona outras. A funo MM_dragLayer() no capaz de evitar este comportamento porque algumas vezes ele prefervel (por exemplo, quando se deseja definir diversos destinos de soltura para uma nica camada).
Para evitar o novo registro de camadas j encaixadas:
1.
Faa uma cpia de segurana do documento antes de alterar o cdigo. possvel fazer isto no painel Site do Dreamweaver, no Windows Explorer (Windows) ou no Finder (Macintosh). Selecione Edit (Editar) > Find (Localizar). No menu pop-up Find What (Localizar), escolha HTML Source (Origem de HTML). Digite (!curDrag), inclusive os parnteses, na caixa de texto adjacente. Clique em Find Next (Localizar o prximo). Se o Dreamweaver perguntar se voc deseja continuar a procurar desde o incio do documento, clique em Yes. O Dreamweaver localiza a seguinte instruo:
if (!curDrag) return false;
2. 3. 4. 5.
558
6.
Feche a caixa de dilogo Find e modifique a instruo na visualizao do cdigo da janela do documento ou no inspetor de cdigo, para que ela corresponda a:
if (!curDrag || curDrag.MM_SNAPPED != null) return false;
Os dois pipes (||) significam OU, e curDrag uma varivel que representa a camada que est sendo registrada como arrastvel. O significado aproximado da instruo Se curDrag no for um objeto ou se j tiver um valor MM_SNAPPED, no ser necessrio executar o restante da funo.
Go to URL (Ir para a URL)

A ao Go to URL abre uma nova pgina na janela ou no quadro especificado. Esta ao especialmente til para alterar o contedo de dois ou mais quadros com um nico clique.
Para utilizar a ao Go To URL (Ir para a URL):
1. 2.
Selecione um objeto e abra o painel Behaviors (Comportamentos). Clique no boto de adio (+) e escolha Go to URL (Ir para URL) no menu pop-up Actions. Na lista de seleo Open In (Abrir em), selecione um destino para a URL. A lista Open In listar automaticamente os nomes de todos os quadros do conjunto de quadros, bem como da janela principal. Se no houver quadros, a janela principal ser a nica opo.
N OT A
3.
Esta ao poder provocar resultados inesperados se houver qualquer quadro com os nomes top, blank, self ou parent. Algumas vezes, os navegadores confundem estes nomes com os dos destinos reservados.
4.
Clique em Browse (Procurar), para selecionar um documento a ser aberto, ou digite o caminho e o nome do documento na caixa de texto URL. Repita as etapas 3 e 4 para abrir outros documentos em outros quadros. Clique em OK. Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de).
5. 6. 7.
559
Jump Menu (Menu de salto)

Quando for criado um menu de salto utilizando Insert (Inserir) > Form Objects (Objetos de formulrio) > Jump Menu, o Dreamweaver criar um objeto de menu e lhe anexar o comportamento Jump Menu ou Jump Menu Go (Ir do menu de salto). Em geral, no necessrio anexar manualmente a ao Jump Menu a um objeto. Para obter informaes sobre os menus de salto e como cri-los, veja Menus de salto na pgina 465. possvel editar um menu de salto j existente de duas maneiras distintas:
possvel editar e reordenar os itens de menu, alterar os arquivos para os quais sero efetuados os saltos e alterar a janela na qual os arquivos sero abertos, ao clicar duas vezes em uma ao j existente Jump Menu (Menu de salto), no painel Behaviors (Comportamentos). possvel editar os itens do menu da mesma maneira que faria em qualquer outro menu, ao selecion-lo e utilizar o boto List Values (Listar os valores) no Property inspector (Inspetor de propriedades). Para obter mais informaes, consulte Inserir menus de formulrio HTML na pgina 894.
Para editar um menu de salto utilizando o painel Behaviors (Comportamentos):

1. 2. 3. 4.
Crie um objeto de menu de salto, se j no houver algum no documento. Selecione o objeto de menu de salto e abra o painel Behaviors. Na coluna Actions (Aes), clique duas vezes em Jump Menu. Faa as alteraes desejadas na caixa de dilogo Jump Menu e, em seguida, clique em OK.
Jump Menu Go (Ir do menu de salto)

A ao Jump Menu Go est intimamente associada ao Jump Menu (Menu de salto); Jump Menu Go permite associar um boto Go (Ir) a um menu de salto. Para poder utilizar esta ao, necessria a existncia de um menu de salto no documento. A ao de clicar no boto Go abrir o link que estiver selecionado no menu de salto. Normalmente, os menus de salto no exigem a ocorrncia de um boto Go; em geral, a escolha de um item em um menu de salto acarreta a carga de uma URL, sem qualquer interveno por parte do usurio. Porm, se o visitante escolher o mesmo item que j est escolhido no menu de salto, esse salto no ocorrer. Em geral, isso no far diferena. Porm, se o menu de salto aparecer em um quadro, e os itens desse menu estiverem vinculados a pginas de outros quadros, o boto Go poder ser til, permitindo aos visitantes escolher novamente um item que j tenha sido selecionado no menu de salto.
560
Para adicionar uma ao Jump Menu Go:

1.
Selecione um objeto a ser utilizado como boto Go (geralmente uma imagem de boto) e abra o painel Behaviors (Comportamentos). Clique no boto de adio (+) e escolha Jump Menu Go no menu pop-up Actions. No menu pop-up Choose Jump Menu (Escolher menu de salto), selecione um menu a ser ativado pelo boto Go. Clique em OK.
2. 3.
4.
Open Browser Window (Abrir a janela do navegador)

Utilize a ao Open Browser Window para abrir uma URL em uma nova janela. possvel especificar as propriedades da nova janela, inclusive o seu tamanho, nome e atributos (se ela ser redimensionvel, possuir uma barra de menus etc.). Por exemplo, voc pode utilizar este comportamento para abrir uma imagem maior em outra janela quando o visitante clicar em uma imagem em miniatura. Com este comportamento, possvel ajustar a janela ao tamanho exato da imagem. Se voc no especificar qualquer atributo da janela, ela ser aberta no tamanho e com os atributos da janela que a tiver iniciado. A especificao de qualquer atributo da janela automaticamente desativar todos os outros atributos que no estiverem explicitamente ativos. Por exemplo, se voc no definir qualquer atributo para a janela, ela poder ser aberta com 640 x 480 pixels e possuir uma barra de navegao, barra de ferramentas de localizao, barra de status e barra de menus. Se voc definir a largura explicitamente como sendo 640 e a altura como sendo 480 pixels e no definir outros atributos, a janela ser aberta com 640 por 480 pixels e no possuir barras de navegao, de ferramentas de localizao, de status ou de menus, qualquer ala de redimensionamento ou barras de rolagem.
Para utilizar a ao Open Browser Window:
1. 2.
Selecione um objeto e abra o painel Behaviors (Comportamentos). Clique no boto com o sinal de adio (+) e escolha Open Browser Window (Abrir janela do navegador) no menu pop-up Actions. Clique em Browse (Procurar) para selecionar um arquivo ou digite a URL a ser exibida. Defina qualquer uma das opes a seguir:
Window Width (Largura da janela) Window Height (Altura da janela)
3. 4.
especifica a largura da janela, em pixels.
especifica a altura da janela, em pixels.
Navigation Toolbar (Barra de ferramentas de navegao)
a linha de botes do navegador que inclui Back (Voltar), Forward (Avanar), Home (Pgina inicial) e Reload (Recarregar).
561
Location Toolbar (Barra de ferramentas de localizao)
a linha de opes do
navegador que inclui a caixa de texto de localizao.

Barra de status
a rea situada na parte inferior da janela do navegador, na qual so exibidas as mensagens (como o tempo restante de transferncia e as URLs associadas aos links).
a rea da janela do navegador (no Windows), ou da rea de trabalho (no Macintosh), onde aparecem os menus File (Arquivo), Edit (Editar), View (Exibir), Go (Ir) e Help (Ajuda). Defina explicitamente esta opo se desejar que os visitantes possam navegar a partir da nova janela. Se voc no definir esta opo, o usurio poder apenas fechar ou minimizar a janela (no Windows), ou fechar a janela ou sair do aplicativo (no Macintosh) a partir da nova janela.
Menu Bar (Barra de menus)
especifica que as barras de rolagem aparecero se o contedo ultrapassar a rea visvel. Se voc no definir esta opo explicitamente, as barras de rolagem no aparecero. Se a opo Resize Handles (Alas de redimensionamento) tambm estiver desativada, o visitante no poder exibir o contedo que ultrapassar o tamanho original da janela (apesar de poder rolar a janela ao arrastar a margem da mesma).
Scrollbars as Needed (Barras de rolagem, se necessrias) Resize Handles
especifica que o usurio poder redimensionar a janela, arrastando o canto inferior direito da mesma ou clicando no boto de maximizao (no Windows), ou na caixa de dimensionamento (no Macintosh), situada no canto superior direito. Se esta opo no estiver definida explicitamente, os controles de redimensionamento no estaro disponveis e o canto inferior direito da janela no poder ser arrastado. desejar atribuir links a ela ou control-la com o JavaScript. Este nome no pode conter espaos ou caracteres especiais.
Window Name (Nome da janela) o nome da nova janela. D um nome nova janela se
5. 6.
562
Play Sound (Executar o som)

Utilize a ao Play Sound para executar um som. Por exemplo: possvel executar um efeito sonoro sempre que o ponteiro do mouse for passado sobre um link ou executar um clipe de msica quando a pgina for carregada.
NO TA
possvel que os navegadores requeiram algum tipo de suporte de udio adicional (como um plug-in de udio) para que possam reproduzir sons. Por conseguinte, diferentes navegadores dotados de diferentes plug-ins muitas vezes executam os sons de maneiras diferentes. difcil prever com exatido como sero executados os sons que voc programou aos visitantes do seu site.
Para utilizar a ao Play Sound:

1. 2.
Selecione um objeto e abra o painel Behaviors (Comportamentos). Clique no boto de adio (+) e escolha Play Sound (Reproduzir som) no menu pop-up Actions. Clique em Browse (Procurar) para selecionar um arquivo de som, ou digite o caminho e o nome do arquivo na caixa de texto Play Sound. Clique em OK. Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de).
3.
4. 5.
Popup Message (Mensagem pop-up)

A ao Popup Message exibe um alerta em JavaScript com a mensagem por voc especificada. Como os alertas em JavaScript possuem apenas um boto (OK), utilize esta ao para fornecer informaes ao usurio, em vez de apresentar-lhe uma opo. possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade, varivel global ou outra expresso no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o por uma barra invertida (\{).
563
Exemplo:
The URL for this page is {window.location}, and today is {new Date()}.
N OT A
No possvel controlar a aparncia do alerta JavaScript, ela ser determinada pelo navegador utilizado pelo visitante. Se desejar exercer um controle maior sobre a aparncia da mensagem, considere a possibilidade de utilizar o comportamento Open Browser Window (Abrir a janela do navegador). Para obter informaes detalhadas, veja Open Browser Window (Abrir a janela do navegador) na pgina 561.
Para utilizar a ao Popup Message:

1. 2. 3. 4. 5.
Selecione um objeto e abra o painel Behaviors (Comportamentos). Clique no boto de adio (+) e escolha Pop-up Message no menu pop-up Actions. Digite a mensagem na caixa de texto Message (Mensagem). Clique em OK. Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de).
Preload Images (Pr-carregar as imagens)

A ao Preload Images carrega no cache do navegador as imagens que no aparecem na pgina imediatamente (como aquelas que sero 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.
N OT A
Quando a opo Preload Images, na caixa de dilogo Swap Image (Trocar imagem), for selecionada, a ao Swap Image pr-carregar automaticamente todas as imagens de realce, dispensando a necessidade de adicionar manualmente a opo Preload Images quando estiver utilizando Swap Image.
Para poder utilizar a ao Preload Images:

1. 2.
Selecione um objeto e abra o painel Behaviors (Comportamentos). Clique no boto de adio (+) e escolha Preload Images (Pr-carregar as imagens) no menu pop-up Actions. Clique em Browse (Procurar) para selecionar o arquivo de imagem que ser pr-carregado, ou digite o caminho e o nome do arquivo de imagem no campo Image Source File (Arquivo de origem da imagem).
3.
564
4.
Clique no boto com o sinal de adio (+), situado no alto da caixa de dilogo, para adicionar a imagem lista Preload Images.
NO T A
Se voc no clicar no boto com o sinal de adio antes de digitar a prxima imagem, a imagem escolhida na lista ser substituda pela prxima imagem selecionada.
5.
Repita as etapas 3 e 4 para todas as imagens restantes a serem pr-carregadas na pgina atual. Para remover uma imagem da lista Preload Images (Pr-carregar as imagens), selecione a imagem na lista e clique no boto com o sinal de subtrao (). Clique em OK. Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de).
6.
7. 8.
Set Nav Bar Image (Definir imagem da barra de navegao)

Utilize a ao Set Nav Bar Image para transformar uma imagem em uma imagem de barra de navegao ou para alterar a exibio e aes relacionadas s imagens de uma barra de navegao. Para obter mais informaes, consulte Inserir uma barra de navegao na pgina 486. Utilize a guia Basic (Bsico) da caixa de dilogo Set Nav Bar Image, para criar ou atualizar uma imagem ou conjunto de imagens da barra de navegao, para alterar a URL exibida quando um boto da barra de navegao for clicado e para selecionar uma janela diferente na qual deseja exibir a URL. Utilize a guia Advanced da caixa de dilogo Set Nav Bar Image para alterar o estado de outras imagens em um documento com base no estado atual do boto. Por padro, a ao de clicar em um elemento da barra de navegao automaticamente retornar todos os outros elementos desta barra ao estado Up (Ativo). Utilize a guia Advanced para definir um outro estado para uma imagem quando este for Down (Inativo) ou Over (Sobreposto).
Para editar uma ao Set Nav Bar Image:
1. 2.
Selecione a imagem da barra de navegao a ser editada e abra o painel Behaviors. Na coluna Aes do painel Behaviors, clique duas vezes na ao Set Nav Bar Image associada ao evento que estiver alterando.
565
3.
Na guia Basic (Bsico) da caixa de dilogo Set Nav Bar Image, selecione as opes de edio de imagens.
Para definir diversas imagens para um boto da barra de navegao:

1. 2.
Selecione a imagem da barra de navegao a ser editada e abra o painel Behaviors. Na coluna Aes do painel Behaviors, clique duas vezes na ao Set Nav Bar Image associada ao evento que estiver alterando. Clique na guia Advanced da caixa de dilogo Set Nav Bar Image. No menu pop-up When Element Is Displaying (Quando o elemento estiver sendo exibido), escolha um estado para a imagem.
3. 4.
Escolha Down Image (Imagem inativa), se desejar alterar a exibio de uma outra imagem depois que um usurio tiver clicado na imagem selecionada. Escolha Over Image (Imagem sobreposta) ou Over While Down Image (Imagem sobreposta enquanto inativa), se desejar alterar a exibio de uma outra imagem quando o ponteiro estiver sobre a imagem selecionada.
Para obter informaes sobre os estados das imagens, veja Usar as barras de navegao na pgina 486.
5.
Na lista Also Set Image (Definir tambm a imagem), selecione uma outra imagem a ser definida na pgina. Clique em Browse (Procurar) para selecionar o arquivo de imagem a ser exibido, ou digite o caminho e nome do arquivo de imagem na caixa de texto To Image File (Para o arquivo de imagem). Se tiver selecionado Over Image ou Over While Down Image na etapa 4, ainda h uma opo adicional. No campo de texto If Down, To Image File (Se inativa, o arquivo de imagem), clique em Browse para selecionar o arquivo de imagem, ou digite o caminho e nome do arquivo de imagem a ser exibido.
6.
7.
Set Text of Frame (Definir o texto do quadro)

A ao Set Text of Frame permite definir dinamicamente o texto de um quadro ao substituir o contedo e a formatao do quadro pelo contedo especificado. O contedo pode incluir qualquer cdigo HTML vlido. Utilize esta ao para exibir informaes dinamicamente. Embora a ao Set Text of Frame (Definir o texto do quadro) substitua a formatao de um quadro, possvel selecionar a opo Preserve Background Color para preservar os atributos das cores do fundo da pgina e do texto.
566
possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade, varivel global ou outra expresso no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o por uma barra invertida (\{).
Exemplo:
Para criar um conjunto de quadros:
Escolher Modify (Modificar) > Frameset (Conjunto de quadros) > Split Frame Left, Right, Up, or Down (Dividir o quadro para a esquerda, para a direita, para cima ou para baixo). Para obter mais informaes, consulte Criar quadros e conjuntos de quadros na pgina 309.
Para utilizar a ao Set Text of Frame:

1. 2.
Selecione um objeto e abra o painel Behaviors (Comportamentos). Clique no boto de adio (+) e escolha Set Text > Set Text of Frame no menu pop-up Actions. Na caixa de dilogo Set Text of Frame, escolha o quadro de destino no menu pop-up Frame. Clique no boto Get Current HTML (Obter o HTML atual), para copiar o contedo da seo body do quadro de destino. Digite uma mensagem na caixa de texto New HTML (Novo HTML) e clique em OK. Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se no forem exibidos os eventos desejados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de).
3.
4.
5. 6.
Set Text of Layer (Definir o texto da camada)

A ao Set Text of Layer substitui o contedo e a formatao de uma camada j existente em uma pgina pelo contedo especificado. O contedo pode incluir qualquer cdigo-fonte HTML vlido. A ao Set Text of Layer substitui o contedo e a formatao de uma camada, mas mantm os atributos da mesma, inclusive a cor. Formate o contedo, inclusive as tags HTML na caixa de texto New HTML (Novo HTML), na caixa de dilogo Set Text of Layer. possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade, varivel global ou outra expresso no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o por uma barra invertida (\{).
567
Exemplo:
Para criar uma camada:

1.
Selecione Insert (Inserir) > Layer (Camada). Para obter mais informaes, consulte Inserir uma camada na pgina 222. No Property inspector (Inspetor de propriedades), digite um nome para a camada.
2.
Para utilizar a ao Set Text of Layer:

1. 2.
Selecione um objeto e abra o painel Behaviors (Comportamentos). Clique no boto de adio (+) e escolha Set Text > Set Text of Layer no menu pop-up Actions. Na caixa de dilogo Set Text of Layer, utilize o menu pop-up Layer, para escolher a camada de destino. Digite uma mensagem na caixa de texto New HTML e clique em OK. Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se no forem exibidos os eventos desejados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de).
3.
4. 5.
Set Text of Status Bar (Definir a mensagem de status)

A ao Set Text of Status Bar mostra uma mensagem na barra de status, na parte inferior esquerda da janela do navegador. Por exemplo: possvel utilizar esta ao 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 botes de navegao em Using Dreamweaver. Os visitantes geralmente ignoram ou no atentam para 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. possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade, varivel global ou outra expresso no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o por uma barra invertida (\{).
Exemplo:
568
Para utilizar a ao Set Text of Status Bar:

1. 2.
Selecione um objeto e abra o painel Behaviors (Comportamentos). Clique no boto de adio (+) e escolha Set Text > Set Text of Status Bar no menu pop-up Actions. Na caixa de dilogo Set Text of Status Bar, digite a mensagem na caixa de texto Message (Mensagem). A mensagem dever ser concisa. Se a mensagem no couber na barra de status, ela aparecer truncada no navegador.
3.
4. 5.
Set Text of Text Field (Definir o texto do campo de texto)

A ao Set Text of Text Field substitui o contedo de um campo de texto de um formulrio pelo contedo especificado. possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade, varivel global ou outra expresso no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o por uma barra invertida (\{).
Exemplo:
Para criar um campo de texto com nome:

1.
Escolha Insert (Inserir) > Form Objects (Objetos de formulrio) > Text Field (Campo de texto). Se o Dreamweaver solicitar a adio de uma tag de formulrio, clique em Sim. Para obter mais informaes, consulte Criar formulrios na pgina 885.
2.
No Property inspector, digite um nome para o campo de texto. Certifique-se de que o nome seja exclusivo pgina (no utilize o mesmo nome para diversos elementos na mesma pgina, mesmo se estiverem em formulrios diferentes).
569
Para utilizar a ao Set Text of Text Field:

1. 2.
Selecionar um campo de texto e abrir o painel Behaviors (Comportamentos). Clique no boto com o sinal de adio (+) e escolha Set Text > Set Text of Text Field no menu pop-up Actions. Na caixa de dilogo Set Text of Text Field, escolha o campo de texto de destino no menu pop-up Text Field. Digite o texto no campo New Text (Novo texto) e, em seguida, clique em OK. Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se no forem exibidos os eventos desejados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de).
3.
4. 5.
Show-Hide Layers (Mostrar/ocultar as camadas)

A ao Show-Hide Layers mostra, oculta ou restaura a visibilidade padro de uma ou mais camadas. Esta ao til para mostrar informaes medida que o usurio interage com a pgina. Por exemplo: medida que o usurio passar o ponteiro do mouse sobre a imagem de uma planta, uma camada poder ser disparada, mostrando detalhes sobre a poca e regio de crescimento da planta, a quantidade de sol necessria, o tamanho que a planta pode atingir e assim por diante. A ao Show-Hide Layers tambm til para criar uma camada de pr-carga, ou seja, uma camada grande que obscurece inicialmente o contedo da pgina, desaparecendo em seguida, quando todos os componentes da pgina tiverem sido carregados.
Para poder utilizar a ao Show-Hide Layers:
1.
Escolha Insert (Inserir) > Layer (Camada), ou clique no boto Layer, situado na barra Insert, e desenhe uma camada na janela do documento. Repita esta etapa para criar outras camadas. Clique na janela do documento para desmarcar a camada e, em seguida, abra o painel Behavior. Clique no boto com o sinal de adio (+) e escolha Show-Hide Layers (Mostrar-Ocultar camadas) no menu pop-up Actions. Se a opo Show-Hide Layers no estiver disponvel, provvel que j haja uma camada selecionada. Como as camadas no aceitam eventos em ambos os navegadores da verso 4.0, selecione um outro objeto, como a tag body tag ou um link (a tag) ou, no menu popup Show Events For (Mostrar os eventos de), altere o navegador de destino para Internet Explorer 4.0.
2.
3.
570
4. 5.
No menu pop-up Named Layers, selecione a camada cuja visibilidade deseja alterar. Clique em Show (Mostrar) para mostrar a camada, Hide (Ocultar) para ocult-la ou Default (Padro) para restaurar sua visibilidade padro. Repita as etapas 4 e 5 para todas as camadas cuja visibilidade ainda deseja alterar. possvel alterar a visibilidade de diversas camadas com um nico comportamento. Clique em OK. Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de).
6.
7. 8.
Quando forem exibidas em uma janela do Netscape Navigator, possvel que as camadas sejam reduzidas para acomodar todo o contedo. Para evitar que isso ocorra, adicione texto ou imagens s camadas ou definir valores de corte das mesmas.
Para criar uma camada de pr-carga:
1.
Clique no boto Draw Layer (Desenhar a camada), na categoria Common (Comuns) da barra Insert, e desenhe uma camada grande na visualizao do projeto da janela do documento. Certifique-se de que a camada cubra todo o contedo da pgina. No painel Layers, arraste o nome da camada at o alto da lista de camadas, para especificar que esta camada dever aparecer na frente da ordem de empilhamento. Selecione a camada, se ela ainda no estiver selecionada, e denomine-a loading, (carregando), utilizando a caixa de texto na extremidade esquerda do Property inspector. Mantendo a camada selecionada, defina, no Property inspector, a cor de fundo da camada como sendo a mesma cor que o fundo da pgina.
2.
3.
4.
571
5.
Clique dentro da camada (que dever estar obscurecendo o restante do contedo da pgina) e, se desejar, digite uma mensagem. Por exemplo: as mensagens Please wait while the page loads (Aguarde at que a pgina seja carregada) ou Loading... (Carregando...) mantm o visitante informado sobre o que est ocorrendo, para que ele no pense que a pgina no possui um contedo.
6.
Clique na tag <body> no seletor de tags, situado no canto inferior esquerdo da janela do documento. No menu pop-up Actions do painel Behaviors, escolha Show-Hide Layers. Na lista Named Layers, selecione a camada denominada loading Clique em Hide. em OK. Certifique-se de que o evento listado ao lado da ao Show-Hide Layers, na lista de comportamentos seja onLoad. Se no for, selecione o evento e clique no tringulo para baixo, situado entre o evento e a ao. Na lista de eventos do menu pop-up, escolha onLoad.
7. 8. 9.
10. Clique 11.
Show Pop-Up Menu (Mostrar o menu pop-up)

Utilize o comportamento de Show Pop-Up Menu para criar ou editar um menu pop-up do Dreamweaver ou para abrir e modificar um menu pop-up Fireworks inserido em um documento do Dreamweaver. Defina as opes na caixa de dilogo Show Pop-Up Menu para criar um menu pop-up horizontal ou vertical. possvel utilizar esta caixa de dilogo para definir ou modificar a cor, o texto e a posio de um menu pop-up.
NO T A
necessrio utilizar o boto Edit (Editar), no Property inspector do Dreamweaver, para editar imagens em um menu pop-up baseado em imagem. Entretanto, possvel utilizar o comando Show Pop-Up Menu para alterar o texto em um menu pop-up baseado em imagem. Para obter informaes sobre a edio de imagens no Fireworks, consulte Captulo 16, Trabalhar com outros aplicativos, na pgina 497.
Para ver um menu pop-up em um documento, necessrio abrir o documento em uma janela do navegador e rolar o ponteiro sobre a imagem ou link acionado.
Para utilizar a ao Show Pop-up Menu:
1.
Selecione um objeto ao qual deseja anexar o comportamento e abra o painel Behaviors (Comportamentos) (Shift+F4). Clique no boto com o sinal de adio (+) e escolha Show Pop-Up Menu no menu pop-up Actions (Aes).
2.
572
3.
Na caixa de dilogo Show Pop-Up Menu que exibida, utilize as guias a seguir para definir as opes do menu pop-up. A guia Contents (Contedo) permite definir o nome, a estrutura, a URL e o destino dos itens de menu individuais. A guia Appearance (Aparncia) permite definir a aparncia dos estados Ativo e Sobreposto do menu e as opes de fonte para o texto do item de menu. A guia Advanced (Avanado) permite definir as propriedades das clulas de menu. Por exemplo: possvel definir a largura e a altura da clula, a cor da clula e a largura da borda, o recuo do texto e o tempo de atraso antes de o menu ser exibido aps o usurio mover o ponteiro sobre o disparador. A guia Position (Posio) permite definir onde o menu est posicionado em relao a imagem ou link disparado.
Adicionar, remover e alterar a ordem dos itens do menu popup

Utilize a guia Contents (Contedo) na caixa de dilogo Show Pop-up Menu para criar itens de menu. possvel utilizar essa guia para remover os itens existentes ou alterar a ordem em que eles so exibidos em um menu.
Para adicionar itens do menu pop-up:
1.
Na guia Contents, crie um item de menu pop-up seguindo um dos procedimentos abaixo: Na caixa de texto Text (Texto), selecione o texto padro [New Item (Novo Item)] e digite o texto que ser exibido no menu pop-up.
2.
Definir as opes adicionais desejadas. Para que o item de menu abra outro arquivo quando clicado, na caixa de texto Link, digite o caminho do arquivo ou clique no cone de pasta e v at o documento que deseja abrir. Para definir uma localizao onde abrir o documento, por exemplo, em uma nova janela ou em um quadro especfico, no menu pop-up Target (Destino), escolha a localizao desejada.
N OT A
Se o quadro a ser designado no for exibido no menu pop-up Target, feche a caixa de dilogo Show Pop-Up Menu (Mostrar o menu pop-up) e, na janela Document (Documento), selecione o nome do quadro.
3.
Clique no boto de adio (+) para adicionar outras entradas lista de visualizao Show Pop-Up Menu. Ao finalizar a adio dos itens de menu, clique em OK para aceitar as definies padro ou selecione outra guia de Show Pop-Up Menu para definir as opes adicionais.
573
Para criar um item de submenu:
Na lista Show Pop-Up Menu, selecione o item que deseja transformar em um item de submenu e siga um dos procedimentos abaixo:

Para recuar um item na lista de menus, clique no boto Indent Item (Recuar o item). Para remover um recuo, clique no boto Outdent Item (Remover o recuo) do item.
N OT A
No possvel transformar o primeiro item do menu na lista em um item de submenu.
Para alterar a ordem de um item no menu:
Na lista Show Pop-Up Menu, selecione 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 Contents, selecione a entrada de menu que deseja remover na lista Show Pop-Up Menu. Clique no boto com o sinal de subtrao (-).
2.
Definio da aparncia de um menu pop-up

Aps criar os itens de menu, deve-se utilizar a guia Appearance (Aparncia) de Show Pop-up Menu (Mostrar o menu pop-up) para definir a orientao, os atributos de fonte e os atributos de estado do boto do menu pop-up.
N OT A
O painel de visualizao da guia Appearance fornece um processamento aproximado das opes definidas nesta guia.
Para definir a aparncia de um menu pop-up.

1.
No menu pop-up na parte superior da guia Appearance, escolher Vertical Menu (Menu Vertical) ou Horizontal Menu (Menu Horizontal) para definir a orientao do menu. Definir as opes de formatao de texto desejadas: No menu pop-up Font (Fonte), selecione a fonte que se deseja aplicar aos itens de menu.
N O TA
2.
Se a fonte que se deseja aplicar no se encontrar na lista de fontes, utilize a opo Edit Font List (Editar lista de fontes), para adicionar a fonte desejada lista de fontes. Para garantir que o menu ser exibido conforme se deseja, necessrio escolher uma fonte que o visitante do site deve ter.
Defina o tamanho da fonte, os atributos de estilo e as opes de alinhamento ou justificao do texto do item de menu.
574
3.
Nas caixas Up State (Estado ativo) e Over States (Estado sobre), utilize o seletor de cor para definir as cores do texto e da clula dos botes do item de menu. Ao finalizar a definio das opes de aparncia, clique em OK ou selecione outra guia de Show Pop-Up Menu para definir as opes adicionais.
4.
Definio das opes de aparncia avanadas

Utilize as opes na guia Advanced (Avanado) para especificar atributos adicionais das clulas de menu. Por exemplo: possvel definir a largura, a altura, o espaamento de clula ou o preenchimento do boto de menu, recuar o texto e definir os atributos da borda.
Para definir os atributos de formatao avanados de um menu pop-up:
1.
Clique na guia Advanced e defina as opes que se deseja aplicar aos itens de menu: A opo Cell Width (Largura da clula) define uma largura especfica, em pixels, para os botes de menu. A largura da clula definida automaticamente com base no maior item; para aumentar a largura da clula, deve-se selecionar Pixels no menu pop-up e inserir um valor maior que o valor da caixa de texto Cell Width. A opo Cell Height (Altura da clula) define a altura especfica, em pixels, dos botes do menu. Para aumentar a altura da clula, selecione Pixels no menu pop-up e insira um valor maior que o valor da caixa de texto Cell Height. A opo Cell Padding (Preenchimento da clula) determina o nmero de pixels entre o contedo da clula e as suas bordas. A opo Cell Spacing (Espaamento entre as clulas) determina o nmero de pixels entre clulas adjacentes. A opo Text Indent (Recuo de texto) permite especificar, em pixels, o recuo de texto em um item de menu na clula. A opo Menu Delay (Espera do menu) define o tempo entre o movimento do ponteiro pelo usurio sobre a imagem ou link disparado e o momento em que o menu exibido. Os valores so em milissegundos para que a definio padro, 1000, seja igual a 1 segundo. Para cada segundo de atraso, adicione 000, por exemplo: para um atraso de 3 segundos, digite 3000. A opo Pop-up Borders (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 seleo Show Borders (Exibir bordas) est marcada. A opo Border Width (Largura da borda) define o tamanho da borda em pixels. As opes Shadow, Border Color e Highlight (Sombreado, Cor da borda e Realce) permitem selecionar uma cor para essas opes de borda. O sombreado e o realce no so exibidos na visualizao.
575
2.
Ao finalizar a definio das opes avanadas de aparncia, clique em OK ou selecione uma outra guia Show Pop-Up Menu (Mostrar o menu pop-up) para definir opes adicionais.
Definio da posio do menu pop-up em um documento

Utilize as opes de posio para definir onde o menu pop-up exibido em relao imagem ou ao link disparado. possvel tambm definir se o menu fica oculto ou no quando o usurio move o ponteiro para longe do disparador.
Para definir as opes de posio do menu pop-up:
1. 2.
Na caixa de dilogo Show Pop-Up Menu, clique na guia Position (Posio). Defina a localizao do menu pop-up, seguindo um dos procedimentos abaixo:

Escolha uma das opes predefinidas: Defina as coordenadas da posio personalizada digitando um nmero na caixa de texto X, para definir a coordenada horizontal, e digitando um nmero na caixa de texto Y, para definir uma coordenada vertical. As coordenadas so contadas a partir do canto superior esquerdo do menu.
3.
Para ocultar o menu pop-up quando o ponteiro no estiver sobre ele, certifique-se de que se a opo Hide Menu onMouseOut Event (Ocultar evento onMouseOut) do menu est marcada. Para que o menu seja exibido, cancele a seleo dessa opo. Ao finalizar a criao ou modificao do menu pop-up, clique em OK.
4.
Modificao de um menu pop-up

O comportamento de Show Pop-Up Menu (Mostrar o menu pop-up) permite editar ou atualizar o contedo de um menu pop-up. possvel adicionar, excluir ou alterar os itens de menu, reorganiz-los e definir onde um menu posicionado em relao imagem ou link disparado.
Para abrir um menu pop-up existente baseado em HTML:
1. 2.
No documento do Dreamweaver, selecione o link ou a imagem que aciona o menu pop-up. Abra o painel Behaviors (Comportamentos) (Shift+F4), se ele ainda no estiver aberto, e, na lista Actions (Aes), clique duas vezes em Show Pop-Up Menu. A caixa de dilogo Show Pop-Up Menu exibida. Faa as alteraes que desejar no menu pop-up. Ao finalizar a modificao do menu pop-up, clique em OK.
3. 4.
Para obter informaes detalhadas sobre a definio das opes do menu pop-up, veja Show Pop-Up Menu (Mostrar o menu pop-up) na pgina 572.
576
Swap Image (Trocar imagem)

A ao Swap Image substitui uma imagem por outra ao alterar o atributo src da tag img. Utilize esta ao para criar botes cambiveis e outros efeitos em imagens (inclusive a troca simultnea de mais de uma imagem). Quando voc insere uma imagem cambivel, adicionado automaticamente um comportamento Swap Image pgina.
N OT A
Uma vez que apenas o atributo src afetado por essa ao, a nova imagem a ser empregada dever ter as mesmas dimenses (altura e largura) que a original. Caso contrrio, a nova imagem aparecer compactada ou expandida, para se ajustar s dimenses da imagem original.
Para utilizar a ao Swap Image:

1.
Escolha Insert (Inserir) > Image (Imagem), ou clique no boto Image, situado na barra Insert, para inserir uma imagem. Nomeie a imagem na caixa de texto mais esquerda, no Property inspector (Inspetor de propriedades). A ao Swap Image funcionar mesmo que voc no nomeie as imagens. Esta ao nomeia automaticamente as imagens sem nome quando o comportamento for anexado a um objeto. Contudo, mais fcil distinguir as imagens na caixa de dilogo Swap Image se todas tiverem sido nomeadas previamente.
2.
3. 4.
Repita as etapas 1 e 2 para inserir outras imagens. Selecione um objeto (geralmente a imagem a ser permutada) e abra o painel Behaviors (Comportamentos). Clique no boto de adio (+) e escolha Swap Image (Trocar imagem) no menu pop-up Actions. Na lista Images (Imagens), selecione a imagem cuja origem deseja alterar. Clique em Browse (Procurar) para selecionar o arquivo da nova imagem, ou digite o caminho e o nome do arquivo da nova imagem na caixa de texto Set Source To (Definir a origem como). Repita as etapas 6 e 7 para quaisquer outras imagens a serem alteradas. Utilize a mesma a ao de permuta de imagens simultaneamente em todas as imagens a serem modificadas, caso contrrio, a ao Swap Image Restore (Restaurar troca de imagem) a ela correspondente no ir restaurar todas as imagens. Quando a pgina tiver sido carregada, selecione a opo Preload Images para carregar as novas imagens no cache do navegador. Esse processo evita os atrasos causados pelo download quando as imagens precisarem ser exibidas.
5.
6. 7.
8.
9.
577
10. Clique 11.
em OK.
Verifique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no menu pop-up Show Events For (Mostrar os eventos de).
Swap Image Restore (Restaurar troca de imagem)

A ao Swap Image Restore restaura o ltimo conjunto de imagens permutadas aos seus arquivos de origem anteriores. Esta ao adicionada automaticamente sempre que a ao Swap Image (Trocar imagem) a um objeto for anexada. No ser necessrio selecionar a opo Swap Image Restore se a opo Restore (Restaurar) tiver sido selecionada.
Validate Form (Validar o formulrio)

A ao Validate Form verifica o contedo de determinados campos de texto, a fim de garantir que o usurio tenha digitado o tipo correto de dados. Anexe esta ao a certos campos de texto com o evento onBlur, para validar os campos medida que o usurio estiver preenchendo o formulrio, ou voc pode anex-la ao formulrio com o evento onSubmit, para avaliar diversos campos de texto simultaneamente quando o usurio clicar no boto Submit (Enviar). A anexao desta ao a um formulrio evita que este seja enviado ao servidor se algum dos campos contiver dados incorretos.
Para utilizar a ao Validate Form:
1.
Escolha Insert (Inserir) > Form (Formulrio), ou clique no boto Form (situado na barra Insert) para inserir um formulrio. Escolha Insert (Inserir) > Form Objects (Objetos de formulrio) > Text Field (Campo de texto), ou clique no boto Text Field, situado na barra Insert, para inserir um campo de texto. Repita esta etapa para inserir outros campos de texto. Siga um dos procedimentos abaixo:
2.
3.
Para validar determinados campos medida que o usurio estiver preenchendo o formulrio, selecione um campo de texto e escolha Window (Janela) > Behaviors (Comportamentos). Para validar vrios campos quando o usurio enviar o formulrio, clique na tag <form> no seletor de tags, situado no canto inferior esquerdo da janela do documento, e escolha Window > Behaviors.
578
4. 5.
No menu pop-up Actions (Aes), escolha Validate Form. Siga um dos procedimentos abaixo:
Se voc estiver validando determinados campos, selecione o mesmo campo que tiver selecionado na janela do documento, na lista Named Fields (Campos com nome). Se estiver validando vrios campos, selecione um campo de texto na lista Named Fields.
6. 7.
Selecione a opo apropriada, se o campo se destinar a receber dados. Escolha uma das opes a seguir em Accept (Aceitar): Utilize a opo Anything (Qualquer item), se o campo for necessrio, sem precisar conter qualquer tipo especfico de dados. Esta opo no ter significado (ela equivale ausncia, no campo, da ao Validate Form) se a opo Required (Necessrio) no estiver selecionada. Utilize a opo E-mail (Endereo eletrnico), para verificar se o campo contm um sinal de @. Utilize a opo Number (Nmero), para verificar se o campo contm apenas algarismos numricos. Utilize a opo Number From (Nmero de), para verificar se o campo contm apenas um nmero em uma faixa especfica.
8.
Se estiver validando vrios campos, repita as etapas 6 e 7 para quaisquer outros campos a serem validados. Clique em OK. Se estiver validando vrios campos quando o usurio enviar o formulrio, o evento onSubmit aparecer automaticamente no menu pop-up Events (Eventos).
9.
10. Se
onBlur
estiver validando um determinado campo, certifique-se de que o evento padro seja ou onChange.
Se no for, selecione onBlur ou onChange no menu pop-up. Ambos os eventos ativam a ao Validate Form, assim que o usurio mover o cursor para fora do campo. A diferena entre estes eventos est na ocorrncia invarivel de onBlur, se o usurio tiver digitado no campo ou no, enquanto que onChange ocorrer apenas se o usurio tiver alterado o contedo do campo. O evento onBlur prefervel quando voc tiver especificado que o campo necessrio.
579
580
PARTE 5
Trabalhar com cdigos de pgina

Utilize as ferramentas de codificao avanadas do Dreamweaver 8 para criar ou modificar pginas.
N OT A
Para obter ajuda com as referncias de linguagem, pressione Shift+F1 no modo de visualizao de cdigo.
Esta seo contm os seguintes captulos:

Captulo 19: Configurar o ambiente de codificao . . . . . . . . . . 583 Captulo 20: Codificar no Dreamweaver . . . . . . . . . . . . . . . . . . . . 603 Captulo 21: Otimizar e depurar o cdigo . . . . . . . . . . . . . . . . . . . 633 Captulo 22: Editar o cdigo na Design View (Visualizao do projeto) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 643
581
CAPTULO 19
Configurar o ambiente de codificao

possvel adaptar o ambiente de codificao do Macromedia Dreamweaver 8 sua maneira de trabalho. Por exemplo: possvel alterar a forma de exibir cdigos, configurar diferentes atalhos de teclado, ou importar e utilizar a biblioteca de tags favorita. Este captulo aborda os tpicos a seguir:
Exibir o cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .583 Utilizar a rea de trabalho orientada a codificador (apenas no Windows). . . . . . .585 Definir preferncias de codificao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .585 Personalizar atalhos de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .589 Abrir arquivos na visualizao do cdigo por padro . . . . . . . . . . . . . . . . . . . . . . . . .589 Definir preferncias do Validator (Validador) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590 Gerenciar bibliotecas de tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591 Importar tags personalizadas para o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 596 Utilizar um editor de HTML externo com o Dreamweaver . . . . . . . . . . . . . . . . . . . 599
19
Exibir o cdigo
possvel exibir o cdigo-fonte do documento atual de vrias maneiras: possvel exibi-lo na janela do documento ativando a visualizao do cdigo, dividir a janela do documento para exibir a pgina e o cdigo associado, ou trabalhar no Code inspector (Inspetor de cdigo), uma janela de codificao separada. O Code inspector e a visualizao do cdigo funcionam da mesma forma. Voc pode pensar no Code inspector como uma visualizao do cdigo destacvel para o documento atual. Esta seo contm instrues para alterar a forma de exibio de cdigo.
583
Para exibir o cdigo na janela do documento:
Selecione View (Exibir) > Code (Cdigo).
Para codificar e editar visualmente uma pgina na janela do documento ao mesmo tempo:
1.
Selecione View > Code and Design (Cdigo e projeto). O cdigo exibido no painel superior e a pgina, no painel inferior. Para exibir a pgina na parte superior, escolha View > Design View on Top (Visualizao do projeto no alto). Para ajustar o tamanho dos painis na janela do documento, arraste a barra de diviso at a posio desejada. A barra de diviso est localizada entre os dois painis. A visualizao do cdigo atualizada automaticamente quando so feitas alteraes na visualizao do projeto. No entanto, aps fazer alteraes na visualizao do cdigo, voc deve atualizar manualmente o documento na visualizao do projeto. Para isso, clique nessa visualizao e pressione F5.
2.
3.
Para exibir o cdigo em uma janela separada:
Selecione Window (Janela) > Code Inspector.
584
Captulo 19: Configurar o ambiente de codificao
Utilizar a rea de trabalho orientada a codificador (apenas no Windows)

No Windows, possvel usar uma rea de trabalho com aparncia similar rea de trabalho do Macromedia HomeSite, com os grupos de painis reunidos no lado esquerdo, e no no lado direito, da janela principal. Por padro, o layout da rea de trabalho exibe o Property inspector (Inspetor de propriedades) minimizado e a janela do documento exibida na visualizao do cdigo. Para obter informaes sobre a utilizao desta opo, consulte Escolher o layout de rea de trabalho (no Windows) na pgina 78.
grupos de painis Files (Arquivos), painel barra Insert (Inserir) barra de ferramentas do documento
Seletor de tags Property inspector (minimizado)
janela do documento
Tpicos relacionados Abrir arquivos na visualizao do cdigo por padro na pgina 589.
Definir preferncias de codificao

Voc pode personalizar o ambiente de codificao do Dreamweaver para atender s suas necessidades especficas definindo preferncias de formatao, reescrita e codificao por cores do cdigo entre outras.
NO TA
Para definir as preferncias avanadas, utilize o Tag Library editor (Editor de bibliotecas de tags) (consulte Gerenciar bibliotecas de tags na pgina 591).
585
Definir as opes de visualizao de cdigo

possvel definir a quebra automtica de linha, exibir nmeros de linha para o cdigo, realar um cdigo invlido, codificar a sintaxe por cores para elementos do cdigo e definir o recuo no menu View > Code View Options (Opes de visualizao do cdigo).
Para definir opes da visualizao do cdigo e do Code inspector:
1. 2.

Exiba um documento na visualizao do cdigo ou no Code inspector. Siga um dos procedimentos abaixo: Selecione View > Code View Options Clique no menu View Options (Opes de exibio) na barra de ferramentas na parte superior da visualizao do cdigo ou do Code inspector. Para ativar ou desativar qualquer uma das opes a seguir, selecione-as no menu. quebra automaticamente o cdigo para permitir exibi-lo sem rolar horizontalmente. Esta opo no insere quebras de linha, apenas facilita a visualizao do cdigo.
Word Wrap (Quebra de linha) Line Numbers (Nmeros de linha)
3.
exibe nmeros de linha ao lado do cdigo.
exibe caracteres especiais no lugar no espao em branco. Por exemplo, um ponto substitui cada espao, uma divisa dupla substitui cada tabulao, e um marcador de pargrafo substitui cada quebra de linha.
Hidden Characters (Caracteres ocultos)
NO T A 586
As quebras de linha condicionais utilizadas pelo Dreamweaver no so exibidas com um marcador de pargrafo.
Highlight Invalid Code (Realar o cdigo incorreto)
faz com que o Dreamweaver realce em amarelo todos os cdigos HTML incorretos. Quando uma tag invlida for selecionada, o Property inspector exibir informaes sobre como corrigir o erro. ativa ou desativa a cor do cdigo. Para obter informaes sobre como alterar o esquema de cores, consulte Definir preferncias de codificao por cores na pgina 589. faz o recuo automtico do cdigo quando o usurio pressiona a tecla Enter enquanto grava o cdigo. A nova linha do cdigo recuada para o mesmo nvel da linha anterior. Para obter informaes sobre o espaamento do recuo, consulte a opo Tab Size (Tamanho da tabulao) em Definir as preferncias de formatao de cdigo na pgina 587.
Syntax Coloring (Cor da sintaxe)
Auto Indent (Recuo automtico)
Tpicos relacionados Exibir o cdigo na pgina 583
A barra de ferramentas Coding na pgina 53
Definir as preferncias de formatao de cdigo

possvel alterar a aparncia do cdigo especificando preferncias de formatao como recuo, tamanho de linha, a caixa da tag e nomes de atributos. Observe que todas as preferncias, exceto Override Case Of (Ignorar a caixa de), afetam apenas os novos documentos e as incluses feitas nos documentos existentes. Ou seja, quando um documento HTML criado anteriormente for aberto, essas opes de formatao no sero aplicadas a ele. Para reformatar documentos HTML existentes, utilize o comando Apply Source Formatting (Aplicar a formatao de origem). Para obter mais informaes, consulte Aplicar novas preferncias de formatao a documentos existentes na pgina 587.
Para definir preferncias de formatao de cdigo:
1. 2.
Selecione Edit (Editar) > Preferences (Preferncias). Selecione Code Format (Formato do cdigo) na lista Category (Categoria) esquerda. As preferncias de formato de cdigo so exibidas. Ajuste uma das definies da caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
3.
Aplicar novas preferncias de formatao a documentos existentes

As opes de formatao de cdigo especificadas nas preferncias de formato do cdigo s se aplicam a documentos novos criados posteriormente com o Dreamweaver. No entanto, voc pode aplicar novas preferncias de formatao a documentos existentes.
Para aplicar novas preferncias de formatao a um documento existente:
1. 2.
Abra o documento no Dreamweaver. Selecione Commands (Comandos) > Apply Source Formatting (Aplicar a formatao de origem).
587
Definir as preferncias de referncias de cdigo

As referncias de cdigo permitem que voc insira rapidamente nomes de tag, atributos e valores medida que digita o cdigo no modo de visualizao de cdigo ou no Quick Tag Editor. Para obter mais informaes, consulte Utilizar as referncias de cdigo na pgina 613 ou Usar o menu de referncias no Quick Tag Editor na pgina 648.
DICA
Mesmo se as referncias de cdigo estiverem desativadas, voc poder exibir uma referncia pop-up na visualizao do cdigo pressionando a tecla Control e a barra de espao.
Para definir preferncias de referncias de cdigo:

1. 2.
Selecione Edit (Editar) > Preferences (Preferncias). Selecione Code Hints (Referncias de cdigo) na lista Category (Categoria) esquerda. As preferncias de referncias de cdigo so exibidas. Ajuste uma das definies da caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
3.
Tpicos relacionados Utilizar as referncias de cdigo na pgina 613
Definir preferncias de reescrita de cdigo

Quando voc abre um documento, o Dreamweaver corrige (ou reescreve) alguns tipos de cdigos tecnicamente invlidos, dependendo das preferncias de reescrita de cdigo especificadas. Essas preferncias no provocam qualquer efeito sobre a edio de HTML ou scripts na visualizao do cdigo. Se as opes de reescrita forem desativadas, o Dreamweaver exibir itens de markup invlidos na janela do documento para o HTML que seria reescrito.
Para definir preferncias de reescrita de cdigo:
1. 2.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). Selecione Code Rewriting (Reescrita de cdigo) na lista Category (Categoria) esquerda. As preferncias de reescrita de cdigo so exibidas. Ajuste uma das definies da caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
3.
Tpicos relacionados Limpar arquivos HTML do Microsoft Word na pgina 108
588
Definir preferncias de codificao por cores

Utilize as preferncias de codificao por cores para especificar cores para as categorias gerais de tags e elementos de cdigo, como tags relacionadas a forma ou os identificadores de JavaScript. Para definir preferncias de cores para uma tag especfica, edite a definio da tag no Tag Library editor (Editor de bibliotecas de tags). Para obter mais informaes, consulte Editar bibliotecas, tags e atributos na pgina 593.
Para definir preferncias de codificao por cores:
1. 2.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). Selecione Code Coloring (Codificao por cores) na lista Category (Categoria) esquerda. As preferncias de codificao por cores so exibidas. Ajuste uma das definies da caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
3.
Tpicos relacionados Personalizar preferncias de cores de cdigo para um modelo na pgina 342
Personalizar atalhos de teclado

possvel utilizar os atalhos de teclado favoritos no Dreamweaver. Se voc estiver acostumado a utilizar atalhos de teclado por exemplo, Control+Enter para adicionar uma quebra de linha, Control+G para ir at uma posio especfica no cdigo ou Shift+F6 para validar um arquivo poder adicion-los ao Dreamweaver por meio do Keyboard Shortcut Editor (Editor de atalhos de teclado). Para obter mais informaes, consulte Personalizao de atalhos de teclado na pgina 83. Tpicos relacionados Trabalhar com trechos de cdigo na pgina 615
Abrir arquivos na visualizao do cdigo por padro

Quando o usurio abre um tipo de arquivo que no costuma conter HTMLs (por exemplo, um arquivo JavaScript), o arquivo aberto na visualizao do cdigo ou no Code inspector, e no na visualizao do projeto. Voc pode especificar quais tipos de arquivos devero ser abertos na visualizao do cdigo.
Abrir arquivos na visualizao do cdigo por padro
589
Para definir a visualizao padro de arquivos no-HTML:

1. 2.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). Na lista Category (Categoria) esquerda, selecione File Types/Editors (Tipos de arquivos/ editores). As preferncias de tipos de arquivos/editores so exibidas. Na caixa de texto Open in Code View (Abrir na visualizao do cdigo), digite a extenso de nome para o tipo de arquivo a ser aberto automaticamente nessa visualizao. Digite um espao entre as extenses de nomes de arquivos. Voc pode adicionar quantas extenses desejar.
3.
Definir preferncias do Validator (Validador)

Voc pode utilizar o Validator do Dreamweaver para localizar rapidamente erros de tag ou de sintaxe no cdigo (consulte Validar tags na pgina 639). possvel especificar os idiomas baseados em tag nos quais o Validator deve fazer a verificao, os problemas especficos a serem verificados pelo Validator e os tipos de erros a serem relatados pelo Validator.
N OT A
As preferncias do Validator so ignoradas quando voc valida um documento que especifica explicitamente um tipo de documento.
Para definir preferncias para o Validator:

1. 2.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh). Selecione Validator na lista Category (Categoria) esquerda. As preferncias do Validator so exibidas. Selecione as bibliotecas de tags de acordo com as quais deseja validar o cdigo e defina opes para essas bibliotecas. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
3.
590
Gerenciar bibliotecas de tags

Uma biblioteca de tags, no Dreamweaver, um conjunto de tags de um tipo especfico e de informaes sobre como o Dreamweaver deve formatar essas tags. As bibliotecas de tags fornecem informaes sobre as tags que o Dreamweaver utiliza para referncias de cdigo, as verificaes de navegador de destino, o Tag Chooser (Seletor de tags) e outros recursos de codificao. O Tag Library editor (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. Consulte tambm Importar tags personalizadas para o Dreamweaver na pgina 596.
Abrir e fechar o Tag Library editor (Editor de bibliotecas de tags)

Para gerenciar bibliotecas de tags, utilize o Tag Library editor.
Para abrir o Tag Library editor:
Selecione Edit (Editar) > Tag Libraries (Bibliotecas de tags).
591
O Tag Library editor aberto. (O contedo desta caixa de dilogo alterado de acordo com a tag selecionada).
Para fechar o Tag Library editor e salvar as alteraes:
Clique em OK.
Para fechar o Tag Library editor sem salvar as alteraes:
Clique em Cancel (Cancelar).

N OT A
Quando voc clicar em Cancel, todas as alteraes feitas no Tag Library editor sero descartadas. Se voc tiver excludo uma tag ou uma biblioteca de tags, ela ser recuperada.
Adicionar bibliotecas, tags e atributos

Voc pode utilizar o Tag Library editor (Editor de bibliotecas de tags) para adicionar bibliotecas de tags, tags e atributos s bibliotecas de tags do Dreamweaver.
NO T A 592
Para importar uma tag, consulte Importar tags personalizadas para o Dreamweaver na pgina 596.
Para adicionar uma biblioteca de tags:

1.
No Tag Library editor, em Edit (Editar) > Tag Libraries (Bibliotecas de tags), clique no boto de adio (+) e selecione New Tag Library (Nova biblioteca de tags). A caixa de dilogo New Tag Library exibida. Na caixa de texto Library Name (Nome da biblioteca), digite um nome, por exemplo, Tags diversas. Clique em OK.
2.
3.
Para adicionar tags a uma biblioteca de tags:

1.
No Tag Library editor, em Edit > Tag Libraries, clique no boto de adio (+) e escolha New Tags (Novas tags). A caixa de dilogo New Tags exibida. Ajuste uma das definies da caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
2.
3.
Para adicionar um ou mais atributos em uma tag:

1.
No Tag Library editor, em Edit > Tag Libraries, clique no boto de adio (+) e escolha New Attributes (Novos atributos). A caixa de dilogo New Attributes ser exibida. Ajuste uma das definies da caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
2.
3.
Tpicos relacionados Gerenciar bibliotecas de tags na pgina 591
Excluir bibliotecas, tags e atributos na pgina 595
Editar bibliotecas, tags e atributos

Voc pode utilizar o Tag Library editor (Editor de bibliotecas de tags) para definir propriedades para uma biblioteca de tags e editar tags e atributos em uma biblioteca, seja para os atributos, seus valores ou formato (para facilitar a identificao no cdigo).
593
Para definir as propriedades de uma biblioteca de tags:

1.
No Tag Library editor (Editor de bibliotecas de tags), em Edit (Editar) > Tag Libraries (Bibliotecas de tags), selecione uma biblioteca de tags, e no uma tag, na lista Tags.
NO TA
As propriedades das bibliotecas de tags sero exibidas somente quando uma biblioteca de tags for selecionada. As bibliotecas de tags so representadas pelas pastas superiores da lista Tags; por exemplo, a pasta HTML Tags (Tags de HTML) representa uma biblioteca de tags, e a pasta abbr dentro da pasta HTML Tags representa uma tag.
2.
Na lista Used In (Utilizado em), selecione todos os tipos de documentos que devem utilizar a biblioteca de tags. Os tipos selecionados aqui determinam que tipos de documentos fornecem referncias de cdigo para essa biblioteca especfica. Por exemplo, se a opo HTML no for selecionada para uma biblioteca de tags especfica, as referncias de cdigo para essa biblioteca no sero exibidas em arquivos HTML.
3.
Se as tags da biblioteca de tags precisarem de um prefixo, digite o prefixo na caixa de texto Tag Prefix (Prefixo da tag).
N OT A
Um prefixo utilizado para identificar uma tag no cdigo como parte de uma biblioteca de tags especfica. Algumas bibliotecas de tags no utilizam prefixos.
4.
Ao concluir as alteraes no Tag Library editor (Editor de bibliotecas de tags), clique em OK.
Para editar uma tag em uma biblioteca de tags:

1.
No Tag Library editor, em Edit (Editar) > Tag Libraries, abra uma biblioteca de tags na lista Tags e selecione uma tag. Defina qualquer uma destas opes de formato de tag:
Line Breaks (Quebras de linha) especifica
2.
onde o Dreamweaver insere quebras de linha
para uma tag.

Contents (Contedo)
especifica como o Dreamweaver insere o contedo de uma tag, ou seja, se ele aplica quebra de linha, e regras de formatao e recuo ao contedo.
Case (Caixa) especifica a caixa para determinada tag. Selecione Default (Padro), Lowercase (Minsculas), Uppercase (Maisculas) ou Mixed Case (Maisculas e minsculas). Se voc selecionar Mixed Case, a caixa de dilogo Tag Name Mixed Case (Nome da tag em maisc./minsc.) ser exibida. Digite a tag em maisculas ou minsculas, determine como o Dreamweaver dever utiliz-la quando inseri-la (por exemplo, getProperty) e clique em OK.
594
Set Default (Definir os padres) define a caixa padro para todas as tags. Na caixa de dilogo Default Tag Case (Caixa padro da tag) que exibida, selecione <UPPERCASE> ou <lowercase> e clique em OK.
DICA
Talvez seja necessrio definir a caixa padro como minsculas por questes de compatibilidade com os padres XML e XHTML.
Para editar um atributo para uma tag:

1.
No Tag Library editor, em Edit > Tag Libraries, expanda uma biblioteca de tags na caixa Tags, expanda uma tag e selecione um atributo de tag. No menu pop-up Attribute Case (Caixa do atributo), selecione Default (Padro), Lowercase, Uppercase ou Mixed Case. Se voc selecionar Mixed Case, a caixa de dilogo Attribute Name Mixed Case (Nome da tag em maisc./minsc.) ser exibida. Digite o atributo em maisculas ou minsculas como o Dreamweaver dever utiliz-lo quando inseri-lo (por exemplo, onClick) e clique em OK. Clique no link Set Default (Definir padro) para definir a caixa padro para todos os nomes de atributos.
2.
3.
No menu pop-up Attribute Type (Tipo de atributo), selecione o tipo de atributo. Se voc selecionar Enumerated (Enumerados), digite cada valor permitido para o atributo na caixa de texto Values (Valores). Separe os valores por vrgulas, e no espaos. Por exemplo, os valores enumerados do atributo showborder da tag cfchart so listados como yes,no.
Tpicos relacionados Gerenciar bibliotecas de tags na pgina 591 Adicionar bibliotecas, tags e atributos na pgina 592
Excluir bibliotecas, tags e atributos

Voc pode utilizar o Tag Library editor (Editor de bibliotecas de tags) para excluir bibliotecas de tags, tags e atributos.
Para excluir uma biblioteca, uma tag ou um atributo:
1.
No Tag Library editor, em Edit (Editar) > Tag Libraries (Bibliotecas de tags), selecione uma biblioteca de tags, uma tag ou um atributo na caixa Tags. Clique no boto com o sinal de subtrao (-).
2.
595
3.
Se for solicitada a confirmao da excluso, clique em OK para excluir o item permanentemente. O item removido da caixa Tags. Clique em OK para fechar o Tag Library editor e concluir a excluso.
4.
Tpicos relacionados Gerenciar bibliotecas de tags na pgina 591

Adicionar bibliotecas, tags e atributos na pgina 592 Editar bibliotecas, tags e atributos na pgina 593
Importar tags personalizadas para o Dreamweaver

Voc pode importar tags personalizadas para o Dreamweaver de forma que elas se tornem parte integral do ambiente de criao. Por exemplo, quando voc comea a digitar uma tag personalizada importada na visualizao do cdigo, um menu de referncias de cdigo exibido com uma lista de atributos da tag entre os quais voc pode selecionar um.
Importar tags de arquivos XML

possvel importar tags de um arquivo DTD (Definio 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 Tag Library editor (Editor de bibliotecas de tags), em Edit (Editar) > Tag Libraries (Bibliotecas de tags). Clique no boto de adio (+) e selecione DTD Schema (Esquema DTD) > Import XML DTD or Schema File (Importar arquivo XML, DTD ou Schema). Digite o nome do arquivo ou a URL do arquivo DTD ou esquema. Digite o prefixo a ser utilizado com as tags.
N O TA
2.
3. 4.
Um prefixo utilizado para identificar uma tag no cdigo como parte de uma biblioteca de tags especfica. Algumas bibliotecas de tags no utilizam prefixos.
5.
Clique em OK.
596
Importar tags ASP.NET personalizadas

possvel 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 dilogo Site Definition (Definio de sites). Consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667. Coloque as tags compiladas (arquivos .dll) na pasta /bin da raiz do site. Tags no-compiladas (arquivos .ascx) podem residir em qualquer diretrio ou subdiretrio virtual no servidor. Para obter mais informaes, consulte a documentao do Microsoft ASP.NET.
Para importar tags personalizadas ASP.NET para o Dreamweaver:
1. 2.
Abra uma pgina ASP.NET no Dreamweaver. Abra o Tag Library editor (Editor de bibliotecas de tags), em Edit (Editar) > Tag Libraries (Bibliotecas de tags). Clique no boto de adio (+) e escolha uma das opes a seguir:
3.
Para importar todas as tags personalizadas ASP.NET do servidor de aplicativos, selecione ASP.NET > Import All ASP.NET Custom Tags (Importar todas as tags ASP.NET personalizadas). Para importar apenas algumas tags personalizadas do servidor de aplicativos, selecione ASP.NET > Import Selected ASP.NET Custom Tags (Importar as tags ASP.NET personalizadas selecionadas).
A caixa de dilogo Import Selected ASP.NET Custom Tags exibida, listando todas as tags personalizadas ASP.NET instaladas no servidor de aplicativos. Mantenha pressionada a tecla Control (no Windows) ou a tecla Command (no Macintosh) e clique em tags da lista. Em seguida, clique em OK.
Importar tags JSP de um arquivo

possvel 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. 2.
Abra uma pgina JSP no Dreamweaver. Abra o Tag Library editor (Editor de bibliotecas de tags), em Edit (Editar) > Tag Libraries (Bibliotecas de tags). Clique no boto de adio (+) e selecione JSP > Import From File (Importar do arquivo) (*.tld, *.jar, *.zip).
3.
Importar tags personalizadas para o Dreamweaver
597
4.
Digite um nome de arquivo, uma URI e um prefixo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
5.
Importar tags JSP de um servidor (web.xml)

possvel importar uma biblioteca de tags JSP para o Dreamweaver de um arquivo web.xml em um servidor JSP.
Para importar tags JSP de um servidor:
1. 2.
Abra uma pgina JSP no Dreamweaver. Abra o Tag Library editor (Editor de bibliotecas de tags), em Edit (Editar) > Tag Libraries (Bibliotecas de tags). Clique no boto de adio (+) e selecione JSP > Import from Server (Importar do servidor) (web.xml). A caixa de dilogo Import from Server exibida. Digite um nome de arquivo e um URI. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
3.
4.
5.
Importar tags JRun

Se voc utilizar o Macromedia JRun, poder importar tags JRun para o Dreamweaver.
Para importar tags JRun para o Dreamweaver:
1. 2.
Abra uma pgina JSP no Dreamweaver. Abra o Tag Library editor (Editor de bibliotecas de tags), em Edit (Editar) > Tag Libraries (Bibliotecas de tags). No Tag Library editor (Editor de bibliotecas de tags), clique no boto de adio (+) e selecione JSP > Import JRun Server Tags from Folder (Importar as tags do servidor JRUN a partir da pasta). Digite um nome de pasta, um URI e um prefixo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
3.
4.
5.
598
Utilizar um editor de HTML externo com o Dreamweaver

possvel iniciar um editor de texto ou HTML externo no Dreamweaver para editar o cdigo-fonte no documento atual e, em seguida, alternar novamente para o Dreamweaver e continuar a edio grfica. O Dreamweaver detecta as alteraes salvas no documento externamente e solicita que voc recarregue o documento quando retornar. possvel utilizar os editores de HTML integrados a seguir: Macromedia HomeSite (apenas no Windows) ou BBEdit (apenas no Macintosh). Tambm possvel utilizar outro editor de texto, como Notepad (Bloco de Notas), WordPad, TextPad, TextEdit, SimpleText, vi ou emacs.
Utilizar um editor de HTML integrado

Quando instalar o Dreamweaver, voc poder instalar o HomeSite no Windows ou uma verso de teste do BBEdit no Macintosh. O Dreamweaver bastante integrado a esses dois produtos. Graas a essa integrao, possvel editar um documento no Dreamweaver e no HomeSite/ BBEdit, alternando de um aplicativo para o outro. O documento mantido em sincronizao automtica nos dois aplicativos. Alm disso, os dois aplicativos controlam a seleo atual; por exemplo, se o usurio selecionar um texto no Dreamweaver e alternar para o BBEdit, o mesmo elemento ser selecionado no BBEdit. Voc pode abrir outros editores externos, alm do HomeSite ou do BBEdit, no Dreamweaver, mas o documento no mantido em sincronizao nos dois aplicativos, como ocorre com o HomeSite ou o BBEdit. Quando terminar de fazer alteraes em um editor externo diferente do HomeSite ou do BBEdit, voc dever atualizar manualmente o documento no Dreamweaver.
Utilizar o HomeSite (apenas no Windows)

No necessrio ativar a integrao para o HomeSite; ele integrado automaticamente quando os dois aplicativos so instalados.
Para utilizar o HomeSite:
1. 2. 3.
Selecione Edit (Editar) > Edit with HomeSite (Editar com o HomeSite). Edite o documento no HomeSite e salve as alteraes. Para retornar ao Dreamweaver, clique em Dreamweaver na barra de ferramentas Editor.
599
Utilizar o BBEdit (apenas no Macintosh)

Voc poder desativar a integrao com o BBEdit se optar por no utiliz-lo. As selees entre o Dreamweaver e o BBEdit no sero controladas se a integrao com o BBEdit estiver desativada. No entanto, a adio no Dreamweaver poder ser mais rpida se a integrao com o BBEditfor desativada.
Para utilizar o BBEdit com o Dreamweaver:
1. 2. 3.
Selecione Edit (Editar) > Edit with BBEdit (Editar com o BBEdit). Edite o documento no BBEdit. Clique no boto Dreamweaver, na paleta de ferramentas de HTML, no BBEdit, para retornar ao Dreamweaver.
Para desativar a integrao com o BBEdit:

1.
Selecione Edit > Preferences ou Dreamweaver > Preferences (Mac OS X) e selecione File Types/Editors (Tipos de arquivos/editores). Cancele a seleo de Enable BBEdit Integration (Ativar a integrao com o BBEdit) e clique em OK.
2.
Definir preferncias de tipo de arquivo e editor externo

Voc pode especificar o aplicativo que dever ser utilizado para editar arquivos com cada uma das vrias extenses.
Para selecionar um editor de HTML externo:
1. 2.
Selecione Edit (Editar) > Preferences (Preferncias). Na lista Category (Categoria) esquerda, selecione File Types/Editors (Tipos de arquivos/ editores). As preferncias de tipos de arquivos/editores so exibidas. Ajuste uma das definies da caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
3.
4.
600
Para iniciar um editor de HTML externo:
Selecione Edit (Editar) > Edit with [editor name] (Editar com [nome do editor]).
Tpicos relacionados Abrir arquivos na visualizao do cdigo por padro na pgina 589

Iniciar um editor de arquivos de mdia externo na pgina 521 Utilizar um editor de HTML integrado na pgina 599
601
602
CAPTULO 20
Codificar no Dreamweaver
O Macromedia Dreamweaver 8 oferece um ambiente de codificao completo, projetado para qualquer tipo de tarefa de desenvolvimento para a Web, desde a elaborao de pginas HTML simples at a criao, o teste e a implantao de aplicativos complexos para a Web.
NO T A

20
Para obter informaes sobre como migrar do Macromedia HomeSite para o Dreamweaver, visite o Dreamweaver Support Center (Centro de suporte do Dreamweaver) em www.macromedia.com/go/migrate_from_homesite.
Este captulo contm os tpicos a seguir:

Sobre a codificao no Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604 Escrever e editar o cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613 Procurar e substituir tags e atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .628 Fazer alteraes rpidas em uma seleo do cdigo . . . . . . . . . . . . . . . . . . . . . . . 630 Utilizar o material de referncia de linguagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631 Imprimir o cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .632
Tpicos relacionados Configurar o ambiente de codificao na pgina 583 Otimizar e depurar o cdigo na pgina 633 Editar o cdigo na Design View (Visualizao do projeto) na pgina 643 Comparar arquivos para conhecer as diferenas na pgina 126
603
Sobre a codificao no Dreamweaver

O ambiente de codificao do Dreamweaver permite escrever, editar e testar o cdigo (em vrias linguagens) contido nas pginas. O Dreamweaver no altera o cdigo escrito manualmente, a menos que voc ative opes especficas para reescrever alguns tipos de cdigos invlidos. Tpicos relacionados Exibir o cdigo na pgina 583
Suporte de linguagens
Alm de recursos de edio de texto, o Dreamweaver fornece outros recursos, como referncias de cdigo, para ajudar a codificao em algumas linguagens. Entre essas linguagens, esto:

HTML XHTML CSS JavaScript ColdFusion Markup Language (CFML) Visual Basic (para ASP e ASP.NET) C# (para ASP.NET) JSP PHP
Os recursos de codificao especficos linguagem do Dreamweaver no oferecem suporte a algumas linguagens, como Perl. possvel criar e editar arquivos Perl utilizando o Dreamweaver, mas as referncias de cdigo, por exemplo, no se aplicam a essa linguagem. Tpicos relacionados Modificao automtica de cdigo em Dreamweaver na pgina 605
Utilizar as referncias de cdigo na pgina 613
604
Captulo 20: Codificar no Dreamweaver
Sobre como corrigir markup invlido

Se o documento contiver um cdigo invlido, o Dreamweaver exibir esse cdigo em Design view (Visualizao do projeto) e, opcionalmente, o realar em Code view (Visualizao do cdigo). Se voc selecionar o cdigo em uma dessas visualizaes, o Property inspector (Inspetor de propriedades) exibir informaes como o motivo pelo qual o cdigo invlido e a maneira de corrigi-lo. Voc pode especificar preferncias no Dreamweaver para reescrever vrios tipos de cdigos invlidos quando abrir um documento. Tpicos relacionados Definir preferncias de reescrita de cdigo na pgina 588
Modificao automtica de cdigo em Dreamweaver

Voc pode definir opes que orientem o Dreamweaver a limpar automaticamente o cdigo escrito manualmente de acordo com os critrios que especificar. No entanto, o Dreamweaver nunca reescrever o cdigo, a menos que as opes de reescrita de cdigo estejam ativadas ou que voc execute uma ao que altere o cdigo. Por exemplo, o Dreamweaver s alterar os espaos em branco ou a caixa dos atributos se voc utilizar o comando Apply Source Formatting (Aplicar a formatao de origem). Algumas dessas opes de reescrita de cdigo so ativadas por padro. Para obter informaes sobre como desativ-las, ou ativar outras, consulte Definir preferncias de reescrita de cdigo na pgina 588. Os recursos Roundtrip HTML do Dreamweaver permitem movimentar os documentos entre um editor de HTML baseado em texto e o Dreamweaver, com pouco ou nenhum impacto sobre o contedo e a estrutura do cdigo-fonte HTML original do documento. Esses recursos tambm possibilitam as seguintes aes:
O Dreamweaver permite iniciar um editor de texto de outros fabricantes para editar o documento atual. Para obter mais informaes, consulte Utilizar um editor de HTML externo com o Dreamweaver na pgina 599. Por padro, o Dreamweaver no faz alteraes em cdigo criado ou editado em outros editores de HTML, mesmo que esse cdigo seja invlido, a no ser que voc ative as opes de reescrita de cdigos.
605
O Dreamweaver no altera as tags que no reconhece, inclusive as tags XML, porque no dispe de um critrio para avali-las. Se uma tag no-reconhecida se sobrepuser a outra tag (por exemplo, <MyNewTag><em>text</MyNewTag></em>), o Dreamweaver marcar essa tag como um erro, mas no reescrever o cdigo. Como alternativa, voc pode definir que o Dreamweaver realce o cdigo invlido na visualizao do cdigo (em amarelo). Quando selecionada uma seo realada, o Property inspector exibe informaes sobre como corrigir o erro.
Tpicos relacionados Definir preferncias de codificao na pgina 585
Sobre o cdigo de comportamento do servidor na pgina 613
Sobre o cdigo XHTML gerado pelo Dreamweaver

O Dreamweaver gera novo cdigo XHTML e limpa o cdigo XHTML existente de forma a atender maioria dos requisitos de XHTML. O Dreamweaver tambm fornece as ferramentas necessrias para atender aos poucos requisitos de XHTML restantes.
N OT A 606
Alguns dos requisitos descritos nesta seo tambm so exigidos em diversas verses da linguagem HTML.
A tabela a seguir descreve os requisitos de XHTML atendidos automaticamente pelo Dreamweaver.

Requisito de XHTML
O documento deve conter uma declarao DOCTYPE antes do elemento raiz, e a declarao deve fazer referncia a um dos trs arquivos DTD (Document Type Definition, Definio de tipo de documento) para XHTML (Strict, Transitional ou Frameset).
Aes que o Dreamweaver executa para atender a esse requisito

Adiciona uma declarao XHTML DOCTYPE a um documento XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ou se o documento XHTML tem um conjunto de quadros:

<!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, Adiciona o atributo namespace ao elemento html, como mostrado a seguir: e o elemento html deve designar o espao <html xmlns="http://www.w3.org/1999/ para nome XHTML.
xhtml">
Requisito de XHTML
Um documento padro deve conter os elementos estruturais head, title e body. Um documento de conjunto de quadros deve conter os elementos estruturais head, title e frameset. Todos os elementos do documento devem ser aninhados corretamente:
<p>Este um <i>exemplo com erro.</p></i> <p>Este um <i>bom exemplo.</i></p>

Em um documento padro, inclui os elementos head, title e body. Em um documento de conjunto de quadros, inclui os elementos head, title e frameset. Gera corretamente o cdigo aninhado e, ao limpar o XHTML, corrige o aninhamento no cdigo que no foi gerado pelo Dreamweaver. Impe o uso de minsculas para os nomes de elementos e atributos HTML no cdigo XHTML que gera e ao limpar o XHTML, independentemente das preferncias de caixa de tags e atributos. Insere tags de fechamento no cdigo gerado e durante a limpeza do XHTML.
Todos os nomes de elementos e atributos devem ficar em minsculas.
Todos os elementos devem ter uma tag de fechamento, a menos que estejam declarados no arquivo DTD como EMPTY (Vazio). Os elementos vazios devem ter uma tag de fechamento ou a tag de abertura deve terminar com />. Por exemplo, a tag <br> no vlida; a forma correta <br></br> ou <br/>. Em seguida, esto os elementos vazios: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta e param. E para fins de compatibilidade com verses anteriores de navegadores que no so ativados por cdigo XML deve haver um espao antes de /> (por exemplo: <br /> e no <br/>). No possvel minimizar atributos; por exemplo, <td nowrap> no vlido; a forma correta <td nowrap="nowrap">. Isso afeta os atributos a seguir: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly e selected. Todos os valores de atributos devem ser colocados entre aspas.
Insere elementos vazios com um espao antes da barra inclinada de fechamento em tags vazias no cdigo que gera e ao limpar o XHTML.
Insere pares atributo-valor integrais no cdigo que gera e ao limpar o XHTML. Nota: Se um navegador HTML no oferecer suporte a HTML 4, ele poder interpretar incorretamente esses atributos booleanos quando exibidos na forma por extenso. Coloca os valores de atributos entre aspas no cdigo que gera e ao limpar o XHTML.
607
Requisito de XHTML
Os seguintes elementos devem conter um atributo id e um atributo name: a, applet, form, frame, iframe, img e map. Por exemplo, <a name="intro">Introduction</a> no vlido; a forma correta <a id="intro">Introduction</a> ou
<a id="section1" name="intro"> Introduction</a>.

Define os atributos name e id com o mesmo valor, sempre que o atributo name definido por um Property inspector, no cdigo que o Dreamweaver gera e ao limpar o XHTML.
Os valores de atributos do tipo enumerado devem estar em minsculas. Um valor do tipo enumerado um valor de uma lista especificada de valores permitidos; por exemplo, os valores permitidos para o atributo align so: center, justify, left e right. Todos os elementos style e script devem ter um atributo type. (O atributo type do elemento script exigido desde o HTML 4, quando o atributo language tornou-se obsoleto.)
Impe o uso de minsculas para os valores de tipos enumerados no cdigo que gera e ao limpar o XHTML.
Define os atributos type e language nos elementos script, alm do atributo type nos elementos style, no cdigo que gera e ao limpar o XHTML.
Todos os elementos img e area devem ter um Define esses atributos no cdigo que gera e, atributo alt. ao limpar o XHTML, reporta os atributos alt ausentes.
Incluses do servidor
Uma incluso do servidor um arquivo que o servidor incorpora em um documento quando um navegador solicita esse documento do servidor. Quando o navegador de um visitante solicita o documento que contm a instruo de incluso, o servidor processa essa instruo e cria um novo documento no qual a instruo substituda pelo contedo do arquivo includo. Em seguida, o servidor envia esse novo documento ao navegador do visitante. Ao abrir um documento local diretamente em um navegador, no entanto, no h nenhum servidor para processar as instrues das incluses no documento. Portanto, o navegador abrir o documento sem processar tais instrues e o arquivo que deveria ser includo no aparecer no navegador. Portanto, sem utilizar o Dreamweaver, talvez seja difcil visualizar os arquivos locais e verificar a aparncia que tero para os visitantes depois de serem colocados no servidor.
608
Com o Dreamweaver, possvel visualizar os documentos exatamente como eles aparecero no servidor, tanto na Design view quanto na visualizao em um navegador. Uma incluso de servidor em um documento insere uma referncia a um arquivo externo; ela no insere o contedo do arquivo especificado no documento atual. O Dreamweaver exibe o contedo do arquivo externo na Design view, facilitando a criao de pginas. No possvel editar o arquivo includo diretamente em um documento. Para poder editar o contedo de uma incluso de servidor, voc dever editar diretamente o arquivo a ser includo. Observe que todas as alteraes feitas no arquivo externo sero automaticamente transpostas para os documentos que o inclurem. H dois tipos de incluses de servidor: Virtual e File (Arquivo). Selecione a opo adequada ao tipo de servidor da Web que voc utiliza:
No caso de um servidor Web Apache, selecione Virtual. No Apache, a opo Virtual funciona em todos os casos, enquanto File funciona em apenas alguns. No caso de um servidor Microsoft Internet Information Server (IIS), selecione File. (Virtual funciona com o IIS somente em circunstncias especficas.)
N OT A
Infelizmente, o IIS no permite que se inclua um arquivo numa pasta acima da pasta atual na hierarquia de pastas, a no ser que algum software especial tenha sido instalado no servidor. Se necessitar incluir um arquivo de uma pasta acima na hierarquia de pastas de um servidor IIS, pergunte ao administrador do sistema se o software necessrio est instalado.
Para outros tipos de servidores, ou caso voc desconhea o tipo de servidor que estiver utilizando, pergunte ao administrador do sistema qual opo dever ser utilizada.
Alguns servidores so configurados para examinar todos os arquivos, verificando a ocorrncia de incluses de servidor. Outros servidores so configurados para examinar somente os arquivos com uma extenso especfica como, por exemplo, .shtml, .shtm ou .inc. Se uma incluso de servidor no estiver funcionando, pergunte ao administrador do sistema se necessrio utilizar uma extenso especial no nome do arquivo que utiliza a incluso. Por exemplo: se o arquivo se chama canoa.html, talvez no seja possvel renome-lo como canoa.shtml. Se desejar que os seus arquivos permaneam com as extenses .html ou .htm, pea ao administrador do sistema para configurar o servidor para examinar todos os arquivos (no apenas os arquivos com uma certa extenso) quanto ocorrncia de incluses de servidor. A anlise de um arquivo quanto ocorrncia de incluses de servidor consome mais tempo. Portanto, as pginas que o servidor analisar sero veiculadas um pouco mais lentamente do que as outras pginas. Em funo disso, alguns administradores de sistema no oferecero a opo de anlise de todos os arquivos.
609
Tpicos relacionados Inserir uma incluso do servidor na pgina 652
Editar o contedo de uma incluso do servidor na pgina 653
Expresses comuns
As expresses comuns consistem em padres que descrevem as combinaes de caracteres no texto. Utilize essas expresses em suas buscas de cdigo como auxlio para descrever conceitos como frases iniciadas com var e valores de atributo que contenham um nmero. Para obter mais informaes sobre busca, consulte Procurar e substituir tags e atributos na pgina 628. A tabela a seguir lista os caracteres especiais em expresses 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 padro de busca deve ter esta aparncia: apply\*. Se no for colocada uma barra inclinada antes do asterisco, sero localizadas todas as ocorrncias de aplicam (assim como de aplic, aplica e aplicar), e no apenas aquelas seguidas do sinal de asterisco.
Caractere
^
Coincide com
Incio da entrada ou linha.
Exemplo:
^T coincidir com T em
Terracota, mas no em Cabana do Pai Toms $ * + Final da entrada ou linha. O caractere precedente 0 ou mais vezes. O caractere precedente 1 ou mais vezes.
o$ coincidir com o em nmero,
mas no em nmeros
um* coincidir com um em rum,
umi em luminoso e u em azul

um+ coincidir com um em rum e
umi em luminoso, porm no coincidir com qualquer ocorrncia de azul

re?ta coincidir com rta em curtae reta em preta, porm no coincidir com qualquer ocorrncia de caneta ou brotar .pr coincidir com propriedades e
O caractere precedente no mximo uma vez (isto , indica que o caractere precedente opcional). Qualquer caractere nico, exceto nova linha.
programa na frase propriedades do programa
610
Caractere
x|y
Coincide com
x ou y.
Exemplo:
FF0000|0000FF coincidir com FF0000 em bgcolor=#FF0000 e 0000FF em font color=#0000FF
{n}
Exatamente 'n' ocorrncias do caractere precedente.
r{2} coincidir com rr em carro e com os primeiros dois erres em brrrrrr; porm, no coincidir com qualquer ocorrncia de for F{2,4} coincidir com FF em #FF0000 e com os primeiros quatro Fs em #FFFFFF
{n,m}
No mnimo 'n' e no mximo 'm' ocorrncias do caractere precedente.
[abc]
Qualquer um dos caracteres dentro [e-g] coincidir com e em tabela, dos colchetes. Especifique uma faixa f em fraude e g" em Aguarde de caracteres com um hfen (por exemplo, [a-f] equivale a [abcdef]). Qualquer um dos caracteres que no [âeiou] coincidir inicialmente com esteja dentro dos colchetes. r em cravo, b em biblioteca e Especifique uma faixa de caracteres f em OFF! com um hfen (por exemplo [â-f] equivale a [âbcdef]). Um limite de palavra (como um espao ou retorno de carro).
\bb coincidir com b em
[âbc]
\b
blasfmia, porm no coincidir com qualquer ocorrncia de abrir ou liberdade

\Bb coincidir com b em
\B
Qualquer caractere diferente de um limite de palavra. Qualquer caractere numrico. Equivale a [0-9]. Qualquer caractere no numrico. Equivale a [^0-9]. Avano de pgina. Avano de linha. Retorno de carro. Qualquer caractere contendo um espao em branco, inclusive espaos, tabulaes, avanos de pgina ou avanos de linha.
liberdade, porm no coincidir com blasfmia

\d coincidir com 3 em C3PO e
\d \D \f \n \r \s
2 em apartamento 2G
\D coincidir com S em 900S e
Q em Q45
\scoluna coincidir com coluna em
100 colunas, porm no coincidir com colunas
611
Caractere
\S
Coincide com
Qualquer caractere que no contenha espaos em branco. Uma tabulao. Qualquer caractere alfanumrico, inclusive o sinal de sublinhado. Equivale a [A-Za-z0-9_].
Exemplo:
\Scoluna coincidir com coluna em
colunas:, porm no coincidir com 100 colunas
\t \w
b\w* coincidir com Alfabeto em Alfabeto cirlico e com objeto e abstrato em nenhum objeto abstrato
\W
Qualquer caractere no \W coincidir com & em Joca & alfanumrico. Equivale a [Â-Za-z0- Mateus e com % em 100% 9_]. Caractere de retorno. Certifique-se de desmarcar a opo Ignore Whitespace Differences (Ignorar os diferentes espaos em branco) ao efetuar essa busca se no forem utilizadas expresses comuns. Observe que ele coincide com determinado caractere, mas no com a noo geral de quebra de linha; por exemplo, no coincide com uma tag <br> ou <p>. Os caracteres de retorno so exibidos como espaos na Design view, e no como quebras de linha.
Control+Enter ou Shift+Enter (no Windows) ou Control+Return, Shift+Return ou Command+Ret urn (no Macintosh)
Utilize parnteses para definir agrupamentos na expresso comum qual ser feita referncia posteriormente. Em seguida, utilize $1, $2, $3 e assim por diante no campo Replace With (Substituir por) para fazer referncia ao primeiro, segundo, terceiro e ltimo agrupamentos de parnteses.
N OT A 612
Na caixa de texto Search For (Procurar), para fazer referncia a um agrupamento de parnteses anterior na expresso comum, utilize \1, \2, \3 e assim por diante, em vez de $1, $2, $3.
Por exemplo, a busca de (\d+)\/(\d+)\/(\d+) e sua substituio por $2/$1/$3 troca o dia e o ms em uma data separada por barras inclinadas (na converso entre o formato de datas no estilo americano e europeu).
Tpicos relacionados Procurar tags, atributos ou texto contidos em tags especficas na pgina 628
Salvar padres de busca na pgina 629
Sobre o cdigo de comportamento do servidor

Quando voc desenvolve uma pgina dinmica e seleciona um comportamento de servidor no painel Server Behaviors (Comportamentos de servidor), o Dreamweaver insere um ou mais blocos de cdigo na pgina para ativar esse comportamento. Se voc alterar manualmente o cdigo de um bloco de cdigo, no poder mais utilizar painis, como Bindings (Ligaes) e Server Behaviors, para editar o comportamento do servidor. O Dreamweaver procura padres especficos na pgina de cdigo para detectar comportamentos de servidor e exibi-los no painel Server Behaviors. Se alterar o cdigo de um bloco de cdigo, o Dreamweaver, voc no poder mais detectar o comportamento do servidor e exibi-lo no painel Server Behaviors. No entanto, o comportamento de servidor continuar a existir na pgina e poder ser editado no ambiente de codificao do Dreamweaver.
Escrever e editar o cdigo

O Dreamweaver oferece diversos recursos que ajudam a escrever e editar o cdigo de modo eficiente.
Utilizar as referncias de cdigo

O recurso de referncias de cdigo ajuda a inserir e editar o cdigo com rapidez e sem erros. Quando voc digita caracteres especficos na Code view, como as primeiras letras de uma tag ou atributo, ou o nome da propriedade CSS, exibida uma lista que sugere opes para preencher sua entrada. possvel utilizar este recurso para inserir ou editar cdigo ou apenas para examinar os atributos disponveis para uma tag, os parmetros disponveis para uma funo ou os mtodos disponveis para um objeto.
613
As referncias de cdigo esto disponveis para vrios tipos de cdigo. Quando voc digita um caractere especfico que indica o incio de uma parte do cdigo, exibida uma lista apropriada de itens; por exemplo, para exibir uma lista de referncias de cdigo de nomes de tags HTML, digite um colchete de abertura (<).
DICA
Para obter os resultados ideais, especialmente quando estiver utilizando referncias de cdigo para funes e objetos, defina a opo Delay (Atraso) da caixa de dilogo de preferncias Code Hints (Referncias de cdigo) para um atraso de 0 segundos. Para obter mais informaes, consulte Definir as preferncias de referncias de cdigo na pgina 588.
A lista de referncias de cdigo desaparece quando voc pressiona Backspace (no Windows) ou Delete (no Macintosh).
Para exibir um menu de referncias de cdigo, caso ele no seja exibido automaticamente:
Pressione Control+Barra de espao (Windows) ou Command+Barra de espao (Macintosh).
Para inserir markup ou outro cdigo na Code view utilizando referncias de cdigo:
1.
Digite o incio de uma parte do cdigo. Por exemplo, para inserir uma tag, digite um colchete de abertura (<); para inserir um atributo, coloque o ponto de insero logo aps um nome de tag e pressione a barra de espao. exibida uma lista de itens (como nomes de tags ou atributos).
DICA
Para fechar a lista a qualquer momento, pressione Escape.
2. 3.
Role pela lista utilizando as teclas de seta para cima ou para baixo. Para inserir um item da lista, clique duas vezes nele, ou selecione-o e pressione Enter (no Windows) ou Return (Macintosh).
DICA
Se um estilo CSS criado recentemente no aparecer em uma lista de referncias de cdigo de estilos CSS, selecione Refresh Style List (Atualizar lista de estilos) na lista de referncias de cdigo. Se a Design view estiver em exibio, alguns cdigos invlidos podero aparecer nessa visualizao temporariamente depois que voc selecionar Refresh Style List. Para remover esses cdigos invlidos da Design view, depois de inserir o estilo, pressione F5 para atualizar a visualizao novamente.
614
Para inserir uma tag de fechamento:
Digite </ (barra inclinada). Por padro, o Dreamweaver determina a tag a ser fechada e a fecha para voc. possvel alterar esse comportamento padro de modo que o Dreamweaver insira uma tag de fechamento aps a incluso do colchete final (>) da tag de abertura ou de modo a no inserir qualquer tag de fechamento. Selecione Edit > Preferences > Code Hints e, em seguida, selecione uma das opes Close Tags.
Para editar uma tag utilizando referncias de cdigo, siga um destes procedimentos:
Para substituir um atributo por outro, primeiro exclua o atributo e seu valor. Em seguida, adicione um novo atributo e seu valor como descrito no procedimento anterior. Para alterar um valor, primeiro exclua esse valor e, em seguida, adicione um novo valor como descrito no procedimento anterior.
Tpicos relacionados Definir as preferncias de referncias de cdigo na pgina 588
Trabalhar com trechos de cdigo

Os trechos de cdigo permitem armazenar contedo para que este possa ser reutilizado rapidamente. possvel criar e inserir trechos de HTML, JavaScript, CFML, ASP, JSP e outros. O Dreamweaver tambm contm alguns trechos predefinidos que podem ser usados como ponto de partida. Esta seo descreve como inserir, criar, editar ou excluir trechos de cdigo. Ela tambm descreve como gerenciar os trechos do cdigo e compartilh-los com outros membros da equipe.
N OT A
Com o Dreamweaver 8, os trechos que continham tags <font> e outros elementos e atributos obsoletos foram movidos para a pasta Legacy (Legado) no painel Snippets (Trechos).
Para inserir um trecho de cdigo:

1.
Coloque o ponto de insero no local onde deseja inserir o trecho de cdigo, ou selecione o cdigo em torno do qual voc colocar um trecho.
615
2.
No painel Snippets (Trechos), em Window (Janela) > Snippets, clique duas vezes no trecho. Voc tambm pode clicar com o boto direito do mouse (Windows) ou pressionar a tecla Control (no Macintosh) e clicar no trecho. Em seguida, selecione Insert (Inserir) no menu pop-up.
Para criar um trecho de cdigo:

1.
Na parte inferior do painel Snippets, clique no cone New Snippet (Novo trecho). A caixa de dilogo Snippet exibida. Preencha a caixa de dilogo e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
2.
Para editar um trecho de cdigo:
No painel Snippets, selecione um trecho e clique no boto Edit Snippet (Editar trecho) na parte inferior do painel.
Para excluir um trecho de cdigo:
No painel Snippets, selecione um trecho e clique no boto Remove (Remover) na parte inferior do painel.
Para criar pastas de trechos de cdigo e gerenciar trechos de cdigo:

1.
Na parte inferior do painel Snippets, clique no cone New Snippet Folder (Pasta de novos trechos). Arraste trechos para a nova pasta ou para outras pastas, conforme desejado.
2.
Para acrescentar ou editar um atalho de teclado referente ao trecho:

1.
No painel Snippets, clique com o boto direito do mouse (Windows) ou pressione a tecla Control (Macintosh) e selecione Edit Keyboard Shortcuts (Editar atalhos de teclado). O Keyboard Shortcuts Editor (Editor de atalhos do teclado) exibido. No menu pop-up Commands (Comandos), selecione Snippets. Aparece uma lista de trechos. Selecione um trecho e atribua um atalho de teclado a ele. Para obter mais informaes, consulte Personalizao de atalhos de teclado na pgina 83.
2.
3.
Para compartilhar um trecho com outros membros da equipe:

1.
Localize o arquivo correspondente ao trecho a ser compartilhado na pasta Configuration\Snippets (Configurao/Snippets) da pasta do aplicativo Dreamweaver.
616
2.
Copie o arquivo do trecho para uma pasta compartilhada do seu computador ou de um computador da rede. Solicite aos outros membros da equipe que copiem o arquivo de trecho para as respectivas pastas Configuration\Snippets.
3.
Inserir cdigo rapidamente com a barra de ferramentas Coding (Codificao)

possvel utilizar a barra de ferramentas Coding para adicionar cdigos a uma pgina rapidamente.
Para inserir cdigos rapidamente:
1. 2. 3.
Certifique-se de estar no modo de visualizao do cdigo (View > Code). Coloque o ponto de insero no cdigo ou selecione um bloco de cdigo. Clique sobre um boto da barra de ferramentas Coding ou selecione um item no menu pop-up dessa barra.
Para descobrir o que cada boto faz, posicione o ponteiro sobre ele at que seja exibida uma dica de ferramenta. Os botes a seguir sero exibidos por padro na barra de ferramentas Coding.
Open Documents (Abrir documentos)
lista os documentos que esto abertos. Quando voc seleciona um documento, ele exibido na janela de documento.
Collapse Full Tag (Reduzir tag completa) reduz o contedo entre um conjunto de tags de abertura e fechamento (por exemplo, o contedo entre <table> e </table>). Voc pode colocar o ponto de insero na tag de abertura ou de fechamento e, em seguir, clicar no boto Collapse Full Tag para reduzir a tag.
DICA
Tambm possvel reduzir o cdigo fora de uma tag completa, colocando o ponto de insero sobre uma tag de abertura ou de fechamento e, em seguida, pressionando Alt (Windows) ou Option (Macintosh) e clicando no boto Collapse Full Tag. Alm disso, o uso de Control-clique neste boto desativa a reduo inteligente, a fim de que o Dreamweaver no ajuste o contedo reduzido fora das tags completas. Para obter mais informaes, consulte Sobre a reduodo cdigo na pgina 622.
617
Collapse Selection (Reduzir seleo)

DICA

reduz o cdigo selecionado.
possvel reduzir o cdigo fora de uma seleo pressionando Alt (Windows) ou Option (Macintosh) e clicando no boto Collapse Selection. Alm disso, o uso de Control-clique neste boto desativa a reduo inteligente, a fim de que voc possa reduzir exatamente o que selecionou sem que haja qualquer manipulao por parte do Dreamweaver. Para obter mais informaes, consulte Sobre a reduodo cdigo na pgina 622.
Expand All (Expandir tudo)
restaura todo o cdigo reduzido.
Select Parent Tag (Selecionar tag-me)
seleciona o contedo e as tags de abertura e fechamento da linha sobre a qual voc posicionou o ponto de insero. Se voc clicar repetidamente neste boto e suas tags estiverem balanceadas, o Dreamweaver selecionar as tags html e /html mais externas. seleciona o contedo e os parnteses, chaves ou colchetes da linha sobre a qual voc posicionou o ponto de insero. Se voc clicar repetidamente neste boto e os smbolos estiverem balanceados, o Dreamweaver selecionar as chaves, os parnteses ou os colchetes mais externos no documento.
Balance Braces (Ajustar as chaves)
Show Line Numbers (Mostrar nmeros de linha) permite ocultar ou mostrar os nmeros no
incio de cada linha de cdigo.

Highlight Invalid Code (Realar o cdigo incorreto)
reala em amarelo o cdigo incorreto.
Apply Comment (Aplicar comentrio) permite incluir tags de comentrios em torno do cdigo selecionado ou abrir novas tags de comentrios.
Apply HTML Comment (Aplicar comentrio HTML) inclui <!-- e --!> no cdigo selecionado ou abre uma nova tag caso no haja cdigo selecionado. Apply // Comment (Aplicar comentrio //) insere // no incio de cada linha do cdigo CSS ou JavaScript selecionado ou insere uma nica tag // caso nenhum cdigo seja selecionado. Apply /* */ (Aplicar /* */) inclui /* e */ no cdigo CSS ou JavaScript selecionado. Apply ' Comment (Aplicar comentrio ') destina-se a cdigo Visual Basic. Insere aspas simples no incio de cada linha de um script Visual Basic script ou insere aspas simples no incio do ponto de insero se no houver cdigo selecionado. Quando voc estiver trabalhando em um arquivo ASP, ASP.NET, JSP, PHP ou Macromedia ColdFusion e selecionar a opo Apply Server Comment (Aplicar comentrio de servidor), o Dreamweaver detectar automaticamente a tag de comentrio correta e a aplicar sua seleo.
618
Remove Comment (Remover comentrio)
remove as tags de comentrio do cdigo selecionado. Se uma seleo contiver comentrios aninhados, somente as tags de comentrio mais externas sero removidas.
Wrap Tag (Colocar tag ao redor) coloca a tag selecionada ao redor do cdigo selecionado no
Quick Tag Editor.

Recent Snippets (Trechos recentes) permite inserir um cdigo usado recentemente a partir
do painel Snippets. Para obter mais informaes, consulte Trabalhar com trechos de cdigo na pgina 615.
Indent Code (Recuar o cdigo)
desloca a seleo para a direita. desloca a seleo para a esquerda.
Outdent Code (Remover recuo do cdigo)
Format Source Code (Formatar cdigo-fonte)
aplica os formatos de cdigo especificados anteriormente ao cdigo selecionado ou pgina inteira se um cdigo no for selecionado. Voc tambm pode definir rapidamente as preferncias de formatao de cdigo, selecionando Code Formatting Settings (Definies de formatao de cdigo) no boto Format Source Code ou editando as bibliotecas de cdigo por meio de Edit Tag Libraries (Editar bibliotecas de tags). O nmero de botes disponveis na barra de ferramentas Coding varia de acordo com o tamanho da visualizao do cdigo na janela do documento. Para ver todos os botes disponveis, ajuste a janela de visualizao do cdigo ou clique na seta de expanso no incio da barra de ferramentas Coding. Tambm possvel editar a barra de ferramentas Coding para exibir mais botes, tais como Word Wrap (Quebra de linha), Hidden Characters (Caracteres ocultos) e Auto Indent (Recuo automtico), bem como para ocultar os botes que no se deseja exibir. No entanto, para fazer isto, necessrio editar o arquivo XML que gera a barra de ferramentas. Para obter mais informaes, veja Extending Dreamweaver (Extenso dos recursos do Dreamweaver).
N OT A
A opo de exibio de caracteres ocultos, que no um boto padro na barra de ferramentas Coding, est disponvel no menu View (Exibir) > Code View Options (Opes de visualizao do cdigo)> Hidden Characters (Caracteres ocultos).
Tpicos relacionados A barra de ferramentas Coding na pgina 53 Exibir barras de ferramentas na pgina 60 Verificar se as tags e as chaves esto ajustadas na pgina 634
619
Inserir cdigo rapidamente utilizando a barra Insert

possvel utilizar a barra Insert para adicionar cdigos a uma pgina rapidamente.
Para inserir cdigos rapidamente:
1. 2. 3.
Posicione o ponto de insero no cdigo. Selecione uma categoria adequada na barra Insert. Clique sobre um boto da barra Insert ou selecione um item de um menu pop-up dessa barra. Ao clicar em um cone, o cdigo poder ser exibido na pgina imediatamente ou poder ser exibida uma caixa de dilogo solicitando mais informaes para concluir o cdigo.
Para descobrir qual a funo de um boto, utilize o ponteiro do mouse para apont-lo e aguarde a exibio da dica de ferramenta. O nmero e o tipo de botes disponveis na barra Insert variam de acordo com o tipo de documento atual. Tambm dependem de o usurio estar utilizando Code view ou Design view. Embora a barra Insert fornea uma srie de tags utilizadas com freqncia, ela no abrange todas as tags. Para escolher uma tag em uma seleo mais abrangente, utilize o Tag Chooser (Seletor de tags). Tpicos relacionados A barra Insert na pgina 51
Inserir tags com o Tag Chooser (Seletor de tags)

Voc pode utilizar o Tag Chooser para inserir na pgina qualquer tag das bibliotecas de tags do Dreamweaver (que incluem bibliotecas de tags ColdFusion e ASP.NET). Para obter mais informaes sobre as bibliotecas de tags, consulte Gerenciar bibliotecas de tags na pgina 591.
Para inserir uma tag utilizando o Tag Chooser:
1.
Posicione o ponto de insero no cdigo, clique com o boto direito do mouse (no Windows) ou pressione a tecla Control (no Macintosh) e selecione Insert Tag (Inserir tag). O Tag Chooser exibido. O painel esquerdo contm 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 e insira uma tag. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Para fechar o Tag Chooser, clique no boto Close (Fechar).
3.
620
Editar tags utilizando Tag editors (Editores de tags)

Os Tag editors permitem exibir, especificar e editar os atributos de uma tag.
Para editar uma tag com um Tag editor:

1.
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em uma tag na Code view ou um objeto em Design view, selecione Edit Tag (Editar tag) no menu pop-up. Especifique ou edite os atributos da tag e clique em OK.
DICA
2.
Para obter mais informaes sobre a tag no Tag Editor, clique em Tag Info (Informaes sobre a tag).
Reduzir cdigo
possvel otimizar a visualizao do cdigo para mostrar menos ou mais cdigo de acordo com a sua preferncia, reduzindo ou expandindo os fragmentos de cdigo selecionados. Tambm possvel cortar, colar ou mover sees reduzidas do cdigo. Esta seo contm os seguintes tpicos:

Sobre a reduodo cdigo na pgina 622 Reduzir e expandir fragmentos de cdigo na pgina 623 Colar e mover fragmentos de cdigo reduzidos na pgina 625
621
Sobre a reduodo cdigo

O Dreamweaver permite que voc reduza e expanda fragmentos de cdigo de modo que possa visualizar diferentes sees do documento sem precisar usar a barra de rolagem. Por exemplo, para ver todas as regras de CSS na tag head que se aplicam a uma tag div em toda a pgina, voc pode reduzir tudo entre a tag head e a tag div, de modo a poder ver ao mesmo tempo ambas as sees do cdigo. Embora seja possvel escolher fragmentos de cdigo fazendo selees na visualizao do projeto ou na visualizao do cdigo, voc s poder reduzir o cdigo na visualizao do cdigo. Quando voc seleciona um cdigo, o Dreamweaver inclui um conjunto de botes de reduo ao lado da seleo (smbolo de subtrao no Windows; tringulos verticais no Macintosh). Para reduzir a seleo, clique em um dos botes. Quando o cdigo reduzido, os botes de reduo se transformam em um boto de expanso (boto de adio do Windows; tringulo horizontal no Macintosh). Para expandir a seleo reduzida, clique no boto de expanso. Para obter informaes sobre outras maneiras de trabalhar com o cdigo reduzido, consulte Reduzir e expandir fragmentos de cdigo na pgina 623. s vezes, o Dreamweaver no reduz exatamente o fragmento de cdigo selecionado. O Dreamweaver usa a reduo inteligente para reduzir a seleo mais comum e mais visualmente agradvel. Por exemplo, se voc tiver selecionado uma tag de recuo e, depois, selecionou tambm os espaos de recuo antes da tag, o Dreamweaver no reduzir os espaos de recuo, porque a maioria dos usurios espera que os recuos sejam preservados. Caso desede desativar o recurso de reduo inteligente e forar o Dreamweaver a reduzir exatamente o que foi selecionado, mantenha pressionada a tecla Control antes de reduzir seu cdigo. Alm disso, o Dreamweaver incluir um cone de advertncia nos fragmentos de cdigo reduzidos se um fragmento contiver erros ou cdigo que no sejam aceitos por determinados navegadores.
NO T A

Os arquivos criados a partir dos modelos do Dreamweaver exibem todos os cdigos amplamente expandidos, mesmo que o arquivo de modelo (.dwt) contenha fragmentos de cdigo reduzidos.
Tpicos relacionados Colar e mover fragmentos de cdigo reduzidos na pgina 625 Limpar o cdigo na pgina 633 Inserir cdigo rapidamente com a barra de ferramentas Coding (Codificao) na pgina 617
622
Reduzir e expandir fragmentos de cdigo

Para reduzir cdigo:
1. 2.
Selecione um fragmento de cdigo. Selecione Edit (Editar)> Code Collapse (Reduo de cdigo)> Collapse Selection (Reduzir seleo) ou clique em um dos botes de reduo ao lado da seleo.
Para reduzir o cdigo fora de uma seleo:

1. 2.
Na visualizao do cdigo, selecione um fragmento de cdigo. Select Edit > Code Collapse > Collapse Outside Selection (Reduzir seleo externa).
DICA
Voc tambm pode reduzir o cdigo fora de uma seleo pressionando Alt (Windows) ou Option (Macintosh) e clicando em um dos botes de reduo ou no boto Collapse Selection na barra de ferramentas Coding.
Para reduzir uma tag e todo o contedo nela contido:

1.
Na visualizao do cdigo, coloque o ponto de insero dentro de uma tag de abertura ou de fechamento (por exemplo, dentro da tag <table> ou </table>). Selecione Edit > Code Collapse > Collapse Full Tag.
DICA
2.
Tambm possvel reduzir uma tag completa, clicando com o boto direito na tag do seletor de tags e, em seguida, selecionando Collapse Full Tag.
Para reduzir o cdigo fora de uma tag completa:

1.
Siga um dos procedimentos abaixo: Na visualizao do cdigo, coloque o ponto de insero dentro de uma tag de abertura ou de fechamento (por exemplo, dentro da tag <table> ou </table>). Na visualizao do cdigo, selecione parte de uma tag de abertura ou de fechamento. Selecione Edit > Code Collapse > Collapse Outside Full Tag (Reduzir fora da tag completa).
DICA
2.
Voc tambm pode reduzir o cdigo fora da tag completa, clicando com o boto direito na tag no seletor de tags e selecionando Collapse Outside Full Tag. Uma alternativa colocar o ponto de insero dentro de uma tag de abertura ou de fechamento, pressionar Alt e clicar no boto Collapse Full Tag na barra de ferramentas Coding.
623
Para selecionar um fragmento de cdigo reduzido:
Na visualizao do cdigo, clique no fragmento de cdigo reduzido.

N OT A
Quando voc seleciona um item na visualizao do projeto que faa parte de um fragmento de cdigo reduzido, o Dreamweaver expande automaticamente o fragmento na visualizao cdigo. Quando voc seleciona um item na visualizao do projeto que seja um fragmento de cdigo completo, o fragmento permanece reduzido na visualizao do cdigo.
Para expandir um fragmento de cdigo:

Na visualizao do cdigo, clique duas vezes no fragmento de cdigo. Selecione Edit > Code Collapse > Expand Selection.
Para ver o cdigo em um fragmento de cdigo reduzido sem expandi-lo:
Posicione o ponteiro do mouse sobre o fragmento de cdigo reduzido.
Para expandir todos os fragmentos de cdigo reduzidos:
Selecione Edit > Code Collapse > Expand All.
Tambm possvel usar as seguintes teclas de atalho para executar qualquer dos comandos anteriores:
Comando
Collapse Selection Collapse Outside Selection Expand Selection Collapse Full Tag Collapse Outside Full Tag Expand All
Windows
Control+Shift+C Control+Alt+C Control+Shift+E Control+Shift+J Control+Alt+J Control+Alt+E
Macintosh
Command+Shift+C Command+Alt+C Command+Shift+E Command+Shift+J Command+Alt+J Command+Alt+E
Tpicos relacionados Sobre a reduodo cdigo na pgina 622

Limpar o cdigo na pgina 633 Inserir cdigo rapidamente com a barra de ferramentas Coding (Codificao) na pgina 617
624
Colar e mover fragmentos de cdigo reduzidos

Para copiar e colar um fragmento de cdigo reduzido:
1. 2. 3. 4.
Selecione o fragmento de cdigo reduzido. Selecione Edit > Copy (Copiar). Coloque o ponto de insero no ponto em que deseja colar o cdigo. Selecione Edit > Paste (Colar).
N OT A
Voc pode colar em outros aplicativos, mas o estado reduzido do fragmento de cdigo no ser preservado.
Para arrastar um fragmento de cdigo reduzido:

1. 2.
Selecione o fragmento de cdigo reduzido. Arraste a seleo at o novo local.

DICA N OT A
Para arrastar uma cpia da seleo, pressione Control (Windows) ou Alt (Macintosh) e arraste-a. No possvel arrastar para outros documentos.
Tpicos relacionados Sobre a reduodo cdigo na pgina 622

Reduzir e expandir fragmentos de cdigo na pgina 623 Limpar o cdigo na pgina 633 Inserir cdigo rapidamente com a barra de ferramentas Coding (Codificao) na pgina 617
Recuar blocos de cdigo

Ao escrever e editar um cdigo na Code view ou no Code inspector, voc pode alterar o nvel de recuo de um bloco ou linha selecionada, deslocando-a uma tabulao para a direita ou para a esquerda.
Para recuar o bloco de cdigo selecionado, siga um destes procedimentos:

Pressione Tab. Selecione Edit > Indent Code (Recuar o cdigo).
625
Para remover o recuo de um bloco de cdigo selecionado, siga um destes procedimentos:

Pressione Shift+Tab. Selecione Edit > Outdent Code (Remover o recuo do cdigo).
Tpicos relacionados Fazer alteraes rpidas em uma seleo do cdigo na pgina 630
Copiar e colar cdigos

possvel copiar e colar o cdigo-fonte de outro aplicativo ou da prpria Code view.
Para copiar e colar o cdigo como texto:
1. 2.
Copie o cdigo do Dreamweaver ou de outro aplicativo. Coloque o ponto de insero diretamente na visualizao do cdigo e selecione Edit > Paste.
Tpicos relacionados Colar e mover fragmentos de cdigo reduzidos na pgina 625
Inserir comentrios de HTML

Um comentrio um texto descritivo inserido no cdigo HTML para explic-lo ou fornecer outras informaes. O texto do comentrio aparece somente na visualizao do cdigo e no exibido em um navegador.
Para inserir um comentrio no ponto de insero:
Selecione Insert > Comment (Comentrio). Na Code view, o Dreamweaver inclui uma tag de comentrio e coloca o ponto de insero no meio dela. Digite o comentrio. Na Design view, o Dreamweaver exibe a caixa de dilogo Comment. Digite seu comentrio e clique em OK.
Para exibir marcadores de comentrios na Design view:
Selecione View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis). Certifique-se de que a opo Comments esteja selecionada nas preferncias de Invisible Elements; caso contrrio, o marcador no ser exibido.
626
Para editar um comentrio existente, siga um destes procedimentos:
Na visualizao de projeto, selecione o marcador Comment e edite o texto do comentrio no Property inspector. Na visualizao do cdigo, localize o comentrio e edite seu texto.
Saltar para uma funo do JavaScript ou do VBScript

Tanto no Code View como no Code Inspector, voc pode ver uma lista de todas as funes de JavaScript ou VBScript em seu cdigo e saltar para qualquer uma delas.
Para saltar para uma funo de JavaScript ou VBScript em seu cdigo:
1.
Exiba o documento na visualizao do cdigo (View > Code) ou no Code inspector (Window > Code Inspector). Siga um dos procedimentos abaixo:
2.
Se estiver usando a visualizao do cdigo, clique com o boto direito (Windows) ou pressione Control e clique (Macintosh) em qualquer local da visualizao do cdigo e, em seguida, selecione o submenu Functions no menu de contexto.
NO TA DICA
O submenu Functions no aparece na Design view.
Se o cdigo contiver funes JavaScript ou VBScript, elas sero exibidas no submenu.

Para ver a lista de funes em ordem alfabtica, clique com o boto direito do mouse com a tecla Control pressionada (Windows) ou clique com as teclas Option e Control pressionadas (Macintosh) na visualizao do cdigo e, ento, selecione o submenu Functions.
Se estiver usando o inspetor de cdigo, clique no boto Code Navigation na barra de ferramentas. O boto consiste em um par de chaves ({ }).
3.
No submenu, selecione um nome de funo para saltar para a funo de seu cdigo.
627
Procurar e substituir tags e atributos

Voc pode utilizar o Dreamweaver para procurar e substituir tags e atributos no cdigo. Tpicos relacionados Expresses comuns na pgina 610

Procurar e substituir texto na pgina 444 Comparar arquivos para conhecer as diferenas na pgina 126
Procurar tags, atributos ou texto contidos em tags especficas

Voc pode procurar tags, atributos e valores de atributos especficos. Por exemplo, possvel procurar todas as tags img sem um atributo alt. Voc tambm pode procurar seqncias especficas de texto dentro ou fora de um conjunto de tags de recipientes. Por exemplo, possvel procurar a expresso Untitled (Sem ttulo) contida em uma tag title para localizar todas as pginas sem ttulo do site.
Para procurar tags, atributos ou texto no cdigo:
1.
Abra o documento no qual deseja fazer a busca, ou selecione documentos ou uma pasta no painel Files (Arquivos). Selecione Edit > Find and Replace. A caixa de dilogo Find and Replace exibida. Especifique os arquivos nos quais deseja fazer a busca e, em seguida, especifique o tipo de busca a ser executada, bem como o texto e as tags a serem procurados. Como alternativa, especifique tambm o texto de substituio. Em seguida, clique em um dos botes Find (Localizar) ou Replace (Substituir). Para obter mais informaes, clique no boto Help (Ajuda). Quando terminar, clique no boto Close (Fechar) para desativar a caixa de dilogo.
2.
3.
4.
Para fazer uma nova busca sem exibir a caixa de dilogo Find and Replace:
Pressione F3 (no Windows) ou Command+G (no Macintosh).
Tpicos relacionados Expresses comuns na pgina 610
628
Salvar padres de busca

Voc pode salvar um padro de busca e reutiliz-lo posteriormente.
Para salvar um padro de busca:
1.
Na caixa de dilogo Find and Replace (Localizar e substituir), em Edit > Find and Replace, defina os parmetros para a busca. Se estiver executando uma busca de tag ou texto avanado, consulte Procurar tags, atributos ou texto contidos em tags especficas na pgina 628 para obter informaes sobre como definir parmetros adicionais de busca.
2. 3.
Clique no boto Save Query (Salvar a consulta), que exibe o cone do disco. Na caixa de dilogo exibida, navegue at a pasta onde deseja salvar consultas. Em seguida, digite um nome de arquivo para identificar a consulta e clique em Save (Salvar). Por exemplo, se o padro de busca envolver tags img sem um atributo alt, voc poder chamar a consulta de img_no_alt.dwr.
N OT A
As consultas salvas tm a extenso de nome de arquivo .dwr. Algumas consultas salvas de verses anteriores do Dreamweaver podero ter a extenso .dwq.
Para chamar um padro de busca novamente:

1. 2. 3.
Selecione Edit > Find and Replace. Clique no boto Load Query (Carregar a consulta), que exibe o cone da pasta. Navegue para a pasta onde as consultas so salvas. Em seguida, selecione um arquivo de consulta e clique em Open (Abrir). Clique em Find Next (Localizar prximo), Find All (Localizar todos), Replace (Substituir) ou Replace All (Substituir tudo) para iniciar a busca.
4.
Tpicos relacionados Procurar tags, atributos ou texto contidos em tags especficas na pgina 628
Expresses comuns na pgina 610
Procurar e substituir tags e atributos
629
Fazer alteraes rpidas em uma seleo do cdigo

Voc pode selecionar um cdigo e fazer alteraes rpidas nele utilizando um menu contextual.
Para fazer alteraes rpidas no cdigo selecionado:
1.
Na Code view, selecione um cdigo e clique com o boto direito do mouse (no Windows) ou pressione Control (no Macintosh). No menu contextual, selecione o submenu Selection (Seleo). Selecione uma das seguintes opes no submenu:
Comment Out Lines (Linhas de comentrio)
2.
coloca as linhas selecionadas entre tags de comentrio. Se uma linha for parcialmente selecionada, a linha inteira ser inserida no comentrio. Voc pode utilizar essa ferramenta para transformar um cdigo possivelmente incorreto em um comentrio ao depurar a pgina.
Uncomment Lines (Linhas fora do comentrio) remove as marcas de comentrio do incio e do final das linhas da seleo do comentrio. Essa ferramenta s funciona em linhas inteiras, e no em comentrios contidos em linhas. Convert Tabs to Spaces (Converter tabulaes em espaos) converte cada tabulao da seleo em um nmero de espaos igual ao valor de Tab Size (Tamanho da tabulao) nas preferncias de Code Format (Formato do cdigo). Para obter mais informaes, consulte Definir as preferncias de formatao de cdigo na pgina 587. Convert Spaces to Tabs (Converter espaos em tabulaes) converte conjuntos de espaos da seleo em tabulaes. Cada conjunto de espaos com um nmero de espaos igual ao tamanho da tabulao convertido em uma tabulao. Indent
(Recuar) faz o recuo da seleo, deslocando-a para a direita. Para obter mais informaes sobre como recuar e remover o recuo, consulte Recuar blocos de cdigo na pgina 625. (Remover recuo) desloca a seleo para a esquerda. remove todas as tags da seleo.
Outdent
Remove All Tags (Remover todas as tags)
Convert Lines to Table (Converter linhas em tabela) coloca a seleo em uma tag table
sem atributos.
Add Line Breaks (Adicionar quebras de linha)
adiciona uma tag br ao final de cada
linha da seleo.
Convert to Uppercase (Converter em maisculas) converte todas as letras da seleo, inclusive os nomes e os valores de tags e atributos, em maisculas.
630
Convert to Lowercase (Converter em minsculas) converte todas as letras da seleo, inclusive os nomes e os valores de tags e atributos, em minsculas. Convert Tags to Uppercase (Converter tags em maisculas) converte todos os nomes de tags e atributos, bem como os valores dos atributos, da seleo em maisculas. Convert Tags to Lowercase (Converter tags em minsculas)
converte todos os nomes de tags e atributos, bem como os valores dos atributos, da seleo em minsculas.
Utilizar o material de referncia de linguagens

O painel Reference oferece uma ferramenta de referncia rpida para linguagens de markup, linguagens de programao e estilos CSS. Ela fornece informaes sobre tags especficas, objetos e estilos com os quais voc esteja trabalhando na visualizao do cdigo (ou no inspetor de cdigo). O painel Reference tambm fornece um cdigo de exemplo que voc pode colar em seus documentos.
Para abrir o painel Reference:
1.
Execute uma das seguintes aes na Code view:
Clique com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em uma tag, atributo ou palavra-chave e, em seguida, selecione Reference no menu contextual. Posicione o ponto de insero sobre uma tag, atributo ou palavra-chave e pressione Shift+F1.
exibido o painel Reference, mostrando informaes sobre a tag, o atributo ou a palavrachave clicada.
2.
Para ajustar o tamanho do texto no painel Reference, selecione Large Font (Fonte grande), Medium Font (Fonte mdia) ou Small Font (Fonte pequena) no menu de opes (a seta pequena na parte superior direita do painel).
Utilizar o material de referncia de linguagens
631
Para colar o cdigo de exemplo em seu documento:

1.
Clique em qualquer local no cdigo de exemplo no contedo de referncia. O Dreamweaver reala o cdigo de exemplo inteiro. Selecione Edit > Copy e, em seguida, cole o cdigo de exemplo no seu documento de visualizao do cdigo.
2.
Para procurar o contedo da referncia:

1.
Para exibir as tags, os objetos ou estilos de um outro livro, escolha outro livro no menu pop-up Book. Para ver informaes sobre um item especfico, selecione o item no menu pop-up Tag, Object, Style ou CFML (dependendo do livro selecionado). Para exibir informaes sobre um atributo do item selecionado, escolha o atributo no menu pop-up ao lado do menu pop-up Tag, Object, Style ou CFML. Esse menu contm a lista de atributos do item selecionado. A seleo padro Description (Descrio), que exibe uma descrio da tag escolhida.
2.
3.
Imprimir o cdigo
possvel imprimir o cdigo para edit-lo off-line, arquiv-lo ou distribu-lo.
Para imprimir o cdigo:
1. 2. 3.
Abra uma pgina na Code view. Selecione File (Arquivo) > Print Code (Imprimir cdigo). Especifique as opes de impresso e depois clique em OK (Windows) ou Print (Imprimir) (Macintosh).
632
CAPTULO 21
Otimizar e depurar o cdigo

possvel usar o Macromedia Dreamweaver 8 para otimizar e depurar cdigos. Por exemplo, voc pode validar tags, tornar o documento compatvel com XHTML ou depurar o cdigo Macromedia ColdFusion. Este captulo aborda os tpicos a seguir:
Limpar o cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .633 Verificar se as tags e as chaves esto ajustadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . .634 Verificar a compatibilidade com navegadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .635 Validar tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .639 Tornar pginas compatveis com XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 640 Usar o depurador ColdFusion (somente no Windows) . . . . . . . . . . . . . . . . . . . . . . . 641
21
Limpar o cdigo
O Dreamweaver pode remover automaticamente as tags vazias, combinar tags font aninhadas e aperfeioar o cdigo HTML ou XHTML ilegvel ou incorreto. Para obter informaes sobre como limpar um documento HTML gerado em Microsoft Word, consulte Abrir documentos existentes na pgina 107.
Para limpar o cdigo:
1.
Abra um documento:
Se o documento estiver em HTML, selecione Commands (Comandos) > Clean Up HTML. Se o documento estiver em XHTML, selecione Commands > Clean Up XHTML (Limpar o XHTML). No caso de um documento XHTML, o comando Clean Up XHTML corrige os erros de sintaxe de XHTML, define a caixa dos atributos de tag como minscula e adiciona ou informa os atributos necessrios que esto faltando em uma tag, alm de executar operaes de limpeza de HTML.
633
2.
Na caixa de dilogo exibida, selecione as opes desejadas. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK. Dependendo do tamanho do documento e do nmero de opes selecionadas, a limpeza poder demorar alguns segundos.
3.
Tpicos relacionados Definir as preferncias de formatao de cdigo na pgina 587
Definir preferncias de codificao por cores na pgina 589
Verificar se as tags e as chaves esto ajustadas

Voc pode verificar se as tags, parnteses (( )), chaves ({ }) e colchetes ([ ]) da pgina esto ajustadas. Ajustado significa que todas as tags, parnteses, chaves ou colchetes de abertura tm um elemento de fechamento correspondente e vice-versa.
Para verificar se as tags esto ajustadas:
1. 2. 3.
Abra o documento na Code view (Visualizao do cdigo). Coloque o ponto de insero no cdigo aninhado a ser verificado. Selecione Edit (Editar) > Select Parent Tag (Selecionar a tag-me). As tags de fechamento correspondentes e os respectivos contedos so selecionados no cdigo. Caso continue selecionando Edit > Select Parent Tag e as suas tags estiverem ajustadas, o Dreamweaver selecionar as tags html e /html mais externas.
Para verificar o ajuste de parnteses, chaves ou colchetes:

1. 2. 3.
Abra o documento na Code view. Coloque o ponto de insero no cdigo a ser verificado. Selecione Edit > Balance Braces (Ajustar as chaves). Todo o cdigo contido entre os parnteses, chaves ou colchetes ser selecionado. Se voc escolher Edit > Balance Braces novamente, todo o cdigo entre parnteses, chaves e colchetes da nova seleo ser selecionado.
634
Captulo 21: Otimizar e depurar o cdigo
Verificar a compatibilidade com navegadores

O Dreamweaver permite criar pginas da Web com elementos (como imagens e texto) aos quais os principais navegadores grficos oferecem suporte, bem como elementos (como estilos CSS) aos quais apenas os navegadores mais recentes oferecem suporte. Determine qual ser o possvel pblico do site e quais navegadores provvel que ele utilize. Se a maioria dos usurios pretende utilizar o Netscape 4 (como ainda ocorre em alguns ambientes de intranet acadmicos, por exemplo), evite utilizar tags s quais esse navegador no oferea suporte. O recurso Check Target Browsers testa o cdigo contido nos documentos para saber se os navegadores de destino oferecem suporte aos atributos, s tags, s propriedades CSS e aos valores CSS. A verificao no altera qualquer aspecto do documento. A verificao dos navegadores de destino fornece informaes sobre trs nveis de possveis problemas: erros, avisos e mensagens informativas. As descries a seguir explicam as diferenas entre esses nveis:
Um erro indica um cdigo que pode causar um srio problema visvel em um determinado navegador, como provocar o desaparecimento de partes de uma pgina. (Em alguns casos, um cdigo de efeito desconhecido tambm classificado como erro.) Um aviso indica que parte de um cdigo no ser exibida corretamente em um determinado navegador, mas que isso no ocasionar nenhum problema srio de exibio. Uma mensagem informativa indica que um determinado navegador no oferece suporte a um cdigo, mas que esse fato no tem efeito visvel; por exemplo: o atributo galleryimg da tag img no recebe suporte de alguns navegadores, mas tais navegadores ignoram esse atributo, e no h nenhum efeito visvel.
Por padro, o Dreamweaver executa automaticamente uma verificao de navegador de destino sempre que voc abre um documento. Voc tambm pode executar manualmente uma verificao do navegador de destino em um documento, em uma pasta ou no site inteiro.
N O TA
A verificao de navegador de destino no atualizada continuamente. Depois de fazer alteraes no cdigo, execute a verificao manual do navegador de destino para confirmar a eliminao do cdigo que no funciona com os navegadores de destino.
635
A verificao de navegador de destino no verifica os scripts do site. Alm disso, essa verificao no funciona como um validador de sintaxe; ela detecta somente o markup ao qual os navegadores de destino no oferecem suporte.
NO TA
O recurso Check Target Browsers usa arquivos de texto denominados perfis de navegador para determinar a quais tags um dado navegador oferece suporte. Para obter informaes sobre como alterar os perfis existentes ou criar novos perfis, consulte o artigo Customizing Dreamweaver em www.macromedia.com/go/ dreamweaver_support.
Para selecionar navegadores que o Dreamweaver verificar:

1.
Selecione Settings (Definies) no menu Browser Target Check na barra de ferramentas Document (Documento). A caixa de dilogo Check Target Browsers ser exibida. Marque a caixa de seleo junto a cada navegador a ser verificado. Para cada navegador escolhido, selecione uma verso mnima para verificao no menu pop-up correspondente. Por exemplo, para verificar se o Microsoft Internet Explorer verso 3.0 ou posterior e o Netscape Navigator verso 4.0 ou posterior oferecem suporte a todo o markup do documento, marque as caixas de seleo ao lado dos nomes desses navegadores e, em seguida, selecione 3.0 no menu pop-up do Microsoft Internet Explorer e 4.0 no menu pop-up do Netscape Navigator.
2. 3.
Para exibir os resultados de uma verificao automtica de navegador de destino, siga um destes procedimentos:
Abra um arquivo e exiba-o em Code view, em View > Code ou View > Code and Design (Cdigo e projeto). Depois de fazer uma alterao em Code view, clique no boto Refresh (Atualizar) no Property inspector (Inspetor de propriedades) ou pressione F5.
Uma linha ondulada vermelha exibida sob o nome de todos os itens que so considerados erros em um dos navegadores de destino. (Avisos e mensagens informativas no so marcados na Code view. Para visualiz-los, preciso visualizar o relatrio completo do documento.) Se o Dreamweaver no localizar um markup sem suporte, nada ser sublinhado, e o cone do menu Target Browser Check, na barra de ferramentas Document, ser alterado para indicar que no h erros.
DICA 636
Para utilizar com facilidade vrios comandos relativos a verificaes de navegador de destino, selecione um comando no menu contextual, clicando com o boto direito do mouse (no Windows), ou pressionando a tecla Control (no Macintosh), e clicando em qualquer item sublinhado em vermelho.
Para ver quais navegadores no oferecem suporte a um item sublinhado em vermelho especfico:
Posicione o ponteiro para indicar o texto sublinhado em vermelho.
exibida uma dica de ferramenta, que indica os navegadores que no oferecem suporte a esse item.
Para exibir o relatrio Check Target Browser do documento inteiro:
No menu Target Browser Check na barra de ferramentas Document, selecione Show All Errors (Mostrar todos os erros).
O grupo de painis Results exibido com o painel Target Browser Check selecionado. Os erros so marcados com um cone em forma de ponto de exclamao vermelho; os avisos, com um ponto de exclamao amarelo; e as mensagens informativas, com um cone em forma de balo de texto.
Para exibir uma mensagem de erro longa no painel Target Browser Check:
1. 2. 3.
Abra o painel Target Browser Check. Selecione uma mensagem de erro que seja muito longa para ser lida no painel. Clique no boto More Info (Mais informaes).
A caixa de dilogo Description (Descrio) exibida com o texto completo da mensagem de erro selecionada.
Para desativar a verificao automtica de navegador de destino:
Desmarque Auto-Check On Open (Verificao automtica ao abrir) no menu Browser Target Check na barra de ferramentas Document.
Para passar para o erro anterior ou seguinte do cdigo:
Selecione Next Error (Prximo erro) ou Previous Error (Erro anterior) no menu Target Browser Check, na barra de ferramentas Document.
Para passar para um erro especfico do painel Target Browser Check:
Clique duas vezes na mensagem de erro.
O markup sem suporte selecionado na Code view.

Para executar uma verificao manual de navegador de destino no arquivo atual:
Selecione File (Arquivo) > Check Page (Verificar pgina) > Check Target Browsers.
O relatrio exibido no painel Target Browser Check, no grupo de painis Results.
637
Para executar uma verificao manual de navegador de destino em um site ou em um conjunto de arquivos selecionados:
1.
Na visualizao local do painel Files (Arquivos), selecione um conjunto de arquivos ou a pasta que contm o site inteiro. Selecione File > Check Page > Check Target Browsers. O relatrio exibido no painel Target Browser Check, no grupo de painis Results. Para cancelar o relatrio durante sua execuo, clique no boto Stop (Parar) no painel Target Browser Check.
2.
3.
Para alternar entre a visualizao do relatrio do documento atual e a visualizao do relatrio completo do site:
No painel Target Browser Check, selecione Current Document (Documento atual) ou Site Report (Relatrio do site) no menu pop-up.
Para salvar um relatrio de verificao de navegador de destino:
Clique no boto Save Report (Salvar relatrio) no painel Target Browser Check.
N OT A
O relatrio de verificao de navegador de destino no salvo automaticamente. Se desejar guardar uma cpia para consulta futura, ser preciso salv-lo.
Para exibir um relatrio de verificao de navegador de destino em um navegador:
Clique no boto Browse Report (Procurar o relatrio) no painel Target Browser Check.
Para corrigir um erro:
Remova o cdigo para o qual no h suporte ou altere-o para um cdigo ao qual os navegadores de destino ofeream suporte.
Para especificar que Dreamweaver deve ignorar um determinado tipo de erro:
Com o boto direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh), clique no cdigo sublinhado em vermelho e selecione Ignore Error (Ignorar erro) no menu de contexto.
Esse tipo de erro alterado para aviso e Dreamweaver no mais sublinhado em nenhum documento.
638
Validar tags
Voc pode utilizar o Dreamweaver para descobrir se seu cdigo contm erros de tag ou sintaxe. O Dreamweaver pode validar documentos em vrias linguagens, inclusive em HTML, XHTML, ColdFusion Markup Language (CFML), JavaServer Pages (JSP), Wireless Markup Language (WML) e XML.
NO T A
Para validar seu documento em relao acessibilidade, consulte Testar o site na pgina 171.
Voc pode validar o documento atual ou uma tag selecionada.

Para validar tags:
1.
Para um arquivo XML (ou XHTML), selecione File > Check Page > Validate as XML (Validar como XML). Caso contrrio, selecione File > Check Page > Validate Markup (Validar o markup).
A guia Validation (Validao) do painel Results exibe a mensagem No errors or warnings (No foram encontrados erros ou avisos) ou lista os erros de sintaxe encontrados.
2. 3.
Clique duas vezes em uma mensagem de erro para realar o erro no documento. Para salvar o relatrio como um arquivo XML, clique no boto Save Report (Salvar o relatrio). Para exibir o relatrio no navegador principal, que permite a impresso desse relatrio, clique no boto Browse Report.
4.
Voc pode definir preferncias para o Validator, como especificar as linguagens baseadas em tags a serem verificadas, os problemas especficos a serem verificados e os tipos de erros a serem relatados. Para obter mais informaes, consulte Definir preferncias do Validator (Validador) na pgina 590. Tpicos relacionados Verificar a compatibilidade com navegadores na pgina 635
Validar tags
639
Tornar pginas compatveis com XHTML

Ao criar uma nova pgina, voc pode torn-la compatvel com XHTML. Tambm possvel tornar um documento HTML existente compatvel com XHTML.
Para criar um novo documento compatvel com XHTML:
1.
Selecione File > New (Novo). A caixa de dilogo New Document (Novo documento) exibida. Selecione a categoria e o tipo de pgina a serem criados. Selecione uma das DTDs de XHTML no menu pop-up Document Type (DTD). Por exemplo, voc pode criar um documento HTML compatvel com XHTML, selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu pop-up.
NO T A
2. 3.
Nem todos os tipos de documento podem ser transformados em documentos compatveis com XHTML.
4.
Clique em OK.
Para criar documentos compatveis com XHTML como padro:

1.
Selecione Edit > Preferences ou Dreamweaver > Preferences (Mac OS X) e escolha a categoria New Document. Na categoria New Document, escolha um documento padro e selecione uma das definies de tipo de documento (DTD) XHTML no menu pop-up Default Document Type (DTD). Por exemplo, voc pode criar um documento HTML compatvel com XHTML, selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu pop-up.
2.
3.
Clique em OK.
Para tornar um documento HTML existente compatvel com XHTML:
Abra um documento e siga um destes procedimentos:
No caso de um documento sem quadros, selecione File > Convert (Converter) e, em seguida, selecione uma das definies de tipo de documento XHTML. Por exemplo, voc pode criar um documento HTML compatvel com XHTML, selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu pop-up.
640
No caso de um documento com quadros, escolha um quadro e selecione File > Convert e, em seguida, selecione uma das definies de tipo de documento XHTML. Para converter todo o documento, repita esta etapa para cada documento com quadro e conjuntos de quadros.
NO T A
impossvel converter uma instncia de um modelo porque ela deve ter sido criada na mesma linguagem que o modelo no qual se baseia. Por exemplo, um documento baseado em um modelo XHTML estar sempre em XHTML, enquanto um documento baseado em um modelo HTML no compatvel com XHTML estar sempre em HTML e no ser possvel convert-lo em XHTML ou outra linguagem.
Tpicos relacionados Sobre o cdigo XHTML gerado pelo Dreamweaver na pgina 606
Usar o depurador ColdFusion (somente no Windows)

Caso seja for um desenvolvedor de ColdFusion que utilize o Macromedia ColdFusion MX como servidor de teste do Dreamweaver, voc poder visualizar informaes de depurao do ColdFusion sem sair do Dreamweaver.
NO T A
Este recurso no conta com suporte no Macintosh. Os programadores de Macintosh podem utilizar o comando Preview in Browser (Visualizar no navegador) (F12) para abrir uma pgina ColdFusion em um navegador distinto. Se a pgina contiver erros, as informaes sobre as possveis causas desses erros sero exibidas na parte inferior da pgina.
Se estiver executando ColdFusion MX 6.1 ou anterior, antes de iniciar o processo de depurao, certifique-se de que as definies de depurao estejam ativadas no ColdFusion Administrator (Administrador de ColdFusion). Para obter mais informaes, consulte a documentao do ColdFusion em Using Dreamweaver (Help (Ajuda) > Using ColdFusion [Usando o Cold Fusion]). Se voc estiver executando o ColdFusion MX 7 ou posterior, o Dreamweaver ativar automaticamente a definio.
Usar o depurador ColdFusion (somente no Windows)
641
Alm disso, certifique-se de que o servidor de teste do Dreamweaver esteja executando ColdFusion. Para obter mais informaes sobre o servidor de teste do Dreamweaver, consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667.
D IC A
Para assegurar que as informaes de depurao sejam atualizadas sempre que uma pgina for exibida no navegador interno, certifique-se de que o Internet Explorer verifica se h verses mais recentes do arquivo sempre que este solicitado. No Internet Explorer, selecione Tools (Ferramentas) > Internet Options (Opes da Internet), escolha a guia General (Geral) e clique no boto Settings na rea Temporary Internet Files (Arquivos de Internet temporrios). Na caixa de dilogo Settings, selecione a opo Every Visit to Page (A cada visita pgina).
Para depurar uma pgina ColdFusion:

1. 2.
Abra a pgina ColdFusion no Dreamweaver. Clique no cone Server Debug (Depurao de servidor) na barra de ferramentas Document. O Dreamweaver solicita a pgina do servidor ColdFusion e a exibe em uma janela interna do Internet Explorer. Se a pgina contiver erros, as possveis causas dos erros sero exibidas na parte inferior da pgina. Ao mesmo tempo, exibido um painel Server Debug. O painel fornece diversas informaes teis, como todas as pginas processadas pelo servidor para interpretar a pgina, todas as consultas SQL executadas na pgina e todas as variveis do servidor e seus respectivos valores, se houver. O painel tambm fornece um resumo das execues.
3.
Se uma categoria Exceptions (Excees) for exibida no painel Server Debug, clique no cone de adio (+) para expandi-la. A categoria Exceptions exibida quando o servidor encontra problemas na pgina. Expanda a categoria para obter mais informaes sobre o problema.
4.
Na coluna Location (Local) do painel Server Debug, clique na URL da pgina para abri-la na Code view e corrigi-la. Se o Dreamweaver localizar a pgina, ela ser aberta com as linhas que indicam problemas realadas. Se o Dreamweaver no conseguir localizar a pgina, ele solicitar a localizao.
5.
Corrija o erro, salve o arquivo no servidor e clique em Browse (Procurar). O Dreamweaver processa a pgina no navegador interno novamente e atualiza o painel Server Debug. Se no houver mais nenhum problema na pgina, a categoria Exceptions no reaparecer no painel.
6.
Para sair do modo de depurao, alterne para a Code view, na opo View > Code) ou para Design view (Visualizao do projeto), na opo View > Design.
642
CAPTULO 22
Editar o cdigo na Design View (Visualizao do projeto)

O Macromedia Dreamweaver 8 permite que voc crie e edite visualmente pginas da Web sem precisar se preocupar com o cdigo-fonte subjacente. No entanto, em alguns casos, talvez seja necessrio editar o cdigo para obter um controle maior ou para solucionar problemas na pgina da Web. O Dreamweaver permite que voc edite alguns cdigos ao trabalhar na visualizao do projeto. Este captulo foi elaborado para pessoas que preferem trabalhar com a Design view, mas que tambm querem ter acesso rpido ao cdigo. O captulo contm os seguinte tpicos:
22
Editar o cdigo com o Property inspector (Inspetor de propriedades) . . . . . . . . 644 Alterar atributos com o Tag inspector (Inspetor de tags) . . . . . . . . . . . . . . . . . . . . 644 Editar o cdigo com o Quick Tag Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .646 Editar cdigo com o seletor de tags. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649 Editar scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650 Trabalhar com incluses do servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .652 Utilizar comportamentos JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .653 Exibir e editar o contedo do cabealho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .654
643
Editar o cdigo com o Property inspector (Inspetor de propriedades)

O Property inspector pode ser utilizado para verificar e editar os atributos de texto ou dos objetos em uma pgina. As propriedades mostradas no Property inspector geralmente correspondem a atributos de tags. A alterao de uma propriedade nesse inspetor normalmente tem o mesmo efeito da alterao do atributo correspondente na Code view (Visualizao do cdigo).
N OT A
O Tag inspector (Inspetor de tags) e o Property inspector permitem exibir e editar os atributos de uma tag. O Tag inspector permite exibir e editar todos os atributos associados a uma tag especfica. O Property inspector mostra apenas os atributos mais comuns, mas fornece um conjunto de controles mais completo para alterar os valores desses atributos e permite editar alguns objetos (como colunas de tabelas) que no correspondem a tags especficas.
Para utilizar o Property inspector:

1.
Clique em um texto ou selecione um objeto na pgina. O Property inspector do texto ou objeto exibido abaixo da janela Document (Documento). Se o Property inspector no estiver visvel, selecione Window (Janela) > Properties (Propriedades).
2.
Modifique os atributos no Property inspector.
Tpicos relacionados Utilizar o Property inspector na pgina 65
Alterar atributos com o Tag inspector (Inspetor de tags)

Voc pode utilizar o Tag inspector para editar tags e objetos em uma folha de propriedades semelhante quelas encontradas em outros IDEs (Integrated Development Environments, Ambientes integrados de desenvolvimento).
N O TA 644
O Tag inspector e o Property inspector permitem exibir e editar os atributos de uma tag. O Tag inspector permite exibir e editar todos os atributos associados a uma tag especfica. O Property inspector mostra apenas os atributos mais comuns, mas fornece um conjunto de controles mais completo para alterar os valores desses atributos e permite editar alguns objetos (como colunas de tabelas) que no correspondem a tags especficas.
Captulo 22: Editar o cdigo na Design View (Visualizao do projeto)
Para editar os atributos utilizando o Tag inspector:

1.
Siga um destes procedimentos na janela Document:
Na Code view (ou no Code inspector), clique em qualquer parte do nome de uma tag ou no seu contedo. Na Design view, selecione um objeto ou uma tag no Tag Selector.
2.
Abra o Tag inspector (Window > Tag Inspector) e selecione a guia Attributes (Atributos). Os atributos da seleo, bem como seus valores atuais, aparecem no Tag inspector. Siga um destes procedimentos no Tag inspector:
3.
Para exibir os atributos organizados por categoria, clique no boto Show Category View (Mostrar visualizao de categoria). Para exibir os atributos em uma lista alfabtica, clique no boto Show List View (Mostrar visualizao de lista). Para alterar o valor de um atributo, selecione o valor e edite-o (consulte o procedimento a seguir). Para adicionar um valor para um atributo sem valor especificado, clique na coluna de valor do atributo direita do atributo e adicione um valor (consulte o procedimento a seguir). Para excluir o valor de um atributo, selecione o valor e pressione Backspace (no Windows) ou Delete (no Macintosh). Para alterar o nome de um atributo, selecione esse nome e edite-o.
N OT A
Se voc alterar o nome de um atributo padro e, em seguida, adicionar um valor para ele, esse atributo e seu novo valor sero movidos para a categoria apropriada.
Para adicionar um novo atributo ainda no listado, clique no espao vazio abaixo do nome do atributo listado por ltimo e digite um novo nome de atributo.
4.
Pressione Enter (no Windows) ou Return (no Macintosh), ou clique em qualquer parte do Tag inspector, para atualizar a tag no documento.
Para editar ou adicionar o valor de um atributo, siga um destes procedimentos:
Digite um novo valor para o atributo na coluna de valor do atributo, direita de seu respectivo nome. Se o atributo assumir valores predefinidos, selecione um valor no menu pop-up (ou no seletor de cores) direita da coluna de valor do atributo. Se o atributo assumir o valor de um URL, clique o boto Browse (Procurar) ou use o cone Point-to-File (Indicador de arquivos) para selecionar um arquivo ou tipo de URL na caixa de texto.
Alterar atributos com o Tag inspector (Inspetor de tags)
645
Se o atributo assumir um valor de uma fonte de contedo dinmico (como um banco de dados), clique no boto Dynamic Data (Dados dinmicos) direita da coluna de valor do atributo. Em seguida, selecione uma fonte. Para obter informaes sobre como definir fontes de contedo dinmico, consulte Definir as fontes de contedo dinmico na pgina 759.
Tpicos relacionados Editar o cdigo com o Property inspector (Inspetor de propriedades) na pgina 644

Utilizar comportamentos JavaScript na pgina 541 Utilizar a opo Cascading Style Sheets (Folha de estilo em cascata) para formatar texto na pgina 433
Editar o cdigo com o Quick Tag Editor

possvel utilizar o Quick Tag Editor para inspecionar e editar tags HTML rapidamente sem sair da Design view. Para abrir o Quick Tag Editor, pressione Control+T (Windows) ou Command+T (Macintosh). Para obter mais informaes, consulte Using Dreamweaver.
Inserir uma tag HTML com o Quick Tag Editor

possvel utilizar o Quick Tag Editor para inserir uma tag HTML no documento.
Para inserir uma tag HTML com o Quick Tag Editor:
1.
No modo de visualizao do projeto, clique na posio na pgina onde deseja inserir o cdigo. Pressione Control+T (Windows) ou Command+T (Macintosh). O Quick Tag Editor aberto no modo Insert HTML (Inserir HTML).
2.
3.
Digite a tag HTML e, em seguida, pressione Enter. A tag inserida no cdigo, com uma tag de finalizao correspondente, se aplicvel. Pressione a tecla Esc para sair sem fazer alteraes.
4.
Tpicos relacionados Aplicar HTML a uma seleo com o Quick Tag Editor na pgina 648
Usar o menu de referncias no Quick Tag Editor na pgina 648
646
Editar 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 Design view. A tag a ser editada tambm pode ser selecionada no Tag Selector, na parte inferior da janela Document . Para obter mais informaes, consulte Editar cdigo com o seletor de tags na pgina 649.
2.
Pressione Control+T (Windows) ou Command+T (Macintosh). O Quick Tag Editor aberto no modo Edit Tag. Digite novos atributos ou edite atributos j existentes ou o nome da tag. Pressione a tecla Tab para avanar de um atributo ao outro e pressione Shift+Tab para voltar. Por padro, as alteraes so aplicadas ao documento pressionando-se Tab ou Shift+Tab. Para desativar as atualizaes automticas, selecione Edit > Preferences > Quick Tag Editor ou Dreamweaver > Preferences > Quick Tag Editor (Mac OS X). A caixa de dilogo Quick Tag Editor Preferences (Preferncias do Quick Tag Editor) exibida. Desmarque a opo Apply Changes Immediately While Editing (Aplicar as modificaes durante a edio) e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
3. 4.
5. 6.
Para fechar o Quick Tag Editor e aplicar todas as alteraes, pressione Enter. Para sair sem efetuar nenhuma alterao, pressione a tecla Esc.
Tpicos relacionados Inserir uma tag HTML com o Quick Tag Editor na pgina 646
Usar o menu de referncias no Quick Tag Editor na pgina 648
Editar o cdigo com o Quick Tag Editor
647
Aplicar HTML a uma seleo com o Quick Tag Editor

Voc pode utilizar o Quick Tag Editor para colocar a seleo atual entre as tags HTML de abertura e de fechamento.
Como aplicar HTML a uma seleo com o Quick Tag Editor:
1.
Selecione um texto ou objeto no formatado, na Design view.

N OT A
Se voc selecionar um texto ou objeto que contenha uma tag HTML de abertura ou finalizao, o Quick Tag Editor ser aberto no modo Edit Tag, e no no modo Wrap Tag (Colocar tag ao redor).
2.
Pressione as teclas Control e T (no Windows), ou Command e T (no Macintosh), ou clique no boto Quick Tag Editor no Property inspector. O Quick Tag Editor aberto no modo Wrap Tag. Digite uma nica tag de abertura, como strong, e pressione Enter (no Windows) ou Return (no Macintosh). A tag inserida no incio da seleo e a tag de finalizao correspondente colocada no final.
3.
4.
Para sair sem fazer alteraes, em vez de pressionar Enter, pressione Esc.
Usar o menu de referncias no Quick Tag Editor

No Quick Tag Editor, possvel acessar um menu de referncias de atributos que lista todos os atributos vlidos da tag que est sendo editada ou inserida. possvel desativar o menu de referncias ou ajustar o intervalo entre as exibies do menu pop-up com o Quick Tag Editor. Para ver um menu de referncias com a lista dos atributos vlidos para uma tag, faa uma breve pausa ao editar o nome de um atributo no Quick Tag Editor. exibido um menu de referncias com a lista de todos os atributos vlidos para a tag que est sendo editada. Da mesma forma, para ver um menu de referncias com uma lista de nomes de tags vlidas, faa uma breve pausa ao digitar ou editar o nome de uma tag no Quick Tag Editor.
N OT A 648
As preferncias das referncias de cdigo do Quick Tag Editor so controladas pelas preferncias de referncias de cdigo normais. Para obter mais informaes, consulte Definir as preferncias de referncias de cdigo na pgina 588.
Para utilizar um menu de referncias:

1.
Comece a digitar o nome de um atributo ou de uma tag. A seleo no menu Code Hints (Referncias de cdigo) passa para o primeiro item que comea com as letras digitadas. Utilize as setas para cima e para baixo para selecionar um item. Utilize a barra de rolagem para localizar um item.
2. 3.
Pressione Enter para inserir o item selecionado ou clique duas vezes no item para inseri-lo. Para desativar as referncias sem inserir um item, pressione Esc ou continue a digitar.
Para desativar o menu de referncias ou alterar o intervalo de exibio:

1.
Selecione Edit > Preferences (Windows) ou Dreamweaver > Preferences (Macintosh) e escolha Quick Tag Editor. A caixa de dilogo Quick Tag Editor Preferences (Preferncias do Quick Tag Editor) exibida.
2.
Para desativar o menu de referncias, desmarque a opo Enable Tag Hints (Ativar a referncia de tags). Para alterar o intervalo entre as exibies do menu, ajuste o boto deslizante Delay (Atraso). Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
3.
4.
Tpicos relacionados Editar uma tag HTML com o Quick Tag Editor na pgina 647
Editar cdigo com o seletor de tags

Utilize o seletor de tags para selecionar, editar ou remover tags sem sair da Design view . O Tag Selector est localizado na barra de status, na parte inferior da janela Document, e mostra uma srie de tags, da forma descrita a seguir.
Para editar um tag:

1.
Clique no documento. As tags aplicveis ao ponto de insero aparecem no Tag Selector.
Editar cdigo com o seletor de tags
649
2.
Clique com o boto direito do mouse (no Windows) ou com a tecla Control pressionada (no Macintosh) em uma tag no Tag Selector. O menu pop-up exibido. Selecione Edit Tag no menu.
3.
O Quick Tag Editor aberto. Para obter mais informaes, consulte Editar uma tag HTML com o Quick Tag Editor na pgina 647.
Para remover uma tag:
1.
Clique no documento. As tags aplicveis ao ponto de insero aparecem no Tag Selector. Clique com o boto direito do mouse (no Windows) ou com a tecla Control pressionada (no Macintosh) em uma tag no Tag Selector. O menu pop-up exibido. Selecione Remove Tag (Remover a tag) no menu.
2.
3.
Para selecionar um objeto que corresponda a uma tag:

1.
Clique no documento. As tags aplicveis ao ponto de insero aparecem no Tag Selector. Clique em uma tag no Tag selector.
2.
O objeto representado pela tag selecionado na pgina.

DICA 650
Utilize esta tcnica para selecionar linhas de tabelas (tags tr) ou clulas (tags td) separadamente.
Editar scripts
possvel trabalhar com JavaScripts e VBScripts no cliente, tanto na Code view quanto na Design view.
Escrever um script do cliente na Design view

possvel escrever um JavaScript ou VBScript na pgina sem sair da Design view. Antes de comear, selecione View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis) para certificar-se de que os marcadores de script sejam exibidos na pgina.
Para inserir um script do cliente na Design view:

1. 2.
Posicione o ponto de insero onde o script deve ser inserido. Selecione Insert (Inserir) > Script Objects (Objetos de script) > Script. A caixa de dilogo Script ser exibida. Preencha a caixa de dilogo e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
3.
Vincular a um arquivo de script externo

possvel criar um link do documento para um arquivo de script externo sem sair da Design view. Antes de comear, selecione View > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis) para se certificar de que os marcadores de script sejam exibidos na pgina.
Para vincular a um arquivo de script externo:
1. 2.
Posicione o ponto de insero onde o script deve ser inserido. Selecione Insert > Script Objects > Script. A caixa de dilogo Script ser exibida. Clique em OK e deixe em branco a caixa de texto Content (Contedo). Selecione o marcador de script na Design view da janela Document. No Property inspector, clique no cone de pasta para procurar e selecionar o arquivo de script externo ou digite o nome do arquivo na caixa Source (Origem).
3. 4. 5.
Editar um script na Design view

possvel editar um script sem sair da Design view. Antes de comear, selecione View > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis) para certificar-se de que os marcadores de script sejam exibidos na pgina.
Para editar o script na Design view:
1. 2.
Selecionar o marcador de script. No Property inspector, clique no boto Edit (Editar). O script aparecer na caixa de dilogo Script Properties (Propriedades do script).
Editar scripts
651
Se o script estiver vinculado a um arquivo de script externo, o arquivo ser aberto automaticamente na Code view, onde voc poder edit-lo.
N OT A
Se no houver um cdigo entre as tags de script, a caixa de dilogo Script Properties ser aberta, mesmo se houver tambm um link para um arquivo de script externo.
3.
Edite o script e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
Trabalhar com incluses do servidor

As incluses do servidor so instrues dadas ao servidor da Web para adicionar um arquivo especificado em uma pgina da Web antes de envi-la ao navegador. Para obter mais informaes, consulte Incluses do servidor na pgina 608. possvel usar o Dreamweaver para inserir incluses do servidor em pginas, editar as incluses ou visualizar as pginas que contm incluses.
Inserir uma incluso do servidor

Voc pode utilizar o Dreamweaver para inserir incluses do servidor em sua pgina.
Para inserir uma incluso de servidor:
1. 2.
Selecione Insert > Server-Side Include (Inserir Incluso no Servidor). Na caixa de dilogo que aparecer, procure e selecione um arquivo. Por padro, o Dreamweaver insere o tipo de arquivo de incluso. Para alterar o tipo de incluso, selecione a incluso do servidor na janela do documento e altere o tipo no Property inspector (Window > Properties), da seguinte maneira:
3.
No caso de um servidor Web Apache, selecione Virtual. No Apache, a opo Virtual funciona em todos os casos, enquanto File funciona em apenas alguns. No caso de um servidor Microsoft Internet Information Server (IIS), selecione File. (Virtual funciona com o IIS somente em circunstncias especficas.)
NO T A
Infelizmente, o IIS no permite que se inclua um arquivo numa pasta acima da pasta atual na hierarquia de pastas, a no ser que algum software especial tenha sido instalado no servidor. Se necessitar incluir um arquivo de uma pasta acima na hierarquia de pastas de um servidor IIS, pergunte ao administrador do sistema se o software necessrio est instalado.
652
Para outros tipos de servidores, ou caso voc desconhea o tipo de servidor que estiver utilizando, pergunte ao administrador do sistema qual opo dever ser utilizada.
Para alterar o arquivo que ser includo:

1. 2. 3.
Selecione a incluso do servidor na janela Document. Abra o Property inspector, em Window (Janela) > Properties (Propriedades). Siga um dos procedimentos abaixo:
Clique no cone correspondente pasta, procure e selecione um novo arquivo para incluir. Na caixa de texto, digite o caminho e o nome do novo arquivo a ser includo.
Tpicos relacionados Incluses do servidor na pgina 608
Editar o contedo de uma incluso do servidor

Voc pode utilizar o Dreamweaver para editar incluses do servidor. Para editar o contedo associado a este arquivo includo, abra o arquivo.
Para editar uma incluso do servidor:
1.
Selecione a incluso do servidor na Design view ou na Code view e clique em Edit no Property inspector . O arquivo includo ser aberto na janela Document. Edite o arquivo e salve-o em seguida. As alteraes sero transferidas imediatamente para o documento atual e em qualquer documento subseqente que for aberto e contenha esse arquivo.
2.
3.
Efetue o upload do arquivo de incluso para o site remoto, caso necessrio.
Tpicos relacionados Incluses do servidor na pgina 608

A guia Behaviors (Comportamentos) do Tag inspector permite anexar, com facilidade, comportamentos JavaScript (do cliente) a elementos de pgina. Para obter mais informaes, consulte Utilizar as aes de comportamentos enviadas com o Dreamweaver na pgina 549.
653
Exibir e editar o contedo do cabealho

Voc pode exibir os elementos na seo head de um documento utilizando o menu View, a Code view da janela Document ou o Code inspector.
Para exibir os elementos da seo head de um documento:
Selecione View > Head Content (Contedo do cabealho). Para cada elemento do contedo do head, exibido um marcador na parte superior da janela Document na Design view.
NO TA
Se a janela do documento estiver definida somente para a visualizao do cdigo, a opo View > Head Content estar desativada.
Para inserir um elemento na seo head de um documento:

1.

Na categoria Head da barra Insert (Inserir), clique no boto de um dos objetos. Selecione um item no submenu Insert > Head Tags (Tags do cabealho).
2.
Insira as opes para o elemento na caixa de dilogo exibida ou no Property inspector.
Para editar um elemento na seo head de um documento:

1. 2. 3.
Selecione View > Head Content. Clique em um dos cones na seo head para selecion-lo. Defina ou modifique as propriedades do elemento no Property inspector.
Para obter informaes sobre as propriedades de elementos head especficos, consulte Using Dreamweaver.
654
PARTE 6
Preparar para a criao de sites dinmicos

Se voc estiver construindo um aplicativo dinmico para a Web, comece configurando um servidor de aplicativos e conectando-se a um banco de dados. Esta seo contm os seguintes captulos:
Captulo 23: Configurar um aplicativo para a Web . . . . . . . . . . . 657 Captulo 24: Conexes de banco de dados para desenvolvedores ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 669 Captulo 25: Conexes de banco de dados para desenvolvedores de ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673 Captulo 26: Conexes de banco de dados para desenvolvedores de ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681 Captulo 27: Conexes de banco de dados para desenvolvedores JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695 Captulo 28: Conexes de banco de dados para desenvolvedores PHP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705 Captulo 29: Solucionar problemas de conexes de banco de dados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 709
655
CAPTULO 23
Configurar um aplicativo para a Web

Este captulo descreve como configurar o sistema para criar aplicativos para a Web no Macromedia Dreamweaver 8.
23
O que necessrio para criar aplicativos para a Web

Para criar aplicativos para a Web no Dreamweaver, necessrio o software a seguir:

Um servidor da Web (consulte Configurar um servidor da Web na pgina 658) Um servidor de aplicativos que execute o servidor da Web (consulte Configurar um servidor de aplicativos na pgina 659)
NO T A
No contexto de aplicativos para a Web, os termos se referem servidor da Web e servidor de aplicativos ao software, e no ao hardware.
Se desejar utilizar um banco de dados com o aplicativo, necessrio o software adicional a seguir:

Um sistema de banco de dados Um driver de banco de dados que oferea suporte ao banco de dados
Para obter informaes sobre como configurar um banco de dados para o aplicativo para a Web, consulte Efetuar a conexo com um banco de dados na pgina 668. Diversas empresas de hospedagem na Web oferecem planos que permitem utilizar o software que elas possuem para testar e implementar aplicativos para a Web. Em algumas situaes, possvel instalar o software necessrio no mesmo computador que o Dreamweaver, para fins de desenvolvimento. Tambm possvel instalar o software em um computador de rede (normalmente, um computador com o Windows 2000 ou XP) para que outros desenvolvedores da equipe possam trabalhar em um projeto.
657
Configurar um servidor da Web

Para executar aplicativos para a Web, necessrio um servidor da Web. Um servidor da Web um software que fornece arquivos em resposta a solicitaes de navegadores da Web. O servidor da Web chamado, algumas vezes, de servidor HTTP. Os servidores da Web mais conhecidos so: Microsoft Internet Information Server (IIS), Netscape Enterprise Server, Sun ONE Web Server e Apache HTTP Server. Se no estiver usando um servio de hospedagem na Web, escolha um servidor da Web e o instale no computador local ou em um computador remoto. Os usurios do Windows que desejarem desenvolver aplicativos ColdFusion para a Web podero utilizar o servidor da Web includo na edio do desenvolvedor do servidor de aplicativos ColdFusion MX 7, que pode ser instalado e utilizado gratuitamente. Para obter mais informaes, consulte Instalar um servidor de aplicativos ColdFusion na pgina 660. Os outros usurios do Windows podem instalar o IIS para executar um servidor da Web no computador local. possvel que esse servidor da Web j esteja instalado em seu sistema. Verifique a estrutura de pastas para saber se contm uma pasta C:\Inetpub ou D:\Inetpub. O IIS cria essa pasta durante a instalao. Para instalar o IIS, consulte Installing a Web Server em Getting Started with Dreamweaver (Guia de introduo do Dreamweaver). As pginas ASP.NET funcionam apenas com um nico servidor da Web: Microsoft IIS 5 ou superior. Como o IIS 5 um servio dos sistemas operacionais Windows 2000 e Windows XP Professional, voc s poder utilizar essas duas verses do Windows para hospedar aplicativos ASP.NET. No entanto, voc poder desenvolver (em vez de hospedar) aplicativos ASP.NET em qualquer computador que execute o Dreamweaver, inclusive em computadores Macintosh. Os usurios do Macintosh podem utilizar um servio de hospedagem na Web ou instalar o software necessrio em um computador remoto. Voc tambm pode desenvolver sites PHP localmente utilizando o servidor da Web Apache e o servidor de aplicativos PHP instalados com o sistema operacional. Para obter mais informaes, consulte Instalar um servidor de aplicativos PHP na pgina 662. Para obter informaes sobre como instalar e configurar outros servidores da Web, consulte a documentao do revendedor do servidor ou o administrador do sistema.
658
Captulo 23: Configurar um aplicativo para a Web
Configurar um servidor de aplicativos

Para executar aplicativos para a Web, necessrio que o servidor da Web trabalhe com um servidor de aplicativos. Servidor de aplicativos um software que ajuda o servidor da Web a processar pginas dinmicas.
Escolher o servidor de aplicativos

A escolha do servidor de aplicativos depende de diversos fatores, como o oramento, a tecnologia de servidor que se deseja utilizar (ColdFusion, ASP.NET, ASP, JSP ou PHP) e o servidor da Web escolhido.
Oramento
Alguns fornecedores comercializam servidores de aplicativos de alto desempenho, que so dispendiosos em termos de aquisio e de administrao. Outros fornecedores oferecem solues mais simples, eficientes e econmicas (os exemplos incluem servidores Macromedia ColdFusion e JRun). Alguns servidores de aplicativos so integrados a servidores da Web (como o Microsoft IIS); tambm possvel efetuar o download de outros servidores gratuitamente pela Internet (como o Jakarta Tomcat e o PHP).
Tecnologia do servidor
Os servidores de aplicativos utilizam tecnologias diferentes. O Dreamweaver oferece suporte a cinco tecnologias de servidor: ColdFusion, ASP.NET, ASP, JSP e PHP. Para obter mais informaes, consulte Choosing a server technology em Getting Started with Dreamweaver. A tabela abaixo mostra servidores de aplicativos conhecidos disponveis para as cinco tecnologias de servidor que contam com suporte do Dreamweaver:
Tecnologia de servidor
ColdFusion ASP.NET ASP JSP
Servidor de aplicativos
Macromedia ColdFusion MX 7 Microsoft IIS 6 com .NET Framework Microsoft IIS Sun ONE Active Server Pages Macromedia JRun Sun ONE Application Server IBM WebSphere Apache Tomcat BEA WebLogic Servidor PHP
PHP
Servidor da Web A escolha do servidor de aplicativos tambm pode depender do servidor da Web que 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.
659
Instalar um servidor de aplicativos ColdFusion

Para executar pginas ColdFusion, necessrio utilizar o servidor de aplicativos ColdFusion. Esse servidor est disponvel para sistemas Windows, Linux, Solaris e HP-UX. Os usurios do Windows podem efetuar o download e instalar uma edio do ColdFusion MX 7 para desenvolvedores, com funcionalidade integral, no site da Macromedia, em www.macromedia.com/go/coldfusion/. Uma cpia do ColdFusion MX 7 Developer Edition tambm est disponvel no CD do Dreamweaver (somente na verso para Windows).
NO TA

A Developer Edition (Edio para programadores) no se destina ao uso comercial, mas sim a desenvolvimento e testes de aplicativos para a Web. No licenciada para implantao. Ele oferece suporte a solicitaes do host local e dois endereos IP remotos. Voc pode us-lo para desenvolver e testar seus aplicativos para Web pelo tempo que desejar; o software no expira. Para obter mais informaes, consulte ColdFusion MX 7 product editions em Using ColdFusion (Help [Ajuda] > Using ColdFusion [Usando o ColdFusion]).
Durante a instalao, voc pode configurar o ColdFusion para utilizar o servidor da Web integrado ao ColdFusion ou outro servidor da Web instalado no sistema. Em geral, o ideal ter o mximo de integrao possvel entre os ambientes de desenvolvimento e de produo. Portanto, se voc tiver um servidor da Web, como o Microsoft IIS, no seu computador de desenvolvimento, poder selecion-lo, em vez do servidor da Web ColdFusion. Os usurios do Macintosh podem utilizar um servio de hospedagem na Web que oferea um plano do ColdFusion ou instalar o ColdFusion em um computador remoto com o Windows, Linux, Solaris ou HP-UX executando um servidor da Web. Tambm possvel instalar o ColdFusion em um computador Mac OS X, executando um servidor J2EE, como o JRun ou o Tomcat. Para obter mais informaes, consulte o site da Macromedia na Web em www.macromedia.com/go/cfmx7_mac. Depois de instalar o servidor de aplicativos, criar uma pasta raiz para o aplicativo para a Web. Consulte Criar uma pasta raiz para o aplicativo na pgina 663.
Instalar um servidor de aplicativos ASP.NET

Para desenvolver e executar pginas ASP.NET, necessrio o seguinte software: Um computador com o Windows 2000 ou Windows XP Professional executando o IIS 5 ou mais avanado O Microsoft .NET Framework 1.1, que pode ser adquirido no site da Microsoft O Microsoft .NET Framework 1.1 e o Software Development Kit (SDK), que podem ser adquiridos no site da Microsoft
660
Certifique-se de que tanto o Framework como o SDK estejam instalados e em funcionamento em um sistema Windows 2000 ou Windows XP Professional que execute IIS 5 ou superior
Para instalar o .NET Framework e o SDK:
1.
Verifique se o .NET Framework est instalado em seu sistema, revendo a lista de aplicativos na caixa de dilogo Adicionar ou Remover Programas (Iniciar > Painel de Controle > Adicionar ou Remover Programas). Se o Microsoft .NET Framework 1.1 estiver na lista, o Framework j est instalado e no ser preciso instal-lo novamente. V para a etapa 3.
2.
Se o .NET Framework no estiver instalado no sistema, faa o download do pacote Microsoft .NET Framework 1.1 Redistributable no site da Microsoft, em http:// msdn.microsoft.com/netframework/downloads/framework1_1/, e siga as instrues de instalao ali fornecidas. Voc instala o Framework como uma atualizao do Windows. Faa o download do Microsoft .NET Framework 1.1 e do Software Development Kit (SDK) no mesmo site da Web e siga as instrues de instalao.
3.
Aps a instalao do .NET Framework e do SDK, altamente recomendvel instalar tambm o pacote Microsoft Data Access Components (MDAC) 2.7 e do SDK. possvel fazer gratuitamente o download e a instalao do MDAC 2.7 no site da Microsoft, em http:// msdn.microsoft.com/data/mdac/downloads/. Os usurios do Macintosh podem utilizar um servio de hospedagem na Web que oferea um plano para ASP.NET ou podem instalar o .NET Framework e o SDK em um computador remoto Windows 2000 ou Windows XP Professional que execute o IIS 5 ou uma verso posterior. Uma vez instalado o .NET Framework e o SDK, crie uma pasta raiz para seu aplicativo para Web. Consulte Criar uma pasta raiz para o aplicativo na pgina 663.
Instalar um servidor de aplicativos ASP

Para executar as pginas ASP, voc precisa de um servidor de aplicativos que oferea suporte ao Microsoft Active Server Pages 2.0., como o Microsoft IIS, que est includo no pacote do Windows 2000 e do Windows XP Professional. Os usurios do Windows podem instalar e executar o IIS nos seus computadores locais. Para obter instrues, consulte Installing a Web Server em Getting Started with Dreamweaver. Os usurios do Macintosh podem utilizar um servio de hospedagem na Web, que oferea um plano para ASP, ou podem instalar o IIS em um computador remoto.
661
Uma vez instalado o IIS, crie uma pasta raiz para seu aplicativo para Web. Consulte Criar uma pasta raiz para o aplicativo na pgina 663.
Instalar um servidor de aplicativos JSP

Para executar pginas JSP, necessrio um servidor de aplicativos que oferea suporte a JavaServer Pages. Estas so algumas das opes conhecidas:
Macromedia JRun for Windows, Mac OS X, Linux, Solaris, ou UNIX. Voc pode efetuar o download de uma verso de teste do JRun a partir do site da Macromedia na Web em www.macromedia.com/go/jrun/. Tomcat for Windows e UNIX (inclusive para Mac OS X). Voc pode efetuar o download de uma cpia do Tomcat a partir do site do Projeto Jakarta na Web em http:// jakarta.apache.org/tomcat/. Para obter mais informaes sobre a instalao do Tomcat no Macintosh, consulte o site da Apple na Web em http://developer.apple.com/internet/java/ tomcat1.html.
Depois de instalar um servidor de aplicativos JSP, crie uma pasta raiz para o aplicativo para a Web. Consulte Criar uma pasta raiz para o aplicativo na pgina 663.
Instalar um servidor de aplicativos PHP

Para executar pginas PHP, necessrio o servidor de aplicativos PHP, que um software de cdigo-fonte aberto disponvel na Web. H edies do servidor de aplicativos disponveis 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, Netscape e Sun ONE, bem como quase todos os servidores da Web que oferecem suporte interface CGI. Voc pode efetuar o download do servidor de aplicativos PHP a partir do site da PHP na Web em www.php.net/downloads.php. No PHP 5, a extenso MySQL que permite ao PHP funcionar com um servidor de banco de dados MySQL no estar instalada ou no ser ativada por padro pelo Windows Installer. Voc precisa instal-la e ativ-la parte. Para obter instrues, consulte Installing a PHP application server (Windows) em Getting Started with Dreamweaver. Para obter mais informaes sobre a extenso MySQL, consulte o site do PHP em www.php.net/manual/en/ref.mysql.php. Se for usurio do Macintosh, voc poder utilizar o servidor de aplicativos PHP instalado com o sistema operacional. Para obter mais informaes, visite os seguintes sites da Web:

www.macromedia.com/go/php_macintosh/ http://developer.apple.com/internet/opensource/php.html
662
Para obter mais informaes sobre o servidor de aplicativos, consulte a documentao do PHP, cujo download pode ser efetuado no site da PHP, em www.php.net/download-docs.php. Depois de instalar o servidor de aplicativos PHP, crie uma pasta raiz para o aplicativo para a Web.
Criar uma pasta raiz para o aplicativo

Aps contratar uma empresa de hospedagem na Web ou de configurar voc prprio o software do servidor, crie uma pasta raiz para seu aplicativo da 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 solicitao HTTP feita por um navegador da Web. Por exemplo, em um computador que execute o ColdFusion MX 7, qualquer arquivo existente na pasta \CFusionMX7\wwwroot ou em uma de suas subpastas poder ser fornecido para um navegador da Web. Estas so as pastas raiz padro de alguns servidores da Web:
Servidor da Web
ColdFusion MX 7 IIS Apache (Windows) Apache (Macintosh) Jakarta Tomcat (Windows)
Pasta raiz padro

\CFusionMX7\wwwroot \Inetpub\wwwroot \apache\htdocs Users:MyUserName:Sites \jakarta-tomcat-4.x.x\webapps\ROOT\
Para testar o servidor da Web, coloque uma pgina HTML de teste na pasta raiz padro e tente abri-la digitando a URL da pgina no navegador. A URL contm o nome do domnio, como www.mysite.com, e o nome do arquivo da pgina HTML como a seguir: www.mysite.com/testpage.htm
Criar uma pasta raiz para o aplicativo
663
Se o servidor da Web estiver em execuo no computador local, voc poder utilizar localhost, em vez de um nome de domnio. Utilizando o exemplo anterior, digite a seguinte URL de host local, dependendo do seu servidor da Web:
Servidor da Web
ColdFusion MX 7 IIS Apache (Windows) Apache (Macintosh)
URL localhost
http://localhost:8500/testpage.htm http://localhost/testpage.htm http://localhost:80/testpage.htm http://localhost/~MyUserName/testpage.htm (onde MyUserName corresponde ao seu nome de usurio Macintosh) http://localhost:8080/testpage.htm
Jakarta Tomcat (Windows)

NO TA

Por padro, o servidor da Web do ColdFusion MX 7 executado na porta 8500, e o Jakarta Tomcat executado na porta 8080.
Se a pgina no abrir como esperado, verifique estes possveis erros: O servidor da Web no iniciado. Consulte a documentao do servidor da Web para obter instrues de inicializao. O arquivo no tem uma extenso .htm ou .html. Voc digitou o caminho do arquivo da pgina (por exemplo, c:\CFusionMX7\wwwroot\testpage.htm), mas no a sua URL (por exemplo, http:// localhost:8500/testpage.htm), na caixa de texto de endereo do navegador. A URL contm um erro de digitao. Verifique se h erros e certifique-se de que o nome de arquivo no venha acompanhado de uma barra invertida, como http://localhost:8080/ testpage.htm/.
Depois de criar uma pasta raiz para o aplicativo, defina um site do Dreamweaver para gerenciar seus arquivos.
664
Definir um site do Dreamweaver

Aps configurar seu sistema para desenvolver aplicativos para Web, defina um site do Dreamweaver para gerenciar os arquivos. Antes de comear, 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. Consulte Configurar um servidor da Web na pgina 658. Um servidor de aplicativos est instalado e em execuo no sistema com o servidor da Web. Consulte Configurar um servidor de aplicativos na pgina 659. Foi criada uma pasta raiz para o aplicativo para a Web no sistema onde est sendo executado o servidor da Web. Para obter mais informaes, consulte Criar uma pasta raiz para o aplicativo na pgina 663.
O processo de definio de um site do Dreamweaver para o aplicativo para a Web consiste em trs etapas:
1.
Definir uma pasta do disco rgido como a pasta local que o Dreamweaver utilizar para armazenar cpias de trabalho dos arquivos do site (consulte Definir uma pasta local na pgina 665). Definir uma pasta do computador que est executando o servidor da Web como a pasta remota do Dreamweaver (consulte Definir uma pasta remota na pgina 666). Especificar para onde o Dreamweaver deve enviar pginas dinmicas a serem processadas enquanto o usurio trabalha (consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667).
2.
3.
Depois de definir o site do Dreamweaver, possvel comear a criar aplicativos para a Web.
Definir uma pasta local

possvel definir uma pasta local do Dreamweaver para cada novo aplicativo para a Web que for criado. A pasta local a pasta usada para armazenar cpias de trabalho dos arquivos do site no disco rgido. A definio de uma pasta local tambm permite gerenciar os arquivos e transferi-los de/para o servidor da Web com o simples clicar de um boto.
Para definir uma pasta local do Dreamweaver:
1.
Crie uma pasta no disco local para armazenar cpias de trabalho dos arquivos. Talvez seja conveniente criar subpastas para armazenar os arquivos de imagens e outras propriedades.
665
2.
No Dreamweaver selecione Site > Manage Sites (Gerenciar sites), clique no boto New (Novo) na caixa de dilogo Manage sites e selecione Site no menu contextual. A caixa de dilogo Site Definition (Definio do site) exibida. Se o assistente for exibido, clique em Advanced (Avanado) e selecione Local Info (Informaes locais) na lista Category (Categoria) (este deve ser o padro). Na caixa Site Name (Nome do site), digite um nome descritivo para o site do Dreamweaver. Na caixa Local Root Folder (Pasta raiz local), especifique a pasta criada na Etapa 1. possvel digitar um caminho ou clicar no cone da pasta para procur-la e selecion-la. Se desejar, preencha as outras opes da categoria Local Info (elas no so necessrias para que o site funcione). Para obter mais informaes sobre essas opes, clique no boto Help na caixa de dilogo.
3.
4.
5.
6.
A caixa de dilogo Site Definition deve ficar aberta. Em seguida, especifique uma pasta remota.
Definir uma pasta remota

Aps definir uma pasta local, possvel definir uma pasta remota para o site do Dreamweaver. A pasta remota aquela criada para o aplicativo para a Web no servidor da Web (consulte Criar uma pasta raiz para o aplicativo na pgina 663). No ser preciso definir uma pasta remota se a pasta definida em Definir uma pasta local na pgina 665 puder funcionar tambm como a pasta raiz do aplicativo para a Web. Isso indica que o servidor da Web est em execuo no computador local.
Para definir uma pasta remota do Dreamweaver:
1.
Se a caixa de dilogo Site Definition no estiver aberta, abra-a da seguinte maneria: selecione Site > Manage Sites (Gerenciar sites), depois selecione o site na lista que aparece na caixa de dilogo Manage Sites e, finalmente, clique em Edit (Editar). A caixa de dilogo Site Definition exibida. Se o assistente for exibido, clique em Advanced e selecione Remote Info (Informaes remotas) na lista Category. A caixa de dilogo Remote Info exibida.
2.
666
3.
No menu pop-up Access (Acesso), selecione uma das seguintes opes: Local/Network (Local/Rede), FTP ou RDS. As opes configuradas dizem ao Dreamweaver como o usurio deseja transferir os arquivos entre a pasta local e a pasta remota.
NO TA
Para utilizar RDS, a pasta remota deve estar no computador com o ColdFusion.
Os arquivos tambm podem ser enviados para o aplicativo Microsoft Visual SourceSafe. Para isso, selecione Microsoft Visual SourceSafe. (O Microsoft Visual SourceSafe utilizado pelos programadores para controlar a verso dos arquivos.) Se voc selecionar essa opo, precisar definir uma pasta separada. Para obter instrues, consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667.
4.
Aps escolher um mtodo de acesso, defina opes de acesso conforme apropriado. Para obter mais informaes sobre essas opes, clique no boto Help na caixa de dilogo.
A caixa de dilogo Site Definition deve ficar aberta. Em seguida, defina uma pasta para processar pginas dinmicas.
Especificar onde as pginas dinmicas podem ser processadas

Aps definir a pasta remota no Dreamweaver, especifique uma pasta onde as pginas dinmicas possam ser processadas. O Dreamweaver usa essa pasta para gerar contedo dinmico e para se conectar a bancos de dados enquanto o usurio trabalha. Geralmente, o usurio especifica a pasta raiz que criou no servidor da Web (consulte Criar uma pasta raiz para o aplicativo na pgina 663) porque o servidor provavelmente tambm executa um servidor de aplicativos capaz de tratar de pginas dinmicas.
N OT A
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 pginas dinmicas:

1.
Se a caixa de dilogo Site Definition no estiver aberta, abra-a da seguinte maneira: selecione Site > Manage Sites (Gerenciar sites), depois selecione o site na lista que aparece na caixa de dilogo Manage Sites e, finalmente, clique em Edit (Editar). A caixa de dilogo Site Definition exibida.
667
2.
Se o assistente for exibido, clique em Advanced e selecione Testing Server (Servidor de teste) na lista Category (Categoria). A caixa de dilogo Testing Server exibida. O Dreamweaver precisa dos servios de um servidor de teste para gerar e exibir o contedo dinmico enquanto o usurio trabalha. O servidor de teste pode ser o computador local, um servidor de desenvolvimento, de testes ou de produo. Contanto que o servidor possa processar os tipos de pginas dinmicas a serem desenvolvidas, a escolha no far diferena.
3.
Preencha a caixa de dilogo e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
Depois de definir um site do Dreamweaver, voc poder se conectar a um banco de dados.
Efetuar a conexo com um banco de dados

Se desejar utilizar um banco de dados com o aplicativo para a Web, ser necessrio antes se conectar a ele. Para ler uma discusso geral sobre conexes de banco de dados, consulte Conexes de bancos de dados na pgina 1094. O Dreamweaver trata as conexes de banco de dados de modo distinto, dependendo da tecnologia de servidor escolhida. Consulte os captulos a seguir:
Captulo 24, Conexes de banco de dados para desenvolvedores ColdFusion, na pgina 669 Captulo 25, Conexes de banco de dados para desenvolvedores de ASP.NET, na pgina 673 Captulo 26, Conexes de banco de dados para desenvolvedores de ASP, na pgina 681 Captulo 27, Conexes de banco de dados para desenvolvedores JSP, na pgina 695 Captulo 28, Conexes de banco de dados para desenvolvedores PHP, na pgina 705
668
CAPTULO 24
Conexes de banco de dados para desenvolvedores ColdFusion

Voc pode conectar-se a bancos de dados enquanto desenvolve aplicativos do Macromedia ColdFusion com o Macromedia Dreamweaver 8. Este captulo pressupe que o aplicativo do ColdFusion para a Web j esteja configurado (consulte Captulo 23, Configurar um aplicativo para a Web, na pgina 657). Tambm pressupe 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 fornecido pelo Dreamweaver, consulte Setup for Sample ColdFusion Site (Configurao do site de exemplo do ColdFusion) na Ajuda do Getting Started with Dreamweaver. Para aprender mais sobre bancos de dados e conexes de bancos de dados, consulte Apndice A, Guia do iniciante em bancos de dados, na pgina 1085.
24
Conectar-se a um banco de dados

Ao desenvolver um aplicativo do ColdFusion para a Web com o Dreamweaver, voc se conecta um banco de dados, selecionando uma fonte de dados ColdFusion definida no Dreamweaver ou no ColdFusion Administrator, que o console de gerenciamento do servidor. Para se conectar a um banco de dados, certifique-se de que o Dreamweaver saiba onde esto 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. necessrio especificar essa pasta na categoria Testing Server (Servidor de teste) na caixa de dilogo Site Definition (Definio do site). Para obter mais informaes, consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667. Em seguida, crie uma fonte de dados ColdFusion no Deramweaver ou no ColdFusion Administrator (se no existir nenhuma). Para obter mais informaes, consulte Criar ou modificar uma fonte de dados ColdFusion na pgina 670.
669
Aps criar uma fonte de dados ColdFusion, possvel utiliz-la no Dreamweaver para efetuar uma conexo ao banco de dados. Para obter mais informaes, consulte Conectar-se ao banco de dados no Dreamweaver na pgina 671.
Criar ou modificar uma fonte de dados ColdFusion

Antes de usar as informaes do banco de dados em sua pgina, necessrio criar uma fonte de dados ColdFusion. Se estiver executando o ColdFusion MX 7 ou posterior, voc poder criar ou modificar a fonte de dados diretamente no Dreamweaver. Se estiver executando o ColdFusion MX, use a console de gerenciamento do servidor, ColdFusion MX Administrator, para criar ou modificar a fonte de dados. Nesse caso, voc ainda pode usar o Dreamweaver para abrir o ColdFusion MX Administrator.
Para criar ou modificar uma fonte de dados ColdFusion com o ColdFusion MX 7 ou posterior:
1.
Certifique-se de definir como servidor de teste de seu site um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
2. 3.
Abra qualquer pgina ColdFusion no Dreamweaver. Para criar uma nova fonte de dados, clique no boto com o sinal de adio (+) no painel Databases (Windows > Databases) e digite os valores de parmetro especficos ao driver do banco de dados na caixa de dilogo exibida.
NO T A
O Dreamweaver s exibir o boto de adio (+) se voc estiver executando o ColdFusion MX 7 ou posterior.
Para obter mais informaes, consulte a documentao do revendedor do driver ou consulte o administrador do sistema.
4.
Para modificar uma fonte de dados, clique duas vezes na conexo do banco de dados no painel Databases e faa as alteraes na caixa de dilogo de conexo que ser exibida. Voc pode editar qualquer parmetro, exceto o nome da fonte de dados. Para obter mais informaes, consulte a documentao do revendedor do driver ou consulte o administrador do sistema.
670
Captulo 24: Conexes de banco de dados para desenvolvedores ColdFusion
Para criar ou modificar uma fonte de dados ColdFusion no ColdFusion MX 6.1 ou 6.0:
1. 2.
Abra qualquer pgina ColdFusion no Dreamweaver. No painel Databases (Window > Databases) do Dreamweaver, clique no cone Modify Data Sources (Alterar fontes de dados) da barra de ferramentas do painel. O ColdFusion MX Administrator exibido no navegador. Efetue o logon no ColdFusion MX Administrator e crie ou modifique a fonte de dados. Para obter instrues, consulte Using ColdFusion (Usando o ColdFusion) (Ajuda > Using ColdFusion). preciso fornecer determinados valores de parmetros para criar a fonte de dados ColdFusion. Para obter os valores de parmetro especficos ao driver do banco de dados, consulte a documentao do fornecedor do driver ou pea orientao ao administrador do sistema.
3.
Uma vez criada a fonte de dados ColdFusion, possvel utiliz-la no Dreamweaver.
Conectar-se ao banco de dados no Dreamweaver

Depois de criar uma fonte de dados ColdFusion , voc poder utiliz-la para efetuar uma conexo com o banco de dados no Dreamweaver. Abra qualquer pgina do ColdFusion no Dreamweaver e, em seguida, abra o painel Databases (Bancos de dados), em Window (Janela) > Databases. As fontes de dados do ColdFusion so exibidas no painel. Se as fontes de dados no forem exibidas, execute a lista de verificao no painel. Alm disso, certifique-se de que o Dreamweaver sabe onde encontrar as fontes de dados do ColdFusion. Na categoria Testing Server (Servidor de teste) na caixa de dilogo Site Definition (Definio do site), especifique a pasta raiz do site no computador que est executando o ColdFusion. Para obter mais informaes, consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667. Tpicos relacionados Captulo 29, Solucionar problemas de conexes de banco de dados, na pgina 709
671
Editar ou excluir uma conexo de banco de dados

possvel editar ou excluir fontes de dados do ColdFusion no ColdFusion Administrator. No painel Databases (Bancos de dados) em Window (Janela) > Databases) do Dreamweaver, clique no cone Modify Data Sources (Alterar fontes de dados) da barra de ferramentas do painel. O ColdFusion Administrator exibido no navegador. Efetue o logon e modifique a fonte de dados. Para obter instrues, consulte Using ColdFusion. Para evitar a ocorrncia de erros aps excluir ou renomear uma fonte de dados do ColdFusion, atualize todos os recordsets que utilizam a fonte de dados antiga no Dreamweaver clicando duas vezes no nome do recordset, no painel Bindings (Ligaes), e escolhendo uma nova fonte de dados.
672
Captulo 24: Conexes de banco de dados para desenvolvedores ColdFusion
CAPTULO 25
Conexes de banco de dados para desenvolvedores de ASP.NET

Para utilizar um banco de dados com um aplicativo ASP.NET, necessrio criar uma conexo de banco de dados no Macromedia Dreamweaver 8. Este captulo descreve como criar a conexo de banco de dados.
NO T A
25
Se estiver desenvolvendo aplicativos com o Microsoft Active Server Pages (ASP), consulte Captulo 26, Conexes de banco de dados para desenvolvedores de ASP, na pgina 681.
Este captulo pressupe que um aplicativo ASP.NET esteja configurado (consulte Captulo 23, Configurar um aplicativo para a Web, na pgina 657). Tambm pressupe 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 fornecido pelo Dreamweaver, consulte Setup for Sample ColdFusion Site (Configurao do site de exemplo do ColdFusion) em Getting Started with Dreamweaver. Para aprender mais sobre bancos de dados e conexes de bancos de dados, consulte Apndice A, Guia do iniciante em bancos de dados, na pgina 1085.

Esta seo descreve como se conectar a um banco de dados durante o desenvolvimento de um aplicativo ASP.NET no Dreamweaver. Antes de se conectar a um banco de dados, necessrio obter um provedor de bancos de dados OLE (Object Linking and Embedding, incorporao e vinculao de objetos) para o banco de dados. Caso deseje se conectar a um banco de dados Microsoft SQL Server, possvel utilizar o Managed Data Provider (Provedor de dados gerenciados) para SQL Server que fornecido pelo .NET Framework Software Development Kit (SDK). Para obter mais informaes, consulte Obter um provedor de bancos de dados OLE para o banco de dados na pgina 674.
673
Uma vez instalado o provedor de banco de dados, possvel utiliz-lo para efetuar uma conexo ao banco de dados. Para obter instrues, consulte as seguintes sees:

Criar uma conexo de banco de dados ASP.NET no Dreamweaver na pgina 675 Criar uma conexo utilizando a caixa de dilogo Data Link Properties (Propriedades de link de dados) na pgina 676
Obter 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 intrprete e permite que o aplicativo ASP.NET se comunique com um banco de dados. Para obter mais informaes sobre um banco de dados OLE e a funo dos provedores de banco de dados, consulte Comunicar-se com o banco de dados na pgina 1094. Caso deseje se conectar a um banco de dados Microsoft SQL Server, utilize o Managed Data Provider para SQL Server fornecido com o .NET Framework 1.1 SDK. Esse provedor, que otimizado para SQL Server e muito veloz, instalado durante a instalao do SDK. Se desejar se conectar a um banco de dados que no seja o SQL Server, certifique-se da presena de um provedor de bancos de dados OLE instalado para o banco de dados no computador que est executando o .NET Framework. possvel obter um provedor de banco de dados OLE para Microsoft Access, efetuando o download e instalando o pacote Microsoft Data Access Components (MDAC) 2.7 no site da Microsoft, em http://msdn.microsoft.com/ data/mdac/downloads/. Voc pode efetuar o download dos provedores de banco de dados OLE da Oracle no site da Oracle, em www.oracle.com/technology/software/tech/windows/ole_db/index.html. Tambm possvel adquirir provedores de bancos de dados OLE de outros fornecedores. Uma vez obtido um provedor para o banco de dados, possvel utiliz-lo para criar conexes de banco de dados no Dreamweaver.
674
Captulo 25: Conexes de banco de dados para desenvolvedores de ASP.NET
Criar uma conexo de banco de dados ASP.NET no Dreamweaver

Depois de obter um provedor de bancos de dados OLE para o banco de dados, possvel utiliz-lo para criar uma conexo de banco de dados no Dreamweaver. Uma outra opo utilizar a caixa de dilogo Microsoft Data Link Properties (Propriedades de link de dados da Microsoft), que ajuda a criar a conexo. Para obter instrues, consulte Criar uma conexo utilizando a caixa de dilogo Data Link Properties (Propriedades de link de dados) na pgina 676.
Para criar uma conexo de banco de dados para ASP.NET:
1.
Abra uma pgina ASP.NET no Dreamweaver e, em seguida, abra o painel Databases (Window > Databases). O painel exibe as conexes definidas para o site. Clique no boto de adio (+) do painel e selecione OLE DB Connection (Conexo com banco de dados OLE) ou SQL Server Connection (Conexo de servidor SQL) no menu pop-up.
N OT A
2.
Selecione SQL Server Connection somente se desejar se conectar a um banco de dados Microsoft SQL Server.
A caixa de dilogo OLE DB Connection (Conexo com banco de dados OLE) ou SQL Server Connection (Conexo de servidor SQL) exibida.
3.
A nova conexo exibida no painel Databases. Tpicos relacionados Captulo 29, Solucionar problemas de conexes de banco de dados, na pgina 709
675
Criar uma conexo utilizando a caixa de dilogo Data Link Properties (Propriedades de link de dados)
Aps obter um provedor de banco de dados OLE para o banco de dados (consulte Obter um provedor de bancos de dados OLE para o banco de dados na pgina 674), voc pode criar uma conexo de banco de dados utilizando a caixa de dilogo Data Link Properties no Windows. Importante: possvel utilizar este mtodo 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 conexo de banco de dados utilizando a caixa de dilogo Data Link Properties:
1.
Abra uma pgina ASP.NET no Dreamweaver e, em seguida, abra o painel Databases (Window > Databases). O painel exibe as conexes definidas para o site. Clique no boto de adio (+) no painel e selecione OLE DB Connection (Conexo com banco de dados OLE) no menu pop-up. exibida a caixa de dilogo OLE DB Connection. Clique no boto Build (Construir). A caixa de dilogo Data Link Properties exibida. Esta caixa de dilogo do Windows exibe os provedores de bancos de dados OLE existentes no computador com o Windows que est executando o Dreamweaver.
2.
3.
4.
Preencha a caixa de dilogo Data Link Properties e clique em OK. O Dreamweaver insere uma seqncia de caracteres de conexo na caixa de dilogo OLE DB Connection.
5.
Clique em Test (Testar). O Dreamweaver tentar estabelecer a conexo com o banco de dados. Se a conexo falhar, verifique novamente a seqncia de caracteres de conexo. Se a conexo continuar falhando, verifique as configuraes da pasta que o Dreamweaver usa para processar pginas dinmicas (consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667).
6.
Clique em OK. A nova conexo exibida no painel Databases.
Tpicos relacionados Captulo 29, Solucionar problemas de conexes de banco de dados, na pgina 709
676
Parmetros de conexo com banco de dados OLE de exemplo para ASP.NET

Uma seqncia de caracteres de conexo com o banco de dados OLE combina todas as informaes de que o aplicativo ASP.NET precisa para se conectar a um banco de dados. O Dreamweaver insere essa seqncia de caracteres nos scripts de servidor da pgina para posterior processamento pelo servidor de aplicativos. O Dreamweaver fornece modelos de seqncias de caracteres para criar seqncias de caracteres de conexo com o banco de dados OLE para aplicativos ASP.NET (consulte Criar uma conexo de banco de dados ASP.NET no Dreamweaver na pgina 675). Para criar uma seqncia de caracteres de conexo, substitua os alocadores de espao do modelo pelos valores de parmetros solicitados. Esta seo exibe parmetros de exemplo para bancos de dados Microsoft Access e SQL Server.
NO TA
Para obter os valores de parmetros especficos a outros bancos de dados, consulte a documentao do revendedor do banco de dados ou consulte o administrador do sistema.
Caso 1: O .NET Framework est instalado no computador local e o usurio deseja se conectar
a um banco de dados Microsoft Access chamado sdSchool.mdb e localizado nesta pasta do disco rgido: c:\Inetpub\wwwroot\SkyDiveSchool\data\sdSchool.mdb. Aqui esto os parmetros necessrios para criar esta seqncia de caracteres de conexo:
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 usurio 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 esto os parmetros necessrios para criar a seqncia de caracteres de conexo:
Provider=Microsoft.Jet.OLEDB.4.0; Data Source=d:\users\tara\projects\MtnDrivingSchool\data\mtnSchool.mdb;
677
Caso 3: Suponha que voc use o .NET Framework em um servidor de desenvolvimento em rede chamado Savant e deseje conectar-se a um banco de dados Microsoft SQL Server chamado pubs no servidor. Seu nome de usurio do SQL Server sa e no existe uma senha. Se for utilizado o Managed Data Provider (Provedor de dados gerenciados) para SQL Server, ou seja, se voc tiver escolhido a opo SQL Connection (Conexo SQL) no painel Databases (Bancos de dados), aqui esto os parmetros necessrios para criar a seqncia de caracteres de conexo: Data Source=Savant; Initial Catalog=pubs; User ID=sa; Password=;

Quando voc cria uma conexo de banco de dados, o Dreamweaver armazena as informaes de conexo em um arquivo de incluso na subpasta Connections (Conexes) localizada na pasta raiz local do site. Voc pode editar ou excluir as informaes de conexo do arquivo manualmente ou como a seguir.
Para atualizar uma conexo:
1.
Abra uma pgina ASP.NET no Dreamweaver e, em seguida, abra o painel Databases, em Window > Databases. Uma lista de conexes exibida no painel. Clique com o boto direito do mouse (no Windows) ou pressione a tecla Control (no Macintosh) e clique na conexo desejada. Em seguida, selecione Edit Connection (Editar conexo) no menu pop-up. A caixa de dilogo utilizada para criar a conexo exibida. Faa as alteraes e clique em OK.
2.
3.
O Dreamweaver atualiza automaticamente o arquivo de incluso que, por sua vez, atualiza automaticamente todas as pginas do site que estiverem utilizando a conexo. Se voc renomear uma conexo, atualize todos os DataSets que utilizam o nome antigo da conexo. Para isso, clique duas vezes no recordset no painel Bindings (Ligaes) e escolha um novo nome de conexo na caixa de dilogo DataSet.
678
Para excluir uma conexo:

1.
Abra uma pgina ASP.NET no Dreamweaver e, em seguida, abra o painel Databases (Window > Databases). Uma lista de conexes exibida no painel. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e clique na conexo desejada. Em seguida, selecione Delete Connection (Excluir a conexo) no menu pop-up. A caixa de dilogo utilizada para criar a conexo exibida. Confirme se deseja excluir a conexo.
N OT A
2.
3.
Para evitar a ocorrncia de erros aps excluir uma conexo, atualize todos os DataSets que utilizam a conexo antiga. Para isso, clique duas vezes no nome do DataSet no painel Bindings e escolha uma nova conexo na caixa de dilogo DataSet.
679
680
CAPTULO 26
Conexes de banco de dados para desenvolvedores de ASP

Para utilizar um banco de dados com um aplicativo Active Server Pages (ASP) da Microsoft, necessrio criar uma conexo de banco de dados no Macromedia Dreamweaver 8. Este captulo descreve como criar a conexo de banco de dados.
NO T A
26
Se estiver desenvolvendo aplicativos ASP.NET, consulte Captulo 25, Conexes de banco de dados para desenvolvedores de ASP.NET, na pgina 673.
Este captulo pressupe que um aplicativo ASP j esteja configurado (consulte Captulo 23, Configurar um aplicativo para a Web, na pgina 657). Tambm pressupe 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 fornecido pelo Dreamweaver, consulte Setup for Sample ASP Site in Getting Started with Dreamweaver. Para aprender mais sobre bancos de dados e conexes de bancos de dados, consulte Apndice A, Guia do iniciante em bancos de dados, na pgina 1085.
Sobre conexes de banco de dados no ASP

Um aplicativo ASP deve conectar-se a um banco de dados por meio de um driver ODBC ou um provedor de banco de dados OLE. A criao de uma conexo de banco de dados OLE pode aumentar a velocidade de conexo.
681
Conexes de banco de dados ASP

Um aplicativo ASP deve se conectar a um banco de dados por meio de um driver ODBC (Open Database Connectivity, conectividade aberta de banco de dados,) ou de um provedor de banco de dados OLE (Object Linking and Embedding, incorporao e vinculao de objetos). O driver ou provedor atua como um intrprete que permite ao aplicativo para a Web comunicar-se com o banco de dados. Para obter mais informaes sobre a funo dos drivers de banco de dados, consulte Comunicar-se com o banco de dados na pgina 1094. 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 Microsoft SQL Server Oracle Driver (ODBC) do Microsoft Access Microsoft Jet Provider para Access (de banco de dados OLE) Driver (ODBC) do Microsoft SQL Server Provedor (de banco de dados OLE) do Microsoft SQL Server Driver (ODBC) da Microsoft para bancos de dados Oracle Provedor de bancos de dados OLE da Oracle
possvel utilizar um DSN (nome de fonte de dados) ou uma seqncia de caracteres de conexo para se conectar ao banco de dados. DSN um identificador formado por uma nica palavra (por exemplo: Acme), direcionado ao banco de dados, que contm todas as informaes necessrias para conectar-se a este. O DSN definido no Windows. possvel utilizar um DSN para se conectar por meio de um driver ODBC instalado no sistema Windows. Para obter instrues detalhadas, consulte Criar uma conexo DSN na pgina 684. Uma seqncia de caracteres de conexo uma expresso codificada manualmente que identifica o banco de dados e lista as informaes necessrias para se conectar a ele. Eis um exemplo:
Driver={SQL Server};Server=Socrates;Database=AcmeMktg; UID=wiley;PWD=roadrunner
necessrio utilizar uma seqncia de caracteres de conexo se estiver se conectando por meio de um destes recursos:

Um provedor de bancos de dados OLE Um driver ODBC no instalado no sistema Windows Criao de uma conexo sem DSN na pgina 688
Para obter instrues detalhadas, consulte as sees a seguir:
682
Captulo 26: Conexes de banco de dados para desenvolvedores de ASP
Efetuar a conexo com um banco de dados atravs de um ISP na pgina 689

NO TA
Tambm possvel utilizar uma seqncia de caracteres de conexo se estiver se conectando por meio de um driver ODBC instalado no sistema Windows, mas a utilizao de um DSN facilita a conexo.
conexes de banco de dados OLE

possvel utilizar um provedor de bancos de dados OLE para se comunicar com o banco de dados. A criao de uma conexo especfica de banco de dados OLE direta pode aumentar a velocidade da conexo, uma vez que elimina a camada ODBC entre o aplicativo para a Web e o banco de dados. Se no for especificado um provedor de banco de dados OLE para o banco de dados, o ASP utilizar o provedor de banco de dados OLE padro 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 disponvel somente no Windows NT, 2000 ou XP. H outros provedores de bancos de dados OLE para bancos de dados distintos. possvel 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.7 no computador Windows que est executando o IIS. possvel fazer gratuitamente o download dos pacotes MDAC no site da Microsoft, em http://msdn.microsoft.com/data/mdac/ downloads/.
N OT A
Certifique-se de instalar o MDAC 2.5 antes de instalar o MDAC 2.7.
Voc pode efetuar o download dos provedores de banco de dados OLE da Oracle no site da Oracle, em www.oracle.com/technology/software/tech/windows/ole_db/index.html (o registro obrigatrio). No Dreamweaver, possvel criar uma conexo de banco de dados OLE incluindo o parmetro Provider em uma seqncia de caracteres de conexo (consulte Criao de uma conexo sem DSN na pgina 688). A seguir, alguns exemplos de parmetros 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;...
Sobre conexes de banco de dados no ASP
683
Para obter o valor do parmetro do provedor de bancos de dados OLE, consulte a documentao do revendedor do provedor ou consulte o administrador do sistema. Tpicos relacionados Criao de uma conexo sem DSN na pgina 688
Criar uma conexo DSN

possvel utilizar um DSN para criar uma conexo ODBC entre o aplicativo para a Web e o banco de dados. Um DSN um nome que contm todos os parmetros necessrios para se conectar a um determinado banco de dados utilizando um driver ODBC. Para obter mais informaes, consulte Usar um DSN na pgina 1099.
NO TA
Uma vez que se pode especificar somente um driver ODBC em um DSN, necessrio utilizar uma seqncia de caracteres de conexo se desejar utilizar um provedor de bancos de dados OLE. Para obter mais informaes, consulte conexes de banco de dados OLE na pgina 683.
possvel definir o DSN em um computador com o Windows local ou remoto. Tpicos relacionados Criao de uma conexo sem DSN na pgina 688
Criar uma conexo utilizando um DSN local

possvel utilizar um DSN definido localmente para criar uma conexo 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 execuo.
Para criar uma conexo de banco de dados com um DSN definido localmente:
1.
Defina um DSN no computador com o Windows no qual o Dreamweaver est em execuo. Para obter instrues, consulte os seguintes artigos no site da Microsoft na Web:
Se o sistema operacional sendo usado for o o Windows 2000, consulte o Artigo 300596 do Microsoft Knowledge Base, em http://support.microsoft.com/ default.aspx?scid=kb;en-us;300596 Se o sistema operacional sendo usado for o o Windows XP, consulte o Artigo 305599 do Microsoft Knowledge Base, em http://support.microsoft.com/ default.aspx?scid=kb;en-us;305599
684
2.
Abra uma pgina ASP no Dreamweaver e, em seguida, abra o painel Databases, em Window> Databases. O Dreamweaver exibe todas as conexes definidas para o site. Clique no boto de adio (+) no painel e selecione Data Source Name (DSN) no menu pop-up. A caixa de dilogo Data Source Name (DSN) exibida.
3.
4.
Digite um nome para a nova conexo.

NO T A
No utilize espaos ou caracteres especiais no nome.
5.
Selecione a opo Using Local DSN (Utilizando o DSN local) na parte inferior da caixa de dilogo. Selecione o DSN desejado no menu pop-up Data Source Name (DSN). Caso deseje utilizar um DSN local que ainda no foi definido, clique em Define (Definir) para abrir o Windows ODBC Data Source Administrator (Administrador de fontes de dados ODBC do Windows). Para obter instrues, consulte Criar uma conexo DSN na pgina 684.
6.
7. 8.
Se necessrio, preencha as caixas User Name (Nome do usurio) e Password (Senha). Se desejar, possvel limitar o nmero de itens de banco de dados que o Dreamweaver recupera na fase de design. Para isso, clique em Advanced (Avanado) e digite um nome de esquema ou de catlogo. Para obter mais informaes, consulte Restringir uma informao do banco de dados no Dreamweaver na pgina 733.
NO T A
No possvel criar um esquema ou catlogo no Microsoft Access.
685
9.
Clique em Test (Testar). O Dreamweaver tentar estabelecer a conexo com o banco de dados. Se a conexo falhar, verifique novamente o DSN. Se a conexo continuar falhando, verifique as configuraes da pasta que o Dreamweaver usa para processar pginas dinmicas (consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667).
10. Clique
em OK.
A nova conexo exibida no painel Databases. Tpicos relacionados Criao de uma conexo sem DSN na pgina 688
Captulo 29, Solucionar problemas de conexes de banco de dados, na pgina 709
Criar uma conexo utilizando um DSN remoto

possvel utilizar um DSN definido em um computador remoto para criar uma conexo 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 conexo de banco de dados com um DSN definido remotamente:
1.
Defina um DSN no sistema remoto que estiver executando o servidor de aplicativos. Para obter instrues, consulte os seguintes artigos no site da Microsoft na Web:
Se o sistema operacional sendo executado no computador remoto for o Windows 2000, consulte o Artigo 300596 do Microsoft Knowledge Base, em http:// support.microsoft.com/default.aspx?scid=kb;en-us;300596 Se o sistema operacional sendo executado no computador remoto for o Windows XP, consulte o Artigo 305599 do Microsoft Knowledge Base, em http:// support.microsoft.com/default.aspx?scid=kb;en-us;305599
2.
Abra uma pgina ASP no Dreamweaver e, em seguida, abra o painel Databases, em Window> Databases. O Dreamweaver exibe todas as conexes definidas para o site. Clique no boto de adio (+) no painel e selecione Data Source Name (DSN) no menu pop-up. A caixa de dilogo Data Source Name (DSN) exibida.
3.
686
4.
Digite um nome para a nova conexo.

N OT A
5.
Selecione a opo Using DSN on Testing Server (Utilizando o DSN no servidor de teste) na parte inferior da caixa de dilogo. Os usurios do Macintosh podem ignorar esta etapa, pois todas as conexes de banco de dados utilizam DSNs no servidor de aplicativos.
6.
Digite o DSN. Voc pode clicar no boto DSN para se conectar ao servidor e selecionar os DSNs definidos nele.
7. 8.
Se necessrio, preencha as caixas User Name (Nome do usurio) e Password (Senha). Se desejar, possvel limitar o nmero de itens de banco de dados a serem recuperados pelo Dreamweaver na fase de design. Para isso, clique em Advanced (Avanado) e digite um nome de esquema ou catlogo. Para obter mais informaes, consulte Restringir uma informao do banco de dados no Dreamweaver na pgina 733.
NO TA
9.
Clique em Test (Testar). O Dreamweaver tentar estabelecer a conexo com o banco de dados. Se a conexo falhar, verifique novamente o DSN. Se a conexo continuar falhando, verifique as configuraes da pasta que o Dreamweaver usa para processar pginas dinmicas (consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667).
10. Clique
em OK.
A nova conexo exibida no painel Databases. Tpicos relacionados Criar uma conexo utilizando um DSN local na pgina 684
Captulo 29, Solucionar problemas de conexes de banco de dados, na pgina 709
687
Criao de uma conexo sem DSN

possvel utilizar uma conexo sem DSN para criar uma conexo de banco de dados ODBC ou OLE entre o aplicativo para a Web e o banco de dados. Para criar esse tipo de conexo, usase uma seqncia de caracteres de conexo. Uma seqncia de caracteres de conexo combina todas as informaes de que o aplicativo da Web precisa para se conectar a um banco de dados.
Para criar uma conexo sem DSN:
1.
Abra uma pgina ASP no Dreamweaver e, em seguida, abra o painel Databases, em Window> Databases. O Dreamweaver exibe todas as conexes definidas para o site, se houver alguma. Clique no boto de adio (+) do painel e selecione Custom Connection String (Seqncia personalizada de caracteres) no menu pop-up. Ser exibida a caixa de dilogo Custom connection string.
2.
3.
Tpicos relacionados conexes de banco de dados OLE na pgina 683

Utilizar um caminho virtual para se conectar a um banco de dados na pgina 691 Captulo 29, Solucionar problemas de conexes de banco de dados, na pgina 709
688
Efetuar a conexo com um banco de dados atravs de um ISP

Se voc um programador ASP e trabalha com um Provedor de servios de Internet (ISP) comercial, possvel que no conhea o caminho fsico do upload de seus arquivos, nem mesmo para o(s) arquivo(s) de seu banco de dados. Se o provedor Internet no definir um DSN para voc ou se demorar a faz-lo, ser necessrio encontrar uma outra forma de criar as conexes com os arquivos de banco de dados. Uma alternativa criar uma conexo sem DSN com um arquivo de banco de dados, mas somente ser possvel definir esta conexo se o usurio souber o caminho fsico do arquivo de banco de dados no servidor do ISP. Esta seo descreve como obter o caminho fsico de um arquivo de banco de dados em um servidor, utilizando o mtodo MapPath do objeto de servidor ASP.
N OT A
As tcnicas apresentadas neste captulo s sero aplicveis se o banco de dados se basear em arquivos, como no caso de um banco de dados Microsoft Access no qual os dados so armazenados em um arquivo .mdb.
Os caminhos fsicos e virtuais

Aps utilizar o Dreamweaver para efetuar o upload dos arquivos em um servidor remoto, os arquivos so armazenados em uma pasta na rvore de diretrios locais do servidor. Por exemplo: em um servidor com o Microsoft IIS, o caminho para a pgina inicial ser este:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Este caminho conhecido como o caminho fsico do arquivo. No entanto, a URL utilizada para abrir o arquivo no utiliza o caminho fsico. Ela utiliza o nome do servidor ou domnio 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 fsico, c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm. Tpicos relacionados Utilizar um caminho virtual para se conectar a um banco de dados na pgina 691
689
Localizar o caminho fsico de um arquivo com o caminho virtual

Se voc tiver uma conta em um provedor Internet, possvel que no saiba o caminho fsico dos arquivos carregados. Os ISPs normalmente fornecem um host FTP, possivelmente um diretrio do host, bem como um nome e uma senha para efetuar logon. Eles tambm especificam uma URL que permite exibir suas pginas 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 domnio em uma URL. Uma vez conhecido o caminho virtual, possvel obter o caminho fsico do arquivo no servidor por meio do mtodo MapPath. Entre outras coisas, o mtodo MapPath considera o caminho virtual como um argumento e retorna o caminho fsico do arquivo e seu nome. A seguir, a sintaxe do mtodo:
Server.MapPath("/virtualpath")
Suponha que o caminho virtual de um arquivo seja /jsmith/index.htm. A expresso a seguir retornar o caminho fsico:
Server.MapPath("/jsmith/index.htm")
possvel tentar utilizar o mtodo MapPath da seguinte maneira:

1.
Abra uma pgina ASP no Dreamweaver e alterne para a visualizao do cdigo em View (Exibir) > Code (Cdigo). Digite a expresso a seguir no cdigo HTML da pgina.
<%Response.Write(stringvariable)%>
2.
3.
Use o mtodo MapPath para obter um valor para o argumento stringvariable. Por exemplo:
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
4.
Alterne para a Design view (View > Design) e ative o Live Data (View > Live Data) para exibir a pgina. A pgina exibe o caminho fsico do arquivo no servidor de aplicativos. Utilizando o exemplo desta seo, a pgina exibe este caminho fsico:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Para obter mais informaes sobre o mtodo MapPath, consulte a documentao on-line que acompanha o Microsoft IIS. Tpicos relacionados Os caminhos fsicos e virtuais na pgina 689
690
Utilizar um caminho virtual para se conectar a um banco de dados

Para gravar uma seqncia de caracteres de conexo sem DSN em um arquivo de banco de dados localizado em um servidor remoto, necessrio conhecer o caminho fsico do arquivo. O exemplo a seguir uma seqncia de caracteres de conexo sem DSN tpica para um banco de dados Microsoft Access:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=c:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
Se voc no souber o caminho fsico dos arquivos existentes no servidor remoto, possvel obt-lo utilizando o mtodo MapPath na seqncia de caracteres de conexo.
Para criar uma conexo sem DSN utilizando o mtodo 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). Abra uma pgina ASP no Dreamweaver e, em seguida, abra o painel Databases, em Window> Databases. O Dreamweaver exibe todas as conexes definidas para o site. Clique no boto de adio (+) do painel e selecione Custom Connection String no menu pop-up. Digite um nome para a nova conexo.
N OT A
2.
3.
4.
5.
Digite a seqncia de caracteres de conexo e utilize o mtodo MapPath para fornecer o parmetro DBQ. Suponha que o caminho virtual do banco de dados Microsoft Access seja /jsmith/data/ statistics.mdb. A seqncia de caracteres de conexo 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 seqncias de caracteres. A primeira seqncia de caracteres est entre aspas, e a segunda retornada pela expresso Server.MapPath. Quando as duas seqncias de caracteres so combinadas, criada esta seqncia de caracteres:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
691
Se voc utilizar o JavaScript, a expresso ser idntica, exceto pelo uso de um sinal de adio (+) no lugar do E comercial (&) para concatenar as duas seqncias de caracteres:
Driver={Microsoft Access Driver (*.mdb)};DBQ= + Server.MapPath ("/jsmith/data/statistics.mdb") 6.
Selecione a opo Using Driver On Testing Server (Utilizando o driver no servidor de teste). Os usurios do Macintosh podem ignorar esta etapa, pois todas as conexes de banco de dados utilizam o servidor de aplicativos.
7.
Clique em Test (Testar). O Dreamweaver tentar estabelecer a conexo com o banco de dados. Se a conexo falhar, verifique novamente a seqncia de caracteres de conexo. Se ainda assim a conexo falhar, entre em contato com o ISP para certificar-se de que o driver de banco de dados especificado na seqncia de caracteres de conexo foi instalado no servidor remoto. Verifique tambm se o ISP possui a verso mais recente do driver. Por exemplo: um banco de dados criado no Microsoft Access 2000 no funcionar com o Microsoft Access Driver 3.5. necessrio um Microsoft Access Driver 4.0 ou mais avanado.
8.
Clique em OK. A nova conexo exibida no painel Databases. Atualize a conexo de banco de dados das pginas dinmicas existentes e utilize a nova conexo com qualquer pgina nova que for criada. Para atualizar a conexo de uma pgina dinmica, abra a pgina no Dreamweaver, clique duas vezes no nome do recordset localizado no painel Bindings (Ligaes) ou no painel Server Behaviors (Comportamentos de servidor) e, no menu pop-up Connection (Conexo), selecione a conexo recm-criada.
9.
Tpicos relacionados Os caminhos fsicos e virtuais na pgina 689

Localizar o caminho fsico de um arquivo com o caminho virtual na pgina 690 Criao de uma conexo sem DSN na pgina 688
692

1.
Abra uma pgina ASP no Dreamweaver e, em seguida, abra o painel Databases, em Window> Databases. Uma lista de conexes exibida no painel. Clique com o boto direito do mouse (no Windows) ou pressione a tecla Control (no Macintosh) e clique na conexo desejada. Em seguida, selecione Edit Connection (Editar conexo) no menu pop-up. A caixa de dilogo utilizada para criar a conexo exibida. Faa as alteraes e clique em OK.
2.
3.
O Dreamweaver atualiza automaticamente o arquivo da incluso que, por sua vez, atualiza todas as pginas do site que estiverem utilizando a conexo.
1.
Abra uma pgina ASP no Dreamweaver e, em seguida, abra o painel Databases, em Window> Databases. Uma lista de conexes exibida no painel. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e clique na conexo desejada. Em seguida, selecione Delete Connection (Excluir a conexo) no menu pop-up. A caixa de dilogo utilizada para criar a conexo exibida. Confirme se deseja excluir a conexo.
N O TA
2.
3.
Para evitar a ocorrncia de erros aps excluir uma conexo, atualize todos os recordsets que utilizam a conexo antiga, clicando duas vezes no nome do recordset no painel Bindings (Ligaes) escolhendo uma nova conexo.
693
694
CAPTULO 27
Conexes de banco de dados para desenvolvedores JSP

Para utilizar um banco de dados com aplicativos JavaServer Pages (JSP), necessrio criar uma conexo de banco de dados no Macromedia Dreamweaver 8. Este captulo descreve como criar a conexo. Este captulo pressupe que um aplicativo JSP j esteja configurado (consulte Captulo 23, Configurar um aplicativo para a Web, na pgina 657). Tambm pressupe que um banco de dados tenha sido configurado no computador local ou em um sistema ao qual o usurio tem acesso de rede ou FTP. Para se conectar ao banco de dados de exemplo fornecido pelo Dreamweaver, consulte Setup for Sample ASP Site em Getting Started with Dreamweaver. Para aprender mais sobre bancos de dados e conexes de bancos de dados, consulte Apndice A, Guia do iniciante em bancos de dados, na pgina 1085.
27
Sobre conexes de banco de dados no JSP

Um aplicativo JSP deve se conectar a um banco de dados por meio de um driver JDBC. O driver atua como intrprete e permite que o aplicativo JSP se comunique com um banco de dados.
Conexes JSP
Um aplicativo JSP deve se conectar a um banco de dados por meio de um driver JDBC. Para obter mais informaes sobre JDBC e a funo dos drivers de banco de dados, consulte Comunicar-se com o banco de dados na pgina 1094. necessrio especificar determinados valores de parmetros para efetuar uma conexo por meio de um driver JDBC. Para obter mais informaes, consulte Parmetros de conexo JDBC na pgina 696. Para obter os valores de parmetros especficos ao driver, consulte a documentao do revendedor do driver ou consulte o administrador do sistema.
695
Tambm possvel utilizar um driver ODBC (Open Database Connectivity, Conectividade aberta de banco de dados), ou DSN no Windows, se houver um bridge driver JDBC-ODBC. Para obter mais informaes, consulte Conectar-se atravs de um driver ODBC na pgina 699.
Parmetros de conexo JDBC

Ao criar uma conexo de banco de dados JSP no Dreamweaver, geralmente voc precisa digitar os parmetros de conexo. Consulte Criar uma conexo de banco de dados para JSP na pgina 698. Normalmente, as conexes JDBC so formadas por quatro parmetros: o driver, o nome do usurio, a senha e a URL (que especifica a localizao do banco de dados). Em geral, os valores do parmetro do driver e do parmetro da URL dependem do driver. Esta seo demonstra como definir parmetros de conexo no Dreamweaver, utilizando o driver Oracle Thin JDBC como exemplo. Para obter os parmetros de conexo de outros drivers, consulte a documentao do revendedor do driver. O driver Oracle Thin JDBC oferece suporte aos bancos de dados Oracle. Caso deseje utilizar esse driver para se conectar ao banco de dados Oracle, clique no boto de adio (+) no painel Databases (Bancos de dados) e selecione Oracle Thin Driver (Oracle) no menu pop-up. A caixa de dilogo exibida a seguir mostrada parcialmente completa:
Digite um nome de conexo e substitua os alocadores de espao (entre colchetes) por parmetros de conexo vlidos. Para o alocador de espao [hostname], digite o endereo IP ou nome atribudo ao servidor de banco de dados pelo administrador do sistema. Para o alocador de espao [sid], digite o identificador do sistema de banco de dados. Se houver mais de um banco de dados Oracle em execuo no mesmo sistema, utilize o valor de SID para diferenci-los.
696
Captulo 27: Conexes de banco de dados para desenvolvedores JSP
Por exemplo, se o servidor se chamar Aristteles, a porta do banco de dados for 1521 e o SID definido para o banco de dados for patients naquele servidor, voc dever digitar os seguintes valores de parmetro no Dreamweaver:

Esta seo descreve como se conectar a um banco de dados durante o desenvolvimento de um aplicativo JSP no Dreamweaver. Esta seo pressupe que um aplicativo JSP esteja funcionando em um computador local ou remoto. Para obter mais informaes, consulte Configurar um aplicativo para a Web na pgina 657. Antes de se conectar a um banco de dados, necessrio obter um driver JDBC para o banco de dados. Para obter mais informaes, consulte Obter um driver JDBC para o banco de dados na pgina 697. Aps instalar o driver de banco de dados, possvel se conectar ao banco de dados. Para obter instrues, consulte Criar uma conexo de banco de dados para JSP na pgina 698.
Obter um driver JDBC para o banco de dados

Certifique-se da presena de um driver JDBC para o banco de dados antes de tentar criar uma conexo de banco de dados. Alguns drivers JDBC comuns so 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. Tambm possvel adquirir os drivers de outros revendedores. Por exemplo, possvel obter um driver JDBC para o Microsoft SQL Server a partir do software inet em www.inetsoftware.de/products/jdbc/. A Sun tambm fornece um banco de dados para pesquisar drivers JDBC e seus respectivos revendedores no site da Web da empresa, em http://developers.sun.com/product/jdbc/drivers.
697
Uma vez instalado o driver JDBC para o banco de dados, possvel criar uma conexo de banco de dados. Tpicos relacionados Instalar o bridge driver JDBC-ODBC da Sun na pgina 700
Comunicar-se com o banco de dados na pgina 1094
Criar uma conexo de banco de dados para JSP

Aps instalar o driver JDBC apropriado para o banco de dados no computador com o servidor de aplicativos , possvel criar uma conexo de banco de dados no Dreamweaver.
Para criar uma conexo de banco de dados para JSP:
1.
Abra uma pgina JSP no Dreamweaver e, em seguida, abra o painel Databases em Window > Databases. O Dreamweaver exibe as conexes definidas para o site. Clique no boto de adio (+) e selecione um driver no menu pop-up. Se o driver no estiver listado, selecione Custom JDBC Connection (Conexo JDBC personalizada). Uma caixa de dilogo de conexo exibida.
2.
3.
Digite os parmetros de conexo na caixa de dilogo de conexo. Para obter mais informaes, consulte Parmetros de conexo JDBC na pgina 696. Especifique a localizao do driver JDBC que deseja utilizar.
4.
Se o driver JDBC estiver instalado no mesmo computador que o Dreamweaver, selecione a opo Using Driver On This Machine (Utilizando o driver nesta mquina). Se o driver JDBC no estiver instalado no mesmo computador que o Dreamweaver, selecione a opo Using Driver On Testing Server (Utilizando o driver no servidor de teste).
Os usurios do Macintosh podem ignorar esta etapa, pois todas as conexes de banco de dados utilizam o servidor de aplicativos.
5.
Clique em Test (Testar). O Dreamweaver tentar estabelecer a conexo com o banco de dados. Se a conexo falhar, verifique os parmetros de conexo novamente. Se a conexo continuar falhando, verifique as configuraes da pasta que o Dreamweaver usa para processar pginas dinmicas (consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667).
698
6.
Clique em OK.
A nova conexo exibida no painel Databases. Tpicos relacionados Captulo 29, Solucionar problemas de conexes de banco de dados, na pgina 709
Conectar-se atravs 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 bridge driver funciona como intrprete entre o aplicativo JSP, com linguagem JDBC, e o driver ODBC, com linguagem ODBC. Esse canal de comunicao permite ao aplicativo JSP conversar com o banco de dados. Esse tipo de conexo oferece duas vantagens para os usurios do Windows. Primeiro, possvel utilizar drivers ODBC gratuitos da Microsoft. Segundo, possvel utilizar um DSN para simplificar a tarefa de criao da conexo. Os requisitos a seguir devem ser satisfeitos para se efetuar uma conexo 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 informaes, consulte Verificar o driver ODBC na pgina 700. 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 informaes, consulte Instalar o bridge driver JDBC-ODBC da Sun na pgina 700.
Se os requisitos forem atendidos, a conexo por meio de um driver ODBC poder ser feita. Para obter instrues, consulte Criar uma conexo ODBC na pgina 700.
699
Verificar o 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 est instalado ou no, consulte Exibir os drivers ODBC instalados em um sistema Windows na pgina 1097. Se um driver apropriado no estiver instalado, efetue o download e instale o pacote de aplicativos Microsoft Data Access Components (MDAC) 2.5 e 2.7 no computador com o servidor de aplicativos JSP. possvel fazer gratuitamente o download do MDAC no site da Microsoft, em http://msdn.microsoft.com/data/mdac/downloads/. Esses pacotes contm os drivers ODBC mais recentes da Microsoft.
NO T A 700
Instale primeiro o pacote MDAC 2.5 e, depois, o MDAC 2.7.
Se houver um driver ODBC para o banco de dados, instalar um driver JDBC-ODBC em seguida.
Instalar o bridge driver JDBC-ODBC da Sun

Para se conectar por meio de um driver ODBC, necessrio instalar o bridge driver JDBCODBC da Sun no computador com o Windows no qual o servidor de aplicativos JSP est em execuo. Este driver fornecido com o Sun Java 2 SDK, edio Standard para Windows. Para saber se o Java 2 SDK foi fornecido como o driver, verifique se existe um dos seguintes diretrios no seu disco rgido: jdk1.2, jdk1.3 ou j2sdk1.4. Caso no tenha o SDK, voc poder efetuar download a partir do site da Sun na Web em http://java.sun.com/j2se/ e instal-lo. O driver instalado automaticamente com o SDK. Embora seja adequado para uso com sistemas de banco de dados mais comuns com o Microsoft Access, o bridge driver JDBC-ODBC da Sun bastante limitado. Por exemplo: ele permite que apenas uma pgina JSP se conecte ao banco de dados de cada vez (ou seja, no suporta o uso simultneo de vrios segmentos). Para obter mais informaes sobre as limitaes do driver, consulte a seo TechNote 17392 no centro de suporte da Macromedia em www.macromedia.com/go/17392. Aps instalar o bridge driver, possvel criar a conexo de banco de dados.
Criar uma conexo 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 execuo .
Para se conectar por meio de um driver ODBC em JSP:

1.
Defina um DSN no sistema Windows no qual est localizado o servidor de aplicativos. Para obter instrues, consulte os seguintes artigos no site da Microsoft na Web:
Os usurios do Windows 2000 podem consultar o Artigo 300596 do Microsoft Knowledge Base em http://support.microsoft.com/default.aspx?scid=kb;en-us;300596 Os usurios do Windows XP podem consultar a Microsoft Knowledge Base, Artigo 305599, em http://support.microsoft.com/default.aspx?scid=kb;en-us;305599
2.
Abra uma pgina JSP no Dreamweaver e, em seguida, abra o painel Databases em Window > Databases. O painel exibe as conexes definidas para esse site. Clique no boto de adio (+) no painel e selecione Sun JDBC-ODBC Driver (ODBC Database) (Driver JDBC-ODBC da Sun [Banco de dados ODBC]) no menu pop-up. A caixa de dilogo Sun JDBC-ODBC Driver (ODBC Database) exibida. Digite um nome para a nova conexo.
NO TA
3.
4.
5.
Substitua o alocador de espao [odbc dsn] na caixa URL pelo DSN definido na etapa 1. A caixa URL dever ter esta aparncia:
jdbc:odbc:myDSN
6.
Especifique o nome de usurio e a senha de acesso ao banco de dados. Se o nome de usurio ou a senha no forem necessrios, deixe as caixas em branco. Por exemplo, se o DSN for denominado Acme e no for necessrio um nome de usurio ou uma senha para acessar o banco de dados, digite estes valores de parmetro: Driver: sun.jdbc.odbc.JdbcOdbcDriver URL: jdbc:odbc:Acme Nome de usurio: Senha:
7.
Especifique a localizao do bridge driver JDBC-ODBC.
Se o driver estiver instalado no mesmo computador que o Dreamweaver, selecione a opo Using Driver On This Machine (Utilizando o driver nesta mquina). Se o driver no estiver instalado no mesmo computador que o Dreamweaver, selecione a opo Using Driver On Testing Server (Utilizando o driver no servidor de teste).
Os usurios do Macintosh podem ignorar esta etapa, pois todas as conexes de banco de dados utilizam o servidor de aplicativos.
701
8.
Clique em Test (Testar). O Dreamweaver tentar estabelecer a conexo com o banco de dados. Se a conexo falhar, verifique novamente o DSN e os demais parmetros de conexo. Se a conexo continuar falhando, verifique as configuraes da pasta que o Dreamweaver usa para processar pginas dinmicas (consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667).
9.
Clique em OK. A nova conexo exibida no painel Databases.
Tpicos relacionados Captulo 29, Solucionar problemas de conexes de banco de dados, na pgina 709

1.
Abra uma pgina JSP no Dreamweaver e, em seguida, abra o painel Databases em Window > Databases. Uma lista de conexes exibida no painel. Clique com o boto direito do mouse (no Windows) ou pressione a tecla Control (no Macintosh) e clique na conexo desejada. Em seguida, selecione Edit Connection (Editar conexo) no menu pop-up. A caixa de dilogo utilizada para criar a conexo exibida. Faa as alteraes e clique em OK.
2.
3.
O Dreamweaver atualiza automaticamente o arquivo da incluso que, por sua vez, atualiza todas as pginas do site que estiverem utilizando a conexo. Se voc renomear uma conexo, atualize todos os recordsets que utilizam o nome da conexo antiga. Para isso, clique duas vezes no recordset no painel Bindings (Ligaes) e escolha um novo nome de conexo na caixa de dilogo Recordset.
702

1.
Abra uma pgina JSP no Dreamweaver e, em seguida, abra o painel Databases em Window > Databases. Uma lista de conexes exibida no painel. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e clique na conexo desejada. Em seguida, selecione Delete Connection (Excluir a conexo) no menu pop-up. A caixa de dilogo utilizada para criar a conexo exibida. Confirme se deseja excluir a conexo.
2.
3.
Para evitar a ocorrncia de erros aps excluir uma conexo, atualize todos os recordsets que utilizam a conexo antiga. Para tanto, clique duas vezes no nome do recordset no painel Bindings e escolha uma nova conexo na caixa de dilogo Recordset.
703
704
CAPTULO 28
Conexes de banco de dados para desenvolvedores PHP

Para utilizar um banco de dados com um aplicativo PHP, necessrio criar uma conexo de banco de dados no Macromedia Dreamweaver 8. Este captulo descreve como criar a conexo 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, no so suportados. O MySQL um software de cdigo-fonte aberto que pode ser copiado gratuitamente pela Internet para uso no-comercial. Para obter mais informaes, consulte o site MySQL em http://dev.mysql.com/downloads/. Este captulo pressupe que um aplicativo PHP j esteja configurado (consulte Captulo 23, Configurar um aplicativo para a Web, na pgina 657). Tambm pressupe que um banco de dados MySQL esteja configurado no computador local ou em um sistema ao qual o usurio tem acesso de rede ou FTP.
DICA
28
Para fins de desenvolvimento, efetue o download e instale a verso Windows Essentials do servidor de banco de dados MySQL.
Para se conectar ao banco de dados de exemplo fornecido pelo Dreamweaver, consulte Setup for Sample PHP Site (Configurao do site de PHP de exemplo) em Getting Started with Dreamweaver. Para aprender mais sobre bancos de dados e conexes de bancos de dados, consulte Apndice A, Guia do iniciante em bancos de dados, na pgina 1085.

Esta seo descreve como conectar-se a um banco de dados ao desenvolver um aplicativo PHP no Dreamweaver. Esta seo pressupe que voc tenha um ou mais bancos de dados MySQL e que o servidor MySQL tenha sido iniciado.
Para criar uma conexo de banco de dados com o banco de dados MySQL:
1.
Abra uma pgina PHP no Dreamweaver e, em seguida, abra o painel Databases em Window > Databases.
705
2.
Clique no boto de adio (+) no painel e selecione MySQL Connection (Conexo MySQL) no menu pop-up. A caixa de dilogo MySQL Connection exibida. Preencha a caixa de dilogo e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
3.
A nova conexo exibida no painel Databases.

NO T A
Se voc receber a mensagem de erro Client does not support authentication protocol requested. Consider upgrading MySQL client (O cliente no oferece suporte ao protocolo de autenticao solicitado. Considere uma atualizao para o cliente MySQL) ao testar a conexo de banco de dados PHP com o MySQL 4.1, consulte Solucionar mensagens de erro do MySQL na pgina 718.

1.
Abra uma pgina PHP no Dreamweaver e, em seguida, abra o painel Databases em Window > Databases. Uma lista de conexes exibida no painel. Clique com o boto direito do mouse (no Windows) ou pressione a tecla Control (no Macintosh) e clique na conexo desejada. Em seguida, selecione Edit Connection (Editar conexo) no menu pop-up. A caixa de dilogo utilizada para criar a conexo exibida. Faa as alteraes e clique em OK.
2.
3.
O Dreamweaver atualiza automaticamente o arquivo da incluso que, por sua vez, atualiza todas as pginas do site que estiverem utilizando a conexo.
1.
Abra uma pgina PHP no Dreamweaver e, em seguida, abra o painel Databases em Window > Databases. Uma lista de conexes exibida no painel.
706
Captulo 28: Conexes de banco de dados para desenvolvedores PHP
2.
Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e clique na conexo desejada. Em seguida, selecione Delete Connection (Excluir a conexo) no menu pop-up. A caixa de dilogo utilizada para criar a conexo exibida. Confirme se deseja excluir a conexo.
3.
Para evitar a ocorrncia de erros aps excluir uma conexo, atualize todos os recordsets que utilizam a conexo antiga. Para tanto, clique duas vezes no nome do recordset no painel Bindings (Ligaes) e escolha uma nova conexo na caixa de dilogo Recordset.
707
708
Captulo 28: Conexes de banco de dados para desenvolvedores PHP
CAPTULO 29
Solucionar problemas de conexes de banco de dados

Este captulo descreve alguns problemas comuns que podem ser encontrados aps a criao de uma conexo ao banco de dados e descreve como solucion-los.
29
Solucionar problemas de permisses

Uma das causas mais comuns de problemas a insuficincia de permisses de pastas ou arquivos. Se o banco de dados estiver localizado em um computador com o Windows 2000 ou o Windows XP, e voc receber uma mensagem de erro ao tentar exibir uma pgina dinmica em um navegador da Web ou no modo Live Data, o erro poder ter ocorrido devido a um problema de permisso. A conta do Windows tentando acessar o banco de dados no tem permisses suficientes. Pode ser a conta annima do Windows (por padro, IUSR_computername) ou uma conta especfica de usurio se a pgina for protegida com validao de acesso. necessrio alterar as permisses para dar conta IUSR_computername as permisses apropriadas, de modo que o servidor Web possa acessar o arquivo de banco de dados. Alm disso, a pasta contendo o arquivo de banco de dados tambm deve ter certas permisses para gravar naquele banco de dados. Se a pgina for acessada anonimamente, conceder conta IUSR_computername controle total para acessar a pasta e o arquivo do banco de dados, conforme descrito no procedimento abaixo. Alm disso, se o caminho ao banco de dados for indicado por UNC (\\Server\Share), certifique-se de compartilhar a permisso de acesso total com a conta IUSR_computername com Share Permissions. Esse passo aplicvel mesmo se o compartilhamento for feito no servidor Web local. Se voc copiar o banco de dados de outro local, no poder importar automaticamente as permisses de sua pasta de destino. Talvez seja preciso alterar as permisses para o banco de dados.
709
Para verificar ou alterar as permisses do arquivo de banco de dados (Windows XP):

1. 2.
Certifique-se de que possui privilgios de administrador no computador. No Windows Explorer, localizar o arquivo de banco de dados ou a pasta que contm o banco de dados, clicar com o boto direito do mouse o arquivo ou a pasta e selecionar Properties. Selecione a guia Security (Segurana).
NO T A
3.
Este passo aplicvel somente se houver um sistema de arquivos NTFS. Se for um sistema de arquivos FAT, a caixa de dilogo no ter a guia Security.
4.
Se a conta IUSR_computername no constar da lista Group (Grupo) ou User Names (Nomes de usurios), clique no boto Add (Adicionar) para acrescent-la. Na caixa de dilogo Select Users (Selecionar usurios) ou Groups (Grupos), clique no boto Advanced (Avanado). A caixa de dilogo se altera para apresentar mais opes. Clique no boto Locations (Locais) e selecione o nome do computador. Clique no boto Find Now (Localizar agora). Uma lista de nomes de contas associadas ao computador exibida. Selecione a conta IUSR_computername e clique em OK. Em seguida, clique novamente em OKpara limpar a caixa de dilogo. Para atribuir permisses totais conta IUSR, selecione a caixa de verificao Full Control (Controle total) e clique em OK.
5.
6. 7.
8.
9.
Para verificar ou alterar as permisses do arquivo de banco de dados (Windows 2000):

1. 2.
Certifique-se de que possui privilgios de administrador no computador. No Windows Explorer, localizar o arquivo de banco de dados ou a pasta que contm o banco de dados, clicar com o boto direito do mouse o arquivo ou a pasta e selecionar Properties. Selecione a guia Security (Segurana).
NO T A
3.
Este passo aplicvel somente se houver um sistema de arquivos NTFS. Se for um sistema de arquivos FAT, a caixa de dilogo no ter a guia Security.
4.
Se a conta IUSR_computername no estiver listada na caixa de dilogo File Permissions (Permisses de arquivo) nas contas do Windows, clicar no boto Add para adicion-la.
710
Captulo 29: Solucionar problemas de conexes de banco de dados
5.
Na caixa de dilogo Select Users, Computers (Computadores) ou Groups, selecione o nome do computador do menu pop-up Look In (Procurar em). Uma lista de nomes de contas associadas ao computador exibida. Selecione a conta IUSR_computername e clique em Add. Para atribuir permisses totais conta IUSR, selecione Full control no menu pop-up Type of access (Tipo de acesso) e clique em OK.
6. 7.
Para maior segurana, as permisses podem ser definidas de modo que Read permission (Ler permisso) fique desativado na pasta da Web que contm o banco de dados. No ser permitido navegar pela pasta, mas as pginas da Web podero, mesmo assim, acessar o banco de dados. Para obter mais informaes sobre a conta IUSR e permisses do servidor Web, consulte as notas tcnicas na pgina de suporte da Macromedia (TechNotes):
Understanding anonymous authentication and the IUSR account (A autenticao annima e a conta IUSR) em www.macromedia.com/go/authentication Setting IIS web server permissions (Definir permisses de servidores da Web IIS) em www.macromedia.com/go/server_permissions
Solucionar mensagens de erro da Microsoft

Esta seo descreve algumas mensagens de erro comuns da Microsoft e como diagnostic-las. Estes erros podem ocorrer se voc estiver utilizando o Internet Information Server (IIS) com um sistema de banco de dados Microsoft, como Access ou SQL Server. Esses erros normalmente acontecem quando voc solicita uma pgina dinmica do servidor.
N OT A
A Macromedia no oferece suporte tcnico para software de outros fabricantes, como o Windows e IIS. Se esta seo no ajudar a resolver o problema, entre em contato com o suporte tcnico da Microsoft ou visite o site de suporte da Microsoft na Web em http:// support.microsoft.com/.
Para obter mais informaes sobre mensagens de erro 80004005, consulte INFO: Troubleshooting Guide for 80004005 Errors in Active Server Pages and Microsoft Data Access Components (Guia de correo de erros 80004005 em Active Server Pages e Microsoft Data Access Components) (Q306518), no site da Microsoft na Web em http:// support.microsoft.com/default.aspx?scid=kb;en-us;Q306518.
711
80004005 Data source name not found and no default driver specified (No foi localizado o nome da fonte de dados e no foi especificado nenhum driver padro)
Esse erro ocorre quando voc tenta visualizar uma pgina dinmica em um navegador Web ou no modo Live Data. Essa mensagem de erro pode variar em funo do banco de dados e do servidor Web. H outras variaes da mensagem de erro:
80004005 Driver's SQLSetConnectAttr failed (Falha de SQLSetConnectAttr do driver) 80004005 General error Unable to open registry key 'DriverId' (Erro geral: no possvel abrir a chave de registro 'DriverId') A pgina no pode localizar o DSN. Certificar-se de que um DSN foi criado tanto no servidor Web como no computador local. Para obter mais informaes, consulte Usar um DSN na pgina 1099. O DSN deve ser configurado como DSN de usurio, no como um DSN de sistema. Remova o DSN de usurio e crie um DSN de sistema para substitu-lo.
N OT A
A seguir possveis causas e solues:
Se o DSN de usurio no for excludo, o nome de DSN duplicado produzir um novo erro de ODBC.
Se o Microsoft Access for utilizado, o arquivo de banco de dados (.mdb) poder estar bloqueado. O bloqueio pode ocorrer devido a um DSN com nome diferente acessando o banco de dados. No Windows Explorer, localize o arquivo bloqueado (.ldb) na pasta que contm o arquivo de banco de dados (.mdb) e exclua o arquivo.ldb. Se outro DSN estiver indicando o mesmo arquivo de banco de dados, exclua o DSN para evitar erros no futuro. Reinicie o computador aps efetuar as alteraes.
80004005 Couldnt use (unknown); file already in use (No foi possvel utilizar 'desconhecido'; o arquivo j est em uso)
Esse erro ocorre quando voc utiliza um banco de dados do Microsoft Access e tenta visualizar uma pgina dinmica em um navegador Web ou no modo Live Data. Outra variao desta mensagem 80004005 Microsoft Jet database engine cannot open the file (unknown) (O mecanismo de banco de dados Microsoft Jet no consegue abrir o arquivo 'desconhecido').
712
A causa provvel um problema de permisso. Para obter mais informaes, consulte Solucionar problemas de permisses na pgina 709. A seguir algumas possveis causas e solues:
provvel que a conta utilizada pelo Internet Information Server (normalmente IUSR) no tenha as permisses corretas do Windows para um banco de dados baseado em arquivos ou para a pasta que contm o arquivo. Verifique as permisses da conta IIS (IUSR) no gerenciador de usurios. possvel que voc no tenha permisso para criar ou excluir arquivos temporrios. Verifique as permisses do arquivo e da pasta. Verifique se voc tem permisso para criar ou excluir arquivos temporrios. Arquivos temporrios so normalmente criados na mesma pasta do banco de dados, mas o arquivo tambm pode ser criado em outras pastas, como /Winnt. No Windows 2000, pode ser necessrio alterar o valor do tempo-limite para o DSN do banco de dados do Access. Para alterar o tempo-limite, selecione Start (Iniciar) > Settings (Configuraes) > Control Panel (Painel de controle) > Administrative Tools (Ferramentas administrativas)> Data Sources (ODBC) (Fontes de dados [ODBC]). Clique na guia System (Sistema), realce o DSN correto e clique no boto Configure (Configurar). Clique no boto Options (Opes) e altere o valor Page Timeout (Tempo-limite da pgina) para 5000.
Se ainda tiver problemas, consulte os seguintes artigos na Microsoft Knowledge Base (Base de dados de conhecimento da Microsoft):
PRB: 80004005 Couldn't Use (unknown); File Already in Use" em http:// support.microsoft.com/default.aspx?scid=kb;en-us;Q174943. PRB: Microsoft Access Database Connectivity Fails in Active Server Pages (Falhas do Microsoft Access Database Connectivity em Active Server Pages) em http:// support.microsoft.com/default.aspx?scid=kb;en-us;Q253604. PRB: Error Cannot Open File Unknown Using Access (Erro No possvel abrir o arquivo desconhecido utilizando o acesso) em http://support.microsoft.com/ default.aspx?scid=kb;en-us;Q166029.
80004005 Logon Failed() (Falha de logon)

Esse erro ocorre quando voc utiliza o Microsoft SQL Server e tenta visualizar uma pgina dinmica em um navegador Web ou no modo Live Data. Este erro ser gerado pelo SQL Server (Servidor SQL) se este no aceitar ou no reconhecer a conta de logon ou senha enviada (se voc estiver usando segurana padro) ou se uma conta do Windows no for atribuda a uma conta SQL (se voc estiver usando segurana integrada).
713
Algumas possveis solues podem ser vistas a seguir:
Se estiver usando segurana padro, o nome da conta e a senha podem estar incorretos. Tente utilizar a conta e senha do Admin do sistema (UID = sa e nenhuma senha), que devem ser definidas na linha de seqncia da conexo (DSNs no armazenam nomes de usurio e senhas). Ao usar segurana integrada, verifique a conta Windows chamando a pgina e localize a conta SQL atribuda (se houver). O SQL Server no permite sublinhados em nomes de conta SQL. Se algum atribuir manualmente a conta IUSR_machinename do Windows a uma conta SQL com o mesmo nome, ocorrer uma falha. Atribua qualquer conta com sublinhado a um nome de conta SQL que no use sublinhados.
80004005 Operation must use an updateable query (A operao deve utilizar uma consulta atualizvel)
Esse erro ocorre quando um evento est atualizando um recordset ou inserindo dados em um recordset. A seguir possveis causas e solues:
As permisses definidas na pasta que contm o banco de dados so muito restritivas. Os privilgios IUSR devem ser estabelecidos para leitura/gravao. Consulte Solucionar problemas de permisses na pgina 709. As permisses no arquivo de banco de dados no tm privilgios totais de leitura/gravao vlidos. Consulte Solucionar problemas de permisses na pgina 709. O banco de dados pode estar localizado fora do diretrio Inetpub/wwwroot. Embora seja possvel visualizar e localizar os dados, no ser possvel atualiz-los, a menos que o banco de dados esteja localizado no diretrio wwwroot. O recordset est localizado em uma consulta no atualizvel. Funes lgicas so bons exemplos de consultas no atualizveis em um banco de dados. Reestruture as consultas de modo que se tornem atualizveis.
Para mais informaes sobre mensagens de erro, consulte PRB: ASP Error The Query Is Not Updateable When You Update Table Record (ASP Error The Query Is Not Updateable quando voc atualiza um registro de tabela) na Microsoft Knowledge Base em http:// support.microsoft.com/default.aspx?scid=kb;en-us;Q174640.
714
80040e07 Data type mismatch in criteria expression (Erro de correspondncia de tipos de dados na expresso dos critrios)
Este erro ocorre quando o servidor tenta processar uma pgina contendo um comportamento do servidor Insert Record (Inserir registro) ou Update Record (Atualizar registro), sendo que o comportamento de servidor tenta definir o valor de uma coluna Date/Time (Data/Hora) em um banco de dados do Microsoft Access com uma seqncia nula (""). O Microsoft Access possui situaes distintas para digitao de dados e impe um conjunto de regras rigorosas sobre determinados valores das colunas. O valor de seqncia vazio na consulta SQL no pode ser armazenado na coluna Date/Time (Data/hora) do Access. Atualmente, a nica soluo conhecida evitar inserir ou atualizar as colunas Date/Time no Access com seqncias vazias ("") ou com qualquer outro valor que no corresponde ao intervalo de valores especificado para o tipo de dados.
80040e10 Too few parameters (Falta de parmetros)

Este erro ocorre quando uma coluna especificada em uma consulta SQL no existe na tabela de banco de dados. Verifique os nomes das colunas na tabela de banco de dados em comparao consulta SQL. A causa deste erro freqentemente um erro tipogrfico.
80040e10 COUNT field incorrect (Campo COUNT incorreto)

Este erro ocorre ao tentar visualizar uma pgina contendo um comportamento de servidor Insert Record (Inserir registro) em um navegador da Web e tentar utiliz-lo para inserir um registro em um banco de dados do Microsoft Access. O usurio pode estar tentando inserir um registro em um campo de banco de dados com um ponto de interrogao (?) no nome do campo. O ponto de interrogao um caractere especial para alguns mecanismos de busca de banco de dados, incluindo o Microsoft Access, e no deve ser usado para nomes de tabela de banco de dados ou nomes de campos. Abra o sistema de banco de dados, remova o ponto de interrogao (?) dos nomes do campo e atualize os comportamentos de servidor na pgina referente ao campo.
715
80040e14 Syntax error in INSERT INTO statement (Erro de sintaxe na instruo INSERT INTO)
Este erro ocorre quando o servidor tenta processar uma pgina que contm um comportamento de servidor Insert Record (Inserir registro). Este erro normalmente o resultado de um ou mais problemas relacionados ao nome do campo, objeto ou varivel no banco de dados a seguir:
Uso de uma palavra reservada como nome. A maioria dos bancos de dados possui um conjunto de palavras reservadas. Por exemplo: data uma palavra reservada e no pode ser usada para nomes de coluna em um banco de dados. Uso de caracteres especiais com o nome. Exemplos de caracteres especiais: ./*:!#&-? Uso de um espao no nome
Este erro tambm pode acontecer quando uma mscara de entrada for definida para um objeto no banco de dados e os dados inseridos no corresponderem mscara. Para solucionar o problema, evite usar palavras reservadas como data, nome, selecionar, onde e nvel ao especificar nomes de coluna no banco de dados. Remova tambm os espaos e caracteres especiais. Consulte as pginas da Web a seguir para obter listas de palavras reservadas para sistemas de banco de dados comuns:

Microsoft Access em http://support.microsoft.com/default.aspx?scid=kb;en-us;Q209187 SQL Server da Microsoft em http://msdn.microsoft.com/library/default.asp?url=/library/ en-us/tsqlref/ts_ra-rz_9oj7.asp MySQL em http://dev.mysql.com/doc/mysql/en/reserved-words.html
80040e21 ODBC error on Insert or Update (Erro ODBC em insero ou atualizao)

Este erro ocorre quando o servidor tenta processar uma pgina contendo um comportamento de servidor Update Record (Atualizar registro) ou Insert Record (Inserir registro). O banco de dados no pode efetuar a operao de atualizao ou de insero que o comportamento do servidor est tentando executar.
716
A seguir possveis causas e solues:
O comportamento do servidor est tentando atualizar o campo autonumerao de uma tabela do banco de dados ou est tentando inserir um registro em um campo de autonumerao. Como os campos de autonumerao so preenchidos automaticamente pelo sistema do banco de dados, qualquer tentativa de preench-los com um valor externo resulta em falha. Os dados que o comportamento de servidor est atualizando ou inserindo consistem no tipo incorreto de dados para o campo do banco de dados, como inserir uma data em um campo booleano (sim/no), inserir uma seqncia em um campo numrico ou inserir uma seqncia formatada incorretamente no campo Date/Time (Data/Hora).
800a0bcd Either BOF or EOF is true (BOF ou EOF verdadeiro)

Esse erro ocorre quando voc tenta visualizar uma pgina dinmica em um navegador Web ou no modo Live Data. O problema ocorre quando a pgina tenta exibir os dados de um recordset vazio. Para resolver o problema, aplique o comportamento de servidor Show Region (Mostrar regio) ao contedo dinmico a ser exibido na pgina, do seguinte modo:
1. 2.
Realce o contedo dinmico na pgina. No painel Server Behaviors (Comportamentos de servidor), clique no boto de adio (+) e selecione Show Region > Show Region If Recordset Is Not Empty (Mostrar regio se o recordset no estiver vazio). Selecione o recordset que estiver fornecendo o contedo dinmico e clique em OK. Repita as etapas de 1 a 3 para cada elemento de contedo dinmico da pgina.
3. 4.
717
Solucionar mensagens de erro do MySQL

Esta seo descreve uma mensagem de erro comum que voc poder receber ao testar uma conexo de banco de dados PHP para o MySQL 4.1: Client does not support authentication protocol requested. Consider upgrading MySQL client. possvel que voc precise recorrer a uma verso anterior do MySQL ou instalar o PHP 5 e copiar algumas bibliotecas de vnculo dinmico (DLLs). Para obter instrues detalhadas, consulte Installing a PHP application server (Windows) em Getting Started with Dreamweaver. Alm disso, consulte os seguintes artigos (TechNotes) no site da Macromedia:

TechNote c45f8a29, em www.macromedia.com/go/c45f8a29. TechNote 16515, em www.macromedia.com/go/16515.
718
PARTE 7
Tornar dinmicas as pginas

Utilize as ferramentas de desenvolvimento de aplicativos do Macromedia Dreamweaver 8 para adicionar contedo dinmico s suas pginas. Esta seo contm os seguintes captulos:
Captulo 30: Otimizar a rea de trabalho para desenvolvimento visual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 721 Captulo 31: Fluxo de trabalho para projetos de pginas dinmicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735 Captulo 32: Obter dados para a pgina . . . . . . . . . . . . . . . . . . . . 745 Captulo 33: Definir as fontes de contedo dinmico . . . . . . . . 759 Captulo 34: Adicionar contedo dinmico a pginas da Web . 781 Captulo 35: Exibir registros de bancos de dados. . . . . . . . . . . . 793 Captulo 36: Exibir dados XML em pginas da Web . . . . . . . . . . 813 Captulo 37: Usar os servios da Web . . . . . . . . . . . . . . . . . . . . . . 847 Captulo 38: Adicionar comportamentos de servidor personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 861 Captulo 39: Criar formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 885
719
CAPTULO 30
Otimizar a rea de trabalho para desenvolvimento visual

possvel otimizar a rea de trabalho do Macromedia Dreamweaver 8 para desenvolver visualmente aplicativos para a Web. Por exemplo: possvel utilizar painis para construir rapidamente pginas dinmicas e exibir dados ao vivo nas suas pginas enquanto trabalha. Este captulo contm as seguintes sees:
30
Exibir painis de desenvolvimento de aplicativos para a Web . . . . . . . . . . . . . . . . . 721 Exibir o banco de dados no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .724 Exibir o Live Data na visualizao do projeto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725 Trabalhar na visualizao do projeto sem o Live Data. . . . . . . . . . . . . . . . . . . . . . . . 731 Visualizar pginas dinmicas em um navegador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 732 Restringir uma informao do banco de dados no Dreamweaver . . . . . . . . . . . . . 733
Exibir painis de desenvolvimento de aplicativos para a Web

Clique na guia Application (Aplicativo) na barra Insert (Inserir) para exibir um conjunto de botes que permitem adicionar contedo dinmico e comportamentos de servidor sua pgina da seguinte maneira:
O nmero e o tipo dos botes exibidos depende do tipo de documento aberto na janela Document (Documento). A barra Insert contm botes para adicionar os seguintes itens pgina:

Recordsets Texto ou tabelas dinmicas Formulrios para inserir ou atualizar registros em um banco de dados Barras de navegao dos registros
721
Quando se alterna para a visualizao do cdigo (View (Exibir) > Code (Cdigo)), so exibidos painis adicionais em sua prpria categoria da barra Insert, permitindo a insero de cdigo na pgina. Por exemplo: se uma pgina ColdFusion for exibida no modo de visualizao do cdigo, ser disponibilizado um painel CFML na categoria CFML da barra Insert:
Para descobrir o que cada boto da barra Insert faz, mova o mouse sobre um cone. Ser exibida a seguinte dica de ferramenta :
Se desejar definir origens de contedo dinmico para a sua pgina e adicionar o contedo a ela, selecione Window (Janela) > Bindings (Ligaes). O painel Bindings exibido.
Para obter mais informaes, selecione Help (Ajuda) no menu pop-up do grupo de painis. Se desejar adicionar lgica do servidor s pginas dinmicas, selecione Window > Server Behaviors (Comportamentos de servidor). O painel Server Behaviors exibido.
722
Captulo 30: Otimizar a rea de trabalho para desenvolvimento visual
Um comportamento de servidor o conjunto de instrues inseridas em uma pgina dinmica na fase de design e executado no servidor em tempo de execuo. Para obter mais informaes, selecione Help (Ajuda) no menu pop-up do grupo de painis. Se desejar explorar bancos de dados ou criar conexes de bancos de dados, selecione Window > Databases (Bancos de dados). O painel Databases exibido.
Para obter mais informaes, selecione Help (Ajuda) no menu pop-up do grupo de painis. Se desejar inspecionar, adicionar ou modificar o cdigo para JavaBeans, componentes Macromedia ColdFusion ou servios da Web, selecione Window > Components (Componentes). O painel Components exibido.
Para obter mais informaes, selecione Help (Ajuda) no menu pop-up do grupo de painis.
NO T A
O painel Components ser ativado apenas se voc abrir uma pgina ColdFusion, JSP ou ASP.NET. Alm disso, o documento pode no oferecer suporte a determinados componentes. Por exemplo, os documentos do ColdFusion no oferecem suporte a JavaBeans.
Exibir painis de desenvolvimento de aplicativos para a Web
723
Exibir o banco de dados no Dreamweaver

Aps se conectar ao banco de dados, voc poder exibir sua estrutura e dados no Dreamweaver.
Para exibir o banco de dados:
1.
Abra o painel Databases (Bancos de dados), em Window (Janela)> Databases. O Dreamweaver preenche o painel Databases com todos os bancos de dados para os quais foram criadas conexes. Se voc 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 ColdFusion Administrator.
NO TA
O Dreamweaver procura o servidor ColdFusion definido para o site atual. Consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667.
Se no forem exibidos bancos de dados no painel, ser necessrio criar uma conexo de banco de dados. Para obter mais informaes, consulte Efetuar a conexo com um banco de dados na pgina 668.
2.
Para exibir as tabelas, os procedimentos armazenados e as visualizaes no banco de dados, clique no cone de adio (+) ao lado de uma conexo na lista. Para exibir as colunas da tabela, clique em um nome de tabela. Os cones das colunas refletem o tipo de dados e indicam a chave primria. Para exibir os dados em uma tabela, clique com o boto direito do mouse (no Windows) ou pressione a tecla Control (no Macintosh) e clique no nome da tabela na lista. Em seguida, selecione View Data (Exibir dados) no menu pop-up. O Dreamweaver tambm identifica a chave primria de cada tabela e os tipos de dados de cada coluna.
3.
4.
724
Exibir o Live Data na visualizao do projeto

O Dreamweaver pode exibir o contedo dinmico de uma pgina durante o seu trabalho nessa pgina na visualizao do projeto. Para obter mais informaes sobre a visualizao do cdigo, consulte Alternar entre visualizaes na janela do documento na pgina 56.
Para exibir o contedo dinmico na visualizao do projeto:
1.
Certifique-se de que o Dreamweaver esteja configurado adequadamente para exibir o Live Data. Para obter mais informaes, consulte Requisitos para exibio do Live Data na pgina 727.
2.
Selecione View (Exibir)> Live Data. O Dreamweaver exibe a pgina na visualizao do projeto completa com contedo dinmico.
Quando o Live Data ativado na visualizao do projeto, possvel fazer o seguinte:

Ajustar o layout da pgina utilizando as ferramentas de design da pgina Adicionar, editar ou excluir o contedo dinmico Adicionar, editar ou excluir comportamentos de servidor
N OT A
Os links no funcionam no modo de visualizao do projeto. Para testar seus links, utilize o recurso Preview in Browser (Visualizar no navegador). Consulte Visualizar pginas dinmicas em um navegador na pgina 732.
Quando voc fizer na pgina uma alterao que afete o contedo dinmico, poder atualizar essa pgina clicando no boto Refresh (Atualizar), que exibe o cone de seta em crculo. O Dreamweaver tambm pode atualizar automaticamente a pgina.
725
As ilustraes a seguir mostram uma pgina dinmica com Live Data desativado.
As ilustraes a seguir mostram a mesma pgina com Live Data ativado:
726
Tpicos relacionados Copiar arquivos dependentes na pgina 728

Fornecer os parmetros esperados para a pgina na pgina 729 Atualizar a pgina na pgina 730 Soluo de problemas na visualizao do Live Data na pgina 730 Trabalhar na visualizao do projeto sem o Live Data na pgina 731
Requisitos para exibio do Live Data

Para exibir live data na visualizao do projeto, voc deve fazer o seguinte:
Definir uma pasta para processar pginas dinmicas. Para obter instrues, consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667. Quando voc ativa o Live Data, enviada pasta uma cpia temporria do documento aberto, para processamento. A pgina resultante ser retornada e exibida na visualizao do projeto, enquanto a cpia temporria que estiver no servidor ser excluda. Se a pgina exibir uma mensagem de erro quando voc ativar o Live Data, certifique-se de que o prefixo da URL na caixa de dilogo Site Definition (Definio do site) esteja correto. Para obter mais informaes, consulte Efetuar a conexo com um banco de dados na pgina 668.
Copie os arquivos relacionados (se houver) para a pasta. Para obter mais informaes, consulte Copiar arquivos dependentes na pgina 728. Crie a pgina com todos os parmetros que um usurio normalmente criaria. Para obter instrues, consulte Fornecer os parmetros esperados para a pgina na pgina 729.
Se tiver dificuldade ao obter a visualizao do Live Data para trabalhar, consulte Soluo de problemas na visualizao do Live Data na pgina 730. Tpicos relacionados Exibir o Live Data na visualizao do projeto na pgina 725 Trabalhar na visualizao do projeto sem o Live Data na pgina 731
727
Copiar arquivos dependentes

Algumas pginas dinmicas dependem de outros arquivos para um funcionamento adequado. necessrio carregar todos os arquivos relacionados, inclusive as incluses do servidor e arquivos dependentes, como arquivos de imagem e arquivos de classe JSP, para a pasta definida para processamento de pginas dinmicas (consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667). Quando voc ativa o Live Data no modo de visualizao do projeto, o Dreamweaver no copia automaticamente para a pasta os arquivos dependentes.
N OT A
O Live Data oferece suporte a cdigos em incluses do servidor e arquivos de aplicativo como global.asa (ASP) e application.cfm (ColdFusion). Antes de ativar o Live Data, certifique-se de carregar estes arquivos para o servidor.
Para copiar os arquivos dependentes para o servidor de aplicativos:

1.
Abra o painel Site, em Window (Janela)> Site Files (Arquivos do site), e clique no boto Expand (Expandir), que o ltimo cone na barra de ferramentas do painel. O painel Site se expandir para o tamanho mximo. Clique no cone Application Server (Servidor de aplicativos) na barra de ferramentas expandida do painel Site (segundo cone da esquerda para a direita). A pasta da raiz do servidor de aplicativos ser exibida abaixo de Remote Site (Site remoto). Em Local Folder (Pasta local), selecione os arquivos dependentes. Clique na seta azul voltada para cima na barra de ferramentas para copiar os arquivos para o servidor de aplicativos ou arraste esses arquivos para a pasta apropriada em Remote Site (Site remoto).
2.
3. 4.
Faa isso apenas uma vez para seu site, exceto se adicionar mais arquivos dependentes. Nesse caso, ser necessrio copi-los para a pasta tambm. Tpicos relacionados Exibir o Live Data na visualizao do projeto na pgina 725

Requisitos para exibio do Live Data na pgina 727 Atualizar a pgina na pgina 730 Soluo de problemas na visualizao do Live Data na pgina 730
728
Fornecer os parmetros esperados para a pgina

Para gerar contedo dinmico, algumas pginas requerem parmetros do usurio, por exemplo: uma pgina precisa do nmero de identificao de um registro para localizar e exibir esse registro. Sem esses dados, o Dreamweaver no pode gerar o contedo dinmico a ser exibido na visualizao do projeto. Se uma pgina espera parmetros do usurio, necessrio fornec-los da seguinte maneira.
Para fornecer pgina os dados que so esperados do usurio:
1.
Na janela Document (Documento), selecione Live Data Settings (Definies do Live Data) no menu View (Exibir). A caixa de dilogo Live Data Settings exibida.
2.
Se tiver especificado o mtodo GET na caixa de dilogo Live Data Settings, a barra de ferramentas do Design view exibir uma caixa de texto. Utilize essa caixa de texto para digitar outros parmetros de URL e, em seguida, clique no boto Refresh (Atualizar), que exibe o cone de seta em crculo, para ver como os parmetros afetam a pgina. Digite cada parmetro de URL no seguinte formato:
name=value;
Neste formato, name o nome do parmetro da URL esperado pela pgina, e value corresponde ao valor assumido por aquele parmetro. Para obter mais informaes, consulte Parmetros da URL na pgina 749.
729
Tpicos relacionados Exibir o Live Data na visualizao do projeto na pgina 725

Requisitos para exibio do Live Data na pgina 727 Copiar arquivos dependentes na pgina 728 Soluo de problemas na visualizao do Live Data na pgina 730
Atualizar a pgina
Para atualizar a pgina:
Com o Live Data ativado, clique no boto Refresh (Atualizar), que exibe o cone de seta em crculo, na barra de ferramentas Document (Documento), para atualizar a pgina aps fazer alteraes que afetem o contedo dinmico. Tambm possvel selecionar a opo Auto Refresh (Atualizao automtica) na barra de ferramentas. Com essa opo ativada, a pgina atualizada sempre que fizer uma alterao que afeta o contedo dinmico. Se a conexo com o banco de dados for lenta, deixe esta opo em branco enquanto estiver trabalhando na janela do Live Data.
Tpicos relacionados Exibir o Live Data na visualizao do projeto na pgina 725 Requisitos para exibio do Live Data na pgina 727 Copiar arquivos dependentes na pgina 728 Fornecer os parmetros esperados para a pgina na pgina 729
Soluo de problemas na visualizao do Live Data

Muitos problemas com a visualizao do Live Data tm sua origem em valores ausentes ou incorretos na caixa de dilogo Site Definition (Definio do site), em Site > Edit Sites (Editar sites). Verifique a categoria Testing Server (Servidor de teste) da caixa de dilogo Site Definition. A caixa de texto Remote Folder (Pasta remota) deve especificar uma pasta capaz de processar pginas dinmicas (consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667). Veja a seguir um exemplo de uma pasta remota adequada se estiver executando IIS ou PWS no disco rgido: C:\Inetpub\wwwroot\myapp\
730
Verifique se a caixa URL Prefix (Prefixo da URL) especifica uma URL que corresponda pasta remota (ou indique-a). Por exemplo: se o PWS ou IIS for executado no computador local, as seguintes pastas remotas tero os seguintes prefixos URL:
Pasta remota
C:\Inetpub\wwwroot C:\Inetpub\wwwroot\myapp\ C:\Inetpub\wwwroot\fs\planes
prefixo da URL
http://localhost/ http://localhost/myapp/ http://localhost/fs/planes
Para obter mais informaes, consulte Efetuar a conexo com um banco de dados na pgina 668. Tpicos relacionados Exibir o Live Data na visualizao do projeto na pgina 725

Requisitos para exibio do Live Data na pgina 727 Copiar arquivos dependentes na pgina 728 Fornecer os parmetros esperados para a pgina na pgina 729 Atualizar a pgina na pgina 730
Trabalhar na visualizao do projeto sem o Live Data

Se o Live Data estiver desativado ou se for temporariamente desconectado do servidor de aplicativos, ainda ser possvel trabalhar com suas pginas dinmicas na visualizao do projeto. O Dreamweaver utiliza alocadores de espao para representar visualmente o contedo dinmico na pgina. Por exemplo, o alocador de espao para texto dinmico extrado de um banco de dados utiliza a sintaxe {RecordsetName.ColumnName}, onde Recordset o nome do recordset e ColumnName o nome da coluna escolhida do recordset. s vezes, o comprimento dos alocadores de espao de texto dinmico distorce o layout da pgina na visualizao do projeto. possvel resolver o problema utilizando as chaves vazias como alocadores de espao.
Para utilizar as chaves vazias como alocadores de espao para texto dinmico:
1.
Selecione Edit (Editar) > Preferences (Preferncias) > Invisible Elements (Elementos invisveis) ou Dreamweaver > Preferences > Invisible Elements (Mac OS X). No menu pop-up Show Dynamic Text As (Mostrar texto dinmico como), selecione {}.
2.
Trabalhar na visualizao do projeto sem o Live Data
731
3.
Clique em OK.
Tpicos relacionados Exibir o Live Data na visualizao do projeto na pgina 725
Requisitos para exibio do Live Data na pgina 727
Visualizar pginas dinmicas em um navegador

Os desenvolvedores de aplicativos para a Web geralmente depuram suas pginas verificando-as com freqncia em um navegador da Web. O Dreamweaver possibilita esse estilo de trabalho com o comando Preview in Browser (Visualizar no navegador) (F12). O comando permite exibir rapidamente pginas dinmicas em um navegador sem que seja preciso carreg-las manualmente em um servidor.
DICA 732
possvel tambm utilizar a visualizao do projeto para verificar rapidamente suas pginas enquanto trabalha nelas. A visualizao do projeto exibe uma representao visual e totalmente editvel da sua pgina, incluindo Live Data. Para obter mais informaes, consulte Exibir o Live Data na visualizao do projeto na pgina 725.
Voc pode determinar que o Dreamweaver utilize arquivos temporrios, no lugar de arquivos originais. Com essa opo, o Dreamweaver executar uma cpia temporria da pgina no servidor da Web antes de exibi-la no navegador. Em seguida, o Dreamweaver exclui o arquivo temporrio do servidor. Para definir esta opo, selecione Edit (Editar) > Preferences (Preferncias)> Preview in Browser (Visualizar no navegador). Para visualizar as pginas dinmicas, voc deve completar a categoria Testing Server (Servidor de teste) na caixa de dilogo Site Definition. Para obter mais informaes, consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667. A opo Preview in Browser (Visualizar no navegador) no carrega as pginas relacionadas, como as pginas de resultados ou de detalhes, os arquivos dependentes, como os arquivos de imagens, ou as incluses do servidor. Para carregar um arquivo ausente, selecione Window (Janela)> Site para abrir o painel Site. Selecione o arquivo em Local Folder (Pasta local) e clique na seta azul voltada para cima da barra de ferramentas para copiar o arquivo para a pasta do servidor da Web.
Restringir uma informao do banco de dados no Dreamweaver

Os usurios avanados de sistemas de bancos de dados mais complexos, como o Oracle, devem restringir o nmero de itens do banco de dados recuperados e exibidos pelo Dreamweaver na fase de design. O banco de dados Oracle pode conter itens que o Dreamweaver no conseguir processar na fase de design. No Oracle, possvel criar um esquema e, em seguida, utiliz-lo no Dreamweaver para filtrar itens desnecessrios na fase de design.
NO T A
Outros usurios podero se beneficiar da restrio da quantidade de informao a ser recuperada pelo Dreamweaver na fase de design. Como alguns bancos de dados contm dezenas ou at mesmo centenas de tabelas, recomendvel evitar que o Dreamweaver apresente todas as tabelas enquanto voc trabalha. Um esquema ou um catlogo pode restringir o nmero de itens de banco de dados que o Dreamweaver obtm na fase de design. Voc deve criar um esquema ou catlogo no sistema de banco de dados para que possa apliclo ao Dreamweaver. Consulte a documentao do sistema do banco de dados ou o administrador do sistema. Voc no poder aplicar um esquema ou catlogo no Dreamweaver se estiver desenvolvendo um aplicativo ColdFusion.
Restringir uma informao do banco de dados no Dreamweaver
733
Para aplicar um esquema ou catlogo no Dreamweaver a um aplicativo diferente do ColdFusion:

1.
Abra uma pgina dinmica no Dreamweaver e, em seguida, abra o painel Databases (Bancos de dados), em Window (Janela) > Databases. Se a conexo ao banco de dados j existir, ser exibida uma lista de conexes no painel. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada (no Macintosh) e clique na conexo. Em seguida, selecione Edit Connection (Editar conexo) no menu pop-up. A caixa de dilogo correspondente conexo exibida. Se a conexo no existir, ser preciso cri-la clicando no boto de adio (+) na parte superior do painel. Para obter mais informaes, consulte Efetuar a conexo com um banco de dados na pgina 668.
2.
3.
Na caixa de dilogo da conexo, clique em Advanced (Avanado). A caixa de dilogo Restrict (Restringir) exibida. Especifique o seu esquema ou catlogo. Clique em OK.
4. 5.
734
CAPTULO 31
Fluxo de trabalho para projetos de pginas dinmicas

Uma das principais vantagens oferecidas pelo Macromedia Dreamweaver 8 a possibilidade de criar sites da web dinmicos, sem que seja necessrio experincia em linguagens de programao. As ferramentas visuais do Dreamweaver permitem o desenvolvimento de sites da Web dinmicos, sem a necessidade de codificar manualmente a complexa lgica de programao exigida na criao de sites com exibio de contedo dinmico armazenado em um banco de dados. Com o Dreamweaver, possvel criar sites dinmicos da Web utilizando qualquer uma das diversas linguagens de programao para Web e tecnologias de servidor conhecidas. Entre elas esto Macromedia ColdFusion, ASP.NET, Microsoft Active Server Pages (ASP), JavaServer Pages (JSP) e PHP. Este captulo descreve as principais etapas que voc deve seguir para projetar e criar com xito um site dinmico da Web. Ao final de cada seo, so apresentadas referncias aos procedimentos especficos necessrios para desenvolver uma pgina dinmica. As cinco principais etapas do desenvolvimento de uma pgina da Web dinmica so as seguintes:
Projetar a pgina. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735 Criar uma fonte de contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 736 Adicionar contedo dinmico a uma pgina da Web . . . . . . . . . . . . . . . . . . . . . . . . . 738 Aprimorar a funcionalidade de uma pgina dinmica. . . . . . . . . . . . . . . . . . . . . . . . .739 Testar e depurar a pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741
31
Projetar a pgina
Uma das principais etapas da criao de qualquer site da Web, seja esttico ou dinmico, o projeto visual da pgina. Com a incluso de elementos dinmicos em uma pgina da Web, o projeto da pgina torna-se crucial para seu aproveitamento. Considere com cuidado a forma como os usurios vo interagir com as pginas e com o site da Web como um todo.
735
Um mtodo conhecido para incorporar contedo dinmico a uma pgina da Web criar uma tabela para apresentar o contedo e importar o contedo dinmico para uma ou mais clulas da tabela. Com esse mtodo, possvel apresentar informaes de diversos tipos em um formato estruturado. Para obter informaes sobre como projetar pginas, consulte os captulos a seguir:

Captulo 8, Apresentar contedo com tabelas, na pgina 257 Captulo 9, Criao de pginas no modo Layout, na pgina 283 Captulo 12, Trabalhar com pginas, na pgina 375 Captulo 13, Inserir e formatar texto, na pgina 405 Captulo 14, Inserir imagens, na pgina 445 Captulo 15, Links e navegao, na pgina 461 Captulo 17, Adicionar udio, vdeo e elementos interativos, na pgina 515
Criar uma fonte de contedo dinmico

Os sites dinmicos da Web exigem uma fonte de contedo da qual extraem os dados a serem exibidos em uma pgina da Web. No Dreamweaver, essas fontes de dados podem ser bancos de dados, variveis de solicitao, variveis de servidor, variveis de formulrio ou procedimentos armazenados. Para poder utilizar essas fontes de contedo em uma pgina da Web, necessrio primeiramente:
Criar uma conexo com a fonte de contedo dinmico (um banco de dados, por exemplo) e com o servidor de aplicativos que est processando a pgina Especificar as informaes contidas no banco de dados que devero ser exibidas ou as variveis a serem includas na pgina Utilizar a interface do tipo apontar-e-clicar do Dreamweaver para selecionar e inserir elementos de contedo dinmico na pgina selecionada
O Dreamweaver tambm permite que voc se conecte facilmente a um banco de dados e crie um recordset do qual ser extrado o contedo dinmico. Um recordset o resultado de uma consulta ao banco de dados. Ele extrai as informaes especficas solicitadas pelo usurio e permite exibir essas informaes em uma pgina especfica. O recordset deve ser definido com base nas informaes contidas no banco de dados e no contedo que voc deseja exibir.
736
Captulo 31: Fluxo de trabalho para projetos de pginas dinmicas
Diferentes fornecedores de tecnologia podem utilizar diferentes terminologias para fazer referncia a um recordset. Nas tecnologias ASP e ColdFusion, um recordset definido como uma consulta (query). Em JSP, um recordset denominado conjunto de resultados (resultset). ASP.NET refere-se a um recordset como DataSet. Se voc estiver utilizando outras fontes de dados, como entradas do usurio ou variveis de servidor, o nome da fonte de dados definido no Dreamweaver ser igual ao nome da prpria fonte de dados. Para utilizar uma fonte de contedo no Dreamweaver, utilize o painel Bindings (Ligaes) para criar a fonte de dados. O painel Bindings, mostrado a seguir, permite criar fontes de dados para bancos de dados e diferentes tipos de varivel. Quando se cria uma fonte de dados, ela armazenada no painel Bindings, onde pode ser selecionada e inserida na pgina atual.
Para criar um recordset no Dreamweaver, necessrio utilizar a caixa de dilogo Recordset (Conjunto de registros). possvel iniciar a caixa de dilogo Recordset no painel Server (Servidor) da barra Insert (Inserir) ou no painel Bindings. A caixa de dilogo Simple Recordset (Conjunto de registros simples) permite selecionar uma conexo de banco de dados existente e criar uma consulta de banco de dados selecionando as tabelas cujos dados sero includos no recordset. possvel at mesmo utilizar a seo Filter (Filtro) da caixa de dilogo para criar critrios simples de pesquisa e retorno para a consulta. possvel testar a consulta na caixa de dilogo Recordset e fazer quaisquer ajustes necessrios antes de adicion-la ao painel Bindings.
Criar uma fonte de contedo dinmico
737
Uma vez estabelecida a conexo com o banco de dados e aps a definio de um recordset, o recordset exibido no painel Bindings. Nesse painel, possvel importar o recordset para qualquer pgina da Web do site definido. A ilustrao abaixo mostra o painel Bindings com o recordset referente a um banco de dados de funcionrios aberto. possvel inserir em uma pgina da Web qualquer um dos valores mostrados, selecionar o item e clicar no boto Insert na parte inferior do painel. O item selecionado inserido no alocador de espao especificado na pgina.
Para obter informaes sobre bancos de dados e os procedimentos necessrios para criar uma conexo com o banco de dados, consulte os seguintes captulos:

Captulo 32, Obter dados para a pgina, na pgina 745 Apndice A, Guia do iniciante em bancos de dados, na pgina 1085,
Adicionar contedo dinmico a uma pgina da Web

Aps definir um recordset ou outra fonte de dados e adicion-lo ao painel Bindings (Ligaes), voc pode inserir o contedo dinmico representado pelo recordset na pgina. A interface baseada em menus do Dreamweaver torna a adio de elementos de contedo dinmico to fcil quanto selecionar uma fonte de contedo dinmico no painel Bindings e inseri-la em um objeto de texto, imagem ou formulrio apropriado na pgina atual. Quando voc inclui um elemento de contedo dinmico ou outro comportamento de servidor em uma pgina, o Dreamweaver insere um script de servidor no cdigo-fonte da pgina. Esse script instrui o servidor a recuperar dados da fonte de dados definida e processlos na pgina da Web.
Para colocar um contedo dinmico em uma pgina da Web, voc pode seguir um destes procedimentos:
738
Colocar o contedo no ponto de insero na visualizao do cdigo ou na visualizao do projeto Substituir uma seqncia de texto ou outro alocador de espao.
Inseri-lo em um atributo HTML. Por exemplo, o contedo dinmico pode definir o atributo src de uma imagem ou o atributo value de um campo de formulrio. Para conhecer os procedimentos detalhados de adio de contedo dinmico a uma pgina, consulte:

Captulo 33, Definir as fontes de contedo dinmico, na pgina 759 Captulo 39, Criar formulrios, na pgina 885
Aprimorar a funcionalidade de uma pgina dinmica

Alm de adicionar contedo dinmico, o Dreamweaver permite incorporar facilmente uma lgica complexa de aplicativos s pginas da Web por meio do Server Behaviors (Comportamentos de servidor) . Os Server Behaviors so partes predefinidas do cdigo do servidor, que adicionam lgica de aplicativos s pginas da Web, proporcionando maior interao e funcionalidade. Os comportamentos de servidor do Dreamweaver permitem adicionar a lgica de aplicativos a um site da Web sem gravar o cdigo. Os comportamentos de servidor fornecidos no Dreamweaver oferecem suporte a tipos de documentos ColdFusion, ASP, ASP.NET, JSP e PHP. Os comportamentos de servidor so gravados e testados para serem rpidos, seguros e confiveis. Os comportamentos de servidor internos do Dreamweaver foram criados para oferecer suporte a pginas da Web em vrias plataformas, para todos os navegadores.
Adicionar comportamentos de servidor a uma pgina

Para adicionar comportamentos de servidor a uma pgina, selecione-os na categoria Application (Aplicativo) da barra Insert (Inserir) ou no painel Server Behavior. Para utilizar o painel Server Behaviors (Comportamentos de servidor), selecione Window (Janela) > Server Behaviors, clique no boto de adio (+) no painel e escolha um comportamento de servidor no menu pop-up. A ilustrao a seguir mostra os botes Server Behavior disponveis na barra Insert (Inserir).
Aprimorar a funcionalidade de uma pgina dinmica
739
O Dreamweaver oferece uma interface do tipo apontar-e-clicar que faz com que a aplicao de contedo dinmico e de comportamentos complexos seja to simples quanto inserir elementos textuais e de design. Os seguintes comportamentos de servidor esto disponveis:
Definir um recordset a partir de um banco de dados existente. O recordset definido armazenado no painel Bindings (Ligaes). Exibir vrios registros em uma nica pgina. Selecione uma tabela inteira ou clulas ou linhas individuais que tenham contedo dinmico e especifique o nmero de registros a serem exibidos em cada visualizao de pgina. Criar e inserir uma tabela dinmica em uma pgina e associar a tabela a um recordset. Posteriormente, voc pode modificar a aparncia das tabelas e a regio repetida com o Property inspector (Inspetor de propriedades) e o Repeated Region Server Behavior (Comportamento de servidor da regio repetida), respectivamente. Inserir um objeto de texto dinmico em uma pgina. O objeto de texto que voc inseriu um item de um recordset predefinido, ao qual possvel aplicar qualquer um dos formatos de dados do Dreamweaver. Criar controles de status e de navegao de registro, pginas-mestras/detalhes e formulrios para atualizar informaes contidas em um banco de dados. Exibir mais de um registro de um recordset do banco de dados. Criar links de navegao para recordsets que permitem exibir os registros anterior e seguinte de um recordset do banco de dados. Adicionar um contador de registros para ajudar a controlar a quantidade de registros que foram retornados e a respectiva localizao no resultado.
Voc tambm pode estender os comportamentos de servidor do Dreamweaver criando comportamentos prprios ou instalando comportamentos desenvolvidos por outros fabricantes. Para obter mais informaes sobre como aprimorar a funcionalidade de pginas da Web utilizando comportamentos de servidor, consulte os seguintes captulos:

Captulo 34, Adicionar contedo dinmico a pginas da Web, na pgina 781 Captulo 35, Exibir registros de bancos de dados, na pgina 793 Captulo 40, Criar aplicativos ColdFusion rapidamente, na pgina 909 Captulo 41, Criar aplicativos ASP.NET rapidamente, na pgina 987 Captulo 42, Criar aplicativos ASP e JSP rapidamente, na pgina 1033 Captulo 43, Criar aplicativos PHP rapidamente, na pgina 1057
740
Testar e depurar a pgina

Antes de tornar uma pgina dinmica ou um site inteiro disponvel na Web, teste sua funcionalidade. Para obter diretrizes que o ajudem a testar a capacidade de utilizao de um site da Web e a compatibilidade entre plataformas, consulte Diretrizes de teste de site na pgina 172. Para obter mais informaes sobre como projetar sites da Web para portadores de deficincia auditiva, visual ou outras deficincias, consulte Utilizar os recursos de acessibilidade do Dreamweaver na pgina 70. necessrio familiarizar-se com as questes descritas neste captulo e levar em considerao o modo como a funcionalidade dos aplicativos pode interessar aos portadores de deficincia. Esta seo contm os tpicos a seguir:

Teste do contedo dinmico na pgina 741 Editar o contedo dinmico de uma pgina na pgina 742 Excluir o contedo dinmico na pgina 743
Teste do contedo dinmico

O Dreamweaver permite visualizar e editar o contedo dinmico por meio da janela do Live Data.
NO T A

Os links no funcionam na janela Live Data. Para test-los, utilize o recurso Preview (Visualizao) no navegador do Dreamweaver. Consulte Verificar a compatibilidade com navegadores na pgina 635.
Enquanto o contedo dinmico estiver sendo exibido, possvel executar as seguintes tarefas: Ajustar o layout da pgina utilizando as ferramentas de projeto de pgina do Dreamweaver Adicionar, editar ou excluir o contedo dinmico Adicionar, editar ou excluir comportamentos de servidor
Para obter este efeito, o Dreamweaver executa a pgina dinmica no servidor antes de exibi-la na janela do Live Data. Sempre que o usurio alterna para a janela do Live Data, uma cpia temporria do documento aberto enviada para o servidor de aplicativos para fins de processamento. A pgina resultante retornada e exibida na janela do Live Data e a cpia temporria que est no servidor excluda. Para alternar entre as janelas Document (Documento) e Live Data, selecione a opo Live Data no menu View (Exibir). Se uma pgina precisar de dados do usurio, como, por exemplo, o nmero de identificao de um registro selecionado em uma pgina mestra, o prprio usurio poder fornecer esses dados na caixa de dilogo Live Data Settings (Definies do Live Data).
741
Para digitar parmetros do Live Data:

1. 2.
Fazer as alteraes necessrias na pgina. Se a pgina precisar de parmetros de URL de um formulrio HTML que utilize o mtodo GET, digite os pares de nome/valor na caixa de texto exibida na barra de ferramentas e clique no boto Refresh (Atualizar) (o cone em forma de seta circular. Digite os dados de teste no seguinte formato: name=value; Neste formato, name o nome do parmetro da URL esperado pela pgina e value corresponde ao valor assumido por esse parmetro. Tambm possvel definir os pares nome/valor na caixa de dilogo Live Data Settings, em View (Exibir) > Live Data Settings, e salv-los com a pgina.
3.
Para atualizar a pgina, clique no boto Refresh.
Tpicos relacionados Editar o contedo dinmico de uma pgina na pgina 742
Excluir o contedo dinmico na pgina 743
Editar o contedo dinmico de uma pgina

possvel modificar ou remover o contedo dinmico de uma pgina alterando-se o comportamento de servidor que fornece o contedo ou excluindo-se o comportamento. Por exemplo: possvel editar um comportamento de servidor do recordset para que retorne mais registros pgina. O contedo dinmico de uma pgina listado no painel Server Behaviors (Comportamentos de servidor). Por exemplo, quando um recordset adicionado pgina, o painel Server Behaviors lista o recordset da seguinte forma:
Recordset(myRecordset)
Se voc adicionar outro recordset pgina, o painel Server Behaviors listar os dois recordsets da seguinte forma:
Recordset(mySecondRecordset) Recordset(myRecordset)
Para editar um comportamento de servidor que fornece contedo dinmico:

1.
Abra o painel Server Behaviors (Comportamentos de servidor), a partir da seleo de Window (Janela) > Server Behaviors.
742
2.
Clique no boto de adio (+) para exibir os comportamentos de servidor e, no painel Server Behaviors, clique duas vezes no comportamento de servidor desejado. exibida a caixa de dilogo que foi utilizada para definir a fonte de dados original. Faa as alteraes na caixa de dilogo e clique em OK.
3.
Tambm possvel utilizar o Property inspector (Inspetor de propriedades) para editar os recordsets da pgina. Abra o Property inspector em Window > Properties (Propriedades), e selecione o recordset no painel Server Behaviors, em Window > Server Behaviors. Tpicos relacionados Teste do contedo dinmico na pgina 741
Excluir o contedo dinmico

Aps adicionar o contedo dinmico a uma pgina, possvel exclui-lo selecionando-o na pgina e pressionando a tecla Delete. Tambm possvel excluir o contedo dinmico atravs de sua seleo no painel Server Behaviors (Comportamentos de servidor) e, em seguida, clicando no boto de subtrao (-).
N OT A
Essa operao remove o script do servidor na pgina que recupera o contedo dinmico do banco de dados. Ela no exclui os dados do banco de dados.
Tpicos relacionados Teste do contedo dinmico na pgina 741 Editar o contedo dinmico de uma pgina na pgina 742
743
744
CAPTULO 32
Obter dados para a pgina

Aplicativos baseados na Web e sites da web dinmicos requerem uma fonte de contedo da qual se recuperam dados. Os dados e as fontes de dados podem ter diversos formatos. Geralmente, os dados consistem em informaes textuais ou numricas retornadas para uma pgina da Web e exibidas para o usurio em determinado formato. Este captulo contm as seguintes sees:
32
Utilizar um banco de dados para armazenar contedo . . . . . . . . . . . . . . . . . . . . . . .745 Coletar dados enviados por usurios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 747 Acessar dados armazenados em variveis de sesso . . . . . . . . . . . . . . . . . . . . . . . . 752
Utilizar um banco de dados para armazenar contedo

O uso de um banco de dados para armazenar contedo permite separar o projeto do site da Web do contedo que voc deseja exibir para usurios do site. Em vez de criar arquivos HTML individuais para cada pgina, necessrio apenas escrever uma pgina (ou modelo) para os diferentes tipos de informaes a serem apresentadas. Utilizando um banco de dados, possvel prover um site da Web com novo contedo. Basta carregar o contedo no banco de dados e, em seguida, o site da Web recupera esse contedo de modo dinmico em resposta solicitao de um usurio. Uma das principais vantagens de armazenar informaes de contedo em um banco de dados a possibilidade de atualizar essas informaes em uma nica fonte e, em seguida, distribuir essa alterao por todo o site da Web, sem precisar pesquisar as pginas que possam conter as informaes e editar cada pgina manualmente.
745
Os bancos de dados tm vrios formatos, dependendo do volume e da complexidade dos dados que devem armazenar. Um 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 fcil de usar que permite trabalhar com tabelas de banco de dados. Embora seja possvel utilizar o Access como fonte de dados para a maioria dos aplicativos para sites da Web, o programa est limitado a arquivos de 2 GB e pode ser utilizado por 255 usurios simultneos, no mximo. Por esse motivo, o Access uma opo mais adequada para o desenvolvimento de sites da Web e grupos de trabalho corporativos. No entanto, se houver necessidade de acesso de um grande nmero de usurios ao site, planeje a utilizao de um banco de dados projetado para oferecer suporte base pretendida de usurios do site. Para os sites da Web que exigem maior grau de flexibilidade na criao de um modelo de dados e a capacidade de oferecer suporte a grandes comunidades de usurios simultneos, os bancos de dados relacionais baseados em servidor (normalmente conhecidos como RDBMS) so utilizados com freqncia. Dentre os bancos de dados relacionais mais utilizados para armazenar o contedo de aplicativos baseados na Web e sites dinmicos destacam-se MySQL, Microsoft SQL Server e Oracle. Independentemente do banco de dados usado no suporte ao site da Web, possvel utilizar o Macromedia Dreamweaver 8 para projetar formulrios da Web destinados a inserir, atualizar ou excluir dados do banco de dados. Para aprender mais sobre bancos de dados, consulte Apndice A, Guia do iniciante em bancos de dados, na pgina 1085.
Acessar dados armazenados em um banco de dados

As pginas da Web no podem acessar de forma direta os dados armazenados em um banco de dados. Em vez disso, elas interagem com um recordset. Um recordset um subconjunto das informaes (ou registros) extradas do banco de dados. Esse subconjunto de informaes extrado utilizando uma consulta ao banco de dados. Uma consulta consiste em uma instruo de pesquisa criada para localizar e extrair informaes especficas de um banco de dados. O Dreamweaver utiliza a SQL (Structured Query Language) para criar as consultas. Embora no seja necessrio ser conhecedor de SQL para criar consultas simples com o Dreamweaver, algum conhecimento bsico dessa linguagem fcil de ser aprendida permite criar consultas mais avanadas e, desse modo, proporciona maior flexibilidade para desenvolver pginas dinmicas. Para aprender os conceitos bsicos de SQL, consulte Apndice B, Manual bsico de SQL, na pgina 1101.
746
Captulo 32: Obter dados para a pgina
Uma consulta SQL pode produzir um recordset que contenha apenas determinadas colunas, apenas determinados registros ou uma combinao de ambos. Um recordset tambm 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, recomendado reduzir ao mximo os recordsets. Como o servidor Web armazena o recordset temporariamente na memria, o uso de um recordset menor consome menos memria e pode melhorar o desempenho do servidor.
Coletar dados enviados por usurios

possvel utilizar pginas da Web para coletar informaes de usurios, armazen-las na memria do servidor e us-las para criar uma resposta dinmica com base na entrada do usurio. As ferramentas mais conhecidas para a coleta de informaes so os formulrios HTML e as selees de link de hipertexto. Os formulrios HTML permitem coletar informaes de usurios e armazen-las na memria do servidor. Um formulrio HTML pode enviar as informaes como parmetros de formulrio ou parmetros da URL. Se o atributo de mtodo do formulrio for definido como POST, o navegador incluir os valores do formulrio no corpo da mensagem enviada ao servidor. Se o atributo de mtodo do formulrio for definido como GET, o navegador anexar os valores do formulrio URL especificada no atributo de ao e enviar as informaes ao servidor. Os links de hipertexto tambm permitem coletar informaes de usurios e armazen-las na memria do servidor. Para especificar um valor ou valores a serem enviados quando um usurio clicar em um link (uma preferncia, por exemplo), necessrio anexar o valor URL especificada na tag de ancoragem. Quando um usurio clica no link, o navegador envia ao servidor a URL e o valor anexado. Esta seo descreve como criar parmetros de formulrio e URL para uso em aplicativos da Web.
Parmetros de formulrio
Os parmetros de formulrio so enviados ao servidor por meio de um formulrio HTML utilizando o mtodo POST ou GET. Se o mtodo POST for utilizado, os parmetros sero enviados com o corpo da mensagem. De outro modo, o mtodo GET anexa os parmetros URL solicitada.
747
possvel utilizar o Dreamweaver para criar formulrios HTML que enviem parmetros de formulrio ao servidor de modo rpido. Para obter instrues, consulte Captulo 39, Criar formulrios, na pgina 885. Tenha cuidado ao escolher o mtodo utilizado para transmitir informaes do navegador para o servidor. Os parmetros do formulrio assumem os nomes dos objetos de formulrio correspondentes. Por exemplo: se o formulrio contm um campo de texto denominado txtLastName, o seguinte parmetro de formulrio enviado ao servidor quando o usurio clica no boto Submit (Enviar):
txtLastName=enteredvalue
Nos casos em que um aplicativo da Web necessitar de um valor de parmetro preciso (por exemplo, quando ele executar uma ao com base em uma dentre vrias opes), utilize um objeto de formulrio de boto de opo, caixa de seleo ou lista/menu para controlar os possveis valores a serem enviados pelo usurio. Isso impede que os usurios digitem as informaes de forma incorreta e causem um erro de aplicativo. O exemplo a seguir ilustra um formulrio de menu pop-up com trs opes:
Cada opo de menu corresponde a um valor inserido no cdigo que enviado ao servidor como um parmetro de formulrio. A caixa de dilogo List Values (Valores da lista), mostrada a seguir, faz a correspondncia entre cada item da lista e um valor, como Add (Adicionar), Update (Atualizar) ou Delete (Excluir):
748
Tpicos relacionados Parmetros da URL na pgina 749

Criar parmetros de URL utilizando links HTML na pgina 751 Recuperar parmetros de formulrio e URL na pgina 751
Parmetros da URL
Um parmetro da URL um par nome/valor anexado a uma URL. O parmetro comea com um ponto de interrogao (?) e assume o formato name=value. Quando h mais de um parmetro da URL, cada parmetro separado por um 'e' comercial (&). O exemplo a seguir mostra um parmetro de URL com dois pares nome/valor:
http://server/path/document?name1=value1&name2=value2
Os parmetros de URL permitem passar as informaes fornecidas pelo usurio do navegador para o servidor. Quando um servidor recebe uma solicitao e os parmetros so anexados URL da solicitao, o servidor coloca os parmetros disposio da pgina solicitada antes de disponibilizar essa pgina ao navegador. Neste exemplo, imagine que o aplicativo a vitrine de uma loja baseada na Web. Como os desenvolvedores do site pretendem atingir o maior pblico possvel, eles projetaram o site para oferecer suporte a moedas estrangeiras. Quando os usurios efetuam logon no site, eles podem selecionar a moeda em que desejam exibir os preos dos itens disponveis.
1.
O navegador solicita a pgina report.cfm do servidor. A solicitao inclui o parmetro de URL Currency=euro. A varivel Currency=euro especifica que todas as quantias monetrias recuperadas sejam exibidas na moeda euro da Unio Europia. O servidor armazena temporariamente o parmetro da URL na memria. A pgina report.cfm recupera e usa o parmetro para recuperar o custo dos itens em euros. Essas quantias monetrias podem ser armazenadas em uma tabela de banco de dados de moedas diferentes ou convertidas de uma nica moeda associada a cada item para qualquer moeda aceita pelo aplicativo.
2. 3.
749
4.
O servidor envia a pgina report.cfm ao navegador e exibe o valor dos itens na moeda solicitada. Quando esse usurio termina a sesso, o servidor destri o valor do parmetro da URL e libera a memria para armazenar as solicitaes dos novos usurios que efetuarem logon no site.
SERVIDOR DA WEB http://www.mysite.com/ report.cfm?Currency="" Currency=""
Navegador da Web
<HTML> </HTML>
report.cfm
Os parmetros de URL so criados quando o mtodo GET do protocolo HTTP usado junto com um formulrio HTML. O mtodo GET especifica que o valor do parmetro seja anexado solicitao de URL quando o formulrio enviado. Os usos mais comuns dos parmetros da URL incluem a personalizao de sites da Web com base nas preferncias de um usurio. Por exemplo: um parmetro de URL formado por um nome de usurio e uma senha pode ser utilizado para autenticar um usurio, exibindo apenas as informaes para as quais o usurio se cadastrou. Os exemplos comuns disso incluem os sites financeiros que exibem preos de aes individuais com base nos smbolos do mercado de aes anteriormente escolhidos pelo usurio. Os programadores de aplicativos para a Web geralmente utilizam parmetros da URL para passar valores s variveis nos aplicativos. possvel, por exemplo, transferir termos de busca para variveis SQL a um aplicativo da Web para que este gere os resultados da pesquisa. Tpicos relacionados Criar parmetros de URL utilizando links HTML na pgina 751 Recuperar parmetros de formulrio e URL na pgina 751
750
Criar parmetros de URL utilizando links HTML

Para criar parmetros de URL em um link HTML, utilize o atributo href da tag de ancoragem HTML. possvel inserir os parmetros de URL diretamente no atributo, alternando para a visualizao do cdigo (View (Exibir) > Code (Cdigo) ou anexando os parmetros de URL no final da URL de link na caixa de texto Link do Property inspector (Inspetor de propriedades). No exemplo a seguir, trs links criam um nico parmetro de URL (action) com trs possveis valores (Add, Update e Delete). Dependendo do link em que o usurio clicar, um valor de parmetro diferente ser enviado ao servidor, e a ao solicitada ser executada:
<a href="http://www.mysite.com/index.cfm?action=Add">Add a record</a> <a href="http://www.mysite.com/index.cfm?action=Update">Update a record</a> <a href="http://www.mysite.com/index.cfm?action=Delete">Delete a record</a>
O Property inspector em Window (Janela) > Properties (Propriedades) permite que voc crie os mesmos parmetros de URL, seja selecionando o link ou anexando os valores do parmetro da URL no final da URL de link na caixa de texto Link.
Tpicos relacionados Coletar dados enviados por usurios na pgina 747

Parmetros da URL na pgina 749 Recuperar parmetros de formulrio e URL na pgina 751 Parmetros de URL e de formulrios na pgina 763 Definir os parmetros de URL na pgina 769 Definir os parmetros de formulrio na pgina 771
Recuperar parmetros de formulrio e URL

Aps a criao de um parmetro de formulrio ou URL, o Dreamweaver pode recuperar o valor e utiliz-lo em um aplicativo da Web. Para obter mais informaes, consulte Definir os parmetros de URL na pgina 769. Aps a definio do parmetro de formulrio ou URL no Dreamweaver, possvel inserir o valor do parmetro em uma pgina. Para obter mais informaes, consulte Captulo 34, Adicionar contedo dinmico a pginas da Web, na pgina 781.
751
Tpicos relacionados Acessar dados armazenados em um banco de dados na pgina 746

Parmetros de formulrio na pgina 747 Parmetros da URL na pgina 749 Criar parmetros de URL utilizando links HTML na pgina 751
Acessar dados armazenados em variveis de sesso

As variveis de sesso oferecem um mecanismo por meio do qual as informaes do usurio podem ser armazenadas e acessadas para uso pelos aplicativos da Web. Normalmente, as variveis de sesso armazenam informaes (em geral, parmetros de formulrio ou URL enviados por usurios) e tornam essas informaes disponveis para todas as pginas dos aplicativos durante a visita do usurio. Por exemplo, quando os usurios efetuam logon em um portal da Web que oferece acesso a e-mail, cotaes de aes, previso do tempo e noticirio, o aplicativo da Web armazena as informaes de logon em uma varivel de sesso que identifica o usurio em todas as pginas do site. Isso permite que o usurio veja somente os tipos de contedo que ele selecionou ao navegar pelo site. As variveis de sesso tambm podem fornecer um mecanismo de segurana na forma de tempo limite, que termina a sesso do usurio se a conta permanecer inativa por um longo perodo de tempo. Isso tambm libera a memria do servidor e os recursos de processamento quando os usurios se esquecem de efetuar logoff de um site da Web. As variveis de sesso so normalmente utilizadas para armazenar as preferncias de exibio do usurio, respostas a questionrios de vrias partes, itens selecionados para compra nos aplicativos que funcionam como carro de compras e contadores de pontos obtidos em jogos on-line.
Variveis de sesso
Os servidores da Web (ou, mais precisamente, protocolos HTTP) no contm informaes de status, ou seja, no mantm um registro dos navegadores que se conectam a eles, nem das solicitaes de pginas individuais feitas pelos usurios. Sempre que um servidor da Web recebe uma solicitao de uma pgina da Web e responde a ela disponibilizando a pgina relevante para o navegador do usurio, o servidor Web se esquece do navegador que fez a solicitao e da pgina da Web que foi enviada. Posteriormente, quando o mesmo usurio solicita uma pgina relacionada, o servidor Web envia a pgina sem se lembrar da ltima pgina que enviou para esse usurio.
752
Apesar de essa natureza do HTTP o tornar um protocolo simples e fcil de implementar, ela dificulta as aplicaes mais avanadas da Web, como a gerao de pginas personalizadas. Por exemplo, para personalizar o contedo do site de um usurio individual, necessrio primeiro identificar o usurio. por isso que a maioria dos sites da Web utiliza alguma forma de logon com nome de usurio e senha. Se o objetivo for exibir vrias pginas personalizadas, ser necessrio utilizar um mecanismo que mantenha um registro dos usurios conectados, pois a maioria deles no aceitaria fornecer seu nome de usurio e senha em cada pgina do site. Para possibilitar a criao de aplicativos para Web complexos e o armazenamento de dados fornecidos pelo usurio em todas as pginas de um site, a maioria das tecnologias de servidores de aplicativos inclui suporte a gerenciamento de sesso. O gerenciamento de sesso possibilita que os aplicativos da Web mantenham o estado em vrias solicitaes HTTP, permitindo que as solicitaes de pginas da Web feitas por um usurio durante determinado perodo sejam exibidas como parte da mesma sesso interativa. As variveis de sesso armazenam informaes durante a sesso do usurio. A sesso do usurio tem incio quando ele abre a pgina pela primeira vez no aplicativo. A sesso termina quando o usurio no abre outra pgina no aplicativo durante um determinado perodo ou quando encerra explicitamente a sesso (normalmente, clicando em um link de logoff ). Enquanto existe, a sesso especfica de determinado usurio, e cada usurio tem uma sesso separada. Utilize as variveis de sesso para armazenar informaes que todas as pginas de um aplicativo da Web podem acessar. As informaes podem ser as mais variadas, como o nome do usurio, o tamanho de fonte preferido ou um sinalizador indicando se o usurio conseguiu efetuar logon com sucesso ou no. Outro uso comum das variveis de sesso manter um contador de pontos, como o nmero de perguntas que o usurio respondeu corretamente em um teste de conhecimentos on-line ou os produtos que ele selecionou at aquele momento em um catlogo on-line. Observe que as variveis de sesso funcionam somente se o navegador do usurio estiver configurado para aceitar cookies. O servidor cria um nmero de identificao da sesso, que identifica o usurio de modo exclusivo quando a sesso iniciada e depois envia um cookie contendo esse nmero para o navegador do usurio. Quando o usurio solicita outra pgina no servidor, o servidor l o cookie no navegador para identificar o usurio e recuperar as variveis de sesso do usurio armazenadas na memria do servidor. Tpicos relacionados Coletar informaes a serem armazenadas em variveis de sesso na pgina 754

Armazenar informaes em variveis de sesso na pgina 755 Exemplo de informaes armazenadas em variveis de sesso na pgina 756 Recuperar dados de uma varivel de sesso na pgina 757
753
Coletar informaes a serem armazenadas em variveis de sesso

Antes de criar uma varivel de sesso, preciso obter as informaes a serem armazenadas e depois envi-las ao servidor para que sejam armazenadas. Esta seo descreve como coletar e enviar informaes ao servidor usando formulrios HTML ou links de hipertexto contendo parmetros da URL. Tambm possvel obter informaes nos cookies armazenados no computador do usurio, nos cabealhos HTTP enviados pelo navegador do usurio junto com uma solicitao de pgina ou em um banco de dados. Tpicos relacionados Variveis de sesso na pgina 752

Armazenar informaes em variveis de sesso na pgina 755 Exemplo de informaes armazenadas em variveis de sesso na pgina 756 Recuperar dados de uma varivel de sesso na pgina 757
Armazenar parmetros de URL em variveis de sesso

Um exemplo comum de armazenamento de parmetros de URL em variveis de sesso um catlogo de produtos que use parmetros inseridos no cdigo da URL. Esses parmetros so criados com o auxlio de um link de hipertexto para enviar informaes sobre o produto de volta ao servidor, a fim de que sejam armazenadas em uma varivel de sesso. Quando um usurio clica no link Add to shopping cart (Adicionar ao carrinho de compras), a identificao do produto armazenada em uma varivel de sesso enquanto o usurio continua comprando. Quando o usurio prossegue at a pgina de concluso da compra, a identificao do produto armazenado na varivel de sesso recuperada.
Armazenar parmetros de formulrio em uma varivel de sesso

Uma pesquisa baseada em formulrio um exemplo caracterstico de uma pgina que armazena parmetros de formulrio em variveis de sesso. O formulrio devolve as informaes selecionadas ao servidor, onde uma pgina de aplicativo anota os pontos da pesquisa e armazena as respostas em uma varivel de sesso para que sejam repassadas para um aplicativo que calcula as respostas coletadas das pessoas pesquisadas. Ou, ento, as informaes podem ser armazenadas em um banco de dados para uso posterior.
754
Armazenar informaes em variveis de sesso

Depois que as informaes forem enviadas ao servidor, armazene-as em variveis de sesso adicionando o cdigo apropriado para o modelo do servidor pgina especificada pelo parmetro de URL ou formulrio. Conhecida como pgina de destino, essa pgina especificada no atributo action do formulrio HTML ou no atributo href do link de hipertexto na pgina 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 mtodo usado para obter as informaes determinam o cdigo empregado para armazenar as informaes em uma varivel de sesso. A sintaxe bsica de cada tecnologia de servidor descrita da seguinte maneira:
ColdFusion
<CFSET session.variable_name = value>
ASP e ASP.NET
<% Session("variable_name") = value %>
A expresso value geralmente uma expresso do servidor, como Request.Form(lastname). Por exemplo: se um parmetro de URL denominado product (ou um formulrio HTML com o mtodo GET e um campo de texto chamado product) for utilizado para coletar informaes, as seguintes instrues armazenaro as informaes em uma varivel de sesso denominada prodID:
ColdFusion
<CFSET session.prodID = url.product>
ASP e ASP.NET
<% Session("prodID") = Request.QueryString("product") %>
Se for utilizado um formulrio HTML com o mtodo post e um campo de texto denominado txtProduct para coletar as informaes, as instrues apresentadas a seguir armazenaro as informaes na varivel de sesso:
ColdFusion
<CFSET session.prodID = form.txtProduct>
ASP e ASP.NET
<% Session("prodID") = Request.Form("txtProduct") %>
755
Tpicos relacionados Variveis de sesso na pgina 752

Coletar informaes a serem armazenadas em variveis de sesso na pgina 754 Exemplo de informaes armazenadas em variveis de sesso na pgina 756 Recuperar dados de uma varivel de sesso na pgina 757
Exemplo de informaes armazenadas em variveis de sesso

Voc est trabalhando em um site cujos usurios, em sua maioria, so pessoas idosas. No Dreamweaver, possvel adicionar pgina inicial dois links que permitam aos usurios personalizar o tamanho do texto do site. Para visualizar um texto com letras maiores que facilitem a leitura, o usurio clica em um link. Para ler o texto no tamanho usual, clica em outro link.
Cada link tem um parmetro da URL denominado fontsize que envia as preferncias de texto do usurio 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>
Cabe a voc decidir se deve armazenar a preferncia de texto do usurio em uma varivel de sesso e utiliz-la para definir o tamanho da fonte em cada pgina solicitada pelo usurio. Prximo do incio da pgina de destino, especifique o cdigo a seguir para criar uma sesso denominada font_pref que armazena a preferncia do usurio quanto ao tamanho de fonte.
ColdFusion
<CFSET session.font_pref = url.fontsize>
756
ASP e ASP.NET
<% Session("font_pref") = Request.QueryString("fontsize") %>
Quando o usurio clica no link de hipertexto, a pgina envia a preferncia de texto do usurio em um parmetro da URL para a pgina de destino. O cdigo da pgina de destino armazena o parmetro da URL na varivel de sesso font_pref. Durante a sesso do usurio, todas as pginas do aplicativo recuperam esse valor e exibem o tamanho de fonte selecionado. Tpicos relacionados Variveis de sesso na pgina 752 Coletar informaes a serem armazenadas em variveis de sesso na pgina 754 Armazenar informaes em variveis de sesso na pgina 755 Recuperar dados de uma varivel de sesso na pgina 757
Recuperar dados de uma varivel de sesso

Depois que um valor armazenado em uma varivel de sesso, possvel utilizar o Dreamweaver para recuperar o valor de variveis de sesso e utiliz-lo em um aplicativo da Web. Para obter mais informaes, consulte Definir as variveis de sesso na pgina 772. Aps a definio da varivel de sesso no Dreamweaver, possvel inserir o respectivo valor em uma pgina. Para obter mais informaes, consulte Captulo 34, Adicionar contedo dinmico a pginas da Web, na pgina 781. Tpicos relacionados Variveis de sesso na pgina 752

Coletar informaes a serem armazenadas em variveis de sesso na pgina 754 Armazenar informaes em variveis de sesso na pgina 755 Exemplo de informaes armazenadas em variveis de sesso na pgina 756
757
758
CAPTULO 33
Definir as fontes de contedo dinmico

Os sites da Web dinmicos necessitam de uma fonte de dados da qual o contedo dinmico recuperado e exibido. O Macromedia Dreamweaver 8 permite o uso de bancos de dados, variveis de solicitao, variveis de URL, variveis de servidor, variveis de formulrios, procedimentos armazenados (stored procedures) e outras fontes de contedo dinmico. Dependendo da fonte de dados, possvel recuperar um novo contedo para atender solicitao ou modificar a pgina para satisfazer s necessidades dos usurios. Este captulo descreve os procedimentos para definir bancos de dados e variveis como fontes de contedo dinmico. Para conhecer melhor as tecnologias apresentadas neste captulo, consulte Recursos de tecnologias da Web e HTML na pgina 40. Este captulo contm as seguintes sees:
33
Sobre fontes de contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .760 Definir um recordset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765 Definir os parmetros de URL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .769 Definir os parmetros de formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 771 Definir as variveis de sesso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 772 Definir variveis de aplicativo ASP e ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . 773 Utilizar uma varivel como fonte de dados para um recordset ColdFusion . . . . . 774 Definir variveis de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 775 Armazenar em cache as fontes de contedo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 778 Alterar ou excluir as fontes de contedo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 778 Copiar um recordset para outra pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 779
759
Sobre fontes de contedo dinmico

Uma fonte de contedo dinmico um local de armazenamento de informaes do qual possvel recuperar e exibir contedo dinmico para ser utilizado em uma pgina da Web. As fontes de contedo dinmico incluem no somente as informaes armazenadas em um banco de dados, mas tambm os valores enviados pelos formulrios HTML e os contidos nos objetos de servidor, os valores das propriedades dos componentes de software reutilizveis para Java e outras fontes de contedo. Qualquer fonte de contedo definida no Dreamweaver adicionada lista de fontes de contedo no painel Bindings (Ligaes). Depois de criar uma fonte de contedo e inclu-la no painel Bindings, voc poder inseri-la facilmente na pgina selecionada.
Tpicos relacionados Recordsets na pgina 760

Parmetros de URL e de formulrios na pgina 763 Sobre variveis de sesso na pgina 763 Variveis de aplicativos ASP e ColdFusion na pgina 764 Variveis de servidor ASP na pgina 764 Variveis de servidor ColdFusion na pgina 764
Recordsets
Ao utilizar um banco de dados como fonte de contedo para uma pgina da Web, necessrio criar primeiro um recordset no qual os dados recuperados sero armazenados. Os recordsets servem como intermedirio entre o banco de dados que armazena o contedo e o servidor de aplicativos que gera a pgina. Eles consistem nos dados obtidos em uma consulta ao banco de dados e so temporariamente armazenados na memria do servidor de aplicativos, para que a recuperao seja mais rpida. O servidor descarta o recordset quando deixa de ser necessrio.
760
Captulo 33: Definir as fontes de contedo dinmico
O recordset uma coleo de dados recuperados em determinado banco de dados. Ele pode conter uma tabela inteira de banco de dados ou um subconjunto de linhas e colunas da tabela. Essas linhas e colunas so recuperadas como resultado de uma consulta ao banco de dados que est definida no recordset. As consultas ao banco de dados so 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 includo no Dreamweaver permite criar consultas simples sem a necessidade de conhecer a SQL. Contudo, para criar consultas SQL complexas, necessrio aprender SQL e escrever manualmente as instrues SQL a serem inseridas no Dreamweaver.
NO TA

O Microsoft ASP.NET refere-se a um recordset como DataSet. Se voc estiver trabalhando com tipos de documento ASP.NET, as caixas de dilogo e opes de menu especficas do ASP.NET utilizam a denominao DataSet. A documentao do Dreamweaver refere-se a ambos os tipos como recordsets, mas utiliza DataSet ao descrever especificamente os recursos do ASP.NET.
Para obter mais informaes sobre como utilizar bancos de dados e SQL, consulte Apndice A, Guia do iniciante em bancos de dados, na pgina 1085 e Apndice B, Manual bsico de SQL, na pgina 1101. Se voc for gravar SQL para utilizar com o ASP.NET, precisar conhecer algumas condies especficas do ASP.NET. Para conhecer melhor essas condies, consulte Gravar SQL para ASP.NET na pgina 762. Para definir um recordset a ser utilizado no Dreamweaver, necessrio criar uma conexo a um banco de dados e digitar dados no banco de dados, caso ainda no existam. Se voc ainda no tiver definido uma conexo de banco de dados para o seu site, consulte o captulo sobre este assunto para obter informaes sobre a tecnologia de servidor que est sendo desenvolvida e siga as instrues para criao de uma conexo de banco de dados. As conexes de banco de dados para todas as tecnologias de servidor aceitas pelo Dreamweaver esto descritas nos seguintes captulos: Captulo 24, Conexes de banco de dados para desenvolvedores ColdFusion, na pgina 669 Captulo 26, Conexes de banco de dados para desenvolvedores de ASP, na pgina 681 Captulo 25, Conexes de banco de dados para desenvolvedores de ASP.NET, na pgina 673 Captulo 27, Conexes de banco de dados para desenvolvedores JSP, na pgina 695 Captulo 28, Conexes de banco de dados para desenvolvedores PHP, na pgina 705
Tpicos relacionados Definir um recordset na pgina 765
761
Gravar SQL para ASP.NET

Para gravar as instrues SQL na caixa de dilogo Advanced DataSet (DataSet avanado), necessrio conhecer determinadas condies especficas do ASP.NET. Essas condies so descritas nas sees a seguir.
Parmetros
A sintaxe usada para fazer referncia a parmetros varia de acordo com a conexo do banco de dados em uso; por exemplo: OLE DB (Banco de dados OLE) ou Microsoft SQL Server. OLE DB Quando a conexo ao banco de dados for estabelecida utilizando a tecnologia OLE DB, a referncia aos parmetros deve conter um ponto de interrogao (?). Por exemplo:
SELECT * FROM Employees WHERE HireDate > ?
Microsoft SQL Server No estabelecimento da conexo ao Microsoft SQL Server utilizando o Managed Data Provider (Provedor de dados gerenciados) para o SQL Server, fornecido com o .NET Framework, todos os parmetros devero ter um nome. Por exemplo:
SELECT * FROM Employees WHERE HireDate > @hireDate
Inserir cdigo nas instrues SQL

Quando for inserir cdigo nas instrues SQL gravadas para ASP.NET, envolva todas as seqncias de caracteres em aspas duplas (" ") e coloque o cdigo entre parnteses ( ).
SELECT * FROM Employees WHERE HireDate > "+ (Request.queryString("hireDate"))
Tpicos relacionados: Captulo 25, Conexes de banco de dados para desenvolvedores de ASP.NET, na pgina 673.
762
Parmetros de URL e de formulrios

Os parmetros de URL armazenam as informaes recuperadas, que foram inseridas pelos usurios. Para definir um parmetro da URL, crie um formulrio ou link de hipertexto que utilize o mtodo GET para enviar dados. As informaes so anexadas URL da pgina solicitada e comunicadas ao servidor. Quando as variveis de URL so utilizadas, a seqncia de caracteres da consulta contm um ou mais pares de nome/valor que esto associados aos campos de formulrio. Esses pares de nome/valor so anexados URL. Os parmetros de formulrio armazenam as informaes recuperadas, que so includas na solicitao de HTTP de uma pgina da Web. Se for criado um formulrio que utilize o mtodo POST, os dados enviados pelo formulrio sero repassados ao servidor. Antes de iniciar, certifique-se de ter repassado um parmetro de formulrio ao servidor. Para obter instrues, consulte Captulo 32, Obter dados para a pgina, na pgina 745. Tpicos relacionados Definir os parmetros de URL na pgina 769 Definir os parmetros de formulrio na pgina 771
Sobre variveis de sesso

As variveis de sesso permitem armazenar e exibir as informaes mantidas durante a visita (ou sesso) de um usurio. O servidor cria um objeto de sesso diferente para cada usurio e o mantm durante um perodo de tempo definido ou at que o objeto seja explicitamente finalizado. Para obter mais informaes, consulte Acessar dados armazenados em variveis de sesso na pgina 752. As variveis de sesso so ideais para armazenar as preferncias do usurio, porque elas se mantm durante toda a sesso e permanecem inalteradas quando o usurio se move de uma pgina para outra no site da Web. As variveis de sesso tambm podem ser utilizadas para inserir um valor no cdigo HTML da pgina, designar o valor de uma varivel local ou fornecer um valor para avaliar uma expresso condicional. Antes de definir as variveis de sesso para uma pgina, necessrio cri-las no cdigo-fonte. Para obter instrues, consulte Coletar dados enviados por usurios na pgina 747 e Acessar dados armazenados em variveis de sesso na pgina 752. Depois de criar uma varivel de sesso no cdigo-fonte do aplicativo para a Web, possvel utilizar o Dreamweaver para recuperar o seu valor e us-lo na pgina da Web.
763
Tpicos relacionados Variveis de aplicativos ASP e ColdFusion na pgina 764
Definir as variveis de sesso na pgina 772
Variveis de aplicativos ASP e ColdFusion

Em ASP e ColdFusion, voc pode utilizar as variveis de aplicativo para armazenar e exibir as informaes que so mantidas pelo tempo de utilizao do aplicativo e que permanecem independentemente do usurio. O tempo de utilizao do aplicativo se prolongar desde o momento em que o primeiro usurio solicitar uma pgina no aplicativo at o momento em que o servidor da Web for parado. Um aplicativo definido como todos os arquivos contidos em um diretrio virtual e seus subdiretrios. As variveis de aplicativo so ideais para armazenar as informaes que devem existir para todos os usurios como, por exemplo, a data e hora atuais, porque elas se mantm durante o tempo de utilizao do aplicativo e no so alteradas de usurio para usurio. O valor da varivel de aplicativo definido no cdigo do aplicativo. Para obter mais informaes, consulte Definir variveis de aplicativo ASP e ColdFusion na pgina 773 e Adicionar contedo dinmico a pginas da Web na pgina 781.
Variveis de servidor ASP

As variveis de servidor ASP podem ser definidas como fontes de contedo dinmico: Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables e Request.ClientCertificates. Tpicos relacionados Definir variveis de servidor ASP na pgina 775
Variveis de servidor ColdFusion

Voc pode definir as seguintes variveis de servidor ColdFusion:
Variveis de cliente
associam os dados a um determinado cliente. Essas variveis so utilizadas para manter o estado do aplicativo medida que o usurio se move de uma pgina para outra ou de uma sesso para outra. Manter o estado significa preservar as informaes de uma pgina (ou sesso), de modo que o aplicativo se lembre do usurio e de suas opes e preferncias anteriores. acessam os cookies repassados para o servidor pelo navegador.
Variveis de cookie
764
Variveis de CGI
fornecem informaes sobre o servidor que executa o ColdFusion, o navegador que solicita a pgina e outras informaes sobre o ambiente de processamento.
Variveis de servidor podem ser acessadas por todos os clientes e aplicativos no servidor. Elas
se mantm at que o servidor seja parado.

Variveis locais
so criadas com a tag CFSET ou CFPARAM, na pgina ColdFusion.
Tpicos relacionados Definir as variveis de servidor ColdFusion na pgina 776

Definir as variveis de servidor JSP na pgina 777 Definir as variveis de servidor PHP na pgina 777
Definir um recordset
Voc pode definir um recordset usando a caixa de dilogo Simple Recordset (Recordset simples) do Dreamweaver, que lhe permite criar com facilidade instrues SQL simples, ou usar a caixa de dilogo Advanced Recordset (Recordset avanado), que permite gravar suas prprias instrues SQL, ou, ainda, usar a hierarquia grfica Database Items (Itens de banco de dados) para criar uma instruo SQL. Se no estiver familiarizado com a gravao de instrues SQL para a recuperao de informaes de um banco de dados, use a caixa de dilogo Simple Recordset. Esta seo contm os tpicos a seguir:

Criar um recordset sem gravar SQL na pgina 765 Criar um recordset avanado gravando SQL na pgina 767 Criar consultas SQL utilizando a hierarquia Database Items (Itens de banco de dados) na pgina 768
Tpicos relacionados Definir um recordset em um componente ColdFusion na pgina 984
Criar um recordset sem gravar SQL

Esta seo descreve como definir um recordset utilizando a caixa de dilogo Dreamweavers Recordset (Recordset do Dreamweaver), que permite criar um recordset sem precisar inserir manualmente as instrues SQL. Para definir um recordset por esse mtodo, basta selecionar uma conexo e uma tabela de banco de dados nos menus pop-up da caixa de dilogo Recordset.
765
Se desejar gravar suas prprias instrues SQL, utilize a caixa de dilogo Advanced Recordset (Recordset avanado). Consulte Criar um recordset avanado gravando SQL na pgina 767.
Para definir um recordset sem utilizar SQL:
1. 2. 3.
Na janela do documento, abra a pgina que utilizar o recordset. Selecione Window (Janela) > Bindings (Ligaes) para exibir o painel Bindings. No painel Bindings, clique no boto com o sinal de adio (+) e escolha Recordset (Query) (Recordset [consulta]) no menu pop-up. Ser exibida a caixa de dilogo Recordset simples. Se voc estiver desenvolvendo um site do ColdFusion ou do ASP.NET, a caixa de dilogo Recordset ser um pouco diferente do exemplo mostrado abaixo. (Se, em vez disso, aparecer a caixa de dilogo Advanced Recordset, alterne para a caixa de dilogo Simple Recordset, clicando no boto Simple (Simples).
4.
Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) na caixa de dilogo. Clique no boto Test (Testar) para executar a consulta e assegurar que ela recupere as informaes desejadas. Se tiver sido definido um filtro que utilize parmetros inseridos pelo usurio, o boto Test exibir a caixa de dilogo Test Value (Valor de teste). Digite um valor na caixa de texto Test Value e clique em OK. Se for criada corretamente uma instncia do recordset, ser exibida uma tabela mostrando os dados extrados desse recordset.
5.
6.
Clique em OK para adicionar o recordset lista de contedos originais disponveis no painel Bindings.
766
Criar um recordset avanado gravando SQL

A caixa de dilogo Advanced Recordset (Recordset avanado) permite gravar as suas prprias instrues SQL ou utilizar a hierarquia grfica Database Items (Itens de banco de dados) para criar uma instruo SQL.
NO TA
Se voc estiver gravando instrues SQL para tipos de documentos ASP.NET, consulte Criar consultas SQL utilizando a hierarquia Database Items (Itens de banco de dados) na pgina 768 para obter as regras especficas para ASP.NET.
Se desejar criar uma recordset simples sem gravar manualmente em SQL, consulte Criar consultas SQL utilizando a hierarquia Database Items (Itens de banco de dados) na pgina 768.
Para definir um recordset gravando SQL:
1. 2. 3.
Na janela do documento, abra a pgina que utilizar o recordset. Selecione Window (Janela) > Bindings (Ligaes) para exibir o painel Bindings. No painel Bindings, clique no boto com o sinal de adio (+) e escolha Recordset (Query) (Recordset [consulta]) no menu pop-up. Ser exibida a caixa de dilogo Advanced Recordset. Se voc estiver desenvolvendo um site do ColdFusion ou do ASP.NET, a caixa de dilogo Recordset ser um pouco diferente do exemplo mostrado abaixo. Se, no lugar dela, aparecer a caixa de dilogo Recordset simples, alterne para a caixa de dilogo Recordset avanada, clicando no boto Advanced (Avanado).
4.
Preencha a caixa de dilogo. Para obter instrues sobre como preencher a caixa de dilogo Recordset, clique no boto Help (Ajuda) da caixa de dilogo Recordset.
767
5.
Clique no boto Test (Testar) para executar a consulta e assegurar que ela recupere as informaes desejadas. Se tiver sido definido um filtro que utilize parmetros inseridos pelo usurio, o boto Test exibir a caixa de dilogo Test Value (Valor de teste). Digite um valor na caixa de texto Test Value e clique em OK. Se for criada corretamente uma instncia do recordset, ser exibida uma tabela mostrando os dados extrados desse recordset.
6.
Clique em OK para adicionar o recordset lista de contedos originais disponveis no painel Bindings.
Criar consultas SQL utilizando a hierarquia Database Items (Itens de banco de dados)
Em vez de inserir manualmente as instrues SQL na caixa de texto apropriada, possvel utilizar a interface do tipo apontar e clicar da hierarquia Database Items (Itens de banco de dados) para criar consultas SQL complexas. A hierarquia Database Items permite selecionar objetos de banco de dados e vincul-los usando as clusulas do SQL SELECT, WHERE e ORDER BY. Aps criar uma consulta SQL, voc poder definir variveis utilizando a rea Variables (Variveis) da caixa de dilogo. Os exemplos abaixo descrevem duas instrues SQL e as etapas para cri-las por meio da hierarquia Database Items da caixa de dilogo Recordset avanada.
Selecionar uma tabela

Este exemplo seleciona todo o contedo da tabela Employees (Empregados). A instruo SQL que define a consulta a seguinte:
SELECT * FROM Employees
Para criar esta consulta:

1.
Expanda a ramificao Tables (Tabelas) para exibir todas as tabelas do banco de dados selecionado. Selecione a tabela Employees. Clique no boto Select (Selecionar). Clique em OK para adicionar o recordset ao painel Bindings.
2. 3. 4.
768
Selecionar linhas especficas em uma tabela e ordenar os resultados

O exemplo abaixo seleciona duas linhas da tabela Employees e escolhe o tipo de trabalho, utilizando uma varivel que voc deve definir. Os resultados sero ordenados por nome de empregado.
SELECT emplNo, emplName FROM Employees WHERE emplJob = 'varJob' ORDER BY emplName
Para criar esta consulta:

1.
Expanda a ramificao Tables para exibir todas as tabelas do banco de dados selecionado e, em seguida, expanda a tabela Employees para exibir as linhas da tabela individualmente. Crie a instruo SQL da seguinte forma:

2.
Selecione emplNo e clique no boto Select (Selecionar). Selecione emplName e clique no boto Select. Selecione emplJob e clique no boto Where (Onde). Selecione emplName e clique no boto Order By (Classificar por).
3.
Coloque o ponto de insero aps WHERE emplJob, na rea de texto SQL, e digite ='varJob' (inclua o sinal de igual). Defina a varivel 'varJob' clicando no boto com o sinal de adio (+), na rea Variables (Variveis) e inserindo os seguintes valores nas colunas Name (Nome), Default Value (Valor padro) e Run-Time Value (Valor em tempo de execuo): varJob, CLERK, Request("job"). Clique em OK para adicionar o recordset ao painel Bindings.
4.
5.
Definir os parmetros de URL

Os parmetros de URL armazenam as informaes recuperadas, que foram inseridas pelos usurios. Antes de iniciar, certifique-se de ter repassado um formulrio ou parmetro da URL ao servidor. Para obter mais informaes, consulte Parmetros da URL na pgina 749 e Parmetros de URL e de formulrios na pgina 763.
Para definir um parmetro da URL:
1. 2.
Na janela do documento, abra a pgina que utilizar a varivel. Selecione Window (Janela) > Bindings (Ligaes) para exibir o painel Bindings.
Definir os parmetros de URL
769
3.
No painel Bindings, clique no boto com o sinal de adio (+) e selecione uma das seguintes opes no menu pop-up:
Tipos de documentos
ASP ColdFusion JSP PHP
Item de menu no painel Bindings para a varivel de URL

Request Variable (Varivel de solicitao) > Request.QueryString URL Variable Request Variable (Varivel de solicitao) URL Variable
Ser exibida a caixa de dilogo URL Variable (Varivel de URL).

4.
Digite o nome da URL Variable na caixa de texto e clique em OK. Normalmente, o nome da varivel de URL o mesmo do campo de formulrio HTML ou do objeto utilizado para obter esse valor.
5.
A varivel de URL exibida no painel Bindings.
Aps definir a varivel de URL, o seu valor pode ser utilizado na pgina selecionada. Para obter mais informaes, consulte Captulo 34, Adicionar contedo dinmico a pginas da Web, na pgina 781. Tpicos relacionados: Definir os parmetros de formulrio na pgina 771
Definir as variveis de sesso na pgina 772
770
Definir os parmetros de formulrio

Os parmetros de formulrio armazenam as informaes recuperadas, que so includas na solicitao de HTTP de uma pgina da Web. Se for criado um formulrio que utilize o mtodo POST, os dados enviados pelo formulrio sero repassados ao servidor. Antes de iniciar, certifique-se de ter repassado um parmetro de formulrio ao servidor. Para obter mais informaes, consulte Captulo 32, Obter dados para a pgina, na pgina 745 e
Para definir um parmetro de formulrio:
1. 2. 3.
Na janela do documento, abra a pgina que utilizar a varivel. Selecione Window (Janela) > Bindings (Ligaes) para exibir o painel Bindings. No painel Bindings, clique no boto com o sinal de adio (+) e selecione uma das seguintes opes no menu pop-up:
Tipos de documentos
ASP ColdFusion JSP PHP
Item de menu no painel Bindings da varivel de formulrio

Request Variable > Request.Form Form Variable Request Variable (Varivel de solicitao) Form Variable
Ser exibida a caixa de dilogo Form Variable (Varivel de formulrio). Digite o nome da varivel de formulrio na caixa de dilogo e clique em OK. Normalmente, o nome do parmetro de formulrio o mesmo do campo de formulrio HTML ou do objeto utilizado para obter esse valor.
4.
O parmetro de formulrio exibido no painel Bindings.
Definir os parmetros de formulrio
771
Aps definir o parmetro de formulrio como uma fonte de contedo, pode-se utilizar o seu valor na pgina. Para obter mais informaes, consulte Captulo 32, Obter dados para a pgina, na pgina 745. Tpicos relacionados Sobre fontes de contedo dinmico na pgina 760

Parmetros de URL e de formulrios na pgina 763 Definir os parmetros de URL na pgina 769
Definir as variveis de sesso

possvel utilizar as variveis de sesso para armazenar e exibir as informaes mantidas durante a visita (ou sesso) do usurio. O servidor cria um objeto de sesso diferente para cada usurio e o mantm durante um perodo de tempo definido ou at que o objeto seja explicitamente finalizado. Para obter mais informaes, consulte Variveis de sesso na pgina 752. Antes de definir as variveis de sesso para uma pgina, necessrio cri-las no cdigo-fonte. Para obter instrues, consulte os seguintes tpicos:

Coletar dados enviados por usurios na pgina 747 Acessar dados armazenados em variveis de sesso na pgina 752 Armazenar informaes em variveis de sesso na pgina 755
Depois de criar uma varivel de sesso no cdigo-fonte do aplicativo para a Web, possvel utilizar o Dreamweaver para recuperar o seu valor e us-lo na pgina da Web.
Para configurar uma varivel predefinida de sesso:
1.
Crie uma varivel de sesso no cdigo-fonte e atribua-lhe um valor. Por exemplo: este exemplo de ColdFusion produz a instncia de uma sesso chamada username e atribui a ela o valorCornelius:
<CFSET session.username = Cornelius>
2. 3.
Selecione Window (Janela) > Bindings (Ligaes) para exibir o painel Bindings. Clique no boto com o sinal de adio (+) e selecione Session Variable (Varivel de sesso) no menu pop-up. Digite o nome da varivel definida no cdigo-fonte.
4.
772
5.
Clique em OK. A varivel de sesso exibida no painel Bindings.
Aps definir a varivel de sesso, o seu valor pode ser utilizado na pgina. Para obter mais informaes, consulte Captulo 34, Adicionar contedo dinmico a pginas da Web, na pgina 781. Tpicos relacionados Coletar dados enviados por usurios na pgina 747

Acessar dados armazenados em variveis de sesso na pgina 752 Variveis de sesso na pgina 752 Armazenar informaes em variveis de sesso na pgina 755
Definir variveis de aplicativo ASP e ColdFusion

Em ASP e ColdFusion, voc pode utilizar as variveis de aplicativo para armazenar e exibir as informaes que so mantidas pelo tempo de utilizao do aplicativo e que permanecem constantes de um usurio para outro.
N OT A
No h objetos de variveis de aplicativo em JSP ou PHP.
Para definir a varivel de aplicativo para a pgina:

1. 2. 3.
Abra um tipo de documento dinmico na janela do documento. Selecione Window (Janela) > Bindings (Ligaes) para exibir o painel Bindings. Clique no boto com o sinal de adio (+) e selecione Application Variable (Varivel de aplicativo) no menu pop-up.
Definir variveis de aplicativo ASP e ColdFusion
773
4. 5.
Digite o nome da varivel definida no cdigo-fonte do aplicativo. Clique em OK. A varivel de aplicativo exibida no painel Bindings, no cone Application (Aplicativo).
Aps definir a varivel de aplicativo, o seu valor pode ser utilizado na pgina. Para obter mais informaes, consulte Captulo 34, Adicionar contedo dinmico a pginas da Web, na pgina 781. Tpicos relacionados: Variveis de aplicativos ASP e ColdFusion na pgina 764
Utilizar uma varivel como fonte de dados para um recordset ColdFusion

Quando voc define um recordset para uma pgina no painel Bindings (Ligaes), o Dreamweaver insere o nome da fonte de dados ColdFusion na tag cfquery na pgina. Para obter mais flexibilidade, voc pode armazenar o nome de uma fonte de dados em uma varivel e utilizar essa varivel na tag cfquery. O Dreamweaver fornece um mtodo visual de especificao desse tipo de varivel em recordsets.
Para especificar visualmente uma varivel como uma fonte de dados para um recordset:
1. 2.
Certifique-se de que uma pgina ColdFusion esteja ativa na janela do documento. No painel Bindings, clique no boto com o sinal de adio (+) e selecione Data Source Name Variable (Varivel de nome de fonte de dados) no menu pop-up. A caixa de dilogo Data Source Name Variable exibida. Defina uma varivel e clique em OK.
3.
774
4.
Quando for definir o recordset, selecione a varivel como Data Source (Fonte de dados) para o recordset. Na caixa de dilogo Recordset, a varivel aparece no menu pop-up Data Source junto com as fontes de dados ColdFusion no servidor.
5. 6.
Preencha a caixa de dilogo Recordset e clique em OK. Inicialize a varivel. O Dreamweaver no inicializar a varivel para que voc possa inicializ-la como e onde desejar. Voc pode inicializar a varivel no cdigo da pgina (antes da tag cfquery), em um arquivo de incluso ou em algum outro arquivo como uma varivel de sesso ou aplicativo.
Definir variveis de servidor

possvel definir as variveis de servidor como fontes de contedo dinmico para serem utilizadas em um aplicativo para a Web. As variveis de servidor variam para cada tipo de documento e incluem variveis de formulrio, de URL, de sesso e de aplicativo. Para obter mais informaes sobre esses tipos de variveis, consulte as sees abaixo:

Definir os parmetros de URL na pgina 769 Definir os parmetros de formulrio na pgina 771 Definir as variveis de sesso na pgina 772 Definir variveis de aplicativo ASP e ColdFusion na pgina 773
Esta sesso discute as variveis de servidor para diferentes tipos de documentos que voc pode definir como fontes de contedo. Estes so os tipos de documentos e suas correspondentes sees:

Definir as variveis de servidor ColdFusion na pgina 776 Definir as variveis de servidor JSP na pgina 777
Definir variveis de servidor ASP

As variveis de servidor ASP podem ser definidas como fontes de contedo dinmico: Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables e Request.ClientCertificates.
Para definir uma varivel de servidor de uma pgina ASP:
1.
Abra o painel Bindings (Ligaes), em Window (Janela) > Bindings.
775
2.
Clique no boto com o sinal de adio (+) e selecione Request Variable (Varivel de solicitao) no menu pop-up. Ser exibida a caixa de dilogo Request Variable (Varivel de solicitao). Selecione um dos conjuntos de solicitaes no menu pop-up Type (Tipo). Por exemplo: se desejar acessar as informaes no conjunto Request.ServerVariables, selecione Server Variables (Variveis de servidor). Se desejar acessar as informaes no conjunto Request.Form, selecione Form (Formulrio). Para obter mais informaes sobre as variveis de servidor ASP, clique no boto Help (Ajuda).
3.
Especifique a varivel no conjunto a ser acessado. Por exemplo: se desejar acessar as informaes na varivel Request.ServerVariables("HTTP_USER_AGENT"), digite o argumentoHTTP_USER_AGENT. Se desejar acessar as informaes na varivel Request.Form("lastname"), digite o argumentolastname.
4.
Clique em OK. A varivel de servidor exibida no painel Bindings.
Definir as variveis de servidor ColdFusion

possvel definir as seguintes variveis de servidor ColdFusion como fontes de contedo dinmico: cliente, cookie, CGI, servidor e variveis locais. Para obter mais informaes sobre essas variveis de servidor, consulte Variveis de servidor ASP na pgina 764.
Para definir uma varivel de servidor de uma pgina ColdFusion:
1. 2. 3.
Abra o painel Bindings (Ligaes), em Window (Janela) > Bindings. Clique no boto com o sinal de adio (+) e escolha a varivel de servidor no menu pop-up. Digite o nome da varivel. Para obter mais informaes sobre as possveis entradas de nomes, clique no boto Help. Clique em OK. A varivel de servidor ColdFusion exibida no painel Bindings (Ligaes).
4.
Tpicos relacionados: Definir os parmetros de URL na pgina 769 Definir as variveis de sesso na pgina 772 Definir variveis de aplicativo ASP e ColdFusion na pgina 773 Captulo 34, Adicionar contedo dinmico a pginas da Web, na pgina 781
776
Definir as variveis de servidor PHP

Voc pode definir uma varivel de servidor PHP como fonte do contedo dinmico dos tipos de documentos do PHP.
Para definir uma varivel de servidor de uma pgina PHP:
1. 2. 3. 4.
Abra o painel Bindings (Ligaes), em Window (Janela) > Bindings. Clique no boto com o sinal de adio (+) e escolha a varivel no menu pop-up. Digite o nome da varivel. Clique em OK. A varivel de servidor PHP exibida no painel Bindings.
Tpicos relacionados: Captulo 33, Definir os parmetros de URL, na pgina 769
Captulo 34, Adicionar contedo dinmico a pginas da Web, na pgina 781
Definir as variveis de servidor JSP

possvel definir uma varivel de solicitao como uma fonte de contedo dinmico para as pginas JSP.
Para definir uma varivel de solicitao de uma pgina JSP:
1. 2.
Abra o painel Bindings (Ligaes), em Window (Janela) > Bindings. Clique no boto com o sinal de adio (+) e selecione Request Variable (Varivel de solicitao) no menu pop-up. Digite o nome da varivel. Clique em OK. A varivel de servidor JSP exibida no painel Bindings.
3. 4.
Tpicos relacionados: Captulo 33, Definir os parmetros de URL, na pgina 769
Captulo 34, Adicionar contedo dinmico a pginas da Web, na pgina 781
777
Armazenar em cache as fontes de contedo

possvel armazenar em cache as fontes de contedo dinmico em uma Design Note. Esse recurso permite trabalhar em um site mesmo que o usurio no tenha acesso ao banco de dados ou ao servidor de aplicativos que armazena as fontes de contedo dinmico. O armazenamento em cache tambm acelera o desenvolvimento, eliminando o acesso repetitivo atravs de uma rede ao banco de dados e ao servidor de aplicativos.
Para armazenar as fontes de contedo:
Clique no boto com a seta no canto superior direito do painel Bindings (Ligaes) e alterne Cache no menu pop-up. Se voc alterar uma das fontes de contedo, poder atualizar o cache clicando no boto Refresh (Atualizar), que exibe o cone de seta em crculo, no canto superior direito do painel Bindings. Se o boto no estiver visvel, expanda o painel.
Alterar ou excluir as fontes de contedo

possvel alterar ou excluir qualquer fonte de contedo dinmico, ou seja, qualquer fonte de contedo que estiver indicada no painel Bindings (Ligaes). A alterao ou excluso de uma fonte de contedo no painel Bindings no altera ou exclui qualquer instncia desse contedo na pgina. Esse procedimento somente a altera ou exclui como uma possvel fonte de contedo para a pgina. Para editar ou excluir uma instncia do contedo na pgina, consulte Editar contedo dinmico na pgina 789 e Excluir o contedo dinmico na pgina 789.
778
Para alterar uma fonte de contedo no painel Bindings:

1.
No painel Bindings (Ligaes) (Window > Bindings), clique duas vezes no nome da fonte de contedo a ser editada. Faa as alteraes na caixa de dilogo que ser exibida. Se estiver satisfeito com a alterao, clique em OK.
2. 3.
Para excluir uma fonte de contedo no painel Bindings:

1. 2.
No painel Bindings (Window > Bindings), selecione a fonte de contedo na lista. Clique no boto com o sinal de subtrao (-).
Tpicos relacionados Sobre fontes de contedo dinmico na pgina 760
Copiar um recordset para outra pgina

possvel copiar um recordset de uma pgina para outra no site.
Para copiar um recordset para outra pgina:
1.
Selecione o recordset no painel Bindings (Ligaes) ou no painel Server Behaviors (Comportamentos de servidor). Clique com o boto direito do mouse no recordset e selecione Copy from (Copiar de) no menu pop-up. Abra a pgina na qual ser copiado o recordset. Clique com o boto direito do mouse no painel Bindings ou na barra de ferramentas Server Behaviors e selecione Paste (Colar) no menu pop-up.
2.
3. 4.
Tpicos relacionados: Sobre fontes de contedo dinmico na pgina 760
Alterar ou excluir as fontes de contedo na pgina 778
Copiar um recordset para outra pgina
779
780
CAPTULO 34
Adicionar contedo dinmico a pginas da Web

Este captulo descreve as maneiras mais eficientes de tornar dinmicos vrios elementos de pgina. Aps definir um ou mais fontes de contedo dinmico, possvel utilizar as fontes para adicionar contedo dinmico pgina. As fontes de contedo podem incluir uma coluna em um recordset, um valor enviado por um formulrio HTML, o valor contido em um objeto de servidor e outros dados. Para obter mais informaes, consulte Captulo 33, Definir as fontes de contedo dinmico, na pgina 759. No Macromedia Dreamweaver 8, possvel inserir contedo dinmico em praticamente todos os locais de uma pgina da Web ou de seu cdigo-fonte HTML. possvel inserir contedo dinmico no local onde est posicionado o ponto de insero, substituir uma seqncia de caracteres de texto ou inserir esse contedo como um atributo HTML. Por exemplo: o contedo dinmico pode definir o atributo src de uma imagem ou o atributo value de um campo de formulrio. Este captulo contm as seguintes sees:
34
Sobre a adio de contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 781 Tornar dinmico o texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 783 Tornar dinmicas as imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 785 Tornar dinmicos atributos HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 786 Tornar dinmicos objetos ActiveX, Flash e outros parmetros de objetos . . . . . . 788 Editar contedo dinmico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 789 Excluir o contedo dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 789 Criar pginas dinmicas em um site do Contribute. . . . . . . . . . . . . . . . . . . . . . . . . . .790
Sobre a adio de contedo dinmico

possvel adicionar contedo dinmico a uma pgina selecionando uma fonte de contedo no painel Bindings (Ligaes). O Dreamweaver insere um script do servidor no cdigo da pgina, instruindo o servidor a transferir os dados da fonte de contedo para o cdigo HTML da pgina quando esta for solicitada por um navegador.
781
Normalmente, h mais de uma maneira de tornar dinmico determinado elemento de uma pgina. Por exemplo: para tornar dinmica uma imagem, possvel utilizar o painel Bindings, o Property Inspector (Inspetor de propriedades) ou o comando Image (Imagem) no menu Insert (Inserir). Como padro, uma pgina HTML pode exibir somente um registro de cada vez. Para exibir os outros registros no recordset, voc pode adicionar um link para se mover pelos registros, um de cada vez (consulte Criar links de navegao para recordsets na pgina 802), ou pode criar uma regio repetida para exibir mais de um registro em uma nica pgina (consulte Exibir vrios resultados de recordsets na pgina 806).
Texto dinmico
O texto dinmico adotar qualquer formatao de texto aplicada ao texto existente ou ao ponto de insero. Por exemplo: se um estilo CSS (Cascading Style Sheet, Folha em estilo em cascata) afetar o texto selecionado, o contedo dinmico que o substituir tambm ser afetado pelo estilo. Tambm possvel adicionar ou alterar o formato de texto do contedo dinmico por meio de qualquer ferramenta de formatao de texto do Dreamweaver. Consulte Aplicar elementos tipogrficos e de layout de pgina a dados dinmicos na pgina 795. Tambm possvel aplicar um formato de dados ao texto dinmico. Por exemplo: se os dados consistirem em datas, possvel especificar um formato de data especial como, por exemplo, 04/17/00 para os visitantes americanos ou 17/04/00 para os visitantes brasileiros. Consulte Utilizar formatos de dados predefinidos na pgina 800. possvel substituir um texto comum na pgina por um texto dinmico ou adicionar um texto dinmico no ponto de insero na pgina.
Alterar o contedo dinmico

possvel alterar o contedo dinmico na pgina editando o comportamento do servidor que fornece o contedo. Por exemplo, possvel editar um comportamento do servidor do recordset para que ele fornea mais registros pgina. O contedo dinmico de uma pgina listado no painel Server Behaviors (Comportamentos de servidor). Por exemplo, quando um recordset adicionado pgina, o painel Server Behaviors lista o recordset da seguinte forma:
Recordset(myRecordset)
782
Captulo 34: Adicionar contedo dinmico a pginas da Web
Se voc adicionar outro recordset pgina, o painel Server Behaviors listar os dois recordsets da seguinte forma:
Recordset(mySecondRecordset) Recordset(myRecordset)
Tpicos relacionados: Editar contedo dinmico na pgina 789
Tornar dinmico o texto

possvel substituir um texto existente por um texto dinmico ou colocar um texto dinmico em um ponto de insero especfico na pgina.
Para adicionar um texto dinmico:
1. 2.
Abra o painel Bindings (Ligaes) selecionando Window (Janela) > Bindings. Verifique se o painel Bindings relaciona a fonte de contedo que voc deseja utilizar. A fonte de contedo deve conter texto simples (texto ASCII). O texto simples inclui HTML. Se nenhuma fonte de contedo aparecer na lista ou se as fontes de contedo disponveis no atenderem s suas necessidades, clique no boto de adio (+) para definir uma nova fonte de contedo. Consulte Captulo 33, Definir as fontes de contedo dinmico, na pgina 759.
3.
No modo de visualizao do projeto, selecione o texto da pgina ou clique no local onde deseja adicionar o texto dinmico.
Tornar dinmico o texto
783
4.
No painel Bindings, selecione uma fonte de contedo da lista. Se um recordset for selecionado, especifique a coluna desejada no recordset.
5.
Clique em Insert (Inserir) ou arraste a fonte de contedo para a pgina.
O contedo dinmico ser exibido na pgina se voc estiver trabalhando na visualizao do projeto com a opo Live Data (Dados ativos) ativada; selecione essa opo a partir de View (Exibir) > Live Data (Dados ativos). Se Live Data estiver ativo, um alocador de espao ser exibido. (Se voc selecionou um texto na pgina, o alocador de espao substituir a seleo de texto.) O alocador de espao do contedo do recordset utiliza a sintaxe {RecordsetName.ColumnName}, onde Recordset o nome do recordset e ColumnName o nome da coluna escolhida do recordset. s vezes, o comprimento dos alocadores de espao de texto dinmico distorce o layout da pgina na janela do documento. possvel resolver o problema utilizando as chaves vazias como alocadores de espao.
Para criar alocadores de espao de texto dinmico:
1.
Selecione Edit (Editar) > Preferences (Preferncias) > Invisible Elements (Elementos invisveis) (no Windows) ou Dreamweaver > Preferences > Invisible Elements (no Macintosh). No menu pop-up Show Dynamic Text As (Mostrar texto dinmico como), selecione {}. Clique em OK.
2. 3.
Tpicos relacionados Sobre a adio de contedo dinmico na pgina 781
Texto dinmico na pgina 782
784
Tornar dinmicas as imagens

possvel tornar dinmicas as imagens na pgina. Por exemplo, suponha que uma pgina seja projetada para exibir os itens para vendas num leilo de caridade. Cada pgina incluiria um texto descritivo e uma fotografia de um item. O layout geral da pgina permaneceria o mesmo para cada item, mas a fotografia e o texto descritivo poderiam mudar.
Para tornar dinmica uma imagem:
1.
Abra a pgina na visualizao do projeto (View > Design) e posicione o ponto de insero no local onde deseja que a imagem aparea na pgina. Selecione Insert (Insert) > Image (Imagem). A caixa de dilogo Select Image Source (Selecionar origem da imagem) exibida. Clique na opo Data Sources (Fontes de dados) (no Windows) ou no boto Data Source (Fonte de dados) (no Macintosh). Uma lista de fontes de contedo exibida.
2.
3.
4.
Selecione uma fonte de contedo na lista. A fonte do contedo deve ser um recordset que contenha os caminhos de seus arquivos de imagens. Dependendo da estrutura de arquivos do seu site, tais caminhos podem ser absolutos, relativos ao documento ou relativos raiz.
N OT A
O Dreamweaver ainda no oferece suporte a imagens binrias armazenadas em bancos de dados.
Se nenhum recordset for exibido na lista ou, se os que estiverem disponveis no atenderem s suas necessidades, defina um novo recordset. Para obter instrues, consulte Recordsets na pgina 760.
Tornar dinmicas as imagens
785
5.
Clique em OK.
Tornar dinmicos atributos HTML

possvel alterar dinamicamente a aparncia da pgina ligando os atributos HTML aos dados. Por exemplo, possvel alterar a imagem de fundo de uma tabela ligando o atributo background da tabela a um campo de um recordset. possvel ligar atributos HTML com o painel Bindings (Ligaes) com o Property Inspector (Inspetor de propriedades).
Para tornar dinmicos atributos HTML com o painel Bindings:
1. 2.
Abra o painel Bindings (Ligaes) selecionando Window (Janela) > Bindings. Verifique se o painel Bindings relaciona as fontes de dados que voc deseja utilizar. A fonte de contedo deve conter os dados apropriados ao atributo HTML que voc deseja relacionar. Se nenhuma fonte de contedo aparecer na lista, ou se as fontes de contedo disponveis no atenderem as suas necessidades, clique no boto de adio (+) para definir uma nova fonte de dados. Para obter instrues, consulte Captulo 33, Definir as fontes de contedo dinmico, na pgina 759.
3.
Na visualizao do projeto, selecione um objeto HTML. Por exemplo, para selecionar uma tabela HTML, clique no interior da tabela e, em seguida, na tag <table>, no seletor de tags localizado no canto inferior esquerdo da janela do documento.
4. 5. 6.
No painel Bindings, selecione uma fonte de contedo na lista. Na caixa Bind To (Ligar a), selecione um atributo HTML do menu pop-up. Clique em Bind (Ligar).
Sempre que a pgina for executada no servidor de aplicativos, o valor da fonte de dados ser atribudo ao atributo HTML.
Para tornar dinmicos atributos HTML com o Property Inspector:
1.
Na visualizao do projeto, selecione um objeto HTML e abra o Property Inspector (Propriedades) a partir da seleo de Window (Janela) > Properties (Propriedades). Por exemplo, para selecionar uma tabela HTML, clique no interior da tabela e, em seguida, na tag <table>, no seletor de tags localizado no canto inferior esquerdo da janela Document (Documento).
786
2.
O modo como voc vincula uma fonte de contedo dinmico ao atributo HTML depende de sua localizao:
Se, junto ao atributo que voc deseja vincular, houver um cone em formato de pasta no Property inspector, clique sobre o cone da pasta para abrir uma caixa de dilogo com uma seleo de arquivos. Em seguida, clique na opo Data Sources para exibir uma lista de fontes de dados. Se no houver um cone de pasta ao lado do atributo que voc deseja vincular, clique na guia List (a mais baixa das duas guias) no lado esquerdo do inspetor. Aparecer a visualizao de lista do Property inspector (Inspetor de propriedades). Se o atributo que voc deseja vincular no estiver na lista, clique no boto com o sinal de adio (+) e, em seguida, digite o nome do atributo ou clique no boto de seta pequena e selecione o atributo no menu pop-up.
3.
Para tornar dinmico 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 clicou no cone de raio, aparecer uma lista de fontes de dados. Por exemplo:
Se voc clicar no cone de pasta aparecer uma caixa de dilogo de seleo de arquivo. Clique na opo Data Sources (Fontes de dados) para exibir uma lista de fontes de contedo.
Tornar dinmicos atributos HTML
787
4.
Selecione uma fonte de contedo na lista de fontes de dados. A fonte de contedo deve conter os dados apropriados ao atributo HTML que voc deseja ligar. Se nenhuma fonte de contedo aparecer na lista ou se as fontes de contedo disponveis no atenderem s suas necessidades, defina uma nova fonte de contedo. Para obter instrues, consulte Captulo 32, Obter dados para a pgina, na pgina 745.
5.
Clique em OK.
Sempre que a pgina for executada no servidor de aplicativos, o valor da fonte de dados ser atribudo ao atributo HTML.
Tornar dinmicos objetos ActiveX, Flash e outros parmetros de objetos

possvel tornar dinmicos os parmetros de miniaplicativos e plug-ins Java, bem como os parmetros de objetos ActiveX, Macromedia Flash, Shockwave, Director e Generator. Antes de comear, verifique se os campos no recordset contm dados apropriados para os parmetros dos objetos que deseja ligar.
Para tornar dinmicos parmetros de objetos:
1.
Na visualizao do projeto, selecione um objeto na pgina e abra o Property Inspector (Inspetor de propriedades) a partir da seleo de Window (Janela) > Properties. Clique no boto Parameters (Parmetros). A caixa de dilogo Parameters exibida.
2.
3.
Se o seu parmetro no aparecer na lista, clique no boto de adio (+) e digite um nome de parmetro na coluna Parameter. Clique na coluna Value (Valor) do parmetro e, em seguida, clique no cone de raio para especificar um valor dinmico. Uma lista de fontes de dados exibida.
4.
788
5.
Selecione uma fonte de dados na lista. A fonte de dados deve conter os dados apropriados ao parmetro do objeto que voc deseja ligar. Se nenhuma fonte de dados aparecer na lista ou se as fontes de dados disponveis no atenderem s suas necessidades, defina uma nova fonte de dados. Para obter instrues, consulte Captulo 33, Definir as fontes de contedo dinmico, na pgina 759.
6.
Clique em OK.
Editar contedo dinmico

Para editar um comportamento do servidor que fornece o contedo dinmico, clique duas vezes no comportamento do servidor no painel Server Behaviors (Comportamentos de servidor). Ser exibida a mesma caixa de dilogo que voc usou para definir a fonte de dados original. Faa as alteraes na caixa de dilogo e clique em OK. Tambm possvel utilizar o Property Inspector (Inspetor de propriedades) para editar os recordsets na pgina. Abra o Property inspector (Window > Properties) e, em seguida, selecione o recordset no painel Server Behaviors (Window > Server Behaviors). Se um recordset for editado na janela Live Data (Dados ativos) com a opo Auto Refresh (Atualizao automtica) no selecionada, ser necessrio atualizar a pgina para visualizar as alteraes. Para atualizar a pgina, clique no boto Refresh (Atualizar) e selecione View > Refresh Live Data (Atualizar dados ativos). Tpicos relacionados Editar contedo dinmico na pgina 789

Aps adicionar o contedo dinmico a uma pgina, possvel exclui-lo selecionando-o na pgina e pressionando a tecla Delete. Tambm possvel excluir o contedo dinmico atravs de sua seleo no painel Server Behaviors (Comportamentos de servidor) e, em seguida, clicando no boto de subtrao (-).
NO T A
Essa operao remove o script do servidor na pgina que recupera o contedo dinmico do banco de dados. Ela no exclui os dados do banco de dados.
Tpicos relacionados Editar contedo dinmico na pgina 789 Editar contedo dinmico na pgina 789
789
Criar pginas dinmicas em um site do Contribute

Quando um usurio do Contribute estiver editando uma pgina com contedo dinmico ou elementos ocultos (como scripts e comentrios), o Contribute exibir o contedo dinmico e elementos ocultos em forma de marcadores amarelos. Por padro, os usurios do Contribute no podem selecionar ou excluir esses marcadores. Se desejar que os usurios do Contribute possam selecionar e excluir o contedo dinmico e outros elementos ocultos de uma pgina, possvel modificar as configuraes do grupo de permisses para isso; os usurios do Contribute geralmente no podem editar o contedo dinmico, mesmo se forem autorizados a selecion-lo.
N OT A
Por meio de algumas tecnologias de servidor, possvel exibir o texto esttico utilizando uma tag ou funo do servidor. Para permitir que usurios do Contribute possam editar o texto esttico em uma pgina dinmica com essa tecnologia de servidor, coloque o texto esttico fora das tags do servidor.
Para permitir a um grupo de usurios do Contribute excluir cdigos de pginas:

1. 2.
Selecione Site > Administer Contribute Site (Administrar site do Contribute). Se determinadas opes exigidas para a compatibilidade do Contribute no estiverem ativadas, uma caixa de dilogo ser exibida perguntando se voc desejar ativar essas opes. Clique em OK para ativar essas opes e a compatibilidade do Contribute. Para obter mais informaes, consulte Preparar um site para utilizar com o Contribute na pgina 207. Se solicitado, digite a senha de administrador e clique em OK. A caixa de dilogo Administer Website (Administrar site da Web) exibida. Na categoria Users and Roles (Usurios e funes), selecione uma funo e, em seguida, clique no boto Edit Role Settings (Editar configuraes de funo). Selecione a categoria Editing (Edio) e desmarque a opo para proteger scripts e formulrios. Para obter mais informaes, consulte Criar modelos para um site do Contribute na pgina 344 e Administering Macromedia Contribute. Clique em OK para fechar a caixa de dilogo Edit Settings (Editar configuraes).
3.
4.
5.
6.
790
7.
Clique em Close (Fechar) para fechar a caixa de dilogo Administer Website (Administrar site da Web).
Tpicos relacionados Gerenciar sites do Contribute com o Dreamweaver na pgina 201
Criar modelos para um site do Contribute na pgina 344
Criar pginas dinmicas em um site do Contribute
791
792
CAPTULO 35
Exibir registros de bancos de dados

A exibio de registros de banco de dados envolve recuperar informaes armazenadas em um banco de dados ou em outra fonte de contedo e submeter essas informaes a uma pgina da web. O Macromedia Dreamweaver 8 oferece diversos mtodos de exibio de contedo dinmico e vrios comportamentos de servidor incorporados que possibilitam aprimorar a apresentao do contedo dinmico e facilitam a busca de informaes e a navegao nas informaes retornadas de um banco de dados. Este captulo contm as seguintes sees:
35
Sobre a exibio de registros de bancos de dados . . . . . . . . . . . . . . . . . . . . . . . . . .793 Utilizar formatos de dados predefinidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 800 Criar links de navegao para recordsets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 802 Mostrar ou ocultar regies com base em resultados do recordset . . . . . . . . . . . . 806 Exibir vrios resultados de recordsets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 806 Criar uma tabela com um comportamento de servidor Repeat Region (Repetir regio) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .808 Criar um contador de registros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 809
Sobre a exibio de registros de bancos de dados

Os bancos de dados e outras fontes de contedo dinmico fornecem mais capacidade e flexibilidade na busca, classificao e visualizao de grande volume de informaes armazenadas. A utilizao de um banco de dados para armazenar contedo para sites da Web faz sentido quando necessrio armazenar um grande volume de informaes e recuperar e exibir essas informaes de uma forma compreensiva. O Dreamweaver fornece diversas ferramentas e comportamentos predefinidos para ajud-lo, de forma eficiente, a recuperar e exibir informaes armazenadas em um banco de dados. As prximas sees descrevem os comportamentos de servidor e os elementos de formatao do Dreamweaver, e como voc pode utiliz-los para exibir contedo dinmico.
793
Comportamentos de servidor e elementos de formatao

O Dreamweaver fornece os comportamentos de servidor e elementos de formatao a seguir para aprimorar a exibio de dados dinmicos:
Formats (Formatos): permite aplicar tipos diferentes de valores numricos, monetrios, data/ hora e percentagem ao texto dinmico.
Por exemplo, se o preo de um item em um recordset for de 10,989, possvel exibir o preo na pgina como $ 10,99, selecionando o formato Currency - 2 Decimal Places (Moeda Duas casas decimais) do Dreamweaver. Este formato exibe um nmero com duas casas decimais. Se o nmero tiver mais de duas casas decimais, o formato de dados arredondar o nmero para o decimal mais prximo. Se o nmero no tiver nenhuma casa decimal, o formato de dados adicionar um ponto decimal e dois zeros.
Repeated Region (Regio repetitiva):
esse comportamento de servidor permite exibir itens mltiplos retornados de uma consulta a um banco de dados e especificar o nmero de registros a serem exibidos por pgina.
Recordset Navigation (Navegao no recordset): esse comportamento de servidor permite
inserir elementos de navegao de modo que os usurios possam ir para o grupo de registros seguinte ou anterior retornado pelo recordset. Por exemplo, se 10 registros forem exibidos por pgina utilizando o objeto de servidor Repeated Region (Regio repetitiva) e o recordset retornar 40 registros, possvel navegar nos 10 registros de uma s vez.
Recordset Status Bar (Barra de status do recordset): esse comportamento de servidor inclui um contador que mostra aos usurios onde sua posio dentro de um recordset em relao ao nmero total de registros retornados.
esses comportamentos de servidor permitem mostrar ou ocultar itens na pgina com base na importncia dos registros exibidos no momento. Por exemplo, se um usurio navegou at o ltimo registro de um recordset, epossvel omitir o link seguinte e exibir apenas o link dos registros anteriores.
Show Region (Mostrar regio):
794
Captulo 35: Exibir registros de bancos de dados
Aplicar elementos tipogrficos e de layout de pgina a dados dinmicos

Um recurso poderoso do Dreamweaver a capacidade de apresentar dados dinmicos em uma pgina estruturada e aplicar formatao tipogrfica utilizando HTML e CSS. Para aplicar formatos a dados dinmicos no Dreamweaver, formate as tabelas e alocadores de espao para os dados dinmicos, utilizando as ferramentas de formatao do Dreamweaver. Quando os dados forem inseridos da fonte de dados, o programa adotar automaticamente a formatao especificada para fontes, pargrafos e tabelas. Para obter mais informaes sobre os recursos de formatao do Dreamweaver e como apliclos a elementos de dados dinmicos, consulte Captulo 8, Apresentar contedo com tabelas, na pgina 257 e Captulo 13, Inserir e formatar texto, na pgina 405.
Navegar em resultados de recordsets de bancos de dados

Os links de navegao do recordset permitem que os usurios se movam entre os registros ou conjuntos de registros. Por exemplo, aps criar uma pgina para exibir cinco registros de cada vez, adicione links como Next (Prximo) ou Previous (Anterior) para que os usurios possam visualizar os cinco registros anteriores ou posteriores. O Dreamweaver permite criar quatro tipos de links de navegao para percorrer um recordset: First (Primeiro), Previous, Next e Last (ltimo). Uma nica pgina pode conter qualquer nmero destes links, desde que todos eles funcionem em apenas um nico recordset. No possvel adicionar links para percorrer um segundo recordset na mesma pgina.
N OT A

O Microsoft ASP.NET refere-se a um recordset como DataSet. Se voc estiver trabalhando com tipos de documento ASP.NET, as caixas de dilogo e opes de menu especficas do ASP.NET utilizam a denominao DataSet. A documentao do Dreamweaver refere-se a ambos os tipos como recordsets, mas utiliza DataSet ao descrever especificamente os recursos do ASP.NET.
Os links de navegao dos recordsets requerem os seguintes elementos dinmicos: Um recordset para navegar Contedo dinmico na pgina, para exibir o registro ou os registros Texto ou imagens na pgina, para atuar como uma barra de navegao clicvel Um conjunto de comportamentos de servidor Move To Record (Mover para o registro) para percorrer o recordset
795
possvel adicionar os dois ltimos elementos utilizando o objeto de servidor Recordset Navigation Bar (Barra de navegao do recordset) ou adicion-los separadamente utilizando as ferramentas de criao do Dreamweaver e o painel Server Behaviors (Comportamentos de servidor). Tpicos relacionados Criar links de navegao para recordsets na pgina 802
Criar barras de navegao personalizadas para recordsets

Se desejar criar uma barra de navegao para um recordset utilizando estilos de layout e de formatao mais complexos do que os oferecidos pela tabela simples criada a partir do objeto de servidor Recordset Navigation Bar (Barra de navegao para recordset), poder preferir criar a sua prpria barra de navegao. Para isto, preciso criar primeiro os links de navegao necessrios (seja em forma de texto ou imagens) inseri-los na pgina na visualizao do projeto e atribuir a cada um deles comportamentos de servidor individuais. possvel atribuir os seguintes comportamentos de servidor individuais a links de navegao:

Move to first page (Mover para a primeira pgina) Move to last page (Mover para a ltima pgina) Move to next page (Mover para a prxima pgina) Move to previous page (Mover para a pgina anterior)
Se preferir utilizar o objeto de servidor Recordset Navigation Bar incorporado do Dreamweaver para criar uma barra de navegao, consulte Criar uma barra de navegao utilizando o comportamento de servidor Recordset Navigation Bar (Barra de navegao para recordset) na pgina 803.
Tarefas para criao da barra de navegao

Ao criar uma barra de navegao, comece criando sua representao visual, utilizando as ferramentas de criao de pginas do Dreamweaver. No necessrio criar um link para a seqncia de caracteres de texto ou imagem, pois o Dreamweaver o criar automaticamente. A pgina criada para a barra de navegao deve conter um recordset para navegao. Para obter mais informaes, consulte Recordsets na pgina 760. Uma barra de navegao para recordset simples pode parecer com a do exemplo, com botes de links criados a partir de imagens ou outros elementos de contedo:
796
Aps adicionar um recordset a uma pgina e criar uma barra de navegao, necessrio aplicar comportamentos de servidor individuais a cada elemento de navegao. Por exemplo, uma barra de navegao para recordset tpica contm representaes dos links correspondentes ao comportamento apropriado:
Link de navegao
Ir para a primeira pgina Ir para a pgina anterior Ir para a prxima pgina Ir para a ltima pgina
Comportamento de servidor
Move to first page (Mover para a primeira pgina) Move to previous page (Mover para a pgina anterior) Move to next page (Mover para a prxima pgina) Move to last page (Mover para a ltima pgina)
Tpicos relacionados Exibir vrios resultados de recordsets na pgina 798
Mostrar ou ocultar regies com base em resultados de recordsets

O Dreamweaver inclui um conjunto de comportamentos de servidor que permite exibir ou ocultar uma regio com base nos resultados retornados por um recordset. Por exemplo, em uma pgina utilizando os links de registro Previous (Anterior) e Next (Prximo) para navegar em uma pgina de resultados, possvel especificar que o link de registro Previous seja exibido em todas as pginas de resultados, exceto a primeira (que no possui nenhum resultado anterior) e que o link de registro Next seja mostrado em todas as pginas com exceo da ltima (que no possui nenhum resultado posterior). Tambm possvel especificar que uma regio seja exibida ou ocultada com base em um recordset vazio ou no. Se um recordset estiver vazio (por exemplo, nenhum registro corresponde consulta), possvel exibir uma mensagem que informa ao usurio que nenhum registro foi devolvido. Isto til principalmente ao criar pginas de busca que dependem dos termos de entrada de busca do usurio para executar consultas. Do mesmo modo, possvel exibir uma mensagem de erro se houver algum problema de conexo a um banco de dados ou se o nome e senha de usurio no corresponderem aos reconhecidos pelo servidor.
797
Os comportamentos de servidor Show Region (Mostrar regio) so os seguintes:

Show If Recordset Is Empty (Mostrar se o recordset estiver vazio) Show If Recordset Is Not Empty (Mostrar se o recordset no estiver vazio) Show If First Page (Mostrar se for a primeira pgina) Show If Not First Page (Mostrar se no for a primeira pgina) Show If Last Page (Mostrar se for a ltima pgina) Show If not Last Page (Mostrar se no for a ltima pgina)
Para aprender como aplicar os comportamentos de servidor Show Region, consulte Mostrar ou ocultar regies com base em resultados do recordset na pgina 806.
Exibir vrios resultados de recordsets

O comportamento de servidor Repeat Region (Repetir regio) permite exibir diversos registros de um recordset dentro de uma pgina. Qualquer seleo de dados dinmicos pode ser transformada em uma regio repetitiva. As regies mais comuns, no entanto, so uma tabela, uma linha da tabela ou uma srie de linhas da tabela. O exemplo a seguir ilustra como o comportamento de servidor Repeat Region aplicado a uma linha de uma tabela e especifica que nove registros devem ser exibidos por pgina. A prpria linha exibe quatro registros diferentes: city (cidade), state (estado), street address (endereo) e zip code (CEP).
798
Para criar uma tabela como a do exemplo acima, necessrio criar uma tabela com contedo dinmico e aplicar o comportamento de servidor Repeat Region linha da tabela que contm o contedo dinmico. Quando a pgina processada pelo servidor de aplicativos, a linha repetida o nmero de vezes especificado no objeto de servidor Repeat Region, com um registro diferente inserido em cada nova linha. Para aprender como aplicar o comportamento de servidor Repeat Region, consulte Exibir vrios resultados de recordsets na pgina 806 e Criar uma tabela com um comportamento de servidor Repeat Region (Repetir regio) na pgina 808.
Record counters (Contadores de registros)

Os contadores de registros oferecem aos usurios um ponto de referncia quando estiverem navegando por um recordset. Normalmente, os contadores de registros exibem o nmero total de registros retornado e os registros atuais visualizados. Por exemplo, se um recordset retornar 40 registros individuais e forem exibidos 8 registros por pgina, o contador de registros indicar Displaying records 1-8 of 40 (Exibindo registros 1-8 de 40) na primeira pgina. Para criar um contador de registros para uma pgina, necessrio criar primeiro um recordset para a pgina, um layout de pgina apropriado para conter o contedo dinmico e uma barra de navegao para o recordset. Para aprender mais sobre como criar esses elementos e adicion-los a uma pgina, consulte as sees a seguir:

Recordsets na pgina 760 Criar links de navegao para recordsets na pgina 802 Exibir vrios resultados de recordsets na pgina 806 Criar uma tabela com um comportamento de servidor Repeat Region (Repetir regio) na pgina 808
Uma vez que os elementos acima estejam na pgina, possvel criar um contador de registros.
Contador de registro simples

possvel criar um contador de registro simples utilizando o objeto de servidor Recordset Navigation Status (Status de navegao do recordset). Este objeto de servidor insere um contador de registros completo com o qual possvel aplicar formatao de texto com as ferramentas de criao de pginas do Dreamweaver. Para obter mais informaes sobre este contador de registros, consulte Criar um contador de registros utilizando o objeto Recordset Navigation Status (Status de navegao do recordset) na pgina 810.
799
Contadores de registros personalizados

possvel utilizar comportamentos de contagem de registros individuais para criar contadores de registros personalizados. A criao de um contador de registros personalizado permite criar um contador de registros mais completo do que a tabela simples com uma nica linha inserida pelo objeto de servidor Recordset Navigation Status (Status de navegao do recordset). possvel organizar elementos de design de diversas formas criativas e aplicar um comportamento de servidor apropriado a cada elemento. Os comportamentos de servidor Record Count (Contador de registros) so os seguintes:

Display Starting Record Number (Exibir o nmero do registro inicial) Display Ending Record Number (Exibir o nmero do registro final) Display Total Records (Exibir total de registros)
A seo Criar contadores de registros personalizados na pgina 811 o guia atravs das etapas necessrias para criar um contador de registros atravs da aplicao dos comportamentos de servidor Record Counter individuais para elementos do projeto de uma pgina.
Utilizar formatos de dados predefinidos

O Dreamweaver vem com vrios formatos de dados predefinidos que podem ser aplicados a elementos de dados dinmicos. Os dados incluem formatos de data e hora, moeda, numricos e de porcentagem.
Para aplicar formatos de dados a texto dinmico:
1.
Selecione o contedo dinmico na janela Live Data o alocador de espao na janela do documento. Selecione Window (Janela) > Bindings (Ligaes) para exibir o painel Bindings. Clique no boto de seta para baixo na coluna Format (Formato). Se a seta para baixo no estiver visvel, expanda o painel. No menu pop-up Format, 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, os formatos Currency (Moeda) funcionam somente se os dados dinmicos forem algarismos. Observe que no possvel aplicar mais de um formato aos mesmos dados.
2. 3.
4.
800
5.
Verifique se o formato foi aplicado corretamente visualizando a pgina na janela Live Data ou em um navegador.
Tpicos relacionados Criar novos formatos de dados na pgina 801
Personalizar os formatos de dados existentes

possvel personalizar os formatos de dados do Dreamweaver ou criar seus prprios formatos.
Para personalizar um formato de dados:
1. 2. 3.
Abra uma pgina que contm dados dinmicos na visualizao do projeto. Selecione os dados dinmicos cujo formato deseja personalizar. Selecione Window (Janela) > Bindings (Ligaes) para exibir o painel Bindings. O item de dados ligados cujo texto dinmico selecionado ser realado. Clique na seta para baixo na coluna Format (Formato) para expandir o menu pop-up dos formatos de dados disponveis. Se a seta para baixo no estiver visvel, expanda o painel. Selecione Edit Format List (Editar lista de formatos) no menu pop-up. A caixa de dilogo Edit Format List exibida. Preencha a caixa de dilogo e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
4.
5.
6.
Tpicos relacionados Utilizar formatos de dados predefinidos na pgina 800
Criar novos formatos de dados na pgina 801
Criar novos formatos de dados

possvel criar novos formatos de dados para adequar-se a quaisquer tipos de dados dinmicos que desejar exibir.
Para criar um novo formato de dados:
1. 2.
Abra uma pgina que contenha dados dinmicos na visualizao do projeto. Selecione os dados dinmicos para o qual deseja criar um formato personalizado.
Utilizar formatos de dados predefinidos
801
3.
Selecione Window (Janela)> Bindings (Ligaes) para exibir o painel Bindings e clique no boto de seta na coluna Format (Formato). Se a seta para baixo no estiver visvel, expanda o painel. Selecione Edit Format List (Editar lista de formatos) no menu pop-up. A caixa de dilogo Edit Format List exibida. Clique no boto de adio (+) e selecione um tipo de formato. Defina o formato e clique em OK. Digite um nome para o novo formato na coluna Name (Nome). Clique em OK para fechar a caixa de dilogo Edit Format List.
4.
5. 6. 7. 8.
Tpicos relacionados Personalizar os formatos de dados existentes na pgina 801
Criar novos formatos de dados na pgina 801
Criar links de navegao para recordsets

Os links de navegao do recordset permitem que os usurios se movam entre os registros ou conjuntos de registros. Por exemplo, aps criar uma pgina para exibir cinco registros de cada vez, adicione links como "Next (Prximo) ou Previous (Anterior) para que os usurios possam visualizar os cinco registros anteriores ou posteriores. Voc pode criar links de navegao para o recordset por meio do comportamento de servidor Recordset Navigation Bar (Barra de navegao para recordsets) ou pode criar uma barra de navegao de recordset personalizada. Tpicos relacionados Navegar em resultados de recordsets de bancos de dados na pgina 795 Criar barras de navegao personalizadas para recordsets na pgina 796 Criar uma barra de navegao personalizada para um recordset na pgina 804
802
Criar uma barra de navegao utilizando o comportamento de servidor Recordset Navigation Bar (Barra de navegao para recordset)
possvel criar uma barra de navegao do recordset em uma nica operao, usando o comportamento de servidor Recordset Navigation Bar. O objeto de servidor adiciona os seguintes blocos de criao pgina:

Uma tabela HTML com links de texto ou imagem Um conjunto de comportamentos de servidor Move to (Mover para) Um conjunto de comportamentos de servidor Show Region (Mostrar regio)
A verso de texto da Recordset Navigation Bar semelhante ao exemplo a seguir:
A verso grfica da Recordset Navigation Bar semelhante ao exemplo a seguir:
Antes de colocar a barra de navegao na pgina, certifique-se de que a pgina contenha um recordset de navegao e um layout de pgina para exibir os registros. Aps colocar a barra de navegao na pgina, voc pode usar as ferramentas de desenho do Dreamweaver para personalizar a barra a seu gosto. Tambm possvel editar os comportamentos de servidor Move to e Show Region clicando duas vezes nos comportamentos no painel Server Behaviors (Comportamentos de servidor). Se desejar criar a barra de navegao bloco a bloco utilizando as ferramentas de criao do Dreamweaver e o painel Server Behaviors, consulte Criar uma barra de navegao personalizada para um recordset na pgina 804.
Para criar a barra de navegao para recordset com o objeto de servidor:
1.
Na visualizao do projeto, posicione o ponto de insero no local da pgina onde deseja que a barra de navegao aparea. Abra a caixa de dilogo Recordset Navigation Bar (Insert > Application Objects > Recordset Navigation Bar).
2.
803
A caixa de dilogo Insert Recordset Navigation Bar (Inserir barra de navegao para recordset) exibida.
3. 4.
Selecione, no menu pop-up Recordset, o recordset no qual deseja navegar. Na seo Display Using (Exibir utilizando), selecione o formato com o qual os links de navegao da pgina sero exibidos. A opo Text (Texto) insere links de texto na pgina, enquanto a opo Images (Imagens) permite utilizar imagens grficas como links. Na verso de imagem da barra de navegao, o Dreamweaver utiliza os prprios arquivos de imagem do programa. Aps inserir a barra na pgina, possvel substituir essas imagens por seus prprios arquivos de imagem.
5.
Clique em OK. O Dreamweaver cria uma tabela contendo links de texto ou de imagens que permitem ao usurio navegar pelo recordset selecionado quando ele clicado. Quando o primeiro registro do recordset for exibido, as imagens ou os links First (Primeiro) e Previous (Anterior) so ocultados. Quando o ltimo registro do recordset for exibido, as imagens ou os links Next (Prximo) e Last (ltimo) so ocultados. possvel personalizar o layout da barra de navegao utilizando as ferramentas de criao do Dreamweaver.
Tpicos relacionados Criar uma barra de navegao personalizada para um recordset na pgina 804
Criar uma barra de navegao personalizada para um recordset

Voc pode criar uma barra de navegao personalizada para recordset, que use um layout e estilos de formatao mais complexos do que os oferecidos pela tabela simples usada pelo objeto de servidor da Recordset Navigation Bar (Barra de navegao para recordset).
804
Para criar sua prpria barra de navegao para recordset, voc deve:

Desenhar os links de navegao usando texto ou imagens Colocar os links na pgina na visualizao de projeto Atribuir comportamentos de servidor individuais a cada link de navegao
Para aprender mais sobre como criar uma barra de navegao para um recordset personalizada, consulte Criar barras de navegao personalizadas para recordsets na pgina 796. Se preferir utilizar o objeto de servidor Recordset Navigation Bar (Barra de navegao para recordset) incorporado do Dreamweaver para criar uma barra de navegao, consulte Criar uma barra de navegao utilizando o comportamento de servidor Recordset Navigation Bar (Barra de navegao para recordset) na pgina 803. Este procedimento descreve como atribuir comportamentos de servidor individuais aos links de navegao.
Para atribuir comportamentos de servidor a links de navegao de recordsets:
1.
Na visualizao do projeto, selecione a seqncia de caracteres de texto ou imagem na pgina que deseja utilizar como link de navegao de registro. Abra o painel Server Behaviors (Comportamentos de servidor) a partir de Window (Janela) > Server Behaviors e clique no boto de adio (+). Selecione Recordset Paging (Paginao de recordset) no menu pop-up e, em seguida, selecione um comportamento de servidor apropriado para esse link a partir dos comportamentos de servidor listados. Observe que se o recordset possuir muitos registros, possvel que o comportamento de servidor Move to Last Record (Mover para o ltimo registro) demore bastante para ser executado quando o usurio clicar neste link.
2.
3.
4. 5.
No menu pop-up Recordset, selecione o recordset que contm os registros. Clique em OK. O comportamento de servidor est atribudo ao link de navegao.
Tpicos relacionados Navegar em resultados de recordsets de bancos de dados na pgina 795
Criar barras de navegao personalizadas para recordsets na pgina 796
805
Mostrar ou ocultar regies com base em resultados do recordset

O Dreamweaver inclui um conjunto de comportamentos de servidor que permitem exibir ou ocultar uma regio com base nos resultados retornados por um recordset. Para aprender mais sobre os comportamentos de servidor Show Region (Mostrar regio) e sobre como eles podem ser utilizados para mostrar ou ocultar resultados de recordsets, consulte, Mostrar ou ocultar regies com base em resultados de recordsets na pgina 797.
Para exibir uma regio apenas quando for necessrio:
1. 2.
Na visualizao do projeto, selecione a regio da pgina a ser exibida ou ocultada. No painel Server Behaviors (Comportamentos do servidor) (Window > Server Behaviors) clique no boto de adio (+) . Selecione Show Region (Mostrar regio) no menu pop-up e, em seguida, escolha um dos comportamentos de servidor listados. Clique em OK.
3.
4.
Tpicos relacionados Sobre a exibio de registros de bancos de dados na pgina 793
Criar uma tabela com um comportamento de servidor Repeat Region (Repetir regio) na pgina 808

O comportamento de servidor Repeat Region (Repetir regio) permite exibir diversos registros de um recordset dentro de uma pgina. Qualquer seleo de dados dinmicos pode ser transformada em uma regio repetitiva. Todavia, as regies mais comuns so tabelas, linhas de tabelas ou uma srie de linhas de tabelas. Para aprender mais sobre como utilizar o comportamento de servidor Repeat Region, consulte Exibir vrios resultados de recordsets na pgina 798 e Criar uma tabela com um comportamento de servidor Repeat Region (Repetir regio) na pgina 808.
806
Para criar uma regio repetitiva:

1.
Na visualizao do projeto, selecione uma regio que possua contedo dinmico. A seleo pode ser qualquer elemento, incluindo uma tabela, uma linha de tabela ou at mesmo um pargrafo de texto. Para selecionar com exatido uma regio na pgina, utilize o seletor de tags no canto esquerdo da janela do documento. Por exemplo, se a regio for uma linha de tabela, clique dentro da linha na pgina e, em seguida, clique na tag <tr> mais direita no seletor de tags para selecionar a linha da tabela.
2.
Selecione Window (Janela)> Server Behaviors (Comportamentos de servidor) para exibir o painel Server Behaviors. Clique no boto de sinal de adio (+) e selecione Repeat Region. A caixa de dilogo Repeat Region exibida.
3.
4. 5. 6.
Selecione, no menu pop-up, o nome do recordset a ser utilizado. Selecione o nmero de registros a serem exibidos por pgina. Clique em OK. Na janela do documento, um contorno cinza e estreito com guia ser exibido ao redor da regio repetitiva. Na janela Live Data (Dados ativos), aberta a partir da seleo de View (Exibir) > Live Data, o contorno cinza desaparecer e a seleo se expandir para exibir o nmero de registros que voc tiver especificado.
Tpicos relacionados Sobre a exibio de registros de bancos de dados na pgina 793
Mostrar ou ocultar regies com base em resultados do recordset na pgina 806
807
Criar uma tabela com um comportamento de servidor Repeat Region (Repetir regio)
O objeto de servidor Dynamic Table (Tabela dinmica) permite criar uma tabela com contedo dinmico e aplicar o comportamento Repeat Region (Repetir regio) a partir de uma nica caixa de dilogo. Esse objeto de servidor bastante til, pois preenche simultaneamente uma tabela com contedo dinmico de um recordset e aplica o comportamento de servidor Repeat Region.
NO T A
O objeto de servidor Dynamic Table (Tabela dinmica) no est disponvel ao utilizar tipos de documento ASP.NET. Para criar uma tabela com contedo dinmico e regies repetitivas, necessrio inserir a tabela manualmente, inserir o contedo dinmico do painel Bindings (Ligaes) e aplicar um comportamento de servidor de regio repetitiva, se necessrio. Para obter mais informaes, consulte Exibir vrios resultados de recordsets na pgina 806.
Para criar uma tabela dinmica:

1.
Para criar uma tabela dinmica:
Selecione Insert (Inserir) > Application Objects (Objetos de aplicativos) > Dynamic Table para exibir a caixa de dilogo Dynamic Table.> Na categoria Application (Aplicativo) da barra Insert, selecione o boto Dynamic Table no menu Dynamic Data (Dados dinmicos).
Ser exibida a caixa de dilogo Dynamic Table.
2. 3.
Selecione, no menu pop-up Recordset, o recordset que deseja utilizar. Selecione o nmero de registros a serem exibidos por pgina.
808
4.
Digite valores para a borda da tabela, preenchimento de clula e espaamento entre as clulas, se desejado. A caixa de dilogo Dynamic Table retm os valores inseridos para bordas da tabela, preenchimento de clula e espaamento entre as clulas. Se voc estiver trabalhando em um projeto que necessita de vrias tabelas dinmicas que requerem a mesma aparncia, possvel digitar os valores de layout da tabela, uma vez que isto simplifica o desenvolvimento da pgina. Observe que possvel ajustar estes valores aps inserir a tabela utilizando o Property inspector (Inspetor de propriedades) da tabela.
5.
Clique em OK. A tabela e os alocadores de espao definidos em seu recordset correspondente para o contedo dinmico so inseridos na pgina.
Neste exemplo, o recordset contm quatro registros: FIRSTNAME (Primeiro nome), LASTNAME (ltimo nome), TITLE (Cargo) e DEPARTMENT (Departamento). A linha Heading (Cabealho) da tabela preenchida com os nomes de cada item de registro. possvel editar os cabealhos utilizando qualquer texto descritivo desejado ou substituilos por imagens representativas.
Criar um contador de registros

Os contadores de registros permitem aos usurios saberem onde eles esto em determinado recordset em relao ao nmero total de registros retornados. Por essa razo, os contadores de registros so um comportamento til que pode aumentar significativamente a usabilidade de uma pgina da Web. Para saber mais sobre contadores de registros, consulte Record counters (Contadores de registros) na pgina 799.
809
Criar um contador de registros utilizando o objeto Recordset Navigation Status (Status de navegao do recordset)
O objeto Recordset Navigation Status cria uma entrada de texto na pgina para exibir o estado de registro atual.
Para utilizar o objeto Recordset Navigation Status:
1. 2.
Coloque o cursor no ponto em que deseja inserir o contador de registros. Selecione Insert (Inserir)> Application Objects (Objetos de aplicativos) > Recordset Navigation Status. A caixa de dilogo Insert Recordset Navigation Status (Inserir status de navegao do recordset) exibida.
Selecione, no menu pop-up Recordset, o recordset que deseja utilizar.

3.
Clique em OK. O objeto de servidor Recordset Navigation Status insere um contador de registros de texto similar ao exibido abaixo: Voc pode usar as ferramentas de desenho de pgina do Dreamweaver para personalizar o contador de registros. Quando visualizado na janela Live Data (Dados ativos) ou em um navegador, o contador ser similar ao mostrado abaixo:
810
Criar contadores de registros personalizados

Para criar um contador de registros personalizado para uma pgina, necessrio criar primeiro um recordset para a pgina, um layout de pgina apropriado para conter o contedo dinmico e uma barra de navegao para o recordset. Para saber mais sobre como criar esses elementos e adicion-los a uma pgina, consulte Record counters (Contadores de registros) na pgina 799. Uma vez que os elementos acima estejam na pgina, possvel criar um contador de registros personalizado. Este exemplo cria um contador de registros semelhante ao da seo anterior, Criar um contador de registros utilizando o objeto Recordset Navigation Status (Status de navegao do recordset) na pgina 810. O contador de registros, neste exemplo, ter a aparncia: Exibindo registros de StartRow at EndRow de RecordSet.RecordCount. Nesse exemplo, o texto com fonte sans-serif representa os alocadores de espao que sero inseridos na pgina.
Para criar um contador de registros personalizado:
1.
Na visualizao do projeto, digite o texto do contador na pgina. Escolha o nome de sua preferncia. Por exemplo:
Displaying records thru of .
2. 3.
Inclua o ponto de insero no final da seqncia de caracteres de texto. Abra o painel Server Behaviors (Comportamentos de servidor), a partir da seleo de Window (Janela) > Server Behaviors. Clique no boto de adio (+) no canto superior esquerdo e clique em Display Record Count (Exibir contagem de registros). Neste submenu, selecione Display Total Records (Exibir total de registros). O comportamento Display Total Records inserido na pgina e um alocador de espao inserido no local do ponto de insero. A seqncia de texto deve ser similar do exemplo:
Displaying records thru of {Recordset1.RecordCount}.
4.
5.
Posicione o ponto de insero aps a palavra registros e selecione Display Starting Record Count Number (Exibir o nmero inicial da contagem de registros) a partir do painel Server Behaviors > boto de adio (+) > Record Count (Contagem de registros). A seqncia de texto deve ser similar do exemplo:
Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.
811
6.
Em seguida, posicione o ponto de insero entre as palavras at e de e selecione Display Starting Record Count Number no painel Server Behaviors > boto de adio (+) > Record Count. A seqncia de texto deve ser similar do exemplo:
Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of {Recordset1.RecordCount}.
7.
Verifique se o contador funciona corretamente, visualizando a pgina na janela Live Data (View > Live Data); o contador dever ser semelhante ao do exemplo abaixo:
Displaying records 1 thru 8 of 40.
Se a pgina de resultados tiver um link de navegao para mover ao prximo recordset, clique no link para atualizar a leitura do contador de registros do seguinte modo:
Showing records 9 thru 16 of 40.
Os links no funcionam na janela Live Data. Para test-los, voc pode utilizar o recurso Preview in Browser (Visualizar no navegador) do Dreamweaver. Verifique se a opo Preview Using Live Data Server (Visualizar utilizando servidor de dados ativos) est selecionada na caixa de dilogo Preferences (Edit > Preferences > Preview in Browser (Windows) ou Dreamweaver > Preferences > Preview in Browser (Macintosh)); e selecione File > Preview in Browser.
812
CAPTULO 36
Exibir dados XML em pginas da Web

Voc pode usar o Macromedia Dreamweaver 8 para criar pginas da Web que exibam dados XML. A exibio de dados XML envolve a recuperao de informaes armazenadas em um arquivo XML local e remoto e o processamento dessas informaes na pgina da Web. O Dreamweaver oferece mtodos para exibir informaes a partir de arquivos XML, bem como recursos de projeto e objetos XSLT internos que permitem aperfeioar a apresentao de dados XML. Este captulo contm as seguintes sees:
36
Sobre como usar XML e XSL com pginas da Web . . . . . . . . . . . . . . . . . . . . . . . . . 814 Sobre transformaes de XSL no lado servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 816 Sobre transformaes de XSL no lado cliente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 819 Sobre dados XML e elementos repetidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .822 Sobre a visualizao de dados XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .824 Executar transformaes de XSL no servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .826 Executar transformaes de XSL no cliente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .842 Aplicar estilos a fragmentos XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .844 Solucionar problemas de transformaes de XSL . . . . . . . . . . . . . . . . . . . . . . . . . . .845
813
Sobre como usar XML e XSL com pginas da Web

Extensible Markup Language (XML) uma linguagem que permite estruturar informaes. Assim como a HTML, a linguagem XML permite estruturar as informaes por meio de tags, mas ao contrrio das tags HTML, as tags XML no so predefinidas. Em vez disso, a XML permite que voc crie tags de acordo com a sua estrutura de dados. As tags so aninhadas umas nas outras de modo a criar um esquema de tags mes e filhas (principais e secundrias). A exemplo da maioria das tags HTML, todas as tags em um esquema XML tm uma tag de abertura e de fechamento. O exemplo a seguir mostra a estrutura bsica de um arquivo XML:
<?xml version=1.0> <mybooks> <book bookid=1> <pubdate>03/01/2004</pubdate> <title>Displaying XML Data with Macromedia Dreamweaver</title> <author>Charles Brown</author> </book> <book bookid=2> <pubdate>04/08/2004</pubdate> <title>Understanding XML</title> <author>John Thompson</author> </book> </mybooks>
Neste exemplo, cada tag <book> principal (me) contm trs tags secundrias (filhas): <pubdate>, <title> e <author>. No entanto, cada tag <book> tambm uma tag secundria da tag <mybooks>, que est localizada um nvel acima no esquema. Voc pode nomear e estruturar as tags XML da maneira que mais lhe agradar, desde que as aninhe de forma adequada e atribua a cada tag de abertura a tag de fechamento correspondente. Os documentos XML no contm nenhuma formatao so apenas recipientes (containers) das informaes estruturadas. Uma vez de posse de um esquema XML, voc poder usar a Extensible Stylesheet Language (XSL) para exibir as informaes. Da mesma maneira que as CSS (Cascading Style Sheets) permitem formatar HTML, a XSL permite formatar os dados XML. Voc pode definir estilos, elementos de pgina, layout etc. em um arquivo XSL e anex-lo a um arquivo XML, de modo que, quando um usurio vir os dados XML em um navegador, os dados sejam formatados de acordo com o que voc definiu no arquivo XSL. O contedo (os dados XML) e a apresentao (definida pelo arquivo XSL) so totalmente separados, possibilitando mais controle sobre a maneira como as informaes aparecem em uma pgina da Web. Basicamente, a XSL uma tecnologia de apresentao da XML, onde a sada primria uma pgina HTML.
814
Captulo 36: Exibir dados XML em pginas da Web
A XSLT (Extensible Stylesheet Language Transformations) uma linguagem de subconjunto da XSL que na verdade permite exibir os dados XML em uma pgina da Web e transformlos, junto com os estilos XSL, em informaes legveis e organizadas no formato HTML. Voc pode usar o Dreamweaver para criar pginas XSLT que permitam executar transformaes de XSL por meio de um servidor de aplicativos ou de num navegador. Quando voc executa uma transformao XSL no lado servidor, este responsvel por transformar as linguagens XML e XSL e por exibi-las na pgina. Quando voc executa uma transformao no lado cliente, um navegador (como o Internet Explorer) faz o trabalho. A abordagem que voc escolher (transformaes no lado servidor versus transformaes no lado cliente) depender do que estiver tentando obter como resultado final, das tecnologias disponveis, do nvel de acesso que tenha aos arquivos de origem do XML e de outros fatores. Ambas as abordagens tm suas vantagens e limitaes. Por exemplo, as transformaes no lado servidor funcionam em todos os navegadores, ao passo que as transformaes no lado cliente esto restritas apenas aos navegadores modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 e Firefox 1.0.2). As transformaes no lado servidor permitem exibir dados XML dinamicamente a partir de seu prprio servidor ou de qualquer outro local da Web, enquanto as transformaes no lado cliente precisam usar os dados XML que esto armazenados localmente no seu prprio servidor da Web. Por fim, as transformaes no lado servidor exigem que voc implemente suas pginas em um servidor de aplicativos configurado, enquanto as transformaes no lado cliente s requerem acesso a um servidor da Web. Para obter mais informaes, consulte Sobre transformaes de XSL no lado servidor na pgina 816 e Sobre transformaes de XSL no lado cliente na pgina 819.
Sobre como usar XML e XSL com pginas da Web
815
Sobre transformaes de XSL no lado servidor

O Dreamweaver oferece mtodos para a criao de pginas XSLT que lhe permitem executar transformaes de XSL no lado servidor. Quando um servidor de aplicativos executa a transformao de XSL, o arquivo que contm os dados XML pode residir em seu prprio servidor ou em qualquer outro local da Web. Alm disso, qualquer navegador pode exibir os dados transformados. No entanto, o processo de implantao de pginas para transformao no lado servidor um tanto complexo e exige que voc tenha acesso a um servidor de aplicativos. Ao trabalhar com transformaes de XSL no lado servidor, voc pode usar o Dreamweaver para criar pginas XSLT que gerem documentos HTML completos (pginas inteiramente XSLT) ou fragmentos de XSLT que gerem uma parte de um documento HTML. Uma pgina XSLT completa semelhante a uma pgina HTML regular. Ela contm uma tag <body> e uma tag <head>, e permite que voc exiba uma combinao de dados HTML e XML na pgina. Um fragmento XSLT consiste em parte de um cdigo, usado por um documento separado, que exibe dados XML formatados. Diferentemente de uma pgina inteiramente XSLT, ele um arquivo independente, que no contm nenhuma tag <body> ou <head>. Caso deseje exibir os dados XML em uma pgina prpria, voc pode criar uma pgina XSLT completa e vincular seus dados XML a ela. Por outro lado, se preferir exibir os dados XML em uma seo especfica de uma pgina dinmica existente por exemplo, uma home page dinmica para uma loja de materiais de esporte, com um placar de resultados de esportes vinculado a um leitor de RSS (Real Simple Sindication) exibido em um lado da pgina voc pode criar um fragmento XSLT e inserir uma referncia a ele na pgina dinmica. Geralmente, o cenrio mais comum consiste na criao de fragmentos XSLT e no uso destes junto com outras pginas dinmicas para exibir dados XML.
816
A primeira etapa para criar esses tipos de pginas consiste em criar o fragmento XSLT: trata-se de um arquivo separado que contm o layout, a formatao e os outros itens dos dados XML que voc quer exibir na pgina dinmica. Uma vez criado o fragmento XSLT, voc insere uma referncia a ele em um sua pgina dinmica (por exemplo, uma pgina PHP ou Macromedia ColdFusion). A referncia inserida no fragmento funciona de forma semelhante a um SSI (Server Side Include) os dados XML formatados (o fragmento) residem em um arquivo separado, ao passo que no Design view (Visualizao de projeto), exibido um alocador do fragmento na pgina dinmica propriamente dita. Quando um navegador solicita a pgina dinmica que contm a referncia ao fragmento, o servidor processa as instrues includas e cria um novo documento no qual o contedo formatado do fragmento exibido no lugar do alocador de espao.
Sobre transformaes de XSL no lado servidor
817
Voc usa o comportamento de servidor XSL Transformation (Transformao de XSL) para inserir a referncia a um fragmento XSLT em uma pgina dinmica. Quando voc insere a referncia, o Dreamweaver gera uma pasta includes/MM_XSLTransform/ na pasta raiz do site que contm um arquivo de biblioteca em tempo de execuo. O servidor de aplicativos usa as funes definidas nesse arquivo quando faz a transformao dos dados XML especificados. O arquivo responsvel por buscar os dados XML e os fragmentos XSLT, executando a transformao de XSL e exibindo os resultados na pgina da Web. Para que sua pgina seja exibida corretamente, necessrio que o arquivo que contm o fragmento XSLT, o arquivo XML que contm seus dados e arquivo de dados da biblioteca em tempo de execuo estejam todos no servidor. (Se voc selecionar um arquivo XML remoto como sua fonte de dados por exemplo, um dos arquivos do leitor RSS tal arquivo precisar obviamente residir em outro local na Internet.) Voc tambm pode usar o Dreamweaver para criar pginas totalmente XSLT para serem usadas nas transformaes no lado servidor. Uma pgina totalmente XSLT funciona exatamente da mesma maneira que um fragmento XSLT, ou seja, voc s conseguir inserir o contedo completo de uma pgina HTML quando inserir a referncia para a pgina XSLT por meio do comportamento de servidor XSL Transformation. Desse modo, antes de inserir a referncia, ser necessrio remover todo o contedo HTML da pgina dinmica (a pgina .cfm, .php, .asp, ou .net que atua como a pgina recipiente). O Dreamweaver oferece suporte a transformaes de XSL em pginas ColdFusion, ASP, ASP.NET e PHP.
NO T A
O seu servidor dever estar configurado de forma apropriada para executar as transformaes no lado servidor. Para obter mais informaes, entre em contato com o administrador do servidor ou visite www.macromedia.com/go/dw_xsl.
Para saber mais sobre os procedimentos de criao de transformaes de XSL no lado servidor, consulte Executar transformaes de XSL no servidor na pgina 826. Tpicos relacionados Sobre a visualizao de dados XML na pgina 824 Aplicar estilos a fragmentos XSLT na pgina 844
818
Sobre transformaes de XSL no lado cliente

Tambm possvel executar transformaes de XSL no cliente sem o uso de um servidor de aplicativos. Voc pode usar o Dreamweaver para criar uma pgina inteiramente XSLT que faa isso; no entanto, as transformaes no lado cliente requerem a manipulao do arquivo XML que contm os dados que sero exibidos. Alm disso, as transformaes no lado cliente s funcionaro em navegadores modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 e Firefox 1.0.2). Para obter mais informaes sobre navegadores que oferecem ou no suporte a transformaes XSL, consulte www.w3schools.com/xsl/xsl_browsers.asp. Para comear, crie uma pgina inteiramente XSLT e anexe a ela uma fonte de dados XML. (O Dreamweaver lhe pedir que anexe a fonte de dados quando voc estiver criando a nova pgina.) possvel usar o Dreamweaver para criar uma pgina XSLT totalmente nova ou para converter uma pgina HTML existente para uma pgina XSLT. Ao converter uma pgina HTML existente para uma pgina XSLT, voc precisa anexar uma fonte de dados XML, utilizando o painel Bindings (Window (Janela) > Bindings [Ligaes]). Uma vez criada a pgina XSLT, voc precisa vincul-la ao arquivo XML que contm os dados XML, inserindo uma referncia pgina XSLT no arquivo XML propriamente dito (como faria para inserir uma referncia a uma folha de estilos CSS externa na seo <head> da pgina HTML). Os visitantes de seu site precisam ver o arquivo XML (e no a pgina XSLT) no navegador. Quando eles abrem a pgina, o navegador executa a transformao de XSL e exibe os dados XML, formatados pela pgina XSLT vinculada.
819
A relao entre as pginas XSLT e XML vinculadas segue um conceito parecido, com algumas diferenas, do modelo de pgina HTML/CSS externa. No caso de uma pgina HTML que contenha contedo (como texto), voc usa uma folha de estilos externa para formatar o contedo. A pgina HTML determina o contedo; por sua vez, o cdigo da CSS externa (que o usurio nunca v) determina a apresentao. Com a XSLT e a XML, ocorre o inverso. O arquivo XML (que o usurio nunca v no formato simples) determina o contedo, ao passo que a pgina XSLT determina a apresentao. A pgina XSLT contm as mesmas tabelas, layout, figuras e outros itens contidos no formato HTML padro. Quando um usurio v o arquivo XML no navegador, a pgina XSLT formata o contedo.
820
Quando voc usa o Dreamweaver para vincular uma pgina XSLT a uma pgina XML, ele insere por voc o cdigo apropriado na parte superior da pgina XML. Se voc o proprietrio da pgina XML qual est vinculando (ou seja, se o arquivo XML reside exclusivamente no seu servidor da Web), tudo que precisar fazer usar o Dreamweaver para inserir o cdigo apropriado que vincula as duas pginas. Quando voc o proprietrio do arquivo XML, as transformaes de XSL executadas pelo cliente so totalmente dinmicas. Ou seja, sempre que voc atualizar os dados no arquivo XML, as sadas no HTML que utiliza a pgina XSLT vinculada sero automaticamente atualizadas com as novas informaes.
NO T A

Os arquivos XML e XSL que voc usa nas transformaes no lado cliente precisam residir no mesmo diretrio. Caso contrrio, o navegador ler o arquivo XML e encontrar a pgina XSLT para a transformao, mas no conseguir localizar as propriedades (folhas de estilos, imagens etc) definidas pelos links relativos na pgina XSLT.
Caso no seja o proprietrio da pgina XML qual esteja vinculando (por exemplo, se quiser usar os dados XML do leitor RSS em algum outro lugar da Web), o fluxo de trabalho ser um pouco mais complicado. Para executar transformaes no lado cliente usando dados XML de uma fonte externa, necessrio primeiro efetuar o download do arquivo que contm o cdigo-fonte XML para o mesmo diretrio em que reside a pgina XSLT. Quando a pgina XML estiver em seu site local, voc pode usar o Dreamweaver para adicionar o cdigo apropriado que a vincula pgina XSLT e postar ambas as pginas (o arquivo XML baixado e a pgina XSLT vinculada) em servidor da Web. Quando o usurio v a pgina XML no navegador, a pgina XSLT formata o contedo, exatamente como no exemplo anterior. A desvantagem de executar transformaes de XSL no lado cliente em dados XML provenientes de uma fonte externa que os dados XML so apenas parcialmente dinmicos. O arquivo XML no qual voc efetua o download e as alteraes meramente um instantneo do arquivo que reside em outr lugar da Web. Se o arquivo XML original for alterado, necessrio fazer novamente o download dele, vincul-lo pgina XSLT e tornar a post-lo em seu servidor da Web. O navegador transmite apenas os dados que ele recebe do arquivo XML em seu servidor da Web, e no os dados contidos no arquivo do cdigo-fonte XML original. Para saber mais sobre os procedimentos de criao de transformaes XSL no lado cliente, consulte Executar transformaes de XSL no cliente na pgina 842. Tpicos relacionados Sobre a visualizao de dados XML na pgina 824 Aplicar estilos a fragmentos XSLT na pgina 844
821
Sobre dados XML e elementos repetidos

O objeto XSLT de Repeat Region (Regio repetitiva) permite que voc exiba elementos repetidos a partir de um arquivo XML em uma pgina. Qualquer regio que contenha um alocador de espao de dados XML pode ser transformada em uma regio repetida. As regies mais comuns, no entanto, so uma tabela, uma linha da tabela ou uma srie de linhas da tabela. O exemplo a seguir demonstra como o objeto XSLT de Repeat Region aplicado a uma linha de tabela que exibe informaes sobre o menu de um restaurante. A linha inicial mostra trs elementos diferentes do esquema XML: item, descrio e preo. Quando o objeto XSLT de Repeat Region for aplicado linha da tabela e a pgina for processada por um servidor de aplicativos ou navegador, a tabela ser repetida com dados exclusivos inseridos em cada nova linha da tabela.
Quando voc aplica um objeto XSLT de Repeat Region janela do documento, exibida uma linha fina e acinzentada em volta da regio repetida. Quando voc visualiza seu trabalho em um navegador (File (Arquivo) > Preview in Browser [Visualizar no navegador]), a linha cinza desaparece e a seleo se expande para exibir os elementos repetidos especificados no arquivo XML, conforme exibido na ilustrao anterior.
822
Observe tambm que, quando voc adiciona o objeto XSLT de Repeat Region pgina, o Dreamweaver trunca o comprimento do alocador de espao dos dados XML na janela do documento. Isto acontece porque o Dreamweaver atualiza o XPath para o alocador de espao dos dados XML de modo a torn-lo relativo ao caminho do elemento repetido. Por exemplo, o cdigo a seguir para uma tabela que contm dois alocadores de espao dinmicos, sem o objeto XSLT de Repeat Region aplicado tabela:
<table width="500" border="1"> <tr> <td><xsl:value-of select="rss/channel/item/title"/></td> </tr> <tr> <td><xsl:value-of select="rss/channel/item/description"/></td> </tr> </table>
O cdigo a seguir destina-se mesma tabela, com o objeto XSLT de Repeat Region aplicado a ele:
<xsl:for-each select="rss/channel/item"> <table width="500" border="1"> <tr> <td><xsl:value-of select="title"/></td> </tr> <tr> <td><xsl:value-of select="description"/></td> </tr> </table> </xsl:for-each>
No exemplo anterior, o Dreamweaver atualizou o XPath de modo que os itens dentro de Repeat Region (title & description) fossem relativos ao XPath nas tags que contivessem <xsl:for-each>, em vez de no documento completo. O Dreamweaver gera expresses XPath relativas ao contexto tambm em outros casos. Por exemplo, se voc arrastar o alocador de espao dos dados XML para uma tabela que j utilize um objeto XSLT de Repeat Region aplicado a ela, o Dreamweaver automaticamente exibir o XPath relativo ao XPath existente nas tags que contiverem <xsl:for-each>. Para aprender como aplicar o objeto XSLT de Repeat Region, consulte Exibir elementos XML repetidos na pgina 833.
Sobre dados XML e elementos repetidos
823
Sobre a visualizao de dados XML

Quando voc usar o recurso Preview in Browser (File > Preview in Browser) para visualizar os dados XML que inseriu em um fragmento XSLT ou em uma pgina XSLT completa, o mecanismo que realiza a transformao de XSL diferir de acordo com a situao. No caso de pginas dinmicas que contm fragmentos XSLT, o servidor de aplicativos sempre executa as transformaes. Em outras situaes, o Dreamweaver ou o browser pode executar a transformao. A tabela a seguir resume as situaes onde usado o Preview in Browser, bem como os mecanismos que executam as respectivas transformaes:
Tipo de pgina visualizada no navegador
Pgina dinmica que contm o fragmento XSLT Fragmento XSLT ou pgina XSLT completa Arquivo XML com link para a pgina XSLT completa
Transformao de dados executada por

Servidor de aplicativos Dreamweaver Navegador
Os tpicos a seguir fornecem diretrizes que o ajudaro a determinar os mtodos de visualizao apropriados, de acordo com as suas necessidades:

Visualizar pginas de transformaes no lado servidor na pgina 825 Visualizar pginas de transformaes no lado cliente na pgina 825 Visualizar pginas inteiramente XSLT e fragmentos XSLT na pgina 826
824
Visualizar pginas de transformaes no lado servidor

No caso de transformaes no lado servidor, o contedo final que o visitante do site v transformado por seu servidor de aplicativos. Ao criar as pginas dinmicas e XSLT para serem usadas com transformaes no lado servidor, sempre recomendvel visualizar a pgina dinmica que contm o fragmento XSLT, em vez do fragmento XSLT propriamente dito. No primeiro cenrio, voc faz uso do servidor de aplicativos, que assegura que a sua visualizao esteja consistente com o que os visitantes do site vero quando acessarem a sua pgina. No segundo cenrio, o Dreamweaver executa a transformao e pode retornar resultados um pouco inconsistentes. possvel usar o Dreamweaver para visualizar o fragmento XSLT no momento em que este estiver sendo criado, mas voc ser capaz de ver resultados mais precisos da apresentao dos dados se usar o servidor de aplicativos para visualizar a pgina dinmica depois de inserir o fragmento XSLT.
Visualizar pginas de transformaes no lado cliente

No caso de transformaes no lado cliente, o contedo final que o visitante do site v transformado por um navegador. Para conseguir isso, necessrio adicionar um link do arquivo XML pgina XSLT. Se abrir o arquivo XML no Dreamweaver e visualiz-lo no navegador, voc obrigar o navegador a carregar o arquivo e executar a transformao. Isto permitir que voc tenha a mesma experincia que o visitante de seu site. Uma desvantagem dessa abordagem que ela dificulta a depurao da pgina, j que o navegador transforma o XML e gera o cdigo HTML internamente. Se selecionou a opo View Source (Exibir cdigo-fonte) no navegador para depurar o cdigo HTML gerado, voc ver apenas o XML recebido pelo navegador, e no a tag HTML completa (tags, estilos etc) responsvel pela processamento da pgina. Para ver o HTML completo ao exibir o cdigofonte, necessrio visualizar a pgina XSLT em um navegador.
Sobre a visualizao de dados XML
825
Visualizar pginas inteiramente XSLT e fragmentos XSLT

Ao criar pginas inteiramente XSLT e fragmentos XSLT, voc desejar visualizar seu trabalho para assegurar que os dados estejam sendo exibidos corretamente. Se voc usar a opo Preview in Browser (Visualizar no navegador) para exibir a pgina XSLT completa ou um fragmento XSLT, o Dreamweaver usar um mecanismo de transformao interno para executar a transformao. Este mtodo oferece resultados rpidos e permite que voc crie e depure sua pgina de maneira incremental. Oferece tambm uma maneira de visualizar o HTML completo (tags, estilos etc) por meio da opo View Source do navegador.
NO TA

Voc provavelmente usar este mtodo quando comear a criar pginas XSLT, independentemente de usar o cliente ou o servidor para transformar os dados.
Tpicos relacionados Sobre como usar XML e XSL com pginas da Web na pgina 814 Sobre transformaes de XSL no lado servidor na pgina 816 Sobre transformaes de XSL no lado cliente na pgina 819 Aplicar estilos a fragmentos XSLT na pgina 844
Executar transformaes de XSL no servidor

possvel usar o Dreamweaver para criar pginas XSLT completas ou fragmentos de XSLT para serem usados em pginas da Web dinmicas. Uma pgina inteiramente XSLT uma pgina que, quando transformada, gera uma pgina HTML completa. Um fragmento XSLT consiste em parte de um cdigo, usado por um documento separado, que exibe dados XML. A Macromedia recomenda que voc leia Sobre transformaes de XSL no lado servidor na pgina 816 antes de prosseguir com um destes procedimentos.
NO T A 826
O seu servidor dever estar configurado de forma apropriada para executar as transformaes no lado servidor. Para obter mais informaes, entre em contato com o administrador do servidor ou visite www.macromedia.com/go/dw_xsl.
Esta seo contm os seguintes tpicos: Fluxo de trabalho para executar transformaes de XSL no lado servidor na pgina 827 Criar pginas XSLT na pgina 828 Converter pginas HTML em pginas XSLT na pgina 830
Anexar fontes de dados XML na pgina 830 Exibir dados XML em pginas XSLT na pgina 831 Exibir elementos XML repetidos na pgina 833 Editar um objeto XSLT de Repeat Region na pgina 836 Inserir fragmentos XSLT em pginas dinmicas na pgina 836 Excluir fragmentos XSLT das pginas dinmicas na pgina 838 Editar comportamentos de servidor XSL Transformation na pgina 838 Utilizar parmetros com transformaes de XSL na pgina 839 Criar regies XSLT condicionais na pgina 840 Editar um objeto XSLT de Conditional Region na pgina 841 Inserir comentrios de XSL na pgina 841
Fluxo de trabalho para executar transformaes de XSL no lado servidor

Esta seo fornece uma lista das etapas necessrias para executar as transformaes de XSL no lado servidor e cita as sees da documentao que analisam cada procedimento. A Macromedia recomenda a leitura de Sobre como usar XML e XSL com pginas da Web na pgina 814, Sobre transformaes de XSL no lado servidor na pgina 816 e Sobre transformaes de XSL no lado cliente na pgina 819 antes de criar as pginas que exibem dados XML. Para executar transformaes de XSL no lado servidor, siga estas etapas:
Configure um site Dreamweaver. Consulte Captulo 2, Configurar um site do Dreamweaver, na pgina 87. Escolha uma tecnologia de servidor e configure um servidor de aplicativos. Consulte Configurar um servidor de aplicativos na pgina 659. Teste o servidor de aplicativos para certificar-se de que ele esteja funcionando corretamente. Por exemplo, crie uma pgina que necessite de processamento e verifique se o servidor de aplicativos processa a pgina. Para obter um tutorial sobre como fazer isso, visite www.macromedia.com/go/dw_xsl. Siga um dos procedimentos abaixo:
No site Dreamweaver, crie um fragmento XSLT ou uma pgina inteiramente XSLT. Consulte Criar pginas XSLT na pgina 828. Converta uma pgina HTML existente em uma pgina inteiramente XSLT. Consulte Converter pginas HTML em pginas XSLT na pgina 830.
827
Anexe uma fonte de dados XML pagina (se isso ainda no tiver sido feito). Consulte Anexar fontes de dados XML na pgina 830. Vincule os dados XML ao fragmento XSLT ou pgina XSLT completa. Consulte Exibir dados XML em pginas XSLT na pgina 831. Se apropriado, adicione um objeto XSLT de Repeat Region tabela ou linha da tabela que contm os alocadores de espao dos dados XML. Consulte Exibir elementos XML repetidos na pgina 833. Siga um dos procedimentos abaixo:
Use o comportamento de servidor de XSL Transformation para inserir a referncia ao fragmento XSLT em uma pgina dinmica. Consulte Inserir fragmentos XSLT em pginas dinmicas na pgina 836. Exclua todo o cdigo HTML de uma pgina dinmica e, em seguida, use o comportamento de servidor de XSL Transformation para inserir uma referncia pgina XSLT completa na pgina dinmica.
Poste as duas pginas dinmicas e o fragmento XSLT (ou a pgina XSLT completa) em seu servidor de aplicativos. Se estiver usando um arquivo XML local, voc precisar post-lo tambm. Visualize a pgina dinmica no navegador. Quando voc fizer isso, o servidor de aplicativos transformar os dados XML e os incluir na pgina dinmica para exibi-los no navegador.
Criar pginas XSLT

Voc pode criar pginas XSLT que lhe permitam exibir dados XML em pginas da Web. possvel criar uma pgina inteiramente XSLT uma pgina XSLT que contenha uma tag <body> tag e uma tag <head> ou criar um fragmento XSLT. Quando voc cria um fragmento XSLT, cria um arquivo independente, que no contm nenhuma tag body ou head um fragmento simples de cdigo que ser posteriormente inserido em uma pgina dinmica.
NO T A
Se estiver comeando por uma pgina XSLT existente e precisar anexar a ela uma fonte de dados XML, consulte Anexar fontes de dados XML na pgina 830.
Para criar uma pgina XSLT:

1.
Selecione File (Arquivo)> New (Novo)
828
2.
Na guia General (Geral) da caixa de dilogo New Document (Novo documento), selecione a pgina Basic (Bsica) na coluna Category (Categoria) e siga um destes procedimentos: Selecione XSLT (Entire page) na coluna da pgina Basics para criar uma pgina XSLT completa. Selecione XSLT (Fragment) na coluna da pgina Basics para criar um fragmento XSLT. Clique em Create (Criar). A caixa de dilogo Locate XML Source (Localizar cdigo-fonte XML) exibida, solicitando a voc que anexe uma fonte de dados XML.
3.
4.
Selecione Attach a local file (Anexar um arquivo local), clique no boto Browse (Procurar), selecione um arquivo XML local em seu computador e, em seguida, clique em OK. Selecione Attach a remote file (Anexar um arquivo remoto), digite a URL de um arquivo XML na Internet (como a URL de um leitor RSS) e clique em OK.
NO TA
Clicar no boto Cancel (Cancelar) gerar uma nova pgina XSLT sem nenhuma fonte de dados XML anexada. Para obter informaes sobre como anexar fontes de dados XML, consulte Anexar fontes de dados XML na pgina 830.
O Dreamweaver preenche o painel Bindings (Ligaes) com o esquema da fonte de dados XML.
829
A tabela a seguir fornece uma explicao sobre os diversos elementos do esquema que podero ser exibidos:
Elemento
<>
Representa
Requer um elemento XML que no se repita Elemento XML repetido
Detalhes
Um elemento que aparea exatamente uma vez dentro de seu n-pai Um elemento que aparece uma ou mais vezes dentro de seu n-pai Um elemento que pode no aparecer nenhuma vez ou aparecer vrias vezes dentro de seu n-pai Normalmente, o elemento que se repete quando o ponto de insero est dentro de uma regio de repetio
<>+
<>?
Elemento XML opcional
N de elemento em fonte negrito
Elemento de contexto atual
@ 5.
Atributo XML
Salve sua nova pgina (File > Save) com a extenso .xsl ou .xslt (o padro .xsl).
Converter pginas HTML em pginas XSLT

Tambm possvel converter as pginas HTML existentes para pginas XSLT. Por exemplo, caso deseje adicionar dados XML a uma pgina pr-projetada, voc pode converter a pgina em uma pgina XSLT, em vez de criar uma pgina XSLT e projet-la desde o incio.
Para converter uma pgina HTML existente para uma pgina XSLT:
1. 2.
Abra a pgina HTML a ser convertida. Selecione File > Convert > XSLT 1.0. O Dreamweaver abre uma cpia da pgina na janela do documento. A nova pgina uma folha de estilos XSL, salva com a extenso .xsl.
Anexar fontes de dados XML

Se estiver comeando por uma pgina XSLT existente ou no anexar uma fonte de dados XML ao criar uma nova pgina XSLT com o Dreamweaver, use o painel Bindings para anexar a fonte de dados XML.
830
Para anexar uma fonte de dados XML:

1.
No painel Bindings (Window > Bindings), clique no link XML.
2.
3.
Clique em OK para fechar a caixa de dilogo Locate XML Source. O Dreamweaver preenche o painel Bindings (Ligaes) com o esquema da fonte de dados XML. Para obter um guia dos smbolos do esquema, consulte Criar pginas XSLT na pgina 828.
Exibir dados XML em pginas XSLT

Uma vez criada uma pgina XSLT e anexada uma fonte de dados XML, voc pode vincular os dados pgina.
Para exibir dados XML:
1.
Abra uma pgina XSLT com uma fonte de dados XML anexada. Para obter instrues, consulte Criar pginas XSLT na pgina 828.
N OT A
Se preferir, clique no link Source (localizado no canto superior direito do painel Bindings) para adicionar uma fonte de dados XML.
Selecione Attach a Local File, clique no boto Browse, selecione um arquivo XML local em seu computador e, em seguida, clique em OK. Selecione Attach a Remote File, digite a URL de um arquivo XML na Internet (como a URL de um leitor RSS) e clique em OK.
831
2.
(Opcional) Selecione Insert (Inserir) > Table (Tabela) para adicionar uma tabela pgina. A tabela o ajudar a organizar os dados XML. Para obter mais informaes, consulte Captulo 8, Apresentar contedo com tabelas, na pgina 257.
NO TA
Na maioria dos casos, voc desejar usar o objeto XSLT de Repeat Region para exibir os elementos XML repetitivos em uma pgina. Se esse for o caso, voc pode criar uma tabela com uma nica linha, com uma ou mais colunas. Para incluir um cabealho na tabela, crie uma tabela com duas linhas. Para obter mais informaes, consulte Exibir elementos XML repetidos na pgina 833.
3.
No painel Bindings, selecione um elemento XML e arraste-o at a posio na pgina onde desejar inserir os dados.
Um alocador de espao de dados XML exibido na pgina. O alocador de espao ser mostrado em destaque e na forma de colchetes vazios. Ele usa a sintaxe XPath (linguagem do caminho XML) para descrever a estrutura hierrquica do esquema XML. Por exemplo, se voc arrastar o elemento-filho title at a pgina e este elemento tiver os elementos-pai rss, channel, e item,, a sintaxe do alocador de contedo dinmico ser {rss/channel/ item/title}.
832
Se houver um alocador de espao de dados XML na pgina, voc poder clicar duas vezes nele para abrir o XPath Expression Builder. O XPath Expression Builder permite que voc formate os dados selecionados ou selecione outros itens do esquema XML. Para obter mais informaes, clique no boto Help (Ajuda) do XPath Expression Builder.
4.
(Opcional) Aplique estilos a seus dados XML, selecionando o alocador de espao de dados XML e aplicando estilos a ele como qualquer outro fragmento de contedo por meio do Property Inspector ou do painel CSS Styles (Estilos de CSS). Ou, use as folhas de estilo Design-time (Fase do projeto) para aplicar estilos aos fragmentos XSLT. Cada um desses mtodos possui seu prprio conjunto de benefcios e limitaes. Para obter mais informaes, consulte Aplicar estilos a fragmentos XSLT na pgina 844. Visualize seu trabalho em um navegador (File > Preview in Browser)
N OT A
5.
Quando voc visualiza seu trabalho em um navegador usando a opo Preview in Browser, o Dreamweaver executa uma transformao de XSL interna sem recorrer ao servidor de aplicativos. Para obter mais informaes, consulte Sobre a visualizao de dados XML na pgina 824.
Exibir elementos XML repetidos

O objeto XSLT de Repeat Region permite exibir os elementos repetidos a partir de uma fonte de dados XML em uma pgina da Web. Por exemplo, se voc estiver exibindo ttulos e descries de artigos a partir de um leitor de notcias e tal leitor contiver entre 10 e 20 artigos, os ttulos e as descries no arquivo XML sero provavelmente elementos filhos de um elemento repetido. Qualquer regio na visualizao do projeto que contenha um alocador de espao de dados XML poder ser transformado em uma regio repetida. Todavia, as regies mais comuns so tabelas, linhas de tabelas ou uma srie de linhas de tabelas. Para saber mais sobre como o objeto XSLT de Repeat Region funciona com os dados XML, consulte Sobre dados XML e elementos repetidos na pgina 822.
Para exibir elementos XML repetidos:
1.
Na visualizao do projeto, selecione uma regio que contenha um ou mais alocadores de espao de dados XML.
833
A seleo pode ser qualquer elemento, incluindo uma tabela, uma linha de tabela ou at mesmo um pargrafo de texto.
2.
Siga um dos procedimentos abaixo
DICA 834
Para selecionar com exatido uma regio na pgina, utilize o seletor de tags no canto inferior esquerdo da janela do documento. Por exemplo, se a regio for uma tabela, clique dentro da tabela na pgina e, em seguida, clique na tag <table> no seletor de tags.
Selecione Insert (Inserir) > XSLT Objects (Objetos XSLT) > Repeat Region (Regio repetitiva). Na categoria XSLT da barra Insert, clique no boto Repeat Region.
3.
No XPath Expression Builder, selecione o elemento que se repete, indicado por um pequeno sinal de adio.
Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
4.
Clique em OK. Na janela do documento, um contorno cinza e estreito com guia ser exibido ao redor da regio repetitiva. Quando voc visualiza seu trabalho em um navegador (File > Preview in Browser, a linha cinza desaparece e a seleo se expande para exibir os elementos repetidos especificados no arquivo XML. Voc tambm notar que, quando adicionar o objeto XSLT de Repeat Region pgina, o Dreamweaver truncar o comprimento do alocador de espao de dados XML na janela do documento. Isto acontece porque o Dreamweaver atualiza o XPath para o alocador de espao dos dados XML de modo a torn-lo relativo ao caminho do elemento repetido. Para obter mais informaes, consulte Sobre dados XML e elementos repetidos na pgina 822.
835
Editar um objeto XSLT de Repeat Region

Uma vez adicionado um objeto XSLT de Repeat Region a uma regio, voc poder fazer alteraes nele por meio do Property inspector.
Para editar um objeto XSLT de Repeat Region:
1. 2.
Selecione o objeto, clicando na guia cinza em torno da regio repetida. No Property inspector (Window > Properties), clique no cone dinmico ao lado do campo de texto Select (Selecionar). No XPath Expression Builder, faa as alteraes e clique em OK.
3.
Inserir fragmentos XSLT em pginas dinmicas

Uma vez criado um fragmento XSLT, use o comportamento de servidor XSLT Transformation para inseri-lo em uma pgina da Web dinmica. Quando voc adiciona o comportamento de servidor sua pgina e visualiza a pgina em um navegador, o servidor de aplicativos executa uma transformao que exibe os dados XML a partir do fragmento XSLT selecionado. O Dreamweaver oferece suporte a transformaes de XSL para pginas ColdFusion, ASP, ASP.NET ou PHP.
NO TA
Para inserir em uma pgina dinmica o contedo de uma pgina inteiramente XSLT, o procedimento um pouco diferente. Antes de usar o comportamento de servidor XSL Transformation para a pgina inteiramente XSLT, exclua todo o cdigo HTML de sua pgina dinmica. Para obter mais informaes, consulte Sobre transformaes de XSL no lado servidor na pgina 816.
Para inserir um fragmento XSLT em uma pgina da Web:

1. 2.
Abra uma pgina ColdFusion, ASP, ASP.NET ou PHP. No modo de visualizao de projeto, coloque o ponto de insero no local onde deseja exibir o fragmento XSLT.
N OT A
Ao inserir fragmentos XSLT, necessrio sempre clicar no boto Show Code and Design view (Mostrar visualizaes do cdigo e do projeto) aps posicionar o ponto de insero na pgina, de modo a assegurar que ele esteja no local correto. Caso contrrio, voc precisar clicar em outro local da visualizao do cdigo para posicionar o ponto de insero no local desejado.
836
3.
No painel Server Behaviors (Comportamentos de servidor) em Window > Server Behaviors, clique no boto com sinal de adio (+) e selecione XSL Transformation.
4.
Na caixa de dilogo XSL Transformation, clique no boto Browse e acesse um fragmento XSLT ou uma pgina inteiramente XSLT. Para obter mais informaes, consulte Criar pginas XSLT na pgina 828. O Dreamweaver preencher automaticamente o prximo campo de texto com o caminho de arquivo ou URL do arquivo XML que est anexado ao fragmento especificado. Para alter-lo, clique no boto Browse e procure outro arquivo.
5.
(Opcional) Clique no boto com o sinal de adio (+) para adicionar um parmetro XSLT. Para obter mais informaes, consulte Utilizar parmetros com transformaes de XSL na pgina 839. Clique em OK. O Dreamweaver insere uma referncia ao fragmento XSLT na pgina. O fragmento no editvel. Para edita-lo, clique duas vezes no fragmento para abrir seu arquivo de origem. O Dreamweaver cria uma pasta includes/MM_XSLTransform/ na pasta raiz do site que contm um arquivo de biblioteca de tempo de execuo. O servidor de aplicativos usa as funes definidas nesse arquivo para realizar a transformao. Para obter mais informaes, consulte Sobre transformaes de XSL no lado servidor na pgina 816.
6.
837
7.
Faa o upload da pgina dinmica em seu servidor (Site > Put). Quando o Dreamweaver oferecer a opo de incluir arquivos dependentes, clique em Yes. O arquivo que contm o fragmento XSLT, o arquivo XML que contm os seus dados e o arquivo da biblioteca de tempo de execuo devero estar todos no servidor para que a pgina seja exibida corretamente. (Caso tenha selecionado um arquivo XML remoto como fonte de dados, tal arquivo dever, obviamente, residir em algum outro local da Internet.)
Excluir fragmentos XSLT das pginas dinmicas

possvel remover um fragmento XSLT de uma pgina excluindo o comportamento de servidor XSL Transformation utilizado para inserir o fragmento. A excluso do comportamento de servidor exclui apenas o fragmento XSLT, mas no exclui os arquivos de biblioteca de tempo de execuo nem os arquivos XML e XSLT a eles associados.
Para excluir um fragmento XSLT de uma pgina dinmica:
1.
No painel Server Behaviors (Window > Server Behaviors), selecione o comportamento de servidor XSL Transformation a ser excludo. Clique no boto com o sinal de subtrao (-).
N OT A
2.
A Macromedia recomenda sempre esse procedimento para a remoo de comportamentos de servidor. A excluso manual do cdigo gerado remover apenas parcialmente o comportamento de servidor, embora ele possa desaparecer do painel Server Behaviors.
Editar comportamentos de servidor XSL Transformation

Uma vez adicionado um fragmento XSLT a uma pgina dinmica, possvel editar a qualquer momento o comportamento de servidor XSL Transformation.
Para editar um comportamento de servidor XSL Transformation:
1.
No painel Server Behaviors (Window > Server Behaviors), clique duas vezes no comportamento de servidor XSL Transformation a ser editado. Faa as alteraes e clique em OK.
2.
838
Utilizar parmetros com transformaes de XSL

possvel definir parmetros para a transformao de XSL durante a adio de um comportamento de servidor XSL Transformation a uma pgina da Web. O parmetro controla a maneira como os dados XML so processados e exibidos. Por exemplo, possvel usar um parmetro para identificar e listar um artigo especfico em um leitor de notcias. Quando a pgina carregada no navegador, exibido apenas o artigo especificado com os parmetros.
Para adicionar um parmetro XSLT a uma transformao de XSL:
1.
Abra a caixa de dilogo XSL Transformation. Para fazer isso, clique duas vezes em um comportamento de servidor XSL Transformation no painel Server Behaviors (Window > Server Behaviors) ou adicione um novo comportamento de servidor XSL Transformation. Para obter instrues, consulte Inserir fragmentos XSLT em pginas dinmicas na pgina 836. Na caixa de dilogo XSL Transformation, clique no boto com o sinal de adio (+) ao lado de XSLT Parameters (Parmetros de XSLT).
2.
3.
Na caixa de dilogo Add Parameters (Adicionar parmetros), digite um nome para o parmetro na caixa de texto Name (Nome). O nome s pode conter caracteres alfanumricos. No so permitidos espaos. Siga um dos procedimentos abaixo: Para usar um valor esttico, digite-o na caixa de texto Value. Para usar um valor dinmico, clique no cone dinmico ao lado da caixa de texto Value, complete a caixa de dilogo Dynamic Data (Dados dinmicos) e clique em OK. Para obter mais informaes, clique no boto Help da caixa de dilogo Dynamic Data. Na caixa de texto Default Value (Valor padro), digite o valor a ser usado pelo parmetro se a pgina no receber nenhum valor de tempo de execuo.
4.

5.
839
6.
Clique em OK.
Para editar um parmetro XSLT:

1.
Abra a caixa de dilogo XSL Transformation. Para fazer isso, clique duas vezes em um comportamento de servidor XSL Transformation no painel Server Behaviors (Window > Server Behaviors) ou adicione um novo comportamento de servidor XSL Transformation. Para obter instrues, consulte Inserir fragmentos XSLT em pginas dinmicas na pgina 836. Selecione um parmetro na lista de parmetros de XSLT. Clique no boto Edit (Editar). Faa as alteraes e clique em OK.
2. 3. 4.
Para excluir um parmetro XSLT:

1.
Abra a caixa de dilogo XSL Transformation. Para fazer isso, clique duas vezes em um comportamento de servidor XSL Transformation no painel Server Behaviors (Window > Server Behaviors) ou adicione um novo comportamento de servidor XSL Transformation. Para obter instrues, consulte Inserir fragmentos XSLT em pginas dinmicas na pgina 836. Selecione um parmetro na lista de parmetros de XSLT. Clique no boto com o sinal de subtrao (-).
2. 3.
Criar regies XSLT condicionais

possvel usar o Dreamweaver para criar regies condicionais simples ou mltiplas em uma pgina XSLT. Voc pode fazer uma seleo no modo de visualizao de projeto e aplicar a ela uma regio condicional ou pode inserir uma regio condicional na posio do ponto de insero no documento. Por exemplo, para exibir a palavra Unavailable ao lado do preo de um item quando este no estiver disponvel, digite a palavra Unavailable na pgina, selecione-a e, em seguida, aplique uma regio condicional ao texto selecionado. O Dreamweaver incluir a seleo dentro de tags <xsl:if> e s exibir a palavra na pgina quando os dados coincidirem com as condies da expresso condicional.
Para criar uma regio XSLT condicional:
1.
Selecione Insert > XSLT Objects > Conditional Region (Regio condicional) ou Insert > XSLT Objects > Multiple Conditional Region (Regio condicional mltipla).
840
2.
Na caixa de dilogo Conditional Region ou Multiple Conditional Region, insira a expresso condicional a ser usada para a regio. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
3.
Editar um objeto XSLT de Conditional Region

Uma vez adicionada a regio XSLT condicional pgina, possvel alter-la por meio do Property inspector.
Para editar um objeto XSLT de Conditional Region:
1. 2.
Selecione o objeto, clicando na guia cinza em torno da regio condicional. No Property inspector (Window > Properties), edite a expresso condicional na caixa de texto Test (Testar).
Inserir comentrios de XSL

Voc poder adicionar tags de comentrio XSL a um documento ou pode marcar a seleo nas tags de comentrio XSL.
Para adicionar tags de comentrio XSL a um documento:
No modo de visualizao de projeto, selecione Insert > XSLT Objects > XSL Comment (Comentrio de XSL), digite o contedo do comentrio (ou deixe a caixa de texto em branco) e clique em OK. No modo de visualizao de cdigo, selecione Insert > XSLT Objects > XSL Comment.
Para marcar uma seleo nas tags de comentrio XSL:

1. 2. 3.
Alterne para o modo visualizao do cdigo (View > Code). Selecione o cdigo a ser comentado. Na barra de ferramentas Coding (Codificao), clique no boto Apply Comment e selecione Apply <xsl:comment></xsl:comment> Comment.
841
Executar transformaes de XSL no cliente

Tambm possvel executar transformaes de XSL no cliente sem o uso de um servidor de aplicativos. Quando voc faz isso, o navegador torna-se responsvel pelo trabalho de transformar os dados de XML, no lugar do servidor de aplicativos. Voc pode usar o Dreamweaver para criar esse tipo de pgina; no entanto, as transformaes no lado cliente requerem a manipulao do arquivo XML que contm os dados a serem exibidos. Alm disso, as transformaes no lado cliente s funcionaro em navegadores modernos. A Macromedia recomenda que voc leia Sobre transformaes de XSL no lado cliente na pgina 819 antes de prosseguir com um destes procedimentos. Esta seo contm os seguintes tpicos:
Fluxo de trabalho para execuo de transformaes de XSL no lado cliente na pgina 842 Criar pginas inteiramente XSLT na pgina 843 Vincular arquivos XSLT e XML na pgina 843
Tpicos relacionados Sobre transformaes de XSL no lado servidor na pgina 816
Fluxo de trabalho para execuo de transformaes de XSL no lado cliente

Esta seo fornece uma lista das etapas necessrias para executar as transformaes de XSL no lado cliente e cita as sees da documentao que analisam cada procedimento. A Macromedia recomenda a leitura de Sobre como usar XML e XSL com pginas da Web na pgina 814, Sobre transformaes de XSL no lado servidor na pgina 816 e Sobre transformaes de XSL no lado cliente na pgina 819 antes de criar as pginas que exibem dados XML. Para executar transformaes de XSL no lado cliente, siga estas etapas:
Configure um site Dreamweaver. Consulte Captulo 2, Configurar um site do Dreamweaver, na pgina 87. Siga um dos procedimentos abaixo:
No site Dreamweaver, crie uma pgina inteiramente XSLT. Consulte Criar pginas inteiramente XSLT na pgina 843.
842
Converta uma pgina HTML existente para uma pgina inteiramente XSLT. Consulte Converter pginas HTML em pginas XSLT na pgina 830
Anexe uma fonte de dados XML pagina (se isso ainda no tiver sido feito). Consulte Anexar fontes de dados XML na pgina 830. O arquivo XML que voc anexar dever residir no mesmo diretrio da pgina XSLT. Vincule os dados XML pgina XSLT. Consulte Exibir dados XML em pginas XSLT na pgina 831. Se apropriado, adicione um objeto XSLT de Repeat Region tabela ou linha da tabela que contm os alocadores de espao dos dados XML. Consulte Exibir elementos XML repetidos na pgina 833. Anexar a pgina XSLT pgina XML. Consulte Vincular arquivos XSLT e XML na pgina 843. Envie para o servidor da Web a pgina XML e a pgina XSLT vinculada. Visualize a pgina XML no navegador. Quando voc fizer isso, o navegador transformar os dados XML e os formatar na pgina XSLT; em seguida, ele exibir a pgina com os estilos.
Criar pginas inteiramente XSLT

necessrio usar uma pgina inteiramente XSLT para as transformaes no lado cliente. (Os fragmentos XSLT no funcionam neste tipo de transformao.) Para obter instrues sobre como criar e vincular dados XML e sobre como formatar pginas XSLT, consulte os seguintes tpicos:

Criar pginas XSLT na pgina 828 Exibir dados XML em pginas XSLT na pgina 831 Exibir elementos XML repetidos na pgina 833 Aplicar estilos a fragmentos XSLT na pgina 844
Vincular arquivos XSLT e XML

Uma vez criada uma pgina inteiramente XSLT com alocadores de espao de contedo dinmico para seus dados XML, voc precisa inserir uma referncia pgina XSLT na pgina XML.
N O TA
Os arquivos XML e XSL que voc usa nas transformaes no lado cliente precisam residir no mesmo diretrio. Caso contrrio, o navegador ler o arquivo XML e encontrar a pgina XSLT para a transformao, mas no conseguir localizar as propriedades (folhas de estilos, imagens etc) definidas pelos links relativos na pgina XSLT.
Executar transformaes de XSL no cliente
843
Para vincular uma pgina XSLT a uma pgina XML:

1. 2.
Abra o arquivo XML a ser vinculado sua pgina XSLT. Selecione Commands (Comandos) > Attach an XSLT Stylesheet (Anexar uma folha de estilos XSLT). Na caixa de dilogo Attach an XSLT Stylesheet, clique no boto Browse, localize a pgina XSLT qual deseja vincular e clique em OK. Clique em OK para fechar a caixa de dilogo Attach an XSLT Stylesheet.
3.
4.
O Dreamweaver insere a referncia pgina XSLT na parte superior do documento XML.
Aplicar estilos a fragmentos XSLT

Ao criar uma pgina inteiramente XSLT (ou seja, uma pgina XSLT que contm tags <body> e <head>), voc pode exibir os dados XML na pgina e, em seguida, format-los como qualquer outro fragmento de contedo por meio do Property inspector ou do painel CSS Styles. No entanto, quando voc cria um fragmento XSLT para ser inserido em uma pgina dinmica (por exemplo, um fragmento para insero em uma pgina ASP, PHP ou Cold Fusion), a apresentao dos estilos no fragmento e na pgina dinmica se torna mais complicada. Apesar de voc trabalhar em um fragmento XSLT separado da pgina dinmica, importante lembrar que o fragmento deve ser usado dentro da pgina dinmica e que a sada final do fragmento XSLT residir em algum lugar dentro das tags <body> da pgina. Com base nesse fluxo de trabalho, importante voc assegurar que no sejam includos elementos <head> (tais como definies de estilo ou links para folhas de estilo externas) nos fragmentos. Caso isso ocorra, o servidor de aplicativos posicionar esses elementos na tag <body> da pgina dinmica, gerando assim uma marcao invlida.
844
Por exemplo, suponha que voc esteja criando um fragmento XSLT para ser inserido em uma pgina dinmica e deseje formatar os fragmentos usando a mesma folha de estilos externa como pgina dinmica. Se voc anexar a mesma folha de estilos ao fragmento, a pgina HTML apresentar um link duplicado para ela (um na seo <head> da pgina dinmica, e outro na seo <body>, onde aparece o contedo do fragmento XSLT). Em vez dessa abordagem, voc deve usar as folhas de estilo Design-time para fazer referncia folha de estilos externa. No caso da formatao do contedo dos fragmentos XSLT, a Macromedia recomenda que voc utilize o seguinte fluxo de trabalho:
Primeiramente, anexe uma folha de estilos externa pgina dinmica (esse procedimento obedece s melhores prticas de aplicao de folhas de estilos ao contedo de qualquer pgina da Web). Em seguida, anexe a mesma folha de estilos externa ao fragmento XSLT como uma folha de estilos Design-time (Fase de projeto). Como o prprio nome sugere, as folhas de estilo da fase de projeto s funcionam no modo de projeto do Dreamweaver. Para obter mais informaes, consulte Utilizar folhas de estilo Design-Time na pgina 442.
Uma vez concluda as etapas anteriores, voc poder aplicar estilos existentes ou criar novos estilos em seu fragmento XSLT utilizando a mesma folha de estilos anexada sua pgina dinmica. Voc ter uma sada HTML mais limpa, j que a referncia folha de estilos s vlida quando se trabalha no Dreamweaver, e o fragmento ainda mostrar os estilos apropriados no modo de visualizao do projeto. Alm disso, todos os seus estilos sero aplicados tanto ao segmento quanto pgina dinmica quando voc visualizar a pgina dinmica no modo de visualizao do projeto ou em um navegador.
N OT A
Se voc visualizar o fragmento XSLT em um navegador, este no mostrar os estilos. Em vez disso, voc deve visualizar a pgina dinmica em um navegador para ver o fragmento XSLT dentro do contexto da pgina dinmica.
Para obter mais informaes sobre o uso de CSS para formatar fragmentos XSLT, consulte www.macromedia.com/go/dw_xsl_styles.
Solucionar problemas de transformaes de XSL

Caso tenha problemas com o funcionamento das transformaes de XSL, consulte o guia de soluo de problemas que oferece respostas s perguntas mais freqentes, disponvel em www.macromedia.com/go/dw_xsl_faq.
Solucionar problemas de transformaes de XSL
845
846
CAPTULO 37
Usar os servios da Web

Os servios da Web so uma tecnologia emergente que possibilitam s pginas da Web acessar aplicativos distribudos. Ao oferecer tanto o acesso a informaes quanto a funcionalidade de um aplicativo como um servio, os servios da Web podem ser distribudos e cobrados como pacotes de servios que permitem acesso simultneo a partir de qualquer plataforma. A pgina da Web que se conecta ao servio da Web normalmente conhecida como consumidor e o servio em si conhecido como publicador. O Macromedia Dreamweaver 8 permite criar pginas e sites que so consumidores de servios da Web. Atualmente, o Dreamweaver oferece suporte criao de consumidores de servios da Web que utilizam tipos de documentos Macromedia ColdFusion MX, ASP.NET e JSP (Java Server Pages). Especificamente, o Dreamweaver permite executar as seguintes tarefas de desenvolvimento de servios da Web:

37
Selecionar servios da Web disponveis na Internet Gerar um proxy de servio da Web que permita pgina da Web se comunicar com o publicador de servios da Web O proxy (tambm conhecido como classe de abstrao) contm os campos, mtodos de obteno de dados e propriedades do servio da Web e os torna disponveis para a pgina hospedada localmente. Ao gerar um proxy para sua pgina, o Dreamweaver permite exibilos no painel Components (Componentes)
Arrastar mtodos e tipos de dados para o cdigo da pgina
Antes de criar uma pgina que utiliza um servio da Web, necessrio familiarizar-se com a tecnologia subjacente do servidor do aplicativo que deseja utilizar e a programao cria o que exigido pelo aplicativo. O Dreamweaver permite criar pginas da Web com acesso aos servios da Web atravs das funcionalidades que os servios oferecem. Alm disso, possvel criar, desenvolver e publicar servios da Web para Macromedia ColdFusion MX.
847

Sobre os servios da Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .848 Sobre os geradores proxy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 851 Adicionar um proxy para servios da Web utilizando a descrio WSDL. . . . . . .855 Adicionar um servio da Web a uma pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .856 Editar a lista de sites de servios da Web UDDI . . . . . . . . . . . . . . . . . . . . . . . . . . . . .859
Sobre os servios da Web

Os servios da e Web permitem que os aplicativos se comuniquem e compartilhem informaes atravs da Internet, independentemente do sistema operacional ou linguagem de programao utilizados. Exemplos de servios da Web e as informaes e funcionalidades que fornecem:

Autenticao e autorizao do usurio Validao de carto de crdito Servios de mercados financeiros que envolvem preos de aes associados a smbolos de registradores especificados Aquisio de servios que permitem aos usurios encomendarem produtos on-line Servios de informao que fornecem notcias ou outros tipos de informao com base em um interesse, local ou outras informaes pessoais selecionadas
Ao fornecer funcionalidade como um servio ao qual a pgina da Web se conecta e utiliza quando necessrio, os servios da Web oferecem aos desenvolvedores e provedores de servio maior flexibilidade ao criar e implantar aplicativos de alta potencialidade. Os servios da Web consistem dos componentes bsicos a seguir:
Publicadores de servio:
fornecem aplicativos hospedados e torna-os disponveis para uso. Os servios da Web podem ser fornecidos gratuitamente ou com o pagamento de uma taxa.
Agentes de servios: mantm um registro dos publicadores de servios com descries de
ofertas de servio e links para seus aplicativos.
Consumidores do servio:
so as pginas da Web que acessam e usam o servio da Web
remoto.
848
Captulo 37: Usar os servios da Web
Fluxo de trabalho de servios da Web no Dreamweaver

Para criar uma pgina ou site consumidor de um servio da Web utilizando o Dreamweaver, necessrio executar as seguintes tarefas:
1.
Instalar e configurar um servidor proxy. Os geradores proxy geram um proxy para servios da Web, um componente de software que a pgina da Web utiliza para comunicar-se com o publicador de servios da Web. O proxy para servios da Web gerado a partir da WSDL (Web Service Description Language, Linguagem de descrio de servio da Web), que descreve os servios da Web. Dependendo da tecnologia de servidor para a qual deseja desenvolver consumidores de servio da Web, ser preciso instalar e configurar um gerador proxy que suporta essa tecnologia. O Dreamweaver vem pr-configurado com o AXIX, o gerador proxy SOAP (Simple Object Access Protocol, Protocolo de acesso a objetos simples) da Apache que suporta o desenvolvimento de servios da Web em JSP. Se voc estiver desenvolvendo pginas em ColdFusion 6, o gerador proxy para servios da Web ser includo no servidor ColdFusion. O estabelecimento de uma conexo ao servidor ColdFusion fornece acesso ao gerador proxy. Se voc estiver desenvolvendo pginas de servio da Web para uso com ASP.NET, preciso instalar o ASP.NET SDK, que est disponvel no site da Microsoft. Para obter mains informaes sobre como instalar e configurar um gerador proxy no fornecido com o Dreamweaver, consulte Sobre os geradores proxy na pgina 851.
2.
Com um navegador, visualize o registro de servios da Web. H diversas fontes de servios da Web, variando de sites de registro de servios da Web at listas simples. Os registros utilizam o UDDI (Universal Description, Discovery and Integration, Descrio, Descoberta e integrao universais), um padro que permite aos provedores e consumidores de servio se localizarem e efetuarem transaes entre si. O UDDI permite s empresas localizarem servios na Web de acordo com suas necessidades. Por exemplo, com o UDDI possvel especificar certos critrios, como o menor preo para um determinado servio ou informaes especficas.
3.
Aps localizar e selecionar um servio da Web com a funcionalidade que necessita, digite a URL do WSDL na caixa de dilogo Adding a Web Service (Adicionar um servio da Web). Gerar um proxy para o servio da Web na descrio WSDL do publicador de servios. Para incorporar um servio da Web em uma pgina da Web, necessrio criar um proxy. O proxy fornece a pgina da Web com as informaes necessrias para ela comunicar-se com o servio da Web e acessar os mtodos que o servio da Web oferece.
4.
849
Para criar um proxy do arquivo WSDL, utilize um gerador proxy. Aps criar o proxy, possvel instal-lo:
No computador local em que voc est desenvolvendo o consumidor de servio da Web. No computador servidor que est executando o servidor de aplicativos. Para implantar a pgina da Web e fazer com que ela se comunique com o publicador de servios da Web, necessrio instalar o proxy no servidor.
Para obter mais informaes, consulte Sobre os geradores proxy na pgina 851.
5.
No Dreamweaver, adicione o servio da Web a uma pgina e edite os parmetros e mtodos necessrios para utilizar a funcionalidade do servio. Para obter mais informaes, consulte Adicionar um servio da Web a uma pgina na pgina 856.
Localizar publicadores de servio da Web

Os servios da Web so disponibilizados por publicadores de servio. Normalmente, o publicador de servio disponibiliza seu servio da Web atravs de um registro baseado na Web que mantm um diretrio de servios disponveis que podem ser acessados. Diversos sites da Web fornecem este diretrio, incluindo:

X Methods em http://www.xmethods.net IBM Business Registry, em https://uddi.ibm.com/ubr/registry.html Registros do Microsoft UDDI em http://uddi.microsoft.com/default.aspx
Estes registros utilizam o servio UDDI (Universal Description, Discovery and Integration Descrio, Descoberta e integrao universais), um registro de servio de e-commerce aberto com um frum para que as empresas possam descrever os bens ou servios que fornecem a outras empresas. Um grupo de empresas chamado de operadoras efetuam a manuteno dos registros. As operadoras comprometeram-se a compartilhar entre si todas as informaes pblicas sobre as empresas registradas e os usurios do servio, e a manter a interoperabilidade entre os mltiplos ns da rede de servio UDDI. Alm de servios da Web pblicos, h tambm registros UDDI privados disponveis por meio de assinatura. A especificao UDDI baseia-se em padres existentes na Internet, assegurando desta forma sua neutralidade quanto a plataforma e a implementao. Tpicos relacionados Editar a lista de sites de servios da Web UDDI na pgina 859
850
Componentes de software para servios da Web

Para que uma pgina da Web possa acessar e utilizar um servio da Web, ela deve comunicarse com o servio e ter uma descrio da funcionalidade que o servio oferece, dos mtodos disponveis que podem ser ativados e dos parmetros retornados pelo servio. A linguagem WSDL uma descrio do servio baseada em XML. Cada servio da Web fornece uma WSDL que descreve como se ligar ao servio, os mtodos disponveis que a pgina da Web pode chamar e as entradas e sadas de dados. A WSDL pode residir em um arquivo ou ser gerada pelo servio da Web durante sua execuo. A comunicao entre a pgina da Web que solicita o servio e o prprio servio da Web utiliza o protocolo SOAP. O SOAP um protocolo baseado em XML que permite a um cliente da Web acessar e chamar mtodos e parmetros do servio da Web. Tpicos relacionados Adicionar um proxy para servios da Web utilizando a descrio WSDL na pgina 855
Referncias sobre servios da Web

Para saber mais sobre servios da Web e as tecnologias bsicas que os tornam possveis, visite os sites da Web a seguir:

Especificao WSDL em http://www.w3.org/TR/wsdl Especificao UDDI em http://www.uddi.org/specification.html Especificao XML em http://www.w3.org/TR/REC-xml Especificao SOAP em http://www.w3.org/TR/SOAP/
Sobre os geradores proxy

O Dreamweaver instala o gerador proxy AVIS, que suporta servios da Web em JSP. O AXIS um gerador proxy com cdigo-fonte aberto distribudo atravs do projeto SOAP da Apache. Alm disso, possvel adicionar geradores proxy com suporte para as implementaes de servios da Web de outro fornecedor ou novas tecnologias de servios da Web. Esta seo descreve como obter geradores proxy e configur-los para funcionar com o Dreamweaver. Para saber mais sobre o AXIS, consulte o site da Apache AXIS em http://ws.apache.org/axis/ index.html. Tpicos relacionados Configurar geradores proxy para utilizao com o Dreamweaver na pgina 852
851
Obter geradores proxy adicionais

Se desejar instalar um gerador proxy no fornecido com o Dreamweaver, preciso obter de outro fornecedor o gerador proxy e quaisquer outros componentes de software relacionados. Voc deve efetuar o download todos os arquivos necessrios a partir 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 necessrio para uso do AXIS encontra-se normalmente instalado no Dreamweaver). Ao selecionar um gerador proxy, consulte a documentao fornecida e certifique-se de ter todos os componentes e bibliotecas de software exigidos, de modo que seja possvel instal-los e configur-los corretamente. Aps instalar e configurar corretamente o gerador proxy, necessrio configur-lo para funcionar com o Dreamweaver.
N OT A
Atualmente, o desenvolvimento de servios da Web no Dreamweaver est limitado ao ambiente Windows. Para desenvolver pginas que acessam servios da Web no Macintosh, necessrio utilizar um servidor de aplicativos separado que utilize o Windows NT/2000/XP ou UNIX no qual ser executado o proxy para servios da Web e seu ambiente de aplicativo.
Configurar geradores proxy para utilizao com o Dreamweaver

Ao instalar um gerador proxy para servios da Web, necessrio configur-lo para ele funcionar com o Dreamweaver. Para aprender mais sobre os geradores proxy, consulte Sobre os geradores proxy na pgina 851.
Para configurar um gerador proxy para funcionar com o Dreamweaver:
1.
Selecione Window (Janela) > Components (Componentes) para abrir o painel Components. No painel Components, selecione Web Services (Servios da Web) no menu pop-up localizado no canto superior esquerdo do painel, clique no sinal de adio (+) e selecione Add Using WSDL (Adicionar utilizando WSDL).
2.
852
A caixa de dilogo Add Using WSDL (Adicionar utilizando WSDL) exibida.
3.
Na caixa de dilogo Add Using WSDL, selecione Edit Proxy Generator List (Editar lista de geradores proxy) no menu pop-up Proxy Generator (Gerador proxy). A caixa de dilogo Proxy Generator exibida.
4.
Clique em New (Novo), selecione o gerador proxy no menu pop-up e clique em Done (Concludo). Se o gerador proxy que voc deseja utilizar no aparecer na lista, selecione Default Proxy Generator (Gerador proxy padro) para exibir a caixa de dilogo Default Proxy Generator.
Configurar geradores proxy para utilizao com o Dreamweaver
853
A caixa de dilogo Default Proxy Generator permite configurar o gerador proxy selecionado ou configurar um gerador proxy novo. As caixas de texto da caixa de dilogo variam, dependendo do gerador proxy selecionado.
NO T A
O gerador proxy ColdFusion MX proxy no editvel.
5.
Preencha a caixa de dilogo e clique em OK. Para obter informaes sobre como preencher a caixa de dilogo, clique no boto Help (Ajuda) da caixa de dilogo.
6.
Ao preencher as definies da caixa Default Proxy Generator, clique em OK. Quando o Dreamweaver l uma descrio WSDL de um servio da Web, o Dreamweaver executa as aes a seguir correspondentes aos campos do Default Proxy Generator:

Efetua a leitura da WSDL como entrada para localizar o servio da Web. Gera o proxy para servios da Web com o ambiente de execuo especificado. Compila o proxy com o compilador especificado. Retorna o cdigo-fonte do proxy e o proxy compilado na pasta de destino especificada.
Tpicos relacionados Sobre os geradores proxy na pgina 851 Obter geradores proxy adicionais na pgina 852
854
Adicionar um proxy para servios da Web utilizando a descrio WSDL

Aps especificar um gerador proxy (consulte Sobre os geradores proxy na pgina 851) e configurar os modelos de servidores de servios da Web que deseja suportar, necessrio localizar um servio da Web que fornea a funcionalidade desejada e gere um proxy para aquele servio.
Para selecionar um servio da Web e gerar um proxy a partir de seu arquivo WSDL:
1. 2.
Abra a pgina qual deseja adicionar o servio da Web. Selecione Window (Janela) > Components (Componentes) para abrir o painel Components. No painel Components, selecione Web Services (Servios da Web) no menu pop-up localizado no canto superior esquerdo do painel, clique no sinal de adio (+) e selecione Add Using WSDL (Adicionar utilizando WSDL). A caixa de dilogo Add Using WSDL (Adicionar utilizando WSDL) exibida.
3.
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 no for conhecida, procure a URL em um diretrio de servios da Web. Ao localizar o servio da Web desejado, copie e cole a URL do servio da Web na caixa de edio WSDL. Para iniciar um navegador da Web, clique no boto UDDI Browse (Procurar UDDI) e selecione um dos registros de servio da Web listados. O Dreamweaver iniciar o navegador e abrir o registro selecionado. Localize o servio da Web que deseja utilizar e copie a URL de seu arquivo WSDL para a rea de trabalho do Windows. Retorne ao seletor de servios da Web e cole a URL na caixa de dilogo. possvel editar a lista de registros de servios da Web para incluir diretrios de servio da Web adicionais ou provedores de servio da Web especficos. Para obter mais informaes, consulte Editar a lista de sites de servios da Web UDDI na pgina 859.
Adicionar um proxy para servios da Web utilizando a descrio WSDL
855
5.
Selecione um gerador proxy que oferece suporte para o modelo de servidor de servio da Web desejado no menu pop-up Proxy Generator (Geradores proxy). Certifique-se de que o gerador proxy esteja instalado e configurado em seu sistema. Para obter mais informaes, consulte Sobre os geradores proxy na pgina 851.
6.
Clique em OK. O gerador proxy cria um proxy para o servio da Web e inicia uma sondagem. Sondagem o processo em que o gerador proxy examina a estrutura interna do proxy para servios da Web para tornar as interfaces, mtodos e propriedades disponveis atravs do Dreamweaver.
O servio da Web est agora disponvel para uso no site e exibido no painel Components. Voc agora pode adicionar o servio da Web pgina. Tpicos relacionados Componentes de software para servios da Web na pgina 851
Adicionar um servio da Web a uma pgina

Aps selecionar um servio da Web, gerar seu proxy e adicion-lo ao painel Components (Componentes), possvel inseri-lo em uma pgina. A ilustrao a seguir mostra o painel Components com o proxy para servios da Web Helloworld adicionado. O proxy Helloworld fornece um mtodo, sayHello, que imprime a expresso Hello World.
Os exemplos a seguir criam instncias do servio da Web HelloWorld utilizando o ColdFusion. Para obter mais informaes sobre como criar servios da Web e ver exemplos adicionais do .NET e do JSP, visite o Macromedia Support Center (Centro de suporte da Macromedia) em: www.macromedia.com/go/creating_web_services.
856
Para adicionar um servio da Web a uma pgina:

1.
Na janela do documento, na visualizao do cdigo, arraste o mtodo sayHello para o HTML da pgina. O Dreamweaver adiciona o mtodo e parmetros fictcios pgina. Edite o cdigo inserido com nomes de instncias de servio, tipos de dados e valores de parmetro apropriados, conforme exigido pelo servio da Web. O servio da Web deve fornecer descries dos tipos de dados e valores de parmetro. No exemplo em ColdFusion a seguir, o servio da Web inclui as tags <cfinvoke>. Ao desenvolver um servio da Web em ColdFusion, use <cfinvoke> para criar instncias do servio da Web e iniciar seus mtodos.
<html> <head> <title>Web Service</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <cfinvoke webservice="http://www.mysite.com:8500:8500/helloworld/ HelloWorld.cfc?wsdl" method="sayHello" returnvariable="aString"> </cfinvoke> </body> </html>
2.
Adicionar um servio da Web a uma pgina
857
3.
Se desejar ligar um valor de retorno a um elemento visual, alterne para o modo de visualizao do projeto e coloque um elemento visual na pgina que possa aceitar ligaes de dados. Em seguida, retorne para a visualizao do cdigo e digite o cdigo apropriado para ligar o valor retornado ao elemento visual. Ao criar servios da Web, consulte a documentao do provedor da tecnologia para obter a sintaxe adequada para criar instncias do servio e exibir os valores retornados pgina. Neste exemplo, o valor retornado para a varivel aString produzido utilizando a tag <cfoutput> no ColdFusion. Este cdigo exibir a sentena The web service says: Hello world! na pgina.
<html> <head> <title>Web Service</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <cfinvoke webservice="http://www.mysite.com:8500/helloworld/HelloWorld.cfc?wsdl" method="sayHello" returnvariable="aString"> </cfinvoke> The web service says: <cfoutput>#aString#</cfoutput> </body> </html>
4.
Quando voc implanta pginas da Web para um servidor de produo, o Dreamweaver copia automaticamente as pginas, o proxy e todas as bibliotecas necessrias ao servidor da Web.
NO T A
Se o aplicativo for desenvolvido com um proxy instalado em um computador diferente daquele em que as pginas foram desenvolvidas, ou se voc estiver utilizando uma ferramenta de gerenciamento de site que no pode copiar todos os arquivos relacionados para o servidor, preciso ter certeza de implantar tanto o proxy quanto quaisquer outros arquivos de biblioteca dependentes. Caso contrrio, as suas pginas no podero se comunicar com o aplicativo de servio da Web.
858
Editar a lista de sites de servios da Web UDDI

O seletor de servios da Web fornece uma lista de diretrios de servios da Web baseados em UDDI, a partir da qual possvel selecionar servios da Web. possvel editar esta lista para adicionar ou excluir diretrios de servios da Web. Para obter mais informaes, consulte Localizar publicadores de servio da Web na pgina 850.
Para editar a lista de sites de servios da Web:
1.
No Dreamweaver, selecione Window (Janela)> Components (Componentes) para abrir o painel Components. No painel Components, selecione Web Services (Servios da Web) no menu pop-up localizado no canto superior esquerdo do painel e clique no sinal de adio (+) para adicionar um servio da Web. A caixa de dilogo Add Using WSDL (Adicionar utilizando WSDL) exibida. No Web Services Chooser (Seletor de servios da Web), clique no cone de globo e selecione Edit UDDI Site List (Editar lista de sites UDDI) no menu pop-up. A caixa de dilogo UDDI Sites (Sites UDDI) exibida.
2.
3.
4.
Na caixa de dilogo UDDI Sites possvel adicionar novos sites de servios da Web, editar o nome e a URL de sites existentes e remover sites no desejados.
Para adicionar um site novo ou modificar um site existente, clique no boto New (Novo) ou Edit (Editar) e preencha a caixa de dilogo. Para remover uma conexo existente, selecione-a na lista e clique no boto Remove (Remover).
Editar a lista de sites de servios da Web UDDI
859
860
CAPTULO 38
Adicionar comportamentos de servidor personalizados

O Macromedia Dreamweaver 8 vem acompanhado de um conjunto de comportamentos de servidor incorporados que permitem adicionar facilmente recursos dinmicos a um site. Se voc desejar estender as funcionalidades do Dreamweaver, poder criar novos comportamentos de servidor para adequar s suas necessidades de desenvolvimento, ou obter comportamentos de servidor a partir do site do Macromedia Exchange na Web. Este captulo contm as seguintes sees:
38
Sobre os comportamentos de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 861 Instalar comportamentos de servidor de terceiros . . . . . . . . . . . . . . . . . . . . . . . . . . . 873 Usar o Server Behavior Builder (Criador de comportamentos de servidor) . . . . . 874 Usar parmetros em comportamentos de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . 878 Posicionar blocos de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 878 Criar uma caixa de dilogo para um comportamento de servidor personalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .880 Editar e modificar comportamentos de servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . .883
Sobre os comportamentos de servidor

Antes de criar os seus prprios comportamentos de servidor, voc deve consultar o site do Macromedia Exchange na Web para verificar se algum j criou um comportamento de servidor que fornea a funcionalidade que voc desejaria adicionar ao seu site da Web. Muitas vezes, um desenvolvedor de terceiros pode j ter criado e testado um comportamento de servidor que atenda s suas necessidades. Os comportamentos de servidor e outras extenses disponveis no site do Macromedia Exchange na Web permitem adicionar facilmente novos recursos ao Dreamweaver. Cada comportamento de servidor inclui uma breve descrio, anlises de usurio e um grupo de discusso no qual possvel formular questes e obter suporte para os comportamentos de servidor cujo download foi efetuado.
861
Se voc estiver pretendendo criar o seu prprio comportamento de servidor, dever estar familiarizado com a linguagem de programao da Web utilizada pelo seu site. Este captulo fornece instrues especficas para a criao de comportamentos de servidor utilizando o Dreamweaver. Ele no o instruir quanto a linguagens de programao ou ao teste de comportamentos de servidor.
Comportamentos de servidor
Se voc for um desenvolvedor experiente em ColdFusion, ASP.NET, JavaScript, VBScript, PHP ou Java, possvel escrever os seus prprios comportamentos de servidor. As etapas para criar um comportamento de servidor incluem as seguintes tarefas:
Escrever um ou mais blocos de cdigo que executam a ao necessria. Para obter mais informaes sobre como criar comportamentos de servidor com o Server Behavior Builder (Criador de comportamentos do servidor) do Dreamweaver, consulte Usar o Server Behavior Builder (Criador de comportamentos de servidor) na pgina 874. Para obter mais informaes sobre a sintaxe suportada por comportamentos de servidor do Dreamweaver, consulte Usar parmetros em comportamentos de servidor na pgina 878.
Especificar onde o bloco de cdigo deve ser inserido no cdigo HTML da pgina Para obter mais informaes sobre como posicionar blocos de cdigo em uma pgina, consulte Posicionar blocos de cdigo na pgina 878.
Se o comportamento do servidor exigir a especificao de um valor para um parmetro, criar uma caixa de dilogo solicitando que o programador da Web que aplica o comportamento fornea um valor apropriado. Para obter mais informaes como fornecer valores de parmetro para um comportamento de servidor utilizando uma caixa de dilogo, consulte Criar uma caixa de dilogo para um comportamento de servidor personalizado na pgina 880.
Testar o comportamento do servidor antes de torn-lo disponvel publicamente. Para obter instrues sobre como testar comportamentos de servidor, consulte Testar comportamentos de servidor na pgina 872.
862
Captulo 38: Adicionar comportamentos de servidor personalizados
Sobre os blocos de cdigo

Os blocos de cdigo criados no Server Behavior Builder (Criador de comportamentos de servidor) so encapsulados em um comportamento de servidor, que exibido no painel Server Behaviors (Comportamentos de servidor). O cdigo pode ser qualquer cdigo de tempo de execuo vlido para o modelo de servidor especificado. Por exemplo, se o ColdFusion for escolhido como o tipo de documento para o comportamento de servidor personalizado, o cdigo escrito dever ser um cdigo ColdFusion vlido executado em um servidor de aplicativos ColdFusion. Tpicos relacionados Instrues de codificao na pgina 871
Blocos de cdigo
possvel criar os blocos de cdigo diretamente no Server Behavior Builder (Criador de comportamentos de servidor) ou copiar e colar o cdigo de outras fontes. Cada bloco de cdigo criado no Server Behavior Builder deve consistir em uma nica tag ou bloco de script. Se for necessrio inserir vrios blocos de tag, dividi-los em blocos de cdigo separados. Para obter mais informaes, consulte Usar o Server Behavior Builder (Criador de comportamentos de servidor) na pgina 874
Parmetros de tempo de execuo

possvel incluir parmetros no seu cdigo de tempo de execuo e permitir que o designer da pgina fornea os valores dos parmetros. Para isso, insira marcadores de parmetro no cdigo, da seguinte maneira:
@@parameterName@@
Para obter mais informaes, consulte Usar parmetros em comportamentos de servidor na pgina 878.
Condies e elementos repetidos em blocos de cdigo

Para executar o bloco de cdigo, ou de parte dele, somente se determinada condio ou condies se aplicarem, utilize a seguinte sintaxe:
<@ if (expression1) @> code block1 [<@ elseif (expression2) @> code block2]* [<@ else @> code block3] <@ endif @>
863
Os colchetes ([ ]) indicam cdigo opcional, e o asterisco (*) denota zero ou mais instncias. A expresso de condio qualquer expresso de condio JavaScript vlida e pode conter parmetros de comportamento de servidor. Para repetir o bloco de cdigo, ou parte dele, um determinado nmero de vezes, utilize a seguinte sintaxe:
<@ loop (@@param1@@,@@param2@@) @> code block <@ endloop @>
A diretiva 'loop' considera uma lista separada por vrgulas de arrays de parmetros como argumentos. O texto que se repete ser duplicado n vezes, em que n o comprimento dos argumentos de arrays de parmetros. Se mais de um argumento de array de parmetros for especificado, todos os arrays devero ter o mesmo comprimento. Na ensima avaliao do loop, os ensimos elementos dos arrays de parmetros substituem as instncias de parmetro associadas no bloco de cdigo. Para obter informaes genricas sobre codificao, consulte Instrues de codificao na pgina 871. Tpicos relacionados Tornar condicionais os blocos de cdigo na pgina 866
Repetir blocos de cdigo na pgina 868
Posicionar o bloco de cdigo dentro de pginas da Web

Ao criar blocos de cdigo usando o Server Behavior Builder (Criador de comportamentos de servidor) (consulte Usar o Server Behavior Builder (Criador de comportamentos de servidor) para obter mais informaes), especifique onde quer inseri-los no cdigo HTML da pgina. Voc faz isto usando os menus pop-up Insert Code (Inserir cdigo) e Relative Position (Posio relativa) da caixa de dilogo Server Behavior Builder, que permitem que voc selecione onde inserir o bloco de cdigo no documento e especificando, em seguida, uma posio relativa a uma outra tag na pgina. Por exemplo, se inserir um bloco de cdigo acima da tag de abertura <html>, voc dever depois especificar a posio dos blocos de cdigo relativa a outras tags, scripts e comportamentos de servidor nessa seo do cdigo HTML da pgina. Exemplos tpicos incluem o posicionamento de um comportamento antes ou depois de quaisquer consultas de recordset que possam existir no cdigo da pgina acima da tag de abertura <html>.
864
Quando se seleciona uma opo de posicionamento no menu pop-up Insert (Inserir), as opes disponveis no menu pop-up Relative Position (Posio relativa) se alteram para oferecer opes pertinentes para essa parte da pgina. Se, por exemplo, voc selecionar Above the <html> Tag (Acima da tag html) no menu pop-up Insert Code (Inserir cdigo), as opes de posicionamento disponveis no menu pop-up Relative Position refletiro as escolhas pertinentes para essa parte da pgina. As opes de insero de bloco de cdigo e as opes de posicionamento relativo disponveis para cada uma delas so mostradas na tabela abaixo.
Opes de Insert Code
Above the <html> Tag (Acima da tag <html>)
Opes de Relative Position

At the beginning of the file (No incio do arquivo) Just before the recordsets (Imediatamente antes dos recordsets) Just after the recordsets (Imediatamente depois dos recordsets) Just above the <html> tag (Imediatamente acima da tag html) Custom position (Posio personalizada) Before the end of the file (Antes do fim do arquivo) Before the recordset close (Antes do fechamento do recordset) After the recordset close (Depois do fechamento do recordset) After the </html> tag (Depois da tag /html) Custom position (Posio personalizada)
Below the </html> Tag (Abaixo da tag /html)
Relative to a Specific Tag Selecione uma tag no menu pop-up Tag e, em seguida, escolha (Relativo a uma tag uma das opes de posicionamento da tag. especfica) Relative to the Selection (Relativo seleo) Before the selection (Antes da seleo) After the selection (Depois da seleo) Replace the selection (Substituir a seleo) Wrap the selection (Ajustar a seleo)
Se deseja especificar uma posio personalizada, atribua um peso ao bloco de cdigo. Use a opo Custom Position quando for necessrio inserir mais de um bloco de cdigo em uma determinada ordem. Por exemplo, se desejar inserir uma srie ordenada de trs blocos de cdigo aps os blocos que abrem os recordsets, defina um peso 60 para o primeiro bloco, 65 para o segundo e 70 para o terceiro. Por padro, Dreamweaver atribui o peso 50 a todos os blocos de cdigo de abertura de recordsets inseridos acima da tag <html>. Se houver correspondncia entre o peso de dois ou mais blocos, o Dreamweaver determinar aleatoriamente a ordem dos blocos.
865
Tpicos relacionados Sobre os blocos de cdigo na pgina 863
Posicionar blocos de cdigo na pgina 878
Usar parmetros em comportamentos de servidor

possvel incluir parmetros no cdigo de comportamento de um servidor e permitir que o designer da pgina fornea os valores de parmetro necessrios antes da insero do cdigo de comportamento de servidor na pgina. Para permitir que o designer da pgina fornea valores de parmetros,insira marcadores de parmetro no cdigo, conforme mostrado:
@@parameterName@@
O exemplo de comportamento de servidor ASP a seguir contm o parmetro formParam, que requer que a pessoa que esteja inserindo o comportamento fornea o nome de um objeto de formulrio:
<% Session(lang_pref) = Request.Form(formParam); %>
Para criar um parmetro que permita ao usurio fornecer o valor necessrio:

1.
Delimite a seqncia de caracteres formParam com marcadores de parmetro:

<% Session(lang_pref) = Request.Form(@@formParam@@); %>
2.
Crie uma caixa de dilogo que solicita ao designer o nome do objeto de formulrio. Para obter mais informaes, consulte Criar uma caixa de dilogo para um comportamento de servidor personalizado na pgina 880.
Tornar condicionais os blocos de cdigo

O Dreamweaver permite desenvolver blocos de cdigo que incorporam instrues de controle que tm uma execuo condicional. O Server Behavior Builder (Criador de comportamentos de servidor) usa instrues if, elseif e else e tambm pode conter parmetros de comportamento de servidor. Isso permite inserir blocos de texto alternativos com base nos valores de relacionamentos OR entre parmetros de comportamento de servidor. As instrues if, elseif e else aparecem conforme mostrado a seguir. Observe que os colchetes ([ ]) denotam cdigo opcional e o asterisco (*) denota zero ou mais instncias.
<@ if (expression1) @> conditional text1 [<@ elseif (expression2) @> conditional text2]* [<@ else @> conditional text3] <@ endif @>
866
As expresses de condio so qualquer expresso JavaScript que possa ser avaliada por meio da funo JavaScript eval() e que inclua um parmetro de comportamento de servidor marcado por @@ (as @@ so necessrias para distinguir o parmetro das variveis e palavraschave do JavaScript). possvel aninhar qualquer nmero de condicionais ou uma diretiva 'loop' (consulte Repetir blocos de cdigo na pgina 868) dentro de uma diretiva condicional. Por exemplo, possvel especificar que, se uma expresso for verdadeira, um loop dever ser executado.
N OT A
As novas linhas aps cada @> so ignoradas.
Tpicos relacionados Sobre os blocos de cdigo na pgina 863
Usar expresses condicionais de forma eficaz

Ao utilizar diretivas if, else e elseif na tag XML insertText , o texto participante ser pr-processado para resolver as diretivas if e para determinar qual texto deve ser includo no resultado. As diretivas if e elseif tratam a expresso como um argumento. A expresso de condio idntica quelas expresses de condio do JavaScript e tambm pode conter parmetros de comportamento de servidor. Diretivas como esta permitem escolher entre blocos de cdigo alternativos com base nos valores de parmetros de comportamento de servidor ou nos relacionamentos entre eles. Por exemplo, o cdigo JSP mostrado a seguir vem de um comportamento de servidor do Dreamweaver que utiliza o bloco de cdigo condicional:
@@rsName@@.close(); <conditional_code> @@rsName@@_hasData = @@rsName@@.next();
Se o comportamento de servidor usar um recordset normal, o alocador de espao <conditional_code> ser substitudo por:
@@rsName@@ = Statement@@rsName@@.executeQuery();
Se o comportamento de servidor utilizar um recordset de um objeto chamvel, ele utilizar em vez disso o seguinte cdigo:
@@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet();
867
Se o comportamento de servidor for adicionado para um objeto chamvel, o usurio digitar um valor para o parmetro @@callableName@@ na caixa de dilogo Parameter (Parmetro) do comportamento de servidor. Caso contrrio, o parmetro @@callableName@@ dever estar vazio. Assim, possvel reescrever o texto inserido anteriormente com o uso de @@callableName@@ como o argumento if. Nesse exemplo, se o parmetro @@callableName@@ for fornecido com um valor e o primeiro bloco de cdigo condicional (que contm o mtodo getResultSet()) for selecionado:
@@rsName@@.close(); <@ if (@@callableName@@ != '') @> @@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet();@ else @> @@rsName@@ = Statement@@rsName@@.executeQuery(); <@ endif @> @@rsName@@_hasData = @@rsName@@.next();
Repetir blocos de cdigo

Ao criar comportamentos de servidor, possvel usar construes de loop para repetir um bloco de cdigo um certo nmero de vezes. A sintaxe do loop :
<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @> code block <@ endloop @>
A diretiva 'loop' aceita uma lista separada por vrgulas de arrays de parmetros como argumentos. Nesse caso, os argumentos de array de parmetros permitem que um usurio fornea vrios valores para um nico parmetro. O texto que se repete ser duplicado n vezes, em que n o comprimento dos argumentos de arrays de parmetros. Se mais de um argumento de array de parmetros for especificado, todos os arrays devero ter o mesmo comprimento. Na ensima avaliao do loop, os ensimos elementos dos arrays de parmetros substituem as instncias de parmetro associadas no bloco de cdigo. Para obter mais informaes, consulte Utilizar as variveis _length e _index da diretiva 'loop' na pgina 870. Aps criar uma caixa de dilogo para o comportamento de servidor (consulte Criar uma caixa de dilogo para um comportamento de servidor personalizado na pgina 880), possvel adicionar um controle a essa caixa de dilogo que permite ao designer da pgina criar arrays de parmetros. O Dreamweaver inclui um controle de array simples que pode ser utilizado para criar caixas de dilogo. Este controle, chamado Text Field Comma Separated List (Lista de campos de texto separada por vrgulas), est disponvel no Server Behavior Builder (Criador de comportamentos de servidor). Para criar elementos de interface do usurio de maior complexidade, consulte a documentao da API para criar uma caixa de dilogo com um controle para arrays (por exemplo, um controle de grade).
868
As diretivas 'loop' no podem ser aninhadas, mas as diretivas condicionais (veja Posicionar blocos de cdigo na pgina 878) podem ser aninhadas em uma diretiva 'loop'. O exemplo a seguir mostra como esses blocos de cdigo repetitivos 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', no h como incluir as tags CFPROCPARAM dentro da tag inserida CFSTOREDPROC . Se essas tags tiverem de ser criadas como um comportamento de servidor sem o uso da diretiva 'loop', ser preciso dividir este exemplo em dois participantes: uma tag principal CFSTOREDPROC e uma tag CFPROCPARAM cujo tipo participante seja mltiplo. 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 cdigo condicionais, as novas linhas aps @> sero ignoradas. Se o usurio digitar os valores de parmetro a seguir na caixa de dilogo Server Behavior (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"]
869
O comportamento de servidor inserir o seguinte cdigo de tempo de execuo na pgina:

<CFSTOREDPROC procedure="proc1" datasource=#MM_connection1_DSN# username=#MM_connection1_USERNAME# password=#MM_connection1_PASSWORD#> <CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR"> </CFSTOREDPROC>
NO TA 870
Os arrays de parmetros no podem ser usados fora de um loop, exceto como parte de uma expresso diretiva condicional.
Utilizar as variveis _length e _index da diretiva 'loop'

A diretiva 'loop' inclui duas variveis internas que podem ser usadas para condies if incorporadas. As variveis so: _length e _index. A varivel _length avalia o comprimento dos arrays processados pela diretiva 'loop', enquanto a varivel _index avalia o ndice atual da diretiva 'loop'. Para assegurar que as variveis sejam reconhecidas apenas como diretivas e no como parmetros reais a serem passados no loop, no as delimite com @@. Um exemplo do uso de variveis internas sua aplicao ao atributo import da diretiva de pgina. O atributo import requer a separao de pacotes por vrgulas. Se a diretiva loop se estender para todo o atributo import, voc ter apenas a sada do nome do atributo import= na primeira iterao do loop e isto incluiria as aspas duplas de fechamento (") e no a sada de uma vrgula na ltima iterao do loop. Com a varivel interna, possvel express-la da seguinte maneira:
<@loop (@@Import@@)@> <@ if(_index == 0)@>import=" <@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>, <@ endif @> <@endloop@>
Instrues de codificao
De modo geral, o cdigo do comportamento de servidor deve ser compacto e confivel. Os desenvolvedores de aplicativos para a Web so geralmente bastante exigentes quanto ao cdigo adicionado a suas pginas. Siga as prticas de codificao geralmente aceitas para a linguagem de tipo de documento (ColdFusion, ASP.NET, JavaScript, VBScript, PHP, Visual Basic ou Java). Ao gerar comentrios, leve em considerao os diferentes pblicos tcnicos que podem precisar compreender o cdigo, como designers da Web e de interao, ou outros desenvolvedores de aplicativos para a Web. Inclua comentrios que descrevam exatamente o objetivo do cdigo e quaisquer instrues especiais para sua incluso em uma pgina. Segue uma lista de diretrizes para codificao que se deve ter em mente na criao de comportamentos de servidor:
Verificao de erro: uma necessidade importante. O cdigo do comportamento de servidor
deve tratar as ocorrncias de erros de forma precisa. Tente prever qualquer eventualidade. E se uma solicitao de parmetro falhar, por exemplo? E se nenhum registro for retornado a partir de uma consulta?
Nomes exclusivos: ajudam a garantir que o cdigo seja claramente identificvel e evita o "conflito" de nomes no cdigo existente. Por exemplo, se a pgina contiver uma funo denominada hideLayer() e uma varivel global denominada ERROR_STRING e o comportamento de servidor inserir cdigo que utilize esses mesmos nomes, o comportamento de servidor poder entrar em conflito com o cdigo existente.
permitem identificar as suas prprias variveis globais e funes de tempo de execuo em uma pgina. Uma conveno seria utilizar as iniciais do nome do usurio. Nunca utilize o prefixo MM_, pois ele reservado apenas para uso pela Macromedia. A Macromedia precede todas as funes e variveis globais com o prefixo MM_ para impedir que elas entrem em conflito com o cdigo que voc escreve.
var MM_ERROR_STRING = "..."; function MM_hideLayer() {
Prefixos de cdigo:
esse procedimento faz com que o cdigo escrito por voc no se parea muito com o cdigo existente em outros blocos. Se um bloco de cdigo for muito parecido com outro bloco de cdigo na pgina, o painel Server Behaviors (Comportamentos de servidor) poder identificar incorretamente o primeiro bloco como uma instncia do segundo bloco (ou vice-versa). Uma soluo simples seria adicionar um comentrio a um bloco de cdigo para torn-lo mais exclusivo. Tpicos relacionados Sobre os comportamentos de servidor na pgina 861
Evite blocos de cdigo semelhantes:
Comportamentos de servidor na pgina 862
871
Testar comportamentos de servidor

O Macromedia Exchange recomenda que sejam feitos os seguintes testes em cada comportamento de servidor criado:
Aplique o comportamento a partir do painel Server Behaviors (Comportamentos de servidor). Se o comportamento possuir uma caixa de dilogo, digite dados vlidos em cada campo e clique em OK. Verifique se no ocorrem erros quando o comportamento aplicado. Verifique se o cdigo de tempo de execuo para o comportamento de servidor foi exibido no Code inspector (Inspetor de cdigo). Aplique novamente o comportamento de servidor e insira dados invlidos em cada campo da caixa de dilogo. Experimente deixar o campo em branco, utilizar nmeros grandes ou negativos, utilizar caracteres invlidos (por exemplo: /, ?, :, *, etc) e utilizar letras em campos numricos. possvel gravar rotinas para validao de formulrios a fim de tratar dados invlidos (as rotinas de validao envolvem codificao manual, que est alm do escopo deste manual). O painel Server Behaviors (Comportamentos de servidor) para certificar-se de que o nome do comportamento de servidor exibido na lista de comportamentos adicionados pgina. Se for aplicvel, verifique se os cones de scripts de servidor so mostrados na pgina. Os cones de scripts de servidor genricos so escudos dourados. Para ver os cones, ative os Invisible Elements (Elementos invisveis), a partir de View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements. Na visualizao do cdigo, a partir da seleo de View > Code (Cdigo), verifique se nenhum cdigo invlido foi gerado.
Aps aplicar com xito o comportamento de servidor pgina, verifique:
Alm disso, se o comportamento de servidor inserir cdigo no documento que estabelea uma conexo a um banco de dados, crie um banco de dados de teste para testar o cdigo includo no documento. Verifique a conexo definindo consultas que produzem conjuntos de dados diferentes e de vrios tamanhos. Por fim, carregue a pgina no servidor e abra-a em um navegador. Visualize o cdigo-fonte HTML da pgina e verifique se os scripts de servidor no geraram nenhum HTML invlido.
872
Instalar comportamentos de servidor de terceiros

possvel efetuar o download e instalar comportamentos de servidor criados por desenvolvedores independentes do site do Macromedia Exchange na Web.
Para acessar o Macromedia Exchange:
1.
No Dreamweaver, selecione Help (Ajuda) > Dreamweaver Exchange. O seu navegador abre a pgina da Web Macromedia Exchange for Dreamweaver. Efetue logon no Exchange com o seu ID de Macromedia ou, se ainda no tiver criado um ID para acessar o Macromedia Exchange, siga as instrues para abrir uma conta na Macromedia.
NO TA
2.
O Macromedia Exchange tambm pode ser acessado a partir do painel Server Behaviors (Comportamentos de servidor), aberto a partir da seleo de Window (Janela) > Behaviors (Comportamentos). Nesse painel, clique no boto de adio (+) e selecione Get More Server Behaviors (Obter outros comportamentos de servidor).
Para instalar um comportamento de servidor ou outra extenso no Dreamweaver:

1.
Inicie o Extension Manager (Gerenciador de extenses) selecionando Commands (Comandos) > Manage Extensions (Gerenciar extenses). Selecione File (Arquivo) > Install Package in the Extension Manager (Instalar pacote no Extension Manager). Para obter mais informaes, consulte Using the Extension Manager.
2.
Tpicos relacionados Sobre os comportamentos de servidor na pgina 861
Comportamentos de servidor na pgina 862
Instalar comportamentos de servidor de terceiros
873
Usar o Server Behavior Builder (Criador de comportamentos de servidor)

Use o Server Behavior Builder para adicionar um ou mais blocos de cdigo que o comportamento insere na pgina.
Para escrever blocos de cdigo de comportamento de servidor:
1.
No painel Server Behaviors (Comportamentos de servidor), aberto a partir da seleo de Window (Janela)> Server Behaviors, clique no boto de adio (+) e selecione New Server Behavior (Novo comportamento de servidor) no menu pop-up. A caixa de dilogo New Server Behavior (Novo comportamento de servidor) exibida.
2.
No menu pop-up Document Type (Tipo de documento), selecione o tipo de documento para o qual o comportamento de servidor est sendo desenvolvido. Na caixa de texto Name (Nome), digite o nome do comportamento de servidor. Se deseja copiar um comportamento de servidor existente para adicion-lo ao comportamento que est sendo criado, selecione a caixa de seleo Copy Existing Server Behavior (Copiar comportamento de servidor existente). Quando essa caixa de seleo selecionada, uma lista de comportamentos de servidor disponveis exibida no menu pop-up Behavior to Copy (Comportamento a ser copiado).
3. 4.
5.
Clique em OK.
874
A caixa de dilogo Server Behavior Builder exibida.
6.
Para adicionar um novo bloco de cdigo, clique no boto de adio (+). A caixa de dilogo Create a New Code Block (Criar um novo bloco de cdigo) exibida.
875
7.
Digite um nome para o bloco de cdigo a ser criado e clique em OK. O nome que voc inseriu na caixa de dilogo aparecer no Server Behavior Builder, com as tags apropriadas de script visveis na caixa de texto Code block (Bloco de cdigo).
8.
Na caixa de texto Code Block, digite o cdigo necessrio para implementar o comportamento de servidor. Ao digitar o cdigo na caixa de texto Code Block:
Voc s pode digitar uma nica tag ou bloco de cdigo para cada bloco de cdigo nomeado (por exemplo, myBehavior_block1, myBehavior_block2, myBehavior_blockn, etc.). Se precisar inserir mltiplas tags ou blocos de cdigo, crie um bloco de cdigo individual para cada um que usar o Server Behavior Builder. Para incluir parmetros de tempo de execuo em um bloco de cdigo: Coloque o ponto de insero no bloco de cdigo em que deseja inserir o parmetro. Clique em Insert Parameters (Inserir parmetros) no boto Code Block. A caixa de dilogo Insert Parameters in Code Block (Inserir parmetros no bloco de cdigo) exibida.
a. b.
c.
Digite um valor para o parmetro na caixa de texto Parameter Name (Nome do parmetro). Clique em OK. O nome do parmetro inserido no bloco de cdigo. Repita as etapas de 6 a 8 para cada bloco de cdigo novo que deseje criar.
d.
876
9.
Digite um nome para os parmetros no menu pop-up Parameter Name e clique em OK. O parmetro ser inserido no bloco de cdigo no local em que voc colocou o ponto de insero antes de definir o parmetro.
10. Selecione
uma opo no menu pop-up Insert Code (Inserir cdigo) especificando a localizao na qual incorporar os blocos de cdigo. Para obter mais informaes, veja Posicionar blocos de cdigo na pgina 878. possvel especificar informaes adicionais sobre o servidor que est sendo criado utilizando o painel de opes Advanced (Avanado). no boto Advanced para exibir mais opes.
11.
12. Clique
13.
Se for necessrio criar mais blocos de cdigo, repita as etapas de 7 a 13 se necessrio. o comportamento de servidor exigir o fornecimento de parmetros, ser preciso criar uma caixa de dilogo que aceite parmetros de quem estiver aplicando o comportamento.
14. Se
Para criar uma caixa de dilogo que aceite parmetros de entrada do usurio, veja Criar uma caixa de dilogo para um comportamento de servidor personalizado na pgina 880.
15.
Aps executar as etapas anteriores conforme solicitado pelo comportamento de servidor que est sendo criado, clique em OK. Aps a criao de um comportamento de servidor, ele ser listado no painel Server Behaviors (Comportamentos de servidor). Verifique o comportamento de servidor e assegure-se de que ele funcione adequadamente.
Tpicos relacionados Posicionar blocos de cdigo na pgina 878

Repetir blocos de cdigo na pgina 868 Instrues de codificao na pgina 871 Posicionar blocos de cdigo na pgina 878
877
Usar parmetros em comportamentos de servidor

possvel incluir parmetros no cdigo de um comportamento de servidor (consulte Usar parmetros em comportamentos de servidor na pgina 866 para obter mais informaes) e permitir que o designer da pgina fornea os valores de parmetro necessrios antes da insero do cdigo do comportamento de servidor na pgina. Para permitir que o designer da pgina fornea valores de parmetros,insira marcadores de parmetro no cdigo, conforme mostrado:
@@parameterName@@
O exemplo de comportamento de servidor ASP a seguir contm o parmetro formParam, que requer que a pessoa que esteja inserindo o comportamento fornea o nome de um objeto de formulrio:
<% Session(lang_pref) = Request.Form(formParam); %>
Para criar um parmetro que permita ao usurio fornecer o valor necessrio:

1.
Delimite a seqncia de caracteres formParam com marcadores de parmetro:

<% Session(lang_pref) = Request.Form(@@formParam@@); %>
2.
Crie uma caixa de dilogo que solicita ao designer o nome do objeto de formulrio. Para obter mais informaes, consulte Criar uma caixa de dilogo para um comportamento de servidor personalizado na pgina 880.
Posicionar blocos de cdigo

Ao criar blocos de cdigo usando o Server Behavior Builder (Criador de comportamentos de servidor) (consulte Usar o Server Behavior Builder (Criador de comportamentos de servidor) para obter mais informaes), especifique onde quer inseri-los no cdigo HTML da pgina. Os menus pop-up Insert Code (Inserir cdigo) e Relative Position (Posio relativa) permitem que voc escolha onde inserir o bloco de cdigo no documento e depois especifique um posio relativa a outra tag na pgina. Para aprender mais sobre as opes de posicionamento do bloco de cdigo e sobre como elas afetam o comportamento de seu servidor personalizado, consulte Posicionar o bloco de cdigo dentro de pginas da Web na pgina 864.
Para posicionar um bloco de cdigo (instrues gerais):
1.
Usando o Server Behavior Builder, escreva um bloco de cdigo de acordo com a seo Usar o Server Behavior Builder (Criador de comportamentos de servidor) na pgina 874.
878
2.
Na caixa de dilogo Server Behavior Builder, selecione a posio em que deseja inserir o bloco de cdigo do menu pop-up Insert Code. Na caixa de dilogo Server Behavior Builder, selecione uma posio relativa quela que voc selecionou no menu pop-up Insert Code. Se tiver concludo a autoria do bloco de cdigo, clique em OK. O comportamento de servidor listado no painel Server Behaviors (Comportamentos de servidor) (Window [Janela]> Server Behavior) e pode ser exibido clicando-se no boto de adio (+).
3.
4.
5.
Verifique o comportamento de servidor e assegure-se de que ele funcione adequadamente. Veja Testar comportamentos de servidor na pgina 872, para obter mais informaes.
Para posicionar um bloco de cdigo em relao a outra tag na pgina:

1.
No menu pop-up Insert Code, escolha Relative To a Specific Tag (Relativo a uma determinada tag). Na caixa de texto Tag, digite a tag ou selecione uma no menu pop-up. Se uma tag for inserida, no inclua os sinais de maior e menor (< >). Especifique um local em relao tag, selecionando uma opo no menu pop-up Relative Position (Posio relativa). O bloco de cdigo pode ser inserido imediatamente antes ou imediatamente aps as tags de abertura ou fechamento. Tambm possvel substituir a tag pelo cdigo, inserir o cdigo como valor de um atributo da tag (ser exibida uma caixa que permite selecionar o atributo) ou inserir o cdigo na tag de abertura.
2.
3.
Para posicionar um bloco de cdigo em relao a uma tag selecionada pelo designer da pgina:
1. 2.
No menu pop-up Insert Code, escolha Relative To the Selection (Relativo seleo). Especifique um local relativo seleo, selecionando uma opo no menu pop-up Relative Position (Posio relativa). O bloco de cdigo pode ser inserido imediatamente antes ou depois da seleo. Tambm possvel substitur a seleo pelo seu bloco de cdigo, ou possvel anexar o bloco de cdigo ao redor da seleo. Para anexar o bloco de cdigo ao redor de uma seleo, esta deve consistir de tags de abertura e de fechamento sem contedo, conforme mostrado a seguir.
<CFIF Day=Monday></CFIF>
Posicionar blocos de cdigo
879
A parte da tag de abertura do bloco de cdigo ser inserida antes da tag de abertura da seleo, e a parte da tag de fechamento do bloco de cdigo ser inserida aps a tag de fechamento da seleo. Tpicos relacionados Sobre os comportamentos de servidor na pgina 861

Posicionar o bloco de cdigo dentro de pginas da Web na pgina 864 Usar o Server Behavior Builder (Criador de comportamentos de servidor) na pgina 874
Criar uma caixa de dilogo para um comportamento de servidor personalizado

Os comportamentos de servidor muitas vezes requerem que o designer da pgina fornea um valor de parmetro. Esse valor deve ser inserido antes que o cdigo do comportamento de servidor seja inserido na pgina. Para isso, possvel criar uma caixa de dilogo que solicita um valor de parmetro a quem estiver implementando o comportamento de servidor. Crie a caixa de dilogo definindo os parmetros fornecidos pelo designer no cdigo. Aps definir todos os parmetros, ser possvel gerar uma caixa de dilogo para o comportamento de servidor.
NO T A
Um parmetro ser inserido no bloco de cdigo sem a sua interferncia, se for especificado que o cdigo deve ser includo relativo a uma tag especfica, escolhida pelo designer da pgina, ou seja, selecionando Relative to a Specific Tag (Relativo a uma determinada tag) no menu pop-up Insert Code (Inserir cdigo). O parmetro adiciona um menu de tags caixa de dilogo do comportamento para permitir ao designer da pgina selecionar uma tag.
Para criar um parmetro no cdigo do comportamento de servidor:
Digite um marcador de parmetro em uma posio no cdigo na qual o valor do parmetro fornecido dever ser inserido. A sintaxe do parmetro a seguinte:
@@parameterName@@
Por exemplo, se o comportamento de servidor contiver o seguinte bloco de cdigo:

<% Session(lang_pref) = Request.Form(Form_Object_Name); %>
Para permitir que o designer da pgina fornea o valor de Form_Object_Name, delimite a seqncia de caracteres com marcadores de parmetro (@@):
<% Session(lang_pref) = Request.Form(@@Form_Object_Name@@); %>
880
possvel tambm realar a seqncia de caracteres e, em seguida, clicar no boto Insert Parameter in Code Block (Inserir parmetro em bloco de cdigo. Digite um nome de parmetro e clique em OK. O Dreamweaver substitui cada instncia da seqncia de caracteres realada pelo nome do parmetro especificado, delimitado com marcadores de parmetro. O Dreamweaver usa as seqncias de caracteres delimitadas com marcadores de parmetro para identificar os controles da caixa de dilogo gerados por ele (veja o procedimento a seguir). No exemplo anterior, o Dreamweaver cria uma caixa de dilogo com o seguinte identificador:
Para criar uma caixa de dilogo para um comportamento de servidor:

1.
NO T A
Os nomes de parmetros no cdigo do comportamento de servidor no podem ter espaos. Portanto, os identificadores da caixa de dilogo no podem ter espaos. Para incluir espaos no identificador, possvel editar o arquivo HTML gerado.
No Server Behavior Builder (Criador de comportamentos de servidor), clique em Next (Avanar). Ser exibida a caixa de dilogo que lista todos os parmetros fornecidos pelo designer definidos no cdigo.
Criar uma caixa de dilogo para um comportamento de servidor personalizado
881
2.
(Opcional) A ordem de exibio dos controles na caixa de dilogo tambm pode ser alterada selecionando-se um parmetro e clicando-se nas setas para cima e para baixo. (Opcional) Outra alternativa alterar o controle do parmetro, selecionando o parmetro e escolhendo outro controle na coluna Display As (Exibir como). Clique em OK. O Dreamweaver gera uma caixa de dilogo com um controle identificado para cada parmetro fornecido pelo designer que voc tenha definido anteriormente.
3.
4.
Para exibir a caixa de dilogo:
Clique no boto de adio (+), no painel Server Behaviors (Comportamentos de servidor) (Window [Janela]> Server Behaviors), e selecione o seu comportamento de servidor no menu pop-up.
Para editar a caixa de dilogo de um comportamento de servidor criado:

1.
No painel Server Behaviors, aberto a partir da seleo de Window > Server Behaviors, clique no boto de adio (+) e selecione Edit Server Behaviors (Editar comportamentos de servidor) no menu pop-up. Selecione o comportamento de servidor na lista e clique em Open (Abrir). O Server Behavior Builder ser exibido com o comportamento de servidor. Clique em Next (Avanar). A caixa de dilogo que lista todos os parmetros fornecidos pelo designer definidos no cdigo exibida.
2.
3.
4.
(Opcional) A ordem de exibio dos controles na caixa de dilogo tambm pode ser alterada selecionando-se um parmetro e clicando-se nas setas para cima e para baixo. (Opcional) Outra alternativa alterar o controle do parmetro, selecionando o parmetro e escolhendo outro controle na coluna Display As (Exibir como). Clique em OK.
5.
6.
882
Editar e modificar comportamentos de servidor

possvel editar qualquer comportamento de servidor criado com o Server Behavior Builder (Criador de comportamentos de servidor), incluindo comportamentos de servidor obtidos no site Macromedia Exchange na Web ou por meio de outros fornecedores. Se um comportamento de servidor for aplicado a uma pgina e, em seguida, editado no Dreamweaver, as instncias do comportamento anterior no sero mais exibidas no painel Server Behaviors (Comportamentos de servidor). Esse painel procurar na pgina o cdigo correspondente ao cdigo dos comportamentos de servidor conhecidos. Se o cdigo de um comportamento de servidor que o painel conhea for alterado, o painel no reconhecer mais as verses anteriores do comportamento nessa pgina.
Caso voc deseje que as verses antiga e nova do comportamento apaream no painel:
Clique no boto de adio (+) no painel Server Behaviors (Window [Janela] > Server Behaviors), selecione New Server Behavior (Novo comportamento de servidor) e crie uma cpia do comportamento de servidor antigo.
Para editar o cdigo de um comportamento de servidor criado com o Server Behavior Builder (Criador de comportamentos de servidor):
1.
No painel Server Behaviors, aberto a partir da seleo de Window > Server Behaviors, clique no boto de adio (+) e selecione Edit Server Behaviors (Editar comportamentos de servidor) no menu pop-up. A caixa de dilogo Edit Server Behaviors exibida com todos os comportamentos para a tecnologia de servidor atual.
Editar e modificar comportamentos de servidor
883
2.
Selecione o comportamento de servidor e clique em Edit (Editar). A caixa de dilogo Server Behavior Builder exibida.
3. 4.
Selecione o bloco de cdigo apropriado e modifique o cdigo a ser inserido nas pginas. (Opcional) Altere ou adicione marcadores de parmetros ao cdigo, se desejado. Para obter instrues, consulte Criar uma caixa de dilogo para um comportamento de servidor personalizado na pgina 880.
5.
(Opcional) Altere o local de insero do bloco de cdigo no cdigo-fonte HTML da pgina, escolhendo outra opo no menu pop-up Insert Code. Para obter instrues, consulte Posicionar blocos de cdigo na pgina 878. Se o cdigo modificado no contiver nenhum parmetro fornecido pelo designer, clique em OK. O Dreamweaver recupera o comportamento de servidor sem uma caixa de dilogo. O novo comportamento de servidor ser exibido no menu pop-up de adio (+) do painel Server Behaviors.
6.
7.
Se o cdigo modificado contiver parmetros fornecidos pelo designer, clique em Next. O Dreamweaver perguntar se voc deseja criar uma nova caixa de dilogo para substituir a anterior. Faa as alteraes e clique em OK.
O Dreamweaver salva todas as alteraes no arquivo EDML do comportamento de servidor.
884
CAPTULO 39
Criar formulrios
possvel utilizar o Macromedia Dreamweaver 8 para criar formulrios com campos de texto, campos de senha, botes de opo, caixas de seleo, menus pop-up, botes clicveis e outros objetos de formulrio. O Dreamweaver tambm pode escrever o cdigo que valida as informaes que o visitante fornece. Por exemplo, possvel verificar se um endereo de correio eletrnico (e-mail) contm o smbolo "@" ou se um campo de texto obrigatrio foi preenchido. Este captulo contm as seguintes sees:
39
Sobre os formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .886 Criar formulrios HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 890 Inserir objetos de formulrio HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .892 Inserir objetos de formulrio HTML dinmicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .898 Validar dados de formulrio HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 902 Anexar comportamentos JavaScript a objetos de formulrio HTML . . . . . . . . . . 903 Anexar scripts personalizados a botes de formulrio HTML . . . . . . . . . . . . . . . . 903 Criar formulrios HTML acessveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904
Tpicos relacionados Criar formulrios no ColdFusion MX 7 na pgina 915
Criar formulrios ASP.NET na pgina 987
885
Sobre os formulrios
Os formulrios permitem obter informaes dos visitantes do seu site da Web. Os visitantes digitam informaes usando objetos de formulrio, como campos de texto, caixas de lista, caixas de seleo e botes de opo, e, em seguida, clicam em um boto para enviar as informaes.
A funo dos formulrios no cliente

Os formulrios oferecem suporte no lado do cliente no relacionamento cliente-servidor. Quando um visitante insere informaes em um formulrio exibido em um navegador da Web (o cliente) e clica no boto de envio, os dados so enviados para o servidor, onde um script ou aplicativo do servidor processa essas informaes. Tecnologias comuns de servidor usadas para processar dados de formulrios incluem o Macromedia ColdFusion, o Microsoft Active Server Pages (ASP) e o PHP. O servidor responder enviando as informaes solicitadas de volta para o usurio (ou cliente), ou realizando alguma ao com base no contedo do formulrio.
3 Um novo documento HTML criado e enviado ao visitante
<HTML> </HTML>
2 O script CF processa o formulrio
1 O visitante preenche o formulrio e o envia a um servidor Web para processamento

NO T A 886
Tambm possvel enviar dados de formulrio diretamente para um destinatrio de correio eletrnico.
Captulo 39: Criar formulrios
Objetos de formulrio
No Dreamweaver, os tipos de entrada em formulrios so denominados objetos de formulrio. Os objetos de formulrio so mecanismos que permitem aos usurios inserir dados. possvel adicionar os seguintes objetos de formulrio em um formulrio:
Campos de texto:
aceitam qualquer tipo de entrada de texto alfanumrico. O texto pode ser exibido como uma linha nica, vrias linhas e como um campo de senha, no qual o texto digitado substitudo por asteriscos ou marcadores para ocultar o texto de espectadores.
Campos ocultos: armazenam as informaes digitadas pelo usurio (como nome, endereo de correio eletrnico ou preferncia de exibio) e, em seguida, utilizam tais informaes quando o usurio visitar o site novamente. Botes:
executam aes quando clicados. Normalmente, as aes incluem o envio e a redefinio de um formulrio. possvel adicionar um nome ou identificador personalizado a um boto, ou utilizar um dos identificadores predefinidos: Submit (Enviar) ou Reset (Redefinir).
NO TA
As senhas e outras informaes enviadas a um servidor atravs de um campo de senha no so criptografadas. Os dados transferidos podem ser interceptados e lidos como texto alfanumrico. Por isso, necessrio criptografar sempre os dados que voc deseja proteger.
Sobre os formulrios
887
Caixas de seleo: permitem a obteno de vrias respostas em um nico grupo de opes. O usurio pode escolher quantas opes forem necessrias. O exemplo abaixo mostra esse recurso por meio da seleo de trs itens nas caixas de seleo: Surfing (Surfe), Mountain Biking e Rafting (Canoagem).
Botes de opo: representam opes exclusivas. A seleo de um dos botes do grupo cancela a seleo de todos os outros (um grupo consiste em dois ou mais botes com o mesmo nome). No exemplo abaixo, Rafting a opo escolhida. Se o usurio clicar em Surfing, o boto Rafting ser automaticamente desativado.
Menus de lista exibem valores de opo em uma lista de rolagem que permite aos usurios selecionar vrias opes. A opo Menu exibe os valores de opo em um menu que permite aos usurios selecionar apenas um item.
NO T A 888
Um menu pop-up em um formulrio HTML no o mesmo que um menu pop-up grfico. Para obter mais informaes sobre a criao, edio e exibio de um menu pop-up grfico, consulte Show Pop-Up Menu (Mostrar o menu pop-up) na pgina 572.
Menus de salto: so listas navegveis ou menus pop-up que permitem inserir um menu no qual cada opo est vinculada a um documento ou arquivo.
Campos de arquivo:
permitem que o usurio procure arquivos no computador e efetue o upload dos arquivos como dados do formulrio.
permitem inserir uma imagem em um formulrio. Os campos de imagem podem ser utilizados para criar botes com aparncia grfica, como os botes Submit (Enviar) e Reset (Redefinir).
Campos de imagem:
Tpicos relacionados Criar formulrios HTML na pgina 890
Inserir objetos de formulrio HTML na pgina 892
Objetos de formulrio dinmicos

Um objeto de formulrio dinmico um objeto cujo estado inicial determinado pelo servidor quando a pgina solicitada, e no pelo designer no momento da criao do formulrio. Por exemplo, quando um usurio solicita uma pgina PHP que possui um formulrio com um menu, um script PHP na pgina pode preencher automaticamente esse menu com valores armazenados em um banco de dados. O servidor envia, em seguida, a pgina preenchida para o navegador do usurio. A ao de tornar dinmicos os objetos de formulrio pode simplificar a manuteno do site. Por exemplo, muitos sites usam menus para apresentar aos usurios um conjunto de opes. Se o menu for dinmico, possvel adicionar, remover ou alterar itens de menu em um nico local (a tabela do banco de dados na qual os itens esto armazenados) para atualizar todas as instncias do mesmo menu no site. Um menu no o nico tipo de objeto de formulrio dinmico. Tambm possvel criar e utilizar botes de opo, caixas de seleo, campos de texto e campos de imagem dinmicos. Tpicos relacionados Inserir objetos de formulrio HTML na pgina 892
Inserir objetos de formulrio HTML dinmicos na pgina 898
Sobre os formulrios
889
Criar formulrios HTML

Esta seo descreve como criar formulrios HTML no Dreamweaver. Tambm possvel usar o Dreamweaver para criar formulrios ASP.NET da Web. Para obter mais informaes, consulte Criar formulrios ASP.NET na pgina 987.
Para criar um formulrio HTML:
1.
Abra uma pgina e posicione o ponto de insero no local onde voc deseja que o formulrio seja exibido. Selecione Insert (Inserir) > Form (Formulrio) ou selecione a categoria Forms (Formulrios) na barra Insert e clique no cone Form. O Dreamweaver insere um formulrio vazio. Com a pgina na visualizao do projeto, os formulrios so indicados por um contorno pontilhado em vermelho. Se esse contorno no estiver visvel, verifique se a opo View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis) est selecionada.
2.
3.
Especifique a pgina ou script que ir processar os dados do formulrio. Na janela do documento, clique no contorno do formulrio para selecionar o formulrio. No Property inspector (Inspetor de propriedades), aberto a partir da seleo de Window (Janela) > Properties (Propriedades), digite o caminho na caixa de texto Action (Ao) do inspetor, ou clique no cone de pasta para navegar para a pgina ou script apropriado.
890
4.
Especifique o mtodo que ser utilizado para transmitir os dados do formulrio para o servidor. No Property inspector, selecione uma das opes a seguir no menu pop-up Method (Mtodo):
Default: GET:
utiliza a configurao padro do navegador para enviar os dados do formulrio para o servidor. Normalmente, o padro o mtodo GET. anexa o valor URL que solicita a pgina. incorpora os dados do formulrio na solicitao HTTP.
POST:
Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
5.
Insira objetos de formulrio. Posicione o ponto de insero no local onde deseja que o objeto seja exibido no formulrio e, em seguida, selecione o objeto no menu Insert > Form ou na categoria Forms da barra Insert. Para obter mais informaes, consulte Inserir objetos de formulrio HTML na pgina 892 ou Inserir objetos de formulrio HTML dinmicos na pgina 898. Se desejar, defina as propriedades do objeto de formulrio aps inseri-lo na pgina. Para obter mais informaes, selecione o objeto de formulrio e clique no cone Help do Property inspector.
6.
Ajuste o layout do formulrio conforme desejado. possvel utilizar quebras de linha, quebras de pargrafo, texto pr-formatado ou tabelas para formatar os formulrios. Um formulrio no pode ser inserido em outro formulrio (ou seja, as tags no podem ser sobrepostas), embora seja possvel incluir mais de um formulrio em uma pgina. Quando estiver criando um formulrio, lembre-se de identificar os campos com texto descritivo para permitir que o usurio identifique o ttulo da pergunta, por exemplo: "Digite o seu nome", para solicitar o nome do usurio. Utilize as tabelas para fornecer uma estrutura para os objetos de formulrio e os identificadores dos campos. Ao utilizar as tabelas em formulrios, verifique se todas as tags table esto delimitadas por tags form.
Criar formulrios HTML
891
Tpicos relacionados Validar dados de formulrio HTML na pgina 902

Anexar comportamentos JavaScript a objetos de formulrio HTML na pgina 903 Anexar scripts personalizados a botes de formulrio HTML na pgina 903 Criar formulrios HTML acessveis na pgina 904
Inserir objetos de formulrio HTML

possvel utilizar o Dreamweaver para inserir rapidamente objetos de formulrio HTML nos formulrios. Se voc estiver trabalhando em um aplicativo ASP.NET para a Web, poder usar o Dreamweaver para inserir rapidamente controles de formulrio ASP.NET. Para obter mais informaes, consulte Adicionar controles de formulrio ASP.NET a uma pgina na pgina 987. possvel criar um formulrio HTML em branco, em Insert (Inserir) > Form (Formulrio) > Form, antes de inserir objetos de formulrio nele. Para obter mais informaes, consulte Criar formulrios HTML na pgina 890. Se voc no criar um formulrio em branco e tentar inserir um objeto de formulrio, o Dreamweaver perguntar se deseja criar um formulrio.
Inserir campos de texto HTML

possvel criar um campo de texto que consiste em uma ou em vrias linhas. Tambm possvel criar um campo de texto de senha que oculte o texto digitado pelo usurio.
Para inserir um campo de texto:
1. 2.
Posicione o ponto de insero dentro do contorno do formulrio: Selecione Insert (Inserir) > Form (Formulrio) > Text Field (Campo de texto). Um campo de texto exibido no documento. No Property inspector (Inspetor de propriedades), defina as propriedades do campo de texto conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector. Para identificar o campo de texto na pgina, clique junto do campo de texto e digite o identificador.
3.
4.
892
Tpicos relacionados Validar dados de formulrio HTML na pgina 902

Exibir contedo dinmico em campos de texto HTML na pgina 900 Objetos de formulrio na pgina 887
Inserir caixas de seleo HTML

Use caixas de seleo HTML quando quiser permitir que os usurios selecionem mais de uma opo em um conjunto de opes.
NO TA
Use botes de opo quando quiser que os usurios selecionem somente uma nica opo em um conjunto de opes. Para obter mais informaes, consulte Inserir botes de opo HTML na pgina 893.
Para inserir uma caixa de seleo:

1. 2.
Posicione o ponto de insero dentro do contorno do formulrio: Selecione Insert (Inserir) > Form (Formulrio) > Check Box (Caixa de seleo). Uma caixa de seleo exibida no documento. No Property inspector (Inspetor de propriedades), defina as propriedades da caixa de seleo conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector. Para identificar a caixa de seleo, clique junto da caixa na pgina e digite o texto do identificador.
3.
4.
Tpicos relacionados Pr-selecionar dinamicamente caixas de seleo HTML na pgina 900
Inserir botes de opo HTML

Use botes de opo HTML quando quiser que os usurios selecionem apenas uma opo em um conjunto de opes. Normalmente, os botes de opo so utilizados em grupos. Todos os botes de opo de um grupo devem ter o mesmo nome.
N OT A
Use caixas de seleo quando quiser permitir aos usurios selecionar mais de uma opo. Para obter mais informaes, consulte Inserir caixas de seleo HTML na pgina 893.
893
Para inserir um grupo de botes de opo:

1. 2.
Posicione o ponto de insero dentro do contorno do formulrio: Selecione Insert (Inserir) > Form (Formulrio) > Radio Group (Grupo de botes de opo). A caixa de dilogo Radio Group exibida. Preencha a caixa de dilogo Radio Group e clique em OK. Para obter instrues sobre como preencher a caixa de dilogo Radio Group, clique no boto Help (Ajuda) dessa caixa de dilogo.
3.
O Dreamweaver insere o grupo de botes de opo no formulrio HTML. Se voc ainda no tiver inserido um formulrio na pgina, o Dreamweaver ir adicion-lo. Se desejar, possvel alterar o layout do grupo. Os botes de opo tambm podem ser editados usando o Property inspector (Inspetor de propriedades) ou diretamente na visualizao do cdigo.
Para inserir um boto de opo de cada vez:
1. 2.
Posicione o ponto de insero dentro do contorno do formulrio: Insira um boto de opo selecionando Insert > Form > Radio Button (Boto de opo). Um boto de opo exibido no documento. No Property inspector, defina as propriedades para o boto de opo, conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector. Para identificar o boto de opo, clique junto do boto na pgina e digite o texto do identificador.
3.
4.
Tpicos relacionados Pr-selecionar dinamicamente botes de opo HTML na pgina 901
Inserir menus de formulrio HTML

Um menu de formulrio HTML permite que o visitante selecione um ou mais itens em uma lista. Os menus so teis quando h espao limitado, mas necessrio exibir vrios itens. Eles tambm so teis quando voc quer controlar os valores retornados para o servidor. Ao contrrio dos campos de texto, onde os usurios podem digitar qualquer coisa que queiram, inclusive dados invlidos, voc define os valores exatos retornados por um menu. possvel inserir dois tipos de menu em um formulrio: um menu que aberto quando o usurio clica nele ou um menu que exibe uma lista rolvel de itens que podem ser selecionados. Esse ltimo tipo chamado menu de lista.
894
Para inserir um menu:

1. 2.
Posicione o ponto de insero dentro do contorno do formulrio: Selecione Insert (Inserir) > Form (Formulrio) > List/Menu (Lista/menu). Um menu exibido no documento. No Property inspector (Inspetor de propriedades), defina as propriedades do menu, conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
3.
Tpicos relacionados Criar um menu de formulrio HTML dinmico na pgina 898
Tornar dinmicos menus de formulrio HTML existentes na pgina 899
Inserir botes padro

Os botes controlam as operaes relacionadas aos formulrios. Use um boto para enviar ao servidor dados do formulrio ou para redefinir o formulrio. Normalmente, os botes de formulrio so identificados como Submit (Enviar), Reset (Redefinir) ou Send (Enviar). possvel atribuir outras tarefas de processamento definidas em um script. Por exemplo, o boto pode calcular o custo total dos itens selecionados com base em valores atribudos.
Para criar um boto:
1. 2.
Posicione o ponto de insero dentro do contorno do formulrio: Selecione Insert (Inserir) > Form (Formulrio) > Button (Boto). Um boto exibido no formulrio. No Property inspector (Inspetor de propriedades), defina as propriedades do boto, conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
3.
Inserir botes de imagem

possvel usar imagens para representar cones de botes. A utilizao de uma imagem para efetuar tarefas diferentes do envio de dados requer a anexao de um comportamento ao objeto de formulrio.
895
Para criar um boto de imagem:

1. 2.
No documento, posicione o ponto de insero dentro do contorno do formulrio: Selecione Insert (Inserir) > Form (Formulrio) > Image Field (Campo de imagem). A caixa de dilogo Image Source (Origem da imagem) exibida. Selecione a imagem para o boto na caixa de dilogo Image Source e clique em OK. Um campo de imagem exibido no formulrio. No Property inspector (Inspetor de propriedades), defina as propriedades do campo de imagem conforme desejado. Para criar um boto de envio, digite Submit (Enviar) na caixa de texto Image Field no Property inspector. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
3.
4.
5.
Para anexar um comportamento JavaScript ao boto, selecione a imagem e escolha o comportamento no painel Behaviors (Comportamentos), aberto a partir da seleo de Window (Janela) > Behaviors. Para obter mais informaes, consulte Anexar comportamentos JavaScript a objetos de formulrio HTML na pgina 903 e Anexar scripts personalizados a botes de formulrio HTML na pgina 903.
Tpicos relacionados Inserir botes padro na pgina 895
Inserir campos ocultos

possvel utilizar campos ocultos para armazenar e enviar informaes no digitadas pelo usurio. As informaes so mantidas ocultas do usurio.
Para criar um campo oculto:
1.
Na visualizao do projeto, posicione o ponto de insero no interior do contorno do formulrio. Selecione Insert (Inserir) > Form (Formulrio) > Hidden Field (Campo oculto). Aparecer um marcador no documento. Se o marcador no estiver visvel, selecione View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis) para ver o marcador.
2.
3.
Na caixa de texto HiddenField, no Property inspector (Inspetor de propriedades), digite um nome exclusivo para o campo. Na caixa de texto Value (Valor), digite o valor que deseja atribuir ao campo.
4.
896
Inserir campos para upload de arquivos

possvel criar um campo para upload de arquivos que permite ao usurio selecionar um arquivo em seu computador (como, por exemplo, um documento gerado por um processador de texto ou arquivo de imagem grfica) e efetuar o upload do arquivo para o servidor. Um campo de arquivo se parece com outros campos de texto, exceto pela presena de um boto Browse (Procurar). O usurio pode digitar manualmente o caminho do arquivo do qual ele deseja efetuar o upload ou utilizar o boto Browse para localizar e selecionar o arquivo. Para poder utilizar campos de upload de arquivos, necessrio um script no lado servidor ou uma pgina capaz de tratar envios de arquivos de envio de arquivos. Consulte a documentao da tecnologia do servidor utilizada para processar os dados do formulrio. Por exemplo, se voc usa PHP, consulte Handling files uploads no manual da PHP, em http://us2.php.net/ manual/en/features.file-upload.php. Os campos de arquivo requerem o mtodo POST para transmitir os arquivos do navegador para o servidor. O arquivo enviado para o endereo especificado na caixa de texto Action (Ao) do formulrio.
N OT A
Antes de utilizar o campo de arquivos, confirme com o administrador do servidor se permitido o upload annimo de arquivos.
Para criar um campo de arquivo em um formulrio:

1. 2.
Insira um formulrio na pgina, a partir da seleo de Insert (Inserir) > Form (Formulrio). Selecione o formulrio para exibir o Property inspector (Inspetor de propriedades) correspondente. Defina o mtodo do formulrio como POST. No menu pop-up Enctype (Tipo de codif.), selecione multipart/form-data. Na caixa de texto Action (Ao), especifique a pgina ou script no lado servidor que est apto a lidar com o arquivo carregado. Posicione o ponto de insero dentro do contorno do formulrio e selecione Insert (Inserir)> Form (Formulrio)> File Field (Campo de arquivo). O campo de arquivos inserido no formulrio. No Property inspector (Inspetor de propriedades), defina as propriedades para o campo de arquivo, conforme desejado. Para obter mais informaes, clique no boto Help (Ajuda) do Property inspector.
3. 4. 5.
6.
7.
897
Inserir objetos de formulrio HTML dinmicos

possvel inserir objetos de formulrio HTML cujo estado inicial determinado pelo servidor quando a pgina solicitada, e no pelo designer durante a criao do formulrio. Tpicos relacionados Objetos de formulrio dinmicos na pgina 889

Criar formulrios ASP.NET na pgina 987 Criar formulrios no ColdFusion MX 7 na pgina 915
Criar um menu de formulrio HTML dinmico

possvel preencher dinamicamente um menu de lista ou de formulrio HTML com entradas de um banco de dados. Para a maioria das pginas, voc pode usar um objeto de menu HTML. Para pginas ASP.NET, voc deve usar um controle de formulrio DropDownList (Lista suspensa) ou ListBox (Caixa de lista). Para obter mais informaes, consulte Criar formulrios ASP.NET na pgina 987. Antes de comear, necessrio inserir um formulrio HTML em uma pgina ColdFusion, PHP, ASP ou JSP e definir um recordset ou outra fonte de contedo dinmico para o menu. Para obter mais informaes, consulte Definir um recordset na pgina 765.
Para inserir um menu de formulrio HTML dinmico:
1. 2.
Clique no interior do formulrio HTML na pgina. Selecione Insert (Inserir) > Form (Formulrio) > List/Menu (Lista/menu). O Dreamweaver insere um objeto de formulrio List/Menu na pgina. Selecione o objeto de formulrio List/Menu. O Property inspector (Inspetor de propriedades) exibe as propriedades de List/Menu.
3.
898
4.
No Property inspector, clique no boto Dynamic (Dinmico) para exibir a caixa de dilogo Dynamic List/Menu (Lista/menu dinmico).
5.
Tornar dinmicos menus de formulrio HTML existentes

possvel tornar dinmico um menu de lista ou de formulrio HTML existente. Esta seo apresenta os objetos de formulrio HTML. Para objetos de menu ASP.NET, como DropDownList (Lista suspensa) ou ListBox (Caixa de lista), consulte Tornar dinmico um menu ASP.NET existente na pgina 989. Antes de comear, necessrio criar o formulrio em uma pgina ColdFusion, PHP, ASP ou JSP e definir um recordset ou outra fonte de contedo dinmico para o menu. Para obter mais informaes, consulte Definir um recordset na pgina 765.
Para tornar dinmico um menu de formulrio HTML existente:
1.
Na visualizao do projeto, selecione o objeto de formulrio List/Menu (Lista/menu) para torn-lo dinmico. No Property inspector (Inspetor de propriedades), clique no boto Dynamic (Dinmico). Ser exibida a caixa de dilogo Dynamic List/Menu (Lista/menu dinmico). Preencha a caixa de dilogo e clique em OK. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo.
2.
3.
899
Tpicos relacionados Criar um menu de formulrio HTML dinmico na pgina 898
Exibir contedo dinmico em campos de texto HTML

possvel exibir contedo dinmico em campos de texto HTML. Para pginas ASP.NET, necessrio usar o controle ASP.NET TextBox (Caixa de texto). Para obter mais informaes, consulte Exibir contedo dinmico em um controle ASP.NET TextBox (Caixa de texto) na pgina 990. Antes de comear, necessrio criar o formulrio em uma pgina ColdFusion, PHP, ASP ou JSP e definir um recordset ou outra fonte de contedo dinmico para o campo de texto. Para obter mais informaes, consulte Definir um recordset na pgina 765.
Para tornar dinmicos os campos de texto HTML:
1. 2.
Selecione o campo de texto no formulrio HTML na pgina. No Property inspector (Inspetor de propriedades), clique no cone em forma de raio ao lado da caixa de texto Init Val (Valor inicial). Ser exibida a caixa de dilogo Dynamic Data (Dados dinmicos). Selecione a coluna do recordset que fornecer um valor para o campo de texto. Em seguida, clique em OK.
3.
O campo de texto exibir o contedo dinmico quando o formulrio for visualizado em um navegador.
Pr-selecionar dinamicamente caixas de seleo HTML

possvel permitir que o servidor decida se deve selecionar uma caixa de seleo quando o formulrio for exibido em um navegador. Para pginas ASP.NET, necessrio usar o controle ASP.NET CheckBox (Caixa de seleo). Para obter mais informaes, consulte Pr-selecionar dinamicamente controles ASP.NET CheckBox (Caixa de seleo) na pgina 990. Antes de comear, necessrio criar o formulrio em uma pgina ColdFusion, PHP, ASP ou JSP e definir um recordset ou outra fonte de contedo dinmico para as caixas de seleo. Para obter mais informaes, consulte Definir um recordset na pgina 765. O ideal que a fonte de contedo possua dados booleanos, como Yes/No (Sim/No) ou true/false (verdadeiro/ falso).
900
Para pr-selecionar dinamicamente uma caixa de seleo HTML:

1. 2.
Selecione, na sua pgina, o objeto de formulrio de caixa de seleo. No Property inspector (Inspetor de propriedades), clique no boto Dynamic (Dinmico). Ser exibida a caixa de dilogo Dynamic CheckBox (Caixa de seleo dinmica).
3.
Preencha a caixa de dilogo e clique em OK. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo.
A caixa de seleo ser exibida selecionada ou no (dependendo dos dados), quando o formulrio for visualizado em um navegador.
Pr-selecionar dinamicamente botes de opo HTML

possvel permitir que o servidor decida se deve selecionar um boto de opo HTML quando o formulrio for exibido em um navegador. Se voc quiser pr-selecionar dinamicamente objetos de boto de opo ASP.NET, como os controles RadioButton (Boto de opo) ou RadioButtonList (Lista de botes de opo), consulte Pr-selecionar dinamicamente um item em um controle ASP.NET RadioButtonList (Lista de boto de opo) na pgina 991. Antes de comear, voc deve criar o formulrio em uma pgina ColdFusion, PHP, ASP ou JSP e inserir pelo menos um grupo de botes de opo HTML (consulte Inserir botes de opo HTML na pgina 893). Tambm necessrio definir um recordset ou outra fonte de contedo dinmico para os botes de opo. Para obter mais informaes, consulte Definir um recordset na pgina 765. O ideal que a fonte de contedo possua dados booleanos, como Yes/No (Sim/No) ou true/false (verdadeiro/falso).
Para pr-selecionar dinamicamente um boto de opo HTML:
1. 2.
Na visualizao do projeto, selecione um boto de opo no grupo. No Property inspector (Inspetor de propriedades), clique no boto Dynamic (Dinmico). A caixa de dilogo Dynamic Radio Group (Grupo de botes de opo dinmicos) exibida.
901
3.
Preencha a caixa de dilogo e clique em OK. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo.
Validar dados de formulrio HTML

O Dreamweaver pode adicionar um cdigo JavaScript que verifica o contedo de campos de texto especificados para garantir que o usurio inseriu o tipo de dados correto. Esta seo destina-se aos formulrios HTML. Voc tambm pode criar formulrios ColdFusion no Dreamweaver que validam o contedo dos campos especificados. Para obter mais informaes, consulte Validar dados de formulrio ColdFusion na pgina 927. Para formulrios ASP.NET, voc pode inserir controles de validao ASP.NET na visualizao do cdigo. Para obter mais informaes, consulte a documentao do ASP.NET.
Para validar os dados de um formulrio HTML:
1.
Crie um formulrio HTML que contenha pelo menos um campo de texto e um boto Submit (Enviar). Verifique se cada campo de texto que voc deseja validar possui um nome exclusivo. Selecione o boto Submit. No painel Behaviors (Comportamentos), aberto a partir da seleo de Window (Janela) > Behaviors, clique no boto de adio (+) e selecione o comportamento Validate Form (Validar formulrio) na lista. Ser exibida a caixa de dilogo Validate Form.
2. 3.
NO T A 902
O comportamento Validate Form estar disponvel somente se um campo de texto tiver sido inserido no documento.
4.
Defina as regras de validao para cada campo de texto e clique em OK. Por exemplo, voc poderia especificar que um campo de texto para a idade de uma pessoa aceita somente nmeros. Para obter mais informaes, consulte Validate Form (Validar o formulrio) na pgina 578.
Tpicos relacionados Captulo 18, Utilizar comportamentos JavaScript, na pgina 541 Validar dados de formulrio ColdFusion na pgina 927
Anexar comportamentos JavaScript a objetos de formulrio HTML

possvel anexar comportamentos JavaScript armazenados no Dreamweaver a objetos de formulrio HTML, como, por exemplo, botes.
N OT A
Este recurso no funciona com controles de formulrio ASP.NET porque esses controles so processados no servidor.
Para anexar um comportamento JavaScript a um objeto de formulrio HTML:

1. 2.
Selecione o objeto de formulrio HTML. No painel Behaviors (Comportamentos), aberto a partir da seleo de Window (Janela) > Behaviors, clique no boto de adio (+) e selecione um comportamento na lista. Para obter mais informaes, consulte Captulo 18, Utilizar comportamentos JavaScript, na pgina 541.
Anexar scripts personalizados a botes de formulrio HTML

Alguns formulrios utilizam JavaScript ou VBScript para processar os formulrios ou alguma outra ao no cliente (o que evita a necessidade de enviar os dados do formulrio ao servidor para processamento). Voc pode usar o Dreamweaver para configurar um boto de formulrio para executar determinado script no cliente quando o usurio clicar no boto.
NO T A
Este recurso no funciona com formulrios ASP.NET.
Anexar scripts personalizados a botes de formulrio HTML
903
Para executar um script no cliente:

1. 2.
Em um formulrio, selecione um boto Submit (Enviar). No painel Behaviors (Comportamentos), aberto a partir da seleo de Window (Janela) > Behaviors, clique no boto de adio (+) e selecione Call JavaScript (Chamar Javascript) na lista. Para obter mais informaes sobre esse comportamento, consulte Chamar o JavaScript na pgina 549.
3.
Na caixa de texto Call JavaScript que exibida, digite o nome da funo JavaScript que voc deseja executar quando o usurio clicar no boto. Em seguida, clique em OK. Por exemplo, voc pode digitar o nome de uma funo que ainda no existe, como processMyForm().
4.
Se sua funo JavaScript ainda no existir na seo head do documento, adicione-a agora. Por exemplo, voc poderia definir a seguinte funo JavaScript na seo head do documento para exibir uma mensagem quando o usurio clicar no boto Submit.
function processMyForm(){ alert('Thanks for your order!'); }
Criar formulrios HTML acessveis

Quando voc insere um objeto de formulrio HTML, com a opo Form Object (Objeto de formulrio) selecionada nas preferncias de Accessibility (Acessibilidade), o Dreamweaver solicita a digitao de informaes para tornar acessvel o objeto de formulrio. Tambm possvel alterar atributos de acessibilidade aps inserir o objeto.
Para adicionar um objeto de formulrio acessvel:
1.
Na primeira vez que voc adicionar objetos de formulrio acessveis, ative a caixa de dilogo Accessibility para objetos de formulrio (consulte Otimizar a rea de trabalho para o projeto de pgina acessvel na pgina 76). Esta uma etapa nica. No documento, posicione o ponto de insero no local onde dever ser exibido o objeto de formulrio. Selecione Insert (Inserir) > Form (Formulrio). Em seguida, selecione um objeto de formulrio a inserir.
2.
3.
904
A caixa de dilogo Input Tag Accessibility Attributes (Atributos de acessibilidade da tag de entrada) exibida.
4.
N OT A
5.
Se voc pressionar Cancel (Cancelar), o objeto de formulrio ser exibido no documento, mas o Dreamweaver no associar tags de acessibilidade a ele.
6.
Se o Dreamweaver solicitar a insero de uma tag de formulrio, clique em Yes (Sim). O objeto de formulrio ser exibido no documento.
Para editar valores de acessibilidade para um objeto de formulrio:

1. 2.
Na janela do documento, selecione o objeto. Siga um dos procedimentos abaixo:

Edite os atributos apropriados na visualizao do cdigo. Clique com o boto direito do mouse (no Windows) ou mantenha a tecla Control pressionada e clique (no Macintosh). Em seguida, selecione Edit Tag (Editar tag).
<identificador> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label> <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3
Criar formulrios HTML acessveis
905
906
PARTE 8
Desenvolver aplicativos rapidamente

Os aplicativos para a Web geralmente apresentam pginas que permitem aos usurios localizar um banco de dados; pginas que permitem aos usurios inserir, atualizar ou excluir dados em um banco de dados; e pginas que restringem o acesso a um site da Web. Com o Macromedia Dreamweaver 8, possvel criar rapidamente qualquer um desses tipos de pgina. Esta seo contm os seguintes captulos:
Captulo 40: Criar aplicativos ColdFusion rapidamente . . . . . . 909 Captulo 41: Criar aplicativos ASP.NET rapidamente. . . . . . . . . 987 Captulo 42: Criar aplicativos ASP e JSP rapidamente. . . . . . 1033 Captulo 43: Criar aplicativos PHP rapidamente. . . . . . . . . . . . .1057
907
CAPTULO 40
Criar aplicativos ColdFusion rapidamente

As ferramentas do Macromedia Dreamweaver 8 podem ser utilizadas para criar rapidamente um aplicativo ColdFusion para a Web, com pouca ou nenhuma codificao.
40
Sobre o desenvolvimento rpido de aplicativos (todos os servidores)

O RAD (Rapid application development, Desenvolvimento rpido de aplicativos) um processo de desenvolvimento de software projetado para tornar a criao de aplicativos mais fcil e rpida. As ferramentas RAD geralmente lidam com os detalhes de um projeto de software de modo semelhante ao que as ferramentas CAD (Computer-assisted-design, Projeto auxiliado por computador) tratam dos detalhes do desenho de paredes ou da insero de janelas em uma planta de construo. O Dreamweaver uma ferramenta RAD para Web designers e para desenvolvedores de aplicativos para a Web. Ele pode ser utilizado para criar pginas de busca, insero, atualizao ou excluso de registros em um banco de dados. O Dreamweaver trata dos detalhes da criao de pginas e exige do desenvolvedor o uso de pouca ou nenhuma codificao. Alm disso, fornece um ambiente de codificao completo para desenvolvedores que gostam de inserir cdigos em todas as pginas ou em parte delas.
909
Sobre pginas-mestras/detalhes
Uma pgina mestra uma pgina que discrimina os registros e os links correspondentes a estes. Quando o usurio clica em um link, a pgina de detalhes aberta exibindo mais informaes sobre o registro. Como exemplo, veja a seguir uma pgina mestra de uma empresa fictcia.
910
Captulo 40: Criar aplicativos ColdFusion rapidamente
Quando o usurio clicar em um dos nomes de local exibidos como link, ser aberta uma pgina de detalhes:
Uma pgina de resultados um tipo comum de pgina mestra. No entanto, diferentemente da pgina mestra descrita nesta seo, a lista de registros em uma pgina de resultados no determinada pelo designer, mas pelo usurio. O usurio determina a lista atravs de uma busca no banco de dados. Para obter mais informaes sobre este tipo de pgina mestra, consulte Sobre as pginas de busca/resultados na pgina 911. Tambm possvel utilizar uma pgina de detalhes para atualizar ou excluir o registro exibido. Tpicos relacionados Criar pginas-mestras/detalhes (ColdFusion) na pgina 928

Criar pginas-mestras/detalhes (ASP.NET) na pgina 997 Criar pginas-mestras/detalhes (ASP e JSP) na pgina 1033 Criar pginas-mestras/detalhes (PHP) na pgina 1057
Sobre as pginas de busca/resultados

Na maioria dos casos, so necessrias pelo menos duas pginas para adicionar este recurso ao aplicativo para a Web. A primeira pgina contm um formulrio HTML, no qual os usurios digitaro os parmetros de busca. Embora no efetue nenhuma busca na realidade, a pgina conhecida como pgina de busca.
911
A segunda pgina necessria a pgina de resultados, que executa a maior parte do trabalho. A pgina de resultados executa as seguintes tarefas:

L os parmetros de busca enviados pela pgina de busca Conecta-se ao banco de dados e procura os registros Cria um recordset a partir dos registros localizados Exibe o contedo do recordset
Opcionalmente, possvel adicionar uma pgina de detalhes. Uma pgina de detalhes fornece aos usurios as informaes sobre um determinado registro da pgina de resultados. Se o ASP.NET for utilizado, as pginas de busca e de resultados podero ser combinadas em uma nica pgina. Se houver apenas um parmetro de busca, o Dreamweaver permitir adicionar o recurso de busca ao aplicativo da Web sem o uso de consultas e variveis SQL. Basta projetar as pginas e preencher algumas caixas de dilogo. Se houver mais de um parmetro de busca, ser necessrio codificar uma instruo SQL e definir diversas variveis para ela. O Dreamweaver inserir uma consulta SQL na pgina. Quando a pgina for executada no servidor, todos os registros na tabela de banco de dados sero verificados. Se o campo especificado em um registro corresponder s condies da consulta SQL, o registro ser includo em um recordset. A consulta SQL vlida criar um recordset apenas com os resultados da busca. Por exemplo, os funcionrios de vendas podem informar quais clientes de uma rea especfica tm renda superior a determinado nvel. No formulrio de uma pgina de busca, o funcionrio de vendas digita uma rea geogrfica e um valor mnimo de nvel de salrio. Em seguida, clica no boto Submit (Enviar) para enviar os dois valores ao servidor. No servidor, os valores sero repassados instruo SQL da pgina de resultados, que criar ento um recordset contendo apenas os clientes na rea especfica, cujos salrios se situam acima do nvel especificado. Tpicos relacionados Criar pginas de busca/resultados (ColdFusion, ASP, JSP, PHP) na pgina 937
Criar uma pgina de busca do banco de dados (ASP.NET) na pgina 1004
912
Sobre objetos avanados de manipulao de banco de dados

Alm de criar pginas que modificam bancos de dados utilizando comportamentos de servidor, tambm possvel cri-las utilizando objetos de manipulao de banco de dados (como procedimentos armazenados, objetos de comando ASP ou instrues preparadas JSP).
Procedimentos armazenados
Um procedimento armazenado um item de banco de dados reutilizvel que executa algumas operaes no banco de dados. Um procedimento armazenado contm cdigo SQL que pode, entre outras coisas, inserir, atualizar ou excluir registros. Os procedimentos armazenados podem tambm alterar a estrutura do prprio banco de dados. Por exemplo: possvel utilizar um procedimento armazenado para adicionar uma coluna da tabela ou mesmo excluir uma tabela. O procedimento armazenado tambm pode chamar outro procedimento armazenado, bem como aceitar parmetros de entrada e retornar valores mltiplos para o procedimento de chamada em formato de parmetros de sada. O procedimento armazenado reutilizvel, ou seja, possvel utilizar novamente uma nica verso compilada do procedimento para executar uma operao de banco de dados vrias 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 operaes de banco de dados mais eficazes.
NO T A

Os bancos de dados MySQL e Microsoft Access no oferecem suporte a procedimentos armazenados.
Tpicos relacionados Utilizar os procedimentos armazenados para modificar bancos de dados (ColdFusion) na pgina 965 Utilizar procedimentos armazenados para modificar bancos de dados (ASP.NET) na pgina 1030 Utilizar procedimentos armazenados para modificar bancos de dados (ASP e JSP) na pgina 1049
913
Objetos de comando, ASP

Um objeto de comando ASP um objeto de servidor que executa operaes em um banco de dados. O objeto pode conter qualquer instruo SQL vlida, incluindo uma instruo que retorna um recordset 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 instruo SQL adicionar ou excluir uma coluna de tabela. Voc tambm pode utilizar um objeto de comando para executar um procedimento armazenado em um banco de dados. Um objeto de comando pode ser reutilizvel, ou seja, o servidor de aplicativos pode utilizar novamente uma nica verso compilada do objeto para executar o comando vrias vezes. Para tornar um comando reutilizvel, defina a propriedade Prepared (Preparado) do objeto de comando para true, como na instruo VBScript a seguir:
mycommand.Prepared = true
Se o comando for executado diversas vezes, uma nica verso compilada do objeto poder tornar as operaes de banco de dados mais eficientes.
NO TA 914
Nem todos os provedores de banco de dados oferecem suporte a comandos preparados. Se o banco de dados no 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 Prepared para false.
Um objeto de comando criado por meio scripts em uma pgina ASP, mas o Dreamweaver permite criar objetos de comando sem que seja necessrio escrever uma nica linha de cdigo ASP. Para obter mais informaes, consulte Utilizar comandos ASP para modificar um banco de dados na pgina 1051.
Instrues preparadas, JSP

Uma instruo JSP preparada um objeto de servidor reutilizvel que contm uma instruo SQL. possvel colocar qualquer instruo SQL vlida em uma instruo preparada. Por exemplo, a instruo preparada pode conter qualquer instruo SQL que retorne um recordset ou outra que insira, atualize ou exclua registros de um banco de dados. Uma instruo preparada reutilizvel, ou seja, o servidor de aplicativos utiliza uma nica instncia do objeto de instruo preparado para consultar o banco de dados diversas vezes. Ao contrrio do objeto de instruo JSP, no criada uma nova instncia do objeto de instruo preparado para cada nova consulta no banco de dados. Se a instruo for executada diversas vezes, uma nica instncia do objeto pode tornar as operaes de banco de dados mais eficientes e ocupar menos quantidade de memria do servidor.
Um objeto de instruo preparado criado por um scriptlet Java em uma pgina JSP. O Dreamweaver, no entanto, permite criar instrues preparadas sem que seja preciso escrever uma nica linha de cdigo Java. Se voc estiver interessado no cdigo, o scriptlet a seguir criar uma instruo preparada:
String myquery = SELECT * FROM EMPLOYEES WHERE DEPARTMENT = ?; PreparedStatement mystatement = connection.prepareStatement(myquery);
A primeira linha armazena a instruo SQL em uma varivel de seqncia de caracteres chamada myquery, com um ponto de interrogao que serve como alocador de espao para o valor da varivel SQL. A segunda linha cria um objeto de instruo preparado chamado mystatement. Em seguida, atribua um valor varivel SQL, do seguinte modo:
mystatement.setString(1, request.getParameter(myURLparam));
O mtodo setString atribui o valor varivel e leva dois argumentos. O primeiro argumento especifica a varivel afetada por sua posio (no exemplo, a primeira posio na instruo SQL). O segundo argumento especifica o valor da varivel. Neste exemplo, o valor fornecido por um parmetro URL repassado pgina.
N OT A
necessrio utilizar mtodos diferentes para atribuir valores que no sejam seqncias de caracteres a variveis SQL. Por exemplo: para atribuir um valor interior a uma varivel, utilize o mtodo mystatement.setInt().
Por ltimo, gere o recordset do seguinte modo:

ResultSet myresults = mystatement.execute();
Para obter mais informaes sobre como criar instrues preparadas JSP utilizando ferramentas de desenvolvimento rpido de aplicativos (RAD) no Dreamweaver, consulte Utilizar as instrues preparadas JSP para modificar um banco de dados na pgina 1053.
Criar formulrios no ColdFusion MX 7

O Dreamweaver oferece vrios aprimoramentos para os desenvolvedores do ColdFusion que utilizam ColdFusion MX 7 ou posterior como seus servidores de desenvolvimento. Tais aprimoramentos incluem mais botes na barra Insert (Inserir), itens de menu e Property inspectors para que voc possa criar e definir rapidamente as propriedades dos formulrios ColdFusion. Voc tambm pode usar o Dreamweaver para gerar um cdigo que valida as informaes fornecidas pelos visitantes do site. Por exemplo, voc pode verificar se o endereo de e-mail fornecido por um usurio contm o smbolo @ ou se o campo de texto obrigatrio contm um certo tipo de valor.
915
Esses aprimoramentos s estaro disponveis se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Esta seo contm os tpicos a seguir:

Ativar os aprimoramentos do ColdFusion na pgina 916 Criar formulrios ColdFusion na pgina 917 Inserir controles no formulrio ColdFusion. na pgina 919 Definir visualmente as propriedades dos controles do formulrio ColdFusion na pgina 927 Validar dados de formulrio ColdFusion na pgina 927
Ativar os aprimoramentos do ColdFusion

O Dreamweaver oferece diversos aprimoramentos para os desenvolvedores do ColdFusion. Alguns desses aprimoramentos exigem que voc defina um computador que execute ColdFusion MX 7 ou posterior como um servidor de teste para o Dreamweaver. Por exemplo, os novos Property inspectors para controles de formulrio s estaro disponveis se voc especificar o servidor de testes correto. Voc s precisa definir uma vez o servidor de teste. Em seguida, o Dreamweaver detectar automaticamente a verso do servidor e far os aprimoramentos disponveis se detectar o ColdFusion MX 7.
Para ativar os aprimoramentos para os desenvolvedores do ColdFusion:
1.
Caso ainda no tenha feito, defina um site Dreamweaver para seu projeto ColdFusion. Para obter mais informaes, consulte Captulo 2, Configurar um site do Dreamweaver, na pgina 87.
2.
Abra a caixa de dilogo Advanced Site Definition (Definio avanada de site), selecionando Site > Manage Sites (Gerenciar sites), escolhendo seu site na lista e clicando em Edit. Se a caixa de dilogo Basic Site Definition (Definio de site bsico) aparecer, clique na guia Advanced (Avanado) para alternar para a verso avanada.
3.
Selecione a categoria Testing Server (Servidor de teste) e especifique um computador que execute ColdFusion MX 7 ou posterior como o servidor de teste de seu site Dreamweaver. Certifique-se de especificar um prefixo de URL vlido. Para obter mais informaes, consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667.
916
4.
Abra qualquer documento ColdFusion. Voc s ver qualquer alterao na rea de trabalho do Dreamweaver aps abrir um documento ColdFusion.
Tpicos relacionados Criar formulrios ColdFusion na pgina 917

Proteger uma pasta em em seu aplicativo (ColdFusion) na pgina 977 Exibir componentes ColdFusion no Dreamweaver na pgina 980 Definir um recordset em um componente ColdFusion na pgina 984 Usar um recordset CFC como a origem de um contedo dinmico na pgina 985 Criar ou modificar uma fonte de dados ColdFusion na pgina 670
Criar formulrios ColdFusion

Voc pode usar vrios botes da barra Insert (Inserir), itens de menu e Property inspectors para criar rapidamente formulrios ColdFusion e definir suas propriedades no Dreamweaver. Esses aprimoramentos s estaro disponveis se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para criar um formulrio ColdFusion:
1.
Abra uma pgina ColdFusion e posicione o ponto de insero no local onde voc deseja que o formulrio ColdFusion seja exibido. Selecione Insert > ColdFusion Objects (Objetos ColdFusion) > CFForm > CFForm, ou selecione a categoria CFForm na barra Insert e clique no cone CF Form (Formulrio CF). O Dreamweaver insere um formulrio ColdFusion vazio. Na exibio do projeto, o formulrio estar indicado por um contorno vermelho pontilhado. Se esse contorno no estiver visvel, certifique-se de que a opo View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements (Elementos invisveis) esteja selecionada.
2.
3.
Certifique-se de que o formulrio ainda esteja selecionado e, em seguida, use o Property inspector para especificar a pgina ou script que far o processamento dos dados do formulrio. No Property inspector, digite o caminho da pgina ou script na caixa de texto Action (Ao) ou clique no cone de pasta ao lado da caixa de texto e navegue at a pgina ou script. Se voc no vir a caixa de texto Action no Property inspector, clique no contorno do formulrio na janela do documento para selecionar o formulrio.
917
4.
No menu pop-up Method (Mtodo), selecione o mtodo a ser usado na transmisso dos dados do formulrio para o servidor.
Default: GET:
utiliza a configurao padro do navegador para enviar os dados do formulrio para o servidor. Normalmente, o padro o mtodo get. anexa o valor URL que solicita a pgina. incorpora os dados do formulrio na solicitao HTTP.
POST:
Para obter mais informaes, clique no cone Help (Ajuda) do Property inspector.
5.
Inserir controles no formulrio ColdFusion. Posicione o ponto de insero no local onde deseja que o controle do formulrio ColdFusion aparea no formulrio e, em seguida, selecione o controle no menu Insert (Insert > ColdFusion Objects > CFForm) ou na categoria CFForm da barra Insert. Para obter mais informaes, consulte Inserir controles no formulrio ColdFusion. na pgina 919.
6.
Se necessrio, use o Property inspector para definir as propriedades do controle. Certifique-se de que o controle esteja selecionado na visualizao do projeto e defina as propriedades no Property inspector. Para obter mais informaes sobre propriedades, clique no cone Help (Ajuda) no Property inspector.
7.
Ajuste o layout do formulrio ColdFusion. Se estiver criando um formulrio baseado em HTML, voc pode usar quebras de linha, quebras de pargrafo, texto pr-formatado ou tabelas para formatar os formulrios. Um formulrio ColdFusion no pode ser inserido em outro formulrio ColdFusion (ou seja, as tags no podem ser sobrepostas), embora seja possvel incluir mais de um formulrio ColdFusion em uma pgina. Se estiver criando um formulrio baseado em Flash, use os estilos CSS para fazer o layout de seu formulrio. O ColdFusion ignora qualquer HTML no formulrio. Lembre-se de identificar com um texto descritivo os campos do formulrio ColdFusion, a fim de permitir que os usurios saibam ao que esto respondendo. Por exemplo, crie um Digite seu identificador de nome para solicitar informaes sobre o nome.
Tpicos relacionados Validar dados de formulrio ColdFusion na pgina 927
918
Inserir controles no formulrio ColdFusion.

Use a barra Insert ou o menu Insert para inserir rapidamente os controles do formulrio ColdFusion no formulrio. Esses aprimoramentos s estaro disponveis se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916. necessrio criar um formulrio ColdFusion em branco para poder inserir controles nele. Para obter mais informaes, consulte Criar formulrios ColdFusion na pgina 917. Se voc no criar um formulrio em branco e tentar inserir um controle, o Dreamweaver perguntar se deseja criar um formulrio. Esta seo contm os seguintes tpicos:

Inserir campos de texto ColdFusion na pgina 919 Inserir campos ocultos ColdFusion na pgina 920 Inserir reas de texto ColdFusion na pgina 921 Inserir botes ColdFusion na pgina 921 Inserir caixas de seleo HTML na pgina 922 Inserir botes de opo ColdFusion na pgina 923 Inserir caixas de seleo ColdFusion na pgina 923 Inserir campos de imagem ColdFusion na pgina 924 Inserir campos de arquivo ColdFusion na pgina 925
Inserir campos de texto ColdFusion

Voc pode inserir visualmente um campo de senha ou de texto ColdFusion no formulrio e, em seguida, definir suas propriedades. Esse aprimoramento do Dreamweaver s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para inserir visualmente um campo de texto ColdFusion:
1.
Na visualizao do projeto, posicione o ponto de insero no interior do contorno do formulrio. Na categoria CFForm da barra Insert (Inserir), clique no cone CF Text Field (Campo de texto ColdFusion). Um campo de texto exibido no formulrio.
2.
919
3.
No Property inspector (Inspetor de propriedades), defina as propriedades do campo de texto. Para obter mais informaes, clique no cone Help (Ajuda) do Property inspector. Para identificar o campo de texto na pgina, clique ao lado dele e insira o texto do identificador.
4.
Para inserir visualmente um campo de senha:

1. 2. 3.
Repita as etapas 1 e 2 do procedimento anterior de insero de campo de texto. Selecione o campo de texto inserido para exibir seu respectivo Property inspector. Selecione o valor de Password no menu pop-up Text Mode (Modo de texto) no Property inspector.
Definir visualmente as propriedades dos controles do formulrio ColdFusion na pgina 927
Inserir campos ocultos ColdFusion

Voc pode inserir visualmente um campo oculto ColdFusion em seu formulrio e definir suas propriedades. Use os campos ocultos para armazenar e enviar as informaes que o usurio no fornecer. As informaes so mantidas ocultas do usurio. Esse aprimoramento do Dreamweaver s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para inserir visualmente um campo oculto ColdFusion:
1.
Na visualizao do projeto, posicione o ponto de insero no interior do contorno do formulrio. Na categoria CFForm da barra Insert (Inserir), clique no cone CF Hidden Field (Campo oculto ColdFusion). Um marcador exibido no formulrio ColdFusion. Se o marcador no estiver visvel, selecione View (Exibir)> Visual Aids (Auxlios Visuais) > Invisible Elements (Elementos invisveis).
2.
3.
No Property inspector (Inspetor de propriedades), defina as propriedades do campo oculto. Para obter mais informaes, clique no cone Help (Ajuda) do Property inspector.
920
Tpicos relacionados Definir visualmente as propriedades dos controles do formulrio ColdFusion na pgina 927
Inserir reas de texto ColdFusion

Voc pode inserir visualmente uma rea de texto ColdFusion em seu formulrio e definir suas propriedades. Uma rea de texto um elemento de entrada que consiste em vrias linhas de texto. Esse aprimoramento do Dreamweaver s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para inserir visualmente uma rea de texto ColdFusion:
1. 2.
Posicione o ponto de insero dentro do contorno do formulrio: Na categoria CFForm da barra Insert (Inserir), clique no cone CF Text Area (rea de texto ColdFusion). A rea de texto exibida no formulrio ColdFusion. No Property inspector, defina as propriedades da rea de texto. Para obter mais informaes, clique no cone Help (Ajuda) do Property inspector. Para identificar a rea de texto, clique ao lado dela e insira o texto do identificador.
3.
4.
Definir visualmente as propriedades dos controles do formulrio ColdFusion na pgina 927
Inserir botes ColdFusion

Voc pode inserir visualmente um boto ColdFusion em seu formulrio e definir suas propriedades. Os botes ColdFusion controlam as operaes no formulrio ColdFusion. Os botes podem ser usados para enviar os dados do formulrio ColdFusion para o servidor ou para redefinir o formulrio ColdFusion. Normalmente, os botes ColdFusion padro so identificados como Submit (Enviar), Reset (Redefinir) ou Send (Enviar). possvel atribuir outras tarefas de processamento que voc tenha definido em um script. Por exemplo, o boto pode calcular o custo total dos itens selecionados com base em valores atribudos.
921
Esse aprimoramento do Dreamweaver s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para inserir visualmente um boto ColdFusion:
1. 2.
Posicione o ponto de insero dentro do contorno do formulrio ColdFusion. Na categoria CFForm da barra Insert (Inserir), clique no cone CF Button (Boto ColdFusion). Um boto exibido no formulrio ColdFusion. No Property inspector (Inspetor de propriedades), defina as propriedades do boto. Para obter mais informaes, clique no cone Help (Ajuda) do Property inspector.
3.
Inserir caixas de seleo HTML

Voc pode inserir visualmente uma caixa de seleo ColdFusion em seu formulrio e definir suas propriedades. Use as caixas de seleo para permitir que os usurios selecionem mais de uma opo em um conjunto de opes. Esse aprimoramento do Dreamweaver s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para inserir visualmente uma caixa de seleo ColdFusion:
1. 2.
Posicione o ponto de insero dentro do contorno do formulrio: Na categoria CFForm da barra Insert (Inserir), clique no cone CF Checkbox (Caixa de seleo ColdFusion). Uma caixa de seleo exibida no formulrio ColdFusion. No painel Properties, defina as propriedades da caixa de seleo. Para obter mais informaes, clique no cone Help (Ajuda) do Property inspector. Para identificar a caixa de seleo, clique junto da caixa na pgina e digite o texto do identificador.
3.
4.
922
Inserir botes de opo ColdFusion

Voc pode inserir visualmente um boto de opo ColdFusion em seu formulrio e definir suas propriedades. Use botes de opo quando quiser que os usurios selecionem somente uma nica opo em um conjunto de opes. Normalmente, os botes de opo so utilizados em grupos. Todos os botes de opo de um grupo devem ter o mesmo nome. Esse aprimoramento do Dreamweaver s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para inserir visualmente botes de opo ColdFusion:
1. 2.
Posicione o ponto de insero dentro do contorno do formulrio: Na categoria CFForm da barra Insert (Inserir), clique no cone CF Radio Button (Boto de opo ColdFusion). Um boto de opo exibido no formulrio ColdFusion. No Property inspector, defina as propriedades para o boto de opo. Para obter mais informaes, clique no cone Help (Ajuda) do Property inspector. Para identificar o boto de opo na pgina, clique ao lado dele e insira o texto do identificador.
3.
4.
Inserir caixas de seleo ColdFusion

Voc pode inserir visualmente uma caixa de seleo ColdFusion em seu formulrio e definir suas propriedades. A caixa de seleo permite que um visitante selecione um ou mais itens em uma lista. As caixas de seleo so teis quando h espao limitado, mas necessrio exibir vrios itens. Eles tambm so teis quando voc quer controlar os valores retornados para o servidor. Ao contrrio dos campos de texto, onde os usurios podem digitar qualquer coisa que queiram, inclusive dados invlidos, voc pode definir os valores exatos retornados por um menu. possvel inserir dois tipos de caixas de seleo em um formulrio: um menu que aberto quando o usurio clica nele ou um menu que exibe uma lista rolvel de itens que podem ser selecionados pelo usurio.
923
Esse aprimoramento do Dreamweaver s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para inserir visualmente uma caixa de seleo ColdFusion:
1. 2.
Posicione o ponto de insero dentro do contorno do formulrio: Na categoria CFForm da barra Insert (Inserir), clique no cone CF Select (Caixa de seleo ColdFusion). Uma caixa de seleo exibida no formulrio ColdFusion. No Property inspector (Inspetor de propriedades), defina as propriedades da caixa de seleo. Para obter mais informaes, clique no cone Help (Ajuda) do Property inspector.
3.
Inserir campos de imagem ColdFusion

Voc pode inserir visualmente um campo de imagem ColdFusion em seu formulrio e definir suas propriedades. Use os campos de imagem para criar botes personalizados. Esse aprimoramento do Dreamweaver s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para inserir visualmente um campo de imagem ColdFusion:
1.
Na visualizao do projeto, posicione o ponto de insero no interior do contorno do formulrio. Na categoria CFForm da barra Insert (Inserir), clique no cone CF Image Field (Campo de imagem ColdFusion). Uma caixa de dilogo lhe pedir que localize a imagem desejada. Selecione a imagem a ser inserida e clique no boto OK. Se a imagem estiver fora da pasta raiz do site, o Dreamweaver perguntar se voc quer copi-la para a pasta raiz. As imagens fora da pasta raiz nem sempre estaro acessveis quando voc publicar o site. Voc tambm pode digitar o caminho do arquivo de imagem que deseja exibir na caixa de texto Src (Orig.) do Property inspector.
2.
924
3.
No Property inspector (Inspetor de propriedades), defina as propriedades do campo de imagem. Para obter mais informaes, clique no cone Help (Ajuda) do Property inspector.
Inserir campos de arquivo ColdFusion

Voc pode inserir visualmente um campo de arquivo ColdFusion em seu formulrio e definir suas propriedades. Use o campo de arquivo para permitir que os usurios selecionem um arquivo no computador, como um documento de editor de texto ou um arquivo de figuras, e o carreguem (upload) no servidor. Um campo de arquivo ColdFusion se parece com outros campos de texto, exceto pela presena de um boto Browse (Procurar). Os usurios podem digitar manualmente o caminho do arquivo que desejam carregar ou utilizar o boto Browse para localizar e selecionar o arquivo. Os campos de arquivo requerem o mtodo POST para transmitir os arquivos do navegador para o servidor. O arquivo enviado para o endereo especificado na caixa de texto Action (Ao) do formulrio. Antes de utilizar o campo de arquivo no formulrio, confirme com o administrador do servidor se permitido o upload annimo de arquivos. Os campos de arquivos tambm requerem que a codificao do formulrio seja definida como multipart/form. O Dreamweaver faz essa definio automaticamente quando voc insere um controle de campo de arquivo. Esse aprimoramento do Dreamweaver s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para inserir visualmente um campo de arquivo ColdFusion:
1.
Na visualizao do projeto, selecione o CFForm para exibir seu Property inspector. Para selecionar rapidamente o formulrio, clique em qualquer parte do contorno do formulrio e clique na tag <cfform> no seletor de tags, no canto inferior da janela do documento.
2. 3. 4.
No Property inspector, defina o mtodo do formulrio como POST. No menu pop-up Enctype (Tipo de codif.), selecione multipart/form-data. Posicione o ponto de insero dentro do contorno do formulrio, no local onde voc deseja exibir o campo de arquivo.
925
5.
Na categoria CFForm da barra Insert (Inserir), clique no cone CF File Field (Campo de arquivo ColdFusion). Um campo de arquivo exibido no documento. No Property inspector (Inspetor de propriedades), defina as propriedades do campo de arquivo. Para obter mais informaes, clique no cone Help (Ajuda) do Property inspector.
6.
Inserir campos de data ColdFusion

Embora no seja possvel inserir visualmente um campo de data ColdFusion no Dreamweaver, voc pode definir visualmente suas propriedades. O campo de data ColdFusion um tipo especial de campo de texto que permite que os usurios selecionem uma data em um calendrio pop-up para inseri-la em um campo de texto. Esse aprimoramento do Dreamweaver s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para inserir um campo de data ColdFusion e definir suas propriedades:
1.
Na visualizao do projeto, selecione o CFForm para exibir seu Property inspector. Para selecionar rapidamente o formulrio, clique em qualquer parte do contorno do formulrio e clique na tag <cfform> no seletor de tags, no canto inferior da janela do documento.
2.
No Property inspector, defina a propriedade Format (Formato) do formulrio como Flash. O controle do campo de data somente poder ser implantado nos formulrios ColdFusion baseados no Flash.
3.
Alterne para a visualizao de cdigo (View > Code) e insira a seguinte tag em qualquer posio entre as tags CFForm de abertura e de fechamento:
<cfinput name="datefield" type="datefield">
4.
No Property inspector (Inspetor de propriedades), defina as propriedades do campo de data. Para obter mais informaes, clique no cone Help (Ajuda) do Property inspector.
926
Definir visualmente as propriedades dos controles do formulrio ColdFusion

Voc pode alterar visualmente as propriedades dos controles do formulrio ColdFusion mesmo quando estiver trabalhando na visualizao de projeto ou na visualizao de cdigo. Esse aprimoramento do Dreamweaver s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para alterar visualmente as propriedades de um controle de formulrio ColdFusion:
1.
Na visualizao do projeto, selecione o controle do formulrio na pgina; na visualizao do cdigo, clique em qualquer posio dentro da tag do controle. O Property inspector (Inspetor de propriedades) exibe as propriedades do controle do formulrio.
2.
Modifique as propriedades do controle no Property inspector. Para obter mais informaes, clique no cone Help (Ajuda) do Property inspector. Para definir mais propriedades, clique no boto Display Tag Editor (Exibir editor de tags) no Property inspector e defina as propriedades no editor de tags que for exibido.
3.
Validar dados de formulrio ColdFusion

Voc pode criar formulrios ColdFusion no Dreamweaver que verificam o contedo dos campos especificados para assegurar que o usurio inseriu o tipo de dado correto. Esse aprimoramento do Dreamweaver s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para validar dados de um formulrio ColdFusion:
1.
Crie um formulrio ColdFusion que contenha pelo menos um campo de texto e um boto Submit (Enviar). Verifique se cada campo ColdFusion que voc deseja validar possui um nome exclusivo. Selecione um campo do formulrio que voc deseje validar. No Property inspector, especifique como deseja validar o campo.
2. 3.
927
A parte inferior de cada Property inspector contm controles que o ajudam a definir a regra de validao especfica. Por exemplo, voc pode querer especificar que um campo de texto contenha um nmero telefnico. Para fazer isso, selecione Telephone (Telefone) no menu pop-up Value (Valor) no Property inspector. Tambm possvel especificar quando dever ser feita a validao, no menu pop-up Validate At (Validar em).
Criar pginas-mestras/detalhes (ColdFusion)

Com o Dreamweaver, possvel criar conjuntos de pginas que apresentam informaes em dois nveis de detalhe: uma pgina mestra que relaciona registros e uma pgina de detalhes que apresenta mais detalhes sobre cada registro. Esta seo descreve como criar esses tipos de pgina-mestra/detalhes.
Criar pginas-mestras/detalhes em uma operao (ColdFusion, ASP, JSP, PHP)

Ao desenvolver aplicativos para a Web, possvel criar rapidamente pginas-mestras/detalhes utilizando o objeto de aplicativo Master/Detail Page Set (Conjunto de pginas-mestras/ detalhes). Com o objeto de aplicativo possvel criar um conjunto completo de pginas dinmicas simplesmente preenchendo uma ou duas caixas de dilogo. O mtodo idntico ao utilizado para pginas ColdFusion, ASP, JSP e PHP. Para obter informaes sobre como criar pginas-mestras/detalhes ASP.NET, consulte Criar pginasmestras/detalhes (ASP.NET) na pgina 997.
Para completar o conjunto de pginas-mestras/detalhes com um objeto de aplicativo:
1.
No Dreamweaver, crie uma pgina dinmica em branco escolhendo File (Arquivo) > New (Novo) > Dynamic (Dinmico), selecionando uma pgina dinmica e clicando em Create (Criar). Essa pgina ser a pgina mestra. Defina um recordset para a pgina. Voc pode definir um recordset na fase de projeto (consulte Definir um recordset na pgina 765), ou o usurio pode defini-la durante a execuo (consulte Criar pginas de busca/resultados (ColdFusion, ASP, JSP, PHP) na pgina 937).
2.
928
Assegure-se de que o recordset contenha no somente todas as colunas de que voc necessitar na pgina mestra, mas tambm todas as colunas de que necessitar na pgina de detalhes. Normalmente, o recordset na pgina mestra extrai algumas colunas de uma tabela de banco de dados, enquanto que o recordset na pgina detalhes extrai mais colunas da mesma tabela para fornecer mais detalhes.
3.
Abra a pgina-mestra na visualizao do projeto e selecione Insert (Inserir) > Application Objects (Objetos de aplicativo) > Master Detail Page Set (Conjunto de pginas-mestras/ detalhes). Ser exibida a caixa de dilogo Master Detail Page Set.
4.
Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK. O objeto de aplicativo criar uma pgina de detalhes, caso ainda no tenha sido criada, e adicionar contedo dinmico e comportamentos de servidor tanto pgina mestra quanto de detalhes.
5.
929
6.
Personalize as pginas-mestras e de detalhes de acordo com suas preferncias. O layout de cada pgina pode ser totalmente personalizado utilizando as ferramentas de projeto de pgina do Dreamweaver. Tambm possvel editar os comportamentos de servidor clicando duas vezes neles no painel Server Behaviors (Comportamentos de servidor).
Aps criar as pginas-mestras/detalhes com o objeto de aplicativo, utilize o painel Server Behaviors, em Window (Janela) > Server Behaviors, para modificar os vrios blocos de criao inseridos nas pginas pelo objeto de aplicativo. Para obter mais informaes, consulte Editar o contedo dinmico de uma pgina na pgina 742. Tambm possvel criar pginas-mestras/detalhes utilizando comportamentos de servidor individuais.
Criar pginas-mestras/detalhes bloco a bloco (ColdFusion)

possvel adicionar separadamente os blocos de criao bsicos das pginas-mestras/detalhes utilizando o painel Server Behaviors (Comportamentos de servidor). Os blocos de criao tambm podem ser adicionados simultaneamente utilizando o objeto de aplicativo Master/Detail Page Set (Conjunto de pginas-mestras/detalhes). Para obter mais informaes, consulte Criar pginas-mestras/detalhes em uma operao (ColdFusion, ASP, JSP, PHP) na pgina 928. Esta seo apresenta as etapas de criao de pginas-mestras/detalhes com comportamentos de servidor:

Criar a pgina mestra (ColdFusion) na pgina 930 Criar os links para a pgina de detalhes (ColdFusion) na pgina 932 Criar um parmetro da URL para os links (ColdFusion) na pgina 933 Localizar e exibir o registro solicitado na pgina de detalhes (ColdFusion) na pgina 934
Criar a pgina mestra (ColdFusion)

Esta seo descreve como criar uma pgina mestra que contenha registros de banco de dados. possvel utilizar uma tabela dinmica para listar os registros em uma pgina ColdFusion. Antes de comear, certifique-se de definir uma fonte de dados ColdFusion para o banco de dados. Para obter mais informaes, consulte Captulo 24, Conexes de banco de dados para desenvolvedores ColdFusion, na pgina 669.
930
Para criar uma pgina mestra:

1.
No Dreamweaver, crie uma nova pgina ColdFusion. Selecione File (Arquivo) > New (Novo) > Dynamic (Dinmico), escolha ColdFusion e clique em Create (Criar). Ser aberta no Dreamweaver uma pgina ColdFusion em branco.
2.
Defina um recordset para a pgina. No painel Bindings (Ligaes), clique no boto com sinal de adio (+), selecione Recordset (Query) [Recordset (Consulta)] e preencha a caixa de dilogo Recordset. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Para codificar a sua prpria instruo SQL, clique no boto Advanced (Avanado) para abrir a caixa de dilogo avanada Recordset. Certifique-se de que o recordset contenha todas as colunas da tabela necessrias para criar a tabela dinmica. O recordset deve incluir tambm a coluna da tabela que contm a chave exclusiva de cada registro ou seja, a coluna de identificao do registro. No exemplo a seguir, a coluna CODE (CDIGO) contm informaes que identificam cada registro de modo exclusivo.
Normalmente, o recordset na pgina mestra extrai algumas colunas de uma tabela de banco de dados, enquanto que o recordset na pgina detalhes extrai mais colunas da mesma tabela para fornecer mais detalhes. O recordset pode ser definido em tempo de execuo pelo usurio. Para obter mais informaes, consulte Criar pginas de busca/resultados (ColdFusion, ASP, JSP, PHP) na pgina 937.
931
3.
Insira uma tabela dinmica para exibir os registros na pgina. Posicione o ponto de insero no local em que deseja que a tabela dinmica seja exibida na pgina e selecione Insert (Inserir) > Application Objects (Objetos de aplicativo) > Dynamic Data (Dados dinmicos) > Dynamic Table (Tabela dinmica). Ser exibida a caixa de dilogo Dynamic Table.
4.
Preencha a caixa de dilogo Dynamic Table e clique em OK. O Dreamweaver inserir uma tabela dinmica na pgina. Se precisar de ajuda para preencher a caixa de dilogo, clique no boto Help da caixa de dilogo.
5.
Se desejar, exclua a coluna da tabela dinmica que contm as identificaes de registro. Se no desejar que as identificaes de registro sejam exibidas aos usurios, exclua a coluna da tabela dinmica. Clique em qualquer ponto da pgina para mover o foco para a pgina. Mova o cursor prximo parte superior da coluna na tabela dinmica at que as clulas da coluna sejam exibidas com um contorno vermelho. Em seguida, clique para selecionar a coluna. Pressione a tecla Delete para excluir a coluna da tabela.
A prxima etapa consiste em criar os links para a pgina de detalhes.
Criar os links para a pgina de detalhes (ColdFusion)

Depois de adicionar a tabela dinmica pgina mestra , ser necessrio criar links que abram a pgina de detalhes. Esta seo descreve como criar esses links. A seo a seguir descreve como modificar o link para que ele tambm repasse a identificao do registro selecionado pelo usurio. A pgina de detalhes usar essa identificao para localizar o registro solicitado no banco de dados e exibi-lo.
932
Para criar links para a pgina de detalhes:

1.
Na linha repetida da tabela dinmica, selecione o texto ou imagem que servir como um link. No exemplo a seguir, o alocador de espao {rsLocations.LOCATION_NAME} est selecionado. Os links sero aplicados aos nomes de local na coluna.
2.
No Property inspector (Inspetor de propriedades), clique no cone da pasta ao lado a caixa de texto Link. Procure e selecione a pgina de detalhes. A pgina de detalhes exibida na caixa de texto Link, no Property inspector. Na tabela dinmica, o texto selecionado exibido como um link. Quando a pgina for executada no servidor, o link ser aplicado ao texto em cada linha da tabela.
3.
A prxima etapa criar um parmetro da URL que repasse a identificao do registro para a pgina de detalhes.
Criar um parmetro da URL para os links (ColdFusion)

Alm de abrir a pgina de detalhes, os links da tabela dinmica tambm devem repassar a identificao do registro selecionado pelo usurio. A pgina de detalhes utiliza essa identificao para localizar o registro solicitado no banco de dados e exibi-lo. A identificao de registro repassada para a pgina de detalhes em um parmetro da URL. Para obter mais informaes, consulte Parmetros da URL na pgina 749. Esta seo descreve como criar um parmetro da URL que repasse uma identificao do registro para a pgina de detalhes.
Para criar o parmetro da URL:
1.
Na pgina mestra, selecione o link na tabela dinmica. Se a visualizao do Live Data (Dados ativos) estiver ativada, selecione o link na primeira linha.
933
2.
Na caixa de texto Link no Property inspector (Inspetor de propriedades), adicione a seguinte seqncia de caracteres ao final da URL:
?recordID=#recordsetName.fieldName#
O ponto de interrogao informa o servidor de que a seguir haver um ou mais parmetros da URL. A palavra recordID o nome do parmetro da URL (voc pode criar qualquer nome de sua preferncia). Anote o nome do parmetro da URL, pois ele ser utilizado mais tarde na pgina de detalhes. A expresso aps o sinal de igual o valor do parmetro. Nesse caso, o valor gerado por uma expresso ColdFusion que retorna uma identificao do registro existente no recordset. gerada uma identificao diferente para cada linha na tabela dinmica. Na expresso ColdFusion, substitua recordsetName pelo nome do recordset e fieldName pelo nome do campo no recordset que identifica cada registro de modo exclusivo. Na maioria dos casos, o campo consistir em um nmero de identificao de registro. No exemplo a seguir, o campo consiste em cdigos de local exclusivos.
locationDetail.cfm?recordID=#rsLocations.CODE#
Quando a pgina for executada, os valores do campo CODE (CDIGO) do recordset sero inseridos nas linhas correspondentes na tabela dinmica. Por exemplo, se o local de locao Canberra, na Austrlia, apresentar o cdigo CBR, ser utilizada a seguinte URL na linha Canberra da tabela dinmica:
locationDetail.cfm?recordID=CBR 3.
Salve a pgina.
A prxima etapa localizar e exibir o registro solicitado na pgina de detalhes.
Localizar e exibir o registro solicitado na pgina de detalhes (ColdFusion)

Depois de preencher a pgina mestra , alterne para a pgina de detalhes. necessrio localizar o registro solicitado no banco de dados e exibi-lo na pgina. O procedimento consiste em definir um recordset para manter um nico registro (o registro solicitado pela pgina mestra) e ligar as colunas do recordset pgina.
Para localizar e exibir o registro solicitado na pgina de detalhes:
1.
Alterne para a pgina de detalhes. Se ainda no existir uma pgina de detalhes, crie uma pgina ColdFusion em branco, em File (Arquivo) > New (Novo).
934
2.
No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+) e selecione Recordset (Query) [Recordset (Consulta)] no menu pop-up. Ser exibida a caixa de dilogo Recordset simples. Se em vez dela for exibida a caixa de dilogo Recordset avanada, clique em Simple (Simples) para alternar para a caixa de dilogo Recordset simples.
3.
Atribua um nome ao recordset, selecione uma fonte de dados ColdFusion e a tabela de banco de dados que fornecer dados ao recordset. Na rea Columns (Colunas), selecione as colunas da tabela a serem includas no recordset. O recordset pode ser idntico ou diferente do recordset na pgina mestra. Normalmente, um recordset de uma pgina de detalhes possui mais colunas para exibir mais detalhes. Se os recordsets forem diferentes, certifique-se de que o recordset da pgina de detalhes contenha pelo menos uma coluna em comum com o recordset da pgina mestra. Normalmente, a coluna em comum a coluna de identificao do registro, mas pode ser tambm o campo de juno das tabelas relacionadas. Para incluir apenas algumas colunas da tabela no recordset, clique em Selected (Selecionado) e selecione as colunas desejadas na lista mantendo a tecla Control (no Windows) ou Command (no Macintosh) pressionada enquanto clica.
4.
5.
Preencha a seo Filter (Filtro) para localizar e exibir o registro especificado no parmetro da URL repassado pela pgina de resultados, do seguinte modo:
No primeiro menu pop-up da rea Filter, selecione a coluna do conjunto de dados que contm os valores correspondentes ao valor do parmetro da URL repassado pela pgina mestra. Por exemplo: se o parmetro da URL contiver um nmero de identificao de registro, selecione a coluna que contm os nmeros de identificao de registro. No exemplo analisado na seo anterior, a coluna do recordset chamada CODE (CDIGO) contm os valores correspondentes ao valor do parmetro da URL repassado pela pgina mestra. 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 URL Parameter (Parmetro da URL). A pgina mestra utiliza um parmetro da URL para repassar informaes para a pgina de detalhes.
Na quarta caixa de texto, digite o nome do parmetro da URL repassado pela pgina mestra. Por exemplo, se a URL utilizada pela pgina mestra para abrir a pgina de detalhes incluir o sufixo locationDetail.cfm?recordID=CBR, digite recordID.
935
A caixa de dilogo Recordset dever ser semelhante seguinte:
6.
Clique em OK. O recordset exibido no painel Bindings. Ligue as colunas do recordset pgina de detalhes, selecionando-as no painel Bindings (Window > Bindings) e arrastando-as at a pgina. Para obter mais informaes, consulte Tornar dinmico o texto na pgina 783.
7.
Depois de fazer o upload da pgina mestra e da pgina de detalhes para o servidor, a pgina mestra poder ser aberta em um navegador. Aps clicar em um link de detalhes na pgina mestra, a pgina de detalhes ser aberta apresentando mais informaes sobre o registro selecionado.
936
Criar pginas de busca/resultados (ColdFusion, ASP, JSP, PHP)

O Dreamweaver pode ser utilizado para criar um conjunto de pginas que permitam que os usurios efetuem buscas no banco de dados. O mtodo idntico ao utilizado para pginas ColdFusion, ASP, JSP e PHP. Para obter informaes sobre como criar pginas de busca/ resultados ASP.NET, consulte Criar uma pgina de busca do banco de dados (ASP.NET) na pgina 1004.
Criar a pgina de busca

Normalmente, as pginas de busca na Web contm campos de formulrio, nos quais o usurio digitar os parmetros de busca. A pgina de busca deve ter pelo menos um formulrio HTML com um boto Submit (Enviar).
Para adicionar um formulrio HTML a uma pgina de busca:
1.
Abra a pgina de busca ou uma nova pgina e selecione Insert (Inserir) > Form (Formulrio) > Form. Um formulrio vazio criado na pgina. Pode ser necessrio ativar Invisible Elements (Elementos invisveis), em View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements, para exibir os limites do formulrio, que so representados por linhas finas vermelhas.
2.
Adicione objetos de formulrio para que os usurios possam inserir os parmetros de busca escolhendo Form no menu Insert. Os objetos de formulrio incluem campos de texto, menus de lista, caixas de seleo e botes de opo. possvel adicionar tantos objetos de formulrio quantos desejar para auxiliar os usurios a aprimorar as suas buscas. Contudo, lembre-se de que quanto mais parmetros de busca na pgina, mais complexa ser a instruo SQL. Para obter mais informaes sobre objetos de formulrio, consulte Inserir objetos de formulrio HTML na pgina 892.
3. 4.
Adicione ao formulrio um boto Submit, a partir de Insert > Form > Button (Boto). Se desejar, altere o identificador do boto Submit da seguinte forma: selecione o boto, abra o Property inspector (Inspetor de propriedades), em Window (Janela) > Properties (Propriedades), e digite um novo valor na caixa de texto Label (Identificador). Em seguida, indique ao formulrio para onde devem ser enviados os parmetros de busca quando o usurio clicar no boto Submit.
937
5.
Selecione o formulrio escolhendo a tag <form> no seletor de tags, na parte inferior da janela do documento, conforme mostrado a seguir:
6.
Na caixa de texto Action (Ao), no Property inspector do formulrio, digite o nome do arquivo da pgina de resultados que realizar a busca no banco de dados. No menu pop-up Method (Mtodo), selecione um dos seguintes mtodos para determinar como o formulrio enviar os dados ao servidor:
7.
GET (OBTER) envia os dados do formulrio anexando-os URL como uma seqncia de caracteres de consulta. Como as URLs limitam-se a 8192 caracteres, no utilize o mtodo GET com formulrios longos. POST (TRANSMITIR) Default (Padro)
envia os dados de formulrio no corpo de uma mensagem.
utiliza o mtodo padro do navegador (normalmente GET).
A pgina de busca est pronta. Em seguida, prepare a pgina de resultados. Tpicos relacionados Sobre as pginas de busca/resultados na pgina 911
Criar a pgina de resultados

Quando o usurio clicar no boto Search (Busca) do formulrio, os parmetros de busca sero enviados pgina de resultados no servidor. A pgina de resultados no servidor (e no a pgina de busca do navegador) responsvel pela recuperao dos registros do banco de dados. Tpicos relacionados Sobre as pginas de busca/resultados na pgina 911

Criar a pgina de busca na pgina 937 Criar uma pgina de detalhes para uma pgina de resultados na pgina 944
938
Fazer uma busca com um nico parmetro de busca

Se a pgina de busca enviar um nico parmetro de busca ao servidor, possvel criar a pgina de resultados sem consultas e variveis SQL. Crie um recordset bsico com um filtro que excluir os registros que no correspondem ao parmetro de busca enviado pela pgina de busca.
N OT A
Se houver mais de uma condio de busca, ser necessrio utilizar a caixa de dilogo Advanced Recordset (Recordset avanado) para definir o recordset (consulte Fazer uma busca com diversos parmetros de busca na pgina 941).
Para criar o recordset que abrigar os resultados da busca:

1.
Abra a pgina de resultados na janela do documento. Se ainda no existir uma pgina de resultados, crie uma pgina dinmica em branco, em File (Arquivo) > New (Novo).
2.
Crie um novo recordset no painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+) e selecione Recordset no menu pop-up. Certifique-se de que a caixa de dilogo Simple Recordset (Recordset simples) seja exibida.
3.
Se no lugar dela for exibida a caixa de dilogo avanada, alterne para a caixa de dilogo simples clicando no boto Simple (Simples).
4.
Digite um nome para o recordset e selecione uma conexo. A conexo deve ocorrer com um banco de dados que contenha os dados a serem pesquisados pelo usurio.
939
5.
No menu pop-up Table (Tabela), selecione a tabela do banco de dados na qual ser efetuada a busca.
NO T A
Numa busca com um nico parmetro, possvel efetuar a busca nos registros com apenas uma nica tabela. Para efetuar uma busca simultnea em mais de uma tabela, necessrio utilizar a caixa de dilogo Advanced Recordset e definir uma consulta SQL.
6.
Para incluir apenas algumas das colunas da tabela no recordset, clique em Selected (Selecionado) e escolha as colunas desejadas clicando na lista e pressionando simultaneamente a tecla Control (no Windows) ou Command (no Macintosh). Devem ser includas somente as colunas que contm as informaes que deseja exibir na pgina de resultados.
Mantenha aberta a caixa de dilogo Recordset, por enquanto. Ela ser utilizada a seguir para recuperar os parmetros enviados pela pgina de busca e criar um filtro do recordset, para excluir os registros que no corresponderem aos parmetros.
Para criar o filtro do recordset:
1.
No primeiro menu pop-up da rea Filter (Filtro), selecione uma coluna na tabela de banco de dados em que deseja buscar uma correspondncia. Por exemplo: se o valor enviado pela pgina 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 padro). No terceiro menu pop-up, selecione Form Variable (Varivel de formulrio), se o formulrio na pgina de busca utilizar o mtodo POST (TRANSMITIR), ou o parmetro da URL, se utilizar o mtodo GET (OBTER). A pgina de busca utiliza uma varivel de formulrio ou um parmetro de URL para repassar informaes para a pgina de resultados.
3.
4.
Na quarta caixa de texto, digite o nome do objeto de formulrio que aceitar o parmetro de busca na pgina de busca. O nome do objeto tambm funciona como o nome da varivel de formulrio ou do parmetro de URL. Para obter o nome, alterne para a pgina de busca, clique no objeto de formulrio no formulrio para selecion-lo e marque o nome do objeto no Property inspector (Inspetor de propriedades).
940
Por exemplo: suponha que voc deseja criar um recordset que inclua somente viagens de aventuras para um determinado pas. Imagine que h uma coluna na tabela denominada TRIPLOCATION. Imagine tambm que um formulrio HTML na pgina de busca utilize o mtodo GET e contenha um objeto de menu, denominado Location (Local), que exibe uma lista de pases. Esta a aparncia que a seo Filter (Filtro) dever ter:
5.
Se desejar, clique em Test (Testar), digite um valor de teste e clique em OK para se conectar ao banco de dados e criar uma instncia do recordset. O valor de teste simula o valor que teria sido retornado da pgina de busca. Clique em OK para fechar o recordset de teste.
6.
Se estiver satisfeito com o recordset, clique em OK.
O Dreamweaver insere um script do servidor na pgina que, quando executado no servidor, verificar cada registro na tabela do banco de dados. Se o campo especificado em um registro corresponder condio de filtragem, o registro ser includo em um recordset. O script vlido criar um recordset apenas com os resultados da busca. A prxima etapa consiste em exibir o recordset na pgina de resultados. Para obter mais informaes, consulte Exibir os resultados na pgina 943.
Fazer uma busca com diversos parmetros de busca

Se a pgina de busca enviar mais de um parmetro de busca ao servidor, ser necessrio escrever uma consulta SQL para a pgina de resultados e utilizar os parmetros de busca em variveis SQL.
N OT A
Se houver apenas uma condio de busca, a caixa de dilogo Simple Recordset (Recordset simples) poder ser utilizada para definir o recordset (consulte Fazer uma busca com um nico parmetro de busca na pgina 939).
Para efetuar uma busca dos registros de um banco de dados utilizando SQL:
1.
Abra a pgina de resultados no Dreamweaver. Em seguida, crie um novo recordset do seguinte modo: abra o painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+) e selecione Recordset no menu pop-up. Verifique se a caixa de dilogo Advanced Recordset (Recordset avanado) exibida. Se a caixa de dilogo simples for exibida, alterne para a caixa de dilogo simples clicando no boto Advanced (Avanado).
2.
941
3.
Digite um nome para o recordset e selecione uma conexo. A conexo deve ocorrer com um banco de dados que contenha os dados a serem pesquisados pelo usurio.
4.
Insira uma instruo Select na rea de texto SQL. Verifique se a instruo contm uma clusula WHERE com variveis para abrigar os parmetros de busca. No seguinte exemplo, as variveis so 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 digitao, possvel utilizar a hierarquia de itens de banco de dados na parte inferior da caixa de dilogo Advanced Recordset (Recordset avanado). Para obter instrues, consulte Criar um recordset avanado gravando SQL na pgina 767. Para obter ajuda sobre a sintaxe de SQL, consulte Apndice B, Manual bsico de SQL, na pgina 1101.
5.
Atribua s variveis SQL os valores dos parmetros de busca, clicando no boto com o sinal de adio (+) na rea Variables e digitando o nome da varivel, o valor padro (valor que a varivel deve assumir, se nenhum valor em tempo de execuo for retornado) e o valor de tempo de execuo (normalmente um objeto de servidor contendo um valor enviado pelo navegador como, por exemplo, uma varivel de solicitao). No exemplo em ASP a seguir, o formulrio em HTML da pgina de busca utiliza o mtodo GET (OBTER) e contm um campo de texto denominado LastName (Sobrenome) e outro denominado Departamento (Departamento).
No ColdFusion, os valores em tempo de execuo seriam #LastName# e #Department#. No JSP, os valores em tempo de execuo seriam request.getParameter("LastName") e request.getParameter("Department").
6.
Se desejar, clique em Test (Testar) para criar uma instncia do recordset utilizando os valores padro das variveis. Os valores padro simulam os valores que seriam retornados da pgina de busca. Clique em OK para fechar o recordset de teste.
942
7.
Se estiver satisfeito com o recordset, clique em OK. O Dreamweaver inserir uma consulta SQL na pgina.
A prxima etapa consiste em exibir o recordset na pgina de resultados.
Exibir os resultados
Depois de criar um recordset para conter os resultados da busca, necessrio exibir as informaes na pgina de resultados. Para exibir os registros, basta arrastar as colunas do painel Bindings (Ligaes) at a pgina de resultados. possvel adicionar links de navegao, para mover para frente e para trs no recordset ou criar uma regio repetida para exibir mais de um registro na pgina. Tambm possvel adicionar links a uma pgina de detalhes. Esta seo descreve como exibir os resultados utilizando uma tabela dinmica.
Para exibir os resultados da busca utilizando uma tabela dinmica:
1.
Posicione o ponto de insero no local em que deseja que a tabela dinmica seja exibida na pgina de resultados e selecione Insert (Inserir) > Application Objects (Objetos de aplicativo) > Dynamic Data (Dados dinmicos) > Dynamic Table (Tabela dinmica). Ser exibida a caixa de dilogo Dynamic Table.
2.
Preencha a caixa de dilogo Dynamic Table selecionando o recordset escolhido para conter os resultados da busca. Se precisar de ajuda para preencher a caixa de dilogo Dynamic Table, clique no boto Help (Ajuda) na caixa de dilogo.
3.
Clique em OK. O Dreamweaver insere uma tabela dinmica na qual sero exibidos os resultados da busca.
Para obter mais informaes sobre outros mtodos de exibio do contedo dinmico em uma pgina, consulte Captulo 35, Exibir registros de bancos de dados, na pgina 793.
943
Criar uma pgina de detalhes para uma pgina de resultados

O conjunto de pginas de busca/resultados pode conter uma pgina de detalhes, que exibir mais informaes sobre determinados registros da pgina de resultados. Nessa situao, a pgina de resultados funciona tambm como a pgina mestra em um conjunto de pginasmestras/detalhes. Para obter mais informaes, consulte os seguintes tpicos:

Criar pginas-mestras/detalhes (ColdFusion) na pgina 928 Criar pginas-mestras/detalhes (ASP e JSP) na pgina 1033 Criar pginas-mestras/detalhes (PHP) na pgina 1057
Tpicos relacionados Criar a pgina de busca na pgina 937
Criar a pgina de resultados na pgina 938
Criar uma pgina de insero de registros (todos os servidores)

O aplicativo pode conter uma pgina que permite aos usurios inserir novos registros em um banco de dados. Por exemplo, a pgina a seguir insere um novo registro em um banco de dados de funcionrios:
944
Uma pgina de insero consiste em dois blocos de criao:

Um formulrio HTML que permite aos usurios inserir dados Um comportamento de servidor Insert Record (Inserir registro) que atualiza o banco de dados
Os blocos de criao podem ser inseridos em uma nica operao utilizando o objeto de aplicativo Record Insertion Form (Formulrio de insero de registros) (consulte Criar a pgina de insero em uma operao na pgina 945) ou adicionados separadamente com as ferramentas de formulrio e o painel Server Behaviors (Comportamentos de servidor) do Dreamweaver (consulte Criar uma pgina de insero bloco a bloco na pgina 946).
NO T A
A pgina de insero pode conter apenas um comportamento de servidor de edio de registros de cada vez. Por exemplo, no possvel adicionar um comportamento de servidor Update Record (Atualizar registro) ou Delete Record (Excluir registro) na pgina de insero.
Criar a pgina de insero em uma operao

Os blocos de criao bsicos de uma pgina de insero podem ser adicionados por meio de uma nica operao com o objeto de aplicativo Record Insertion Form (Formulrio de insero de registros). Esse objeto de aplicativo adiciona pgina um formulrio HTML e um comportamento de servidor Insert Record (Inserir registro). Os blocos de criao tambm podem ser adicionados separadamente por meio das ferramentas de formulrio e do painel Server Behaviors (Comportamentos de servidor). Para obter mais informaes, consulte Criar uma pgina de insero bloco a bloco na pgina 946. Aps colocar os blocos de criao na pgina, utilize as ferramentas de projeto do Dreamweaver para personalizar o formulrio, ou o painel Server Behaviors para editar o comportamento Insert Record.
Para criar a pgina de insero com o objeto de aplicativo Record Insertion Form:
1.
Abra a pgina na visualizao do projeto e selecione Insert (Inserir) > Application Objects (Objetos de aplicativo) > Insert Record (Inserir registro) > Record Insertion Form Wizard (Assistente Formulrio de insero de registros). Ser exibida a caixa de dilogo Insert Record Insertion Form (Inserir formulrio de insero de registros).
2.
Preencha a caixa de dilogo. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
3.
945
O Dreamweaver adiciona pgina um formulrio HTML e um comportamento de servidor Insert Record. Os objetos de formulrio so dispostos em uma tabela bsica, que pode ser personalizada utilizando as ferramentas de desenvolvimento de projetos de pgina do Dreamweaver (certifique-se de que todos os objetos de formulrio estejam dentro dos limites do formulrio). Para editar o comportamento de servidor, abra o painel Server Behaviors (Window > Server Behaviors) e clique duas vezes no comportamento Insert Record.
Criar uma pgina de insero bloco a bloco

Os blocos de criao bsicos de uma pgina de insero podem ser adicionados separadamente utilizando as ferramentas de formulrio e o painel Server Behaviors (Comportamentos de servidor). Tambm possvel adicion-los simultaneamente utilizando o objeto de aplicativo Record Insertion Form (Formulrio de insero de registros). Para obter mais informaes, consulte Criar a pgina de insero em uma operao na pgina 945. O procedimento de criao da pgina de insero consiste em duas etapas:

Adio de um formulrio HTML pgina para que os usurios possam digitar dados Adio do comportamento de servidor Insert Record (Inserir registro) para inserir registros em uma tabela de banco de dados
Para adicionar um formulrio HTML a uma pgina de insero:

1.
Crie uma nova pgina dinmica, em File (Arquivo) > New (Novo), e defina o layout utilizando as ferramentas de projeto do Dreamweaver. Adicione um formulrio HTML colocando o ponto de insero no local em que deseja que o formulrio seja exibido e selecione Insert (Inserir) > Form (Formulrio) > Form. Um formulrio vazio criado na pgina. Pode ser necessrio ativar Invisible Elements (Elementos invisveis), em View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements, para exibir os limites do formulrio, que so representados por linhas finas vermelhas.
2.
3.
Atribua um nome ao formulrio HTML clicando na tag <form> na parte inferior da janela do documento para selecionar o formulrio. Em seguida, abra o Property inspector (Inspetor de propriedades), em Window (Janela) > Properties (Propriedades), e digite um nome na caixa de texto Form Name (Nome do formulrio).
946
No necessrio especificar um atributo action (ao) ou method (mtodo) para o formulrio, para inform-lo para onde e como sero enviados os dados do registro quando o usurio clicar no boto Submit (Enviar). O comportamento de servidor Insert Record (Inserir registro) define esses atributos para o usurio.
4.
Adicione um objeto de formulrio, como um campo de texto, em Insert > Form > Text Field (Campo de texto), para cada coluna da tabela de banco de dados em que voc deseja inserir registros. Os objetos de formulrio destinam-se entrada de dados. Os campos de texto servem comumente a esse objetivo, mas tambm possvel usar menus, caixas de seleo e botes de opo. Para obter mais informaes sobre objetos de formulrio, consulte Inserir objetos de formulrio HTML na pgina 892.
5.
Adicione ao formulrio um boto Submit, a partir de Insert > Form > Button (Boto). O identificador do boto Submit pode ser alterado do seguinte modo: selecione o boto, abra o Property inspector, em Window > Properties, e digite um novo valor na caixa de texto Label (Identificador).
Para adicionar um comportamento de servidor que insira registros em uma tabela de banco de dados:
1.
No painel Server Behaviors (Comportamentos de servidor), em Window (Janela) > Server Behaviors, clique no boto com sinal de adio (+) e selecione Insert Record no menu popup. Ser exibida a caixa de dilogo Insert Record. Preencha a caixa de dilogo. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
2.
3.
O Dreamweaver adiciona pgina um comportamento de servidor que permite aos usurios inserir registros em uma tabela de banco de dados clicando no boto Submit. Para editar o comportamento de servidor, abra o painel Server Behaviors (Window > Server Behaviors) e clique duas vezes no comportamento Insert Record.
947
Criar pginas para atualizar um registro (ColdFusion)

O aplicativo pode conter um conjunto de pginas em que os usurios podero atualizar os registros existentes em uma tabela de banco de dados. Geralmente as pginas consistem em uma pgina de busca, uma pgina de resultados e uma pgina de atualizao. A pgina de busca e a pgina de resultados permitem recuperar o registro e a pgina de atualizao permite modific-lo. Esta seo descreve as etapas para criar pginas de atualizao de um registro:

Procurar o registro a ser atualizado (ColdFusion) na pgina 948 Criar links para abrir a pgina de atualizao (ColdFusion) na pgina 949 Criar um parmetro da URL para links de atualizao (ColdFusion) na pgina 949 Recuperar o registro a ser atualizado (ColdFusion) na pgina 950 Preencher a pgina de atualizao em uma operao (ColdFusion) na pgina 951 Preencher a pgina de atualizao bloco a bloco (ColdFusion) na pgina 953
Tpicos relacionados Criar pginas-mestras/detalhes (ColdFusion) na pgina 928

Criar uma pgina de insero de registros (todos os servidores) na pgina 944 Criar pginas para excluir um registro (ColdFusion) na pgina 955
Procurar o registro a ser atualizado (ColdFusion)

Quando os usurios desejam atualizar um registro, necessrio localiz-lo primeiro no banco de dados. Da mesma forma, so necessrias as pginas de busca e de resultados para funcionarem com a pgina de atualizao. Os critrios de busca so digitados na pgina de busca e o registro selecionado na pgina de resultados. Quando o usurio clica no registro, a pgina de atualizao aberta e exibe o registro em um formulrio HTML. Para obter instrues sobre a criao de pginas de busca do registro a ser atualizado, consulte Criar pginas de busca/resultados (ColdFusion, ASP, JSP, PHP) na pgina 937. Aps criar as pginas de busca/resultados, a prxima etapa criar links na pgina de resultados que, ao serem clicados, abrem a pgina de atualizao.
948
Criar links para abrir a pgina de atualizao (ColdFusion)

Aps criar as pginas de busca/resultados , necessrio criar links na pgina de resultados para abrir a pgina de atualizao e exibir o registro selecionado em um formulrio HTML. Esta seo descreve como criar esses links. A seo a seguir descreve como modificar o link de modo que ele tambm repasse a identificao do registro selecionado pelo usurio. A pgina de atualizao utilizar essa identificao para localizar o registro solicitado no banco de dados e exibi-lo.
Para criar os links para a pgina de atualizao:
1.
Na pgina de resultados, selecione o texto repetido ou o alocador de espao do contedo dinmico que voc deseja exibir como link. No exemplo a seguir, o alocador de espao {rsLocations.LOCATION_NAME} est selecionado. Os links sero aplicados aos nomes de local na coluna.
2.
No Property inspector (Inspetor de propriedades), clique no cone da pasta ao lado a caixa de texto Link. Procure e selecione a pgina de atualizao. O nome de arquivo da pgina de atualizao exibido na caixa de texto Link. Na pgina de resultados, o alocador de espao do contedo dinmico exibido como um link. Se fizer o upload das pginas no servidor e executar uma busca, voc ver que o link aplicado a todos os registros apresentados na pgina de resultados.
3.
A prxima etapa criar um parmetro da URL para repassar a identificao do registro selecionado pelo usurio.
Criar um parmetro da URL para links de atualizao (ColdFusion)

Alm de abrir a pgina de atualizao, os links da pgina de resultados tambm devem repassar a identificao do registro selecionado pelo usurio. A pgina de atualizao utilizar essa identificao para localizar o registro solicitado no banco de dados e exibi-lo.
949
A identificao do registro repassada para a pgina de atualizao em um parmetro da URL. Para obter mais informaes, consulte Parmetros da URL na pgina 749. Esta seo descreve como criar um parmetro da URL que repasse uma identificao do registro para a pgina de atualizao.
1. 2.
Selecione o link na pgina de resultados. Na caixa de texto Link no Property inspector (Inspetor de propriedades), adicione a seguinte seqncia de caracteres ao final da URL:
O ponto de interrogao informa o servidor de que a seguir haver um ou mais parmetros da URL. A palavra recordID o nome do parmetro da URL (voc pode criar qualquer nome de sua preferncia). Anote o nome do parmetro da URL, pois ele ser utilizado na pgina de atualizao posteriormente. A expresso aps o sinal de igual o valor do parmetro. Nesse caso, o valor gerado por uma expresso ColdFusion que retorna uma identificao do registro existente no recordset. gerada uma identificao diferente para cada linha na tabela dinmica. Na expresso ColdFusion, substitua recordsetName pelo nome do recordset e fieldName pelo nome do campo no recordset que identifica cada registro de modo exclusivo. Na maioria dos casos, o campo consistir em um nmero de identificao de registro. No exemplo a seguir, o campo consiste em cdigos de local exclusivos.
locationDetail.cfm?recordID=#rsLocations.CODE#
locationDetail.cfm?recordID=CBR 3.
Salve a pgina.
A prxima etapa modificar a pgina de atualizao para que ela possa localizar o registro solicitado no banco de dados e exibi-lo.
Recuperar o registro a ser atualizado (ColdFusion)

Aps a pgina de resultados repassar para a pgina de atualizao um parmetro da URL que identifica o registro a ser atualizado , a pgina de atualizao dever ler o parmetro, recuperar o registro a partir da tabela do banco de dados e armazen-lo temporariamente em um recordset.
950
Para recuperar um registro a ser atualizado:

1.
Crie uma nova pgina ColdFusion no Dreamweaver e salve-a. Essa pgina ser a pgina de atualizao. No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+) e selecione Recordset. Se a caixa de dilogo avanada for exibida, clique no boto Simple (Simples) para abrir a caixa de dilogo simples.
2.
3.
Atribua um nome ao recordset e especifique o local onde esto os dados a serem atualizados utilizando os menus pop-up Connection (Conexo) e Table (Tabela). Clique na opo Selected (Selecionado) e escolha uma coluna de chave (em geral, a coluna de identificao de registro) e as colunas que contm os dados a serem atualizados. Configure a rea Filter (Filtro) para que o valor da coluna de chave seja igual ao valor do parmetro da URL correspondente repassado pela pgina de resultados. Este tipo de filtro cria um recordset que contm apenas o registro especificado pela pgina de resultados. Por exemplo: se a coluna-chave contiver informaes de identificao de registro e for chamada PRID e se a pgina de resultados repassar as informaes de identificao de registro correspondentes no parmetro da URL id, a rea Filter ter a seguinte aparncia:
4.
5.
6.
Clique em OK.
Quando o usurio seleciona um registro na pgina de resultados, a pgina de atualizao produzir um recordset contendo apenas o registro selecionado.
Preencher a pgina de atualizao em uma operao (ColdFusion)

Uma pgina de atualizao composta por trs blocos de criao:
Um recordset filtrado para recuperar o registro a partir de uma tabela de banco de dados (consulte Recuperar o registro a ser atualizado (ColdFusion) na pgina 950). Um formulrio HTML que permite aos usurios modificar os dados do registro Um comportamento de servidor Update Record (Atualizar registro) para atualizar a tabela de banco de dados.
951
Os dois blocos de criao finais de uma pgina de atualizao podem ser adicionados em uma nica operao utilizando o objeto de aplicativo Record Update Form (Formulrio de atualizao de registros). O objeto de aplicativo adiciona pgina um formulrio HTML e um comportamento de servidor Update Record. Para que o objeto de aplicativo possa ser utilizado, o aplicativo para a Web deve identificar o registro a ser atualizado e a pgina de atualizao deve ser capaz de recuper-lo. Consulte Procurar o registro a ser atualizado (ColdFusion) na pgina 948, Criar links para abrir a pgina de atualizao (ColdFusion) na pgina 949, Criar um parmetro da URL para links de atualizao (ColdFusion) na pgina 949 e Recuperar o registro a ser atualizado (ColdFusion) na pgina 950. Aps o objeto de aplicativo colocar os blocos de criao na pgina, utilize as ferramentas de projeto do Dreamweaver para personalizar o formulrio de acordo com suas preferncias ou o painel Server Behaviors para editar o comportamento de servidor Update Record.
N OT A
A pgina de atualizao pode conter apenas um comportamento de servidor de edio de registros de cada vez. Por exemplo, no possvel adicionar um comportamento de servidor Insert Record ou Delete Record pgina de atualizao.
Para criar a pgina de atualizao com o objeto de aplicativo Record Update Form:
1.
Abra a pgina na visualizao do projeto e selecione Insert (Inserir) > Application Objects (Objetos de aplicativo) > Update Record (Atualizar registro) > Record Update Form Wizard (Assistente Formulrio de atualizao de registros). Ser exibida a caixa de dilogo Record Update Form (Formulrio de atualizao de registros).
2.
3.
O objeto de aplicativo adiciona pgina um formulrio HTML e um comportamento de servidor Update Record. Os objetos de formulrio so dispostos em uma tabela bsica, que pode ser personalizada utilizando as ferramentas de desenvolvimento de projetos de pgina do Dreamweaver (certifique-se de que todos os objetos de formulrio estejam dentro dos limites do formulrio). Para editar o comportamento de servidor, abra o painel Server Behaviors, em Window > Server Behaviors, e clique duas vezes no comportamento Update Record.
952
Preencher a pgina de atualizao bloco a bloco (ColdFusion)

Um recordset filtrado para recuperar o registro a partir de uma tabela de banco de dados (consulte Recuperar o registro a ser atualizado (ColdFusion) na pgina 950). Um formulrio HTML que permite aos usurios modificar os dados do registro Um comportamento de servidor Update Record (Atualizar registro) para atualizar a tabela de banco de dados.
Os dois blocos de criao bsicos finais de uma pgina de atualizao podem ser adicionados separadamente utilizando as ferramentas de formulrio e o painel Server Behaviors (Comportamentos de servidor). Antes de adicionar os blocos, o aplicativo da Web deve identificar o registro a ser atualizado e a pgina de atualizao deve ser capaz de recuper-lo. Consulte Procurar o registro a ser atualizado (ColdFusion) na pgina 948, Criar links para abrir a pgina de atualizao (ColdFusion) na pgina 949, Criar um parmetro da URL para links de atualizao (ColdFusion) na pgina 949 e Recuperar o registro a ser atualizado (ColdFusion) na pgina 950. O preenchimento da pgina de atualizao consiste em trs etapas:
Adicionar um formulrio HTML pgina para que os usurios possam modificar os dados Exibir o registro no formulrio ligando os objetos do formulrio a colunas da tabela de banco de dados Adicionar o comportamento de servidor Update Record para atualizar a tabela de banco de dados depois que o usurio modificar o registro
Para adicionar um formulrio HTML a uma pgina de atualizao:

1. 2. 3.
Crie uma nova pgina ColdFusion, em File (Arquivo) > New (Novo). Crie o layout da pgina com as ferramentas de projeto do Dreamweaver. Adicione um formulrio HTML posicionando o ponto de insero no local em que deseja que o formulrio seja exibido e selecione Insert (Inserir) > Form (Formulrio) > Form. Um formulrio vazio criado na pgina. Pode ser necessrio ativar Invisible Elements (Elementos invisveis), em View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements, para exibir os limites do formulrio, que so representados por linhas finas vermelhas.
953
4.
Atribua um nome ao formulrio HTML clicando na tag <form> na parte inferior da janela do documento para selecionar o formulrio. Em seguida, abra o Property inspector (Inspetor de propriedades), em Window (Janela) > Properties (Propriedades), e digite um nome na caixa de texto Form Name (Nome do formulrio). No necessrio especificar um atributo action (ao) ou method (mtodo) para o formulrio, para inform-lo para onde e como sero enviados os dados do registro quando o usurio clicar no boto Submit (Enviar). O comportamento de servidor Update Record define esses atributos para o usurio.
5.
Adicione um objeto de formulrio, como um campo de texto, em Insert > Form > Text Field, para cada coluna que deseja atualizar na tabela de banco de dados. Os objetos de formulrio destinam-se entrada de dados. Os campos de texto servem comumente a esse objetivo, mas tambm possvel usar menus, caixas de seleo e botes de opo. A cada objeto de formulrio deve corresponder uma coluna no recordset definido anteriormente. A nica exceo a coluna de chave exclusiva, qual no deve corresponder nenhum objeto de formulrio. Para obter mais informaes sobre objetos de formulrio, consulte Inserir objetos de formulrio HTML na pgina 892.
6.
Para exibir o registro no formulrio:

1.
Certifique-se de ter definido um recordset para conter o registro que o usurio deseja atualizar. Para obter mais informaes, consulte Recuperar o registro a ser atualizado (ColdFusion) na pgina 950.
2.
Ligue cada objeto do formulrio aos dados do recordset, conforme descrito nas sees a seguir:

Exibir contedo dinmico em campos de texto HTML na pgina 900 Pr-selecionar dinamicamente caixas de seleo HTML na pgina 900 Pr-selecionar dinamicamente botes de opo HTML na pgina 901 Criar um menu de formulrio HTML dinmico na pgina 898 Tornar dinmicos menus de formulrio HTML existentes na pgina 899
954
Para adicionar um comportamento de servidor a fim de atualizar a tabela do banco de dados:

1.
No painel Server Behaviors, em Window > Server Behaviors, clique no boto com sinal de adio (+) e selecione Update Record no menu pop-up. Ser exibida a caixa de dilogo Update Record. Preencha a caixa de dilogo. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
2.
3.
O Dreamweaver adiciona pgina um comportamento de servidor que permite aos usurios atualizar registros em um banco de dados clicando no boto Submit no formulrio. Para editar o comportamento de servidor, abra o painel Server Behaviors, em Window > Server Behaviors, e clique duas vezes no comportamento Update Record. Tpicos relacionados Preencher a pgina de atualizao em uma operao (ColdFusion) na pgina 951
Criar pginas para excluir um registro (ColdFusion)

O aplicativo pode conter um conjunto de pginas que permite que os usurios excluam registros de um banco de dados. As pginas normalmente consistem em uma pgina de busca, uma pgina de resultados e uma pgina de excluso. A pgina de busca e a pgina de resultados permitem recuperar o registro e a pgina de excluso permite exclu-lo. Esta seo descreve as seguintes etapas da criao de pginas ColdFusion para excluir registros:

Procurar o registro a ser excludo (ColdFusion) na pgina 956 Criar links para uma pgina de confirmao (ColdFusion) na pgina 956 Criar um parmetro da URL a ser repassado para a pgina de confirmao (ColdFusion) na pgina 958 Exibir o registro na pgina de confirmao (ColdFusion) na pgina 959 Adicionar lgica para excluir o registro (ColdFusion) na pgina 963
955
Procurar o registro a ser excludo (ColdFusion)

Quando os usurios planejam excluir um registro, necessrio localiz-lo primeiro no banco de dados. Da mesma forma, so necessrias as pginas de busca e de resultados para funcionarem com a pgina de excluso. Os critrios de busca so digitados na pgina de busca e o registro selecionado na pgina de resultados. Quando o usurio clica no registro, a pgina de excluso aberta e exibe o registro em um formulrio HTML. Para obter instrues sobre a criao de pginas de busca do registro a ser excludo, consulte Criar pginas de busca/resultados (ColdFusion, ASP, JSP, PHP) na pgina 937. Aps criar as pginas de busca/resultados, a prxima etapa criar links na pgina de resultados para permitir que os usurios selecionem um registro a ser excludo e exibam uma pgina de confirmao.
Criar links para uma pgina de confirmao (ColdFusion)

Aps criar a pgina de resultados , necessrio criar links nos quais o usurio possa clicar para confirmar a excluso do registro associado do banco de dados. Esta seo descreve como criar esses links. A seo a seguir descreve como modificar o link de modo que ele tambm repasse a identificao do registro que o usurio deseja excluir. A pgina de confirmao utiliza essa identificao para localizar e exibir o registro.
Para criar links para uma pgina de confirmao:
1.
Na pgina de resultados, crie uma nova coluna na tabela utilizada para exibir registros clicando na ltima coluna da tabela e selecionando Modify (Modificar) > Table (Tabela) > Insert Rows or Columns (Inserir linhas ou colunas). Ser exibida a caixa de dilogo Insert Rows or Columns. Selecione a opo Columns (Colunas) e After Current Column (Depois da coluna atual). Em seguida, clique em OK.
2.
O Dreamweaver adiciona uma coluna tabela.
956
3.
Na coluna recm-criada da tabela, digite a seqncia de caracteres Delete (Excluir) na linha que contm os alocadores de espao do contedo dinmico. Certifique-se de digitar a seqncia de caracteres dentro da regio repetida com guias. Tambm possvel inserir uma imagem com uma palavra ou smbolo para excluso. Se a visualizao do Live Data (Dados ativos) estiver ativada, digite a seqncia de caracteres na primeira linha de registros e clique no cone Refresh (Atualizar).
4.
Selecione a seqncia de caracteres Delete para aplicar um link a ela. Se a visualizao do Live Data estiver ativada, selecione a seqncia de caracteres na primeira linha de registros.
5.
No Property inspector (Inspetor de propriedades), digite a pgina de confirmao na caixa de texto Link. possvel digitar qualquer nome de arquivo desejado.
Depois que voc clicar fora da caixa de texto Link, a seqncia de caracteres Delete ser exibida na tabela como um link. Se a visualizao do Live Data for ativada, em View (Exibir) > Live Data, voc poder ver que o link foi aplicado ao mesmo texto em todas as linhas da tabela. Se a visualizao do Live Data j estiver ativada, clique no cone Refresh para aplicar os links a cada linha.
Aps criar os links, a prxima etapa criar parmetros da URL para os links.
957
Criar um parmetro da URL a ser repassado para a pgina de confirmao (ColdFusion)

Alm de abrir a pgina de confirmao, os links da pgina de resultados tambm devem repassar a identificao do registro a ser excludo. A pgina de confirmao utilizar essa identificao para localizar o registro no banco de dados e exibi-lo. necessrio repassar a identificao do registro para a pgina de confirmao com um parmetro da URL. Esta seo descreve como criar um parmetro da URL para repassar a identificao do registro para a pgina de confirmao.
1.
Selecione o link Delete (Excluir) na pgina de resultados. Se a visualizao do Live Data (Dados ativos) estiver ativada, selecione o link na primeira linha.
2.
Na caixa de texto Link no Property inspector (Inspetor de propriedades), adicione a seguinte seqncia de caracteres ao final da URL:
O ponto de interrogao informa o servidor de que a seguir haver um ou mais parmetros da URL. A palavra recordID o nome do parmetro da URL (voc pode criar qualquer nome de sua preferncia). Anote o nome do parmetro da URL, pois ele ser utilizado mais tarde na pgina de confirmao. A expresso aps o sinal de igual o valor do parmetro. Nesse caso, o valor gerado por uma expresso ColdFusion que retorna uma identificao do registro existente no recordset. gerada uma identificao diferente para cada linha na tabela dinmica. Na expresso ColdFusion, substitua recordsetName pelo nome do recordset e fieldName pelo nome do campo no recordset que identifica cada registro de modo exclusivo. Na maioria dos casos, o campo consistir em um nmero de identificao de registro. No exemplo a seguir, o campo consiste em cdigos de local exclusivos:
confirmDelete.cfm?recordID=#rsLocations.CODE#
confirmDelete.cfm?recordID=CBR 3.
Salve a pgina.
Aps criar um parmetro dinmico da URL para os links Delete (Excluir), a prxima etapa exibir o registro na pgina de confirmao.
958
Exibir o registro na pgina de confirmao (ColdFusion)

Aps completar a pgina que contm os registros , alterne para a pgina de confirmao. A pgina de confirmao mostra o registro e solicita que o usurio confirme se deseja exclu-lo. Quando o usurio confirmar a operao clicando no boto Form (Formulrio), o aplicativo para a Web excluir o registro do banco de dados. Criar essa pgina consiste em criar um formulrio HTML, recuperar o registro a ser exibido no formulrio, exibir o registro no formulrio e adicionar a lgica para excluso do registro do banco de dados. A recuperao e exibio do registro consiste em definir um recordset para conter um nico registro (aquele a ser excludo) e ligar as colunas do recordset ao formulrio. As etapas esto descritas a seguir, com mais detalhes.
Para criar um formulrio HTML para exibir o registro:
1.
Crie uma nova pgina ColdFusion e salve-a como a pgina de confirmao especificada na seo anterior. A pgina de confirmao foi especificada quando voc criou o link Delete (Excluir) na seo anterior. Utilize este nome ao salvar o arquivo pela primeira vez (por exemplo, deleteConfirm.cfm).
2. 3.
Insira um formulrio HTML na pgina, em Insert (Inserir) > Form (Formulrio) > Form. Adicione ao formulrio um campo oculto. O campo oculto do formulrio necessrio para armazenar a identificao do registro repassada pelo parmetro da URL. Para adicionar um campo oculto, posicione o ponto de insero no formulrio e selecione Insert > Form > Hidden Field (Campo oculto).
4.
Adicione um boto ao formulrio. O usurio deve clicar no boto para confirmar e excluir o registro exibido. Para adicionar um boto, posicione o ponto de insero no formulrio e selecione Insert > Form > Button (Boto).
5.
Aperfeioe o projeto da pgina como desejar e salve-a.
Para recuperar o registro que o usurio deseja excluir:

1.
959
2.
Atribua um nome ao recordset, selecione uma fonte de dados ColdFusion e a tabela de banco de dados que contm os registros que os usurios podem excluir. Na rea Columns (Colunas), selecione as colunas da tabela (campos de registro) que deseja exibir na pgina. Para exibir apenas alguns dos campos do registro, clique em Selected (Selecionado), escolha os campos desejados pressionando a tecla Control (Windows) ou Command (Macintosh) enquanto clica em cada um deles na lista. Certifique-se de incluir o campo de identificao do registro, mesmo que no pretenda exibi-lo.
3.
4.
Preencha a seo Filter (Filtro) para localizar e exibir o registro especificado no parmetro da URL, repassado pela pgina de resultados, do seguinte modo:
No primeiro menu pop-up da rea Filter, selecione a coluna do conjunto de dados que contm os valores correspondentes ao valor do parmetro da URL repassado pela pgina com os links Delete. Por exemplo: se o parmetro da URL contiver um nmero de identificao de registro, selecione a coluna que contm os nmeros de identificao de registro. No exemplo analisado na seo anterior, a coluna do recordset chamada CODE (CDIGO) contm os valores correspondentes ao valor do parmetro da URL repassado pela pgina com os links Delete. No menu pop-up ao lado do primeiro menu, selecione o sinal de igual, se ainda no tiver sido selecionado. No terceiro menu pop-up, selecione URL Parameter (Parmetro da URL). A pgina com os links Delete utiliza um parmetro da URL para repassar informaes pgina de confirmao. Na quarta caixa de texto, digite o nome do parmetro da URL repassado pela pgina mestra com os links Delete. Por exemplo, se a URL utilizada para abrir a pgina de confirmao incluir o sufixo confirmDelete.cfm?recordID=CBR, digite recordID.
960
A caixa de dilogo Recordset dever ter a seguinte aparncia:
5.
Clique em OK.
O recordset exibido no painel Bindings.

Para exibir o registro que o usurio deseja excluir:
1.
Selecione as colunas do recordset no painel Bindings e arraste-as at a pgina de confirmao. Insira esse contedo dinmico somente de leitura dentro dos limites do formulrio. Para obter mais informaes sobre como inserir contedo dinmico em uma pgina, consulte Tornar dinmico o texto na pgina 783. Em seguida, ligue a coluna de identificao do registro ao campo oculto do formulrio.
2.
Certifique-se de que a opo Invisible Elements (Elementos invisveis) esteja ativada em View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements. Em seguida, clique no cone amarelo em forma de escudo (que representa o campo oculto do formulrio). O campo oculto do formulrio ser selecionado. No Property inspector (Inspetor de propriedades), clique no cone em forma de raio ao lado a caixa de texto Value (Valor). Ser exibida a caixa de dilogo Dynamic Data (Dados dinmicos). Na caixa de dilogo Dynamic Data, selecione a coluna de identificao do registro no recordset.
3.
4.
961
No exemplo a seguir, a coluna de identificao de registro selecionada CODE.
5.
Clique em OK e salve a pgina.
A pgina de confirmao preenchida dever ser semelhante apresentada a seguir.
Aps a exibio do registro na pgina de confirmao, a prxima etapa consiste em adicionar a lgica para excluso do registro.
962
Adicionar lgica para excluir o registro (ColdFusion)

Aps exibir o registro selecionado na pgina de confirmao ), voc deve adicionar lgica pgina para excluir o registro do banco de dados quando o usurio clicar no boto Confirm Deletion (Confirmar excluso). No Dreamweaver, possvel adicionar esta lgica de modo rpido e fcil utilizando o comportamento de servidor Delete Record (Excluir registro).
Para adicionar lgica para excluso do registro exibido no formulrio HTML:
1. 2.
Verifique se a pgina de confirmao est aberta no Dreamweaver. No painel Server Behaviors (Comportamentos de servidor), em Window (Janela) > Server Behaviors, clique no boto com sinal de adio (+) e selecione Delete Record. A caixa de dilogo Delete Record exibida.
3.
Na caixa de texto First Check If Variable Is Defined (Primeiramente, verificar se a varivel est definida), selecione a opo Primary Key Value (Valor da chave primria). Especifique o valor da chave primria posteriormente na caixa de dilogo. No menu pop-up Connection (Conexo), selecione uma conexo com o banco de dados, para que o comportamento de servidor possa conectar-se ao banco de dados em questo. No menu pop-up Table (Tabela), selecione a tabela de banco de dados que contm os registros a serem excludos. No menu pop-up Primary Key Column (Coluna de chave primria), selecione a coluna da tabela que contm as identificaes do registro. O comportamento de servidor Delete Record buscar uma correspondncia nesta coluna. A coluna deve conter os mesmos dados de identificao do registro que a coluna do recordset ligada ao campo oculto do formulrio na pgina. Se a identificao do registro for numrica, selecione a opo Numeric (Numrico).
4.
5.
6.
963
7.
No menu pop-up Primary Key, selecione a varivel da pgina que contm a identificao do registro a ser excludo. A varivel criada pelo campo oculto do formulrio. Ela tem o mesmo nome que o atributo name (nome) do campo oculto e pode ser um parmetro de URL ou de formulrio, dependendo do atributo method (mtodo) do formulrio. Em nosso exemplo, a varivel em questo uma varivel de formulrio chamada hiddenRecID.
8.
Na caixa de texto After Deleting, Go To (Aps a excluso, ir para), especifique a pgina a ser aberta depois que o registro for excludo da tabela do banco de dados. possvel especificar uma pgina que contenha uma breve mensagem de xito para o usurio ou uma que contenha os registros restantes, para que o usurio possa verificar se o registro foi excludo. A caixa de dilogo Delete Record preenchida dever ter a aparncia a seguir.
9.
Clique em OK e salve o trabalho.
Faa o upload das pginas para o servidor da Web, abra um navegador e procure um registro a ser excludo. Ao clicar em um link Delete (Excluir) na pgina de resultados, ser exibida a pgina de confirmao. Clique no boto Confirm para excluir o registro do banco de dados. Para verificar se o registro foi excludo, abra novamente a pgina com os links Delete. O registro no dever mais ser exibido na lista.
NO T A 964
Clique em Refresh (Atualizar) se o registro continuar sendo exibido na pgina.
Utilizar os procedimentos armazenados para modificar bancos de dados (ColdFusion)

possvel utilizar um procedimento armazenado para modificar um banco de dados. Um procedimento armazenado um item de banco de dados reutilizvel que executa algumas operaes no banco de dados.
NO TA
Os bancos de dados mySQL e Microsoft Access no 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 documentao do banco de dados e um bom manual sobre Transact-SQL.
Para adicionar um procedimento armazenado a uma pgina do ColdFusion:
1. 2.
No Dreamweaver, abra a pgina onde o procedimento armazenado ser executado. No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com o sinal de adio (+) e selecione Stored Procedure (Procedimento armazenado). Ser exibida a caixa de dilogo Stored Procedure.
Utilizar os procedimentos armazenados para modificar bancos de dados (ColdFusion)
965
3.
4.
Aps fechar a caixa de dilogo Stored Procedure, o Dreamweaver insere o cdigo ColdFusion na pgina de modo que, ao ser executado no servidor, ele chamar um procedimento armazenado no banco de dados. O procedimento armazenado, por sua vez, executa uma operao de banco de dados, como inserir um registro. Se o procedimento armazenado exigir parmetros, possvel criar uma pgina para reunir os valores de parmetros e os submeter em seguida pgina com o procedimento armazenado. Por exemplo: possvel criar uma pgina que utiliza parmetros da URL ou formulrio HTML para coletar valores de parmetro de usurios. Tpicos relacionados Procedimentos armazenados na pgina 913
Criar pginas que restrinjam o acesso ao site (ColdFusion, ASP, JSP, PHP)
O Dreamweaver pode ser utilizado para criar os seguintes tipos de pginas, que restringem o acesso a um site:
Pginas que requerem o registro dos usurios ao visitarem o site pela primeira vez (consulte Criar uma pgina de registro na pgina 967) Pginas que permitem aos usurios registrados conectar-se ao site (consulte Criar uma pgina de acesso (login) na pgina 971) Pginas que podem ser visualizadas apenas por usurios autorizados (consulte Criar uma pgina que apenas os usurios autorizados podem acessar na pgina 974)
O mtodo idntico ao utilizado para pginas ColdFusion, ASP, JSP e PHP. Ele no possui comportamentos de servidor de autenticao para pginas ASP.NET. Tpicos relacionados Proteger uma pasta em em seu aplicativo (ColdFusion) na pgina 977
966
Criar uma pgina de registro

O aplicativo da Web pode conter uma pgina que solicita o registro dos usurios na primeira vez que eles visitam o site. A pgina a seguir, por exemplo, solicita o registro dos usurios que visitam o site pela primeira vez.
Uma pgina de registro composta dos seguintes blocos de criao:
Uma tabela de banco de dados para armazenar as informaes de login dos usurios (consulte Armazenar as informaes de acesso dos usurios (login) na pgina 968) Um formulrio HTML em que os usurios podem selecionar um nome de usurio e uma senha (consulte Permitir que os usurios escolham um nome e uma senha na pgina 968) O formulrio tambm pode ser utilizado para obter informaes pessoais dos usurios. Um comportamento de servidor Insert Record (Inserir registro) para atualizar a tabela de banco de dados dos usurios do site (consulte Atualizar a tabela de usurios no banco de dados na pgina 969) Um comportamento de servidor Check New Username (Verificar novo nome de usurio) para garantir que o nome digitado pelo usurio no seja utilizado por outra pessoa (consulte Assegurar que o nome de usurio escolhido exclusivo na pgina 970)
967
Armazenar as informaes de acesso dos usurios (login)

Uma pgina de registro requer uma tabela de banco de dados para armazenar as informaes de login inseridas pelos usurios. Certifique-se de que a tabela de banco de dados contenha uma coluna de nome de usurio e de senha. Se desejar que os usurios que efetuaram login tenham diferentes privilgios de acesso, inclua uma coluna de privilgio de acesso (consulte Armazenar os privilgios de acesso no banco de dados de usurios na pgina 976). Se desejar definir uma senha comum para todos os usurios 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 usurio, como padro. Na maioria dos aplicativos de banco de dados, possvel definir um valor padro para uma coluna sempre que um novo registro for criado. Defina o valor padro da senha. A tabela de banco de dados tambm pode ser utilizada para armazenar outras informaes teis sobre o usurio. A prxima etapa na criao de uma pgina de registro adicionar a ela um formulrio HTML para que os usurios possam escolher um nome de usurio e senha (se aplicvel). Tpicos relacionados Criar uma pgina de registro na pgina 967
Permitir que os usurios escolham um nome e uma senha

O formulrio HTML adicionado pgina de registro para que os usurios possam selecionar um nome de usurio e uma senha (se aplicvel).
Para permitir que os usurios escolham um nome de usurio e uma senha:
1.
Crie uma nova pgina em File (Arquivo) > New (Novo) e defina o layout da pgina de registro utilizando as ferramentas de projeto do Dreamweaver. Adicione um formulrio HTML posicionando o ponto de insero no local em que deseja exibir o formulrio e selecione Form (Formulrio) no menu Insert (Inserir). Um formulrio vazio criado na pgina. Pode ser necessrio ativar Invisible Elements (Elementos invisveis), em View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements, para exibir os limites do formulrio, que so representados por linhas finas vermelhas.
2.
3.
Atribua um nome ao formulrio HTML clicando na tag <form> na parte inferior da janela do documento para selecionar o formulrio. Em seguida, abra o Property inspector (Inspetor de propriedades), em Window (Janela) > Properties (Propriedades), e digite um nome na caixa de texto Form Name (Nome do formulrio).
968
No necessrio especificar um atributo action (ao) ou method (mtodo) para o formulrio, para inform-lo para onde e como sero enviados os dados do registro quando o usurio clicar no boto Submit (Enviar). O comportamento de servidor Insert Record define esses atributos para o usurio (consulte Atualizar a tabela de usurios no banco de dados na pgina 969).
4.
Adicione campos de texto em Insert > Form > Text Field (Campo de texto) para que o usurio possa digitar um nome de usurio e uma senha. O formulrio pode conter tambm outros objetos de formulrio para registrar outros dados pessoais. Devem ser includos identificadores (em forma de texto ou de imagens) ao lado de cada objeto de formulrio para informar aos usurios o que so. Os objetos de formulrio tambm devem ser alinhados, colocando-os em uma tabela HTML. Para obter mais informaes sobre objetos de formulrio, consulte Inserir objetos de formulrio HTML na pgina 892.
5.
A etapa seguinte na criao de uma pgina de registro incluir o comportamento de servidor Insert Record (Inserir registro) para adicionar registros a uma tabela de usurios no banco de dados. Tpicos relacionados Criar uma pgina de registro na pgina 967
Atualizar a tabela de usurios no banco de dados

Voc deve adicionar um comportamento de servidor Insert Record (Inserir registro) pgina de registro para atualizar a tabela de usurios no banco de dados.
Para atualizar a tabela de usurios no banco de dados:
1.
No painel Server Behaviors (Comportamentos de servidor), em Window (Janela) > Server Behaviors, clique no boto com sinal de adio (+) e selecione Insert Record no menu popup. Ser exibida a caixa de dilogo Insert Record. Preencha a caixa de dilogo, especificando a tabela de usurios no banco de dados em que os dados do usurio sero inseridos. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo.
2.
969
3.
Clique em OK.
A etapa final na criao de uma pgina de registro verificar se o nome de usurio no est sendo utilizado por outro usurio registrado. Tpicos relacionados Criar uma pgina de registro na pgina 967
Assegurar que o nome de usurio escolhido exclusivo

Adicione um comportamento de servidor para assegurar que o nome de usurio digitado no seja utilizado por outro usurio registrado.
Para assegurar que o nome de usurio escolhido seja exclusivo:
1.
No painel Server Behaviors (Comportamentos de servidor), em Window (Janela) > Server Behaviors, clique no boto com sinal de adio (+) e selecione User Authentication (Autenticao de usurio) > Check New Username (Verificar o novo nome de usurio) no menu pop-up. Ser exibida a caixa de dilogo Check New Username. Preencha a caixa de dilogo. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
2.
3.
O Dreamweaver adiciona um comportamento de servidor pgina de registro, que verifica se o nome de usurio enviado por um visitante exclusivo antes de adicionar as informaes sobre aquele visitante ao banco de dados de usurios registrados. Quando o usurio clica no boto Submit (Enviar) na pgina de registro, o comportamento de servidor compara o nome de usurio digitado com os nomes de usurio armazenados em um banco de dados. Se no for encontrado nenhum nome de usurio correspondente na tabela de banco de dados, o comportamento de servidor continuar normalmente a operao de insero do registro. Se for encontrado um nome de usurio coincidente, o comportamento de servidor cancelar a operao de insero do registro e abrir uma nova pgina (em geral, uma pgina para alertar a pessoa que o nome de usurio j foi utilizado). Tpicos relacionados Criar uma pgina de registro na pgina 967
970
Criar uma pgina de acesso (login)

O aplicativo da Web pode conter uma pgina que permite aos usurios registrados efetuar login no site. A seguinte pgina, por exemplo, solicita aos usurios registrados que efetuem login:
Uma pgina de login composta dos seguintes blocos de criao:
Uma tabela de banco de dados de usurios registrados (consulte Criar uma tabela de banco de dados de usurios registrados na pgina 971) Um formulrio HTML para que os usurios possam digitar um nome de usurio e uma senha (consulte Permitir que os usurios efetuem login na pgina 972). Um comportamento de servidor Log In User (Efetuar login de usurio), para validar o nome de usurio e a senha digitados (consulte Verificar o nome de usurio e a senha na pgina 973)
Uma varivel de sesso, que consiste no nome de usurio seja criada para o usurio quando ele efetuar login com sucesso.
Criar uma tabela de banco de dados de usurios registrados

necessria uma tabela de banco de dados de usurios registrados para verificar se o nome de usurio e a senha digitados na pgina de login so vlidos. Utilize o aplicativo de banco de dados e uma pgina de registro para criar a tabela. Para obter mais informaes, consulte Criar uma pgina de registro na pgina 967. A prxima etapa na criao de uma pgina de login adicionar um formulrio HTML pgina para permitir que os usurios faam login.
971
Tpicos relacionados Criar uma pgina de acesso (login) na pgina 971
Permitir que os usurios efetuem login

Adicione um formulrio HTML pgina para permitir aos usurios efetuar login digitando um nome de usurio e uma senha.
Para permitir que os usurios efetuem login:
1.
Crie uma nova pgina em File (Arquivo) > New (Novo) e defina o layout da pgina de login utilizando as ferramentas de projeto do Dreamweaver. Adicione um formulrio HTML posicionando o ponto de insero no local em que deseja exibir o formulrio e selecionando Form (Formulrio) no menu Insert (Inserir). Um formulrio vazio criado na pgina. Pode ser necessrio ativar Invisible Elements (Elementos invisveis), em View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements, para exibir os limites do formulrio, que so representados por linhas finas vermelhas.
2.
3.
Atribua um nome ao formulrio HTML clicando na tag <form> na parte inferior da janela do documento para selecionar o formulrio. Em seguida, abra o Property inspector (Inspetor de propriedades), em Window (Janela) > Properties (Propriedades), e digite um nome na caixa de texto Form Name (Nome do formulrio). No necessrio especificar um atributo action (ao) ou method (mtodo) para o formulrio, para inform-lo para onde e como sero enviados os dados do registro quando o usurio clicar no boto Submit (Enviar). O comportamento de servidor Log In User (Efetuar login de usurio) define esses atributos para voc (consulte Verificar o nome de usurio e a senha na pgina 973).
4.
Adicione um campo de texto de nome de usurio e de senha em Insert (Inserir) > Form (Formulrio) > Text Field (Campo de texto) ao formulrio. 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.
5.
A prxima etapa na criao de uma pgina de login adicionar o comportamento de servidor Log In User para validar o nome de usurio e a senha digitados.
972
Tpicos relacionados Criar uma pgina de acesso (login) na pgina 971
Verificar o nome de usurio e a senha

Voc deve adicionar um comportamento de servidor Log In User (Efetuar login de usurio) pgina de login para validar o nome do usurio e a senha digitados.
Para verificar o nome de usurio e a senha:
1.
No painel Server Behaviors (Comportamentos de servidor), em Window (Janela) > Server Behaviors, clique no boto com sinal de adio (+) e selecione User Authentication (Autenticao de usurio) > Log In User no menu pop-up. Ser exibida a caixa de dilogo Log In User. Preencha a caixa de dilogo. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
2.
3.
O Dreamweaver adiciona um comportamento de servidor pgina de login que verifica se o nome de usurio e a senha digitada pelo visitante so vlidos. Quando um usurio clica no boto Submit (Enviar), na pgina de login, o comportamento de servidor Log In User compara os valores digitados pelo usurio com aqueles dos usurios registrados. Se os valores forem coincidentes, o comportamento de servidor abrir uma pgina (normalmente, a pgina inicial do site). Se os valores no corresponderem, o comportamento de servidor abrir outra pgina (em geral, uma pgina alertando o usurio de a tentativa de login falhou). Tpicos relacionados Criar uma pgina de acesso (login) na pgina 971
973
Criar uma pgina que apenas os usurios autorizados podem acessar

O aplicativo da Web pode conter uma pgina protegida, na qual apenas os usurios autorizados podem ter acesso.
N OT A

O Dreamweaver no possui comportamentos de servidor de autenticao para pginas ASP.NET.
Por exemplo: se um usurio tentar ignorar a pgina de login, digitando a URL da pgina protegida em um navegador, ele ser redirecionado para outra pgina. Da mesma forma, se for definido o nvel de autorizao Administrator (Administrador) para uma pgina, somente os usurios com esse privilgio de acesso podero visualiz-la. Se um usurio que efetuou login tentar acessar a pgina protegida sem os privilgios de acesso adequados, ele ser redirecionado para outra pgina. Os nveis de autorizao tambm podem ser utilizados para rever os usurios recmregistrados antes de lhes conceder acesso total ao site. Por exemplo: pode ser conveniente receber o pagamento antes de permitir um acesso de usurio s pginas componentes do site. Para isso, proteja as pginas com um nvel de autorizao membro (Member) e conceda aos usurios recm-registrados apenas os privilgios de visitante (Guest). Aps receber o pagamento do usurio, possvel atualizar os seus privilgios de acesso para membro (na tabela de banco de dados de usurios registrados). Se no forem utilizados os nveis de autorizao, qualquer pgina poder ser protegida no site atravs da incluso de um comportamento de servidor Restrict Access To Page (Restringir acesso pgina). O comportamento de servidor redirecionar para outra pgina qualquer usurio que no tenha efetuado login com xito. Para obter mais informaes, consulte Redirecionar os usurios no autorizados para outra pgina na pgina 975. Se no forem utilizados os nveis de autorizao, qualquer pgina poder ser protegida no site utilizando os seguintes blocos de criao: Um comportamento de servidor Restrict Access To Page para redirecionar os usurios noautorizados para outra pgina (consulte Redirecionar os usurios no autorizados para outra pgina na pgina 975) Uma coluna extra na tabela de banco de dados de usurios para armazenar os privilgios de acesso de cada usurio (consulte Armazenar os privilgios de acesso no banco de dados de usurios na pgina 976)
Sejam ou no utilizados nveis de autorizao, possvel adicionar um link pgina protegida para permitir que o usurio efetue logout e limpe qualquer varivel de sesso. Para obter mais informaes, consulte Efetuar logout de usurios na pgina 976.
974
Redirecionar os usurios no autorizados para outra pgina

Para impedir que usurios no autorizados acessem uma pgina, adicione um comportamento de servidor Restrict Access To Page (Restringir acesso pgina). O comportamento de servidor redirecionar o usurio outra pgina se ele tentar ignorar a pgina de login, digitando a URL de uma pgina protegida em um navegador ou se o usurio tiver efetuado login mas tentar acessar a pgina protegida sem os privilgios de acesso adequados.
NO T A
O comportamento de servidor Restrict Access To Page pode proteger apenas as pginas HTML. Este comportamento no protege outros recursos do site (arquivos de imagem e de udio, por exemplo).
Se desejar definir os mesmos privilgios de acesso a muitas pginas, copie e cole os direitos de acesso de uma pgina para outra.
Para redirecionar os usurios no-autorizados para outra pgina:
1. 2.
Abra a pgina a ser protegida. No painel Server Behaviors (Comportamentos de servidor), em Window (Janela) > Server Behaviors, clique no boto com sinal de adio (+) e selecione User Authentication (Autenticao de usurio) > Restrict Access To Page no menu pop-up. Ser exibida a caixa de dilogo Restrict Access To Page. Preencha a caixa de dilogo. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
3.
4.
O Dreamweaver adiciona um comportamento de servidor pgina que permite apenas aos usurios autorizados visualizar a pgina.
Para copiar e colar os direitos de acesso da pgina em outra pgina no site:
1.
Abra a pgina protegida e selecione o comportamento de servidor Restrict Access To Page, indicado no painel Server Behaviors e no aquele no menu pop-up com sinal de adio (+). Clique no boto de seta, no canto superior direito do painel, e selecione Copy (Copiar) no menu pop-up. O comportamento de servidor Restrict Access To Page ser copiado na rea de transferncia do sistema.
2.
3. 4.
Abra outra pgina a ser protegida utilizando o mesmo procedimento. No painel Server Behaviors (Window > Server Behaviors), clique no boto de seta no canto superior direito e selecione Paste (Colar) no menu pop-up. Repita as etapas 3 e 4 para cada pgina a ser protegida.
5.
975
Tpicos relacionados Armazenar os privilgios de acesso no banco de dados de usurios na pgina 976
Armazenar os privilgios de acesso no banco de dados de usurios

Este bloco de criao requerido apenas quando determinados usurios que efetuaram login necessitarem de privilgios de acesso diferentes. Se os usurios tiverem que efetuar apenas login, no ser preciso armazenar os privilgios de acesso. Para que determinados usurios tenham diferentes privilgios de acesso, verifique se as tabelas de usurios no banco de dados contm uma coluna que especifica os privilgios de acesso de cada usurio (guest, usurio, administrador etc.). Os privilgios de acesso de cada usurio devem ser inseridos no banco de dados pelo administrador do site. Na maioria dos aplicativos de banco de dados, possvel definir um valor padro para uma coluna sempre que um novo registro for criado. Defina o valor padro para o privilgio de acesso mais comum no site por exemplo, Guest (Visitante); em seguida, altere manualmente as excees por exemplo: passe de Guest para Administrator (Administrador). O usurio poder agora acessar todas as pginas do administrador. Verifique se cada usurio no banco de dados tem um privilgio de acesso exclusivo (guest ou administrador, por exemplo) e no diversos privilgios (como usurio, administrador). Se desejar definir vrios privilgios de acesso s suas pginas (por exemplo: todos os visitantes e administradores podem visualizar esta pgina), defina-os para cada pgina, mas no para o nvel de banco de dados. Tpicos relacionados Redirecionar os usurios no autorizados para outra pgina na pgina 975
Efetuar logout de usurios

Quando um usurio efetua login com sucesso, criada uma varivel de sesso que consiste no nome de usurio. Quando o usurio sair do site, possvel remover a varivel de sesso e redirecionar o usurio outra pgina (normalmente, uma pgina com mensagem at logo ou obrigado) utilizando o comportamento de servidor Log Out User (Efetuar logout de usurio). O comportamento de servidor Log Out User poder ser chamado quando o usurio clicar em um link ou quando uma pgina especfica for carregada.
976
Para adicionar um link que permite aos usurios efetuar logout:

1. 2.
Selecione um texto ou uma imagem na pgina para servir de link. No painel Server Behaviors (Comportamentos de servidor), em Window (Janela) > Behaviors, clique no boto com sinal de adio (+) e selecione User Authentication (Autenticao de usurio) > Log Out User. Ser exibida a caixa de dilogo Log Out User. Especifique uma pgina a ser aberta quando o usurio clicar no link. Normalmente, uma pgina de despedida ou de agradecimento. Clique em OK.
3.
4.
Para efetuar logout de um usurio quando uma pgina especfica for carregada:
1.
Abra a pgina que ser carregada no Dreamweaver. Normalmente, uma pgina de despedida ou de agradecimento. No painel Server Behaviors, clique no boto com sinal de adio (+) e selecione User Authentication > Log Out User. Ser exibida a caixa de dilogo Log Out User. Selecione a opo Log Out When Page Loads (Efetuar logout quando a pgina for carregada). Clique em OK.
2.
3.
4.
Tpicos relacionados Criar uma pgina que apenas os usurios autorizados podem acessar na pgina 974
Proteger uma pasta em em seu aplicativo (ColdFusion)

possvel usar o Dreamweaver para criar uma proteo por senha para uma pasta especfica em seu aplicativo ColdFusion, incluindo a pasta raiz do aplicativo. Quando um visitante do site solicitar uma das pginas dessa pasta, o ColdFusion pedir a ele que fornea um nome de usurio e uma senha. O ColdFusion armazena o nome de usurio e a senha em variveis de sesso, de modo que o visitante no precise inseri-los novamente durante a sesso. Esse recurso s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Proteger uma pasta em em seu aplicativo (ColdFusion)
977
Para proteger uma pasta ou site no servidor:

1.
Com um documento Coldfusion aberto no Dreamweaver, selecione Commands (Comandos) > ColdFusion Login Wizard (Assistente de login do ColdFusion). Complete o ColdFusion Login Wizard. Para obter instrues, clique no boto Help (Ajuda) do assistente. O assistente criar os arquivos necessrios para proteger a pasta.
2.
3.
Faa o upload dos novos arquivos para o site remoto. Os arquivos esto localizados na pasta do site local.
Tpicos relacionados Criar pginas que restrinjam o acesso ao site (ColdFusion, ASP, JSP, PHP) na pgina 966
Utilizar componentes ColdFusion

Os componentes ColdFusion (CFCs) permitem encapsular lgicas de aplicao e de negcios em unidades completas e reutilizveis. Os componentes ColdFusion tambm oferecem uma maneira rpida e fcil de se criar servios para a Web. Voc pode usar o Dreamweaver para criar e modificar CFCs. Tambm possvel utilizar o Dreamweaver para construir pginas da Web que utilizam CFCs.
NO T A

Voc somente poder usar os CFCs com o Macromedia ColdFusion MX ou posterior. O ColdFusion 5 no oferece suporte aos CFCs.
Esta seo contm os tpicos a seguir: Sobre os componentes ColdFusion na pgina 979 Criar visualmente um componente no Dreamweaver na pgina 980 Exibir componentes ColdFusion no Dreamweaver na pgina 980 Editar componentes ColdFusion no Dreamweaver na pgina 982 Criar pginas da Web que utilizam componentes ColdFusion na pgina 983 Definir um recordset em um componente ColdFusion na pgina 984 Usar um recordset CFC como a origem de um contedo dinmico na pgina 985
978
Sobre os componentes ColdFusion

Um componente ColdFusion uma unidade de software reutilizvel escrita na linguagem de markups ColdFusion (CFML). Os CFCs ajudam a tornar o cdigo reutilizvel e fcil de manter. Esta seo descreve as vantagens dos CFCs. As sees posteriores descrevem como o Dreamweaver pode ajudar o usurio a trabalhar com CFCs. Para obter informaes sobre tags e sintaxe dos CFCs, consulte a documentao do ColdFusion no Dreamweaver (Help (Ajuda)> Using ColdFusion (Usando 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 so utilizados para lgica de aplicao ou de negcios. Use tags personalizadas para elementos de apresentao, como saudaes, menus dinmicos e assim por diante. Da mesma forma que muitos outros tipos de construo, os sites dinmicos podem normalmente beneficiar-se de componentes intercambiveis. Por exemplo, um site dinmico pode executar a mesma consulta repetidamente ou calcular o preo total de pginas com carrinho de compras e recalcul-lo sempre que item for adicionado. Estas tarefas podem ser controladas por componentes. possvel ajustar, aperfeioar, estender e at mesmo substituir um componente com impacto mnimo sobre o restante do aplicativo. Vamos supor que uma loja on-line calcule as taxas de remessa com base no preo dos pedidos. Para pedidos abaixo de R$ 20, a taxa da remessa R$ 4. Para pedidos entre R$ 20 e R$ 40, a taxa da remessa R$ 6 e assim sucessivamente. possvel inserir a lgica para calcular a taxa da remessa tanto na pgina do carrinho de compras quanto na pgina de resumo do pedido. Mas isso misturaria o cdigo de apresentao HTML e o cdigo de lgica CFML e, normalmente, tornaria o cdigo difcil de manter e reutilizar. Neste caso, recomenda-se criar um componente ColdFusion de denominado Pricing (Clculo de preo), que possui, entre outras coisas, uma funo chamada ShippingCharge (Taxa de remessa). Esta funo toma um preo como argumento e retorna uma taxa de remessa. Por exemplo, se o valor do argumento for 32,80, a funo retorna o valor 6. Tanto na pgina de carrinho de compras como na pgina de resumo do pedido, possvel inserir uma tag especial para chamar a funo ShippingCharge. Quando a pgina solicitada, a funo ativada e uma taxa de remessa retornada para a pgina. Em seguida, a loja anuncia uma promoo especial: remessa grtis para todos os pedidos acima de R$ 100. A mudana feita nas taxas de remessa em um nico local, na funo ShippingCharge do componente Pricing, e todas as pginas que utilizam a funo obtm automaticamente as taxas de remessa exatas.
979
Criar visualmente um componente no Dreamweaver

possvel utilizar o Dreamweaver para definir visualmente um componente ColdFusion e suas funes. O Dreamweaver cria um arquivo .cfc e insere as tags CFML necessrias.
NO T A
Dependendo do componente, talvez voc tenha de completar algum cdigo manualmente.
Para criar visualmente um componente ColdFusion:

1. 2.
Abra uma pgina ColdFusion no Dreamweaver. No painel Components (Componentes), em Window (Janela) > Components, selecione CF Components (Componentes CF) no menu pop-up. No painel Components, clique no boto de adio (+). A caixa de dilogo Create Component (Criar componente) exibida. Preencha a caixa de dilogo e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
3.
4.
O Dreamweaver grava um arquivo .cfc e o salva na pasta especificada. O novo componente tambm aparece no painel Components, aps voc clicar em Refresh (Atualizar). Para remover um componente, necessrio excluir manualmente o arquivo .cfc do servidor. Tpicos relacionados Sobre os componentes ColdFusion na pgina 979

Editar componentes ColdFusion no Dreamweaver na pgina 982 Criar pginas da Web que utilizam componentes ColdFusion na pgina 983
Exibir componentes ColdFusion no Dreamweaver

De modo geral, o Dreamweaver oferece uma maneira de examinar visualmente os CFCs localizados na pasta de seu site ou no servidor. Ele l os arquivos .cfc localizados no servidor e exibe as informaes referentes a eles de maneira hierrquica, de fcil navegao, no painel Components (Componentes). O Dreamweaver procura pelos componentes no seu servidor de teste (consulte Especificar onde as pginas dinmicas podem ser processadas na pgina 667). Se voc criar novos CFCs ou fizer alteraes nos CFCs existentes, certifique-se de fazer o upload dos arquivos CFC para o servidor de teste, de modo que eles sejam refletidos de maneira precisa no painel Components.
980
Se desejar exibir os componentes localizados em outro servidor, modifique as configuraes do servidor de teste. Voc pode exibir qualquer uma das seguintes informaes sobre seus componentes CF:

Listar todos os componentes ColdFusion definidos no servidor. Se estiver executando ColdFusion MX 7 ou posterior, filtrar a lista de modo a mostrar apenas os CFCs localizados na sua pasta do site. Explorar as funes e argumentos de cada componente Inspecionar as propriedades de funes que funcionam como servios da Web
Para exibir os componentes ColdFusion no Dreamweaver:

1. 2.
Abra qualquer pgina ColdFusion no Dreamweaver. No painel Components (Componentes), em Window (Janela) > Components, selecione CF Components (Componentes CF) no menu pop-up. Clique no boto Refresh (Atualizar) no painel para recuperar os componentes. O Dreamweaver exibe os pacotes de componentes no servidor. Um pacote de componentes uma pasta que contm arquivos CFC. Se os pacotes de componentes existentes no forem exibidos, clique no boto Refresh (Atualizar) na barra de ferramentas do painel.
3.
4.
Para exibir apenas os CFCs localizados na sua pasta do site, clique no boto Show Only Current Sites CFCs (Mostrar somente os CCFCs do site atual) na barra de ferramentas do painel Components. Esse recurso somente estar disponvel se voc definir um computador que execute ColdFusion MX 6 ou posterior como servidor de teste do Dreamweaver. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
N OT A
Se o site atual estiver listado em uma pasta virtual no servidor remoto, a filtragem no funcionar.
5.
Clique no boto de adio (+) ao lado do nome do pacote para exibir os componentes armazenados nesse pacote.
Para listar as funes de um componente, clique no boto de adio (+) ao lado do nome do componente. Para visualizar os argumentos de uma funo, bem como o tipo de argumento e se eles so obrigatrios ou opcionais, abra a ramificao da funo na rvore hierrquica. As funes sem argumentos no possuem o cone de adio (+) ao lado delas.
981
Para exibir rapidamente os detalhes de um argumento, funo, componente ou pacote, selecione o item na visualizao da rvore hierrquica e clique no cone Get Details (Obter detalhes) na barra de ferramentas do painel. Tambm possvel clicar com o boto direito do mouse (no Windows), ou manter a tecla Control pressionada e clicar (no Macintosh), no item e selecionar Get Details no menu pop-up. O Dreamweaver exibir os detalhes sobre o item em uma caixa de mensagem.
Tpicos relacionados Sobre os componentes ColdFusion na pgina 979

Criar visualmente um componente no Dreamweaver na pgina 980 Criar pginas da Web que utilizam componentes ColdFusion na pgina 983
Editar componentes ColdFusion no Dreamweaver

O Dreamweaver oferece uma maneira simples e eficaz de editar o cdigo dos componentes ColdFusion definidos para o seu site. Por exemplo, possvel adicionar, alterar ou excluir qualquer funo de um componente sem sair do Dreamweaver. Para utilizar este recurso, o ambiente de desenvolvimento deve estar configurado do seguinte modo:

O ColdFusion deve estar sendo executado localmente. Na caixa de dilogo avanada Site Definition (Definio do site) do Dreamweaver, o tipo Access (Acesso), especificado na categoria Testing Server (Servidor de teste) deve estar definido como Local/Network (Local/Rede). Na caixa de dilogo avanada Site Definition, o caminho da pasta raiz local deve ser igual ao caminho da pasta do servidor de teste (por exemplo: c:\Inetpub\wwwroot\cf_projects\myNewApp\). Para verificar e alterar esses caminhos, selecione Site > Edit Sites (Editar sites). O componente deve estar armazenado na pasta do site local ou em qualquer subpasta em seu disco rgido.
Abra qualquer pgina do ColdFusion no Dreamweaver e exiba os componentes no painel Components. Para exibir os componentes, abra o painel Components (Componentes) a partir da seleo de Window (Janela)> Components. Em seguida, selecione CF Components (Componentes CF) no menu pop-up e clique no boto Refresh (Atualizar) no painel. Como o ColdFusion est sendo executado localmente, o Dreamweaver exibe os pacotes de componentes em seu disco rgido. Para obter mais informaes, consulte Exibir componentes ColdFusion no Dreamweaver na pgina 980.
982
Para editar um componente:

1.
Abra qualquer pgina do ColdFusion no Dreamweaver e exiba os componentes no painel Components (Window > Components). Selecione CF Components no menu pop-up do painel e clique no boto Refresh no painel. Como o ColdFusion est sendo executado localmente, o Dreamweaver exibe os pacotes de componentes em seu disco rgido. Para obter mais informaes, consulte Exibir componentes ColdFusion no Dreamweaver na pgina 980.
2.
3.
Normalmente, para editar um arquivo de componente, abra o pacote e clique duas vezes no nome do componente na rvore hierrquica. O Dreamweaver abrir o arquivo do componente na visualizao do cdigo. Para editar uma funo, propriedade ou argumento especfico, clique duas vezes no item na rvore hierrquica. Efetue as alteraes manualmente na visualizao do cdigo. Salve o arquivo selecionando File (Arquivo) > Save (Salvar).
4.
5. 6.
Para exibir qualquer funo nova no painel Components, atualize a exibio clicando no boto Refresh na barra de ferramentas do painel.
Criar pginas da Web que utilizam componentes ColdFusion

Uma maneira de utilizar uma funo de componente em suas pginas da Web escrever cdigo na pgina que chama a funo quando a pgina solicitada. possvel utilizar o Dreamweaver para ajud-lo a escrever este cdigo.
NO T A
Para conhecer outras maneiras de usar componentes, consulte a documentao do ColdFusion no Dreamweaver (Help [Ajuda] > Using ColdFusion [Como utilizar o ColdFusion]).
Para utilizar componente ColdFusion em uma pgina da Web:

1. 2. 3.
No Dreamweaver, abra a pgina ColdFusion que utilizar a funo do componente. Alterne para a visualizao do cdigo, selecionando View (Exibir) > Code (Cdigo). Abra o painel Components a partir da seleo de Window (Janela)> Components (Componentes) e selecione CF Components (Componentes CF) no menu pop-up do painel. Localize o componente que deseja inserir utilizando um dos mtodos a seguir:
4.
Arraste uma funo da rvore hierrquica para a pgina. O Dreamweaver insere o cdigo na pgina para chamar a funo.
983
Selecione a funo no painel e clique no boto Insert (Inserir) da barra de ferramentas do painel (o boto direita). O Dreamweaver insere o cdigo no ponto de insero da pgina.
5.
Se voc inserir uma funo com argumentos, complete o cdigo de argumento manualmente. Para obter mais informaes, consulte a documentao do ColdFusion no Dreamweaver (Help > Using ColdFusion).
6.
Salve a pgina selecionando File (Arquivo)> Save (Salvar).
Definir um recordset em um componente ColdFusion

O Dreamweaver pode ajud-lo a definir um recordset (tambm conhecido como consulta ColdFusion) em um componente ColdFusion (CFC). Uma vez definido o recordset em um CFC, voc no precisar defini-lo novamente em cada pgina que o utilizar. Voc define o recordset uma vez no CFC e usa o CFC em diferentes pginas. Esse recurso s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para definir um recordset em um componente ColdFusion:
1.
Crie ou abra um arquivo CFC no Dreamweaver. Para obter mais informaes, consulte Criar visualmente um componente no Dreamweaver na pgina 980.
2.
No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+) e selecione Recordset (Query) [Recordset (Consulta)] no menu pop-up. A caixa de dilogo Recordset exibida. Voc pode trabalhar nas caixas de dilogo Recordset simples ou avanadas.
3.
Se preferir usar uma funo existente no CFC, selecione a funo no menu pop-up Function e v para a etapa 6. O recordset definido na funo. Para definir uma nova funo no CFC, clique no boto New Function (Nova funo) e, na caixa de dilogo exibida, digite um nome para a funo e clique em OK. O nome pode conter apenas letras, nmeros e o caractere de sublinhado (_). No possvel utilizar caracteres especiais e espaos.
4.
984
5.
Use a caixa de dilogo Recordset para definir um recordset para a funo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Quando voc terminar, o Dreamweaver incluir uma nova funo em seu CFC que define o recordset. Para editar visualmente o recordset do CFC, clique duas vezes no painel Bindings (Ligaes).
Usar um recordset CFC como a origem de um contedo dinmico

possvel usar um componente ColdFusion (CFC) como fonte de dados de um contedo dinmico de suas pginas se o componente contiver uma funo que define um recordset. Para obter mais informaes sobre a criao desse tipo de CFC, consulte Definir um recordset em um componente ColdFusion na pgina 984. Esse recurso s estar disponvel se voc tiver acesso a um computador que execute ColdFusion MX 7 ou posterior. Para obter mais informaes, consulte Ativar os aprimoramentos do ColdFusion na pgina 916.
Para usar um recordset CFC como fonte de dados de um contedo dinmico:
1. 2.
Abra uma pgina ColdFusion no Dreamweaver. No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+) e selecione Recordset (Query) [Recordset (Consulta)] no menu pop-up. A caixa de dilogo Recordset exibida. Voc pode trabalhar na caixa de dilogo Recordset simples ou avanada.
3.
Clique no boto CFC Query (Consulta CFC). A caixa de dilogo CFC Query exibida. Preencha a caixa de dilogo. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK para fechar a caixa de dilogo CFC Query e, em seguida, clique novamente em OK para adicionar o recordset CFC lista de fontes de contedo disponveis no painel Bindings.
4.
5.
985
6.
Use o painel Bindings para ligar o recordset aos diversos elementos de pgina. Para obter mais informaes, consulte Captulo 34, Adicionar contedo dinmico a pginas da Web, na pgina 781.
Tpicos relacionados Definir um recordset em um componente ColdFusion na pgina 984
986
CAPTULO 41
Criar aplicativos ASP.NET rapidamente

As ferramentas do Macromedia Dreamweaver 8 podem ser utilizadas para criar rapidamente um aplicativo ASP.NET para a Web, com pouca ou nenhuma codificao. Tpicos relacionados Sobre o desenvolvimento rpido de aplicativos (todos os servidores) na pgina 909
41
Criar formulrios ASP.NET

possvel criar formulrios ASP.NET no ambiente de criao do Dreamweaver e, em seguida, modificar as propriedades dos controles do formulrio sem ter de alterar o cdigo manualmente. Tpicos relacionados Criar formulrios na pgina 885
Inserir objetos de formulrio HTML dinmicos na pgina 898
Adicionar controles de formulrio ASP.NET a uma pgina

Voc pode usar o ambiente de design visual do Dreamweaver para adicionar controles de formulrio ASP.NET sua pgina.
Para adicionar um controle de formulrio ASP.NET sua pgina:
1.
Abra uma pgina ASP.NET na visualizao do projeto, a partir da seleo de View (Exibir) > Design (Projeto). Posicione o ponto de insero no local onde deseja exibir o controle de formulrio na pgina.
2.
987
Os controles de formulrio devem ser inseridos em um formulrio que tenha um atributo runat='server' na tag. Se a pgina no tiver um formulrio, o Dreamweaver criar automaticamente um formulrio com um atributo runat='server' quando voc inserir o primeiro controle de formulrio ASP.NET. Se a pgina tiver um formulrio HTML, o Dreamweaver adicionar automaticamente o atributo runat='server' tag de formulrio existente quando voc inserir o primeiro controle de formulrio.
3.
Na categoria ASP.NET da barra Insert (Inserir), selecione o cone do controle de formulrio. Preencha a caixa de dilogo do controle. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. Para obter mais informaes sobre as propriedades de cada controle, consulte a documentao no site da Microsoft, em http://msdn.microsoft.com/library/en-us/cpgenref/html/ cpconaspsyntaxforwebcontrols.asp.
4.
Aps ter concludo, o Dreamweaver insere o controle de formulrio na sua pgina. Se desejar, clique no controle na pgina e altere qualquer uma das propriedades no Property inspector (Inspetor de propriedades).
Definir as propriedades de controles de formulrio ASP.NET

possvel modificar as propriedades de controles de formulrio ASP.NET no ambiente de criao.
Para modificar as propriedades de um controle de formulrio ASP.NET no ambiente de criao:
1.
Na visualizao do projeto, selecione o controle de formulrio na pgina. O Property inspector (Inspetor de propriedades) exibe propriedades do controle. Modifique as propriedades do controle nesse Property inspector. Para obter mais informaes sobre as propriedades de cada controle, consulte a documentao no site da Microsoft, em http://msdn.microsoft.com/library/en-us/ cpgenref/html/cpconaspsyntaxforwebcontrols.asp.
2.
3.
Para definir mais propriedades, clique no boto Tag Editor (Editor de tags) no Property inspector e defina as propriedades no editor de tags que for exibido. O editor de tags permite definir um nmero maior de propriedades, incluindo eventos.
988
Captulo 41: Criar aplicativos ASP.NET rapidamente
Criar um menu ASP.NET dinmico

Voc pode preencher dinamicamente um controle de menu ASP.NET, como DropDownList (Lista suspensa) ou ListBox (Caixa de lista) com entradas de um banco de dados. Antes de comear, voc deve definir um DataSet (Conjunto de dados) ou outra fonte de contedo dinmico para o menu. Para obter mais informaes, consulte Definir um recordset na pgina 765.
Para inserir um menu dinmico em uma pgina ASP.NET:
1. 2.
Abra a pgina ASP.NET e posicione o ponto de insero onde deseja exibir o menu. Selecione Insert (Inserir) > ASP.NET Objects (Objetos ASP.NET). Em seguida, selecione asp:DropDownList ou asp:ListBox. Ser exibida a caixa de dilogo do controle de formulrio. Preencha a caixa de dilogo e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
3.
O Dreamweaver insere o controle de formulrio no ponto de insero na pgina. Se voc no tiver inserido um formulrio, o Dreamweaver inserir um formulrio que contenha o atributo runat="server". Tpicos relacionados Definir as propriedades de controles de formulrio ASP.NET na pgina 988
Tornar dinmico um menu ASP.NET existente na pgina 989
Tornar dinmico um menu ASP.NET existente

possvel tornar dinmico um objeto de menu ASP.NET j existente. Os objetos de menu ASP.NET contm os controles DropDownList (Lista suspensa) e ListBox (Caixa de lista). Antes de comear, voc deve definir um DataSet (Conjunto de dados) ou outra fonte de contedo dinmico para o menu. Para obter mais informaes, consulte Definir um recordset na pgina 765.
Para tornar dinmico um objeto DropDownList ou ListBox existente:
1.
Na visualizao do projeto, selecione o objeto DropDownList ou ListBox que voc deseja tornar dinmico. No Property inspector (Inspetor de propriedades), clique no boto List Items (Itens da lista). Ser exibida a caixa de dilogo List Items.
2.
989
3.
Selecione a opo From Database (Do banco de dados) e preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
Tpicos relacionados Criar um menu ASP.NET dinmico na pgina 989
Tornar dinmicos menus de formulrio HTML existentes na pgina 899
Exibir contedo dinmico em um controle ASP.NET TextBox (Caixa de texto)

possvel exibir contedo dinmico em controles de formulrio ASP.NET TextBox. Antes de comear, voc deve definir um DataSet (Conjunto de dados) ou outra fonte de contedo dinmico para o controle TextBox. Para obter mais informaes, consulte Definir um recordset na pgina 765.
Para tornar dinmico um controle ASP.NET TextBox:
1. 2.
Na visualizao do projeto, selecione o controle TextBox (Caixa de texto) na pgina. No Property inspector (Inspetor de propriedades), clique no cone em forma de raio ao lado da caixa de texto Text (Texto). Ser exibida a caixa de dilogo Dynamic Data (Dados dinmicos). Selecione a coluna do recordset que fornecer um valor ao objeto TextBox. Em seguida, clique em OK.
3.
O controle TextBox exibir o contedo dinmico quando a pgina for visualizada em um navegador. Tpicos relacionados Exibir contedo dinmico em campos de texto HTML na pgina 900
Pr-selecionar dinamicamente controles ASP.NET CheckBox (Caixa de seleo)

possvel permitir que o servidor decida se deve selecionar determinados controles CheckBox (Caixa de seleo) quando a pgina ASP.NET for carregada em um navegador. Antes de comear, voc deve definir um DataSet (Conjunto de dados) ou outra fonte de contedo dinmico para as caixas de seleo. Para obter mais informaes, consulte Definir um recordset na pgina 765. O ideal que a fonte de contedo possua dados booleanos, como Yes/No (Sim/No) ou true/false (verdadeiro/falso).
990
Para pr-selecionar dinamicamente uma caixa de seleo ASP.NET:

1. 2.
Selecione um controle de formulrio CheckBox na pgina ASP.NET. No Property inspector (Inspetor de propriedades), selecione a opo Dynamic (Dinmico). Ser exibida a caixa de dilogo Dynamic CheckBox (Caixa de seleo dinmica). Preencha a caixa de dilogo e clique em OK. Para obter instrues, clique no boto Help da caixa de dilogo.
3.
A caixa de seleo ser exibida selecionada ou no (dependendo dos dados) quando a pgina for carregada em um navegador. Tpicos relacionados Pr-selecionar dinamicamente caixas de seleo HTML na pgina 900
Pr-selecionar dinamicamente um item em um controle ASP.NET RadioButtonList (Lista de boto de opo)

possvel permitir que o servidor decida se deve selecionar um boto de opo em um controle RadioButtonList (Lista de boto de opo) quando a pgina for carregada em um navegador. Antes de comear, voc deve inserir pelo menos um controle ASP.NET RadioButtonList na pgina. Tambm necessrio definir um DataSet (Conjunto de dados) ou outra fonte de contedo dinmico para os botes de opo. Para obter mais informaes, consulte Definir um recordset na pgina 765. O ideal que a fonte de contedo possua dados booleanos, como Yes/No (Sim/No) ou true/false (verdadeiro/falso).
Para pr-selecionar dinamicamente um boto de opo em um controle RadioButtonList:
1. 2.
Na visualizao do projeto, selecione o controle RadioButtonList. No Property inspector (Inspetor de propriedades), clique em List Items (Itens da lista). Ser exibida a caixa de dilogo List Items. Selecione a opo From Database (Do banco de dados) e preencha a caixa de dilogo. Para obter instrues, clique no boto Help da caixa de dilogo.
3.
Tpicos relacionados Pr-selecionar dinamicamente botes de opo HTML na pgina 901
991
Criar controles da WeB DataGrid e DataList do ASP.NET

Os controles DataGrid e DataList do ASP.NET fornecem diversas opes para exibir diferentes tipos de dados (principalmente contedo dinmico de um banco de dados) e simplificam o processo de ligao de fontes de dados aos controles. O Dreamweaver suporta tanto o controle DataGrid como DataList como comportamentos de servidor.
Sobre os controles DataGrid e DataList do ASP.NET

Os controles DataGrid e DataList do ASP.NET fornecem diversas opes para exibir diferentes tipos de dados (principalmente contedo dinmico de um banco de dados) e simplificam o processo de ligao 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: cria uma grade com diversas colunas ligadas por dados. Este controle permite definir vrios tipos de colunas, tanto para definir o layout do contedo da grade quanto para adicionar funcionalidades especficas (colunas de boto de edio, colunas de hyperlink e assim por diante).
DataList: exibe itens de uma fonte de dados utilizando modelos. possvel personalizar a aparncia do controle manipulando os modelos que compem seus diferentes componentes. DataGrid:
Tpicos relacionados Adicionar uma DataGrid do ASP.NET pgina na pgina 994

Adicionar um DataList do ASP.NET a sua pgina na pgina 995 Modificar um objeto DataGrid ou DataList na pgina 996
992
Usar o controle da Web DataGrid do ASP.NET

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 diferentes tipos de coluna (colunas heterogneas) para definir o layout do contedo das clulas. Essas colunas incluem colunas ligadas, colunas de botes e colunas de modelos, entre outras. Alm disso, o DataGrid suporta a funcionalidade interativa como comandos, edio e ordenao de colunas. Os tipos de colunas disponveis no DataGrid so mostrados na tabela a seguir:
Tipo de coluna DataGrid
Simple Data Field (Campo de dados simples) Free Form (Formulrio livre)
Descrio
Denominada coluna ligada no ASP.NET, a coluna Simple Data Field permite especificar o campo de fonte de dados que deve ser exibido e o formato de dados que o campo utilizar com uma expresso de formatao .NET. Denominada coluna de modelo no ASP.NET, a coluna Free Form permite criar combinaes de texto HTML e controles de servidor para criar um layout personalizado para a coluna. Os controles de uma coluna de formulrio livre podem ser ligados por dados. As colunas Free Form oferecem maior flexibilidade na definio do layout e funcionalidade do contedo da grade, pois possvel ter controle total sobre a exibio dos dados e o que acontece quando os usurios interagem com as linhas da grade. A coluna Hyperlink exibe informaes em forma de links de hipertexto. Um uso comum exibir os dados (como nmero do cliente ou nome do produto) como um hyperlink no qual os usurios podem clicar a fim de navegar para uma pgina separada fornecendo detalhes sobre aquele item. Conhecida como Edit Command Column (Coluna comando Editar) no ASP.NET a coluna Edit, Update, Cancel Buttons permite aos usurios efetuar edies das informaes do DataGrid no local. Para isso, crie uma coluna Edit, Update, Cancel (Editar, Atualizar, Cancelar). Durante a execuo, esta coluna exibe um boto denominado Edit. Quando o usurio clica no boto Edit , os dados da linha so exibidos em controles editveis como caixas de texto e o boto Edit substitudo pelo botes Update e Cancel. O boto Delete permite que um usurio remova uma linha individual clicando no boto.
Hyperlink
Botes Edit, Update, Cancel
Delete Button (Boto Excluir)
993
Antes de inserir o comportamento de servidor DataGrid, preciso definir um DataSet (conhecido por outros tipos de documentos como recordset) para o DataGrid. Para obter mais informaes, consulte Recordsets na pgina 760. Para saber mais sobre o controle DataGrid e sobre como utiliz-lo para formatar dados dinmicos, visite o site da Microsoft em http://msdn.microsoft.com/library/en-us/cpgenref/ html/cpcondatagridwebservercontrol.asp. Tpicos relacionados Sobre os controles DataGrid e DataList do ASP.NET na pgina 992

Adicionar uma DataGrid do ASP.NET pgina na pgina 994 Adicionar um DataList do ASP.NET a sua pgina na pgina 995 Modificar um objeto DataGrid ou DataList na pgina 996
Adicionar uma DataGrid do ASP.NET pgina

Os controles DataGrid permitem que voc formate e exiba dados dinmicos como grades multicolunadas que so apresentadas em tabelas. Para obter mais informaes sobre DataGrids e os tipos de controle de formatao que eles fornecem, consulte Sobre os controles DataGrid e DataList do ASP.NET na pgina 992.
N OT A
Antes de inserir o comportamento de servidor DataGrid, preciso definir um DataSet (conhecido por outros tipos de documentos como recordset) para o DataGrid. Para obter mais informaes, consulte Recordsets na pgina 760.
Para adicionar um objeto DataGrid a uma pgina:

1.
Abra o painel Server Behaviors (Comportamentos de servidor), em Window > Server Behaviors, clique no boto de adio (+) e selecione DataGrid.
994
Ser exibida a caixa de dilogo DataGrid.
2.
Preencha a caixa de dilogo DataGrid e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
Na janela do documento, o DataGrid ser exibido com um contorno cinza com guia. Na janela Live Data (Dados ativos), em View > Live Data), o contorno cinza desaparece e os alocadores e espao do objeto so substitudos pelo DataGrid especificado. Tpicos relacionados Sobre os controles DataGrid e DataList do ASP.NET na pgina 992
Modificar um objeto DataGrid ou DataList na pgina 996
Adicionar um DataList do ASP.NET a sua pgina

O comportamento de servidor DataList do Dreamweaver permite inserir o controle DataList do ASP.NET em uma pgina.
N OT A
Antes de inserir o comportamento de servidor DataList, voc deve definir um DataSet (conhecido por outros tipos de documentos como recordset ) para o DataList. Para obter mais informaes, consulte Recordsets na pgina 760.
Para adicionar um objeto DataList pgina:

1.
Abra o painel Server Behaviors (Window > Server Behaviors), clique no boto de adio (+) e selecione DataList.
995
A caixa de dilogo DataList exibida.
2.
Preencha a caixa de dilogo DataList e clique em OK. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
Na janela do documento, o DataList ser exibido com um contorno cinza com guia. Na janela Live Data (View > Live Data), o contorno cinza desaparece e os alocador de espao do objeto substitudo pelo DataList especificado.
Modificar um objeto DataGrid ou DataList

Voc poder sempre modificar os objetos DataGrid e DataList para adequar sua pgina s necessidades do desenho.
Para modificar um objeto DataGrid e DataList:
Na visualizao do projeto, clique no cone localizado no canto superior esquerdo do DataGrid ou do DataList para alternar para o modo de edio e, em seguida, adicione ou modifique o contedo das regies exibidas com guias.
N O TA
Tambm possvel arrastar fontes de contedo dinmico do painel Bindings (Ligaes) para uma regio com guia.
996
Na visualizao do projeto, selecione o objeto e utilize o Property inspector (Inspetor de propriedades) para modificar seus atributos. Clique duas vezes no objeto no painel Server Behaviors (Comportamentos de servidor) e modifique suas propriedades na caixa de dilogo exibida. Na visualizao de cdigo, selecione DataGrid ou DataList na pgina e utilize a caixa de dilogo da tag para alterar seus atributos.
Criar pginas-mestras/detalhes (ASP.NET)

Com o Dreamweaver, possvel criar conjuntos de pginas que apresentam informaes em dois nveis de detalhe: uma pgina mestra que relaciona registros e uma pgina de detalhes que apresenta mais detalhes sobre cada registro. Esta seo descreve como criar esses tipos de pgina-mestra/detalhes. Tpicos relacionados Aprimorar a funcionalidade de uma pgina dinmica na pgina 739
Criar a pgina mestra (ASP.NET)

Esta seo descreve como criar uma pgina mestra que contenha registros de banco de dados. Com o ASP.NET possvel utilizar uma DataGrid (Grade de dados) para discriminar os registros da pgina. Antes de iniciar, certifique-se de definir uma conexo de banco de dados para o site. Para obter mais informaes, consulte Captulo 25, Conexes de banco de dados para desenvolvedores de ASP.NET, na pgina 673.
1.
Crie uma nova pgina ASP.NET. Selecione File (Arquivo) > New (Novo) > Dynamic (Dinmico), selecione um formato de pgina ASP.NET e clique em Create (Criar). Uma pgina .aspx em branco aberta no Dreamweaver.
2.
Defina um DataSet (Conjunto de dados) para a pgina.
997
No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto de adio (+), selecione DataSet (Query) [Conjunto de dados (Consulta)] e preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Para codificar a sua prpria instruo SQL, clique no boto Advanced (Avanado) para abrir a caixa de dilogo avanada DataSet (Conjunto de dados). Certifique-se de que o DataSet contenha todas as colunas de tabela necessrias para criar a pgina mestra. Ele deve incluir tambm a coluna de tabela que contm a chave exclusiva de cada registro ou seja, a coluna de identificao do registro. Normalmente, o DataSet da pgina mestra extrai algumas colunas de uma tabela de banco de dados, enquanto o da pgina de detalhes extrai mais colunas da mesma tabela para fornecer mais detalhes. O DataSet pode ser definido em tempo de execuo pelo usurio. Para obter mais informaes, consulte Criar uma pgina de busca do banco de dados (ASP.NET) na pgina 1004.
3.
Crie uma DataGrid na pgina. No painel Server Behaviors (Comportamentos de servidor), em Window > Server Behaviors, clique no boto com sinal de adio (+), selecione DataGrid e preencha a caixa de dilogo DataGrid (Grade de dados). Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Por enquanto, aceite o tipo de coluna padro de Simple Data Field (Campo de dados simples) para cada coluna da DataGrid. Na prxima seo voc alterar o tipo de uma coluna para Hyperlink (Hiperlink) (consulte Abrir uma pgina de detalhes e repassar uma identificao de registro (ASP.NET) na pgina 999).
998
Este o exemplo de uma caixa de dilogo DataGrid que define trs colunas.
A prxima etapa na criao de pginas-mestras/detalhes criar links que abram a pgina de detalhes e repassem a identificao do registro selecionado pelo usurio.
Abrir uma pgina de detalhes e repassar uma identificao de registro (ASP.NET)

Depois de adicionar uma DataGrid pgina mestra , ser necessrio criar links que abram a pgina de detalhes e repassem a identificao do registro selecionado pelo usurio. A pgina de detalhes usar essa identificao para localizar o registro solicitado no banco de dados e exibilo. A identificao de registro repassada para a pgina de detalhes em um parmetro da URL. Para obter mais informaes, consulte Parmetros da URL na pgina 749. Em uma DataGrid, crie esses links transformando uma coluna da DataGrid em uma coluna de hiperlink e definindo seus atributos, conforme descrito nesta seo.
Para abrir a pgina de detalhes e repassar um parmetro da URL que contenha a identificao do registro clicado pelo usurio:
1.
Abra a caixa de dilogo DataGrid criada na seo anterior. Para abri-la, clique duas vezes em DataGrid no painel Server Behaviors (Comportamentos de servidor), em Window (Janela) > Server Behaviors. Ser aberta a caixa de dilogo DataGrid.
999
2.
Na caixa Columns (Colunas), selecione a coluna qual deseja aplicar links.
3.
Clique no boto Change Column Type (Alterar tipo de coluna) e selecione Hyperlink (Hiperlink) no menu pop-up. Ser exibida a caixa de dilogo Hyperlink Column (Coluna de hiperlink).
4.
Na rea Hyperlink Text (Texto de hiperlink), especifique o texto a ser exibido na coluna de hiperlink. Para criar um link genrico como Details (Detalhes) para cada linha da DataGrid, selecione a opo Static Text (Texto esttico) e digite o texto do link. Todas as linhas da DataGrid exibiro o mesmo texto (como Details) na coluna de hiperlink. Para adicionar links aos dados exibidos na coluna, selecione a opo Data Field (Campo de dados) e um campo de dados no DataSet. O campo de dados fornece o texto para os links da coluna de hiperlink. No exemplo a seguir, todas as linhas da DataGrid exibiro um nome de local.
5.
Na rea Linked Page (Pgina vinculada), crie a URL a ser aplicada ao texto na coluna de hiperlink.
1000 Captulo 41: Criar aplicativos ASP.NET rapidamente
Alm de abrir a pgina de detalhes, a URL tambm deve identificar de modo exclusivo o registro a ser exibido nessa pgina. Para identificar o registro a ser exibido na pgina de detalhes, selecione a opo Data Field e um campo no DataSet que identifique cada registro de modo exclusivo. Na maioria dos casos, o campo consistir em um nmero de identificao de registro. No exemplo a seguir, o campo consiste em cdigos de local exclusivos.
6.
Na caixa de texto Format String (Formatar a seqncia de caracteres) na rea Linked Page, clique no boto Browse (Procurar). Depois localize e selecione a pgina de detalhes. O Dreamweaver cria uma URL para a pgina de detalhes contendo um parmetro da URL que identifica o registro a ser exibido pela pgina de detalhes. Anote o nome do parmetro da URL, pois ele ser utilizado na pgina de detalhes posteriormente. Por exemplo, se locationDetail.aspx for selecionada como a pgina de detalhes, o Dreamweaver criar a seguinte URL:
Nesse caso, o Dreamweaver cria um parmetro de URL denominado CODE. O Dreamweaver copia o nome do campo de dados, mas no obrigatrio usar esse nome. possvel alter-lo e torn-lo mais descritivo, como recordID, como no exemplo a seguir.
O elemento {0} um alocador de espao que corresponde ao valor do campo de dados. Quando a pgina for executada, os valores do campo CODE (Cdigo) do DataSet sero inseridos nas linhas correspondentes da DataGrid. Por exemplo, se o local de locao Canberra, na Austrlia, apresentar o cdigo CBR, ser utilizada a seguinte URL na linha Canberra do DataGrid:
locationDetail.aspx?recordID=CBR
1001
7.
Clique em OK para fechar a caixa de dilogo Hyperlink (Hiperlink). Em seguida, clique em OK para fechar a caixa de dilogo DataGrid. O Dreamweaver atualizar a DataGrid na pgina.
A prxima etapa na criao de pginas-mestras/detalhes modificar a pgina de detalhes, de modo que ela localize no banco de dados o registro solicitado e o exiba na pgina.
Localizar e exibir o registro solicitado na pgina de detalhes (ASP.NET)

Aps completar a pgina mestra ), ser necessrio localizar o registro solicitado no banco de dados e exibi-lo na pgina de detalhes. O procedimento consiste em definir um DataSet (Conjunto de dados) na pgina de detalhes para conter um nico registro (o registro solicitado pela pgina mestra) e ligar as colunas do DataSet pgina.
1.
Alterne para a pgina de detalhes. Se no existir uma pgina, selecione File (Arquivo) > New (Novo) > Dynamic (Dinmico), selecione um formato de pgina ASP.NET e clique em Create (Criar). Uma pgina .aspx em branco aberta no Dreamweaver.
2.
No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+) e selecione DataSet (Query) [Conjunto de dados (Consulta)] no menu popup. Ser exibida a caixa de dilogo simples DataSet. Se em vez dela for exibida a caixa de dilogo DataSet avanada, clique em Simple (Simples) para alternar para a caixa de dilogo DataSet simples.
3.
Atribua um nome ao DataSet e selecione uma conexo e uma tabela de banco de dados que fornecer dados ao DataSet. Na rea Columns (Colunas), selecione as colunas da tabela a serem includas no DataSet. O DataSet pode ser idntico ou diferente do DataSet da pgina mestra. Normalmente, o DataSet de uma pgina de detalhes possui mais colunas para exibir mais detalhes. Se os DataSets forem diferentes, certifique-se de que o DataSet da pgina de detalhes contenha, no mnimo, uma coluna em comum com o DataSet da pgina mestra. Normalmente, a coluna em comum a coluna de identificao do registro, mas pode ser tambm o campo de juno das tabelas relacionadas. Para incluir apenas algumas das colunas da tabela no DataSet, clique na opo Selected (Selecionado) e escolha as colunas desejadas pressionando a tecla Control (no Windows) ou Command (no Macintosh) enquanto clica em cada uma delas na lista.
4.
1002
5.
No primeiro menu pop-up da rea Filter, selecione a coluna do DataSet que contm os valores correspondentes ao valor do parmetro da URL repassado pela pgina mestra. Por exemplo: se o parmetro da URL contiver um nmero de identificao de registro, selecione a coluna que contm os nmeros de identificao de registro. No exemplo apresentado na seo anterior, a coluna do DataSet denominada CODE (CDIGO) contm os valores correspondentes ao valor do parmetro da URL repassado pela pgina mestra.
Selecione o sinal de igual (caso ainda no esteja selecionado) no menu pop-up ao lado do primeiro menu. Selecione URL Parameter (Parmetro da URL) no terceiro menu pop-up. A pgina mestra utiliza um parmetro da URL para repassar informaes para a pgina de detalhes.
Digite o nome do parmetro da URL repassado pela pgina mestra na quarta caixa. Por exemplo, se a URL utilizada pela pgina mestra para abrir a pgina de detalhes tiver includo o sufixo locationDetail.aspx?recordID=CBR, digite recordID.
A caixa de dilogo DataSet dever ter a seguinte aparncia:
6.
Clique em OK. O DataSet exibido no painel Bindings.
1003
7.
Ligue as colunas do DataSet pgina de detalhes selecionando-as no painel Bindings, em Window > Bindings e arrastando-as at a pgina. Para obter mais informaes, consulte Tornar dinmico o texto na pgina 783.
A pgina mestra/detalhes ASP.NET definida est concluda. Aps a criao das pginas-mestras/detalhes, possvel usar o painel Server Behaviors (Window > Server Behaviors) para modificar os vrios blocos de criao.
Criar uma pgina de busca do banco de dados (ASP.NET)

O Dreamweaver pode ser utilizado para criar uma pgina para fazer buscas em um banco de dados e exibir os resultados em uma DataGrid. Esta seo descreve as etapas para criar uma pgina de busca do banco de dados:

Adicionar os controles de busca (ASP.NET) na pgina 1004 Fazer buscas com apenas um parmetro de busca (ASP.NET) na pgina 1005 Fazer uma busca com diversos parmetros de busca (ASP.NET) na pgina 1007 Exibir os resultados em uma DataGrid na pgina 1008 Ocultar a DataGrid (Grade de dados) na primeira vez em que a pgina for carregada na pgina 1009 Criar uma pgina de detalhes (ASP.NET) na pgina 1010
Adicionar os controles de busca (ASP.NET)

Normalmente, as pginas de busca na Web contm campos de formulrio, nos quais o usurio digitar os parmetros de busca. Quando o usurio clica em um boto, so exibidos os resultados da busca.
Para adicionar o formulrio de busca pgina:
1.
Abra a pgina de busca e selecione Insert (Inserir) > Form (Formulrio) > Form. Um formulrio vazio criado na pgina. Pode ser necessrio ativar Invisible Elements (Elementos invisveis), em View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements, para exibir os limites do formulrio, que so representados por linhas finas vermelhas.
1004
No Property inspector (Inspetor de propriedades) do formulrio, selecione POST (TRANSMITIR) como atributo Method (Mtodo) do formulrio. No necessrio especificar um atributo Action (Ao) para o formulrio. A pgina ASP.NET ser retransmitida para si mesma, e os resultados da busca sero exibidos na mesma pgina.
2.
Adicione controles de formulrio para que os usurios insiram os parmetros de busca, em Insert > ASP.NET Objects (Objetos ASP.NET). possvel inserir qualquer controle de formulrio ASP.NET, como TextBox (Caixa de texto), CheckBox (Caixa de seleo), RadioButton (Boto de opo), ListBox (Caixa de lista) ou DropDownList (Lista suspensa). Voc pode adicionar quantos controles desejar para auxiliar os usurios a aprimorarem suas buscas. Contudo, lembre-se de que quanto mais parmetros de busca na pgina, mais complexa ser a instruo SQL. Para cada controle, especifique um atributo ID (Identificao), como txtCity (para um controle TextBox) ou lbxCountry (para um controle ListBox). Para obter mais informaes, consulte Adicionar controles de formulrio ASP.NET a uma pgina na pgina 987.
3.
Adicione um boto ASP.NET ao formulrio, em Insert > ASP.NET Objects (Objetos ASP.NET) > asp:Button (Boto asp:). Especifique um atributo ID para o boto, como btnSearch, e um texto para o identificador do boto, como Search.
O formulrio de busca est pronto. A prxima etapa na criao da pgina de busca definir um DataSet para localizar e armazenar os resultados da busca.
Fazer buscas com apenas um parmetro de busca (ASP.NET)

Quando o usurio clica no boto Search (Busca) da pgina, o parmetro de busca enviado ao servidor. O servidor processa a solicitao, cria um DataSet (Conjunto de dados) filtrado com base no parmetro, preenche uma DataGrid (Grade de dados) e reenvia a pgina ao navegador. Antes de adicionar a DataGrid, necessrio definir um DataSet que localize e armazene todos os registros que atendam aos critrios de busca.
Para criar um DataSet que conter os resultados da busca:
1.
No painel Bindings (Ligaes), em Window > Bindings, clique no boto com sinal de adio (+) e selecione DataSet (Query) [Conjunto de dados (Consulta)]. Se a caixa de dilogo avanada for exibida, clique no boto Simple (Simples) para abrir a caixa de dilogo simples.
1005
2.
Atribua um nome ao DataSet. Em seguida, escolha uma conexo e uma tabela de banco de dados que contenha os dados que os usurios podero buscar. Na rea Columns (Colunas), clique na opo Selected (Selecionado) e selecione uma coluna de chave (em geral, a coluna de identificao de registro) e as colunas que contm os dados a serem exibidos na DataGrid.
3.
Mantenha a caixa de dilogo DataSet aberta, por enquanto. Ela ser utilizada em seguida para recuperar os parmetros de busca enviados ao servidor e criar um filtro DataSet para excluir registros que no atendam aos parmetros.
Para criar um filtro DataSet:
1.
No primeiro menu pop-up da rea Filter (Filtro), selecione uma coluna na tabela que ser comparada com o parmetro de busca enviado pela pgina de busca. Por exemplo: se o valor enviado pela pgina 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 padro). Esta opo informa que o usurio deseja apenas os registros nos quais a coluna da tabela selecionada for exatamente a mesma que a especificada na pgina de busca. possvel utilizar uma opo menos restritiva, como begins with (comea com) ou contains (contm).
3.
No terceiro menu pop-up, selecione Form Variable (Varivel de formulrio). O parmetro enviado ao servidor por um formulrio, utilizando o mtodo POST (TRANSMITIR).
4.
Na quarta caixa de texto, digite o nome do controle de formulrio que enviou o parmetro de busca ao servidor. possvel obter o nome clicando no controle de formulrio no formulrio (para selecionlo) e verificando a identificao do controle no Property inspector (Inspetor de propriedades).
5.
Se desejar, clique em Test (Testar), digite um valor de teste e clique em OK para se conectar ao banco de dados e criar uma instncia do DataSet. O valor de teste simula o valor que teria sido retornado da pgina de busca. Clique em OK para fechar o DataSet.
6.
Se estiver satisfeito com o DataSet, clique em OK.
1006
O Dreamweaver insere na pgina um cdigo que, ao ser executado no servidor, verificar cada registro na tabela do banco de dados. Se o campo especificado em um registro atender condio de filtragem, o registro ser includo em um DataSet. O cdigo vlido criar um recordset que contm apenas os resultados da busca. A prxima etapa na criao da pgina de busca exibir os resultados da busca em uma DataGrid. Consulte Exibir os resultados em uma DataGrid na pgina 1008.
Fazer uma busca com diversos parmetros de busca (ASP.NET)

Se a pgina de busca enviar mais de um parmetro de busca ao servidor, ser necessrio desenvolver uma consulta SQL e utilizar os parmetros de busca em variveis SQL.
NO TA
Se houver apenas uma condio de busca, a caixa de dilogo simples DataSet (Conjunto de dados) poder ser utilizada para definir o DataSet (consulte Fazer buscas com apenas um parmetro de busca (ASP.NET) na pgina 1005).
Para efetuar uma busca dos registros de um banco de dados utilizando SQL:
1.
Abra a pgina de resultados no Dreamweaver. Em seguida, crie um novo DataSet abrindo o painel Bindings (Ligaes), em Window (Janela) > Bindings, clicando no boto com sinal de adio (+) e selecionando DataSet no menu pop-up. Verifique se a caixa de dilogo avanada DataSet exibida. Se a caixa de dilogo simples for exibida, alterne para a caixa de dilogo simples clicando no boto Advanced (Avanado).
2.
3.
Digite um nome para o DataSet e escolha uma conexo. A conexo deve ocorrer com um banco de dados que contenha os dados a serem pesquisados pelo usurio.
4.
Insira uma instruo Select na rea de texto SQL. Certifique-se de que a instruo inclua uma clusula WHERE com os alocadores de espao ponto de interrogao (?) para os parmetros de busca. O exemplo a seguir contm dois alocadores de espao:
SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE WHERE LASTNAME LIKE ? AND DEPARTMENT LIKE ?
Para obter ajuda sobre a sintaxe de SQL, consulte Apndice B, Manual bsico de SQL, na pgina 1101.
1007
5.
Atribua aos alocadores de espao os valores dos parmetros de busca, clicando no boto com sinal de adio (+) na rea Parameters (Parmetros) e digitando o nome, o tipo e o valor do parmetro. necessrio que os parmetros sejam listados na mesma ordem em que aparecem na instruo SQL. Na caixa de texto Name (Nome), digite qualquer nome de parmetro vlido. O nome no pode conter espaos nem caracteres especiais. No menu pop-up Type (Tipo), selecione um tipo de dados. Por exemplo, se o parmetro for utilizado para conter texto, selecione WChar. Na caixa de texto Value (Valor), digite a varivel de servidor que conter o valor do parmetro. Por exemplo, se o nome do controle de formulrio na pgina de busca for txtCity, uma varivel de servidor denominada Request.Form(txtCity) ser criada e um valor ser armazenado nela. Tambm possvel inserir uma expresso mais completa que especifique um valor padro caso no exista a varivel de servidor. Por exemplo, ao fazer buscas em um banco de dados do Microsoft Access, voc poder utilizar % como valor padro. A expresso a seguir verifica se a varivel de servidor Request.Form("txtCity") existe. Se a varivel existir (ou seja, se for diferente de 'nothing'), a expresso retornar o valor da varivel. Se a varivel no existir, a expresso retornar o valor padro %.
(IIf((Request.Form("txtCity") <> Nothing), Request.Form("txtCity"), "")) + "%"
Para obter mais informaes, consulte uma referncia de linguagem Visual Basic ou C#.
6.
Se desejar, clique em Test (Testar) para criar uma instncia do DataSet utilizando os valores padro das variveis. Os valores padro simulam os valores que seriam retornados da pgina de busca. Clique em OK para fechar o DataSet de teste.
7.
Se estiver satisfeito com o DataSet, clique em OK. O Dreamweaver inserir uma consulta SQL na pgina.
A prxima etapa exibir os resultados da busca em uma DataGrid.
Exibir os resultados em uma DataGrid

Depois de criar um DataSet (Conjunto de dados) para conter os resultados da busca , possvel utilizar uma DataGrid (Grade de dados) para exibir as informaes na pgina.
1008
Para exibir os resultados da busca em uma DataGrid:

1.
Na pgina de busca, posicione o ponto de insero no local em que deseja que a DataGrid seja exibida. No painel Server Behaviors (Comportamentos de servidor), em Window > Server Behaviors, clique no boto com sinal de adio (+) e selecione DataGrid. Ser exibida a caixa de dilogo DataGrid. Na caixa de texto ID (Identificao), digite um nome para a DataGrid, como dgLocation. No menu pop-up DataSet, selecione o DataSet definido para conter os resultados da busca. Preencha o restante da caixa de dilogo conforme desejar. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo.
2.
3. 4. 5.
Este o exemplo de uma caixa de dilogo DataGrid que criar uma DataGrid com trs colunas e dez linhas, alm de links para as pginas de resultados anterior e seguinte.
A DataGrid ser exibida na primeira vez que a pgina de busca for carregada, mesmo que o usurio ainda no tenha feito nenhuma busca. possvel ocultar a DataGrid quando a pgina for carregada pela primeira vez.
Ocultar a DataGrid (Grade de dados) na primeira vez em que a pgina for carregada
Quando a pgina de busca carregada pela primeira vez, possvel ocultar a DataGrid que ser utilizada para exibir os resultados da busca.
1009
Para ocultar a DataGrid na primeira vez que a pgina for carregada:

1. 2.
Abra a pgina de busca na visualizao do cdigo, em View (Exibir) > Code (Cdigo). Logo aps a diretiva Register (Registro) localizada na parte superior da pgina, digite o seguinte bloco de cdigo, caso a linguagem da pgina seja o Visual Basic:
<script runat="server"> Sub Page_Load() If Not IsPostBack Then dgName.Visible = false Else dgName.Visible = true End If End Sub </script>
onde dgName o ID de sua DataGrid. Se a linguagem da pgina for C#, digite o seguinte cdigo:
<script runat="server"> void Page_Load() { if (!IsPostBack) { dgName.Visible = false; } else { dgName.Visible = true; } } </script> 3.
Salve a pgina.
Criar uma pgina de detalhes (ASP.NET)

A pgina de busca pode incluir uma pgina de detalhes para exibir mais informaes sobre determinados registros relacionados na DataGrid (Grade de dados). Neste caso, a pgina de busca atua como a pgina mestra em um conjunto de pginas-mestras/detalhes. Para obter mais informaes, consulte Criar pginas-mestras/detalhes (ASP.NET) na pgina 997.
Criar uma pgina de insero de registros (ASP.NET)

O Dreamweaver pode ser utilizado para criar uma pgina em que os usurios podero inserir novos registros em um banco de dados. O mtodo utilizado idntico para todas as tecnologias de servidor suportadas pelo Dreamweaver. Para obter instrues, consulte Criar uma pgina de insero de registros (todos os servidores) na pgina 944.
1010
Criar pginas para atualizar um registro (ASP.NET)


Procurar o registro a ser atualizado (ASP.NET) na pgina 1011 Abrir a pgina de atualizao e repassar a identificao do registro (ASP.NET) na pgina 1012 Recuperar o registro a ser atualizado (ASP.NET) na pgina 1014 Preencher a pgina de atualizao em uma operao (ASP.NET) na pgina 1016 Preencher a pgina de atualizao bloco a bloco (ASP.NET) na pgina 1017
Tpicos relacionados Criar uma pgina de insero de registros (todos os servidores) na pgina 944
Criar pginas para excluir um registro (ASP.NET) na pgina 1020
Procurar o registro a ser atualizado (ASP.NET)

Quando os usurios desejam atualizar um registro, necessrio localiz-lo primeiro no banco de dados. Da mesma forma, necessria uma pgina de busca para interagir com a pgina de atualizao. O usurio seleciona o registro a ser atualizado na DataGrid (Grade de dados) de resultados gerados na pgina de busca. Quando o usurio clica no registro, a pgina de atualizao aberta e exibe o registro em um formulrio. Para obter instrues sobre a criao de uma pgina de busca do registro a ser atualizado, consulte Criar uma pgina de busca do banco de dados (ASP.NET) na pgina 1004. Aps criar a pgina de busca, a prxima etapa criar links na pgina de resultados que, ao serem clicados, abrem a pgina de atualizao.
1011
Abrir a pgina de atualizao e repassar a identificao do registro (ASP.NET)

Aps criar a pgina de busca , necessrio criar links que abram a pgina de atualizao e repassem a identificao do registro selecionado pelo usurio. A pgina de atualizao utilizar essa identificao para localizar o registro solicitado no banco de dados e exibi-lo. A identificao do registro repassada para a pgina de atualizao em um parmetro da URL. Para obter mais informaes, consulte Parmetros da URL na pgina 749. Esta seo pressupe que as instrues contidas em Criar uma pgina de busca do banco de dados (ASP.NET) na pgina 1004 foram seguidas, de modo que a pgina de busca utilize uma DataGrid (Grade de dados) para exibir registros.
Para criar links na pgina de busca utilizados para abrir a pgina de atualizao e repassar a identificao do registro:
1. 2.
Abra a pgina de busca no Dreamweaver. Clique duas vezes no objeto DataGrid listado no painel Server Behaviors (Window > Server Behaviors). Ser aberta a caixa de dilogo DataGrid. Na caixa Columns (Colunas), selecione a coluna qual deseja aplicar links.
3.
4.
Clique no boto Change Column Type (Alterar tipo de coluna) e selecione Hyperlink (Hiperlink) no menu pop-up.
1012
Ser exibida a caixa de dilogo Hyperlink Column (Coluna de hiperlink).
5.
Na rea Hyperlink Text (Texto de hiperlink), especifique o texto a ser exibido na coluna de hiperlink. Se desejar criar um link genrico como Update (Atualizao) para cada linha da DataGrid, selecione a opo Static Text (Texto esttico) e digite o texto do link. Todas as linhas da DataGrid exibiro o mesmo texto (como Update) na coluna de hiperlink. Para adicionar links aos dados exibidos na coluna, selecione a opo Data Field (Campo de dados) e um campo de dados no DataSet. O campo de dados fornece o texto para os links da coluna de hiperlink. No exemplo a seguir, todas as linhas da DataGrid exibiro um nome de local.
6.
Na rea Linked Page (Pgina vinculada), crie a URL a ser aplicada ao texto na coluna de hiperlink. Alm de abrir a pgina de atualizao, a URL tambm deve identificar de modo exclusivo o registro a ser exibido nessa pgina. Para identificar o registro a ser exibido na pgina de atualizao, selecione a opo Data Field (Campo de dados) e um campo no DataSet que identifique cada registro de modo exclusivo. Na maioria dos casos, o campo consistir em um nmero de identificao de registro. No exemplo a seguir, o campo consiste em cdigos de local exclusivos.
1013
7.
Na caixa de texto Format String (Formatar a seqncia de caracteres) na rea Linked Page, clique no boto Browse (Procurar). Depois localize e selecione a pgina de atualizao. O Dreamweaver cria uma URL para a pgina de atualizao contendo um parmetro da URL que identifica o registro a ser exibido pela pgina de atualizao. Anote o nome do parmetro de URL, pois ele ser utilizado na pgina de atualizao posteriormente. Por exemplo, se locationUpdate.aspx for selecionada como a pgina de atualizao, o Dreamweaver criar a seguinte URL e a exibir na caixa de texto Format String:
locationUpdate.aspx?CODE={0}
Nesse caso, o Dreamweaver cria um parmetro de URL denominado CODE (CDIGO). O Dreamweaver copia o nome do campo de dados, mas no obrigatrio usar esse nome. possvel alter-lo na caixa de texto Format String para algo mais descritivo (como recordID), como no exemplo a seguir.
locationUpdate.aspx?recordID={0}
O elemento {0} um alocador de espao que corresponde ao valor do campo de dados. Quando a pgina for executada, os valores do campo CODE do DataSet sero inseridos nas linhas correspondentes da DataGrid. Por exemplo, se o local de locao Canberra, na Austrlia, apresentar o cdigo CBR, ser utilizada a seguinte URL na linha Canberra do DataGrid:
locationUpdate.aspx?recordID=CBR 8.
Clique em OK para fechar a caixa de dilogo Hyperlink (Hiperlink) e, em seguida, clique em OK para fechar a caixa de dilogo DataGrid (Grade de dados).
O Dreamweaver atualizar a DataGrid na pgina. Depois de criar links que abrem a pgina de atualizao e repassam a identificao do registro selecionado pelo usurio, a pgina de atualizao dever recuperar o registro a ser atualizado.
Recuperar o registro a ser atualizado (ASP.NET)

Depois que a pgina de busca repassar pgina de atualizao um parmetro de URL , a pgina de atualizao dever ler o parmetro, recuperar o registro da tabela de banco de dados e armazen-lo temporariamente em um DataSet (Conjunto de dados).
1.
Crie uma nova pgina ASP.NET no Dreamweaver e salve-a. Essa pgina ser a pgina de atualizao.
1014
2.
No painel Bindings (Ligaes), em Window > Bindings, clique no boto com sinal de adio (+) e selecione DataSet (Query) [Conjunto de dados (Consulta)]. Se a caixa de dilogo avanada for exibida, clique no boto Simple (Simples) para abrir a caixa de dilogo simples.
3.
Atribua um nome ao DataSet. Em seguida, escolha uma conexo e uma tabela de banco de dados que contenha os dados que os usurios podero atualizar. Clique na opo Selected (Selecionado) e escolha uma coluna de chave (em geral, a coluna de identificao de registro) e as colunas que contm os dados a serem atualizados. Configure a rea Filter (Filtro) para que o valor da coluna de chave seja igual ao valor do parmetro da URL correspondente repassado pela pgina de busca. Esse tipo de filtro cria um DataSet que contm apenas um registro o registro com uma identificao que corresponde ao valor do parmetro de URL. Por exemplo, se a colunachave contiver informaes de identificao de registro e for denominada CODE, e a pgina de busca repassar as informaes de identificao de registro correspondentes no parmetro de URL denominado recordID, a rea Filter dever ter a seguinte aparncia:
4.
5.
6.
Clique em OK.
Quando o usurio selecionar um registro na pgina de busca, a pgina de atualizao produzir um DataSet que contm apenas o registro selecionado.
1015
Aps modificar a pgina de atualizao para recuperar um registro do banco de dados e armazen-lo em um DataSet, voc deve adicionar um formulrio para que os usurios possam modificar os dados do registro. Tambm necessrio adicionar a lgica necessria para atualizar o banco de dados. Essas tarefas podem ser realizadas em uma operao ou bloco a bloco. Consulte Preencher a pgina de atualizao em uma operao (ASP.NET) na pgina 1016 ou Preencher a pgina de atualizao bloco a bloco (ASP.NET) na pgina 1017.
Preencher a pgina de atualizao em uma operao (ASP.NET)

Um DataSet (Conjunto de dados) filtrado para recuperar o registro a partir de uma tabela de banco de dados (consulte Recuperar o registro a ser atualizado (ASP.NET) na pgina 1014). Um formulrio HTML que permite aos usurios modificar os dados do registro Um comportamento de servidor Update Record (Atualizar registro) para atualizar a tabela de banco de dados.
Os dois blocos de criao finais de uma pgina de atualizao podem ser adicionados em uma nica operao utilizando o objeto de aplicativo Record Update Form (Formulrio de atualizao de registros). O objeto de aplicativo adiciona pgina um formulrio HTML e um comportamento de servidor Update Record. Para que o objeto de aplicativo possa ser utilizado, o aplicativo para a Web deve identificar o registro a ser atualizado e a pgina de atualizao deve ser capaz de recuper-lo. Consulte o Procurar o registro a ser atualizado (ASP.NET) na pgina 1011, o Abrir a pgina de atualizao e repassar a identificao do registro (ASP.NET) na pgina 1012 e o Recuperar o registro a ser atualizado (ASP.NET) na pgina 1014. Aps o objeto de aplicativo colocar os blocos de criao na pgina, utilize as ferramentas de projeto do Dreamweaver para personalizar o formulrio de acordo com suas preferncias ou o painel Server Behaviors para editar o comportamento de servidor Update Record.
N O TA 1016
A pgina de atualizao pode conter apenas um comportamento de servidor de edio de registros de cada vez. Por exemplo, no possvel adicionar um comportamento de servidor Insert Record ou Delete Record pgina de atualizao.
1.
Abra a pgina na visualizao do projeto e selecione Insert (Inserir) > Application Objects (Objetos de aplicativo) > Update Record (Atualizar registro) > Record Update Form Wizard (Assistente Formulrio de atualizao de registros). Ser exibida a caixa de dilogo Record Update Form (Formulrio de atualizao de registros).
2.
3.
O objeto de aplicativo adiciona pgina um formulrio HTML e um comportamento de servidor Update Record. Os objetos de formulrio so dispostos em uma tabela bsica, que pode ser personalizada utilizando as ferramentas de desenvolvimento de projetos de pgina do Dreamweaver Verifique se todos os objetos do formulrio esto dentro dos limites do formulrio. Para editar o comportamento de servidor, abra o painel Server Behaviors, em Window > Server Behaviors, e clique duas vezes no comportamento Update Record.
Preencher a pgina de atualizao bloco a bloco (ASP.NET)

Um DataSet (Conjunto de dados) filtrado para recuperar o registro a partir de uma tabela de banco de dados (consulte Recuperar o registro a ser atualizado (ASP.NET) na pgina 1014). Um formulrio HTML que permite aos usurios modificar os dados do registro Um comportamento de servidor Update Record (Atualizar registro) para atualizar a tabela de banco de dados.
Os dois blocos de criao bsicos finais de uma pgina de atualizao podem ser adicionados separadamente utilizando as ferramentas de formulrio e o painel Server Behaviors (Comportamentos de servidor). Antes de adicionar os blocos, o aplicativo da Web deve identificar o registro a ser atualizado e a pgina de atualizao deve ser capaz de recuper-lo. Consulte o Procurar o registro a ser atualizado (ASP.NET) na pgina 1011, o Abrir a pgina de atualizao e repassar a identificao do registro (ASP.NET) na pgina 1012 e o Recuperar o registro a ser atualizado (ASP.NET) na pgina 1014.
1017
O preenchimento da pgina de atualizao consiste em trs etapas:

1.
Crie uma nova pgina ASP.NET. Essa ser sua pgina de atualizao. Crie o layout da pgina com as ferramentas de projeto do Dreamweaver. Adicione um formulrio HTML posicionando o ponto de insero no local em que deseja exibir o formulrio e selecione Form (Formulrio) no menu Insert (Inserir). Um formulrio vazio criado na pgina. Pode ser necessrio ativar Invisible Elements (Elementos invisveis), em View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements, para exibir os limites do formulrio, que so representados por linhas finas vermelhas.
2. 3.
4.
Atribua um nome ao formulrio HTML clicando na tag <form> na parte inferior da janela do documento para selecionar o formulrio e, em seguida, abra o Property inspector (Inspetor de propriedades), em Window (Janela) > Properties (Propriedades), e digite um nome na caixa Form Name (Nome do formulrio). No necessrio especificar um atributo action (ao) ou method (mtodo) para o formulrio, para inform-lo para onde e como sero enviados os dados do registro quando o usurio clicar no boto Submit (Enviar). O comportamento de servidor Update Record define esses atributos para o usurio.
5.
Adicione um objeto de formulrio, como um campo de texto, em Insert > Form > Text Field, para cada coluna que deseja atualizar na tabela de banco de dados. Os objetos do formulrio permitem que os usurios modifiquem os dados. Os campos de texto servem comumente a este objetivo, mas tambm podem ser utilizados listas/menus, caixas de seleo e botes de opo. A cada objeto de formulrio deve corresponder uma coluna no DataSet definido anteriormente. A nica exceo a coluna de chave exclusiva, qual no deve corresponder nenhum objeto de formulrio. Para obter mais informaes sobre objetos de formulrio, consulte Inserir objetos de formulrio HTML na pgina 892.
1018
6.

1.
Verifique se definiu um DataSet para conter o registro que o usurio deseja atualizar. Para obter mais informaes, consulte Recuperar o registro a ser atualizado (ASP.NET) na pgina 1014.
2.
Ligue todos os objetos de formulrio aos dados do recordset. Para obter mais informaes, consulte as seguintes sees:


1.
2.
3.
O Dreamweaver adiciona pgina um comportamento de servidor que permite aos usurios atualizar registros em um banco de dados clicando no boto Submit no formulrio. Para editar o comportamento de servidor, abra o painel Server Behaviors, em Window > Server Behaviors, e clique duas vezes no comportamento Update Record. Tpicos relacionados Preencher a pgina de atualizao em uma operao (ASP.NET) na pgina 1016
1019
Criar pginas para excluir um registro (ASP.NET)

O aplicativo pode conter um conjunto de pginas que permite que os usurios excluam registros de um banco de dados. Geralmente as pginas consistem em uma pgina de busca e uma pgina de excluso. A pgina de busca permite recuperar o registro, e a pgina de excluso permite exclu-lo. Esta seo descreve as etapas para criar pginas ASP.NET que excluem registros:

Procurar o registro a ser excludo (ASP.NET) na pgina 1020 Criar links Delete (Excluir) na pgina de busca (ASP.NET) na pgina 1020 Exibir o registro na pgina de confirmao (ASP.NET) na pgina 1023 Adicionar lgica para excluir o registro (ASP.NET) na pgina 1027
Procurar o registro a ser excludo (ASP.NET)

Quando os usurios planejam excluir um registro, necessrio localiz-lo primeiro no banco de dados. Da mesma forma, necessria uma pgina de busca para interagir com a pgina de excluso. Os critrios de busca so digitados na pgina de busca e o registro selecionado nos resultados de busca exibidos em uma DataGrid (Grade de dados). Quando o usurio clica no registro, a pgina de excluso aberta e exibe o registro em um formulrio HTML. Para obter instrues sobre a criao de uma pgina de busca do registro a ser excludo, consulte Criar uma pgina de busca do banco de dados (ASP.NET) na pgina 1004. Aps criar a pgina de busca, a prxima etapa adicionar DataGrid existente nessa pgina hiperlinks ou botes Delete (Excluir).
Criar links Delete (Excluir) na pgina de busca (ASP.NET)

Aps criar a pgina de busca com uma DataGrid (Grade de dados), , necessrio criar links que abram a pgina de confirmao de excluso e repassem a identificao do registro selecionado pelo usurio. A pgina de confirmao utilizar essa identificao para localizar o registro solicitado no banco de dados e exibi-lo. A identificao de registro repassada para a pgina de confirmao em um parmetro da URL. Para obter mais informaes, consulte Parmetros da URL na pgina 749. possvel criar esses links em uma DataGrid adicionando uma coluna de hiperlink e definindo seus atributos, conforme descrito nesta seo.
1020
Para criar links de excluso na DataGrid da pgina de busca:

1.
Abra a caixa de dilogo DataGrid criada na seo anterior. Para abri-la, clique duas vezes na DataGrid no painel Server Behaviors (Comportamentos de servidor). Clique duas vezes na DataGrid listada no painel, e no no item DataGrid que exibido no menu pop-up quando voc clica no boto de adio (+). Ser aberta a caixa de dilogo DataGrid.
2.
Adicione uma coluna de links Delete clicando no boto com sinal de adio (+) e selecionando Hyperlink (Hiperlink). Na caixa de texto Title (Ttulo), digite um ttulo de coluna como Delete. O ttulo ser exibido no cabealho da coluna. Selecione a opo Static Text (Texto esttico) e digite o texto do link como delete record (excluir registro). Todas as linhas da DataGrid exibiro o mesmo texto na coluna de hiperlink. A caixa de dilogo DataGrid dever ter a seguinte aparncia:
3.
4.
5.
Na rea Linked Page (Pgina vinculada), crie a URL a ser aplicada ao texto na coluna de hiperlink. Alm de abrir a pgina de confirmao, a URL tambm deve identificar de modo exclusivo o registro a ser exibido nessa pgina. Para identificar o registro a ser exibido na pgina de confirmao, selecione a opo Data Field (Campo de dados) e um campo no DataSet (Conjunto de dados) que identifique cada registro de modo exclusivo. Na maioria dos casos, o campo consistir em um nmero de identificao de registro.
6.
Na caixa de texto Format String (Formatar a seqncia de caracteres) na rea Linked Page, clique no boto Browse (Procurar). Depois localize e selecione a pgina de confirmao.
1021
O Dreamweaver cria uma URL para a pgina de confirmao contendo um parmetro da URL que identifica o registro a ser exibido pela pgina de confirmao. Anote o nome do parmetro de URL, pois ele ser utilizado na pgina de confirmao posteriormente. Por exemplo, se locationDelete.aspx for selecionada como a pgina de detalhes e CODE (CDIGO) for selecionado como o campo no DataSet que identifica cada registro de forma exclusiva, o Dreamweaver criar a URL a seguir.
Nesse caso, o Dreamweaver cria um parmetro de URL denominado CODE. O Dreamweaver copia o nome do campo de dados, mas no obrigatrio usar esse nome. possvel alter-lo e torn-lo mais descritivo, como recordID, como no exemplo a seguir.
locationDelete.aspx?recordID={0}
O elemento {0} um alocador de espao que corresponde ao valor do campo de dados. Quando a pgina for executada, os valores do campo CODE (Cdigo) do DataSet sero inseridos nas linhas correspondentes da DataGrid. Por exemplo, se o local de locao Canberra, na Austrlia, apresentar o cdigo CBR, ser utilizada a seguinte URL na linha Canberra do DataGrid:
locationDelete.aspx?recordID=CBR 7.
Clique em OK para fechar a caixa de dilogo Hyperlink (Hiperlink). Em seguida, clique em OK para fechar a caixa de dilogo DataGrid.
1022
O Dreamweaver atualizar a DataGrid na pgina. A seguir apresentada uma DataGrid visualizada em um navegador aps ser feita uma busca de todas as cidades cujo nome comea com a letra c.
Aps criar os links de excluso, a prxima etapa exibir o registro na pgina de confirmao.
Exibir o registro na pgina de confirmao (ASP.NET)

Aps preencher a pgina que contm os registros , alterne para a pgina de confirmao de excluso. A pgina de confirmao mostra o registro e solicita que o usurio confirme se deseja exclu-lo. Quando o usurio confirmar a operao clicando no boto Form (Formulrio), o aplicativo para a Web excluir o registro do banco de dados. A criao dessa pgina consiste nas seguintes tarefas:

Criar um formulrio HTML com um boto para clicar e confirmar a excluso. Recuperar o registro a ser exibido na pgina. Exibir o registro na pgina.
A recuperao e a exibio do registro consistem em definir um DataSet (Conjunto de dados) para conter um nico registro aquele que o usurio deseja excluir e ligar as colunas do DataSet pgina. As etapas esto descritas a seguir, com mais detalhes.
1023
Para criar um formulrio HTML para confirmar a excluso:

1.
Crie uma nova pgina ASP.NET e salve-a como a pgina de confirmao especificada na seo anterior. A pgina de confirmao foi especificada quando voc criou os links Delete (Excluir) na seo anterior. Utilize esse nome ao salvar o arquivo pela primeira vez (por exemplo, locationDelete.aspx).
2. 3.
Insira um formulrio HTML na pgina, em Insert (Inserir) > Form > Form. Adicione ao formulrio um campo oculto. O campo oculto do formulrio necessrio para armazenar a identificao do registro repassada pelo parmetro da URL. Para adicionar um campo oculto, posicione o ponto de insero no formulrio e selecione Insert > Form > Hidden Field (Campo oculto).
4.
5.

1.
No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto de adio (+) e escolha DataSet (Conjunto de dados) no menu pop-up. Ser exibida a caixa de dilogo simples DataSet. Se em vez dela for exibida a caixa de dilogo DataSet avanada, clique em Simple (Simples) para alternar para a caixa de dilogo DataSet simples.
2.
Atribua um nome ao DataSet e escolha a tabela de banco de dados que contm os registros que podem ser exibidos. Na rea Columns (Colunas), selecione as colunas da tabela (campos de registro) que deseja exibir na pgina. Para exibir apenas alguns dos campos do registro, clique em Selected (Selecionado), escolha os campos desejados pressionando a tecla Control (Windows) ou Command (Macintosh) enquanto clica em cada um deles na lista. Voc deve incluir o campo de identificao do registro, mesmo que no pretenda exibi-lo.
3.
1024
4.
Preencha a seo Filter (Filtro) para localizar e exibir o registro especificado no parmetro da URL repassado pela pgina de busca, do seguinte modo:
No primeiro menu pop-up da rea Filter, selecione a coluna do DataSet que contm os valores correspondentes ao valor do parmetro da URL repassado pela pgina com os links Delete. Por exemplo: se o parmetro da URL contiver um nmero de identificao de registro, selecione a coluna que contm os nmeros de identificao de registro. No exemplo analisado na seo anterior, a coluna do DataSet denominada CODE (CDIGO) contm os valores correspondentes ao valor do parmetro da URL repassado pelos links Delete. No menu pop-up ao lado do primeiro menu, selecione o sinal de igual, se ainda no tiver sido selecionado. No terceiro menu pop-up, selecione URL Parameter (Parmetro da URL). A pgina com os links Delete utiliza um parmetro da URL para repassar informaes pgina de confirmao. Na quarta caixa, digite o nome do parmetro da URL repassado pela pgina com os links Delete. Por exemplo, se a URL utilizada para abrir a pgina de confirmao incluir o sufixo locationDelete.aspx?recordID=CBR, digite recordID. A caixa de dilogo DataSet dever ter a seguinte aparncia.
5.
Clique em OK.
O DataSet exibido no painel Bindings.
1025

1.
Selecione as colunas do DataSet (campos de registro) no painel Bindings e arraste-as at a pgina de confirmao. Voc deve inserir esse contedo dinmico somente de leitura dentro dos limites do formulrio. Para obter mais informaes sobre como inserir contedo dinmico nas pginas, consulte Tornar dinmico o texto na pgina 783. Em seguida, ligue a coluna de identificao do registro ao campo oculto do formulrio.
2.
Certifique-se de que a opo Invisible Elements (Elementos invisveis) esteja ativada em View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements. Em seguida, clique no cone amarelo em forma de escudo (que representa o campo oculto do formulrio). O campo oculto do formulrio ser selecionado. No Property inspector (Inspetor de propriedades), clique no cone em forma de raio ao lado a caixa de texto Value (Valor). Ser exibida a caixa de dilogo Dynamic Data (Dados dinmicos). Na caixa de dilogo Dynamic Data, selecione a coluna de identificao de registro no DataSet e clique em OK. No exemplo a seguir, a coluna de identificao de registro selecionada CODE.
3.
4.
5.
Salve a pgina.
1026
A pgina de confirmao preenchida dever ter a aparncia a seguir.
Aps criar uma pgina de confirmao, a prxima etapa adicionar lgica para excluir o registro.
Adicionar lgica para excluir o registro (ASP.NET)

Aps a criao da pgina de confirmao , a prxima etapa consiste em adicionar pgina a lgica que exclui o registro do banco de dados quando o usurio clica no boto Confirm (Confirmar). No Dreamweaver, possvel adicionar esta lgica de modo rpido e fcil utilizando o comportamento de servidor Delete Record (Excluir registro).
1. 2.
Verifique se a pgina de confirmao est aberta no Dreamweaver. No painel Server Behaviors (Comportamentos de servidor), em Window (Janela) > Server Behaviors, clique no boto com sinal de adio (+) e selecione Delete Record.
1027
A caixa de dilogo Delete Record exibida.
3.
Na caixa de texto First Check If Variable Is Defined (Primeiramente, verificar se a varivel est definida), selecione a opo Primary Key Value (Valor da chave primria). Especifique o valor da chave primria posteriormente na caixa de dilogo. No menu pop-up Connection (Conexo), selecione uma conexo com o banco de dados, para que a pgina possa localizar o banco de dados e se conectar a ele. No menu pop-up Table (Tabela), selecione a tabela de banco de dados que contm os registros a serem excludos. No menu pop-up Primary Key Column (Coluna de chave primria), selecione a coluna da tabela que contm as identificaes do registro. O comportamento de servidor Delete Record buscar uma correspondncia nesta coluna. A coluna deve conter os mesmos dados de identificao do registro que a coluna DataSet (Conjunto de dados) ligada ao campo oculto do formulrio na pgina.
4.
5.
6.
7.
No menu pop-up Submit Primary Key As (Enviar a chave primria como), selecione o tipo de dados da coluna de chave primria. No menu pop-up Primary Key, selecione a varivel da pgina que contm a identificao do registro a ser excludo. A varivel criada pelo campo oculto do formulrio. Ela tem o mesmo nome que o atributo Name (Nome) do campo oculto e pode ser um formulrio ou um parmetro da URL, dependendo do atributo Method (Mtodo) do formulrio. Em nosso exemplo, a varivel em questo uma varivel de formulrio chamada hiddenID.
8.
1028
9.
Na caixa de texto On Success, Go To (Se tiver xito, ir para), especifique uma pgina a ser aberta depois que o registro tiver sido excludo da tabela de banco de dados. possvel especificar uma pgina que contenha uma breve mensagem de xito para o usurio ou uma que contenha os registros restantes, para que o usurio possa verificar se o registro foi excludo.
10. Se
desejar, selecione a opo Display Debugging Information on Failure (Exibir as informaes de depurao se ocorrerem falhas). As informaes de depurao sero geradas pelo servidor. Para exibir uma mensagem de erro personalizada, desmarque a opo Display Debugging Information on Failure e especifique uma pgina a ser aberta na caixa de texto On Failure, Go To (Se no tiver xito, ir para). A caixa de dilogo Delete Record dever ter a aparncia a seguir.
11.
12. Clique
em OK e salve o trabalho.
Faa o upload das pginas para o servidor da Web (se necessrio), abra um navegador e procure um registro a ser excludo. Ao clicar em um link Delete (Excluir) na pgina de resultados, ser exibida a pgina de confirmao. Clique no boto Form (Formulrio) para excluir o registro do banco de dados. Para confirmar se o registro foi excludo, faa novamente uma busca por ele.
1029
Utilizar procedimentos armazenados para modificar bancos de dados (ASP.NET)

NO TA
Os bancos de dados do Microsoft Access e MySQL no oferecem suporte a 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 documentao do banco de dados e um bom manual sobre Transact-SQL.
Para adicionar um procedimento armazenado a uma pgina ASP.NET:
1. 2.
No Dreamweaver, abra a pgina onde o procedimento armazenado ser executado. No painel Bindings (Ligaes), em Window > Bindings, clique no boto de adio (+) e selecione Stored Procedure. Ser exibida a caixa de dilogo Stored Procedure.
3.
4.
1030
Aps fechar a caixa de dilogo, o Dreamweaver insere o cdigo ASP.NET em sua pgina de modo que, ao ser executado no servidor, chama um procedimento armazenado no banco de dados. O procedimento armazenado, por sua vez, executa uma operao de banco de dados, como inserir um registro ou efetuar uma consulta. Se o procedimento armazenado exigir parmetros, possvel criar uma pgina para reunir os valores de parmetros e os submeter em seguida pgina com o procedimento armazenado. Por exemplo: possvel criar uma pgina que utiliza parmetros da URL ou formulrio HTML para coletar valores de parmetro de usurios. Tpicos relacionados Procedimentos armazenados na pgina 913
Criar pginas que restringem o acesso ao site (ASP.NET)

O Dreamweaver pode ser utilizado para criar um conjunto de pginas que restringem o acesso ao site. Ele no possui comportamentos de servidor de autenticao para pginas ASP.NET. No entanto, uma vez que as pginas ASP e ASP.NET podem ser executadas no mesmo site, possvel utilizar os comportamentos de servidor de autenticao ASP. O mtodo utilizado para criar essas pginas idntico ao do ColdFusion. Para obter instrues, consulte Criar pginas que restrinjam o acesso ao site (ColdFusion, ASP, JSP, PHP) na pgina 966.
Criar pginas que restringem o acesso ao site (ASP.NET)
1031
1032
CAPTULO 42
Criar aplicativos ASP e JSP rapidamente

possvel utilizar as ferramentas do Macromedia Dreamweaver 8 para criar rapidamente um aplicativo ASP ou JSP para a Web, com pouca ou nenhuma codificao. Tpicos relacionados Sobre o desenvolvimento rpido de aplicativos (todos os servidores) na pgina 909
42
Criar pginas-mestras/detalhes (ASP e JSP)

Com o Dreamweaver, possvel criar conjuntos de pginas que apresentam informaes em dois nveis de detalhe: uma pgina mestra que relaciona registros e uma pgina de detalhes que apresenta mais detalhes sobre cada registro. Esta seo descreve como criar pginas-mestras/ detalhes.
Criar pginas-mestras/detalhes em uma operao (ASP e JSP)

Ao desenvolver aplicativos ASP ou JSP, possvel criar rapidamente pginas-mestras/detalhes utilizando o objeto de aplicativo Master/Detail Page Set (Conjunto de pginas-mestras/ detalhes). Com o objeto de aplicativo possvel criar um conjunto completo de pginas dinmicas simplesmente preenchendo uma ou duas caixas de dilogo. O mtodo idntico quele utilizado para o ColdFusion. Para obter instrues, consulte Criar pginas-mestras/detalhes em uma operao (ColdFusion, ASP, JSP, PHP) na pgina 928. Tambm possvel criar pginas-mestras/detalhes utilizando comportamentos de servidor individuais.
1033
Criar pginas-mestras/detalhes bloco a bloco (ASP e JSP)

Esta seo descreve como criar um conjunto de pginas-mestras/detalhes sem utilizar o objeto de aplicativo Master/Detail Page Set (Conjunto de pginas-mestras/detalhes). Para obter instrues sobre como utilizar o objeto de aplicativo, consulte Criar pginas-mestras/detalhes em uma operao (ASP e JSP) na pgina 1033. Esta seo descreve as etapas para a criao de um conjunto de pginas-mestras/detalhes:

Criar uma pgina mestra e definir um recordset para ela (ASP e JSP) na pgina 1034 Exibir os registros na pgina mestra (ASP e JSP) na pgina 1034 Abrir a pgina de detalhes e repassar uma identificao de registro para ela (ASP e JSP) na pgina 1035 Localizar e exibir o registro solicitado na pgina de detalhes (ASP e JSP) na pgina 1036
Criar uma pgina mestra e definir um recordset para ela (ASP e JSP)
A primeira etapa para a criao de pginas-mestras/detalhes criar uma pgina mestra em branco e adicionar a ela um recordset. Voc pode definir um recordset na fase de projeto (consulte Definir um recordset na pgina 765), ou o usurio pode defini-la durante a execuo (consulte Criar pginas de busca/resultados (ASP e JSP) na pgina 1038). Assegure-se de que o recordset contenha no somente todas as colunas de que voc necessitar na pgina mestra, mas tambm todas as colunas de que necessitar na pgina de detalhes. Normalmente, o recordset na pgina mestra extrai algumas colunas de uma tabela de banco de dados, enquanto que o recordset na pgina detalhes extrai mais colunas da mesma tabela para fornecer mais detalhes. A prxima etapa na criao de pginas-mestras/detalhes exibir os registros na pgina mestra.
Exibir os registros na pgina mestra (ASP e JSP)

Aps criar uma pgina mestra em branco e definir um recordset para ela , necessrio exibir os registros na pgina.
1034
Captulo 42: Criar aplicativos ASP e JSP rapidamente
Para exibir os registros na pgina mestra:

1.
Crie um layout de pgina, para exibir diversos registros e ligar as colunas dos recordsets pgina. Um mtodo comum consiste em criar uma tabela HTML com duas linhas na pgina mestra e arrastar um nmero limitado de colunas de recordsets do painel Bindings (Ligaes), a partir de Window (Janela) > Bindings para a segunda linha da tabela (utilize a primeira linha para exibir os cabealhos das colunas da tabela).
2.
Crie uma regio repetida para exibir mais de um registro por vez. A regio repetida normalmente se aplica linha da tabela que contiver contedo dinmico. Para obter mais informaes, consulte Exibir vrios resultados de recordsets na pgina 806.
A prxima etapa na criao de pginas-mestras/detalhes abrir a pgina de detalhes e repassar uma identificao de registro para ela.
Abrir a pgina de detalhes e repassar uma identificao de registro para ela (ASP e JSP)
Aps criar a pgina mestra e exibir registros nela , necessrio criar links para abrir a pgina de detalhes e repassar a identificao do registro que o usurio selecionou para a pgina de detalhes.
Para abrir a pgina de detalhes e repassar para ela um parmetro de URL que identifique o registro a ser exibido:
1. 2.
Na regio repetida da pgina mestra, selecione o contedo dinmico que atuar como link. No painel Server Behaviors (Comportamentos de servidor), a partir de Window (Janela) > Server Behaviors, clique no boto com sinal de adio (+) e selecione Go to Detail Page (Ir para a pgina Detalhes) no menu pop-up. A caixa de dilogo Go to Detail Page exibida. Preencha a caixa de dilogo. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
3.
4.
O Dreamweaver coloca um link especial ao redor do texto selecionado. Quando o usurio clica no link, o comportamento de servidor Go to Detail Page repassa o parmetro da URL que contm a identificao do registro para a pgina de detalhes. Por exemplo: se o parmetro da URL for denominado id e a pgina de detalhes for denominada detalhesdocliente.asp, quando o usurio clicar no link, a URL ter uma aparncia semelhante seguinte: http://www.meusite.com/detalhesdocliente.asp?id=43
1035
A primeira parte da URL, http://www.meusite.com/detalhesdocliente.asp, abrir a pgina de detalhes. A segunda parte, ?id=43, o parmetro da URL. Ela indica pgina de detalhes qual registro dever ser localizado e exibido. O termo id o nome do parmetro da URL e 43 o seu valor. Neste exemplo, o parmetro da URL contm o nmero de identificao do registro, 43. Para obter mais informaes, consulte Parmetros da URL na pgina 749. A prxima etapa na criao de pginas-mestras/detalhes localizar e exibir o registro solicitado na pgina de detalhes.
Localizar e exibir o registro solicitado na pgina de detalhes (ASP e JSP)

Depois de completar a pgina mestra , necessrio localizar o registro solicitado no banco de dados e exibi-lo na pgina de detalhes. O procedimento consiste em definir um recordset para manter um nico registro (o registro solicitado pela pgina mestra) e ligar as colunas do recordset pgina.
1.
Alterne para a pgina de detalhes ou crie uma nova pgina ASP ou JSP, se ainda no existir uma. No painel Bindings (Ligaes), em Window (Janela)> Bindings, clique no boto com o sinal de adio (+) e selecione Recordset no menu pop-up. Ser exibida a caixa de dilogo Recordset simples. Se a caixa de dilogo avanada aparecer, clique em Simple (Simples) para alternar.
2.
3.
Atribua um nome ao recordset e selecione uma conexo e uma tabela de banco de dados que fornecero dados ao recordset. Na rea Column (Coluna), selecione as colunas da tabela a serem includas no recordset. O recordset pode ser idntico ou diferente do recordset na pgina mestra. Normalmente, um recordset de uma pgina de detalhes possui mais colunas para exibir mais detalhes. Se os recordsets forem diferentes, o recordset na pgina de detalhes dever conter ao menos uma coluna em comum com a pgina mestra. Normalmente, a coluna em comum a coluna de identificao do registro, mas pode ser tambm o campo de juno das tabelas relacionadas. Para incluir apenas algumas das colunas da tabela no recordset, clique em Selected (Selecionado) e escolha as colunas desejadas clicando na lista e pressionando simultaneamente a tecla Control (no Windows) ou Command (no Macintosh).
4.
1036
5.
No primeiro menu pop-up da rea Filter, selecione a coluna da tabela do banco de dados que contm os valores que coincidem com o valor do parmetro da URL transferido da pgina mestra. Por exemplo: se o parmetro da URL contiver um nmero de identificao de registro, selecione a coluna que contm os nmeros de identificao 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 URL Parameter (Parmetro da URL). A pgina mestra repassar as informaes que identificam a seleo do usurio para a pgina de detalhes em um parmetro da URL.
Na quarta caixa de texto, digite o nome do parmetro da URL repassado pela pgina mestra. Por exemplo: se a URL da pgina mestra utilizada para abrir a pgina de detalhes for www.meusite.com/detalhesdocliente.asp?id=43, digite id. Tambm possvel obter o nome alternando para a pgina mestra, abrindo o painel Server Behaviors (Comportamentos de servidor), em Window > Server Behaviors, e clicando duas vezes no comportamento de servidor Go to Detail Page (Ir para a pgina Detalhes). Verifique o nome associado opo Pass URL Parameter (Repassar o parmetro da URL).
6.
Clique em OK. O recordset exibido no painel Bindings. Ligue as colunas do recordset pgina de detalhes, selecionando-as no painel Bindings (Window > Bindings) e arrastando-as at a pgina.
7.
A definio da pgina mestra/detalhes est concluda. Aps a criao da pgina mestra/detalhes, possvel utilizar o painel Server Behaviors, em Window > Server Behaviors para modificar os diversos comportamentos de servidor.
1037
Criar pginas de busca/resultados (ASP e JSP)

O Dreamweaver pode ser utilizado para criar um conjunto de pginas que permitam que os usurios efetuem buscas no banco de dados. O mtodo idntico quele utilizado para o ColdFusion. Para obter instrues, consulte Criar pginas de busca/resultados (ColdFusion, ASP, JSP, PHP) na pgina 937.
Criar uma pgina de insero de registro (ASP e JSP)

Criar pginas para atualizar um registro (ASP e JSP)

O aplicativo pode conter um conjunto de pginas em que os usurios podero atualizar os registros existentes em uma tabela de banco de dados. Geralmente as pginas consistem em uma pgina de busca, uma pgina de resultados e uma pgina de atualizao. A pgina de busca e a pgina de resultados permitem recuperar o registro e a pgina de atualizao permite modific-lo. Esta seo descreve as etapas para a criao de uma pgina para atualizao de registros:

Procurar o registro a ser atualizado (ASP e JSP) na pgina 1039 Abrir a pgina de atualizao e repassar a identificao do registro (ASP e JSP) na pgina 1039 Recuperar o registro a ser atualizado (ASP e JSP) na pgina 1040 Preencher a pgina de atualizao em uma nica operao (ASP e JSP) na pgina 1041 Preencher a pgina de atualizao bloco a bloco (ASP e JSP) na pgina 1042
Criar pginas para excluso de um registro (ASP e JSP) na pgina 1045
1038
Procurar o registro a ser atualizado (ASP e JSP)

Quando os usurios desejam atualizar um registro, necessrio localiz-lo primeiro no banco de dados. Da mesma forma, so necessrias as pginas de busca e de resultados para funcionarem com a pgina de atualizao. Os critrios de busca so digitados na pgina de busca e o registro selecionado na pgina de resultados. Quando o usurio clica no registro, a pgina de atualizao aberta e exibe o registro em um formulrio HTML. Para obter instrues sobre a criao de pginas de busca do registro a ser atualizado, consulte Criar pginas de busca/resultados (ColdFusion, ASP, JSP, PHP) na pgina 937. Aps criar as pginas de busca/resultados, a prxima etapa na criao de uma pgina de atualizao de registro criar links na pgina de resultados que, quando clicados, abriro a pgina de atualizao.
Abrir a pgina de atualizao e repassar a identificao do registro (ASP e JSP)

Aps criar as pginas de busca/resultados, necessrio criar links na pgina de resultados que abram a pgina de atualizao e repassem a identificao do registro selecionado pelo usurio. A pgina de atualizao utilizar essa identificao para localizar o registro solicitado no banco de dados e exibi-lo. A identificao do registro repassada para a pgina de atualizao em um parmetro da URL. Para obter mais informaes, consulte Parmetros da URL na pgina 749.
Para criar links para abrir a pgina de atualizao e transferir a identificao do registro:
1.
Na pgina de resultados, selecione o alocador de espao do contedo dinmico do texto a ser exibido como link. No painel Server Behaviors (Comportamentos de servidor), a partir de Window (Janela) > Server Behaviors, clique no boto com sinal de adio (+) e selecione Go to Detail Page (Ir para a pgina Detalhes) no menu pop-up. Ser exibida a caixa de dilogo Go to Detail Page. Na caixa de texto Detail Page (Pgina Detalhes), clique em Browse (Procurar) e localize a pgina de atualizao. D um nome ao parmetro da URL e especifique o recordset e a coluna que contm a identificao do registro que deseja repassar para a pgina de atualizao. Anote o nome do parmetro da URL, pois ele ser utilizado na pgina de atualizao posteriormente.
2.
3.
4.
1039
5.
Clique em OK.
O Dreamweaver insere um link especial pgina. Quando o usurio clica no link, um parmetro da URL que contm a identificao do registro repassado para a pgina de atualizao. A prxima etapa na criao de uma pgina de atualizao de registro recuperar o registro a ser atualizado.
Recuperar o registro a ser atualizado (ASP e JSP)

1.
Crie uma nova pgina ASP ou JSP no Dreamweaver e salve-a. Essa pgina ser a pgina de atualizao. No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+) e selecione Recordset. Se a caixa de dilogo avanada for exibida, clique no boto Simple (Simples) para abrir a caixa de dilogo simples.
2.
3.
Atribua um nome ao recordset e especifique o local onde esto os dados a serem atualizados utilizando os menus pop-up Connection (Conexo) e Table (Tabela). Clique na opo Selected (Selecionado) e escolha uma coluna de chave (em geral, a coluna de identificao de registro) e as colunas que contm os dados a serem atualizados. Configure a rea Filter (Filtro) para que o valor da coluna de chave seja igual ao valor do parmetro da URL correspondente repassado pela pgina de resultados. Este tipo de filtro cria um recordset que contm apenas o registro especificado pela pgina de resultados. Por exemplo: se a coluna-chave contiver informaes de identificao de registro e for chamada PRID e se a pgina de resultados repassar as informaes de identificao de registro correspondentes no parmetro da URL id, a rea Filter ter a seguinte aparncia:
4.
5.
6.
Clique em OK.
1040
Quando o usurio seleciona um registro na pgina de resultados, a pgina de atualizao produzir um recordset contendo apenas o registro selecionado. Depois de modificar a pgina de atualizao para recuperar um registro do banco de dados e armazen-lo em um recordset, necessrio adicionar um formulrio para que os usurios possam modificar os dados do registro e a lgica necessria para atualizar o banco de dados. Essas tarefas podem ser realizadas em uma operao ou bloco a bloco. Consulte Preencher a pgina de atualizao em uma nica operao (ASP e JSP) na pgina 1041 ou Preencher a pgina de atualizao bloco a bloco (ASP e JSP) na pgina 1042.
Preencher a pgina de atualizao em uma nica operao (ASP e JSP)

Um recordset filtrado para recuperar o registro a partir de uma tabela de banco de dados (consulte Recuperar o registro a ser atualizado (ASP e JSP) na pgina 1040). Um formulrio HTML que permite aos usurios modificar os dados do registro Um comportamento de servidor Update Record (Atualizar registro) para atualizar a tabela de banco de dados.
Os dois blocos de criao finais de uma pgina de atualizao podem ser adicionados em uma nica operao utilizando o objeto de aplicativo Record Update Form (Formulrio de atualizao de registros). O objeto de aplicativo adiciona pgina um formulrio HTML e um comportamento de servidor Update Record. Para que o objeto de aplicativo possa ser utilizado, o aplicativo para a Web deve identificar o registro a ser atualizado e a pgina de atualizao deve ser capaz de recuper-lo. Consulte o Procurar o registro a ser atualizado (ASP e JSP) na pgina 1039, o Abrir a pgina de atualizao e repassar a identificao do registro (ASP e JSP) na pgina 1039 e o Recuperar o registro a ser atualizado (ASP e JSP) na pgina 1040. Aps o objeto de aplicativo colocar os blocos de criao na pgina, utilize as ferramentas de projeto do Dreamweaver para personalizar o formulrio de acordo com suas preferncias ou o painel Server Behaviors para editar o comportamento de servidor Update Record.
N O TA
A pgina de atualizao pode conter apenas um comportamento de servidor de edio de registros de cada vez. Por exemplo, no possvel adicionar um comportamento de servidor Insert Record ou Delete Record na pgina de atualizao.
1041
1.
Abra a pgina de atualizao na visualizao do projeto e selecione Insert > Application Objects > Update Record > Record Update Form Wizard. Ser exibida a caixa de dilogo Record Update Form (Formulrio de atualizao de registros).
2.
3.
Preencher a pgina de atualizao bloco a bloco (ASP e JSP)

Um recordset filtrado para recuperar o registro a partir de uma tabela de banco de dados (consulte Recuperar o registro a ser atualizado (ASP e JSP) na pgina 1040). Um formulrio HTML que permite aos usurios modificar os dados do registro Um comportamento de servidor Update Record (Atualizar registro) para atualizar a tabela de banco de dados.
Os dois blocos de criao bsicos finais de uma pgina de atualizao podem ser adicionados separadamente utilizando as ferramentas de formulrio e o painel Server Behaviors (Comportamentos de servidor). Antes de adicionar os blocos, o aplicativo da Web deve identificar o registro a ser atualizado e a pgina de atualizao deve ser capaz de recuper-lo. Consulte o Procurar o registro a ser atualizado (ASP e JSP) na pgina 1039, o Abrir a pgina de atualizao e repassar a identificao do registro (ASP e JSP) na pgina 1039 e o Recuperar o registro a ser atualizado (ASP e JSP) na pgina 1040.
1042
O preenchimento da pgina de atualizao consiste em trs etapas:
Adicionar um formulrio HTML pgina para que os usurios possam modificar os dados Exibir o registro no formulrio ligando os objetos do formulrio a colunas da tabela de banco de dados Adicionar o comportamento de servidor Update Record para atualizar a tabela de banco de dados depois que o usurio modificar o registro e clicar no boto do formulrio

1.
Crie uma nova pgina ASP ou JSP, em File (Arquivo) > New (Novo). Essa pgina ser a pgina de atualizao. Crie o layout da pgina com as ferramentas de projeto do Dreamweaver. Adicione um formulrio HTML colocando o ponto de insero no local em que deseja que o formulrio seja exibido e selecione Insert (Inserir) > Form (Formulrio) > Form. Um formulrio vazio criado na pgina. Pode ser necessrio ativar Invisible Elements (Elementos invisveis), em View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements, para exibir os limites do formulrio, que so representados por linhas finas vermelhas.
2. 3.
4.
5.
Adicione um objeto de formulrio, como um campo de texto, em Insert > Form > Text Field, para cada coluna que deseja atualizar na tabela de banco de dados. Os objetos de formulrio destinam-se entrada de dados. Os campos de texto servem comumente a esse objetivo, mas tambm possvel usar menus, caixas de seleo e botes de opo. A cada objeto de formulrio deve corresponder uma coluna no recordset definido anteriormente. A nica exceo a coluna de chave exclusiva, qual no deve corresponder nenhum objeto de formulrio. Para obter mais informaes, consulte Inserir objetos de formulrio HTML na pgina 892.
1043
6.
Adicione ao formulrio um boto Submit, a partir de Insert > Form > Button (Boto). O identificador do boto Submit pode ser alterado do seguinte modo: selecione o boto, abra o Property inspector, em Window > Properties, e digite um novo valor na caixa Label (Identificador).

1.
Certifique-se de ter definido um recordset para conter o registro que o usurio deseja atualizar. Para obter mais informaes, consulte Recuperar o registro a ser atualizado (ASP e JSP) na pgina 1040.
2.


1.
2.
3.
O Dreamweaver adiciona pgina um comportamento de servidor que permite aos usurios atualizar registros em um banco de dados clicando no boto Submit no formulrio. Para editar o comportamento de servidor, abra o painel Server Behaviors, em Window > Server Behaviors, e clique duas vezes no comportamento Update Record. Tpicos relacionados Preencher a pgina de atualizao em uma nica operao (ASP e JSP) na pgina 1041
1044
Criar pginas para excluso de um registro (ASP e JSP)

O aplicativo pode conter uma pgina que permite aos usurios excluir os registros existentes em uma tabela de banco de dados. Uma pgina de excluso normalmente uma pgina de detalhes que funciona em conjunto com uma pgina de resultados. A pgina de resultados permite que o usurio selecione um registro a ser excludo. Em seguida, repassa a seleo para a pgina de excluso. Uma pgina de excluso composta por quatro blocos de criao:
Um recordset filtrado para recuperar o registro a partir de uma tabela de banco de dados (consulte Recuperar o registro a ser excludo (ASP e JSP) na pgina 1046). Uma exibio somente de leitura dos dados que sero excludos (consulte Exibir os dados a serem excludos (ASP e JSP) na pgina 1046) Um boto Submit (Enviar), que serve para enviar o comando de excluso ao servidor (consulte Enviar o comando de excluso ao servidor (ASP e JSP) na pgina 1047) Um comportamento de servidor Delete Record (Excluir registro) para atualizar a tabela do banco de dados (consulte Excluir o registro da tabela de banco de dados (ASP e JSP) na pgina 1048)
N OT A
A pgina de excluso pode conter apenas um comportamento de servidor de edio de registros de cada vez. Por exemplo, no possvel adicionar um comportamento de servidor Insert Record ou Update Record pgina de excluso.
Tpicos relacionados Criar uma pgina de insero de registro (ASP e JSP) na pgina 1038
Criar pginas para atualizar um registro (ASP e JSP) na pgina 1038
Identificar o registro a ser excludo (ASP e JSP)

Quando os usurios planejam excluir um registro, necessrio localiz-lo primeiro no banco de dados. Da mesma forma, so necessrias as pginas de busca e de resultados para funcionarem com a pgina de excluso. Para obter instrues sobre a criao das pginas de busca e de resultados, consulte Criar pginas de busca/resultados (ASP e JSP) na pgina 1038. A pgina de resultados informa pgina de excluso qual registro ser excludo repassando-lhe um parmetro da URL. A prxima etapa ser recuperar o registro a ser excludo.
1045
Recuperar o registro a ser excludo (ASP e JSP)

Aps a pgina de resultados repassar o parmetro da URL para a pgina de excluso que identifica o registro a ser excludo , a pgina de excluso dever ler o parmetro, recuperar o registro na tabela do banco de dados e armazen-lo temporariamente em um recordset.
Para recuperar um registro a ser excludo:
1.
No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+) e selecione Recordset. Se a caixa de dilogo avanada for exibida, clique no boto Simple (Simples) para abrir a caixa de dilogo simples.
2.
Atribua um nome ao recordset e especifique o local onde esto os dados a serem excludos atravs dos menus pop-up Connection (Conexo) e Table (Tabela). Na rea Columns (Coluna), selecione a opo All (Todas) para selecionar todas as colunas da tabela de banco de dados. Configure a rea Filter (Filtro) para que o valor da coluna de chave seja igual ao valor do parmetro da URL correspondente repassado pela pgina de resultados. Este tipo de filtro cria um recordset que contm apenas o registro especificado pela pgina de resultados. Por exemplo: se a coluna-chave contiver informaes de identificao de registro e for chamada PRID e se a pgina de resultados repassar as informaes de identificao de registro correspondentes no parmetro da URL id, a rea Filter ter a seguinte aparncia:
3.
4.
5.
Clique em OK.
Quando o usurio selecionar um registro na pgina de resultados, a pgina de excluso produzir um recordset contendo apenas o registro selecionado. A prxima etapa na criao de uma pgina para excluir registros exibir o registro a ser excludo.
Exibir os dados a serem excludos (ASP e JSP)

Aps recuperar o registro a ser excludo, recomendvel exibir o registro para que o usurio possa confirmar a excluso.
1046
Para adicionar uma exibio somente de leitura do registro a ser excludo:

1.
Certifique-se de ter definido um recordset para conter o registro que o usurio deseja excluir. Para obter mais informaes, consulte Recuperar o registro a ser excludo (ASP e JSP) na pgina 1046.
2.
Arraste uma coluna do recordset do painel Bindings (Ligaes), em Window > Bindings, at a pgina. O contedo dinmico exibido na pgina. Este contedo pode ser colocado na pgina em sua forma original na pgina ou em uma tabela HTML. Para obter mais informaes, consulte Tornar dinmico o texto na pgina 783.
A prxima etapa na criao de uma pgina para excluir registros enviar o comando de excluso ao servidor.
Enviar o comando de excluso ao servidor (ASP e JSP)

Aps recuperar e exibir o registro a ser excludo, necessrio adicionar um boto para o usurio clicar e excluir o registro. A pgina de excluso utiliza um boto de formulrio Submit (Enviar) para enviar o comando de excluso ao servidor. Para adicionar pgina um boto Submit, necessrio criar um formulrio HTML. O formulrio pode conter apenas o boto Submit.
Para adicionar um boto Submit pgina de excluso:
1.
Na visualizao do projeto, coloque o ponto de insero no local em que deseja que o boto Submit seja exibido e selecione Insert (Inserir) > Form (Formulrio) > Form. Um formulrio vazio criado na pgina. Pode ser necessrio ativar Invisible Elements (Elementos invisveis), em View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements, para exibir os limites do formulrio, que so representados por linhas finas vermelhas.
2.
Atribua um nome ao formulrio HTML clicando na tag <form> na parte inferior da janela do documento para selecionar o formulrio e, em seguida, abra o Property inspector (Inspetor de propriedades), em Window (Janela) > Properties (Propriedades), e digite um nome na caixa Form Name (Nome do formulrio). No necessrio especificar um atributo action (ao) ou method (mtodo) para o formulrio, para inform-lo para onde e como sero enviados os dados do registro quando o usurio clicar no boto Submit (Enviar). O comportamento de servidor Delete Record (Excluir registro) define esses atributos para o usurio.
1047
3. 4.
Adicione ao formulrio um boto Submit, a partir de Insert > Form > Button (Boto). Se desejar, altere o identificador do boto Submit do seguinte modo: selecione o boto, abra o Property Inspector, em Window > Properties e digite um novo valor na caixa Label (Identificador).
A prxima etapa a incluso do comportamento de servidor Delete Record para atualizar a tabela de banco de dados depois que o usurio clicar no boto Submit.
Excluir o registro da tabela de banco de dados (ASP e JSP)

Depois de adicionar um boto para o usurio clicar e excluir o registro ), a etapa final adicionar o comportamento de servidor Delete Record (Excluir registro) para atualizar a tabela de banco de dados depois que o usurio clicar no boto Submit (Enviar).
Para adicionar um comportamento de servidor que exclua a tabela de banco de dados:
1.
No painel Server Behaviors (Comportamentos de servidor), a partir de Window (Janela) > Server Behaviors, clique no boto com sinal de adio (+) e selecione Delete Record (Excluir registro) no menu pop-up. A caixa de dilogo Delete Record exibida.
2.
3.
O Dreamweaver adiciona pgina um comportamento de servidor que permite aos usurios excluir registros em uma tabela de banco de dados clicando no boto Submit.
1048
Criar pginas com objetos avanados de manipulao de dados (ASP e JSP)

possvel utilizar o Dreamweaver para criar pginas que utilizam procedimentos armazenados, objetos de comando ASP e instrues preparadas JSP.
Utilizar procedimentos armazenados para modificar bancos de dados (ASP e JSP)

N OT A
Os bancos de dados mySQL e Microsoft Access no 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 documentao do banco de dados e um bom manual sobre Transact-SQL. A forma de utilizao de um procedimento armazenado varia em funo do modelo de servidor. Tpicos relacionados Procedimentos armazenados na pgina 913
Executar um procedimento armazenado (ASP)

Com as pginas ASP, necessrio adicionar um objeto de comando a uma pgina para executar um procedimento armazenado. Para obter mais informaes sobre objetos de comando, consulte Objetos de comando, ASP na pgina 914.
Para adicionar um procedimento armazenado a uma pgina ASP:
1. 2.
No Dreamweaver, abra a pgina onde o procedimento armazenado ser executado. No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+) e selecione Command (Stored Procedure) [Comando (Procedimento armazenado)]. A caixa de dilogo Command exibida.
1049
3.
Digite um nome para o comando, selecione uma conexo ao banco de dados que contm o procedimento armazenado e selecione Stored Procedure no menu pop-up Type (Tipo). Selecione o procedimento armazenado expandindo a ramificao Stored Procedures (Procedimentos armazenados) na caixa Database Itens (Itens de banco de dados), selecionando o procedimento armazenado na lista e clicando no boto Procedure (Procedimento). Insira os parmetros necessrios na tabela Variables (Variveis). No necessrio inserir parmetros para a varivel RETURN_VALUE. Clique em OK.
4.
5.
6.
Quando voc fecha a caixa de dilogo, o Dreamweaver insere o cdigo ASP em sua pgina 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 operao de banco de dados, como inserir um registro. Por padro, o cdigo define a propriedade Prepared (Preparado) do objeto de comando como true, o que faz o servidor de aplicativos reutilizar uma nica verso compilada do objeto sempre que o procedimento armazenado for executado. Se o comando tiver de ser executado diversas vezes, uma nica verso compilada do objeto pode melhorar a eficincia de operaes 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 configurao, alterne para a visualizao do cdigo e modifique a propriedade Prepared para false.
N OT A 1050
Nem todos os provedores de banco de dados oferecem suporte a comandos preparados. Se o banco de dados no tiver suporte para esses comandos, uma mensagem de erro poder surgir quando voc executar a pgina. Alterne para a visualizao do cdigo e modifique a propriedade Prepared para false.
Se o procedimento armazenado exigir parmetros, possvel criar uma pgina para reunir os valores de parmetros e os submeter em seguida pgina com o procedimento armazenado. Por exemplo: possvel criar uma pgina que utiliza parmetros da URL ou formulrio HTML para coletar valores de parmetro de usurios.
Executar um procedimento armazenado (JSP)

Com as pginas JSP, necessrio adicionar um comportamento de servidor Callable (Chamvel) a uma pgina para executar um procedimento armazenado.
Para adicionar um procedimento armazenado a uma pgina JSP:

1. 2.
No Dreamweaver, abra a pgina onde o procedimento armazenado ser executado. No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+) e selecione Callable (Stored Procedure) [Chamvel (Procedimento armazenado)]. A caixa de dilogo Callable (Stored Procedure) exibida. Preencha a caixa de dilogo. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
3.
4.
Aps fechar a caixa de dilogo Callable (Stored Procedure), o Dreamweaver insere o cdigo JSP na pgina de modo que, ao ser executado no servidor, chamar um procedimento armazenado no banco de dados. O procedimento armazenado, por sua vez, executa uma operao de banco de dados, como inserir um registro. Se o procedimento armazenado exigir parmetros, possvel criar uma pgina para reunir os valores de parmetros e os submeter em seguida pgina com o procedimento armazenado. Por exemplo: possvel criar uma pgina que utiliza parmetros da URL ou formulrio HTML para coletar valores de parmetro de usurios.
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. Um objeto de comando um objeto de servidor que executa algumas operaes em um banco de dados. O objeto de comando pode ser fornecido com a instruo SQL que executa a operao no banco de dados. Para obter mais informaes, consulte Objetos de comando, ASP na pgina 914. Tambm possvel fornecer o objeto com um procedimento armazenado que execute a operao. Para obter mais informaes, consulte Executar um procedimento armazenado (ASP) na pgina 1049.
Para criar um objeto de comando que utilize SQL para editar um banco de dados:
1. 2.
No Dreamweaver, abra a pgina ASP onde que ir executar o comando. Abra o painel Server Behaviors (Comportamentos de servidor), em Window (Janela) > Server Behaviors, clique no boto com sinal de adio (+) e selecione Command (Comando). A caixa de dilogo Command exibida.
1051
3.
Digite um nome para o comando, selecione uma conexo para o banco de dados contendo os registros que deseja editar e selecione a operao de edio que deseja efetuar: Insert (Inserir), Update (Atualizar) ou Delete (Excluir). O Dreamweaver inicia a instruo SQL com base no tipo de operao selecionada. Por exemplo, se voc selecionar Insert, a caixa de dilogo ter a seguinte aparncia:
4.
Preencha a instruo SQL. Para obter mais informaes sobre como criar instrues SQL para modificar bancos de dados, consulte um manual Transact-SQL.
5.
Use a rea Variables (Variveis) para definir qualquer varivel de SQL. O exemplo a seguir exibe uma instruo Insert que contm trs variveis SQL. Os valores dessas variveis so fornecidos por parmetros da URL repassados pgina, conforme definidos na coluna Run-time Value (Valor em tempo de execuo) da rea Variables (Variveis).
Aps fechar a caixa de dilogo, o Dreamweaver insere o cdigo ASP em sua pgina de modo que, ao ser executado no servidor, cria um comando que insere, atualiza ou exclui registros no banco de dados.
1052
Por padro, o cdigo define a propriedade Prepared (Preparado) do objeto de comando para true, que faz o servidor de aplicativos reutilizar uma nica verso compilada do objeto sempre que o comando for executado. Para alterar esta configurao, alterne para a visualizao do cdigo e modifique a propriedade Prepared para false. Seguindo o exemplo anterior, provavelmente uma pgina com um formulrio HTML seria ento criada, de modo que os usurios pudessem digitar dados de registro. O formulrio HTML conteria trs campos de texto (txtCity, txtAddress e txtPhone) e um boto de envio. O formulrio utilizaria o mtodo GET e enviaria os valores do campo de texto pgina que contm o comando.
Utilizar as instrues preparadas JSP para modificar um banco de dados

O Dreamweaver pode ser utilizado para criar instrues preparadas JSP para inserir, atualizar ou excluir registros em um banco de dados. Uma instruo JSP preparada um objeto de servidor reutilizvel que contm uma instruo SQL. A instruo preparada pode ser fornecida com o SQL que executa a operao no banco de dados. Para obter mais informaes, consulte Instrues preparadas, JSP na pgina 914.
Para criar uma instruo preparada que edita um registro de banco de dados:
1. 2.
No Dreamweaver, abra a pgina JSP que ir executar o comando. Abra o painel Server Behaviors (Comportamentos de servidor), em Window (Janela) > Server Behaviors, clique no boto com o sinal de adio (+) e selecione Prepared (Insert, Update, Delete) [Preparado (Inserir, Atualizar, Excluir)]. Ser exibida a caixa de dilogo Prepared (Insert, Update, Delete): Preencha a caixa de dilogo. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK.
3.
4.
Aps fechar a caixa de dilogo, o Dreamweaver insere o cdigo JSP em sua pgina de modo que, ao ser executado no servidor, cria uma instruo preparada que insere, atualiza ou exclui registros no banco de dados.
1053
Criar pginas que restrinjam o acesso ao site (ASP e JSP)

O Dreamweaver pode ser utilizado para criar um conjunto de pginas que restrinjam o acesso ao site. O mtodo idntico quele utilizado para o ColdFusion. Para obter instrues, consulte Criar pginas que restrinjam o acesso ao site (ColdFusion, ASP, JSP, PHP) na pgina 966.
Utilizar o JavaBeans (JSP)

Os componentes JavaBeans so elementos da arquitetura de aplicativos JSP em vrias camadas. Normalmente, esses componentes so utilizados como parte de uma camada intermediria de lgica de negcios, que efetua a transio da lgica de acesso de dados para a lgica de apresentao. Nesses aplicativos, os componentes de software reutilizveis para Java (e no as pginas JSP) contm a lgica que acessa diretamente o banco de dados. No Dreamweaver, os componentes de software reutilizveis para Java so tratados como fontes de contedo dinmico das pginas JSP e so exibidos no painel Bindings (Ligaes). possvel clicar duas vezes nos componentes de software reutilizveis para Java, no painel Bindings, para exibir as suas propriedades e, em seguida, arrast-las at a pgina, criando assim as referncias aos dados dinmicos. Pode-se definir tambm um conjunto de componentes de software reutilizveis para Java como uma fonte de contedo dinmico. Contudo, o Dreamweaver oferece suporte apenas s regies repetitivas e s ligaes dinmicas quando so utilizados os conjuntos de componentes de software reutilizveis para Java. As cpias da classe dos componentes de software reutilizveis para Java (ou do arquivo com extenso .zip ou .jar, contendo a classe dos componentes) devem residir nos seguintes locais:
No sistema que estiver executando o Dreamweaver, uma cpia da classe dos componentes de software reutilizveis para Java deve ficar residente na pasta Configuration/classes (Configurao/classes) do Dreamweaver ou no caminho da classe do sistema. O Dreamweaver utiliza essa cpia da classe em tempo de projeto. No sistema que estiver executando o servidor do aplicativo JSP, a classe dos componentes de software reutilizveis para Java deve residir no caminho da classe do servidor do aplicativo. O servidor do aplicativo utiliza essa cpia da classe em tempo de execuo. O caminho da classe do servidor de aplicativos varia de um servidor de aplicativos para outro, mas geralmente leva a uma pasta WEB-INF com uma subpasta classes/bean.
1054
Se o Dreamweaver e o servidor do aplicativo estiverem sendo executados no mesmo sistema e o servidor do aplicativo utilizar o caminho de classe do sistema (e no um caminho de classe interno), uma nica cpia da classe dos componentes de software reutilizveis para Java poder residir no computador, no caminho da classe do sistema. Tanto o servidor de aplicativos como o Dreamweaver utilizaro esta cpia da classe. Caso contrrio, as cpias da classe dos componentes de software reutilizveis para Java devero residir em dois caminhos no computador, como descrito acima. A estrutura da pasta deve corresponder ao pacote de componentes de software reutilizveis para Java. Por exemplo, se o pacote de componentes de software reutilizveis para Java for denominado com.ardvark.myBean, ele dever ser armazenado em /com/ardvark/ no caminho de classe ou na pasta Configuration/classes do Dreamweaver.
Para definir um componente de software reutilizvel para Java de uma pgina JSP:
1. 2.
Selecione Window (Janela) > Bindings (Ligaes) para exibir o painel Bindings. Clique no boto com o sinal de adio (+) e selecione JavaBean (Componente de software reutilizvel para Java) no menu pop-up. Ser exibida a caixa de dilogo JavaBean.
3.
Preencha a caixa de dilogo e clique em OK. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. O componente de software reutilizvel para Java recm-definido exibido no painel Bindings.
4.
Utilizar o JavaBeans (JSP)
1055
Para definir um componente de software reutilizvel para Java de uma pgina JSP:
1. 2.
Selecione Window (Janela) > Bindings (Ligaes) para exibir o painel Bindings. Clique no boto com o sinal de adio (+) e selecione JavaBean (Componente de software reutilizvel para Java) no menu pop-up. Ser exibida a caixa de dilogo JavaBean Collection.
3.
Preencha a caixa de dilogo e clique em OK. Para obter instrues, clique no boto Help (Ajuda). O componente de software reutilizvel para Java recm-definido ser exibido no painel Bindings.
4.
1056
CAPTULO 43
Criar aplicativos PHP rapidamente

As ferramentas do Macromedia Dreamweaver 8 podem ser utilizadas para criar rapidamente um aplicativo PHP para a Web, com pouca ou nenhuma codificao. Tpicos relacionados Sobre o desenvolvimento rpido de aplicativos (todos os servidores) na pgina 909
43
Criar pginas-mestras/detalhes (PHP)

Com o Dreamweaver, possvel criar conjuntos de pginas que apresentam informaes em dois nveis de detalhe: uma pgina mestra que relaciona registros e uma pgina de detalhes que apresenta mais detalhes sobre cada registro. Esta seo descreve como criar esses tipos de pginas-mestras/detalhes.
Criar pginas-mestras/detalhes em uma operao (PHP)

Ao desenvolver aplicativos PHP, possvel criar rapidamente pginas-mestras/detalhes utilizando o objeto de aplicativo Master/Detail Page Set (Conjunto de pginas-mestras/ detalhes). Com o objeto de aplicativo possvel criar um conjunto completo de pginas dinmicas simplesmente preenchendo uma ou duas caixas de dilogo. O mtodo idntico quele utilizado para o ColdFusion. Para obter instrues, consulte Criar pginas-mestras/detalhes em uma operao (ColdFusion, ASP, JSP, PHP) na pgina 928. Tambm possvel criar pginas-mestras/detalhes utilizando comportamentos de servidor individuais.
1057
Criar pginas-mestras/detalhes bloco a bloco (PHP)

possvel adicionar separadamente os blocos de criao bsicos das pginas-mestras/detalhes utilizando o painel Server Behaviors (Comportamentos de servidor). Os blocos de criao tambm podem ser adicionados simultaneamente por meio do objeto de aplicativo Master/Detail Page Set (Conjunto de pginas-mestras/detalhes). Para obter mais informaes, consulte Criar pginas-mestras/detalhes em uma operao (PHP) na pgina 1057. Esta seo descreve as etapas para a criao de um conjunto de pginas-mestras/detalhes:

Criar a pgina mestra (PHP) na pgina 1058 Criar links para a pgina de detalhes (PHP) na pgina 1060 Criar um parmetro da URL para os links (PHP) na pgina 1061 Localizar e exibir o registro solicitado na pgina de detalhes (PHP) na pgina 1062
Criar a pgina mestra (PHP)

Esta seo descreve como criar uma pgina mestra que contenha registros de banco de dados. possvel utilizar uma tabela dinmica para listar os registros em uma pgina PHP. Antes de iniciar, certifique-se de definir uma conexo de banco de dados para o site. Para obter mais informaes, consulte Captulo 28, Conexes de banco de dados para desenvolvedores PHP, na pgina 705.
1.
No Dreamweaver, crie uma nova pgina PHP. Selecione File (Arquivo) > New (Novo) > Dynamic (Dinmico), selecione PHP e clique em Create (Criar). Ser aberta no Dreamweaver uma pgina PHP em branco.
2.
Defina um recordset para a pgina. No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+), selecione Recordset (Query) [Recordset (Consulta)] e preencha a caixa de dilogo Recordset. Para obter mais informaes, clique no boto Help (Ajuda) da caixa de dilogo. Para codificar a sua prpria instruo SQL, clique no boto Advanced (Avanado) para abrir a caixa de dilogo avanada Recordset.
1058
Captulo 43: Criar aplicativos PHP rapidamente
Certifique-se de que o recordset contenha todas as colunas da tabela necessrias para criar a tabela dinmica. O recordset deve incluir tambm a coluna da tabela que contm a chave exclusiva de cada registro ou seja, a coluna de identificao do registro. No exemplo a seguir, a coluna CODE (CDIGO) contm informaes que identificam cada registro de modo exclusivo.
Normalmente, o recordset na pgina mestra extrai algumas colunas de uma tabela de banco de dados, enquanto o recordset na pgina detalhes extrai mais colunas da mesma tabela para fornecer mais detalhes. O recordset pode ser definido em tempo de execuo pelo usurio. Para obter mais informaes, consulte Criar pginas de busca/resultados (PHP) na pgina 1064.
3.
Insira uma tabela dinmica para exibir os registros na pgina. Posicione o ponto de insero no local em que deseja que a tabela dinmica seja exibida na pgina e selecione Insert (Inserir) > Application Objects (Objetos de aplicativo) > Dynamic Data (Dados dinmicos) > Dynamic Table (Tabela dinmica). Ser exibida a caixa de dilogo Dynamic Table.
1059
4.
Preencha a caixa de dilogo Dynamic Table e clique em OK. O Dreamweaver inserir uma tabela dinmica na pgina. Se precisar de ajuda para preencher a caixa de dilogo Dynamic Table, clique no boto Help na caixa de dilogo.
5.
Se desejar, exclua a coluna da tabela dinmica que contm as identificaes de registro. Se no desejar que as identificaes de registro sejam exibidas aos usurios, exclua a coluna da tabela dinmica. Clique em qualquer ponto da pgina para mover o foco para a pgina. Mova o ponteiro prximo parte superior da coluna na tabela dinmica at que as clulas da coluna sejam exibidas com um contorno vermelho. Em seguida, clique para selecionar a coluna da tabela. Pressione a tecla Delete para excluir a coluna da tabela.
A prxima etapa na criao de pginas-mestras/detalhes criar links que abram a pgina de detalhes.
Criar links para a pgina de detalhes (PHP)

Depois de criar a tabela dinmica , ser necessrio criar os links que abrem a pgina de detalhes. Esta seo descreve como criar esses links. A seo a seguir descreve como modificar o link de modo que ele tambm repasse a identificao do registro selecionado pelo usurio. A pgina de detalhes usar essa identificao para localizar o registro solicitado no banco de dados e exibi-lo.
Para criar links para a pgina de detalhes:
1.
Na tabela dinmica, selecione o alocador de espao do contedo dinmico do texto que deseja exibir como link. No exemplo a seguir, o alocador de espao {rsLocations.LOCATION_NAME} est selecionado. Os links sero aplicados aos nomes de local na coluna.
2.
No Property inspector (Inspetor de propriedades), clique no cone da pasta ao lado do campo Link.
1060
3.
Procure e selecione a pgina de detalhes. A pgina de detalhes ser exibida no campo Link. Na tabela dinmica, o alocador de espao do contedo dinmico exibido como um link. Se a pgina for executada em um servidor, voc ver que o link aplicado ao texto em todas as linhas da tabela.
A prxima etapa na criao de pginas-mestras/detalhes criar um parmetro da URL para repassar a identificao do registro selecionado pelo usurio.
Criar um parmetro da URL para os links (PHP)

Alm de abrir a pgina de detalhes, os links da tabela dinmica na pgina mestra tambm devem repassar a identificao do registro selecionado pelo usurio. A pgina de detalhes usar essa identificao para localizar o registro solicitado no banco de dados e exibi-lo. A identificao de registro repassada para a pgina de detalhes em um parmetro da URL. Para obter mais informaes, consulte Parmetros da URL na pgina 749. Esta seo descreve como criar um parmetro da URL que repasse uma identificao do registro para a pgina de detalhes.
1.
Selecione o link na tabela dinmica. Se o Live Data (Dados ativos) estiver ativado, selecione o link na primeira linha. No campo Link do Property inspector (Inspetor de propriedades), adicione a seguinte seqncia de caracteres ao final da URL:
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
2.
O ponto de interrogao informa o servidor de que haver um ou mais parmetros da URL. A palavra recordID o nome do parmetro de URL (voc pode usar qualquer nome de sua preferncia). Anote o nome do parmetro da URL, pois ele ser utilizado na pgina de detalhes posteriormente. A expresso aps o sinal de igual o valor do parmetro. Neste caso, o valor gerado por uma expresso PHP que retorna uma identificao de registro do recordset. gerada uma identificao diferente para cada linha na tabela dinmica. Na expresso PHP, substitua recordsetName pelo nome do recordset e fieldName pelo nome do campo do recordset que identifica cada registro de modo exclusivo. Na maioria dos casos, o campo consistir em um nmero de identificao de registro. No exemplo a seguir, o campo consiste em cdigos de local exclusivos.
locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
1061
Quando a pgina for executada, os valores do campo CODE (CDIGO) do recordset sero inseridos nas linhas correspondentes da tabela dinmica. Por exemplo, se o local de locao Canberra, na Austrlia, apresentar o cdigo CBR, ser utilizada a seguinte URL na linha Canberra da tabela dinmica:
locationDetail.php?recordID=CBR 3.
Salve a pgina.
A etapa seguinte na criao de pginas-mestras/detalhes modificar a pgina de detalhes para que ela possa localizar o registro solicitado no banco de dados e exibi-lo.
Localizar e exibir o registro solicitado na pgina de detalhes (PHP)

Depois de preencher a pgina mestra , alterne para a pgina de detalhes. necessrio localizar o registro solicitado no banco de dados e exibi-lo na pgina. O procedimento consiste em definir um recordset para manter um nico registro (o registro solicitado pela pgina mestra) e ligar as colunas do recordset pgina.
1. 2.
Alterne para a pgina de detalhes ou crie uma nova pgina PHP, se ainda no existir. No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+) e selecione Recordset (Query) [Recordset (Consulta)] no menu pop-up. Ser exibida a caixa de dilogo Recordset simples. Se em vez dela for exibida a caixa de dilogo Recordset avanada, clique em Simple (Simples) para alternar para a caixa de dilogo Recordset simples.
3.
Atribua um nome ao recordset e selecione uma conexo e a tabela de banco de dados que fornecero dados ao recordset. Na rea Columns (Colunas), selecione as colunas da tabela a serem includas no recordset. O recordset pode ser idntico ou diferente do recordset na pgina mestra. Normalmente, um recordset de uma pgina de detalhes possui mais colunas para exibir mais detalhes. Se os recordsets forem diferentes, certifique-se de que o recordset da pgina de detalhes contenha pelo menos uma coluna em comum com o recordset da pgina mestra. Normalmente, a coluna em comum a coluna de identificao do registro, mas pode ser tambm o campo de juno das tabelas relacionadas. Para incluir apenas algumas das colunas da tabela no recordset, clique em Selected (Selecionado) e escolha as colunas desejadas clicando na lista e pressionando simultaneamente a tecla Control (no Windows) ou Command (no Macintosh).
4.
1062
5.
No primeiro menu pop-up da rea Filter, selecione a coluna do conjunto de dados que contm os valores correspondentes ao valor do parmetro da URL repassado pela pgina mestra. Por exemplo: se o parmetro da URL contiver um nmero de identificao de registro, selecione a coluna que contm os nmeros de identificao de registro. No exemplo analisado na seo anterior, a coluna do recordset chamada CODE (CDIGO) contm os valores correspondentes ao valor do parmetro da URL repassado pela pgina mestra. Selecione o sinal de igual (caso ainda no esteja selecionado) no menu pop-up ao lado do primeiro menu. Selecione URL Parameter (Parmetro da URL) no terceiro menu pop-up. A pgina mestra utiliza um parmetro da URL para repassar informaes para a pgina de detalhes.
Na quarta caixa, digite o nome do parmetro da URL repassado pela pgina mestra. Por exemplo, se a URL utilizada pela pgina mestra para abrir a pgina de detalhes incluir o sufixo locationDetail.php?recordID=CBR, digite recordID.
6.
Clique em OK. O recordset exibido no painel Bindings. Ligue as colunas do recordset pgina de detalhes, selecionando-as no painel Bindings (Window > Bindings) e arrastando-as at a pgina. Para obter mais informaes, consulte Tornar dinmico o texto na pgina 783.
7.
1063
A pgina mestra/detalhes PHP definida est concluda. Aps a criao das pginas-mestras/detalhes, possvel usar o painel Server Behaviors (Window > Server Behaviors) para modificar os vrios blocos de criao.
Criar pginas de busca/resultados (PHP)

O Dreamweaver pode ser utilizado para criar um conjunto de pginas que permitam que os usurios efetuem buscas no banco de dados. O mtodo idntico quele utilizado para o ColdFusion. Para obter instrues, consulte Criar pginas de busca/resultados (ColdFusion, ASP, JSP, PHP) na pgina 937.
Criar uma pgina de insero de registros (PHP)

Criar pginas para atualizar um registro (PHP)


Procurar o registro a ser atualizado (PHP) na pgina 1065 Criar links para abrir a pgina de atualizao (PHP) na pgina 1065 Criar um parmetro da URL para os links (PHP) na pgina 1061 Recuperar o registro a ser atualizado (PHP) na pgina 1067 Preencher a pgina de atualizao em uma operao (PHP) na pgina 1068 Preencher a pgina de atualizao bloco a bloco (PHP) na pgina 1069
1064
Criar pginas para excluir um registro (PHP) na pgina 1072
Procurar o registro a ser atualizado (PHP)

Quando os usurios desejam atualizar um registro, necessrio localiz-lo primeiro no banco de dados. Da mesma forma, so necessrias as pginas de busca e de resultados para funcionarem com a pgina de atualizao. Os critrios de busca so digitados na pgina de busca e o registro selecionado na pgina de resultados. Quando o usurio clica no registro, a pgina de atualizao aberta e exibe o registro em um formulrio HTML. Para obter instrues sobre a criao de pginas de busca do registro a ser atualizado, consulte Criar pginas de busca/resultados (PHP) na pgina 1064. Aps criar as pginas de busca/resultados, a prxima etapa criar links na pgina de resultados que, ao serem clicados, abrem a pgina de atualizao.
Criar links para abrir a pgina de atualizao (PHP)

Aps criar as pginas de busca/resultados , necessrio criar links na pgina de resultados para abrir a pgina de atualizao e exibir o registro selecionado em um formulrio HTML. Esta seo descreve como criar esses links. A seo a seguir descreve como modificar o link de modo que ele tambm repasse a identificao do registro selecionado pelo usurio. A pgina de atualizao utilizar essa identificao para localizar o registro solicitado no banco de dados e exibi-lo.
Para criar os links para a pgina de atualizao:
1.
Na pgina de resultados, selecione o alocador de espao do contedo dinmico do texto a ser exibido como link. No exemplo a seguir, o alocador de espao {rsLocations.LOCATION_NAME} est selecionado. Os links sero aplicados aos nomes de local na coluna.
2.
No Property inspector (Inspetor de propriedades), clique no cone da pasta ao lado do campo Link.
1065
3.
Procure e selecione a pgina de atualizao. A pgina de atualizao ser exibida no campo Link. Na pgina de resultados, o alocador de espao do contedo dinmico exibido como um link. Se fizer o upload das pginas no servidor e executar uma busca, voc ver que o link aplicado a todos os registros da pgina de resultados.
A prxima etapa na criao de uma pgina de atualizao de registro criar um parmetro da URL para repassar a identificao do registro selecionado pelo usurio.
Criar um parmetro da URL para os links de atualizao (PHP)

Alm de abrir a pgina de atualizao, os links da pgina de resultados tambm devem repassar a identificao do registro selecionado pelo usurio. A pgina de atualizao utilizar essa identificao para localizar o registro solicitado no banco de dados e exibi-lo. A identificao do registro repassada para a pgina de atualizao em um parmetro da URL. Para obter mais informaes, consulte Parmetros da URL na pgina 749. Esta seo descreve como criar um parmetro da URL que repasse uma identificao do registro para a pgina de atualizao.
1. 2.
Selecione o link na pgina de resultados. No campo Link do Property inspector (Inspetor de propriedades), adicione a seguinte seqncia de caracteres ao final da URL:
O ponto de interrogao informa o servidor de que haver um ou mais parmetros da URL. A palavra recordID o nome do parmetro da URL (voc pode criar qualquer nome de sua preferncia). Anote o nome do parmetro da URL, pois ele ser utilizado na pgina de atualizao posteriormente. A expresso aps o sinal de igual o valor do parmetro. Neste caso, o valor gerado por uma expresso PHP que retorna uma identificao de registro do recordset. gerada uma identificao diferente para cada linha na tabela dinmica. Na expresso PHP, substitua recordsetName pelo nome do recordset e fieldName pelo nome do campo do recordset que identifica cada registro de modo exclusivo. Na maioria dos casos, o campo consistir em um nmero de identificao de registro. No exemplo a seguir, o campo consiste em cdigos de local exclusivos.
locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
1066
locationDetail.php?recordID=CBR 3.
Salve a pgina.
A prxima etapa modificar a pgina de atualizao para que ela possa localizar o registro solicitado no banco de dados e exibi-lo.
Recuperar o registro a ser atualizado (PHP)

1.
Crie uma nova pgina PHP no Dreamweaver e salve-a. Essa pgina ser a pgina de atualizao. No painel Bindings (Ligaes), em Window (Janela) > Bindings, clique no boto com sinal de adio (+) e selecione Recordset. Se a caixa de dilogo avanada for exibida, clique no boto Simple (Simples) para abrir a caixa de dilogo simples.
2.
3.
Atribua um nome ao recordset e especifique o local onde esto os dados a serem atualizados utilizando os menus pop-up Connection (Conexo) e Table (Tabela). Clique na opo Selected (Selecionado) e escolha uma coluna de chave (em geral, a coluna de identificao de registro) e as colunas que contm os dados a serem atualizados. Configure a rea Filter (Filtro) para que o valor da coluna de chave seja igual ao valor do parmetro da URL correspondente repassado pela pgina de resultados.
4.
5.
1067
Este tipo de filtro cria um recordset que contm apenas o registro especificado pela pgina de resultados. Por exemplo: se a coluna-chave contiver informaes de identificao de registro e for chamada PRID e se a pgina de resultados repassar as informaes de identificao de registro correspondentes no parmetro da URL id, a rea Filter ter a seguinte aparncia:
6.
Clique em OK.
Quando o usurio selecionar um registro na pgina de resultados, a pgina de atualizao produzir um recordset contendo apenas o registro selecionado. Depois de modificar a pgina de atualizao para recuperar um registro do banco de dados e armazen-lo em um recordset, necessrio adicionar um formulrio para que os usurios possam modificar os dados do registro e a lgica necessria para atualizar o banco de dados. Essas tarefas podem ser realizadas em uma operao ou bloco a bloco. Consulte Preencher a pgina de atualizao em uma operao (PHP) na pgina 1068 ou Preencher a pgina de atualizao bloco a bloco (PHP) na pgina 1069.
Preencher a pgina de atualizao em uma operao (PHP)

Um recordset filtrado para recuperar o registro a partir de uma tabela de banco de dados (consulte Recuperar o registro a ser atualizado (PHP) na pgina 1067). Um formulrio HTML que permite aos usurios modificar os dados do registro Um comportamento de servidor Update Record (Atualizar registro) para atualizar a tabela de banco de dados.
Os dois blocos de criao finais de uma pgina de atualizao podem ser adicionados em uma nica operao utilizando o objeto de aplicativo Record Update Form (Formulrio de atualizao de registros). O objeto de aplicativo adiciona pgina um formulrio HTML e um comportamento de servidor Update Record. Para que o objeto de aplicativo possa ser utilizado, o aplicativo para a Web deve identificar o registro a ser atualizado e a pgina de atualizao deve ser capaz de recuper-lo. Consulte Procurar o registro a ser atualizado (PHP) na pgina 1065, Criar links para abrir a pgina de atualizao (PHP) na pgina 1065, Criar um parmetro da URL para os links (PHP) na pgina 1061 e Recuperar o registro a ser atualizado (PHP) na pgina 1067.
1068
Aps o objeto de aplicativo colocar os blocos de criao na pgina, utilize as ferramentas de projeto do Dreamweaver para personalizar o formulrio de acordo com suas preferncias ou o painel Server Behaviors para editar o comportamento de servidor Update Record.
NO TA
A pgina de atualizao pode conter apenas um comportamento de servidor de edio de registros de cada vez. Por exemplo, no possvel adicionar um comportamento de servidor Insert Record ou Delete Record na pgina de atualizao.
1.
Abra a pgina de atualizao na visualizao do projeto e selecione Insert > Application Objects > Update Record > Record Update Form Wizard. Ser exibida a caixa de dilogo Record Update Form (Formulrio de atualizao de registros).
2.
3.
Preencher a pgina de atualizao bloco a bloco (PHP)

Um recordset filtrado para recuperar o registro a partir de uma tabela de banco de dados (consulte Recuperar o registro a ser atualizado (PHP) na pgina 1067). Um formulrio HTML que permite aos usurios modificar os dados do registro Um comportamento de servidor Update Record (Atualizar registro) para atualizar a tabela de banco de dados.
Os dois blocos de criao bsicos finais de uma pgina de atualizao podem ser adicionados separadamente utilizando as ferramentas de formulrio e o painel Server Behaviors (Comportamentos de servidor).
1069
Antes de adicionar os blocos, o aplicativo da Web deve identificar o registro a ser atualizado e a pgina de atualizao deve ser capaz de recuper-lo. Consulte Procurar o registro a ser atualizado (PHP) na pgina 1065, Criar links para abrir a pgina de atualizao (PHP) na pgina 1065, Criar um parmetro da URL para os links (PHP) na pgina 1061 e Recuperar o registro a ser atualizado (PHP) na pgina 1067. O preenchimento da pgina de atualizao consiste em trs etapas:

1.
Crie uma nova pgina PHP, em File (Arquivo) > New (Novo). Essa pgina ser a pgina de atualizao. Crie o layout da pgina com as ferramentas de projeto do Dreamweaver. Adicione um formulrio HTML posicionando o ponto de insero no local em que deseja exibir o formulrio e selecione Form (Formulrio) no menu Insert (Inserir). Um formulrio vazio criado na pgina. Pode ser necessrio ativar Invisible Elements (Elementos invisveis), em View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements, para exibir os limites do formulrio, que so representados por linhas finas vermelhas.
2. 3.
4.
5.
Adicione um objeto de formulrio, como um campo de texto, em Insert > Form > Text Field, para cada coluna que deseja atualizar na tabela de banco de dados. Os objetos de formulrio destinam-se entrada de dados. Os campos de texto servem comumente a esse objetivo, mas tambm possvel usar menus, caixas de seleo e botes de opo.
1070
A cada objeto de formulrio deve corresponder uma coluna no recordset definido anteriormente. A nica exceo a coluna de chave exclusiva, qual no deve corresponder nenhum objeto de formulrio. Para obter mais informaes, consulte Inserir objetos de formulrio HTML na pgina 892.
6.
Adicione ao formulrio um boto Submit, a partir de Insert > Form > Button (Boto). O identificador do boto Submit pode ser alterado do seguinte modo: selecione o boto, abra o Property inspector, em Window > Properties, e digite um novo valor na caixa Label (Identificador).

1.
Certifique-se de ter definido um recordset para conter o registro que o usurio deseja atualizar. Para obter mais informaes, consulte Recuperar o registro a ser atualizado (PHP) na pgina 1067.
2.


1.
No painel Server Behaviors, em Window > Server Behaviors, clique no boto com sinal de adio (+) e selecione Update Record no menu pop-up. Ser exibida a caixa de dilogo Update Record. Preencha a caixa de dilogo. Para obter instrues, clique no boto Help (Ajuda) da caixa de dilogo. Clique em OK. O Dreamweaver adiciona pgina um comportamento de servidor que permite aos usurios atualizar registros em um banco de dados clicando no boto Submit no formulrio.
2.
3.
1071
Para editar o comportamento de servidor, abra o painel Server Behaviors, em Window > Server Behaviors, e clique duas vezes no comportamento Update Record. Tpicos relacionados Preencher a pgina de atualizao em uma operao (PHP) na pgina 1068.
Criar pginas para excluir um registro (PHP)

O aplicativo pode conter um conjunto de pginas que permite que os usurios excluam registros de um banco de dados. As pginas normalmente consistem em uma pgina de busca, uma pgina de resultados e uma pgina de excluso. A pgina de busca e a pgina de resultados permitem recuperar o registro e a pgina de excluso permite exclu-lo. Esta seo descreve as seguintes etapas da criao de pginas PHP para excluir registros:

Procurar o registro a ser excludo (PHP) na pgina 1072 Criar links para uma pgina de confirmao (PHP) na pgina 1073 Criar um parmetro da URL a ser repassado para a pgina de confirmao (PHP) na pgina 1074 Exibir o registro na pgina de confirmao (PHP) na pgina 1075 Adicionar lgica para excluir o registro (PHP) na pgina 1079
Procurar o registro a ser excludo (PHP)

Quando os usurios planejam excluir um registro, necessrio localiz-lo primeiro no banco de dados. Da mesma forma, so necessrias as pginas de busca e de resultados para funcionarem com a pgina de excluso. Os critrios de busca so digitados na pgina de busca e o registro selecionado na pgina de resultados. Quando o usurio clica no registro, a pgina de excluso aberta e exibe o registro. Para obter instrues sobre a criao de pginas de busca do registro a ser excludo, consulte Criar pginas de busca/resultados (PHP) na pgina 1064. Aps a criao das pginas de busca/resultados, a prxima etapa consiste em criar links na pgina de resultados para abrir a pgina de confirmao de excluso.
1072
Criar links para uma pgina de confirmao (PHP)

Aps criar a pgina de resultados, voc deve criar links em que o usurio possa clicar para abrir uma pgina de confirmao de excluso. Esta seo descreve como criar esses links. A seo a seguir descreve como modificar o link de modo que ele tambm repasse a identificao do registro que o usurio deseja excluir.
Para criar links para uma pgina de confirmao:
1.
Na pgina de resultados, crie uma nova coluna na tabela utilizada para exibir registros clicando na ltima coluna da tabela e selecionando Modify (Modificar) > Table (Tabela) > Insert Rows or Columns (Inserir linhas ou colunas). Ser exibida a caixa de dilogo Insert Rows or Columns. Selecione a opo Columns (Colunas) e After Current Column (Depois da coluna atual).
2.
Depois que voc clicar em OK, o Dreamweaver adicionar uma coluna tabela.
3.
Na coluna recm-criada da tabela, digite a seqncia de caracteres Delete (Excluir) na linha que contm os alocadores de espao do contedo dinmico. Certifique-se de digitar a seqncia de caracteres dentro da regio repetida com guias. Tambm possvel inserir uma imagem com uma palavra ou smbolo para excluso. Se o Live Data (Dados ativos) estiver ativado, digite a seqncia de caracteres na primeira linha dos registros e clique no cone Refresh (Atualizar).
4.
Selecione a seqncia de caracteres Delete para aplicar um link a ela. Se o Live Data estiver ativado, selecione a seqncia de caracteres na primeira linha de registros.
5.
No Property inspector (Inspetor de propriedades), digite a pgina de confirmao no campo Link. possvel digitar qualquer nome de arquivo desejado.
Depois que voc clicar fora do campo Link, a seqncia de caracteres Delete ser exibida na tabela como um link. Aps criar os links, a prxima etapa na criao de uma pgina de excluso de registros criar parmetros da URL para os links.
1073
Criar um parmetro da URL a ser repassado para a pgina de confirmao (PHP)

Alm de abrir a pgina de confirmao, os links da pgina de resultados tambm devem repassar a identificao do registro que o usurio deseja excluir. A pgina de confirmao utilizar essa identificao para localizar o registro no banco de dados e exibi-lo. necessrio repassar a identificao do registro para a pgina de confirmao com um parmetro da URL. Esta seo descreve como criar um parmetro da URL para repassar a identificao do registro para a pgina de confirmao.
1.
Selecione o link Delete (Excluir) na pgina de resultados. Se o Live Data (Dados ativos) estiver ativado, selecione o link na primeira linha. No campo Link do Property inspector (Inspetor de propriedades), adicione a seguinte seqncia de caracteres ao final da URL:
2.
O ponto de interrogao informa o servidor de que haver um ou mais parmetros da URL. A palavra recordID o nome do parmetro da URL (voc pode criar qualquer nome de sua preferncia). Anote o nome do parmetro da URL, pois ele ser utilizado mais tarde na pgina de confirmao. A expresso aps o sinal de igual o valor do parmetro. Neste caso, o valor gerado por uma expresso PHP que retorna uma identificao de registro do recordset. gerada uma identificao diferente para cada linha na tabela dinmica. Na expresso PHP, substitua recordsetName pelo nome do recordset e fieldName pelo nome do campo do recordset que identifica cada registro de modo exclusivo. Na maioria dos casos, o campo consistir em um nmero de identificao de registro. No exemplo a seguir, o campo consiste em cdigos de local exclusivos:
confirmDelete.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
confirmDelete.php?recordID=CBR 3.
Salve a pgina.
Aps criar um parmetro dinmico da URL para os links Delete (Excluir), a prxima etapa exibir o registro na pgina de confirmao.
1074
Exibir o registro na pgina de confirmao (PHP)

Depois de preencher a pgina que relaciona os registros ), alterne para a pgina de confirmao. A pgina de confirmao mostra o registro e solicita que o usurio confirme se deseja exclu-lo. Quando o usurio confirmar a operao clicando no boto Form (Formulrio), o aplicativo para a Web excluir o registro do banco de dados. A exibio do registro consiste em trs etapas:

Criar um formulrio HTML Recuperar o registro a ser exibido no formulrio Exibir o registro no formulrio
A recuperao e exibio do registro consiste em definir um recordset para conter um nico registro (aquele a ser excludo) e ligar as colunas do recordset ao formulrio. As etapas esto descritas a seguir, com mais detalhes.
Para criar um formulrio HTML para exibir o registro:
1.
Crie uma nova pgina PHP e salve-a como a pgina de confirmao especificada na seo anterior. A pgina de confirmao foi especificada quando voc criou o link Delete (Excluir) na seo anterior. Utilize esse nome ao salvar o arquivo pela primeira vez (por exemplo, deleteConfirm.php).
2. 3.
Insira um formulrio HTML na pgina, em Insert (Inserir) > Form > Form. Adicione ao formulrio um campo oculto. O campo oculto do formulrio necessrio para armazenar a identificao do registro repassada pelo parmetro da URL. Para adicionar um campo oculto, posicione o ponto de insero no formulrio e selecione Insert > Form > Hidden Field (Campo oculto).
4.
5.

1.
1075
2.
Atribua um nome ao recordset e selecione uma conexo e a tabela de banco de dados que contm os registros que podem ser exibidos. Na rea Columns (Colunas), selecione as colunas da tabela (campos de registro) que deseja exibir na pgina. Para exibir somente alguns dos campos do registro, clique em Selected (Selecionado), escolha os campos desejados na lista e pressione simultaneamente a tecla Control (Windows) ou Command (Macintosh). Certifique-se de incluir o campo de identificao do registro, mesmo que no pretenda exibi-lo.
3.
4.
No primeiro menu pop-up da rea Filter, selecione a coluna do conjunto de dados que contm os valores correspondentes ao valor do parmetro da URL repassado pela pgina com os links Delete. Por exemplo: se o parmetro da URL contiver um nmero de identificao de registro, selecione a coluna que contm os nmeros de identificao de registro. No exemplo analisado na seo anterior, a coluna do recordset chamada CODE (CDIGO) contm os valores correspondentes ao valor do parmetro da URL repassado pela pgina com os links Delete. No menu pop-up ao lado do primeiro menu, selecione o sinal de igual, se ainda no tiver sido selecionado. No terceiro menu pop-up, selecione URL Parameter (Parmetro da URL). A pgina com os links Delete utiliza um parmetro da URL para repassar informaes pgina de confirmao. Na quarta caixa, digite o nome do parmetro da URL repassado pela pgina com os links Delete. Por exemplo, se a URL utilizada para abrir a pgina de confirmao incluir o sufixo confirmDelete.php?recordID=CBR, digite recordID.
1076
5.
Clique em OK. O recordset exibido no painel Bindings.

1.
Selecione as colunas do recordset (campos de registro) no painel Bindings e arraste-as para o formulrio inserido na pgina. Para obter mais informaes, consulte Tornar dinmico o texto na pgina 783. Em seguida, ligue a coluna de identificao do registro ao campo oculto do formulrio.
2.
Certifique-se de que a opo Invisible Elements (Elementos invisveis) esteja ativada em View (Exibir) > Visual Aids (Auxlios visuais) > Invisible Elements. Em seguida, clique no cone amarelo em forma de escudo (que representa o campo oculto do formulrio). O campo oculto do formulrio ser selecionado. No Property inspector (Inspetor de propriedades), clique no cone em forma de raio ao lado a caixa de texto Value (Valor). Ser exibida a caixa de dilogo Dynamic Data (Dados dinmicos). Na caixa de dilogo Dynamic Data, selecione a coluna de identificao do registro no recordset e clique em OK.
3.
4.
1077
No exemplo a seguir, a coluna de identificao de registro selecionada CODE.
5.
Salve a pgina. A pgina de confirmao preenchida dever ter a seguinte aparncia:
Depois de criar uma pgina de confirmao, a prxima etapa na criao de uma pgina de excluso de registros adicionar lgica para excluir o registro.
1078
Adicionar lgica para excluir o registro (PHP)

Aps criar uma pgina de confirmao, a prxima etapa na criao de uma pgina de excluso de registros adicionar lgica pgina de confirmao que exclui o registro do banco de dados quando o usurio clica no boto Confirm (Confirmar). No Dreamweaver, possvel adicionar esta lgica de modo rpido e fcil utilizando o comportamento de servidor Delete Record (Excluir registro).
1.
No painel Server Behaviors (Comportamentos de servidor), em Window (Janela) > Server Behaviors, clique no boto com sinal de adio (+) e selecione Delete Record. A caixa de dilogo Delete Record exibida.
2.
Na caixa de texto First Check If Variable Is Defined (Primeiramente, verificar se a varivel est definida), selecione a opo Primary Key Value (Valor da chave primria). Especifique o valor da chave primria posteriormente na caixa de dilogo. No menu pop-up Connection (Conexo), selecione uma conexo com o banco de dados, para que o comportamento de servidor possa conectar-se ao banco de dados em questo. No menu pop-up Table (Tabela), selecione a tabela de banco de dados que contm os registros a serem excludos. No menu pop-up Primary Key Column (Coluna de chave primria), selecione a coluna da tabela que contm as identificaes do registro. O comportamento de servidor Delete Record buscar uma correspondncia nesta coluna. A coluna deve conter os mesmos dados de identificao do registro que a coluna do recordset ligada ao campo oculto do formulrio na pgina. Se a identificao do registro for numrica, selecione a opo Numeric (Numrico).
3.
4.
5.
1079
6.
No menu pop-up Primary Key, selecione a varivel da pgina que contm a identificao do registro a ser excludo. A varivel criada pelo campo oculto do formulrio. Ela tem o mesmo nome que o atributo name (nome) do campo oculto e pode ser um parmetro de URL ou de formulrio, dependendo do atributo method (mtodo) do formulrio. Em nosso exemplo, a varivel em questo uma varivel de formulrio chamada hiddenRecID.
7.
Na caixa de texto After Deleting, Go To (Aps a excluso, ir para), especifique a pgina a ser aberta depois que o registro for excludo da tabela do banco de dados. possvel especificar uma pgina que contenha uma breve mensagem de xito para o usurio ou uma que contenha os registros restantes, para que o usurio possa verificar se o registro foi excludo. A caixa de dilogo Delete Record preenchida dever ter a seguinte aparncia:
8.
Clique em OK e salve o trabalho. Faa o upload das pginas para o servidor da Web (se necessrio), abra um navegador e procure um registro a ser excludo. Ao clicar em um link Delete (Excluir) na pgina de resultados, ser exibida a pgina de confirmao. Clique no boto Confirm para excluir o registro do banco de dados. Para verificar se o registro foi excludo, abra novamente a pgina com os links Delete. O registro no ser mais exibido na lista.
N O TA
Clique em Refresh (Atualizar) se o registro continuar sendo exibido na pgina.
1080
Criar pginas que restringem o acesso ao site (PHP)

O Dreamweaver pode ser utilizado para criar um conjunto de pginas que restringem o acesso ao site. Os mtodos so idnticos queles utilizados para o ColdFusion. Para obter instrues, consulte Criar pginas que restrinjam o acesso ao site (ColdFusion, ASP, JSP, PHP) na pgina 966.
Criar pginas que restringem o acesso ao site (PHP)
1081
1082
PARTE 9
Apndices
Obter mais ajuda para desenvolver seus aplicativos da Web. Esta seo contm os seguintes captulos:
Apndice A: Guia do iniciante em bancos de dados. . . . . . . . . 1085 Apndice B: Manual bsico de SQL . . . . . . . . . . . . . . . . . . . . . . . .1101
1083
Apndice A
Guia do iniciante em bancos de dados

Este apndice destina-se aos usurios do Macromedia Dreamweaver 8 que tm pouca ou nenhuma experincia com bancos de dados ou com conexes de banco de dados. So explicados os conceitos gerais, mas no os procedimentos especficos. Para saber como esses conceitos so aplicados na prtica, consulte o restante deste guia. O apndice descreve como projetar um banco de dados, mas no como cri-lo utilizando um aplicativo como o Microsoft Access ou SQL Server. Esse procedimento descrito na documentao on-line ou impressa que acompanha o sistema de banco de dados.
Sobre os bancos de dados

O ponto de partida para a criao de um banco de dados o registro. Um registro uma coleo de dados relacionados tratada como uma entidade nica. Por exemplo, a ficha de um jogador de futebol pode ser chamada de um registro: ela contm o nome, fotografia, time e estatsticas 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 contm um campo de nome, um campo de fotografia, um campo de time e vrios campos de estatsticas. Uma coleo de registros que compartilham os mesmos campos chamada de tabela, porque esses tipos de informaes podem ser facilmente apresentados no formato de tabela: cada coluna representa um campo e cada linha representa um registro. Assim, a palavra coluna sinnimo de campo e linha sinnimo de registro.
Campos (colunas) Number LastName FirstName Position Goal Registros (linhas)
1085
Um banco de dados pode conter mais de uma tabela, cada uma delas com um nome exclusivo. Essas tabelas podem ser relacionadas ou independentes. O subconjunto de dados extrados de uma ou mais tabelas chamado de recordset (ou DataSet, no ASP.NET). Um recordset tambm uma tabela, por ser uma coleo de registros que compartilham as mesmas colunas. Por exemplo: uma lista de escalao, que relaciona os nomes e as posies dos jogadores poderia ser chamada de recordset: ela consiste em um subconjunto de todas as informaes possveis sobre os jogadores, incluindo nmero de gols, assistncias, penalidades, etc.
Number LastName FirstName Position Goals
Tabela de banco de dados
LastName FirstName
Position
Tabela de recordset
Para criar um recordset, necessrio fazer uma consulta ao banco de dados. Um consulta consiste em um critrio de pesquisa. Por exemplo: a consulta pode especificar que apenas algumas colunas sero inseridas no recordset ou que somente alguns registros sero includos. Para obter mais informaes, consulte Recordsets na pgina 760. Tpicos relacionados Conexes de bancos de dados na pgina 1094
Conceitos bsicos do projeto de um banco de dados

O projeto do banco de dados a primeira etapa da criao de qualquer site da Web com base em banco de dados. Esta seo apresenta um estudo de caso para explicar os princpios bsicos do projeto de um banco de dados. O estudo de caso envolve um aplicativo para a Web encomendado por uma empresa fictcia chamada Servios Areos Seta, uma firma que administra uma pequena frota de jatos comerciais.
1086
Apndice A: Guia do iniciante em bancos de dados
O projeto de um banco de dados consiste em uma srie de etapas comuns. Em primeiro lugar, estude as regras e polticas comerciais a serem transpostas no aplicativo para a Web. Em segundo lugar, considere as consultas que os usurios faro ao banco de dados. Em terceiro lugar, defina a estrutura do banco de dados. Por fim, crie o banco de dados.
Anlise das regras e polticas comerciais da Servios Areos Seta

Voc foi contratado temporariamente para criar um aplicativo para a Web encomendado pela Servios Areos Seta. Antes de iniciar o projeto do banco de dados, necessrio certificar-se de ter compreendido todas as regras e polticas comercias da empresa relacionadas ao aplicativo. Esta seo descreve as regras e polticas comerciais (simplificadas) da Servios Areos Seta. A Seta administra uma frota de cinco jatos comerciais de vrios tamanhos e modelos para seus proprietrios. Cada jato possui at oito arrendatrios, ou seja, empresas ou pessoas fsicas que adquiriram parte das aes das aeronaves (charter). Esse tipo de acordo comum entre pessoas ou empresas que no necessitam de um jato comercial durante um ano inteiro. Esses proprietrios, ou acionistas, pagam empresa Servios Areos Seta as seguintes taxas:
Uma taxa mensal de administrao, proporcional parte de cada proprietrio da aeronave, para cobrir os custos de pagamento do piloto, seguro e hangar Uma taxa de ocupao por hora que abrange todos os custos diretos, como manuteno, sobressalentes para o motor e refeies
Por sua vez, um acionista notifica a Servios Areos Seta quando e para onde ir viajar e a empresa tomar as providncias necessrias, incluindo a obteno de equipes de terra e ar, alm do fornecimento de refeies durante o vo. A empresa pede que seja notifica com oito horas de antecedncia a fim de poder preparar a aeronave para um vo. A Servios Areos Seta garante 800 horas de ocupao por ano para cada aeronave. As horas de ocupao so aquelas em que o jato est transportando um passageiro, pelo menos. As horas de ocupao tm incio seis minutos (0,1 de uma hora) antes da decolagem da aeronave com os passageiros e termina seis minutos aps a aterrissagem da aeronave. Cada avio pode pertencer a oito proprietrios, no mximo. Por exemplo: uma pessoa fsica ou corporao pode adquirir uma participao em sociedade de 1/5 (ou uma ao correspondente a um quinto) de um jato. Uma vez que a Servios Areos Seta garante 800 horas de vo com passageiros por ano, o proprietrio da ao correspondente a 1/5 do avio tem direito a 160 horas de ocupao (800 horas/5 = 160).
1087
Anlise das caractersticas da solicitao da Servios Areos Seta

A Servios Areos Seta o contratou para criar um aplicativo para a Web com as seguintes caractersticas:

Permitir que qualquer acionista da aeronave solicite um jato para um vo Fornecer ao Departamento de Operaes de Vo (operadores de vo) todas as informaes necessrias para iniciar a preparao da aeronave, incluindo os detalhes da solicitao do arrendatrio (itinerrio, data e hora da partida, refeies necessrias, etc.), horas de ocupao restantes do arrendatrio e a disponibilidade do avio para a viagem proposta Permitir aos operadores de vo reservar a aeronave para evitar conflitos de agendamento
Quais consultas os usurios faro ao banco de dados?

Aps familiarizar-se com as caractersticas propostas para o aplicativo para a Web, rena os usurios do banco de dados e faa a seguinte pergunta: Quais consultas vocs faro ao banco de dados? Voc ficar sabendo que alguns dos arrendatrios das aeronaves desejam fazer as seguintes consultas ao banco de dados:

De quantas horas de ocupao ainda disponho? O meu jato est disponvel nesta(s) data(s)?
Depois que um arrendatrio solicitar um avio, os funcionrios de operaes de vo faro as seguintes consultas ao banco de dados:

Onde o arrendatrio deseja ir? Qual o itinerrio: somente de ida, ida e volta, vrias cidades? Os operadores de vo necessitam dessas informaes para iniciar o planejamento do vo (verificar as previses meteorolgicas, apresentar os planos de vo, etc.) e estimar as horas de ocupao. O arrendatrio dispe de horas de ocupao suficientes para o itinerrio proposto? Quando o arrendatrio deseja partir? Qual o jato do arrendatrio? O jato est disponvel para o itinerrio proposto? Quantos passageiros acompanharo os arrendatrios?
1088
Qual a quantidade de bagagem dos passageiros: leve (bagagem de mo), normal (uma mala por passageiro) ou pesada (mais de uma mala)? Quais so as refeies necessrias aos arrendatrios? Qual a taxa de ocupao por hora do jato? Onde posso contatar o arrendatrio para confirmar o vo e a taxa estimada?
Escolher as tabelas do banco de dados

Aps conhecer as consultas que os usurios faro ao banco de dados, imagine a estrutura do banco de dados de modo a responder da melhor forma possvel a essas perguntas. A primeira etapa escolher as tabelas do banco de dados. Em um banco de dados relacional, todos os dados so representados em tabelas compostas por linhas e colunas. Cada tabela descreve uma coleo de entidades relacionadas, como pessoas, objetos ou eventos. Cada linha descreve uma ocorrncia 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. Escolha as cinco tabelas abaixo para o banco de dados da Servios Areos Seta:
Uma tabela de aeronaves, que descreve todos os jatos comerciais administrados pela Servios Areos Seta Uma tabela de reserva das aeronaves, que enumera todas as datas em que os jatos estaro reservados ou indisponveis para vos Uma tabela de arrendatrios, que descreve todas as corporaes e pessoas fsicas que possuem aes dos jatos Uma tabela de itinerrios, que descreve todos os itinerrios solicitados pelos arrendatrios Uma tabela de vos, que descreve todas etapas (vos) dos itinerrios
Escolher as colunas em cada tabela

A prxima etapa escolher as colunas em cada tabela. As colunas descrevem as propriedades de cada entidade da tabela. Uma boa regra prtica a ser utilizada durante a escolha das colunas evitar a duplicao de dados. Por exemplo: no caso do aplicativo da Servios Areos Seta, voc sabe que os nomes dos acionistas devero estar associados s datas dos itinerrios para responder seguinte pergunta dos operadores de vo: Quais so refeies necessrias a um arrendatrio em um determinado itinerrio?
1089
Um mtodo colocar as colunas correspondentes ao nome e ao sobrenome dos acionistas tanto na tabela de arrendatrios quanto na tabela de itinerrios. Contudo, essa estratgia obrigaria no s a uma duplicao dos dados relativos a nomes em duas tabelas, mas tambm de vrias ocorrncias nas tabelas de itinerrios (seria necessrio que digitar o nome do acionista na tabela de itinerrios sempre que um arrendatrio solicitasse um novo itinerrio). Este mtodo aumenta o trabalho gasto com a entrada de dados, induz a erros e ameaa a integridade dos dados (uma alterao feita em uma parte do banco de dados dever ser repetida em outras partes). Outra soluo seria digitar o nome e sobrenome dos arrendatrios uma nica vez somente na tabela de acionistas. Quando se apresentar o momento de responder pergunta acima dos operadores de vo, as tabelas de arrendatrios e de itinerrios podero ser unidas por meio de uma expresso SQL. Certifique-se de que as suas tabelas contm uma coluna de chave primria. Uma coluna de chave primria contm valores nicos para cada linha. Este procedimento permite detectar a linha exata ao pesquisar no banco de dados. A maioria das colunas de chaves primrias consiste de nmeros de identificao, mas possvel utilizar chaves primrias originais, como nmeros de formulrios do governo ou nmeros de srie de aeronaves.
1090
Aps algumas consideraes, escolha as seguintes propriedades e chaves primrias para as tabelas do banco de dados da Servios Areos Seta:
Definir as relaes entre as tabelas

Aps definir as colunas bsicas e as chaves primrias das tabelas, comece a definir as relaes entre as tabelas. Ao terminar de definir as relaes, voc poder escrever as instrues SQL no Dreamweaver para combinar os dados de duas tabelas (consulte Unir tabelas na pgina 1107). Por exemplo, cada aeronave administrada pela Servios Areos Seta propriedade de vrios arrendatrios. possvel estabelecer uma relao individual para o coletivo (one-to-many) semelhante entre cada aeronave na tabela de aeronaves e os arrendatrios na tabela de arrendatrios. Esse procedimento economizaria o tempo gasto em digitao e no controle de dados de aeronaves redundantes na tabela de arrendatrios.
1091
Em uma relao de banco de dados individual para o coletivo, uma nica linha de uma tabela est relacionada a vrias linhas em outra tabela. Pode-se definir esse tipo de relao incluindo uma chave estrangeira na tabela que fornece as diversas linhas, no exemplo acima, a tabela de arrendatrios. A chave estrangeira uma coluna que contm valores correspondentes aos da coluna de chaves primrias de outra tabela. A chave primria da tabela de aeronaves chamada ac_serial. Portanto, a incluso de uma chave estrangeira chamada ac_serial na tabela de acionistas definiria a relao uma aeronave para muitos arrendatrios. Conhecendo as caractersticas da solicitao do cliente, bem como as regras e polticas comercias da empresa, mais conveniente definir as seguintes relaes um para muitos no banco de dados:

A cada aeronave podem ser atribudos muitos arrendatrios A cada aeronave podem ser atribudas muitas reservas A cada aeronave podem ser atribudos muitos itinerrios A cada arrendatrio podem ser atribudos muitos itinerrios A cada itinerrio podem ser atribudos muitos vos (ou etapas)
1092
Estes so os diagramas revisados das tabelas, depois da incluso das chaves estrangeiras que definem essas relaes:
Eles so conhecidos como diagramas R-E, ou seja, diagramas de relaes entre entidades.
Criar o banco de dados

A etapa final do projeto a criao do banco de dados utilizando um sistema de banco de dados, como Microsoft Access, SQL Server, Oracle9i ou MySQL. Para obter mais informaes, consulte a documentao do sistema de banco de dados.
1093
Conexes de bancos de dados

Se for utilizado um banco de dados com o aplicativo para a Web, ser necessrio criar pelo menos uma conexo de banco de dados. Sem esta conexo, o aplicativo no saber onde localizar o banco de dados ou como conectar-se a ele. A conexo de banco de dados pode ser criada no Dreamweaver fornecendo as informaes (ou parmetros) dos quais o aplicativo necessita para contatar o banco de dados.
NO TA 1094
No necessrio criar conexes de banco de dados para pginas ColdFusion no Dreamweaver. Voc se conecta por meio das fontes de dados do ColdFusion.
Esta seo discute as conexes de banco de dados em termos gerais. Para obter informaes especficas sobre a criao de conexes no Dreamweaver, consulte Efetuar a conexo com um banco de dados na pgina 668.
Comunicar-se com o banco de dados

Os dados armazenados em um banco de dados esto normalmente em formato proprietrio, do mesmo modo que o texto em um arquivo de processador de texto. Este um exemplo de aparncia dos dados no Microsoft Access:
Esta a aparncia 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 no pode decifrar os dados. necessrio uma interface de software entre o aplicativo para a Web e o banco de dados para permitir que eles se comuniquem. Trs interfaces comuns permitem que os aplicativos estabeleam comunicao 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 vinculao e incorporao de objetos), e a terceira a Java Database Connectivity, ou JDBC. A funo dessas interfaces atuar como intrpretes. Por exemplo: quando um discurso feito em ingls nas Naes Unidas, um intrprete o traduz para os delegados que falam francs e outro intrprete o faz para os participantes que falam alemo. 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. ColdFusion and JSP applications are JDBC speakers, ASP speak ODBC (through a built-in OLE DB/ODBC interpreter), and ASP.NET applications speak OLE DB.
1095
Usar os drivers de bancos de dados para se comunicar com o banco de dados

As interfaces ODBC, OLE DB e JDBC so implementadas pelos drivers de bancos de dados (ou provedores de dados no OLE DB), que so apenas partes de um software. Quando o aplicativo para a Web se comunica com o banco de dados, isto feito por intermdio de um driver. Os drivers de bancos de dados so especficos ao banco de dados. Por exemplo: podem ser utilizados os drivers do Microsoft Access, SQL Server e dBase. Da mesma forma, possvel 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 so produzidos pelos fabricantes de bancos de dados, como a Microsoft e Oracle, e por vrios outros fabricantes de software. A Microsoft oferece vrios 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, so automaticamente instalados com o Microsoft Office e com o Windows 2000 e Windows XP Professional. Eles tambm so instalados nos pacotes MDAC (Microsoft Data Access Components) 2.5, 2.6, e 2.7, que voc pode obter gratuitamente no site da Microsoft em http://msdn.microsoft.com/data/mdac/downloads/. O MDAC 2,7 instala vrios provedores OLE DB.
N OT A 1096
Primeiro, instale o MDAC 2.5 e, em seguida, o MDAC 2,7.
Para saber quais drivers ODBC esto instalados em um sistema Windows, consulte Exibir os drivers ODBC instalados em um sistema Windows na pgina 1097. 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 informaes sobre os drivers JDBC e seus fabricantes, pesquise o banco de dados de drivers JDBC no site da Sun, em http://developers.sun.com/product/jdbc/drivers.
Estas so 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
ColdFusion JSP ASP
Interface de banco de dados

JDBC
Drivers comuns
drivers originais ColdFusion driver Sun JDBC-ODBC driver Thin JDBC da Oracle driver Microsoft Access provedor SQL Server da Microsoft ODBC da Microsoft para Oracle provedor Microsoft Jet provedor SQL Server da Microsoft provedor da Microsoft para Oracle driver MySQL
ODBC ou OLE DB
ASP.NET
OLE DB
PHP
especfico ao MySQL
Exibir os drivers ODBC 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 esto instalados em um sistema Windows:
1.
Abra o ODBC Data Source Administrator da seguinte maneira:
No Windows 2000, selecione Start > Settings > Control Panel > Administrative Tools (Ferramentas administrativas) > Data Sources (Fontes de dados). No Windows XP, selecione Start > Control Panel > Administrative Tools > Data Sources (ODBC).
2.
Clique na guia Drivers. Ser exibida uma lista de drivers ODBC instalados no sistema.
1097
Chamar os drivers de bancos de dados

Um aplicativo deve chamar um driver de banco de dados para estabelecer comunicaes em dois sentidos com um banco de dados. Um aplicativo para a Web chama um driver utilizando uma seqncia de caracteres de conexo. Esta composta por todas as informaes (ou parmetros) necessrias para estabelecer uma conexo com um banco de dados. Em sua forma mais simples, uma seqncia de caracteres de conexo especifica um driver e um banco de dados, como neste exemplo:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Scaal\scaalcoffee.mdb
As seqncias de caracteres de conexo ASP podem conter um parmetro Provider (Provedor) que especifique um provedor OLE DB. Se este parmetro for omitido, o ASP utilizar como padro 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 comunicao com o banco de dados do Access, scaalcoffee.mdb. Os parmetros em uma seqncia de caracteres de conexo podem variar dependendo do driver. Veja a seguir uma seqncia de caracteres de conexo para um banco de dados do SQL Server chamado Cases, localizado em um servidor denominado Hoover:
Driver={SQL Server};Server=Hoover;Database=Cases; UID=DanaS;PWD=Queequeg
N OT A 1098
UID representa a identificao do usurio e PWD representa a senha.
O Dreamweaver simplifica o processo de insero de seqncias de caracteres de conexo em suas pginas, fornecendo uma caixa de dilogo na qual so digitados os diferentes parmetros de conexo. Por exemplo: esta a aparncia da definio de uma conexo em uma caixa de dilogo quando o usurio estiver programando um aplicativo JSP:
Aps preencher a caixa de dilogo e clicar em OK, o Dreamweaver inserir a seqncia de caracteres de conexo em um arquivo de incluso no seu site.
Usar um DSN
Os nomes das fontes dos dados (DSNs) podem ser especificados em algumas conexes. O DSN um tipo de atalho que o usurio cria no Windows para representar uma seqncia de caracteres de conexo. 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, necessrio digitar o nome de usurio columbo e a senha savalas7. Depois de utilizar esses parmetros para definir um DSN denominado ourcops, ser possvel criar a conexo digitando uma nica palavra ourcops no Dreamweaver, em vez de todos os outros parmetros. Se o servidor de aplicativos estiver em execuo em um sistema Windows e tiver sido definido um DNS nesse sistema, o DNS poder ser utilizado para definir uma conexo ASP ou JSP. Caso voc no tenha acesso fsico a um servidor e, por isso, no for capaz de definir um DNS nesse local, ser necessrio utilizar uma seqncia de caracteres de conexo para comunicar-se com o banco de dados. Para configurar um DSN no Windows, consulte os seguintes artigos no site da Microsoft:
Os usurios do Windows 2000 podem consultar o Artigo 300596 do Microsoft Knowledge Base em http://support.microsoft.com/default.aspx?scid=kb;en-us;300596 Os usurios do Windows XP podem consultar a Microsoft Knowledge Base, Artigo 305599, em http://support.microsoft.com/default.aspx?scid=kb;en-us;305599
Tpicos relacionados Conexes de banco de dados para desenvolvedores de ASP na pgina 681
Conexes de banco de dados para desenvolvedores JSP na pgina 695
1099
1100
Apndice B
Manual bsico de SQL

Este apndice descreve como utilizar a SQL (Structured Query Language) para criar recordsets para pginas dinmicas. A SQL (pronuncia-se sequel) 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 operaes de banco de dados sofisticadas. Tpicos relacionados Sobre os bancos de dados na pgina 1085

Conceitos bsicos do projeto de um banco de dados na pgina 1086 Recordsets na pgina 760
A Macromedia no oferece suporte tcnico para as tecnologias de outros fabricantes, como SQL.
Princpios bsicos de sintaxe

A instruo SQL mais comumente utilizada para criar um recordset SELECT, que extrai determinadas colunas de uma ou mais tabelas de bancos de dados para criar um recordset. A sintaxe bsica da instruo SELECT apresentada abaixo:
SELECT ColumnName FROM TableName
possvel adicionar quebras de linha, guias e outros tipos de espao em branco s instrues para tornar clara a lgica: O SQL ignora todos os tipos de espao em branco. O exemplo a seguir mostra uma instruo vlida:
SELECT PaidDues FROM Members
NO T A
1101
As seguintes palavras-chave identificam os comandos SQL utilizados com mais freqncia:

Palavrachave
SELECT INSERT UPDATE DELETE
Descrio
Recupera os registros especificados no banco de dados Inclui um novo registro em uma tabela de banco de dados Altera os valores nos registros de banco de dados especificados Remove os registros de banco de dados especificados
As seguintes palavras-chave so utilizadas para refinar as instrues SQL:

Palavrachave
FROM WHERE ORDER BY GROUP BY
Descrio
Denomina a fonte de dados de uma operao Define uma ou mais condies para a operao Classifica as linhas de recordsets em uma determinada ordem Agrupa o recordset pelos itens especificados, selecionados em uma lista
Os operadores a seguir especificam condies e executam funes numricas e lgicas:

Operador
= LIKE <> NOT LIKE < > <= >=
Significado
Igual a Como (caracteres curingas so aceitos) Diferente de No igual a (curingas so aceitos) Menor que Maior que Menor ou igual a Maior ou igual a Ambas as condies devem ser atendidas, como Bahia AND Minas Gerais Pelo menos uma das condies deve ser atendida, como Matos OR Mattos Exclui a condio seguinte, como Paris NOT Frana
AND OR NOT
Se o item que estiver sendo comparado for texto, coloque-o entre aspas simples, como no exemplo a seguir:
...WHERE Country = 'Germany'
1102
Apndice B: Manual bsico de SQL
Se o item que estiver sendo comparado for uma data e voc estiver trabalhando com um banco de dados do Microsoft Access, coloque-o entre sinais #:
...WHERE DateOfBirth < #01/01/1970#
Outros bancos de dados podem utilizar suas prprias convenes de datas. Consulte a documentao do sistema de banco de dados. Alguns sistemas de bancos de dados podem utilizar sintaxes fora do padro SQL em seus produtos. Consulte a documentao do sistema de banco de dados.
Definir as colunas de um recordset

O SQL pode ser utilizado para definir os recordsets de uma pgina. Um recordset um subconjunto extrado de um banco de dados. Para obter mais informaes, consulte Sobre os bancos de dados na pgina 1085. Esta a sintaxe SQL bsica para definir as colunas de um recordset:
SELECT ColumnName1, ColumnName2, ColumnNameX FROM TableName
Para incluir todas as colunas de uma tabela no recordset, 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 instruo 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 recordset que contenha apenas os dados destas duas colunas, digite a seguinte instruo SELECT:
SELECT YearBorn, DateLastPurchase FROM Customers
Limitar o nmero de registros de um recordset

Utilize uma clusula WHERE para limitar o nmero de registros no recordset. Por exemplo: apenas os clientes que ganham mais de R$ 50mil por ano sero includos. Suponha que uma coluna da tabela denominada Earnings informa os rendimentos de cada cliente. A instruo SELECT teria a seguinte aparncia:
SELECT YearBorn, DateLastPurchase FROM Customers WHERE Earnings > 50000
1103
Para filtrar os registros do banco de dados, especifique uma ou mais condies em uma clusula WHERE. As sees seguintes descrevem maneiras de filtrar registros com a clusula WHERE:

Filtrar registros com base na igualdade de dois valores na pgina 1104 Filtrar registros com base na semelhana de dois valores na pgina 1105 Filtrar registros com base em uma faixa de valores na pgina 1106 Filtrar registros com base em uma combinao de condies de busca na pgina 1107
Filtrar registros com base na igualdade de dois valores

possvel filtrar registros em um banco de dados com base na igualdade do valor de um parmetro em relao ao valor de uma coluna de registros. Suponha que voc decidiu permitir que os usurios pesquisassem o banco de dados por departamento. Siga a lgica abaixo para criar o recordset resultante da busca:

Verifique um registro na tabela do banco de dados. Se o valor na coluna department (departamento) do registro for igual ao nome do departamento enviado pelo usurio, inclua esse registro no recordset resultante da busca. Verifique o prximo registro da tabela.
A lgica pode ser expressa com a seguinte clusula WHERE:

WHERE ColumnName = ParameterValue ParameterValue uma varivel SQL que contm um parmetro de busca. Em um aplicativo
para a Web, o usurio normalmente fornece esse parmetro utilizando um formulrio 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 instruo SQL localiza todos os registros na tabela de funcionrios que contenham um valor DEPARTMENT igual quele encontrado na varivel varDept. Por exemplo: se o usurio especificar o nome do departamento em Operations (Operaes), a instruo SQL dever gerar o seguinte recordset:
1104
Filtrar registros com base na semelhana de dois valores

possvel filtrar registros em um banco de dados com base na semelhana do valor de um parmetro em relao ao valor de uma coluna de registros. A utilizao da semelhana em vez da igualdade permite aos usurios uma maior flexibilidade ao especificar o valor desses parmetros. Por exemplo: as palavras da busca no necessitam distinguir maisculas de minsculas. Se o usurio digitar bahia e a coluna da tabela contiver o valor Bahia, a correspondncia ser estabelecida. Alm disso, a semelhana possibilita o uso de caracteres curinga para que os usurios possam fazer buscas de partes de palavras e tambm em ordem alfabtica. Por exemplo, se o usurio digitar m e a coluna da tabela contiver os valores Matos, Madureira e Miranda, ser possvel utilizar um caractere curinga na instruo SQL para que as trs correspondncias sejam estabelecidas. O caractere curinga padro o sinal de percentagem (%):
...WHERE LastName LIKE 'Mc%'
Suponha que voc decida permitir que os usurios pesquisem o banco de dados por sobrenome. Siga a lgica abaixo para criar o recordset resultante da busca:

Verifique um registro na tabela do banco de dados. Se o valor na coluna last name (sobrenome) do registro contiver um valor semelhante ao que o usurio enviou, inclua esse registro no recordset resultante da busca. Verifique o prximo registro da tabela.

WHERE ColumnName LIKE ParameterValue ParameterValue uma varivel SQL que contm um parmetro de busca. Em um aplicativo
para a Web, o usurio normalmente fornece esse parmetro utilizando um formulrio 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 LIKE 'varLastName'
Para que os usurios possam executar buscas utilizando partes de palavras, combine a varivel com um caractere curinga. O caractere curinga da SQL utilizado nesse caso o sinal de percentagem (%). Por exemplo:
...WHERE LASTNAME LIKE 'varLastName%'
1105
Por exemplo, se o usurio digitar o parmetro de busca s, todos os registros contendo sobrenomes iniciados com a letra s sero includos no recordset, conforme mostrado abaixo:
Se o usurio especificar o parmetro de busca si, apenas os registros que contenham sobrenomes iniciados com as letras si sero includos no recordset:
Filtrar 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 pertena a uma faixa limitada por dois valores de parmetros. Suponha que voc decidiu permitir que os usurios pesquisassem o banco de dados por uma faixa de datas. Siga a lgica abaixo para criar o recordset resultante da busca:

Verifique um registro na tabela do banco de dados. Se o valor na coluna date (data) do registro se encontrar entre dois valores de data enviados pelo usurio, inclua esse registro no recordset resultante da busca. Verifique o prximo registro da tabela.

WHERE ColumnName BETWEEN ParameterValue1 AND ParameterValue2 ParameterValue1 e ParameterValue2 so variveis SQL que contm os parmetros da busca. Em um aplicativo para a Web, o usurio normalmente fornece esses parmetros utilizando um formulrio 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 usurio digitar os parmetros 01/07/99 e 31/12/99 da faixa, todos os funcionrios que comearam a trabalhar na segunda metade de 1999 sero includos no recordset, como mostrado abaixo:
1106
Filtrar registros com base em uma combinao de condies de busca

Esta seo descreve como incluir registros no recordset resultante da busca com base em uma combinao de condies de busca. Combine as condies na linguagem SQL utilizando os operadores lgicos AND, OR e NOT. Se desejar que todas as condies sejam verdadeiras (true) para um registro includo no recordset, utilize o operador AND da seguinte forma:
...WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT LIKE 'varDept'
Se desejar que qualquer uma das condies seja verdadeira (true) para que um registro seja includo no recordset, utilize o operador OR, da seguinte forma:
...WHERE LASTNAME LIKE 'varLastName' OR DEPARTMENT LIKE 'varDept'
Se desejar que uma condio seja verdadeira (true), mas no outra, utilize o operador NOT da seguinte forma:
...WHERE DEPARTMENT LIKE 'varDept' AND NOT COUNTRY LIKE 'varCountry'
Utilize os parnteses para agrupar as condies de busca:

...WHERE (DEPARTMENT LIKE 'varDept' AND STARTDATE < #varStart#) OR STARTDATE BETWEEN #varStartRange# AND #varEndRange#
Ordenar os registros em um recordset

Utilize a clusula ORDER BY para ordenar os registros do recordset. Por exemplo, suponha que deseja ordenar os registros do recordset de acordo com a renda do cliente, na ordem da mais baixa para a mais alta. No SQL, ordene os registros da seguinte forma:
SELECT LastName, FirstName, Earnings FROM Customers ORDER BY Earnings
Por padro, a clusula 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
Unir tabelas
possvel utilizar uma nica instruo SELECT para recuperar dados de uma ou mais tabelas de um banco de dados. Esta instruo une as tabelas e retorna um nico recordset que contm dados selecionados em cada tabela.
Unir tabelas
1107
Por exemplo: o banco de dados de uma empresa pode conter uma tabela com os dados pessoais dos funcionrios e uma outra tabela que acomoda os dados sobre os seus departamentos. Para criar um catlogo de funcionrios com os respectivos nomes, nmeros de telefone e departamentos, necessrio recuperar informaes das duas tabelas simultaneamente. Para isso, crie uma unio especificando todas as tabelas a serem includas e como se relacionam. Por exemplo:
SELECT FIRSTNAME, LASTNAME, PHONE, DEPTNAME FROM EMPLOYEES, DEPARTMENTS WHERE EMPLOYEES.DEPT_ID = DEPARTMENTS.DEPT_ID
NO TA 1108
Utilize a notao de pontos para identificar com preciso 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 trs 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 sero recuperados, EMPLOYEES e DEPARTMENTS. A ltima linha especifica os registros a serem unidos e recuperados nas duas tabelas. Cada tabela contm uma coluna chamada DEPT_ID (na tabela DEPARTMENTS, esta coluna a chave primria). Para obter mais informaes, consulte Definir as relaes entre as tabelas na pgina 1091. A clusula WHERE compara o valor de DEPT_ID de uma tabela com esse mesmo valor em outra tabela. Quando uma correspondncia for encontrada, todos os campos do registro na tabela EMPLOYEES sero unidos a todos os campos do registro na tabela DEPARTMENTS. Em seguida, os dados combinados sero filtrados para criar um novo registro constitudo das colunas FIRSTNAME, LASTNAME, PHONE e DEPTNAME. Finalmente, o novo registro ser includo no recordset. A utilizao de uma sintaxe de unio um pouco diferente poder ser mais conveniente em alguns sistemas de banco de dados. Por exemplo, a seguinte instruo SQL utiliza as palavraschave 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 documentao do sistema de banco de dados para determinar qual sintaxe de unio dever ser utilizada.
ndice
Symbols
? em nomes de campos 715
A
abrir arquivos 134 arquivos de texto 108 arquivos no-HTML 589 Assets, painel 180 documentos existentes 107 documentos vinculados 495 site do Dreamweaver 118 abrir um editor de imagens externo 458 Absolute Bottom (O mais abaixo), opo de alinhamento 452 Absolute Middle (No meio absoluto), opo de alinhamento 452 acessar arquivos em servidores 119 sites do Dreamweaver 118 uma unidade local ou rea de trabalho 119 acessibilidade 3335 caixa de dilogo, ativao 76 Federal Rehabilitation Act 33 imagens 449 leitora de tela 71 navegao somente pelo teclado 72 objetos de mdia 520 objetos, inserir 904 quadros 311, 318 recursos do sistema operacional 71 Web Accessibility Initiative (W3C) 33 Acesso universal 71 aes alterar em comportamentos 546
compatibilidade com os navegadores 549 criar 548 definidos 541 escolher no painel Behaviors (Comportamentos) 544 includas com o Dreamweaver 549579 Veja tambm aes individuais pelo nome acoplar painis e grupos de painis 67 Active Links (Links ativos), opo de cor - Page Properties (Propriedades da pgina) 386 ActiveX, tornar dinmicos objetos 788 Add Frame (Adicionar quadro), comando 237 Add Object to Library, comando 192 Add Object to Timeline (Adicionar objeto linha de tempo), comando 237 adicionar objetos a uma linha de tempo 238 quadros a uma linha de tempo 240 Adjust Position (Ajustar a posio), comando 255 Advanced Recordset (Recordset avanado), caixa de dilogo Database Items (Itens de banco de dados), hierarquia 768 ajustar as chaves 634 Align with Selection (Alinhar com a seleo), comando 255 alinhar camadas 232 elementos da pgina 452 imagens 423 imagens de rastreamento 255 opes 452 texto 423 alongamento automtico (modo Layout) 287 Always Nest When Created Within Existing Layer (Sempre aninhar se criada em camada), opo 225
1109
ambientes de trabalho, janela Live Data 725 amostras de cor 384 Anchor (ncora) (barra Insert [Inserir]), objeto 475 ncoras com nome, criar 475 ncoras, com nome 475 animaes aplicar a objetos 243 copiar e colar 242 criar 237 em caminho complexo 239 Linhas de tempo 235 melhorar 243 aninhados camadas 223 conjuntos de quadros, sobre 307 modelos, criar 357 aninhar definir preferncias de camadas 225 modelos, sobre 334 modelos, trabalhar com 357 tabelas 281 aplicativos para a Web conexes de banco de dados 668 configurar um servidor da Web e um servidor de aplicativos 658 criar uma pasta raiz 663 definir um site do Dreamweaver 665 requisitos 657 servidor de teste 667 aplicativos, utilizar com o Dreamweaver 33 applets Java inserir 518, 539 tornar dinmico 788 applets. Veja applets de Java Apply Source Formatting (Aplicar a formatao de origem), comando 587 Apply Template to Page (Aplicar modelo pgina), comando 367 aprimoramentos do ColdFusion MX 7 916 rea de trabalho layout 78 layout flutuante 44 salvar layout personalizado 70, 80 sobre 43 rea de trabalho, acessar arquivos em 119 rea de visualizao do painel Files, alterar 122 armazenar em cache as fontes de dados 778 arquivo web.xml 598 arquivos abrir 107, 134
abrir na visualizao do cdigo 589 colocao 157 comparar 126 criar 102 desbloquear em sites do Contribute 213 Design Notes, utilizao com 167 diffs 126 efetuar o download 156 excluir 135 extenso, definir 106 gerenciamento em sites do Contribute 210 localizar 136, 137 mascarar e revelar 164 mover 135 no utilizados, localizar 162 pesquisar 444 renomear 135 reverter 132 salvar 105 sincronizao dos sites local e remoto 161 temporrios 713 texto 108 trabalhar durante a transferncia 115 transferncias em segundo plano 160 upload 157 arquivos de banco de dados bloqueados 712 arquivos de configurao compartilhada em sites do Contribute 206 arquivos de correio eletrnico 108 arquivos de projeto 103 arquivos dependentes 117, 144 arquivos do Microsoft Excel, importar 261 arquivos DTD 596 arquivos Flash SWF como propriedades. Consulte propriedades controlar 554 inserir 527 arquivos JAR 597 arquivos no-HTML, abrir 589 arquivos ocultos, exibir e ocultar 144 arquivos rfos 162, 491 arquivos temporrios, permisses para criar ou destruir 713 arquivos tld 597 artigos na Microsoft Knowledge Base 713 ASP conexes de banco de dados 681 conexes de banco de dados OLE 683 conexes DSN 684 conexes sem DSN 688
1110
ndice
efetuar conexo com o ISP 689 inserir pginas, criar 944 objetos de comando, definidos 914 objetos de comando, usar 1051 pginas de atualizao, criar 1038 pginas de busca, criar 937, 1038 pginas de excluso, criar 1045 pginas de login 966 pginas-mestras/detalhes 928, 1033 procedimentos armazenados 1049 servidores de aplicativos 661 ASP, objetos de comando 1051 ASP.NET boto de opo, pr-selecionar 991 Campo de dados simples DataGrid 993, 994 CheckBox, controles 990 conexes de banco de dados 673 controle DataGrid 993 controle DataList 992 controles de formulrio, adicionar 987 controles de formulrio, modificar 988 DataGrid 992, 994 DataGrid, Delete Buttons (Botes Excluir) 993, 994 DataGrid, Edit, Update, Cancel Buttons (Botes Editar, Atualizar, Cancelar) 993, 994 DataGrid, Free Form (Formulrio livre) 993, 994 DataGrid, Hyperlink 993, 994 DropDownList (Lista suspensa) 989 gravar SQL para 762 importar tags 597 inserir pginas, criar 944 instalar o .NET Framework 660 ListBox (Caixa de lista), controle 989 pginas de atualizao, criar 1011 pginas de busca, criar 1004 pginas de excluso, criar 1020 pginas-mestras/detalhes 997 procedimentos armazenados 1030 RadioButtonList (Lista de boto de opo), controle 991 TextBox (Caixa de texto) 990 Assets (Propriedades), painel categoria Templates (Modelos) 341 Assets, painel abrir 180 atalhos de teclado, editar 83 ativar Design Notes 168 mascaramento 163
ativos, objetos Recordset Navigation Bar (Barra de navegao para recordset) 803 Recordset Navigation Status (Status de navegao do recordset) 810 atributos editar com o Tag inspector 644 procurar 628 tornar dinmico 786 Consulte tambm cdigo atributos de tags editveis (modelos) definidos 327 definir 356 modificar em documentos baseados em modelos 369 tornar no-editvel 357 Attach Style Sheet (Anexar folha de estilo), cone 439 atualizar Design view 584 Files (Arquivos), painel 135 Site (painel Assets), lista 181 atualizar modelos 361 udio. Veja som automatizar tarefas 391 Autoplay, opo (Timelines, painel) 237
B
Background File Activity (Atividade de arquivos em segundo plano), caixa de dilogo 160 bancos de dados armazenar contedo 745 bloqueados 712 conexes 668 conexes, sobre 1094 drivers 1094 esquemas e catlogos 733 inserir pginas 944 MySQL 705 pginas de atualizao, criar 948 pginas de busca 1004 pginas de busca, criar 937 pginas de excluso, criar 1045 pginas de login 971 pginas de resultados 937, 1004 permisses, alterar 710 procedimentos armazenados 965, 1030, 1049 projetar 1086 provedores 1094
ndice
1111
registros 1085 relacionais 1091 seqncias de caracteres de conexo 1098 sobre 1085 SQL 1101 tabelas 1085 barra de ferramentas Coding 617 barra de ferramentas do documento 46, 48 barra de ferramentas padro 46, 49 barra de ferramentas, alterar ttulos de documento 382 barra de navegao adicionar imagens 486 criar 466 estados da imagem 466 modificar os elementos 487 barra de navegao de registros criar 802 ocultar 806 barra de status definir o texto (comportamento) 568 preferncias 59 sobre 50 Window Size, menu pop-up 50 barra Insert categorias 51 de encaixe 67 inserir cdigo 620 mostrar categorias como guias 62 preferncias 63 sobre 46 utilizar 61 barra Launcher (Iniciador), personalizar 70 barras de ferramentas Coding 53, 617 documento 48 exibir 60 Standard 49 Style Rendering 54 Baseline (Linha de base), opo de alinhamento 452 Behaviors (Comportamentos), painel 543 Bindings (Ligaes), painel adicionar texto dinmico 783 criar contador de registros 811 excluir as fontes de dados 779 Format (Formato), coluna 800 tornar dinmicos atributos HTML 786 tornar dinmicos os formulrios 889, 898 blocos de cdigo escrever 874 instrues de codificao 871
marcadores de parmetro 880 posicionar 878 blocos de layout e folhas de estilo Design-Time 249 exibir 248 inserir 244 realce, preferncia de 247 trabalhar com 246 Boto Code Navigation (Navegao de cdigo) 627 boto Color Wheel (System Color) 385 Boto Flash, caixa de dilogo 523 boto Go (Ir), associar a um menu de salto 560 botes Go (Ir), botes 560 inserir 895 sobre 887 botes de envio 895 botes de imagem 895 botes de opo 888, 893 Bottom (Inferior), opo de alinhamento 452 Bridge driver JDBC-ODBC da Sun 700 Browser Default, opo de alinhamento 452
C
caixa de cores, opo da 384 caixas de seleo 888, 893 Call JavaScript (Chamar o JavaScript), ao 549 camadas alinhar 232 alterar a ordem de empilhamento 228 alterar a visibilidade com o painel Layers 229 alterar a visibilidade com os comportamentos 570 aninhados 223, 224 arrastveis 557 converter em tabelas 234 na criao de tabelas 234 encaixar na grade 253 evitar sobreposies 233 manipular 230 mostrar ou ocultar bordas 223 mover 232 preferncias 225 propriedades de mltiplas 226 propriedades de uma nica 225 redimensionar 230 selecionar diversas 226, 227 sobre 220 trabalhar com 222, 223
1112
ndice
visibilidade, alterar 229 caminho virtual 689 caminhos absolutos 463 fsicos 689 relativos a documento 463 relativos raiz 464 caminhos absolutos 463 caminhos relativos 473 caminhos relativos a documento definir 473 sobre 463 caminhos relativos raiz definir 473 sobre 464 caminhos relativos raiz do site Consulte caminhos relativos raiz campos de autonumerao, soluo de problemas 717 campos de upload de arquivo 897 campos ocultos 896 campos ocultos de formulrio 887 caracteres especiais inserir 431 pontos de interrogao em nomes de campos 715 quebra de linha 424 em nomes de contas SQL 714 caracteres invlidos em nomes de contas 714 Caracteres ocultos 586 caracteres, vlidos em nomes de contas 714 caractersticas da fonte, alterar 427 carregar arquivos 157 Cascade (Cascata) 57 Cascading Style Sheets (Folha de estilo em cascata) (CSS), opo de estilo aplicar regras personalizadas (classe) 437 atualizar regras em um site Contribute 442 criar novas regras 436 CSS Styles (Estilos CSS), painel 414 e regras conflitantes 410 exportar regras 439 propriedades abreviadas 410 remover 436 remover estilo de uma seleo 438 viso geral de 408 catlogos, banco de dados 733 categorias preferncias 78 propriedades 181 clulas Consulte tambm clulas de layout
realar 284 clulas da tabela copiar 278 mesclar e dividir 259 realce, preferncia de 262 recortar, copiar e colar 278 Consulte tambm clulas de layout, tabelas de layout clulas de layout cor de fundo 297 desenhar 289 formatao 297 limpar alturas 295 No Wrap (Sem quebra), opo 297 preferncias 302 realce, preferncia de 291 sobre 284 CFForm 917 Change Link Sitewide (Alterar o link no site inteiro), comando 482 Change Property (Alterar a propriedade), ao 550 chaves de conexo, exportar 209 chaves, ajustar 634 Check Browser (Verificar o navegador), ao 551 Check In/Check Out (Devolver/retirar) configurar 149 sobre 114 Check Links Sitewide (Verificar os links no site inteiro), comando 493 Check Plugin (Verificar o plug-in), ao 552 Check Spelling (Verificar ortografia), comando 443 Check Target Browsers (Verificar navegadores de destino), comando 635 CheckBox (Caixa de seleo), controle 990 Clean Up HTML (Limpar o HTML), comando 633 Clean Up Word HTML (Limpar o HTML do Word), comando 108 Code inspector (Inspetor de cdigo) 583 cdigo ambiente de codificao, personalizao 583 em arquivos externos 651 bibliotecas de tags 591 colocar uma tag ao redor de uma seleo usando o Quick Tag Editor 648 comentrios 626 comparar 126 comportamentos de servidor 613 copiar e colar 626 diferenas entre arquivos 126 editar em modelos 336 editores de tags 621
ndice
1113
editores externos 599 escrever e editar 613 exibir 583 fechamento de tag 615 formatao 587 imprimir 632 instrues de codificao 871 invlidas 605 limpar 633 linguagens, com suporte 604 maisculas/minsculas, alterar 587 navegao 627 nmeros de linha 586 opes de visualizao 586 pesquisar 628 preferncias de cores 589 preferncias de formatao 587 preferncias de reescrita 588 preferncias de validao 590 preferncias, definir 587 quebra de linha 586 recuar 587, 594, 625, 630 reduzir 621 reescrever automaticamente 605 referncia 631 seo head de um documento 654 selecionar no Contribute 790 trechos 615 XHTML 606 cdigo de navegao 627 cdigo, editar com HomeSite 599 cdigo, editar com o BBEdit 599 Property inspector 644 Quick Tag Editor 647 Tag inspector 644 cdigo, inserir com a barra Insert 620 com o Quick Tag Editor 646 com o Tag Chooser (Seletor de tags) 620 na visualizao do projeto 650 cdigo-fonte atualizao do cdigo HTML do Fireworks colocado no Dreamweaver 508 copiar e colar do Fireworks para o Dreamweaver 507 material de referncia 40 selecionar na janela do documento 386 Consulte tambm cdigo
Coding, barra de ferramentas 53 colar histrico, etapas do 395 ColdFusion reas de texto 921 botes 921 botes de opo 923 caixas de seleo 922, 923 campo de arquivo 925 campos de data 926 campos de imagem 924 campos de texto 919 campos ocultos 920 componentes 978, 980 componentes, definir um recordset 984 componentes, recordset como fonte de dados 985 componentes, usar 984 Components (Componentes), painel 983 conexes de banco de dados 669 controles de formulrio, modificar 927 fontes de dados, criar 670 formulrios 915 inserir pginas, criar 944 instalar 660 pginas de atualizao 948 pginas de busca, criar 937 pginas de excluso 955 pginas de login 966, 977 pginas que utilizam componentes 983 pginas, depurar 641 pginas-mestras/detalhes 928, 930 procedimentos armazenados 965 validar dados do formulrio 927 variveis ColdFusion 776 variveis de cliente 764, 776 ColdFusion Markup Language (CFML) depurar 275 coletar dados dos usurios 937, 1004 colocao de arquivos em um servidor remoto 157 colocao e obteno arquivos em um servidor remoto 155 Color Cubes (Cubos de cor), paleta 385 comando Remove Flash Video Detection 533 comandos acessar nos menus contextuais 66 criar, de etapas do histrico 396 gravar 397 Revert (Reverter), comando 381 Save All (Salvar tudo), comando 380 Save As (Salvar como), comando 380
1114
ndice
comentrios adicionar e remover tags de comentrios 630 inserir e editar 626 comparao de arquivos 126 compatibilidade da camada com o Netscape Navigator 4 225 Componentes do Flash editar propriedades 529 trabalhar com 527, 528 componentes, ColdFusion 978 Components (Componentes), painel 983 comportamento do servidor XSL Transformation 818, 836 Comportamento do Show Pop-Up Menu (Mostrar o menu pop-up) 572 comportamentos aes, criar 548 alterar 546 anexar 544 compatibilidade com os navegadores 549 de outros fabricantes, instalar 548 definidos 541 excluir 546 formulrios, anexar comportamentos a 903 imagens 459 itens de biblioteca e 199 JavaScript 541579 links, anexar a 491 mdia, adicionar 540 quadros, utilizar com 323 comportamentos de servidor cdigo para 613 criar 862 criar caixas de dilogo para 880 Delete Record (Excluir registro) 1048 editar comportamentos personalizados 883 inserir registros 947 instalar outros 873 instrues de codificao 871 mover para registros 805 ocultar regies 806 regies repetitivas 806 testar 872 Update Record (Atualizar registro) 955, 1019, 1044, 1071 conexo com SQL Server, criar 675 conexes aos sites do Contribute, diagnosticar 214 conexes de banco de dados ASP 681 ASP.NET 673
ColdFusion 669 efetuar conexo 668 JDBC 696 JSP 695 MySQL 705 OLE DB 674, 683 parmetros de banco de dados OLE 677 PHP 705 conjunto de resultados, JSP 737 conjuntos de quadros aninhados 307 criar 312 denominar 319 designar links em 468 predefinidos, inserir 310 propriedades 320 salvar 316 selecionar 313 sobre 304 Ver tambm quadros consultas, soluo de problemas 715 conta-gotas 384 contador de registro, criao 809 contas, solucionar problemas de nomes de contas 714 contedo ativo, restrito 401 contedo dinmico adicionar s pginas 781 atributos 786 botes de opo 901 caixas de seleo de formulrio 900 campos de texto de formulrio 900 excluir de uma pgina 743 formulrios 889, 898 imagens 785 menus de formulrio 898, 899 objetos 788 recordset avanado, criar 767 recordset, criar 765 recordset, definio 761 remover 789 selecionar no Contribute 790 sobre 760 substituir 782 texto 783 contedo Flash 516 contedo, adicionar a tabelas 260 Continuous Tone (Tom contnuo), paleta de cores 385 Contribute arquivos especiais, trabalhar com 206 arquivos, desbloquear 213
ndice
1115
arquivos, gerenciar 210 arquivos, transferncia 205 compatibilidade, ativar 207 configuraes administrativas, alterar 208 contedo dinmico 790 definies de site, exportar 209 estilos CSS 442 estrutura do site, criar 202 funes, alterar 208 modelos 344, 361 permisses em servidores 205 registro de eventos 213 reverter arquivos 132 sites, gerenciar com Dreamweaver 201, 202, 208 soluo de problemas 214 Contribute Publishing Server 213 Contribute Publishing Server (CPS) 201 Control Shockwave or Flash (Controlar o Shockwave ou Flash), ao 554 controle de origem 114, 148 controle de origem WebDAV 151 controles ActiveX inserir 539 sobre 539 controles de formulrio ASP.NET 987 HTML 892 controles deslizantes, criar 555 convenes tipogrficas 40 Convert Layers to Tables, comando 234 copiar e colar clulas da tabela 278 propriedades 187 recordsets 779 reduo de cdigo 625 copiar HTML do Fireworks 507 cores aceitas pela Web 378 amostras 384 cdigo, preferncias 589 como propriedades. Consulte propriedades conta-gotas, utilizar 384 criar 188 escolher 384 fundo da pgina 384 fundo do quadro 320 padro para texto da pgina 386 texto, alterar 184, 430 CPS 213
Create Web Photo Album (Criar lbum de fotografias na Web), comando 509 CSS Styles (Estilos CSS), painel 433 sobre 414 CSS. Consulte Cascading Style Sheets (Folha de estilo em cascata) (CSS), opo de estilo
D
dados tabulares, importar 261, 419 Data Link Properties (Propriedades de link de dados) 676 Data Source Name. Consulte DSN Database Items (Itens de banco de dados), hierarquia 768 datas inserir 431 soluo de problemas 715 Default Color (Cor padro), boto 385 Default Document Type (DTD) 640 definir codificao por cores 342 fontes e alterao de caractersticas 427 novo tipo de documento padro 106 propriedades do documento 381 Delete Record (Excluir registro), comportamento 1048 DELETE, palavra-chave do SQL 1102 depurar pginas ColdFusion 641 desativar Design Notes 168 mascaramento de sites 163 desenhar camadas 222 camadas aninhadas 224 clulas e tabelas de layout 289 desfazer a retirada do arquivo 155 design de quadros 306 Design Notes abrir 170 adio de opes de status 170 ativao e desativao 168 configurar 168 definidos 167 excluir, sem associao 171 para arquivos Flash 117 para objetos de mdia 523 para os arquivos do Fireworks 117 salvamento das informaes sobre o arquivo 169 sobre 116
1116
ndice
Design view alternar para a visualizao de cdigo 57 atualizar 584 exibir com visualizao de cdigo 584 exibir modelos 328 JavaScript, inserir 650 VBScript, inserir 650 visualizar documentos baseados em modelos 330 designar links abrir documentos em uma nova janela 469 em documentos 468 designar quadros 322 destruir arquivos temporrios, permisses para 713 Detach from Original (Desanexar do original), opo 198 Detach from Template (Desanexar do modelo), comando 367 detectar Flash Player para Flash Video 532 Director, criar filmes Shockwave com 534 Display Dependent Files (Exibir os arquivos dependentes), opo 145 Document Type Definition (Definio de tipo de documento) 596 documentos abrir outros tipos 107 aplicar modelo 366 criar em branco 102 criar, a partir de um modelo 104 criar, com base em um arquivo de projeto 103 definir propriedades 381 definir um tipo padro para novos 106 desanexar um modelo 367 Design Notes, utilizao com 167 em cascata 57 exibir em guias (Macintosh) 79 lado a lado 57 limpar HTML do Word 108 pesquisar 444 salvar 105 salvar como modelo 340 tamanho do download, estimativa de tempo 402 ttulo da pgina 382 verificar links 491 visualizar em navegadores 399 documentos baseados em modelos anexar modelos 366 desanexar modelos 367 na visualizao do projeto 330 modificar 368, 369, 370 na visualizao de cdigo 330
documentos do Microsoft Word colar 418 importar 108 limpar o HTML 108 documentos vinculados, abrir 495 Drag Layer (Arrastar a camada), ao 555 Dreamweaver conceitos bsicos 24 integrao do Contribute e 201 site. Consulte sites 88 Dreamweaver, integrao do Fireworks com o abrir e editar imagens do Fireworks 500, 512 abrir e otimizar imagens do Fireworks 501 atualizao do cdigo HTML do Fireworks 508 criao de lbuns de fotografias na Web 509 inserir arquivos do Fireworks 499 Open (Abrir) e Edit (Editar), preferncias 506 Optimize Image in Fireworks (Otimizar imagem no Fireworks), comando 501 driver Oracle Thin 696 drivers ODBC 1094, 1097 drivers, no especificados 712 DropDownList (Lista suspensa), controle 989 DSN conexes sem 688 criar uma conexo 684 soluo de problemas 712 utilizar 1099 Dynamic Data (Dados dinmicos), caixa de dilogo 787
E
Edit Font List (Editar lista de fontes), comando 429 Edit Format List (Editar lista de formatos), caixa de dilogo 801 Edit NoFrames Content (Editar contedo NoFrames), comando 323 Edit Style Sheet (Editar folha de estilo), caixa de dilogo 441 Edit with BBEdit (Editar com o BBEdit), comando 600 Edit with HomeSite (Editar com o HomeSite), comando 599 editar 779 arquivos em um servidor 119, 121 arquivos em um site do Dreamweaver 118 atalhos de teclado 83 cdigo 613
ndice
1117
comportamentos de servidor 883 controles de formulrio ASP.NET 988 definies de sites do Dreamweaver 97 folha de estilo CSS 441 folhas de estilo externas 441 fontes de dados 778 itens de biblioteca 194 modelos 359 objetos de boto Flash 525 propriedades 185 recordsets 778 sites da Web, existentes localmente 97 sites da Web, existentes remotamente 98 editores de HTML baseados em texto. Consulte editores externos editores externos BBEdit (apenas no Macintosh), integrao 599 HTML 599 imagens 458 integrao para o HomeSite (apenas no Windows) 599 mdia 521 texto 599 editores. Consulte editores externos efetuar a conexo com um banco de dados 668 efetuar logout de usurios 976 efetuar o download arquivos 156 comportamentos 548 tamanho, estimativa de tempo 402 tempo 50 efetuar upload de arquivos 897 elementos de mdia, inserir 518 elementos invisveis comentrios 626 mostrar e ocultar 388 scripts 650 selecionar 386 elementos, alinhar 452 erros de sintaxe em instrues de insero 716 erros ODBC 716 escrever cdigo 613 espao no-separvel, inserir 432 espaos converter para tabulaes 630 inserir no-separvel 432 esquema de desenho, para formatar tabelas 269 esquemas 596, 733 estilos aplicar estilos CSS personalizados 437
CSS 436 estilos conflitantes 410 Consulte tambm folhas de estilos estilos personalizados Consulte folhas de estilos evento onBlur 578 eventos alterar em comportamentos 546 definidos 541 desencadear aes 544 disponveis para diversos navegadores e objetos 543 Excel. Consulte arquivos do Microsoft Excel excluir arquivos e pastas 135 arquivos em um site do Contribute 211 arquivos no-utilizados 162 contedo dinmico 743, 789 fontes de dados 778 itens de biblioteca 196 linhas e colunas 275 recordsets 778 executar os objetos Flash 525 exibir arquivos em um servidor 119 arquivos em um site do Dreamweaver 118 arquivos em uma unidade ou na rea de trabalho 119 camadas 229 cdigo 583 cdigo da seo head 654 elementos invisveis 388 imagens de rastreamento 255 larguras de tabelas e colunas 274 modelos na visualizao do cdigo 329 modelos na visualizao do projeto 328 propriedades 179 referncias de cdigo 613 regies de modelo na visualizao de cdigo 330 regies de modelo na visualizao do projeto 330 registro de FTP 157 vrios registros 806 Expanded Tables (Tabelas expandidas), modo 266 expandir o painel Files (Arquivos) 123 Export Table (Exportar tabela), comando 262 exportar chaves de conexo para o Contribute 209 dados da tabela 261 estilos, para criar uma folha de estilos CSS 439 sites 147 expresses comuns 610 expresses de modelo 337
1118
ndice
extensibilidade, comportamentos de outras fontes 548 Extension Manager 84 extenses adicionar 84 criar 862 gerenciar 84 instalar 873
F
falhas de logon, SQL Server 713 Favorites, lista; (Assets, painel) adicionar e remover propriedades 188 adicionar uma nova cor 189 adicionar uma nova URL 189 criar um apelido para 190 criar uma pasta Favorites 191 exibir 181 sobre 179 Favorites, pasta 191 Ferramenta Zoom 389 ferramentas diff 126 "file already in use" (o arquivo j est em uso), mensagem de erro 712 Files (Arquivos), painel abrir arquivos 134 abrir e fechar 122 alterao da exibio 124 alterar a visualizao do site 123 alterar exibio das colunas 124 alterar tamanho da rea de visualizao 122 atualizar 135 busca de arquivos 136 exibir arquivos em 122 Log (Registro), boto 160 mapas de sites 137 mover arquivos e pastas 135 preferncias 133 reduzir e expandir 123 trabalhar com arquivos e pastas 134, 135 filmes MPEG, como propriedades. Consulte propriedades filmes QuickTime como propriedades. Consulte propriedades inserir 537 filmes Shockwave como propriedades. Consulte propriedades controlar 554 inserir 534
sobre 534 filmes, inserir 518 Fireworks Design Notes no 117 editar menus pop-up 504 integrao com o Dreamweaver 499 menus pop-up 572 Fit All (Ajustar tudo), opo 390 Fit Selection (Ajustar a seleo), opo 389 Fit Width (Ajustar a largura), opo 390 Flash Text (Texto Flash), caixa de dilogo 526 Flash Video detectar reprodutor 532 editar e excluir 533 inserir 532 opes de apresentao 531 Flash, Design Notes em 117 Flash, tornar dinmicos objetos 788 FlashPaper 529 fluxo de trabalho, para pginas dinmicas 735 folhas de estilo Edit Style Sheet (Editar folha de estilo), caixa de dilogo 441 editar 441 externas 439 Consulte tambm estilos folhas de estilo Design-Time (Tempo de projeto), utilizar 442 folhas de estilos externas criar 439 editar 441 vincular a 439 fontes alterar combinaes 429 alterar estilos 427 codificaes, definir fontes para 82 fontes de dados armazenar em cache 778 definir no Dreamweaver 670 enviados por usurios 747 excluir 779 JavaBeans 1054 parmetros de formulrio, sobre 747 parmetros de URL, sobre 749 recordsets, criar (simples) 765 recordsets, sobre 761 sobre 760 variveis ColdFusion 776 variveis de aplicativo 773 variveis de sesso 752, 772
ndice
1119
variveis JSP 777 Format (Formato), coluna 800 Format Table (Formatar tabela), comando 269 formatao cdigo, definir preferncias de 585, 587 tabelas e clulas 267 formatos de arquivo, imagem 445 formatos de dados aplicar 800 criar 801 editar 801 formulrios acessibilidade 904 adicionar a um documento 890 ASP.NET 987 botes 887, 895 botes de opo 888, 893 botes de opo dinmicos 901 caixas de seleo 888, 893 caixas de seleo dinmicas 900 campos de arquivo 889, 897 campos de imagem 889, 895 campos de senha 892 campos de texto 887, 892 campos de texto dinmicos 900 campos ocultos 887, 896 campos, validar 578 ColdFusion 915 controles, ColdFusion 919 criar 890 criar scripts do servidor 886 inserir objetos 892 JavaScript, usar com 903 menus 888, 894 menus de salto, criar 483 menus dinmicos 898, 899 objetos dinmicos 889, 898 scripts no cliente 903 sobre 886 utilizar para coletar dados 937, 1004 validao 902 validar formulrios ColdFusion 927 formulrios HTML. Ver formulrios fotografias 445 Frames (Quadros), painel 314 FROM, palavra-chave do SQL 1102 FTP obteno e colocao de arquivos 155 preferncias 133 registro 156, 157
soluo de problemas 95 funes, exibir 627 fundo imagem e cor, definir 384 transparncia no 384
G
Generator, tornar dinmicos objetos 788 gerenciar extenses 84 grupos de painis 67 links 479 propriedades. Consulte propriedades Get (Obter), comando 156 Get More Behaviors (Obter mais comportamentos), comando 548 GIF, imagens como imagem de rastreamento 254 utilizaes de 445 Go to URL (Ir para a URL), ao 559 grades como guia 77 encaixar as camadas na 253 mostrar 253 grficos bitmaps Consulte tambm imagens redimensionar 453 grficos Consulte imagens gravar cdigo 874 gravar comandos 397 gravar permisses em servidores 205 Grayscale (Escala de cinza), paleta de cores 385 GROUP BY, palavra-chave do SQL 1102 grupo de painis Results Validation (Validao), painel 639 grupo de painis Results (Resultados) Target Browser Check (Verificao de navegador de destino), painel 635 guias alterar a cor 252 bloquear 252 criar 251 desbloquear 252 encaixar elementos em 252 mostrar e ocultar 251 utilizar com modelos 253 guias visuais imagens de rastreamento 254
1120
ndice
rguas 253 sobre 77
H
Hand (Mo), ferramenta 389 Hand, ferramenta 50 History (Histrico), painel automatizar tarefas com 391 comandos, criar de etapas do histrico 396 etapas, aplicar a outros objetos 394 etapas, copiar e colar 395 etapas, repetir 392 lista de histrico, limpar 391 nmero mximo de etapas, definir 391 viso geral 377 home page, definir para o mapa do site 138, 143 HomeSite 599 HTML atributos, tornar dinmicos 786 cdigo-fonte, estilos de tag 433 cdigo-fonte, procurar 444 converter para XHTML 640 definir extenso de arquivo 106 espao no-separvel 432 formatar e inserir 406, 418 relatrios de atributos 173 Roundtrip 605 Consulte tambm cdigo Hyperlink, caixa de dilogo 472
I
imagens alinhar 423 alterar arquivo de origem com linhas de tempo 240 aplicar comportamentos a 459 brilho e contraste 456 como propriedades. Consulte propriedades cortar 454 definir a nitidez 456 editar com editor externo 458 fazer reamostragem 454 formatos suportados 445 em formulrios 889 inserir 448 inserir no modo Layout 293 mapas de imagens 488 pr-carregar (comportamento) 564
redimensionamento 453 sobre 445 tornar dinmico 785 trocar e restaurar troca (comportamento) 577 usando o Fireworks para otimizar 455 imagens cambiveis criar 458 sobre 457 imagens de rastreamento 254 Import Table (Importar tabela), comando 261 importar arquivos do Microsoft Word 108 dados tabulares 261, 419 folha de estilo CSS externa 439 sites 147 tags ASP.NET 597 tags JRun 598 tags JSP 597, 598 tags personalizadas 596 texto de outros documentos 419 imprimir cdigo 632 incluses do servidor alterar tipos 652 Arquivo 652 editar arquivo 652 inserir 652 inserir e editar 652 sobre 608 Virtual 652 incluses do servidor de arquivos 608 incluses do servidor virtual 608 incluses, servidor 608 inserir alocador de espao de imagem 450 applets Java 539 arquivos Flash SWF 527 camadas aninhadas 224 caracteres especiais 431 comentrios 626 controles ActiveX 539 datas 431 elementos de mdia 518 filmes Shockwave 534 FlashPaper 529 imagens 448 imagens cambiveis 458 imagens do Fireworks 499 incluses do servidor 652 itens de biblioteca 193 objetos de boto Flash 523
ndice
1121
objetos de texto Flash 526 pginas 944 propriedades 182 tags div 244 Insert E-Mail Link (Inserir link de correio eletrnico), caixa de dilogo 477 Insert Jump Menu (Inserir menu de salto), caixa de dilogo 484 Insert Named Anchor (Inserir ncora com nome), caixa de dilogo 475 Insert Navigation Bar (Inserir barra de navegao), caixa de dilogo 486 Insert Record (Inserir registro), comportamento 947 INSERT, palavra-chave do SQL 1102 inspetores Property inspector 65 Tag inspector 644 Consulte tambm painis instrues de codificao 871 integrao com o BBEdit (apenas no Macintosh) 599 integrar o Dreamweaver com outros aplicativos 33 interface do usurio, personalizar o layout do painel 67 Internet Explorer, contedo ativo restrito 401 ISP 689 itlico, definir texto em 427 item do menu Functions (Funes) 627 itens de biblioteca adicionar s pginas 193 alterar a cor de realce 197 como propriedades. Consulte propriedades criar 191 editar 194 editar os comportamentos em 199 excluir 196 preferncias 197 propriedades 198 recriar 196 renomear 196 sobre 177 tornar editveis os itens de documentos 198 trabalhar com 191
J
Jakarta Tomcat application server (JSP) 662 janela do documento aplicar zoom 389 barra de status 50 barra de ttulo 47
conceitos bsicos 47, 56 executar os plug-ins para Navigator 537 exibir o cdigo 57 procurar texto 444 redimensionar 58 selecionar elementos 386 seletor de tags 50 sobre 46 tamanho da pgina e tempo de download 50 Window Size, menu pop-up 50 janela do Live Data arquivos ausentes 728 atualizao automtica 730 exibir 726 fornecer os parmetros esperados 729 parmetros da URL na barra de ferramentas 729, 742 sobre 741 janela Site, procurar texto 444 Java Server Pages (Pginas do Java Server). Consulte JSP JavaScript aes 543 alertas 563 anexar a objetos de formulrio 903 arquivos 108 comportamentos 541 executar 549 inserir cdigo na visualizao do projeto 650 menu pop-up 572 processar dados de formulrios 903 JDBC drivers 697, 1094 parmetros de conexo 696 JPEG, imagens como imagem de rastreamento 254 utilizaes de 445 JRun 662 JSP (Java Server Pages) Comportamento do servidor Callable 1050 conexes de banco de dados 695 conexes ODBC 699 conjunto de resultados, definio 737 drivers JDBC 697 importar tags 597 inserir pginas, criar 944 instrues preparadas 914, 1053 JavaBeans 1054 pginas de atualizao 1038 pginas de busca, criar 937, 1038 pginas de excluso, criar 1045
1122
ndice
pginas de login, criar 966 pginas-mestras/detalhes, criar 928, 1033 procedimentos armazenados 1050 servidores de aplicativos 662 variveis JSP 777 JSP, callable (chamvel) 1050 JSP, instrues preparadas 1053 Jump Menu (Menu de salto), ao 560 Jump Menu Go (Ir do menu de salto), ao 560
L
larguras e alturas da tabela 274 Layers, painel 227 layout de pgina. Veja modo Layout Layout, modo adicionar contedo a 293 alongamento automtico 287 alternar de/para o modo Standard (Padro) 288 clulas e tabelas de layout, trabalhar com 295 definir largura 287 desenhar clulas e tabelas de layout 289 espaamento entre clulas 298 formatar as clulas e tabelas de layout 297 imagens espaadoras, preferncias 287 largura fixa 287 limpar as alturas das clulas 295 Make Widths Consistent (Tornar consistentes as larguras), opo 298 menu do cabealho da coluna 299 mover clulas e tabelas de layout 295 preferncias 302 Remove All Spacers (Remover todos os espaadores), opo 298 Remove Nesting (Remover aninhamento), opo 298 sobre clulas e tabelas de layout 284 tabelas de layout aninhadas 292 layout, planejamento. Veja modo Layout Left ( esquerda), opo de alinhamento 453 leitoras de tela JAWS for Windows: 71 Window-Eyes 71 ler permisses em servidores 205 limpar as larguras das colunas 273, 274 linguagens com suporte em Dreamweaver 604 referncia 631 Linhas de tempo
adicionar e remover quadros 239 adicionar objetos a 238 alterar arquivo de origem de imagens 240 alterar propriedades de camadas 240 caminhos complexos 239 com loop 239 criar 237 dicas de animao 243 executar automaticamente 239 modificar 239 quadros-chave 237 renomear 243 vrias 241 linhas de tempo com loop 239 linhas e colunas adicionar e excluir 275 linhas e colunas, adicionar e remover 275 linhas, quebra na visualizao do cdigo 586 Link Checker (Verificador de links), caixa de dilogo 493 Link Color (Cor do link), opo - Page Properties (Propriedades da pgina) 386 Link External Style Sheet (Vincular folha de estilo externa), caixa de dilogo 439 Link to Existing File (Link a um arquivo existente), comando 142 Link to New File (Link a um novo arquivo), comando 142 links abrir a origem 481 adicionar 184 alterar no site inteiro 482 alterar quadros com 321 a ncoras 475 aplicar seleo 184 arquivo de cache 479 para arquivos de script 651 atualizar 479 corrigir, rompidos 493 criar 467 criar links nulos 477 definir caminhos relativos 473 designar 467 a folhas de estilos 439 gerenciar 479 mapa do site 481 em modelos 333 ocultar 806 Relative to Document (Relativo ao documento), opo 469
ndice
1123
Relative to Site Root (Relativo raiz do site), opo 469 remover 481 rompidos 491 verificar 491 links de correio eletrnico alterar 482 criar 476 links de hipertexto 467 links de navegao para registros, definir 802 links de scripts alterar 482 criar 477 links externos 491 links nulos alterar 482 criar 477 links rompidos 491 ListBox (Caixa de lista), controle 989 Live Data Settings (Definies do Live Data), caixa de dilogo 729 localizar arquivos no-utilizados 162 localizar e substituir. Consulte pesquisar Log (Registro), boto 160
M
Mac OS (Mac), paleta de cores 385 Macintosh acessibilidade 71 documentos com guias 79 Macromedia Director, criar filmes Shockwave com 534 Macromedia Exchange 84, 873 Macromedia HomeSite 599 Macromedia JRun 598, 662 macros, criar comandos 396 maisculas/minsculas, alterar 587, 630 Manage Sites (Gerenciar sites), caixa de dilogo, remover sites da 148 manipuladores de eventos. Veja eventos mapa de percurso, onde iniciar 24 mapas de imagens criar no lado do cliente 489 pontos ativos 489 selecionar vrios pontos ativos 490 viso geral 488 mapas de imagens do servidor 488 mapas de sites adicionar arquivos a um site 142
alterar os links nos 481 definidos 137 definir home page para 138 exibir 138, 145 Link to New File (Link a um novo arquivo), comando 142 links, trabalhar com 481 modificar layout de 140 mostrar arquivos 144 mostrar os arquivos dependentes nos 145 ocultar arquivos 144 salvamento como um arquivo de imagem 146 trabalhar com 481 trabalhar com pginas em 141 marcadores para elementos invisveis 388 Mark of the Web, cdigo 401 markup. Ver cdigo mascarar, site arquivos 164 ativao e desativao 163 revelar tudo 167 Master/Detail Page Set (Conjunto de pginas-mestras/ detalhes), objeto de aplicativo 928, 997, 1033, 1057 Material de referncia da CGI 40 MDAC (Microsoft Data Access Components) 674 mensagens de erro file already in use (o arquivo j est em uso) 712 Microsoft, soluo de problemas 711 Consulte tambm soluo de problemas mensagens de erro da Microsoft, soluo de problemas 711 menu do cabealho da coluna Add Spacer Image (Adicionar imagem espacejadora), opo 300 Clear Column Width (Limpar largura da coluna), opo 274 exibir 274, 285 inserir colunas 275 largura da coluna, definir 299 Make Column Autostretch (Criar coluna com alongamento automtico) 299 Remove Spacer Image (Remover imagem espacejadora) 301 Select Column (Selecionar coluna), comando 264 sobre 258 menu do cabealho da tabela Clear All Heights (Limpar todas as alturas), comando 274, 295
1124
ndice
Clear All Widths (Limpar todas as larguras), comando 274 exibir 274, 285 Make Widths Consistent (Tornar consistentes as larguras) 273, 301 Remove All Spacer Images (Remover todas as imagens espacejadoras) 301 Select Table (Selecionar tabela), comando 264 sobre 258 menus 894 menus contextuais 66 menus de atalho. Consulte menus contextuais menus de lista 888, 894 menus de referncias de cdigo 613 menus de salto adicionar os itens de menus 483 alterar os itens de menu 484 criar um aviso de seleo para 483 editar 560 Go (Ir), botes 483, 560 sobre 888 menus pop-up comportamento do JavaScript 572 Fireworks 504, 572 formulrios HTML 888, 894 menus suspensos 894 Merge Cells (Mesclar clulas), comando 276 Microsoft Access, arquivos de banco de dados bloqueados 712 Microsoft IIS 661 Middle (Centro), opo de alinhamento] 452 Modelo de objeto de expresso (modelos) 338 modelos alterar cores de realce de regies 343 aninhados 334, 357 aplicar a documento existente 366 Assets (Propriedades), painel 341 atributos de tags editveis 327, 356, 357 atualizar documentos 361 atualizar sites do Contribute 361 clicar em regies bloqueadas 368 como criar novos documentos com 104 como propriedades. Consulte propriedades criar 340 criar para sites do Contribute 344 desanexar documento de 367 desfazer aplicao 367 na visualizao do projeto 328 editar 359 editar cdigo em 336
editar scripts do servidor 336 excluir 363 expresses 337 links, criar em 333 localizar regies editveis 348 modificar propriedades em documentos baseados em modelos 368 parmetros 336 preferncias 342 regio opcional 327, 353, 355 regio repetitiva 327, 350, 370 regies editveis 326, 347, 348, 349 renomear 363 sintaxe da tag 331 sobre 326 tabela repetitiva 351, 352 tipos de regies 326 tornar no-editvel uma regio 349 na visualizao de cdigo 329 XML 364 modificar bancos de dados, utilizar procedimentos armazenados 965, 1030, 1049 propriedades da pgina 382 modo padro definidos 257 modos Expanded Tables (Tabelas expandidas), modo 266 Layout, modo 283 modo padro 257 mostrar elementos invisveis 388 Move to Record (Mover para registro), comportamento 805 mover 625 mover arquivos e pastas 135 multimdia. Consulte elementos de mdia MySQL, banco de dados 705
N
Named Anchor (ncora com nome), comando 475 Nav Bar Image (Definir imagem da barra de navegao), ao 565 navegadores compatibilidade, com quadros 323 compatibilidade, como testar 635 cores, aceitas pela Web 378 designar 635 primrio, definir 400
ndice
1125
verses, verificar 551 visualizar em 399 New From Template (Novo a partir de modelo), comando 104, 105 nveis de autorizao 974 nomes de usurio armazenar 968 permitir que os usurios escolham 968 verificar a exclusividade 970 verificar durante o login 973 novo tipo de documento padro, definir 106 novos recursos no Dreamweaver 20 numerando linhas de cdigo 586 nmeros de linha 586
O
Objeto XSLT de Repeat Region 841 objeto XSLT de Repeat Region 822, 833, 836 objetos inserir inserir com a barra Insert (Inserir) 61 tornar dinmico 788 objetos de boto Flash modificar 525 visualizao 525 objetos de texto Flash inserir e visualizar 526 objetos do aplicativo conjunto de pginas-mestras/detalhes 928, 997, 1033, 1057 Record Insertion Form (Formulrio de insero de registros) 945 Record Update Form (Formulrio de atualizao de registros) 951, 1016, 1041, 1068 objetos do servidor variveis ColdFusion 764, 776 variveis de aplicativo 773 variveis de sesso 772 objetos, inserir HTML em formulrios 892 obteno e colocao de arquivos 156, 157 ocultar elementos invisveis 388 links 806 ocultar o menu pop-up 576 OLE DB conexes 683 obter um provedor 674 provedores 1094
OLE DB Connection (Conexo com banco de dados OLE) 675 opo Auto Refresh 730 opes de exibio fontes 82 painis flutuantes 70 Open (Abrir) e Edit (Editar), preferncias 506 Open (Abrir), comando 107 Open Attached Template (Abrir modelo anexado), comando 360 Open Browser Window (Abrir a janela do navegador), ao 561 Open Linked Page (Abrir a pgina vinculada), comando 495 Optimize Image in Fireworks (Otimizar imagem no Fireworks), comando 501 Options, menu 68 ordem das colunas do painel Files, alterar 124 ordem de empilhamento alterar com linhas de tempo 240 camadas 228 ortografia dicionrios 444 verificar com o comando Check Spelling (Verificar ortografia) 444 ortografia, verificar com o comando Check Spelling (Verificar ortografia) 443
P
pgina de registro 967 pgina inicial 46 pginas alterar ttulo 382 cores padro do texto 386 Design Notes, utilizao com 167 excluir 1045 exibir dados XML em 831 imagem ou cor de fundo, definir 384 inserir, criar 944 login, criar 971 preferncias de tempo e tamanho do download, definir 402 redimensionar para adaptao ao monitor 58 registro de atualizao, criar 948 registro do usurio 967 restringir o acesso s 974 visualizar em navegadores 399 XHTML, criar 640
1126
ndice
pginas de atualizao, criar ASP 1038 ASP.NET 1011 ColdFusion 948 JSP 1038 PHP 1064 pginas de busca, criar ASP 937, 1038 ASP.NET 1004 ColdFusion 937 JSP 937, 1038 PHP 937 pginas de detalhes 928, 997, 1033, 1057 pginas de excluso, criar ASP 1045 ASP.NET 1020 ColdFusion 955 JSP 1045 PHP 1072 pginas de login ColdFusion 977 criar 971 pginas de resultados 937, 1004 pginas-mestras/detalhes ASP 928, 1033 ASP.NET 997 ColdFusion 928, 930 JSP 928, 1033 PHP 928, 1057 painis Assets (Propriedades), categoria Templates (Modelos) 341 Behaviors (Comportamentos) 543 de encaixe 67 definir as preferncias de flutuao 70 Frames (Quadros) 314 gerenciar 67 grupos de painis 47 History (Histrico) 377 salvar layout personalizado 70, 80 painis flutuantes, combinar 67 paletas de cor 384 pargrafos adicionar uma quebra de linha 424 formatao 423 Parameters (Parmetros), caixa de dilogo 788 parmetros marcadores 880 modelos 336 too few (erro SQL) 715
parmetros de conexo 696 parmetros de modelo modificar em documentos baseados em modelos 369 viso geral 336 pasta Legacy 615 pasta local configurar 92 estrutura 88 pasta remota configurar 94 estrutura 88 soluo de problemas 95 pastas 164 Favorites, para propriedades 191 mascarar e revelar 164 pesquisar 444 trabalhar com 134, 135 Perl, suporte a recursos 604 permisses criar e destruir arquivos temporrios 713 funes no Contribute 208 gravar permisses em servidores 205 pasta com banco de dados 714 segurana 711 em servidores 205 soluo de problemas 709 personalizar ambiente de codificao 583 Dreamweaver, princpios bsicos 78 pesquisar arquivos 444 cdigo 628 expresses comuns 610 localizar e substituir 444 salvar padres de busca 629 tags e atributos 628 texto nos arquivos 444 PHP conexes de banco de dados 705 inserir pginas 944 instalar PHP 662 Mac OS X 662 pginas de atualizao 1064 pginas de busca 937 pginas de excluso 1072 pginas de login 966 pginas-mestras/detalhes 928, 1057 pixels transparentes no fundo 384 planejamento de quadros 306
ndice
1127
Play Sound (Executar o som), ao 563 plug-ins executar na janela do documento 537 soluo de problemas 538 tornar dinmico 788 verificar 552 plug-ins para Netscape Navigator executar na janela do documento 537 soluo de problemas 538 PNG, imagens como imagem de rastreamento 254 utilizaes de 445 pontos ativos aplicar comportamentos a 459 em mapas de imagens 489 redimensionar 490 selecionar vrios em um mapa de imagens 490 pontos de interrogao 715 Popup Message (Mensagem pop-up), ao 563 posicionar blocos de cdigo 878 preferncias alterar realce 247 atualizar os links 479 barra de status 59 barra Insert 63 camadas 225 codificao por cores 589 dicionrio para verificao ortogrfica 443 editores externos 522 fontes/codificao 82 formatao de cdigo 587 gerais 81 Layout, modo 302 modelo 342 New Document (Novo documento) 106 Open (Abrir) e Edit (Editar) 506 painis 70 painis flutuantes 70 realce, bibliotecas 197 realce, blocos de layout 247 realce, clulas de layout 291 realce, regies de modelo 342 realce, tabelas 262 reescrita de cdigo 588 referncias de cdigo 588 Site 133 tipos de arquivos e editores 600 tipos de arquivos/editores 522 Validator (Validador) 590
viso geral 78 Visualizao do cdigo 586 preferncias de cores de cdigo em modelos 342 preferncias de fontes/codificao 82 preferncias de New Document (Novo documento) 106 Preferncias de realce blocos de contedo 247 clulas de layout 291 itens de biblioteca 197 regies do modelo 342 tabelas 262 preferncias de transferncias de arquivo 133 preferncias dos tipos de arquivos/editores 522 preferncias gerais 81 Preload Images (Pr-carregar as imagens), ao 564 Prevent Layer Overlaps, comando 233 Preview in Browser (Visualizar no navegador), comando 399 princpios bsicos do Dreamweaver 24 privilgios de acesso adicionar s pginas 975 armazenar em um banco de dados 976 exemplo 974 procedimentos armazenados ASP 1049 ASP.NET 1030 ColdFusion 965 definidos 913 JSP 1050 modificar bancos de dados 965, 1030, 1049 processadores de texto, arquivos criados por 108 Property inspector editar cdigo 644 exibir 65 expandir 65 sobre 46 Property inspector (Inspetor de propriedades) corrigir links rompidos 494 editar recordset 743, 789 modo padro 787 tornar dinmicos atributos HTML 786 proporo, manter 453 propriedades abrir o painel Assets 180 alterar com comportamentos 550 camada nica 225 camadas mltiplas 226 categorias 181 clulas e tabelas de layout 297
1128
ndice
conjunto de quadros 320 copiar para um outro site 187 cores, aplicar ao texto 184 cores, criar 188 documento baseado em modelo 368 documento, definir 381 editar 185 exibir 65, 179 Favorites, lista 179, 181, 188 Favorites, pasta; criar 191 gerenciar 179 inserir 182 item de biblioteca 198 quadro 318 reutilizar em outro site 186 selecionar diversas 185 Site, lista 179, 180, 181 tabela 267 trabalhar com 179 URLs, criar 188 propriedades de pgina, alterar ttulos 382 provedores de bancos de dados OLE da Microsoft 674 provedores de bancos de dados OLE da Oracle 674 Put (Colocar), comando 157
Quick Tag Editor abrir 646 menus de referncias 648
R
RadioButton (Boto de opo), controle 991 RadioButtonList (Lista de boto de opo), controle 991 Record Insertion Form (Formulrio de insero de registros), objeto de aplicativo 945 Record Path of Layer (Gravar caminho da camada), comando 239 Record Update Form (Formulrio de atualizao de registros), objeto de aplicativo 951, 1016, 1041, 1068 Recordset Navigation Bar (Barra de navegao para recordset), objeto ativo 803 Recordset Navigation Status (Status de navegao do recordset), objeto ativo 810 Recordset, caixa de dilogo avanada 767 simples 766 recordsets armazenar em cache 778 colunas, definir (SQL) 1103 copiar e colar 779 Database Items (Itens de banco de dados), hierarquia 768 definir sem utilizar SQL 765 editar ou excluir 778 filtrar registros (SQL) 1104, 1107 limitar os registros retornados (SQL) 1103 simples, criar 765 sobre 761 SQL, gravar 1101 SQL, gravar instrues personalizadas 767 unio de tabelas (SQL) 1107 vazios, soluo de problemas 717 recuar cdigo 594, 625, 630 recursos para informaes sobre tecnologias da Web 40 redimensionar camadas 230 clulas da tabela 270 clulas e tabelas de layout 295 elementos, utilizar alas 453 quadros 313 reduo de cdigo 625 expandir 623
Q
quadros adicionando atributos de acessibilidade 311 alterar contedo com links 321 alterar cor de fundo 320 aninhados 307 compatibilidade com os navegadores 323 criar 309 definidos 303 designar 322 editando atributos de acessibilidade 318 excluir 313 Frames (Quadros), painel 314 planejar contedo com 306 propriedades, definir 318 redimensionar 313 salvar 316 selecionar 313 sobre 304 uso com comportamentos 323 quadros-chave, criar 237 quebra automtica de linha 586 quebra de linhas na visualizao do cdigo 586
ndice
1129
reduo inteligente 622 reduzir 623 sobre 622 visualizar sem expandir 624 reduo inteligente 622 reduzir o painel Files (Arquivos) 123 reescrever cdigo 605 Reference (Referncia), painel 631 referncias de cdigo bibliotecas de tags 591 preferncias 588 Quick Tag Editor 648 sobre 613 Refresh Local (Atualizar o local), comando 143 regies clicar em bloqueadas 368 ocultar 806 regies bloqueadas, clicar em 368 regies editveis (modelos) alterar o nome de 349 controlar em modelos aninhados 357 criar 347 definidos 326 trabalhar com 348, 349 regies opcionais (modelos) definidos 327 inserir 353 modificar 355 regies repetitivas (modelos) alternar cores 352 em documentos baseados em modelos 370 criar 350 definidos 327 tabela repetitiva 351 registrar a atividade da rede 213 registrar transferncias de arquivos 160 registro de eventos 213 registros atualizar 948 criar contador 809 excluir 1045 exibir mais de um 806 inserir 944 links de navegao 802 rguas 253 na visualizao do projeto 251 sobre 253 rguas horizontais, inserir e modificar 425 relatrios exibir 175
salvar 175 para sites 173 validar cdigo 639 relatrios de fluxo de trabalho 173 Remove Frame (Remover quadro), comando 237 Remove Timeline (Remover linha de tempo), comando 241 remover quadros de uma linha de tempo 240 Rename Panel Groups (Renomear grupos de painis), comando 69 renomear arquivos e pastas 135 itens de biblioteca 196 Repeat Region (Repetir regio), comportamento 806 repetir etapas 391 Replay (Executar novamente), boto 392 requisitos, aplicativos para a Web 657 Reset Origin, comando 253 Reset Position (Redefinir a posio), comando 255 restrio de tabelas 733 restringir o acesso ao site 966 reutilizar buscas 629 cdigo 615 itens de biblioteca 193 propriedades 186 revelar pastas do site 164 tipos de arquivos 164 todas as pastas e arquivos 167 reverter arquivos 132 reverter para ltima verso salva 381 Right ( direita), opo de alinhamento, definir o Property inspector (Inspetor de propriedades) 453 Roundtrip HTML 605
S
salvar arquivos em quadros e em conjuntos de quadros 316 buscas 629 documentos 105 documentos com outro nome 380 mapas de sites 146 relatrios 175 reverter para ltima verso salva 381 Save (Salvar), comando 105
1130
ndice
Save All (Salvar tudo), comando 380 Save All Frames (Salvar todos os quadros), comando 317 Save Frame (Salvar quadro), comando 317 Save Frame As (Salvar quadro como), comando 317 Save Frameset (Salvar conjunto de quadros), comando 317 Save Frameset As (Salvar conjunto de quadros como), comando 317 scripts chaves ajustadas, verificar 634 como propriedades. Consulte propriedades criar links de script 477 editar externos 650 editar na visualizao do projeto 651 exibir as funes 627 inserir 650 vincular arquivos externos 651 scripts do servidor, em modelos 336 seo head, vizualizar e editar 654 segurana definir permisses de banco de dados para 711 pginas de login para 966 proteger uma pasta por meio de senha 977 selecionar camadas 227 clulas e tabelas de layout 295 elementos da tabela 262 objetos na janela do documento 386 quadros e conjuntos de quadros 313 tags 649 vrias propriedades 185 Select Newer Remote (Selecionar um remoto mais novo), comando 161 SELECT, palavra-chave do SQL 1102 seletor de cores Dreamweaver 384 sistema 385 seletor de cores do sistema 385 seletor de tags 46, 649 senhas armazenar 968 campos 892 incorretas 714 permitir que os usurios escolham 968 verificar durante o login 973 seqncias de caracteres de conexo chamar os drivers de bancos de dados 1098 OLE DB 677
Server Behavior Builder (Criador de comportamentos de servidor) 862 servios da Web adicionar a uma pgina 856 diretrios UDDI 850 fluxo de trabalho 849 gerador proxy AXIS 851 geradores proxy adicionais 851 geradores proxy, configurar 852 geradores proxy, instalar 851 lista de sites UDDI, editar 859 SOAP 851 sobre 847 servidor da Web, lbuns de fotos, criao 509 definir 658 projeto, nveis de experincia no 24 servios de hospedagem 689 servidor de aplicativos configurar 659 escolher 659 servidor de teste aplicativos para a Web 667 comportamentos 872 configurar 659 servidor HTTP 658 servidor SQL, soluo de problemas de pginas dinmicas 713 servidores abrir uma conexo j existente 119 conectar para editar arquivos 121 efetuar upload de pginas 897 opes de acesso 94 solucionar problemas da pasta remota 95 Set as Home Page (Definir como home page), comando 143 Set Color Scheme (Definir esquema de cores), comando 386 Set Text of Frame (Definir o texto do quadro), ao 566 Set Text of Layer (Definir o texto da camada), ao 567 Set Text of Status Bar (Definir a mensagem de status), ao 568 Set Text of Text Field (Definir o texto do campo de texto), ao 569 Shockwave, tornar dinmicos objetos 788 Show Region (Mostrar regio), comportamento 806 Show-Hide Layers (Mostrar/ocultar as camadas), ao 570 sincronizao dos sites local e remoto 161
ndice
1131
sistema de devolues e retiradas desfazer a retirada de um arquivo 155 devoluo e retirada de arquivos 148, 153 localizar arquivos retirados 136 sistemas multiusurio 55 sistemas operacionais, multiusurio 55 Site (painel Assets), lista atualizar 181 exibir 180 Site [painel Assets], lista sobre 179 Site, painel agora painel Files 47 agora painel Files (Arquivos) 132 procurar texto e HTML em documentos 444 sites abrir para exibir 118 arquivo de cache 480 arquivos, trabalhar com 134 cache 479 Check In/Check Out (Devolver/retirar), utilizar 148 compatibilidade com os navegadores 635 criar novas, definies avanadas 91 criar novos, Site Definition Wizard (Assistente de definio do site) 90 Design Notes, utilizao com 167 diretrizes de teste 172 editar definies de sites 97 editar sites da Web j existentes 97, 98 especificar um servidor de teste 667 estrutura das pastas 88 exibio do painel Files (Arquivos), alterar 124 exibir no painel Files (Arquivos) 122 grandes, propriedades em 188 importar e exportar 147 links rompidos, corrigir 493 links, alterar em todo o site 482 links, trabalhar com 461 links, verificar 491 locais e remotos 88 localizao de arquivos nos 136 mapa do site, trabalhar com 137 mascaramento 116, 163 material de referncia 40 pasta local, configurar 92 pasta remota, configurar 94 pasta remota, solucionar problemas da 95 procurar arquivos em 444 propriedades, reutilizar 186
relatrios 173 remoo da lista de sites 148 segurana 966 sincronizar local e remoto 161 visualizar em navegadores 399 sites locais. Consulte sites 90 Snap to Web Safe (Ajustar cor aceita pela Web), paleta de cores 385 SOAP e servios da Web 851 sobrepor tags 605 soluo de problemas arquivo em uso 712 arquivos bloqueados em sites do Contribute 213 BOF 717 campo COUNT incorreto 715 clicar em regies bloqueadas 368 compatibilidade do Contribute, ativar 204 consultas atualizveis 714 Contribute 213, 214 devolver e retirar dos sites Contribute 213 DSN 712 EOF 717 erro de correspondncia de tipos de dados 715 erros de sintaxe 716 erros ODBC 716 estilos, no exibidos corretamente no Contribute 442 links rompidos no Contribute 212 logon com falha 713 mensagens de erro da Microsoft 711 parmetros, falta de 715 permisses 709 plug-ins para Netscape Navigator 538 som adicionar a uma pgina 535 executar 563 incorporar 536 vincular a um arquivo de udio 535 Split Cells (Dividir clulas), comando 277 Split Frame (Dividir quadro), comandos 309 SQL ASP.NET 762 colunas, definio 1103 Database Items (Itens de banco de dados), hierarquia 768 filtrar registros 1104, 1107 instruo SELECT 1101 limitar registros 1103 operadores 1102 ORDER BY 1102
1132
ndice
palavras-chave 1102 recordset, definir com SQL 767 sobre 1101 unir tabelas 1107 Strikethrough (Tachado), boto (cor padro) 385 Style (Estilo), submenu 427 Style Rendering, barra de ferramentas 54 sublinhado 427 sublinhados em nomes de contas SQL 714 substituir um alocador de espao de imagem 451 suporte de linguagens 604 Suporte tcnico Microsoft 711 Swap Image (Trocar imagem), ao 577 Swap Image Restore (Restaurar troca de imagem), ao 578 System Color (Cor do sistema), boto 385
T
tabelas aninhar 281 camadas, converter de 234 clulas, dividir 277 clulas, limpar larguras e alturas 273 clulas, mesclar 277 clulas, realar 262, 284 criar e adicionar contedo 260 dados tabulares, importar 419 dados, exportando 261 editar 266 elementos, selecionar 262 estilos predefinidos para 269 Expanded Tables (Tabelas expandidas), modo 266 formatao 267 importar 261 largura das colunas, ajustar 273, 274, 301 larguras e alturas 273 larguras, exibir 274 linhas e colunas, adicionar e remover 275 linhas e colunas, ajustar 270 ordenar 281 propriedades 267 realce, preferncia de 262 redimensionar 270 restrio 733 sobre 258 Veja tambm colunas, linhas e clulas tabelas de layout aninhados 292
cor de fundo 298 desenhar 289 espaamento entre clulas 298 formatao 298 Make Widths Consistent (Tornar consistentes as larguras), opo 298 preferncias 302 Remove all Spacers (Remover todos os espaadores), opo 298 Remove Nesting (Remover aninhamento), opo 298 sobre 284 tabelas repetitivas (modelos) alternar cores 352 inserir 351 tabulaes, converter para espaos 630 tag cabealho, aplicar 423 editores 621 pargrafo, aplicar 423 sintaxe, modelos 331 tag blockquote, aplicar 424 tag de link href 439 tag div, inserir 244 Tag inspector 644 Tag Library Editor (Editor de bibliotecas de tags) 591 tag map 489 Tag Validator (Validador de tags) 639 tags aninhadas, combinar 633 ASP.NET, importar 597 bibliotecas 591 editar cdigos com o Quick Tag Editor 646 editar com um Tag editor 621 fechamento 615 invlidas 605 JRun, importar 598 JSP, importar 597, 598 personalizadas, importar 596 procurar 628 remover 630, 649 selecionar 386, 649 sobrepor 605 vazias, remover 633 Consulte tambm cdigo Tags de fechamento 615 tags invlidas, exibir 605 tags JRun 598 blocos de layout CSS Consulte blocos de layout tags personalizadas, importar 596
ndice
1133
tags vazias, remover 633 tamanho do monitor, redimensionar as pginas para adaptao ao 58 Target Browser Check, painel 635 tecla Return, adicionar um pargrafo 424 Template Properties (Propriedades do modelo), caixa de dilogo 369 testar o site diretrizes 172 sobre 171 utilizar relatrios 173 Text Color (Cor do texto), opo 386 TextBox (Caixa de texto), controles 990 texto adicionar a um documento 418 alinhamento 423 alterar a cor 184, 430 alterar combinaes de fontes 429 arquivos, abrir 108 campos 887, 892 campos, definir o texto com comportamentos 569 colar 418 cor padro em pginas 386 editores, arquivos criados por 108 editores. Consulte tambm editores externos espao no-separvel 432 formatao 406, 418, 427 formatar (com o Property inspector[Inspetor de propriedades]) 412 importar dados tabulares 419 importar de outros documentos 419, 420 inserir 406, 418 preferncias de colagem 419 procurar em documentos 444 recuar 424 remoo do recuo 424 tornar dinmico 783 texto em negrito, definir 427 TextTop (Parte superior do texto), opo de alinhamento 452 Tile (Lado a lado) 57 tipogrficas, convenes 40 tipos de arquivos arquivos Flash 516 preferncias de editor externo e 600 tipos de codificao 82 tipos de dados, erro de correspondncia 715, 717 ttulos, alterar 382 Top (Superior), opo de alinhamento 452 transferncia de arquivos 155
transferncias de arquivos em segundo plano 115 transferir arquivos de e para os sites do Contribute 205 transformaes de XSL editar 838 lado cliente 819, 842 lado servidor 816, 826 usar parmetros com 839 transparentes, pixels, no fundo 384 trechos criar atalhos de teclado 616 pasta Legacy 615 Snippets (Trechos), painel 615
U
UDDI diretrios pblicos 850 lista de sites, editar 859 unidade local, acessar arquivos em 119 Unmark Editable Region (Desmarcar regio editvel), comando 349 Update Current Page (Atualizar pgina atual), comando 361 Update Current Page, comando 195 Update HTML (Atualizar HTML), comando 508 Update Pages (Atualizar pginas), comando 361 Update Record (Atualizar registro), comportamento 955, 1019, 1044, 1071 UPDATE, palavra-chave do SQL 1102 URLs aplicar seleo 184 como propriedades. Consulte propriedades criar propriedades de URLs 188 Consulte tambm caminhos usemap, atributo 489
V
validar formulrios ColdFusion 927 HTML 902 Validate Form (Validar o formulrio), ao 578 Validator (Validador) preferncias 590 utilizar 639 variveis de aplicativo 773 variveis de sesso dados, armazenar 755 dados, recuperar 757
1134
ndice
definir 772 parmetros de formulrio e parmetros de URL 754 sobre 752 VBScript, inserir cdigo na visualizao do projeto 650 vincular a documentos do Microsoft Word ou Excel 422 ncoras 475 a ncoras com nome utilizando o cone Point-to-File (Indicador de arquivos) 476 documentos utilizando o cone Point-to-File (Indicador de arquivos) 470 documentos 468 a uma folha de estilo CSS externa 439 navegao e 461 Visited Links color (Cor de links visitados), opo 386 Visualizao do cdigo abertura de arquivos no-HTML 589 alternar para a visualizao do projeto 57 escrever e editar o cdigo 613 exibir 583 exibir modelos 329 opes 586 Visualizao do projeto, especificar entre 48 visualizar documentos baseados em modelos 330 visualizao padro no Property inspector (Inspetor de propriedades) 787 visualizaes de site no painel Files (Arquivos), alterar 123 visualizar em navegadores 399
XSL (Extensible Stylesheet Language) comentrios, inserir 841 sobre 814 Consulte tambm XSLT XSLT (Extensible Stylesheet Language Transformations) criar regies condicionais com 840 e transformaes no lado cliente 816, 819, 826, 842 fragmentos 816 fragmentos, aplicar estilos a 844 fragmentos, excluir 838 fragmentos, inserir 836 Objeto XSLT de Repeat Region 841 objeto XSLT de Repeat Region 822, 833, 836 pgina, vincular a arquivos XML 843 pginas 816, 819 pginas, converter para 830 pginas, criar 828 sobre 815 utilizar com pginas dinmicas 817
W
WHERE, palavra-chave do SQL 1102 Window Size, menu pop-up 50 Windows OS (Windows), paleta de cores 385
X
XHTML cdigo 606 converter de HTML para XHTML 640 criar pginas 640 XML (Extensible Markup Language) arquivos DTD 596 e elementos repetidos 822 em modelos 364 exibir em pginas da Web 813 exibir em pginas dinmicas 817 sobre 814
ndice
1135
1136
ndice

1493 - Dreamweaver - Usando o Macro Media Dream Weaver 8

Enviado por

Dados do documento

Título original

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

1493 - Dreamweaver - Usando o Macro Media Dream Weaver 8

Enviado por

Direitos autorais:

Formatos disponíveis

Usando o Dreamweaver

Princpios bsicos do Dreamweaver

Este captulo contm as seguintes sees:

Painel do CSS novo e unificado

Trabalhar com as melhores prticas

Acessibilidade: Suporte para pontos de verificao de prioridade 2 da WCAG/ W3C

Barra de ferramentas Coding (Codificao)

Novas pginas do iniciante

Obtenha mais resultados

Paste Special (Colar especial)

Novidades do projeto da Web

Para iniciantes em desenho da Web:

Designers da Web experientes

Codificadores manuais experientes

Desenvolvedores de aplicativos para a Web

Para os desenvolvedores experientes de aplicativos para a Web que j utilizaram o Dreamweaver:

Fluxo de trabalho do Dreamweaver para criar sites da Web

Gerenciar arquivos de sites

Criar o layout de pginas da Web

Fluxo de trabalho do Dreamweaver para criar sites da Web

Adicionar contedo a pginas

Configurar um aplicativo para a Web

Fluxo de trabalho do Dreamweaver para criar sites da Web

Criar pginas dinmicas

Desenvolvimento rpido de aplicativos

Utilizar o Dreamweaver com outros aplicativos

O recurso de validao de acessibilidade do Dreamweaver

Guia para a mdia de treinamento do Dreamweaver

Acessar a documentao do Dreamweaver

Dreamweaver API Reference (Manual de Referncia da API do Dreamweaver)

Guia para a mdia de treinamento do Dreamweaver

Acessar os recursos online adicionais do Dreamweaver

Centro de recursos de documentao do Dreamweaver Fruns online Macromedia

Guia para a mdia de treinamento do Dreamweaver

indica os itens substituveis (s vezes denominados

Recursos de tecnologias da Web e HTML

((www.w3.org/TR/xhtml1/ ) a especificao oficial para a Extensible Markup HyperText Language.

dnasp/html/ASPover.asp) fornecem informaes sobre Active Server Pages (ASP).

fornece informaes sobre JavaServer

fornece informaes sobre PHP.

(www.mysql.com/) fornece informaes sobre MySQL.

A pgina do produto Macromedia ColdFusion (www.macromedia.com/go/coldfusion/)

fornece informaes sobre o ColdFusion.

informaes sobre o servidor de aplicativos JRun Java.

(www.sitepoint.com/article/692) explica o que so os servios da

Web e como eles funcionam.

O ndice de recursos CGI (www.cgi-resources.com/)

O site Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/)

Recursos de tecnologias da Web e HTML

Explorar a rea de trabalho

Sobre a rea de trabalho do Dreamweaver

O layout da rea de trabalho

Property inspector (Inspetor de propriedades)

Files (Arquivos), painel

Explorar a rea de trabalho

Sobre a rea de trabalho do Dreamweaver

Elementos da rea de trabalho do Dreamweaver

A barra de ferramentas padro

A barra de ferramentas Coding (exibida

A barra de ferramentas Style Rendering (Processamento de estilo) (oculta

Explorar a rea de trabalho

Tpicos relacionados Trabalhar na janela do documento na pgina 56

Sobre a rea de trabalho do Dreamweaver