Dream Weaver

Usando o Dreamweaver
macromedia
Marcas comerciais Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind e Xtra so marcas comerciais da Macromedia, Inc., podendo estar registradas nos Estados Unidos ou em outras jurisdies, inclusive internacionais. Outros nomes de produtos, logotipos, designs, ttulos, palavras ou frases mencionados no mbito desta publicao podem ser marcas comerciais, marcas de servios ou nomes comerciais da Macromedia, Inc. ou de outras entidades, podendo ser registrados em certas jurisdies, inclusive internacionais. Este guia contm links a sites de outros fabricantes na Web que no esto sob o controle da Macromedia, e por cujo contedo a Macromedia no se responsabilizar. Se acessar um dos sites de outros fabricantes na Web mencionados neste guia, voc prprio(a) se responsabilizar pelos riscos. A Macromedia fornece estes links apenas como uma convenincia. A incluso dos links no implica que a Macromedia endossar ou aceitar qualquer responsabilidade pelo contedo dos sites destes outros fabricantes. Iseno de responsabilidade da Apple A APPLE COMPUTER, INC. NO OFERECE GARANTIAS, EXPRESSAS OU IMPLCITAS, PARA O PACOTE DE SOFTWARE DE COMPUTADOR CONTIDO NESTA EMBALAGEM, SUA COMERCIALIZAO OU ADEQUAO A QUALQUER UTILIZAO ESPECFICA. A EXCLUSO DAS GARANTIAS IMPLCITAS NO PERMITIDA EM ALGUNS ESTADOS. A EXCLUSO ACIMA PODE NO SE APLICAR AO SEU CASO. ESTA GARANTIA LHE CONCEDE DIREITOS LEGAIS ESPECFICOS. POSSVEL QUE HAJA OUTROS DIREITOS AOS QUAIS O USURIO TENHA DIREITO, QUE VARIAM PARA CADA ESTADO. Copyright 2000 Macromedia, Inc. Todos os direitos reservados. Este manual no pode ser copiado, fotocopiado, reproduzido, traduzido ou convertido em qualquer meio eletrnico ou formato mecnico, integralmente ou em parte, sem a aprovao prvia, por escrito, da Macromedia, Inc. Nmero de parte ZDW40M100PO Agradecimentos Gerncia do projeto: Sheila McGinn Texto: Kim Diezel, Valerie Hanscom, Jed Hartman e Emily Ricketts Edio: Anne Szabla e Lisa Stanziano Gerncia de produo: John Zippy Lehnus Design e produo de multimdia: Aaron Begley e Noah Zilberberg Produo da impresso: Chris Basmajian, Paul Benkman, Caroline Branch e Rebecca Godbois Edio e produo da Web: Jane Flint DeKoven e Jeff Harmon Gerente de localizao: Bonnie Loo Agradecimentos especiais a Jaime Austin, Chris Bank, Saam Barrager, Heidi Bauer, Jennifer Chapman, Winsha Chen, Kristin Conradi, Margaret Dumas, Peter Fenczik, Jean Fitzgerald, S Fred Golden, Stephanie Goss, Victor Grigorieff, Narciso (nj) Jaramillo, John Koch, David Lenoe, Eric Lerner, Charles Nadeau, Eric Ott, Jeff Schang, Mike Sundermeyer, Luciano Arruda, Raymond Lim, Scott Richards, Yoko Vogt, Peter von dem Hagen, Joo Carlos Rebello Carib, Ziggy Quinete e s equipes de engenharia e garantia de qualidade do Dreamweaver. Primeira edio: novembro de 2000 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103
NDICE
INTRODUO Guia de introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Requisitos do sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Como instalar o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Introduo ao Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Fluxo de trabalho de desenvolvimento da Web . . . . . . . . . . . . . . . . . . 17 Onde iniciar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Convenes tipogrcas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Novidades do Dreamweaver 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Recursos de tecnologias da Web e HTML . . . . . . . . . . . . . . . . . . . . . . 25 Acessibilidade e o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 CAPTULO 1 Tutorial do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . .29 Faa um tour guiado no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . 30 A rea de trabalho do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Congurar a estrutura do site do tutorial. . . . . . . . . . . . . . . . . . . . . . . 33 Denir um site local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Criar a home page do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Desenhar uma pgina na visualizao de layout . . . . . . . . . . . . . . . . . . 38 Adicionar contedo pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Trabalhar na visualizao padro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Utilizar o painel Propriedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Inserir objetos Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Criar um modelo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Vericar o site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 As prximas etapas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
CAPTULO 2 Princpios bsicos do Dreamweaver . . . . . . . . . . . . . 73 Sobre a rea de trabalho do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . .74 Sobre as diversas visualizaes no Dreamweaver . . . . . . . . . . . . . . . . . .75 Como trabalhar com as cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91 Sobre as cores aceitas pela Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92 Como denir as preferncias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92 Como utilizar o Dreamweaver com outros aplicativos . . . . . . . . . . . . . .94 Personalizao bsica no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . .94 CAPTULO 3 Como planejar e definir o seu site . . . . . . . . . . . . . . 101 Sobre o planejamento e projeto de sites . . . . . . . . . . . . . . . . . . . . . . . .101 Como utilizar o Dreamweaver para denir um novo site . . . . . . . . . . .108 Como editar um site da Web j existente: . . . . . . . . . . . . . . . . . . . . . .110 Como editar um site remoto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .111 Para remover um site da lista de sites . . . . . . . . . . . . . . . . . . . . . . . . . .112 CAPTULO 4 Gerenciamento de sites e colaborao . . . . . . . . . .113 Sobre a janela do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114 Como exibir e abrir os arquivos na janela do site . . . . . . . . . . . . . . . . .119 Sobre o mapa do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123 Como utilizar o mapa do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124 Como congurar um site remoto . . . . . . . . . . . . . . . . . . . . . . . . . . . .131 Sobre a integrao WebDAV e SourceSafe . . . . . . . . . . . . . . . . . . . . . .135 Como solucionar problemas de congurao do site remoto . . . . . . . .138 Como utilizar as opes de devoluo e retirada de arquivos . . . . . . . .139 Sobre as Design Notes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142 Como utilizar os relatrios para melhorar o uxo de trabalho . . . . . . .149 Como obter e colocar arquivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151 Como sincronizar os arquivos nos sites local e remoto . . . . . . . . . . . . .154 CAPTULO 5 Como configurar um documento . . . . . . . . . . . . . . . 157 Como criar, abrir e salvar os documentos HTML . . . . . . . . . . . . . . . .158 Como denir as propriedades do documento . . . . . . . . . . . . . . . . . . .160 Como selecionar os elementos na janela do documento. . . . . . . . . . . .162 Como utilizar as guias visuais no processo de desenho. . . . . . . . . . . . .165 Como exibir e editar o contedo do cabealho . . . . . . . . . . . . . . . . . .167 Sobre como automatizar as tarefas . . . . . . . . . . . . . . . . . . . . . . . . . . . .168
ndice
CAPTULO 6 Como projetar o layout de pgina . . . . . . . . . . . . . . 177 Sobre as clulas e tabelas de layout. . . . . . . . . . . . . . . . . . . . . . . . . . . .178 Como desenhar clulas e tabelas de layout. . . . . . . . . . . . . . . . . . . . . .179 Como mover e redimensionar as clulas e tabelas de layout . . . . . . . . .185 Como formatar as clulas e tabelas de layout . . . . . . . . . . . . . . . . . . . .187 Como denir a largura do layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . .189 Como denir as preferncias de visualizao de layout. . . . . . . . . . . . .194 CAPTULO 7 Como utilizar as tabelas para apresentar o contedo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Como inserir uma tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196 Como selecionar os elementos da tabela . . . . . . . . . . . . . . . . . . . . . . .200 Como formatar as tabelas e clulas . . . . . . . . . . . . . . . . . . . . . . . . . . .201 Como redimensionar as tabelas e clulas . . . . . . . . . . . . . . . . . . . . . . .207 Como adicionar e remover linhas e colunas . . . . . . . . . . . . . . . . . . . . .208 Como copiar e colar as clulas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .212 Como ordenar as tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214 Como exportar os dados da tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . .215 CAPTULO 8 Como utilizar as molduras (frames) . . . . . . . . . . . . . 217 Como decidir se as molduras sero utilizadas. . . . . . . . . . . . . . . . . . . .218 Sobre a criao de pginas da Web com base em molduras . . . . . . . . .219 Como criar molduras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219 Como selecionar uma moldura ou um conjunto de molduras . . . . . . .223 Como salvar os arquivos de molduras e de conjuntos de molduras . . .225 Sobre as propriedades das molduras e dos conjuntos de molduras . . . .226 Como controlar o contedo de molduras com os links . . . . . . . . . . . .233 Como tratar os navegadores que no podem exibir molduras . . . . . . .234 Como utilizar os comportamentos com molduras . . . . . . . . . . . . . . . .235 CAPTULO 9 Como gerenciar e inserir propriedades. . . . . . . . . 237 Como utilizar o painel Propriedades . . . . . . . . . . . . . . . . . . . . . . . . . .238 Como utilizar as propriedades favoritas . . . . . . . . . . . . . . . . . . . . . . . .246
ndice
CAPTULO 10 Como inserir e formatar texto . . . . . . . . . . . . . . . . . . 251 Como inserir texto e objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252 Como criar listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .256 Como congurar as fontes, estilos, cor e alinhamento . . . . . . . . . . . . .257 Como utilizar os estilos HTML para formatar o texto . . . . . . . . . . . .262 Como utilizar as folhas de estilos CSS . . . . . . . . . . . . . . . . . . . . . . . . .267 Como converter os estilos CSS em tags HTML . . . . . . . . . . . . . . . . .277 Como vericar a ortograa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279 Como procurar e substituir texto, tags e atributos . . . . . . . . . . . . . . . .280 CAPTULO 11 Como inserir imagens . . . . . . . . . . . . . . . . . . . . . . . . 289 Como inserir uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .291 Como denir as propriedades da imagem . . . . . . . . . . . . . . . . . . . . . .292 Como criar os mapas de imagens. . . . . . . . . . . . . . . . . . . . . . . . . . . . .296 Como utilizar um editor de imagens externo. . . . . . . . . . . . . . . . . . . .301 Como aplicar comportamentos a imagens . . . . . . . . . . . . . . . . . . . . . .304 CAPTULO 12 Utilizao do Dreamweaver e do Fireworks juntos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Obteno de arquivos do Fireworks no Dreamweaver . . . . . . . . . . . . .307 Execuo do Fireworks a partir do Dreamweaver. . . . . . . . . . . . . . . . .312 Edio de arquivos do Fireworks colocados no Dreamweaver . . . . . . .314 Otimizao de imagens e animaes do Fireworks colocadas no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .317 Atualizao do HTML do Fireworks colocado no Dreamweaver . . . . .321 Criao de lbuns de fotograas na Web . . . . . . . . . . . . . . . . . . . . . . .321 CAPTULO 13 Como inserir mdia . . . . . . . . . . . . . . . . . . . . . . . . . . . 325 Como inserir objetos de mdia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325 Como iniciar um editor externo . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326 Como utilizar as Design Notes com objetos de mdia . . . . . . . . . . . . .328 Sobre o contedo Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .328 Como utilizar os objetos boto Flash. . . . . . . . . . . . . . . . . . . . . . . . . .329 Como utilizar os objetos de texto Flash . . . . . . . . . . . . . . . . . . . . . . . .332 Como denir as propriedades dos objetos Flash . . . . . . . . . . . . . . . . .333 Como inserir lmes Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .335 Como inserir objetos Generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337
ndice
Sobre os lmes Shockwave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .338 Como adicionar som a uma pgina . . . . . . . . . . . . . . . . . . . . . . . . . . .339 Como inserir o contedo de plug-ins do Netscape Navigator . . . . . . .341 Como inserir um controle ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . .344 Como inserir um miniaplicativo Java . . . . . . . . . . . . . . . . . . . . . . . . .346 Como utilizar os parmetros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .348 Como utilizar os comportamentos para controlar os elementos de mdia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .349 CAPTULO 14 Como editar o HTML no Dreamweaver. . . . . . . . . 351 Como compreender os tags HTML bsicos. . . . . . . . . . . . . . . . . . . . .352 Como inserir os comentrios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .357 Como utilizar o painel Referncia do Dreamweaver . . . . . . . . . . . . . .358 Sobre o Roundtrip HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .360 Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) . . . .361 Como inserir os scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .365 Como abrir e editar os arquivos no-HTML no Dreamweaver . . . . . .368 Como editar um tag HTML na visualizao do projeto . . . . . . . . . . .369 Como denir as preferncias de formatao de cdigo. . . . . . . . . . . . .374 Como limpar o cdigo-fonte HTML . . . . . . . . . . . . . . . . . . . . . . . . .378 Como limpar o HTML do Microsoft Word . . . . . . . . . . . . . . . . . . . .379 Como utilizar os editores de HTML externos . . . . . . . . . . . . . . . . . . .381 CAPTULO 15 Links e navegao . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 Sobre as localizaes e os caminhos dos documentos . . . . . . . . . . . . . .386 Como criar os links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .390 Como gerenciar os links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .398 Como criar menus de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .401 Como criar as barras de navegao . . . . . . . . . . . . . . . . . . . . . . . . . . .404 Como anexar comportamentos aos links . . . . . . . . . . . . . . . . . . . . . . .407
ndice
CAPTULO 16 Como reutilizar o contedo com os modelos e bibliotecas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 Como criar os modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .411 Como denir as regies editveis de um modelo . . . . . . . . . . . . . . . . .415 Como criar documentos a partir de modelos . . . . . . . . . . . . . . . . . . . .422 Como atualizar as pginas com base em um modelo . . . . . . . . . . . . . .424 Como exportar e importar o contedo XML. . . . . . . . . . . . . . . . . . . .426 Como criar, gerenciar e editar os itens de biblioteca. . . . . . . . . . . . . . .429 Como utilizar as server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . .436 CAPTULO 17 Como utilizar as camadas . . . . . . . . . . . . . . . . . . . . . 439 Sobre as camadas e o cdigo HTML . . . . . . . . . . . . . . . . . . . . . . . . . .440 Como criar camadas na pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .441 Como manipular as camadas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .445 Como denir as propriedades de camada . . . . . . . . . . . . . . . . . . . . . .449 Como alterar a ordem de empilhamento de camadas. . . . . . . . . . . . . .453 Como alterar a visibilidade das camadas . . . . . . . . . . . . . . . . . . . . . . .454 Como utilizar as tabelas e camadas para o layout . . . . . . . . . . . . . . . . .455 Como animar as camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .458 Aes de comportamentos para controlar as linhas de tempo de camadas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .468 CAPTULO 18 Como utilizar os comportamentos . . . . . . . . . . . . . 469 O painel Comportamentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .470 Sobre os eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .470 Como anexar um comportamento. . . . . . . . . . . . . . . . . . . . . . . . . . . .473 Sobre os comportamentos e texto . . . . . . . . . . . . . . . . . . . . . . . . . . . .475 Como anexar um comportamento a uma linha de tempo . . . . . . . . . .476 Como alterar um comportamento. . . . . . . . . . . . . . . . . . . . . . . . . . . .476 Como atualizar um comportamento . . . . . . . . . . . . . . . . . . . . . . . . . .477 Como criar novas aes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .477 Como fazer o download de e instalar os comportamentos de outros fabricantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .478 Como utilizar as aes de comportamentos enviadas com o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .478
ndice
CAPTULO 19 Como depurar o cdigo JavaScript. . . . . . . . . . . . 509 Como executar o depurador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .510 Como localizar e corrigir os erros lgicos. . . . . . . . . . . . . . . . . . . . . . .512 CAPTULO 20 Como criar formulrios . . . . . . . . . . . . . . . . . . . . . . . . 519 Sobre os scripts CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .520 Sobre os objetos de formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .520 Como criar um formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .522 Sobre os campos de formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .524 Como inserir caixas de seleo e botes de opo . . . . . . . . . . . . . . . .529 Sobre as listas e menus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .532 Sobre os botes de formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .534 Sobre a criao de formulrios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .536 Como processar os formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .537 Como utilizar os comportamentos com formulrios . . . . . . . . . . . . . .538 CAPTULO 21 Como testar e publicar um site . . . . . . . . . . . . . . . . . 541 Como vericar a compatibilidade com o navegador . . . . . . . . . . . . . .542 Como utilizar os comportamentos para detectar os navegadores e plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .544 Como visualizar nos navegadores. . . . . . . . . . . . . . . . . . . . . . . . . . . . .544 Como vericar links numa pgina ou site . . . . . . . . . . . . . . . . . . . . . .546 Como vericar o tempo e o tamanho do download . . . . . . . . . . . . . . .549 Como utilizar os relatrios para testar um site . . . . . . . . . . . . . . . . . . .550 CAPTULO 22 Como personalizar o Dreamweaver . . . . . . . . . . . 553 Como alterar o tipo de arquivo padro . . . . . . . . . . . . . . . . . . . . . . . .554 Como modicar o painel Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . .555 Como criar um objeto simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .556 Sobre a personalizao dos menus do Dreamweaver . . . . . . . . . . . . . .557 Como personalizar a aparncia das caixas de dilogo . . . . . . . . . . . . . .568 Como alterar a formatao HTML padro . . . . . . . . . . . . . . . . . . . . .569 Como trabalhar com pers de navegadores . . . . . . . . . . . . . . . . . . . . .571 Como estender os recursos do Dreamweaver: Princpios bsicos . . . . .575 Como personalizar a interpretao dos tags de outros fabricantes . . . .576
ndice
APNDICE A Atalhos de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . 585 Menu Arquivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .585 Menu Editar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .586 Visualizaes de pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .586 Como visualizar os elementos da pgina . . . . . . . . . . . . . . . . . . . . . . .587 Edio do cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .587 Como editar o texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .588 Como formatar o texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .589 Como localizar e substituir o texto . . . . . . . . . . . . . . . . . . . . . . . . . . .590 Como trabalhar com tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .590 Como trabalhar com as molduras . . . . . . . . . . . . . . . . . . . . . . . . . . . .591 Como trabalhar com as camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . .592 Como trabalhar com as linhas de tempo . . . . . . . . . . . . . . . . . . . . . . .592 Como trabalhar com as imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . .593 Como gerenciar os hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .593 Como designar e visualizar nos navegadores . . . . . . . . . . . . . . . . . . . .594 Como depurar nos navegadores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .594 Gerenciamento de sites e FTPs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .594 Mapa do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .595 Como executar os plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .595 Como trabalhar com os modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . .595 Como inserir objetos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .596 Painel Histrico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .596 Como abrir e fechar os painis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .597 Como obter ajuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .597 Matriz de atalhos de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .598 NDICE REMISSIVO . . . . . . . . . . . . . . . . . . . . . . . . 603
10
ndice
INTRODUO
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Guia de introduo
O Macromedia Dreamweaver um editor de HTML prossional que projeta e gerencia sites e pginas da Web visualmente. Se voc gostar do controle de codicar manualmente HTML ou preferir trabalhar num ambiente de edio visual, o Dreamweaver facilita o incio do trabalho e fornece ferramentas de ajuda para aprimorar a experincia em projetos para pginas da Web. O Dreamweaver inclui vrias ferramentas e recursos: uma referncia de HTML, CSS e JavaScript, um depurador JavaScript e editores de cdigo (a visualizao de cdigo e o inspetor de cdigo), que possibilitam editar JavaScript, XML e outros documentos de texto diretamente no Dreamweaver. A tecnologia Roundtrip HTML da Macromedia importa documentos HTML sem reformatar o cdigo e o Dreamweaver pode ser denido para limpar e reformatar o HTML quando voc quiser. Os recursos de edio visual do Dreamweaver tambm permitem adicionar rapidamente desenho e funcionalidade s suas pginas, sem ter que codicar uma linha sequer. possvel visualizar todos os elementos ou propriedades do site e arrast-los de um painel de fcil utilizao diretamente para um documento. Dinamize o seu uxo de trabalho de desenvolvimento atravs da criao e edio das imagens no Macromedia Fireworks e, em seguida, de sua importao diretamente para o Dreamweaver ou adio dos objetos Flash que criar diretamente para o Dreamweaver. O Dreamweaver pode ser totalmente personalizado. Utilize o Dreamweaver para criar os seus prprios objetos e comandos, modicar os atalhos de teclado, alm de gravar cdigo JavaScript para estender os recursos do Dreamweaver com novos comportamentos, inspetores de propriedades e relatrios de site.
11
Requisitos do sistema
Os seguintes componentes de hardware e software so necessrios para executar o Dreamweaver.
Para o Microsoft Windows:
Um processador Pentium da Intel ou equivalente, de 166 MHz ou mais rpido,

executando o Windows 95, Windows 98, Windows 2000, Windows ME ou Windows NT (com o Server Pack 3)
A verso 4.0 ou mais avanada do Netscape Navigator ou do Microsoft Internet

Explorer
32 MB de memria de acesso aleatrio (RAM) e 110 MB de espao disponvel

em disco
Um monitor de 256 cores com resoluo de 800 x 600 pixels Uma unidade de CD-ROM
Para o Macintosh:
Um Power Macintosh, executando o Mac OS 8.6 ou 9.x 32 MB de memria de acesso aleatrio (RAM) e 135 MB de espao disponvel
em disco
Um monitor de 256 cores com resoluo de 800 x 600 pixels Uma unidade de CD-ROM
Como instalar o Dreamweaver

Siga estas etapas para instalar o Dreamweaver em um computador com o sistema Windows ou Macintosh.
Para instalar o Dreamweaver:
1 2
Insira o CD do Dreamweaver na unidade de CD-ROM do computador. Escolha dentre as seguintes opes: arquivo Installer.exe do Dreamweaver 4 no CD deste software. Clique em OK na caixa de dilogo Executar, para iniciar a instalao.
No Windows, escolha Iniciar > Executar. Clique em Procurar e escolha o No Macintosh, clique duas vezes no cone do Instalador do Dreamweaver.
3 4
Siga as instrues na tela. Se for solicitado, reinicie o computador.
12
Introduo
Introduo ao Dreamweaver
O Macromedia Dreamweaver contm vrios recursos para ajud-lo a conhecer o programa rapidamente e tornar-se um experiente criador de suas pginas e sites da Web. Estes recursos incluem um manual impresso, pginas da ajuda online, lmes do Tour guiado, um tutorial e lies interativas. possvel tambm encontrar dicas atualizadas regularmente, notas tcnicas, exemplos e informaes no site do Centro de suporte do Dreamweaver no site da Macromedia na Web. Comece assistindo aos lmes do Tour guiado para se informar sobre os recursos do Dreamweaver. Em seguida, complete o tutorial do Dreamweaver. E nalmente, tente as lies do Dreamweaver para aprender como realizar as tarefas no Dreamweaver. Filmes do Tour guiado Os lmes do Tour guiado apresentam uma viso geral animada ao processo de desenvolvimento da Web e levam-no em um tour pelos recursos do Dreamweaver. Para visualizar um lme do Tour guiado, escolha Ajuda > Tours guiados e clique em um dos ttulos de lme. Quando o lme tiver terminado, clique no boto Incio, para retornar lista de lmes e, em seguida, clique em um outro lme. possvel assistir ao tour inteiro ou passar a sees especcas. Tutorial O tutorial do Dreamweaver constitui o seu melhor ponto de partida, caso queira adquirir experincia prtica na criao de pginas no Dreamweaver. Ao avanar ao longo do tutorial, voc aprender a criar uma amostra de site da Web com alguns dos recursos mais avanados e teis do Dreamweaver. O tutorial est na Ajuda do Dreamweaver e no manual Como utilizar o Dreamweaver. Tambm possvel fazer o download de uma verso do tutorial, que pode ser impressa, a partir do site da Macromedia na Web. O tutorial inclui pginas e propriedades de amostras (imagens e arquivos do Macromedia Flash) para ajud-lo a comear no desenvolvimento do site da Web. Lies do Dreamweaver O Dreamweaver vem acompanhado de um conjunto de lies interativas. Cada lio leva-o pelas etapas de uma tarefa especca e inclui pginas de amostras que contm todos os elementos funcionais e de desenho necessrios. Utilize as lies como guias passo a passo com pginas de amostras ou como um guia quando estiver trabalhando em suas prprias pginas. Para localizar as lies, escolha Ajuda > Lies, e selecione um tpico.
Guia de introduo
13
Guia do usurio do Dreamweaver (manual impresso) Como utilizar o Dreamweaver uma alternativa impressa Ajuda do Dreamweaver e contm informaes de como usar os comandos e recursos do Dreamweaver. Alguns tpicos de referncia sobre opes do programa no esto includos no manual impresso; consulte a Ajuda, para obter informaes sobre esses tpicos. Se tiver adquirido a verso Download de software eletrnico (DSE) do Dreamweaver, possvel efetuar o download da verso, que pode ser impressa, de Como utilizar o Dreamweaver a partir do Centro de Suporte do Dreamweaver em http://www.macromedia.com/support/dreamweaver/documentation.html. Ajuda do Dreamweaver A Ajuda do Dreamweaver contm informaes completas sobre todos os recursos do Dreamweaver, otimizada para uso on-line. Para obter os melhores resultados na visualizao da Ajuda do Dreamweaver, utilize o Netscape Navigator 4.0 ou mais avanado, ou o Microsoft Internet Explorer 4.0 ou mais avanado. A Ajuda do Dreamweaver utiliza amplamente o JavaScript. Certique-se de que esta linguagem esteja ativada no seu navegador. Caso voc planeje utilizar o recurso de busca, verique se o Java tambm est ativo.
14
Introduo
A Ajuda do Dreamweaver inclui os seguintes componentes:

Sumrio permite O ndice,
ver todas as informaes organizadas por assunto. Clique nas entradas de nvel superior para exibir os subtpicos. como um ndice tradicional impresso, pode ser utilizado para localizar termos importantes e ir para os tpicos relacionados.
Busca permite
localizar qualquer seqncia de caracteres no texto inteiro do tpico. O recurso de busca requer um navegador 4.0 com Java ativado.
Nota: Quando voc clicar em Busca, possvel que a janela de segurana do Java aparea, solicitando permisso para ler os arquivos no seu disco rgido. Esta permisso deve ser concedida para que a busca funcione. O miniaplicativo no gravar nada no disco rgido, nem ler os arquivos que no estiverem na Ajuda do Dreamweaver.
Para procurar uma frase, basta digit-la no campo de texto.
Para fazer uma busca nos arquivos de duas palavras-chave (camadas e estilos, por
exemplo), separe os termos da busca com um sinal de adio (+).
Guia de introduo
15
A ajuda contextual fornece
um boto Ajuda, em qualquer caixa de dilogo, ou um cone de ponto de interrogao, nos inspetores, janelas e painis, que abre um tpico relevante da Ajuda.
Clique aqui, para abrir a Ajuda
Barra de navegao da Ajuda do Dreamweaver fornece botes nos quais o usurio
pode clicar para mover-se entre os tpicos. Os botes seta direita e esquerda levam-no ao prximo tpico ou ao anterior em uma seo (seguindo a ordem dos tpicos no sumrio).
Como estender os recursos do Dreamweaver O sistema de ajuda de Como estender os recursos do Dreamweaver contm informaes sobre o modelo de objeto de documento do Dreamweaver e as APIs (interfaces de programao de aplicativos) que permitem aos programadores de JavaScript e C criar objetos, comandos, inspetores de propriedades, comportamentos e conversores. Centro de suporte do Dreamweaver O site do Centro de suporte do Dreamweaver na Web atualizado regularmente com as informaes mais recentes sobre o Dreamweaver, alm de conter recomendaes de usurios experientes, exemplos, dicas, atualizaes e informaes sobre os tpicos avanados,. Verique o site da Web com freqncia para ler as notcias mais recentes sobre o Dreamweaver e saber como obter o melhor rendimento do programa em http://www.macromedia.com/support/dreamweaver/. Grupo de discusso do Dreamweaver Discuta questes tcnicas e compartilhe sugestes teis com outros usurios do Dreamweaver, visitando o Grupo de discusso do Dreamweaver. Voc obter informaes sobre como acessar o grupo de discusso no site da Web da Macromedia, em http://www.macromedia.com/software/dreamweaver/ discussiongroup/.
16
Introduo
Fluxo de trabalho de desenvolvimento da Web

O uxo de trabalho de desenvolvimento da Web comea com o processo de denio da estratgia e objetivos do site, prossegue para o desenho (onde se elabora a aparncia e a impresso do possvel site) e continua na fase de produo e desenvolvimento (quando o site construdo e as pginas so codicadas); o site testado na sua funcionalidade e verica-se se ele est de acordo com os objetivos denidos e, ento, o site publicado. Muitos programadores planejam uma manuteno peridica, para assegurar que o site permanea atual e funcional. Para facilitar a obteno de informaes necessrias para o desenvolvimento de sites da Web, a documentao Como utilizar o Dreamweaver dividida em sees amplas, que modelam esta abordagem padro ao desenvolvimento da Web: planejamento, desenho, desenvolvimento, teste, publicao e manuteno do site. Planejamento de sites O cuidado no planejamento e na organizao do site desde o incio pode, posteriormente, economizar tempo. A organizao do site inclui muito mais do que determinar para onde os arquivos iro: a organizao do site envolve o exame dos requisitos do site, pers do pblico e objetivos do site. Alm disso, necessrio considerar certos requisitos tcnicos como, por exemplo, acesso do usurio, restries do navegador, dos plug-ins e download. Quando tiver organizado as suas informaes e determinado a estrutura operacional, voc poder comear a criar o seu site.
Determine a estratgia a ser adotada e as questes que envolvem o usurio que

sero consideradas enquanto planeja o seu site. Consulte Como planejar e denir o seu site na pgina 101.
Utilize o mapa do site do Dreamweaver para denir a estrutura organizacional

do seu site. Na janela do site do Dreamweaver possvel adicionar, excluir e renomear os arquivos e as pastas para alterar a organizao de acordo com as suas necessidades. Consulte Gerenciamento de sites e colaborao na pgina 113. Se trabalha numa equipe de desenvolvimento da Web, voc pode tambm se interessar por estes tpicos:
Congurao de sistemas que evitaro que os membros de uma equipe

substituam os arquivos; consulte Como congurar o sistema de devolues e retiradas.
Utilize as Design Notes para se comunicar com os membros de uma equipe da

Web; consulte Como salvar as informaes sobre o arquivo em Design Notes.
Guia de introduo
17
Projetar pginas da Web A maioria dos projetos de desenho da Web comeam com a criao de scripts e uxogramas que se tornam pginas de amostras. Utilize o Dreamweaver para criar pginas de amostras de um prottipo quando o objetivo for o projeto nal. Os prottipos geralmente mostram o layout do desenho, a navegao do site, os componentes tcnicos, os temas, a cor e as imagens grcas ou outros elementos de mdia.
Criar documentos HTML no Dreamweaver, adicionando facilmente o ttulo

da pgina e a cor de fundo. Consulte Como congurar um documento na pgina 157.
A visualizao de layout do Dreamweaver e as ferramentas de layout permitem

que se projete rapidamente pginas da Web atravs do desenho e da reorganizao da estrutura da pgina. Consulte Como projetar o layout de pgina na pgina 177.
Utilize o painel Objetos do Dreamweaver para projetar e adicionar rapidamente

tabelas, criar documentos com molduras, projetar formulrios e trabalhar com camadas. Consulte Como utilizar as tabelas para apresentar o contedo na pgina 195, Como utilizar as molduras (frames) na pgina 217, Como utilizar as camadas na pgina 439 e Como criar formulrios na pgina 519. Adicionar contedo Ao utilizar o Dreamweaver, possvel adicionar facilmente diversos tipos de contedo s pginas da Web. Adicione propriedades e elementos de projeto, como texto, imagens, cores, lmes, som e outras formas de mdia.
O painel Propriedades permite organizar facilmente as propriedades em um

site; possvel arrastar a maioria das propriedades diretamente do painel Propriedades para um documento do Dreamweaver. Consulte Como gerenciar e inserir propriedades na pgina 237.
Digite diretamente num documento do Dreamweaver ou importe o texto de

outros documentos e, em seguida, formate o texto utilizando o inspetor de propriedades do Dreamweaver ou o painel Estilos HTML. possvel criar facilmente as suas prprias Cascading Style Sheets (folhas de estilos em cascata). Consulte Como inserir e formatar texto na pgina 251.
Insira imagens, incluindo imagens cambiveis, mapas de imagens e imagens

compartilhadas do Fireworks. Utilize as ferramentas de alinhamento, para posicionar as imagens em uma pgina. Consulte Como inserir imagens na pgina 289 e Utilizao do Dreamweaver e do Fireworks juntos na pgina 307.
Insira outros tipos de mdia numa pgina da Web, como lmes de Flash,
Shockwave e QuickTime, som e miniaplicativos. Consulte Como inserir mdia na pgina 325.
18
Introduo
Adicione o contedo no editor de cdigo do Dreamweaver: Utilize a

visualizao de cdigo e o inspetor de cdigo do Dreamweaver para escrever o seu prprio cdigo HTML ou JavaScript. Consulte Como editar o HTML no Dreamweaver na pgina 351.
Com o Dreamweaver, possvel criar links HTML padro, incluindo links de

ncora e de correio eletrnico ou denir, de maneira fcil, sistemas de navegao grca, como menus de salto e barras de navegao. Consulte Links e navegao na pgina 385.
Os modelos e arquivos de biblioteca do Dreamweaver permitem aplicar

contedo reutilizvel no seu site com facilidade. possvel criar novas pginas a partir de um modelo e, em seguida, adicionar ou alterar o contedo nas reas editveis. Consulte Como reutilizar o contedo com os modelos e bibliotecas na pgina 409. Interatividade e animao Muitas pginas da Web so estticas, contendo apenas texto e imagens. Atravs do uso de interatividade e animao, o Dreamweaver permite avanar em relao s pginas estticas, a m de capturar o interesse dos visitantes. possvel fornecer comentrios aos visitantes medida que eles se movem e clicam, demonstrar conceitos, validar os dados de formulrios sem entrar em contato com o servidor em suma, aumentar as chances dos visitantes examinarem e terem uma participao maior dentro da pgina. H diversas maneiras de adicionar interatividade e animao s pginas utilizando o Dreamweaver:
Utilize as linhas de tempo para criar animaes que dispensam plug-ins,

controles ActiveX ou Java. As linhas de tempo utilizam HTML dinmico para alterar a posio de uma camada ou a origem de uma imagem ao longo do tempo, ou para chamar certas aes de comportamento automaticamente aps a carga da pgina. Consulte Como utilizar as camadas na pgina 439.
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 Enviar, ou a abertura de uma segunda janela do navegador quando a pgina principal tiver terminado de ser carregada. Consulte Como utilizar os comportamentos na pgina 469.
Depure o cdigo JavaScript personalizado. Consulte Como depurar o cdigo

JavaScript na pgina 509.
Utilize formulrios para permitir que os visitantes do seu site insiram dados
diretamente na pgina da Web. Consulte Como criar formulrios na pgina 519.
Guia de introduo
19
Testar e publicar o seu site O seu site est completo e pronto para ser utilizado, mas antes de public-lo em um servidor, necessrio test-lo. Dependendo do tamanho do projeto, das especicaes do cliente e dos tipos de navegadores que os visitantes utilizaro, talvez seja necessrio mover o seu site para um servidor de teste, onde ele possa ser testado e editado. Quando as correes tiverem sido feitas, o site poder ser publicado onde o pblico possa access-lo. Quando o site for publicado, estabelea um ritmo de manuteno para assegurar a qualidade deste, responda aos comentrios dos usurios e atualize as informaes do site. Utilize os seguintes recursos do Dreamweaver para testar e publicar os seus sites:
Para adicionar novos tags em uma pgina ou corrigir o seu cdigo, utilize o
painel Referncia do Dreamweaver, para pesquisar cdigo JavaScript, CSS e HTML. Consulte Como utilizar o painel Referncia do Dreamweaver na pgina 358.
Utilize o Depurador Javascript para ajudar a corrigir erros de JavaScript no seu

cdigo. O depurador permite denir pontos de interrupo no cdigo e, depois, visualizar o cdigo quando uma pgina for depurada no Dreamweaver. Consulte Como depurar o cdigo JavaScript na pgina 509.
Execute vericaes de navegador e plug-in, teste e corrija links em seus

documentos e execute relatrios de site para vericar arquivos HTML quanto a erros comuns. Consulte Como testar e publicar um site na pgina 541.
Na janela do site do Dreamweaver, voc obter vrias ferramentas para ajudar a

gerenciar o seu site, transferir arquivos de e para um servidor remoto, denir um processo de devoluo/retirada, para evitar que os arquivos sejam substitudos, e sincronizar os arquivos nos seus sites local e remoto. Consulte Gerenciamento de sites e colaborao na pgina 113.
Onde iniciar
Este guia da contm informaes para os leitores em vrios nveis. A m de tirar o melhor proveito desta documentao, comece lendo as partes mais relevantes para o seu nvel de experincia.
Para os iniciantes no HTML:
Inicie assistindo aos lmes do Tour guiado. No menu principal do Dreamweaver, escolha Ajuda > Tours guiados. Em seguida, trabalhe utilizando o Tutorial do Dreamweaver. Escolha Ajuda > Tutorial, ou siga as etapas descritas no manual impresso. Acompanhe as lies correspondentes aos tpicos que lhe interessam. Escolha Ajuda > Lies, e, em seguida, selecione a lio.
20
Introduo
Prossiga com Princpios bsicos do Dreamweaver na pgina 73, Como planejar e denir o seu site na pgina 101, Gerenciamento de sites e colaborao na pgina 113 e Links e navegao na pgina 385. Para aprender sobre a formatao de texto e incluso de imagens nas pginas, leia Como inserir e formatar texto na pgina 251 e Como inserir imagens na pgina 289.
Isso tudo que voc precisa para comear a produzir sites da Web de alta qualidade, mas quando estiver pronto para aprender a utilizar as ferramentas mais avanadas de layout e interao, siga a ordem do restante do manual. Talvez voc queira saltar Como personalizar o Dreamweaver, pelo menos no incio.
Para os designers da Web experientes, que ainda no utilizaram o Dreamweaver:
Inicie assistindo aos lmes do Tour guiado. No menu principal do Dreamweaver, escolha Ajuda > Tours guiados. Trabalhe com o Tutorial do Dreamweaver, a m de aprender os princpios bsicos da utilizao do Dreamweaver. Escolha Ajuda > Tutorial, ou siga as etapas descritas no manual impresso. Acompanhe as lies correspondentes aos tpicos que lhe interessam. Escolha Ajuda > Lies, e, em seguida, selecione a lio. Leia Princpios bsicos do Dreamweaver na pgina 73, para obter uma viso geral mais completa da interface do usurio do Dreamweaver. Embora a maior parte do material em Gerenciamento de sites e colaborao na pgina 113 e Links e navegao na pgina 385 lhe seja provavelmente familiar, examine esses captulos, para ver como os conceitos j conhecidos so implementados no Dreamweaver; preste ateno especialmente em Como utilizar o Dreamweaver, para congurar um novo site. Em seguida, leia Gerenciamento de sites e colaborao na pgina 113. Como inserir e formatar texto na pgina 251 e Como inserir imagens na pgina 289 contm informaes teis sobre os detalhes da utilizao do Dreamweaver para criar pginas HTML bsicas. Leia a viso geral, no incio de cada captulo subseqente, para determinar se os tpicos podem lhe interessar.
Para os designers da Web experientes, familiarizados com o Dreamweaver 3:
Comece pela leitura de Novidades do Dreamweaver 4. Siga as referncias cruzadas nesta seo para as outras que abrangem os novos recursos do Dreamweaver. Talvez voc queira examinar Princpios bsicos do Dreamweaver na pgina 73, para aprender os novos aspectos da interface do usurio do Dreamweaver.
Guia de introduo
21
Verique as lies do Dreamweaver; escolha Ajuda > Lies, para obter uma lista das lies interativas que voc pode acompanhar. Se estiver interessado em personalizar e estender os recursos do Dreamweaver, leia Como personalizar o Dreamweaver na pgina 553.
Convenes tipogrficas
As seguintes convenes tipogrcas so utilizadasneste guia da Ajuda do Dreamweaver:
Fonte do cdigo indica os nomes de tags e atributos HTML, bem como o texto utilizado nos exemplos.
Fonte do 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.
Novidades do Dreamweaver 4
Os novos recursos no Dreamweaver 4 aprimoram a edio do HTML, facilitam o desenho de pginas, melhoram o gerenciamento do site e das propriedades, permitem criar os seus prprios objetos Flash, dinamizam o uxo de trabalho, aprimoram a colaborao em equipe e permitem personalizar e estender os recursos do programa. Edio de cdigo aprimorada
A barra de ferramentas do Dreamweaver permite gerenciar como uma pgina ser
visualizada: a visualizao do projeto, visualizao do cdigo ou a visualizao tanto do cdigo como do projeto. A barra de ferramentas proporciona fcil acesso aos recursos utilizados normalmente, como Visualizar no navegador e Design Notes. Consulte Como utilizar a barra de ferramentas na pgina 80.
A visualizao de cdigo
proporciona uma nova maneira de visualizar o cdigofonte HTML diretamente na janela do documento do Dreamweaver. Consulte Como abrir a visualizao de cdigo (ou o inspetor de cdigo) na pgina 362. Tambm possvel editar documentos diferentes de HTML, como arquivos JavaScript e XML, diretamente na visualizao de cdigo do Dreamweaver. Consulte Como inserir os scripts na pgina 365.
22
Introduo
Editores de cdigo integrados a
partir de agora, o Dreamweaver integra editores de cdigo modernos: a visualizao de cdigo e o inspetor de cdigo. possvel denir a quebra automtica de linhas, o recuo de cdigo, sinalizao ativa da sintaxe por cores, dentre outras opes, no menu Opes em qualquer um destes editores. Consulte Como denir as opes da visualizao de cdigo (ou do inspetor de cdigo) na pgina 364.
O painel Referncia
uma ferramenta de referncia rpida para HTML, JavaScript e CSS. Ele fornece informaes sobre os tags especcos com os quais estiver trabalhando na visualizao de cdigo (ou no inspetor de cdigo). Consulte Como utilizar o painel Referncia do Dreamweaver na pgina 358.
O menu pop-up Navegao do cdigo permite selecionar o cdigo para as funes JavaScript de uma pgina. Utilizando este menu, possvel navegar rapidamente pelo cdigo JavaScript enquanto estiver trabalhando na visualizao de cdigo. Consulte Como exibir as funes de script na pgina 368. O depurador JavaScript permite depurar um documento JavaScript enquanto estiver no Dreamweaver. Por exemplo: possvel denir pontos de interrupo para controlar o cdigo que deseja examinar. Consulte Como depurar o cdigo JavaScript na pgina 509.
Projetos de pgina mais fceis

A visualizao de layout permite projetar rapidamente as pginas da Web, desenhando caixas (tabelas ou clulas) s quais possvel adicionar contedo. Consulte Como desenhar clulas e tabelas de layout na pgina 179.
facilitam a identicao de regies editveis num arquivo de modelo. Os modelos agora exibem uma guia que contm o nome da regio editvel e um retngulo delimitador. Consulte Como criar os modelos na pgina 411.
Os modelos aprimorados As folhas de estilos CSS podem ser denidas logo que um novo estilo for criado. Tambm possvel anexar uma folha de estilos CSS existente com a ajuda de um boto no painel Estilos CSS. Consulte Como utilizar as folhas de estilos CSS na pgina 267.
Integrao aprimorada
Os botes Flash e Texto Flash
agora foram incorporados ao Dreamweaver. possvel escolher num conjunto de botes Flash predenidos e inseri-los no seu documento, ou deixar que o designer do Flash crie modelos de botes personalizados. Consulte Como utilizar os objetos boto Flash na pgina 329 e Como utilizar os objetos de texto Flash na pgina 332.
Guia de introduo
23
O compartilhamento Roundtrip permite trabalhar sem impedimentos no Dreamweaver e no Fireworks 4. possvel editar e atualizar as imagens e tabelas HTML importadas do Fireworks. Tambm possvel editar tanto no Dreamweaver quanto no Fireworks e preservar as alteraes em ambos os aplicativos. Consulte Edio de arquivos do Fireworks colocados no Dreamweaver na pgina 314.
permite combinar com facilidade cores com imagens. Com apenas um clique, possvel selecionar a cor de qualquer lugar na rea de trabalho e o seletor de cores selecionar a cor mais prxima aceita pela Web. Consulte Como trabalhar com as cores na pgina 91.
O seletor de cores aceito pela Web
Como dinamizar o fluxo de trabalho

O painel Propriedades permite gerenciar as propriedades do site. possvel visualizar todas as imagens, cores, URLs externas e scripts, bem como modelos Flash, Shockwave e QuickTime e itens de biblioteca numa localizao central. Visualize as propriedades e, em seguida, arraste-as para o lugar apropriado no documento HTML. Salve as propriedades usadas normalmente numa lista de propriedades favoritas e reutilize-as em outros sites. Consulte Como utilizar o painel Propriedades na pgina 238 e Como utilizar as propriedades favoritas na pgina 246. Design Notes aprimoradas permitem anexar notas a um arquivo, possibilitando o controle das alteraes nele feitas e a comunicao sobre as questes de desenvolvimento com os outros membros da equipe. possvel inserir e visualizar comentrios diretamente na janela do site do Dreamweaver. Consulte Sobre as Design Notes na pgina 142 e Como utilizar os relatrios para melhorar o uxo de trabalho na pgina 149. O correio eletrnico integrado permite a comunicao com os membros da equipe. Quando um arquivo estiver sendo vericado por uma outra pessoa, possvel clicar no nome deste membro da equipe e lhe enviar uma mensagem eletrnica. Consulte Como congurar o sistema de devolues e retiradas na pgina 140. Os relatrios do site permitem utilizar vrios relatrios predenidos para testar problemas comuns de documentos HTML como, por exemplo, documentos sem ttulo ou tags alt ausentes. Tambm possvel denir relatrios personalizados para atender s suas necessidades, exibir resultados de relatrios e abrir arquivos que apresentarem problemas na janela Resultados do relatrio. Consulte Como congurar o sistema de devolues e retiradas na pgina 140 e Como criar relatrios na pgina 550. Integrao com o SourceSafe se voc contar com o SourceSafe, possvel vericar arquivos fora e dentro do SourceSafe enquanto estiver trabalhando no Dreamweaver. Consulte Como utilizar o Dreamweaver com o Visual SourceSafe na pgina 136.
24
Introduo
utilize o Dreamweaver para transferir arquivos utilizando o protocolo WebDAV. Consulte Como utilizar o Dreamweaver com o protocolo WebDAV na pgina 135.
Integrao com o WebDAV O Package Manager (anteriormente conhecido como Extension Manager) instala extenses facilmente, atravs de um simples clique. Visite o intercmbio da Macromedia e efetue um download de extenses teis, para facilitar o seu trabalho. Consulte Como adicionar extenses ao Dreamweaver na pgina 98.
Interface comum do usurio

Os atalhos do teclado
possuem uma nova interface, que comum a todos os produtos de publicao de Web da Macromedia. Essa nova interface permite editar os atalhos de teclado existentes, criar novos atalhos para itens de menu e excluir os atalhos de teclado que se tornarem desnecessrios. possvel tambm alternar entre conjuntos de conguraes de atalho de teclado. Consulte Como utilizar o editor de atalhos de teclado na pgina 95.
foi aprimorado: todas as janelas encaixam-se sem interferncias. Ao abrir uma nova janela, o Dreamweaver evita que esta se sobreponha aos painis visveis.
O gerenciamento de janelas Os painis tm agora uma nova aparncia da Macromedia e o seu comportamento
consistente em todos os produtos de publicao da Web. Todos os painis possuem cones e texto, para facilitar a sua identicao. Todos os painis utilizam cores do sistema e fontes existentes nos sistemas Windows e Macintosh. Alm disso, os painis possuem comportamentos uniformes de encaixe e arraste.
Recursos de tecnologias da Web e HTML

Os seguintes so alguns recursos teis disponveis na Web:
A especificao HTML 4.0 (http://www.w3.org/TR/REC-html40/)
a norma
ocial para HTML do World Wide Web Consortium. (http://www.blooberry.com/indexdot/html/) uma lista completa de tags, atributos e valores HTML, bem como sua compatibilidade com os diversos navegadores.
ndice DOT Html A biblioteca de tags do programador ZDNet (http://www.zdnet.com/devhead/ resources/tag_library/) uma outra lista de informaes sobre todos os tags HTML. A especificao para o nvel 1 das Cascading Style Sheets (CSS1) (http://
www.w3.org/TR/REC-CSS1) a especicao ocial para as folhas de estilo do World Wide Web Consortium.
Guia de introduo
25
Guia de referncia das folhas de estilos da Web Review (http://webreview.com/ guides/style/style.html) explica o que so os estilos CSS e em quais navegadores funcionam. CGI Scripts for Fun and Profit (http://www.hotwired.lycos.com/webmonkey/
99/26/index4a.html) um artigo do site Hotwired Webmonkey sobre a incluso de scripts CGI (Common Gateway Interface) j prontos nas pginas.
O ndice de recursos CGI (http://www.cgi-resources.com/)
um repositrio de todas as questes relativas a CGI, incluindo scripts prontos, documentao, livros e at mesmo programadores que oferecem seus servios.
O site Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/)
inclui uma
introduo CGI.
A tabela de entidades (http://www.bbsinc.com/iso8859.html)
apresenta uma lista dos nomes de entidades utilizadas pelo padro ISO 8859-1 (Latin-1).
A pgina de eventos de HTML dinmico (http://msdn.microsoft.com/workshop/
author/dhtml/reference/events.asp#om40_event) contm informaes sobre os eventos no Microsoft Internet Explorer.

As pginas de viso geral das ASP da Microsoft (http://msdn.microsoft.com/ workshop/server/asp/ASPover.asp) contm informaes sobre as Active Server Pages (ASP). A pgina JSP da Sun (http://java.sun.com/products/jsp/)
contm informaes
sobre as JavaServer Pages (JSP).

As pginas PHP (http://www.php.net/)
contm informaes sobre o PHP: pr-
processador de hipertexto.
A pgina de produtos ColdFusion da Allaire (http://www.allaire.com/Products/
ColdFusion/) contm informaes sobre ColdFusion.

O site XML.com (http://www.xml.com)
fornece informaes, tutoriais e dicas sobre Extensible Markup Language (XML), assim como outras tecnologias da Web.
A JavaScript Bible (Bblia de JavaScript),
de autoria de Danny Goodman (IDG Books), cobre a linguagem JavaScript 1.2 de maneira exaustiva.
JavaScript: The Definitive Guide (JavaScript: o guia definitivo),
de autoria de David Flanagan (OReilly & Associates), fornece informaes de referncia para cada funo, objeto, mtodo, propriedade e manipulador de evento JavaScript.
26
Introduo
Acessibilidade e o Dreamweaver
A Macromedia oferece suporte criao de timas experincias da Web que possam ser acessveis a todas as pessoas, inclusive as que portarem limitaes fsicas. Ns estimulamos a implementao de padres internacionais para orientar os programadores de sites acessveis, incluindo as diretrizes oferecidas pelo World Wide Web Consortium (W3C). Muitas normas governamentais concernentes acessibilidade da Web, inclusive as do governo dos EUA, fazem referncia s diretrizes do W3C. Estas diretrizes sobre o contedo da Web estimulam os programadores a adotar prticas de criao e codicao voltadas acessibilidade, muitas das quais contam com o suporte irrestrito dos produtos da Macromedia. Para obter mais informaes sobre as diretrizes do W3C, consulte as Diretrizes sobre a criao de contedo para a Web, no seguinte endereo: http:// www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html. Para obter as mais recentes informaes sobre os recursos de produtos que oferecem suporte ao design acessvel, consulte a pgina da Macromedia relacionada acessibilidade (http://www.macromedia.com/accessibility/).
Guia de introduo
27
28
Introduo
CAPTULO 1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tutorial do Dreamweaver
O tutorial do Dreamweaver o acompanha atravs das etapas envolvidas na criao de pginas da Web. Voc aprender como utilizar o Macromedia Dreamweaver para denir um site local e utilizar os painis e ferramentas do Dreamweaver para criar e editar documentos da Web. Nesse tutorial, voc criar pginas da Web para a Compass, uma empresa ctcia especializada em viagens orientadas para aventuras. Se ainda no conhecer o Dreamweaver, inicie pelo princpio do tutorial e avance at o nal. Se j estiver familiarizado com o Dreamweaver, seria recomendvel iniciar pela seo Utilizar o painel Propriedades na pgina 58 e as subseqentes, que se encarregam dos novos recursos do Dreamweaver ou daqueles que foram modicados, como o painel Propriedades, botes e texto Flash, como utilizar um modelo, como executar um relatrio de site e como adicionar uma Design Note. O tutorial toma aproximadamente uma a duas horas para ser concludo, dependendo da sua experincia, e se concentra nas seguintes tarefas do Dreamweaver:
Como denir um site local Como criar uma pgina na visualizao de layout Como inserir uma imagem e uma imagem cambivel Como trabalhar com tabelas na visualizao padro Como criar um link para outro documento Como inserir propriedades do painel Propriedades Como inserir objetos de texto e botes Flash Como criar e aplicar um modelo Como executar um relatrio de site Como adicionar uma Design Note
Nota: Este tutorial demonstra alguns recursos aos quais oferecido suporte apenas nos navegadores 4.0 ou posteriores.
29
Faa um tour guiado no Dreamweaver

Antes de comear a trabalhar com o Dreamweaver, assista aos lmes do Tour guiado, para se familiarizar com o processo de desenvolvimento para a Web e com os recursos do Dreamweaver.
1 2 3
No Dreamweaver, escolha Ajuda > Tour guiado. Clique no ttulo de um lme. Quando tiver terminado, feche o lme.
A rea de trabalho do Dreamweaver

Comecemos com uma breve viso geral da rea de trabalho do Dreamweaver.
Se ainda no tiver iniciado o Dreamweaver, clique duas vezes no cone do

programa, para inici-lo. A rea de trabalho do Dreamweaver adapta-se a diversos estilos de trabalho e nveis de experincia. Quando o Dreamweaver for iniciado, sero abertos os seguintes itens da rea de trabalho:
Barra de ferramentas
janela do documento
painel Objetos
painel flutuante
seletor de tags
barra do Iniciador inspetor de propriedades
A janela do documento exibir o documento medida que for criado e editado. O painel Objetos contm cones que podem ser clicados para inserir objetos no
documento e para alterar a maneira como se trabalha nos documentos.
O Dreamweaver fornece muitos painis utuantes, como o painel Estilos

HTML e o inspetor de cdigo, que permitem trabalhar com outros elementos do Dreamweaver.
30
Captulo 1
A barra do Iniciador contm botes para abrir e fechar os inspetores e os painis

utilizados com maior freqncia.
O inspetor de propriedades exibe as propriedades do objeto ou texto

selecionado e permite modic-las. O tipo de objeto selecionado no documento determinar as propriedades que aparecero no inspetor de propriedades. Para abir as janelas, inspetores e painis do Dreamweaver, utilize o menu Janela. Uma marca de seleo prxima a um item no menu Janela indica que o item em questo est aberto (apesar de poder estar oculto atrs de outras janelas). Para exibir um item que no se encontra aberto, escolha o nome a ele correspondente, no menu, ou utilize o respectivo atalho de teclado. Como trabalhar no Dreamweaver O Dreamweaver capaz de exibir um documento de trs maneiras: na visualizao do projeto, na visualizao de cdigo e em uma visualizao dividida, que mostra ambas as visualizaes. Para alterar a visualizao na qual est trabalhando, selecione uma opo, na barra de ferramentas do Dreamweaver. Como padro, o Dreamweaver exibe a janela do documento na visualizao do projeto. Alm disso, possvel trabalhar com a visualizao do projeto do Dreamweaver de duas maneiras diferentes: na visualizao de layout e na visualizao padro. Essas visualizaes podem ser selecionadas na categoria Exibir, no painel Objetos. Na visualizao de layout, possvel projetar o layout de uma pgina e inserir imagens, texto e outros elementos de mdia; na visualizao padro, alm da possibilidade de inserir imagens, texto e mdia, tambm possvel inserir camadas, criar documentos com molduras, criar tabelas e aplicar outras alteraes pgina, opes que no esto disponveis na visualizao de layout. Como esto organizados os arquivos do tutorial Tanto os arquivos HTML concludos quanto os parcialmente concludos que foram utilizados neste tutorial esto localizados na pasta Compass_Site, na pasta Tutorial. As imagens e outros arquivos associados ao site tambm se encontram na pasta Compass_Site. Cada arquivo do tutorial possui um nome caracterstico (por exemplo: o arquivo HTML que contm as informaes sobre os destinos de viagem denominado Destinations.html. Os arquivos parcialmente concludos com os quais voc trabalhar possuem nomes semelhantes aos respectivos arquivos concludos, exceto pelo fato de estes serem iniciados por DW4_; a verso parcialmente concluda de Destinations.html, por exemplo, denominada DW4_Destinations.html.
31
Visualizar o site da Web concludo Em seguida, visualize as pginas do site da Web concludo, para ter uma idia do objetivo do seu trabalho.
1 2
Se ainda no as tiver visualizado, inicie o Dreamweaver. No Dreamweaver, escolha Arquivo > Abrir. Na caixa de dilogo de pesquisa de arquivos, navegue at a pasta do Dreamweaver 4 (onde tiver instalado o programa) e, em seguida, navegue at Tutorial/Compass_Site. Na pasta Compass_Site, selecione o arquivo CompassHome.html e, em seguida, clique em Abrir, para abrir a home page Compass na janela do documento. No edite esta pgina; voc criar a sua prpria verso dela. Escolha Arquivo > Visualizar no navegador e, em seguida, selecione um navegador com o qual deseja exibir a home page Compass. Utilize a verso 4.0 ou mais avanada de um navegador para poder visualizar este site.
Mova o ponteiro do mouse sobre os botes de navegao, para ver os efeitos de imagens cambiveis. Clique nos botes de navegao, para explorar o site. Feche o navegador ao terminar de visualizar o site. Para abrir um novo documento em branco no Dreamweaver, escolha Arquivo > Abrir. Feche o arquivo CompassHome.html, que est aberto no Dreamweaver.
6 7
32
Captulo 1
Configurar a estrutura do site do tutorial

H duas maneiras de se trabalhar com os arquivos do tutorial: utilizando um site local predenido ou denindo um site local.
Se ainda no conhecer o Dreamweaver, recomendvel denir o site local do

tutorial, para que saiba como congurar um site local quando estiver pronto para trabalhar com os seus prprios sites.
Se j estiver familiarizado com a denio de sites utilizando o Dreamweaver,

utilize o site predenido do tutorial. No menu principal do Dreamweaver, escolha Site > Abrir o site e, em seguida, selecione Tutorial - Dreamweaver. O site Tutorial - Dreamweaver se vincula aos arquivos de Compass_Site, que esto localizados na pasta Dreamweaver 4/Tutorial. Depois de selecionar o site local, passe seo Criar a home page do site na pgina 36 do tutorial.
Nota: Se voc selecionar o site predefinido, os instantneos de tela do tutorial no exibiro o mesmo nome de site; em vez de ver my_tutorial, voc ver Tutorial Dreamweaver como nome do site nas telas.
Definir um site local

Ao denir um site local, voc estar informando ao Dreamweaver onde planeja armazenar todos os arquivos de um determinado site. Para poder trabalhar com ecincia no Dreamweaver, sempre dena um site local correspondente a cada site da Web que criar. Neste tutorial, voc especicar a pasta Compass_Site como a pasta do site local.
1
Se ela ainda no estiver aberta, inicie o Dreamweaver. Ser aberto um documento em branco. Escolha Site > Novo site. Na caixa de dilogo Denio do site, verique se Informaes locais est selecionada na lista Categoria. No campo Nome do site, digite my_tutorial. O nome do site permite identicar e selecionar com facilidade um site em uma lista de sites previamente denidos.
2 3
Clique no cone de pasta, situado direita do campo Pasta raiz local.
33
Na caixa de dilogo que aparecer, navegue at a pasta Tutorial-DW4/ Compass_Site e siga um dos procedimentos abaixo: Compass_Site aparecer no campo Selecionar.
No Windows, clique em Abrir e, em seguida, clique em Selecionar, quando No Macintosh, clique em Escolher, para selecionar a pasta Compass_Site.
O campo Pasta raiz local ser atualizado, exibindo o caminho at o site local.
Nota: possvel que o caminho completo at a pasta Compass_Site varie, dependendo de onde o Dreamweaver estiver instalado.
Em Cache, siga um dos procedimentos abaixo: site.
Selecione Ativar o cache (no Windows), para criar um arquivo de cache para o Selecione Utilizar o cache para acelerar as atualizaes de links (no Macintosh),
para criar um arquivo de cache para o site. Se o contedo da pasta Compass_Site for colocado em um cache, ser criado um registro dos arquivos existentes para que o Dreamweaver possa atualizar rapidamente os links quando um arquivo for movido, renomeado ou excludo.
8
Clique em OK, para fechar a caixa de dilogo.
34
Captulo 1
Clique em OK na mensagem relacionada ao cache. A janela do site passar a exibir uma lista de todas as pastas e arquivos do site local. A lista tambm atua como um gerenciador de arquivos, permitindo a cpia, colagem, excluso, transferncia e abertura de arquivos, da mesma maneira que voc faria na rea de trabalho do computador.
35
Criar a home page do site

Agora que a estrutura do site j foi congurada para armazenar as pginas e propriedades do site Compass, voc criar a primeira pgina, uma home page do site. medida que cria esta pgina, voc adicionar imagens, texto e propriedades Flash; o documento ir conter os mesmos componentes de design que a home page Compass concluda. Salvar o documento Comece por salvar o documento no qual estiver trabalhando.
1
Deixe a janela do site aberta e clique na janela do documento, para torn-la ativa. A janela do site continuar aberta no segundo plano. Escolha Arquivo > Salvar. Na caixa de dilogo Salvar como, selecione a pasta Compass_Site como local para este documento. No campo Nome do arquivo, digite my_CompassHome.html. Clique em Salvar. Observe que o nome do documento passar a aparecer na parte superior da janela do documento.
2 3
4 5
36
Captulo 1
Defina o ttulo da pgina do documento Embora o documento tenha um nome de arquivo, obserque que ele ainda est identicado por Documento sem ttulo; isso se deve ao fato dele necessitar de um nome de documento HTML ou ttulo de pgina. A denio do ttulo de uma pgina auxilia os visitantes do site a identicar a pgina que estiverem consultando: o ttulo da pgina aparecer na barra de ttulo do navegador e na lista de marcadores. Se voc criar um documento sem ttulo de pgina, ele ser apresentado no navegador como Documento sem ttulo. Nesta parte do tutorial, voc dar um ttulo pgina.
1
Com a janela do documento ativa, escolha Exibir > Barra de ferramentas, se esta barra ainda no estiver visvel. A barra de ferramentas do Dreamweaver aparecer acima da janela do documento
No campo Ttulo, digite Compass Home Page; em seguida, clique na janela do documento, para examinar a atualizao do ttulo da pgina na barra de ttulo desta janela.
Salve o arquivo.
37
Desenhar uma pgina na visualizao de layout

Voc iniciar a sua primeira pgina enquanto trabalha na visualizao do projeto do Dreamweaver. Voc organizar a pgina e, em seguida, inserir as imagens e o texto. A pgina que voc concluir nesta seo do tutorial ter uma aparncia semelhante a esta pgina.
Trabalhar na visualizao de layout O Dreamweaver possui duas visualizaes do projeto: a visualizao padro e a visualizao de layout. Comece trabalhando na visualizao de layout, que permite desenhar clulas ou tabelas de layout, nas quais possvel adicionar contedo (como imagens, texto ou outros tipos de mdia). Nesta parte do tutorial, voc organizar a pgina; na seo seguinte, voc adicionar contedo. Quando estiver vontade com estas duas tarefas, voc poder adicionar layout e contedo simultaneamente.
1
No painel Objetos, clique no cone de Visualizao de layout, se ainda no estiver selecionado.

cone de Desenhar a clula de layout cone de Desenhar a tabela de layout cone de Visualizao de layout
Aparecer a caixa de dilogo Guia de introduo para a visualizao do layout, que descreve as opes desta visualizao.
2
Revise as opes e, em seguida, clique em OK, para fechar a caixa de dilogo.
38
Captulo 1
No painel Objetos, observe que as opes de layout abaixo de Layout (Desenhar a clula de layout e Desenhar a tabela de layout) passaram a estar disponveis; estas opes no estavam disponveis na visualizao padro.
Desenhar as clulas de layout Na visualizao de layout, possvel desenhar clulas e tabelas de layout, para denir as reas de desenho de um documento. Esta tarefa ser mais fcil se voc preparar uma amostra da pgina que estiver criando antes de comear a organiz-la. Examine a amostra de layout abaixo, para ter uma idia do layout de pgina que voc estar criando nessa seo do tutorial. Existe uma clula para o logotipo Compass, uma tabela com trs clulas para os botes de navegao no site, uma clula para outra imagem grca e uma tabela para as trs clulas onde ser colocado o texto.
medida que trabalhar no documento, voc desenhar tabelas e clulas semelhantes s deste layout. Primeiramente, desenhe uma clula de layout, na qual voc inserir o logotipo Compass.
1 2
Clique na janela do documento my_CompassHome, para torn-lo ativo. Se ainda no estiverem abertas, abra as seguintes ferramentas da rea de trabalho: objetos ao documento.
O painel Objetos (escolha Janela > Objetos), que ser utilizado para adicionar O inspetor de propriedades (escolha Janela > Propriedades), que ser utilizado
para denir as propriedades ou atributos dos objetos contidos no documento. Se o inspetor de propriedades ainda no estiver expandido, clique na seta de expanso, localizada no canto inferior direito, para examinar todas as opes das propriedades.
39
3 4
No painel Objetos, clique no cone de Desenhar a clula de layout. Mova o ponteiro para a janela do documento; o ponteiro se transformar em uma ferramenta de desenho (semelhante a uma pequena cruz). Clique no canto superior esquerdo do documento e, em seguida, arraste, para desenhar uma clula de layout. Ao soltar o mouse, voc ver uma clula de layout aparecer em uma tabela de layout.
Clula de layout Tabela de layout
A tabela de layout se expandir, preenchendo a janela do documento e denindo a rea de layout da pgina. O retngulo branco a clula de layout que voc desenhou. possvel colocar outras clulas de layout na rea cinzenta da tabela de layout. Redimensionar as clulas de layout Para desenhar uma pgina com preciso, possvel denir o tamanho das clulas adicionadas ao documento. Tambm possvel reposicionar as clulas na pgina.
1
Clique na borda da clula de layout, para selecion-la. Aparecero alas ao redor da clula de layout selecionada:
Para redimensionar esta clula de layout, siga um dos procedimentos abaixo: para denir a largura da clula como sendo 510 pixels e, em seguida, clique no documento, para vericar a alterao na largura.
No inspetor de propriedades da clula de layout, digite 510 no campo Fixo,
40
Captulo 1
Nota: Se digitar uma largura (em pixels) maior do que a da tabela de layout ou se isso acarretar a sobreposio da clula a outra clula de uma tabela de layout, o Dreamweaver o alertar e ajustar a largura da clula a um valor vlido.
No lado direito da clula de layout, arraste a ala de redimensionamento

intermediria para a direita, at atingir a largura desejada da clula. Quando voc soltar o mouse, a largura da clula ser exibida na rea do cabealho da coluna, no alto da tabela de layout.
Adicionar clulas de layout mltiplas A seguir, voc adicionar trs clulas de layout abaixo da clula de logotipo que acabou de criar. Posteriormente, voc inserir os botes de navegao da pgina nestas clulas.
1
No painel Objetos, clique no cone de Desenhar a clula de layout; a seguir, mantenha pressionada a tecla Control (no Windows) ou Command (no Macintosh). Na janela do documento, posicione o ponteiro do mouse abaixo da clula que tiver desenhado para o logotipo; em seguida, arraste, para desenhar uma clula de layout. Continue a manter pressionada a tecla Control (no Windows) ou Command (no Macintosh) e desenhe duas outras clulas de layout. A sua tela dever ter uma aparncia semelhante a esta.
41
Mover uma clula de layout Se precisar alinhar as clulas, voc poder redimension-las e mov-las conforme a necessidade. A alterao no tamanho das clulas de layout feita utilizando uma de suas alas de redimensionamento. No possvel clicar e arrastar uma clula para mov-la para outra posio. Se precisar mover uma clula de layout para reposicion-la no documento, siga as etapas abaixo.
1 2
Clique na borda de uma clula de layout, para selecion-la. Para mover a clula de layout, siga um dos procedimentos abaixo:
Utilize as teclas de seta. Mantenha pressionada a tecla Shift e utilize as teclas de seta, para mover uma
clula de layout cinco pixels de cada vez. Agrupar clulas em uma tabela de layout Agora, voc criar uma tabela com as clulas dos botes de navegao que acabou de criar. O agrupamento das clulas em uma tabela permite controlar o espaamento entre as clulas e mover com facilidade as clulas como um grupo, se desejar alterar o layout da pgina. Voc criar uma tabela para os botes de navegao com a mesma largura que a clula do logotipo, situada acima. Utilize a opo Desenhar a tabela de layout, para agrupar as imagens dos botes de navegao.
1 2
No painel Objetos, clique no cone de Desenhar a tabela de layout. Na janela do documento, posicione o ponteiro no canto superior esquerdo da primeira clula de boto de navegao e, em seguida, arraste o ponteiro, para que a tabela abrigue as trs clulas e tenha o mesmo comprimento da clula do logotipo.
42
Captulo 1
Solte o mouse, para ver as clulas agrupadas em uma nova tabela.
Voc criou uma tabela que contm trs clulas de layout (a rea branca da tabela) e um espao vazio (a rea cinzenta da tabela). Mover a tabela de layout possvel selecionar e mover uma tabela de layout para outras reas de um documento. Contudo, no possvel mover uma tabela de layout de maneira que ela se sobreponha a outra tabela. A seguir, voc mover a tabela que criou alguns pixels para a direita, para deslocar o alinhamento dos botes de navegao em relao ao logotipo, quando aqueles forem inseridos na pgina.
1
Na janela do documento, clique na guia correspondente tabela de layout, para mov-la. Arraste a tabela de layout alguns pixels para a direita, para reposicion-la e, em seguida, arraste uma das alas de redimensionamento direita da tabela, para alinhar o lado direito do logotipo com as clulas de layout dos botes de navegao.
Observe que, medida que voc for criando novas tabelas e clulas, aparecero linhas de grade contornando a rea do layout. possvel utilizar estas linhas de grade para alinhar os elementos do layout.
43
Adicionar outra clula de layout A seguir, adicione uma clula de layout imagem correspondente a "Learn More About" (Mais informaes).
1 2
No painel Objetos, clique no cone de Desenhar a clula de layout. Na janela do documento, desenhe uma nova clula no espao situado abaixo da tabela de botes de navegao.
A sua pgina dever ter uma aparncia semelhante a esta:
Criar uma tabela de layout Na seo anterior, voc utilizou clulas para criar uma tabela. Agora, voc partir de uma tabela, qual adicionar clulas.
1 2
No painel Objetos, clique no cone de Desenhar a tabela de layout. Mova o ponteiro para a janela do documento. Na rea abaixo da clula de layout que tiver adicionado, arraste o ponteiro para a direita, para alinh-la com o lado direito da clula mais acima e, em seguida, arraste at a parte inferior da janela do documento.
44
Captulo 1
Desenhar clulas de layout em uma tabela Adicione as clulas de layout, s quais voc adicionar texto sobre os locais de viagem.
1
No painel Objetos, clique no cone de Desenhar a clula de layout e mova o ponteiro para a tabela de layout que acabou de desenhar. Desenhe uma clula de tabela com aproximadamente um tero do espao da tabela. Clique na borda da clula de layout, para selecion-la e, em seguida, no campo Fixo do inspetor de propriedades, digite 170, para denir a largura da clula. Desenhe outra clula de tabela com aproximadamente um tero do espao da tabela ao lado da primeira clula. Clique na borda da clula de layout, para selecion-la e, em seguida, no campo Fixa do inspetor de propriedades, digite 170, para denir a largura da clula. Desenhe a ltima clula no espao restante da tabela. Redimensione ou mova as clulas, para ajustar o seu tamanho e posio, conforme necessrio. A sua tela dever ter uma aparncia semelhante a esta:
45
Adicionar contedo pgina

Agora que as reas da pgina j esto organizadas, voc adicionar o contedo grco (o logotipo e as imagens cambiveis, por exemplo). Inserir imagens Voc aprender duas maneiras de inserir imagens no Dreamweaver: utilizando o menu principal do programa e utilizando o painel Objetos.
1
Clique em qualquer ponto da clula de layout que contm o logotipo (a clula mais ao alto). O ato de clicar em uma clula de layout posiciona o ponto de insero na clula sem selecion-la.
2 3
Escolha Inserir > Imagem. Na caixa de dilogo Selecionar a origem da imagem, localize a pasta Compass_Site e navegue at a pasta Assets e, em seguida, at a pasta de imagens; clique em compass_logo.gif, para selecion-lo. Certique-se de que o menu pop-up Relativa a, localizado na parte inferior da caixa de dilogo, esteja denido como Documento e, em seguida, clique em Selecionar (no Windows), ou Abrir (no Macintosh), para selecionar a imagem. A imagem aparecer na clula de layout.
Clique em qualquer ponto da clula de layout "Learn More About", para colocar o ponto de insero na clula. Na categoria Comuns do painel Objetos, clique no cone de Inserir imagem. Na caixa de dilogo Selecionar a origem da imagem, localize a pasta Compass_Site/Assets/images e navegue at learnMoreAbout.gif; em seguida, clique em Selecionar (no Windows), ou Abrir (no Macintosh), para selecionar a imagem. A imagem aparecer na clula de layout. Escolha Arquivo > Salvar, para salvar todas as alteraes feitas na home page.
6 7
46
Captulo 1
Criar uma imagem cambivel Uma imagem cambivel aquela cuja exibio alterada quando o ponteiro for movido sobre ela. Voc utilizar o comando Inserir imagem cambivel do Dreamweaver para criar trs imagens cambiveis para os botes de navegao: "Trip Planner" (Planejador de viagem), "Destinations" (Destinos) e "Travel Logs" (Registros de viagem). A imagem cambivel consiste de duas imagens: a imagem exibida quando a pgina for carregada pela primeira vez no navegador e a imagem exibida quando o ponteiro for passado sobre a imagem original. Certique-se de utilizar imagens com o mesmo tamanho. A primeira imagem regula o tamanho da tela, de forma que se a segunda imagem for muito menor ou maior, o resultado parecer distorcido ou com um carter amador. A seguir, voc adicionar um boto de navegao com uma imagem cambivel pgina. E, em seguida, voc adicionar os outros botes de navegao e visualizar a pgina em um navegador, para testar as imagens cambiveis.
1
Na janela do documento, clique na primeira clula da tabela de botes de navegao. Este procedimento informar ao Dreamweaver onde deseja inserir a imagem. Para inserir uma imagem cambivel, siga um dos procedimentos abaixo: cambivel.
Na categoria Comuns do painel Objetos, clique no cone de Inserir imagem Escolha Inserir > Imagens interativas > Imagem cambivel.
3
Na caixa de dilogo Inserir imagem cambivel, digite "planner" (planejador), no campo Nome da imagem. Com isso, a imagem assumir um nome exclusivo e se tornar facilmente identicvel no cdigo HTML.
No campo Imagem original, clique em Procurar; em seguida, navegue at o arquivo MenuTripPlanner.gif e clique em Selecionar (no Windows), ou Abrir (no Macintosh). Este procedimento informar ao Dreamweaver a imagem que dever ser exibida quando a pgina for carregada pela primeira vez.
No campo Imagem cambivel, clique em Procurar; em seguida, navegue at o arquivo MenuTripPlanner_on.gif e clique em Selecionar (no Windows), ou Abrir (no Macintosh). Este procedimento informar ao Dreamweaver a imagem que dever ser exibida quando o ponteiro for passado sobre a imagem original.
47
Certique-se de que a opo Pr-carregar a imagem cambivel esteja selecionada, de maneira que as imagens cambiveis sejam carregadas quando a pgina for carregada no navegador, garantindo uma transio rpida entre as imagens quando o usurio mover o ponteiro do mouse sobre a imagem original.
Clique em OK, para fechar a caixa de dilogo. A imagem aparecer no documento. Redimensione a clula de layout, para que possa acomodar a imagem.
Criar as outras imagens cambiveis Agora, voc adicionar as imagens cambiveis correspondentes aos outros botes de navegao.
1
Na janela do documento, clique na segunda clula de boto de navegao; em seguida, na categoria Comuns do painel Objetos, clique no cone de Inserir a imagem cambivel. Na caixa de dilogo Inserir a imagem cambivel, digite destinos, no campo Nome da imagem, para dar um nome exclusivo imagem. No campo Imagem original, clique em Procurar; em seguida, navegue e selecione MenuDestinations.gif. No campo Imagem cambivel, clique em Procurar; em seguida, navegue e selecione MenuDestinations_on.gif. Certique-se de que a opo Pr-carregar a imagem cambivel esteja selecionada e, em seguida, clique em OK, para fechar a caixa de dilogo. Na janela do documento, clique na clula correspondente ao terceiro boto de navegao; em seguida, na categoria Comuns do painel Objetos, clique no cone de Inserir imagem cambivel. Na caixa de dilogo Inserir a imagem cambivel, digite registro de viagem, no campo Nome da imagem, para dar um nome exclusivo imagem. No campo Imagem original, clique em Procurar e, em seguida, navegue e selecione MenuTravelLogs.gif.
48
Captulo 1
No campo Imagem cambivel, clique em Procurar e, em seguida, navegue e selecione MenuTravelLogs_on.gif. Certique-se de que a opo Pr-carregar a imagem cambivel esteja selecionada e, em seguida, clique em OK, para fechar a caixa de dilogo. Redimensione as duas clulas de layout, para que possam acomodar a imagem.
10
11
Visualizar o documento No possvel examinar o comportamento das imagens cambiveis na janela do documento do Dreamweaver; estas imagens funcionam apenas nos navegadores. Contudo, possvel visualizar o documento no Dreamweaver, para examinar as suas funes associadas ao navegador. No necessrio salvar o documento para poder visualiz-lo.
1
Pressione a tecla F12, para visualizar o documento em um navegador da Web.
Mova o ponteiro do mouse sobre as imagens cambiveis que tiver criado, para v-las mudar.
2 3
Ao terminar de visualizar o arquivo, feche a janela do navegador. Retorne janela do documento do Dreamweaver e escolha Arquivo > Salvar, para salvar as alteraes feitas na home page.
Inserir texto Agora, voc vai adicionar texto s clulas da parte inferior da tabela de layout. No Dreamweaver, possvel digitar contedo diretamente em uma clula de layout ou recort-lo de um outro documento e col-lo na clula de layout. Nesse tutorial, voc adicionar texto clula de layout, copiando e colando o contedo de um arquivo de texto j existente.
1
Escolha Arquivo > Abrir; em seguida, na pasta Compass_Site, abra o arquivo DW4_HomeText.txt. O documento DW4_HomeText.txt ser aberto em outra janela do Dreamweaver.
No arquivo DW4_HomeText.txt, selecione as duas primeiras linhas de texto, de Fly Fishing (Pesca com iscas articiais) at ravioli.
49
3 4
Escolha Editar > Copiar, para copiar o texto. No documento my_CompassHome, clique na primeira clula de layout da tabela de layout de descrio do texto. Escolha Editar > Colar, para colar o texto na clula de layout. No arquivo DW4_HomeText.txt, selecione as duas linhas de texto seguintes: Level 5 Rapids (Corredeiras de nvel 5) e Siberia (Sibria). Escolha Editar > Copiar, para copiar o texto. No documento my_CompassHome, clique na segunda clula da tabela de layout de descrio do texto. Escolha Editar > Colar, para colar o texto na clula de layout. No arquivo DW4_HomeText.txt, selecione as duas ltimas linhas de texto: Puget Sound Kayaking (Caiaque no Estreito Puget) e Puget Sound (Estreito Puget). Copie o texto e, em seguida, cole-o na terceira clula da tabela de layout. Feche o arquivo DW4_HomeText.txt e, em seguida, clique no documento my_CompassHome.html, para torn-lo ativo.
5 6
7 8
9 10
11 12
Formatar o texto possvel formatar o texto da janela do documento denindo as propriedades no inspetor de propriedades. Inicialmente, selecione o texto a ser formatado e aplique as alteraes. Voc alterar o tipo de fonte e o tamanho do texto.
1
Se o inspetor de propriedades ainda estiver fechado, escolha Janela > Propriedades. Na primeira clula de layout de descrio do texto, selecione todo o texto, desde a palavra Fly at a ltima palavra (ravioli). No segundo menu pop-up Formato do inspetor de propriedades, que apresenta a opo Fonte padro, selecione Verdana, Arial, Helvetica, sans-serif. No menu pop-up Tamanho, selecione 2. O texto do documento ser automaticamente atualizado, reetindo as alteraes.
Repita as etapas descritas acima, para selecionar e formatar o texto das outras duas clulas de layout de descrio do texto.
50
Captulo 1
Aplicar cor e estilo Agora, voc aplicar outras alteraes de formatao ao texto; voc aplicar cor e estilo para criar o texto do cabealho.
1
Na primeira clula de layout de descrio do texto, selecione o texto do cabealho, desde a palavra Fly at a palavra Mountains (Montanhas). No inspetor de propriedades, clique no seletor de cores; em seguida, mova o conta-gotas at a imagem Mais informaes, na janela do documento, e selecione a cor marrom no texto desta imagem. Ainda no inspetor de propriedades, clique no cone B, para aplicar o estilo negrito ao texto. Repita as etapas acima para aplicar cor e estilo ao texto do cabealho nas outras clulas de layout de descrio do texto. Pressione a tecla F12, para visualizar a pgina em um navegador. A sua pgina dever se assemelhar pgina abaixo.
Observe o texto. A separao entre o texto de uma clula de layout e a seguinte pequena. Voc corrigir este problema nas prximas etapas do tutorial.
6
Feche a janela do navegador e, em seguida, clique na janela do documento, para torn-la ativa.
51
Trabalhar na visualizao padro

A visualizao de layout til para organizar a disposio dos elementos de pginas da Web. Embora seja possvel ajustar a maior parte dos elementos do desenho nesta visualizao, certas alteraes devem ser executadas na visualizao padro. Ao alternar para a visualizao padro, voc ver como o Dreamweaver utiliza tabelas para criar a estrutura da pgina. s tabelas de layout da visualizao de layout correspondem os tags <table> da visualizao padro. Agora, voc aprender como trabalhar com tabelas, para continuar a aprimorar o desenho da pgina. Primeiramente, passe visualizao padro do Dreamweaver.
No painel Objetos, clique no cone da Visualizao padro.

A sua pgina dever se assemelhar tela abaixo.
Definir as propriedades das clulas Altura da clula determina a altura de uma linha de clulas. Observe o espao ao redor do logotipo Compass. Remova o excesso de espao entre o logotipo e os botes de navegao.
1
Clique em qualquer ponto da rea vazia da clula que contm a imagem do logotipo Compass (no na imagem em si). No inspetor de propriedades da clula, exclua o valor contido no campo U (altura). Ainda no inspetor de propriedades, clique no cone da caixa Cor de fundo, localizado na parte inferior; em seguida, utilize o conta-gotas para selecionar a cor preta. A cor de fundo ser aplicada clula. Clique em qualquer ponto da janela do documento, para examinar a alterao.
52
Captulo 1
Como selecionar uma tabela A seguir, voc ajustar o espao na tabela dos botes de navegao. A maneira mais fcil de selecionar uma tabela na visualizao padro atravs da utilizao do seletor de tags, que exibe os tags HTML dos elementos do documento. Voc utilizar o seletor de tags para selecionar a tabela que contm os botes de navegao.
1
Clique na clula que contm a imagem Planejador de viagem. Observe o seletor de tags, no canto inferior esquerdo da janela do documento.
Nota: Os tags apresentados no seletor de tags podem variar, dependendo do nmero de tabelas que tiverem sido criadas na visualizao de layout.
No seletor de tags, clique no tag <table> mais direita. Na janela do documento, aparecer uma borda ao redor da tabela de botes de navegao, enquanto que o inspetor de propriedades passar a reetir as propriedades da tabela.
53
Definir as propriedades de uma tabela Agora, voc utilizar o inspetor de propriedades da tabela para limpar o excesso de espao na tabela de botes de navegao e para adicionar uma cor de fundo tabela.
1
No inspetor de propriedades, clique no cone de Limpar as alturas das linhas (o boto na parte inferior do inspetor de propriedades). O espao excessivo ser removido da tabela. Ainda no inspetor de propriedades, clique no cone da caixa Cor de fundo e, em seguida, utilize o conta-gotas para selecionar a cor preta. A cor de fundo preta ser aplicada tabela dos botes de navegao.
Adicionar preenchimento s clulas A seguir, voc far alteraes s clulas que contm texto. Como voc pode ver, o texto est prximo demais das margens das clulas. Voc adicionar preenchimento s clulas, para aumentar o espao entre elas e o texto.
1 2 3
Clique na primeira clula da tabela de descrio do texto. No seletor de tags, clique no tag <table> mais direita, para selecionar a tabela. No campo Preench. da clula, no inspetor de propriedades, digite 10, para adicionar 10 pixels de espao entre o texto e as clulas da tabela. Clique em qualquer ponto da janela do documento, para examinar as alteraes. Salve o documento.
Visualizar os arquivos do site Para examinar uma representao de nvel elevado da estrutura de um site local, utilize a visualizao do mapa do site do Dreamweaver. O mapa do site tambm pode ser utilizado para adicionar novos arquivos ao site; adicionar, remover e alterar os links, alm de criar um arquivo de imagem do site, que pode ser exportado e impresso a partir de um aplicativo de edio de imagens. O mapa do site sempre exibe a home page de um site na parte superior do mapa; abaixo da home page, voc poder examinar os arquivos que se vinculam home page.
54
Captulo 1
Existem diversas maneiras de se denir a home page de um site. A maneira mais fcil atravs da utilizao do menu contextual, situado na janela do site.
1
Clique na barra de ttulo da janela do site para ativ-la. Se a janela do site no estiver visvel, escolha Janela > Arquivos do site. Na lista Pasta local da janela do site, clique com o boto direito do mouse no documento e my_CompassHome.html (no Windows), ou pressione a tecla Control e clique no documento (no Macintosh); em seguida, no menu contextual, escolha Denir como home page. Clique no cone de Mapa do site, situado na rea superior esquerda da janela do site; em seguida, no menu pop-up Mapa do site, selecione a opo Mapa e arquivos.
cone de Mapa do site
A janela do site aparecer e contar agora com duas visualizaes do site local: esquerda, um mapa do site, que representa gracamente a estrutura do site Compass (cuja home page my_CompassHome.html), enquanto que direita, uma lista com o contedo da pasta local.
A pgina my_CompassHome.html ainda no possui links. Voc adicionar links a esta pgina na prxima seo do tutorial. Mantenha aberta a janela do site por enquanto, para acompanhar a atualizao do mapa do site enquanto os links so includos na home page.
55
Vincular os documentos As imagens da rea superior da home page Compass guiam os visitantes para pginas especcas do site. Agora, voc adicionar links aos botes de navegao. Voc perceber que h diversas maneiras de criar links utilizando o Dreamweaver. Primeiramente, voc adicionar um link da imagem Planejador de viagem pgina TripPlanner.html, utilizando o inspetor de propriedades.
1
Na janela do site, clique duas vezes no cone correspondente ao arquivo my_CompassHome.html, em qualquer um dos painis. O arquivo my_CompassHome.html se tornar a janela ativa. Na janela do documento, clique uma vez na imagem Planejador de viagem, para selecion-la. Escolha Janela > Propriedades, para abrir o inspetor de propriedades, caso ainda esteja fechado. O inspetor de propriedades exibir as informaes sobre a imagem selecionada.
Nota: O campo Link contm um sinal de nmero (#), geralmente denominado link nulo ou fictcio, que foi criado quando voc inseriu a imagem cambivel. No remova este caractere. Ele ser substitudo pelo nome do arquivo do documento vinculado.
No inspetor de propriedades, clique no cone correspondente pasta, direita do campo Link. Na caixa de dilogo Selecionar o arquivo, procure a pasta Compass_Site e, em seguida, o arquivo DW4_TripPlanner.html; clique em Selecionar (no Windows), ou Abrir (no Macintosh), para selecionar o arquivo a ser aberto quando o boto Planejador de viagem for clicado. O nome do arquivo aparecer no campo Link, no inspetor de propriedades. Agora, voc ir adicionar um link imagem Destinos utilizando o inspetor de propriedades e a janela do site.
Clique na barra de ttulo da janela do site para ativ-la ou escolha Janela > Arquivos do site. Redimensione a janela do documento, se for necessrio, para que o lado esquerdo da janela do documento possa ser colocado ao lado da janela do site. Na janela do documento, clique na imagem Destinos, para selecion-la.
56
Captulo 1
No inspetor de propriedades, clique no cone de Indicar o arquivo (localizado direita do campo Link) e, em seguida, arraste o ponteiro para a janela do site; na lista Pasta local, indique o arquivo DW4_Destinations.html.
O nome do arquivo aparecer no campo Link, no inspetor de propriedades da imagem Produtos.

9
Clique no cone de Mapa do site, na janela do site. O mapa do site ser atualizado, reetindo a adio do link.
Um sinal de adio (+) ao lado de um arquivo no mapa do site indica que o arquivo possui links a outros documentos. Clique no sinal de adio para exibir os arquivos associados; clique no sinal de subtrao () para reduzir o mapa do site. A seguir, voc adicionar um link imagem "Travelogs".
10 11
Na janela do documento, clique na imagem "Travelogs", para selecion-la. No inspetor de propriedades, arraste o cone do indicador de arquivos at a janela do site e indique o arquivo DW4_Travelog.html. Escolha Arquivo > Salvar, para salvar as alteraes feitas na home page.
12
57
Testar a pgina No possvel testar os links no Dreamweaver. Os links devem ser vericados em um navegador, para garantir o funcionamento das pginas conforme as expectativas.
1
Pressione a tecla F12, para visualizar a pgina em um navegador. Clique nos botes de navegao, para vericar os links. Clique no boto Voltar do navegador, para retornar home page.
Quando tiver terminado de testar a pgina, escolha Arquivo > Fechar, para fech-la.
Utilizar o painel Propriedades

O painel Propriedades permite visualizar as propriedades do site (imagens, cores HTML, links, lmes Flash, outros tipos de lmes, scripts, modelos e itens de biblioteca). possvel examinar todas as propriedades do site em um nico local e, em seguida, adicionar com facilidade contedo pgina diretamente do painel. Agora, voc aprender como utilizar o painel Propriedades para adicionar propriedades a uma pgina. Selecionar um documento novo Para evitar ter que criar outras tabelas na home page, este tutorial inclui um arquivo HTML semelhante home page que voc criou; ele inclui uma nova clula de tabela, no lado direito do documento. Para iniciar esta parte do tutorial, siga um dos procedimentos abaixo:
Se estiver continuando o tutorial vindo da seo anterior, escolha Arquivo >

Abrir e, em seguida, selecione o arquivo DW4_CompassHome2.html.
Se estiver comeando o tutorial nesta seo, escolha Site > Abrir o site e, em
seguida, na lista de sites, selecione Tutorial - Dreamweaver, para abrir um determinado site. No menu principal da janela do documento, escolha Arquivo > Abrir; na caixa de dilogo que aparecer, selecione DW4_CompassHome2.html. O arquivo DW4_CompassHome2.html ser aberto.
58
Captulo 1
Visualizar as propriedades do site Inicie abrindo o painel Propriedades.

1
Abra o painel Propriedades seguindo um dos procedimentos abaixo:
Escolha Janela > Propriedades. Clique no cone de Mostrar a propriedade, na barra do Iniciador.
Aparecer o painel Propriedades.
rea de visualizao das propriedades opes das propriedades
Inserir uma imagem Inicie utilizando o painel Propriedades para inserir duas imagens na pgina: a imagem de um alpinista e uma imagem de texto.
1
No painel Propriedades, clique no cone de Imagens e certique-se de que o boto de opo Site, localizado na parte superior deste painel esteja selecionado, para que todas as imagens do site Compass estejam visveis. Na lista de nomes, selecione o cone da imagem correspondente a climber.jpg e, em seguida, arraste-o para a clula intermediria da tabela, do lado direito da pgina.
59
Pressione a tecla de seta direita (este procedimento cancelar a seleo da imagem do alpinista e colocar o ponto de insero aps a mesma) e, em seguida, pressione as teclas Shift e Enter (no Windows), ou Shift e Return (no Macintosh), para inserir uma quebra de linha. Na lista de nomes, selecione o arquivo featureText.gif e, em seguida, arraste-o para a quebra de linha que criou, colocando a imagem featureText abaixo da imagem do alpinista.
Inserir um filme Flash Agora, voc adicionar um tipo diferente de propriedade. Voc arrastar um lme Flash para a clula abaixo dos botes de navegao.
1
Clique no cone do Flash, no painel Propriedades, para visualizar todos os arquivos Flash do site Compass. Na lista de nomes, clique no arquivo welcome.swf, para selecionar o lme Flash que deseja inserir no documento. Na rea de visualizao do painel Propriedades, voc ver o alocador de espao do lme Flash.
Clique no boto Executar, na rea de visualizao do painel Propriedades, para visualizar o lme Flash.
boto Executar
Na lista de nomes, arraste o arquivo Welcome.swf para a clula abaixo do boto de navegao "Trip Planner". Aparecer um alocador de espao para o lme Flash na clula selecionada.
60
Captulo 1
Aplicar uma cor utilizando o painel Propriedades As cores que forem aplicadas aos elementos HTML, como ao texto ou ao fundo, sero automaticamente adicionadas categoria Cores no painel Propriedades. possvel selecionar uma cor no painel Propriedades e aplic-la ao texto na mesma pgina ou em outras pginas do site.
1
Coloque o ponto de insero depois da imagem do alpinista, pressione a tecla Enter (no Windows), ou a tecla Return (no Macintosh), para adicionar um novo pargrafo e, em seguida, digite Yosemite. Clique duas vezes em Yosemite, para selecionar o texto. No painel Propriedades, clique no cone de Cores, para visualizar as cores HTML no site Compass. Na lista de valores, selecione o cone de cor correspondente a #993300 e, em seguida, arraste-o para o texto selecionado, para aplicar a cor.
2 3
Criar uma lista de propriedades favoritas Utilize o painel Propriedades para gerenciar as propriedades. possvel criar o seu prprio grupo de propriedades favoritas no painel Propriedades. A seguir, voc ir adicionar o logotipo e imagem dos botes de navegao do Compass sua lista Favoritos do site.
1 2
No painel Propriedades, selecione o cone de Imagens. Na lista de nomes, clique no arquivo compass_logo.gif para selecion-lo e, em seguida, siga um dos procedimentos abaixo: Control e clique (no Macintosh), para utilizar o menu contextual e, em seguida, selecione Adicionar pasta Favoritos.
Clique com o boto direito do mouse (no Windows), ou pressione a tecla Clique no cone de Adicionar pasta Favoritos, localizado no canto inferior
direito do painel Propriedades. Voc ser alertado que a propriedade selecionada foi adicionada lista Favoritos do site.
3
Clique em OK.
61
Adicionar diversas imagens lista Favoritos Agora, voc adicionar as imagens dos botes de navegao lista Favoritos. possvel selecionar diversas imagens no painel Propriedades e, em seguida, adicion-las simultaneamente lista Favoritos.
1
Na lista de imagens do painel Propriedades, clique na imagem do primeiro boto de navegao (MenuDestinations.gif ). Selecione os outros botes de navegao, seguindo um dos procedimentos abaixo: MenuTripPlanner_on.gif (o ltimo boto de navegao da lista), para selecionar todas as imagens dos botes de navegao.
Pressione a tecla Shift (no Windows) e, na lista de imagens, clique no arquivo Pressione a tecla Shift (no Macintosh) e mantenha-na pressionada enquanto
seleciona as imagens correspondentes a cada boto de navegao.
3 4
Clique no cone de Adicionar pasta Favoritos. Na mensagem de alerta, clique em OK.
Visualizar as propriedades favoritas possvel visualizar as propriedades que tiverem sido adicionadas lista Favoritos e utilizar esta visualizao para inserir as propriedades no documento.
Para visualizar as imagens que tiver adicionado lista Favoritos, clique no boto
de opo Favoritos, situado na parte superior do painel Propriedades.
Inserir objetos Flash

Os objetos Flash so pequenos arquivos grcos SWF (Shockwave) que podem ser criados enquanto voc trabalha no Dreamweaver. possvel criar objetos de texto e botes Flash. A utilizao de texto Flash permite desenhar pginas da Web contendo fontes diferentes do padro, dispensando qualquer preocupao com as fontes que os visitantes ao site tero disponveis nos seus computadores. Os botes Flash so criados a partir de modelos Flash enviados com o Dreamweaver. possvel personalizar com facilidade um boto de modelo e adicion-lo s suas pginas da Web.
62
Captulo 1
Criar um objeto de texto Flash Agora, voc criar um objeto de texto Flash para ser utilizado como ttulo da sua home page.
1
Na janela do documento, coloque o ponto de insero acima da imagem do alpinista. No painel Objetos, clique no cone de Inserir texto Flash.
Aparecer a caixa de dilogo Inserir texto Flash.
Na caixa de dilogo Inserir texto Flash, dena as seguintes opes:
Em Fonte, selecione Verdana ou escolha uma de suas fontes favoritas. Em Tamanho, digite 18. Em Cor, clique na caixa de cores e, em seguida, utilize o conta-gotas para
selecionar uma cor amarronzada para o texto do cabealho do documento.
Em Cor da imagem cambivel, clique na caixa de cores; em seguida, mova o

conta-gotas at a janela do documento e selecione a cor dourada para o fundo da tabela.
No campo Texto, digite Destino principal. No campo Salvar como, digite myText.swf.
4
Clique em OK, para fechar a caixa de dilogo Inserir texto Flash.
63
Visualizar o objeto de texto Flash no documento O objeto de texto Flash aparecer no documento. necessrio executar o objeto Flash para examinar o efeito cambivel do texto.
1
Se o inspetor de propriedades ainda no estiver expandido, clique na seta de expanso para examinar tudo. No inspetor de propriedades do texto Flash, clique em Executar. Na janela do documento, passe o ponteiro do mouse sobre o objeto de texto Flash. Para interromper a execuo do objeto, clique em Parar, no inspetor de propriedades.
2 3 4
Criar um objeto de boto Flash Veja como fcil adicionar um boto Flash a um documento. Voc criar um boto Flash e o adicionar abaixo da imagem do alpinista.
1
Na janela do documento, coloque o ponto de insero onde deseja inserir o objeto, abaixo da imagem do alpinista e, em seguida, no painel Objetos, clique no cone de Inserir boto Flash. Aparecer a caixa de dilogo Inserir boto Flash.
Na caixa de dilogo Inserir boto Flash, dena as seguintes opes: Na lista de estilos, selecione "Beveled Rect-Bronze". Em Texto do boto, digite Mais detalhes. Em Fonte, selecione Verdana ou escolha uma de suas fontes favoritas. Em Tamanho, digite 11. Clique em Aplicar, para inserir o boto Flash no documento. Em Salvar como, digite myButton.swf
64
Captulo 1
Clique em OK, para fechar a caixa de dilogo. O objeto de boto Flash aparecer no documento.
Visualizar o boto Flash no documento Como o boto Flash que voc inseriu apresenta um efeito cambivel, examine-o, para ver a sua aparncia.
1
No inspetor de propriedades do boto Flash, clique em Executar, para executar o boto no documento. Na janela do documento, passe o ponteiro do mouse sobre o objeto, para examinar o efeito cambivel do boto Flash. Para interromper a execuo do objeto, clique em Parar, no inspetor de propriedades.
Criar um modelo
Os modelos podem ser utilizados para criar os documentos que tenham uma estrutura e aparncia semelhantes. Eles so teis quando for necessrio assegurar que todas as pginas em um site compartilhem determinadas caractersticas. Quando apenas um modelo for aplicado a um grupo de pginas, as informaes nelas contidas podero ser alteradas atravs da edio do modelo e de sua reaplicao nas pginas. Enquanto os elementos especcos de uma pgina (como o texto que descreve um item para venda) permanecem inalterados, os elementos comuns do modelo (como as barras de navegao) so atualizados em todas as pginas que o utilizarem. A pgina de destinos de viagem Compass se vincula a diversas pginas de detalhes sobre viagens que descrevem os locais que poderiam interessar aos visitantes do site. Voc utilizar o desenho de uma pgina existente de detalhes de viagem para criar um modelo. A utilizao de um modelo garante que as pginas de informaes de viagem tero um layout e formato idnticos.
65
Criar um modelo a partir de uma pgina existente Nesta seo, voc criar um modelo a partir de uma pgina de viagem j existente e o utilizar para criar novas pginas de viagem.
1
Na lista de pastas locais da janela do site, clique duas vezes no cone correspondente ao arquivo DW4_TravelDetail_surf.html, para abri-lo. Escolha Arquivo > Salvar como modelo. Aparecer a caixa de dilogo Salvar como modelo.
Os modelos existentes (travelDetail e travelDetail_v2) foram criados e aplicados s pginas de viagem concludas do site Compass. Voc criar a sua prpria verso deste modelo.
3
No campo Salvar como, altere o nome do modelo: digite myTravelDetail e clique em Salvar. Na janela do documento, um novo documento substituir o documento DW4_TravelDetail. Na barra de ttulo do documento, observe que o documento contm um identicador de modelo <<Template>> e uma extenso de arquivo de modelo do Dreamweaver (.dwt).
Modificar o modelo A esta altura, o novo modelo idntico pgina a partir da qual foi salvo. Os modelos contm regies bloqueadas e editveis. As regies bloqueadas podem ser editadas apenas no modelo. As regies editveis so alocadores de espao para o contedo exclusivo de cada pgina que utiliza esse modelo. No modelo, os botes correspondentes ao logotipo e aos botes de navegao no so editveis, ao passo que o ttulo do destino, o anncio relacionado e a descrio dos destinos, so.
66
Captulo 1
A primeira etapa ser a criao de regies editveis no modelo.

1
No modelo myTravelDetail.dwt, na janela do documento, clique no alocador de espao Flash mais ao alto, para selecion-lo; este lme exibir o ttulo do destino.
Escolha Modicar > Modelos > Nova regio editvel. Aparecer a caixa de dilogo Nova regio editvel. No campo Nome, digite titleCell como nome desta regio do modelo.
Clique em OK. Ser criada uma regio de modelo. Observe a guia que contm o nome da regio do modelo. O alocador de espao tambm circundado por uma linha azul-clara, que identica os limites da rea editvel.
Na janela do documento, selecione o alocador de espao do anncio Flash e, em seguida, escolha Modicar > Modelos > Nova regio editvel, para tornar editvel esta regio do modelo. No campo Nome da caixa de dilogo Nova regio editvel, digite adCell e, em seguida, clique em OK. Os identicadores de rea do modelo aparecero no documento. Na janela do documento, selecione todo o texto da primeira clula abaixo do anncio e, em seguida, escolha Modicar > Modelos > Nova regio editvel, para tornar editvel esta rea do modelo. No campo Nome da caixa de dilogo Nova regio editvel, digite textCell1e, em seguida, clique em OK. Na janela do documento, selecione todo o texto da segunda clula abaixo do anncio e, em seguida, escolha Modicar > Modelos > Nova regio editvel, para tornar editvel esta seo do modelo.
67
10
No campo Nome da caixa de dilogo Nova regio editvel, digite textCell2 e, em seguida, clique em OK. Escolha Arquivo > Salvar, para salvar o arquivo do modelo.
11
Aplicar o modelo a uma nova pgina Como as regies editveis do modelo j esto denidas, voc utilizar o modelo para criar uma pgina de detalhes de uma viagem Nova Zelndia.
1 2 3 4
Escolha Arquivo > Novo a partir de modelo, para abrir um novo documento. Escolha Janela >Propriedades, para abrir o painel Propriedades. Clique no cone de Modelos, para examinar os modelos do site Compass. Na lista de nomes, selecione o modelo myTravelDetail e, em seguida, arraste o cone para o novo documento. O modelo ser aplicado ao novo documento.
Esta pgina contm as mesmas regies e contedo que o modelo por voc criado.
Nota: Se voc mover o ponteiro do mouse para uma regio no-editvel deste modelo (como as reas correspondentes ao logotipo ou aos botes de navegao), o ponteiro ser alterado, indicando a impossibilidade de acesso regio bloqueada.
Salve o documento e nomeie o arquivo como myTravelDetail_mtnBike.html.
68
Captulo 1
Como editar uma pgina baseada em modelo Agora, voc atualizar o documento myTravelDetail_mtnBike.html, atualizando as regies editveis com propriedades e texto que se referem aos detalhes de viagens envolvendo ciclismo rstico na Nova Zelndia.
1
Na janela do site, clique no alocador de espao Flash, situado na regio titleCell, para selecionar o objeto a ser substitudo. No campo Arquivo, no inspetor de propriedades, clique no cone correspondente pasta; em seguida, na caixa de dilogo que aparecer, navegue at Assets/swfs e selecione text_mtnBike.swf. Na regio adCell, clique no alocador de espao Flash, para selecionar o objeto a ser substitudo. No campo Arquivo, no inspetor de propriedades, clique no cone correspondente pasta; em seguida, na caixa de dilogo que aparecer, navegue at Assets/swfs e selecione bikeAd.swf. Escolha Arquivo > Abrir e, em seguida, navegue at o arquivo DW4_MtnBikeText.txt, para abrir o documento que contm o texto correspondente a este destino. No arquivo DW4_MtnBikeText.txt, copie o pargrafo do texto abaixo de "Cell 1" (Clula 1); no documento myTravelDetail_mtnBike, substitua o texto da regio textCell1 selecionando-o e, em seguida, colando o texto copiado. No arquivo DW4_MtnBikeText.txt, copie o pargrafo do texto abaixo de "Cell 2" (Clula 2); no documento myTravelDetail_mtnBike, substitua o texto da regio textCell2 selecionando-o e, em seguida, colando o texto copiado. As informaes dos detalhes de viagem sero atualizadas. Feche o arquivo DW4_MtnBikeText.text. No campo Ttulo da barra de ferramentas do Dreamweaver, digite Ciclismo na Nova Zelndia. Salve o documento.
8 9
10
69
Verificar o site
Antes de enviar as pginas para um servidor remoto, verique sempre os arquivos. At agora, voc aprendeu como testar as pginas, visualizando-as em um navegador. Agora, voc conhecer outras ferramentas do Dreamweaver, que se encontram disponveis para criar o acompanhamento de um arquivo e para testar as pginas. Inicialmente, voc aprender como adicionar uma Design Note a um arquivo e, em seguida, como executar um relatrio sobre os arquivos do site. Criar uma Design Note As Design Notes constituem uma maneira inteligente de gerenciar o site, atravs da incluso de comentrios na janela do site do documento. Utilize as Design Notes para programar o trabalho de produo, incluir acompanhamento nos arquivos ou comunicar detalhes sobre arquivos ou sobre o site aos outros membros da equipe. A seguir, voc criar uma Design Note para programar o acompanhamento de uma alterao a uma pgina do site.
1
Na janela do site do Dreamweaver (Site > Arquivos do site), no painel Pasta local, selecione DW4_Destinations.html. No menu principal, escolha Arquivo > Design Notes. Aparecer a caixa de dilogo Design Notes. Na guia Informaes bsicas, no menu pop-up Status, selecione Necessita de ateno. Clique no cone de calendrio, para adicionar a data ao campo Notas. Clique no campo Notas e, em seguida, digite necessrio criar a pgina do Pico do Papagaio e adicionar links aos documentos. Selecione a opo Mostrar quando o arquivo estiver aberto, de maneira que a Design Note seja aberta automaticamente quando esta pgina for aberta.
4 5
70
Captulo 1
Clique em OK, para fechar a caixa de dilogo. Aparecer um cone de Design Note na coluna Notas, no painel Pasta local.
Na janela do site, selecione o arquivo DW4_Destinations.html e abra-o. O documento e as Design Note a ele associadas sero abertos; fcil vericar as aes necessrias neste arquivo.
Relatrios do site inteiro possvel executar relatrios do site, para vericar as condies dos arquivos HTML e para gerenciar o uxo de trabalho. Execute relatrios no nvel do documento, pasta ou site. Voc executar um relatrio para vericar se h qualquer documento sem ttulo no site.
1
Escolha Site > Relatrios. Aparecer a caixa de dilogo Relatrios. Na caixa de dilogo Relatrios, no menu pop-up Relatrio sobre, selecione a opo Todo o site local; em seguida, em Relatrios HTML, selecione a opo Documento sem ttulo. Clique em Executar, para executar o relatrio. Aparecer a caixa de dilogo Resultados, que apresenta uma listagem dos documentos sem ttulo de pgina.
71
Na lista de arquivos, clique no arquivo, para selecion-lo. O campo Descrio detalhada ser atualizado com as informaes detalhadas de advertncia.
Clique em Abrir o arquivo, para abrir o arquivo e corrigir o problema. O arquivo ser aberto. No campo Ttulo da barra de ferramentas do Dreamweaver, digite Destinos principais. Salve e feche o arquivo quando tiver concludo. Feche a caixa de dilogo Resultados.
7 8
As prximas etapas
Parabns, voc concluiu o tutorial do Dreamweaver. Voc j sabe como desenhar pginas, adicionar contedo e testar as pginas. Se desejar, voc poder continuar a criar pginas e links para o site Compass. Voc sabe como cumprir todas as etapas necessrias para concluir as pginas (alternativamente, utilize as pginas concludas como referncia). Depois de atualizar as pginas, visualize-as para testar as imagens cambiveis e links, certicando-se de que estejam funcionando. Se desejar se informar mais sobre como utilizar o Dreamweaver, tente as lies do Dreamweaver; no menu principal do Dreamweaver, escolha Ajuda> Lies e, em seguida, selecione uma lio. Se tiver uma cpia do Dreamweaver e do Fireworks e desejar aprender como trabalhar com estas ferramentas em conjunto, consulte os tutoriais do Dreamweaver e do Fireworks. Se estiver interessado em aprender mais sobre como utilizar os cdigos HTML e JavaScript ou as folhas de estilos em cascata (CSS), consulte o material de referncia enviado com o Dreamweaver. Escolha Janelas > Referncia.
72
Captulo 1
CAPTULO 2
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Princpios bsicos do Dreamweaver
O trabalho inicial com o Macromedia Dreamweaver to fcil quanto abrir ou criar um novo documento HTML. No entanto, para tirar o melhor proveito da experincia com o Dreamweaver, voc dever compreender os conceitos bsicos subjacentes rea de trabalho do programa e saber escolher as opes, utilizar os inspetores e painis e denir as preferncias mais adequadas ao seu estilo de trabalho.
73
Sobre a rea de trabalho do Dreamweaver

A rea de trabalho do Dreamweaver adapta-se a diversos estilos de trabalho e nveis de experincia. Eis alguns dos componentes mais comumente utilizados:
Barra de ferramentas
painel Objetos
menu contextual
janela do documento
seletor de tags
barra do Iniciador inspetor de propriedades
A janela do documento exibe o documento atual medida que criado e

editado.
A barra do Iniciador, situada na parte inferior direita da janela do documento,

contm botes para abrir e fechar os inspetores e painis utilizados mais freqentemente. Os cones da barra do Iniciador tambm aparecem no Iniciador, um painel utuante que pode ser selecionado no menu Janela. possvel especicar os cones que aparecero no Iniciador e na barra do mesmo, denindo as preferncias dos painis.
A barra de ferramentas contm botes e menus pop-up que permitem visualizar

a janela do documento de diversas maneiras, denir as opes de visualizao e acessar algumas operaes comuns como, por exemplo, visualizar um documento em um navegador.
Os menus contextuais facilitam o acesso rpido a comandos teis relacionados

seleo ou rea atual. Para exibir um menu contextual, clique com o boto direito do mouse no item de uma janela (no Windows), ou pressione a tecla Control e clique no item (no Macintosh).
74
Captulo 2
O painel Objetos contm botes para criar e inserir diversos tipos de objetos,
como imagens, tabelas, camadas e molduras. Tambm possvel alternar da visualizao padro para a de layout e acessar as ferramentas de desenho da visualizao de layout.
O inspetor de propriedades exibe as propriedades do objeto ou texto

selecionado e permite modic-las (as propriedades que aparecero no inspetor dependero do objeto ou texto selecionado).
O Dreamweaver tambm conta com muitos outros inspetores, painis e janelas

que no so mostradas aqui, como o painel Histrico e o inspetor de cdigo. Muitos destes itens podem ser encaixados ou seja, possvel combinar janelas, inspetores e painis em janelas com guias. Para abir as janelas, inspetores e painis do Dreamweaver, utilize o menu Janela. Uma marca de seleo prxima a um item no menu Janela indica que o item com nome est aberto (apesar de poder estar oculto atrs de outras janelas). Para exibir um item que no se encontra aberto, escolha o nome do mesmo no menu. Se um painel ou inspetor estiver marcado mas no estiver sendo exibido, escolha Janela > Organizar os painis.
Sobre as diversas visualizaes no Dreamweaver

O Dreamweaver permite trabalhar em um documento de diversas maneiras utilizando a visualizao do projeto, visualizao do cdigo ou uma combinao das duas, que exibir o projeto e o cdigo do documento. possvel alterar a visualizao na qual est trabalhando, selecionando um tipo de visualizao, na barra de ferramentas do Dreamweaver. Para obter mais informaes, consulte Como utilizar a barra de ferramentas na pgina 80. Como trabalhar com a visualizao de cdigo Durante a criao e o trabalho com os documentos, o Dreamweaver gera automaticamente o respectivo cdigo-fonte HTML subjacente. Para examinar ou editar este cdigo, utilize um dos editores de cdigo do Dreamweaver: a visualizao de cdigo apresentada na janela do documento ou o inspetor de cdigo. Para obter informaes mais detalhadas, consulte Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) na pgina 361.
75
Como trabalhar com a visualizao do projeto A visualizao do projeto do Dreamweaver exibe uma representao visual do documento, em vez do cdigo a ele subjacente. No trabalho com a visualizao do projeto, existem duas visualizaes nas quais possvel desenhar a visualizao de layout e a visualizao padro. Estas visualizaes podem ser selecionadas no painel Objetos, abaixo de Exibir. Na visualizao de layout possvel projetar o layout de uma pgina e inserir imagens, texto e outros elementos de mdia. Para obter mais informaes, consulte Como projetar o layout de pgina na pgina 177. Trabalhe na visualizao padro para inserir camadas, criar documentos com molduras, criar tabelas ou utilizar outros recursos que no esto disponveis na visualizao de layout. Para trabalhar na visualizao padro, clique no cone a ela correspondente, no painel Objetos. A janela do documento Na visualizao do projeto, a janela do documento exibe o documento aproximadamente da maneira como ele aparecer em um navegador da Web. A barra de ttulo da janela do documento exibe o ttulo da pgina e, entre parnteses, os nomes da pasta raiz e do arquivo, alm de um asterisco, se o arquivo contiver alteraes que ainda no tiverem sido salvas. A barra de status, localizada na parte inferior da janela do documento, fornece informaes adicionais sobre o documento que voc estiver criando.
Tamanho do documento e tempo estimado de download
seletor de tags
menu pop-up Tamanho da janela
barra do Iniciador
O seletor de tags exibe os tags-pais HTML que controlam o texto e objetos selecionados. Clique em um destes tags para realar o seu contedo na janela do documento. Clique em <body>, para selecionar o corpo inteiro do documento. O menu pop-up Tamanho da janela permite redimensionar a janela do documento de acordo com dimenses pr-determinadas ou personalizadas. Consulte Como redimensionar a janela do documento na pgina 77. direita do menu pop-up Tamanho da janela, so exibidos o tamanho estimado do documento e o tempo estimado de download da pgina, incluindo todos os arquivos dependentes, como imagens e outros arquivos de mdia. Consulte Como vericar o tempo e o tamanho do download na pgina 549
76
Captulo 2
A barra do Iniciador aparece na parte inferior da janela do documento. Por padro, os botes da barra do Iniciador abrem a janela Site, os painis Propriedades, Estilos HTML, Estilos CSS, Comportamentos, Histrico, e o inspetor de cdigo. Para especicar que botes aparecero na barra do Iniciador (e no Iniciador utuante), consulte Como personalizar a barra do Iniciador na pgina 80. Como redimensionar a janela do documento A barra de status da janela do documento exibe as dimenses da janela (em pixels). Se voc clicar neste tamanho de janela, o Dreamweaver exibir o menu pop-up Tamanho da janela, que permite denir o tamanho da janela, a m de ajust-la a diversos tamanhos comuns de monitor. Para criar uma pgina de maneira que a sua aparncia seja a melhor em um determinado tamanho, possvel ajustar a janela do documento a qualquer um dos tamanhos pr-determinados, editar estes tamanhos ou criar novos tamanhos.
Nota: O tamanho dado da janela corresponde s dimenses internas da janela do navegador, sem bordas; o tamanho do monitor est listado entre parnteses. Por exemplo: seria recomendvel utilizar o tamanho 536 x 196 (640 x 480, padro) se for provvel que os visitantes ao seu site estejam utilizando o Microsoft Internet Explorer ou o Netscape Navigator nas suas configuraes padro em um monitor de 640 x 480 pixels. Para redimensionar a janela do documento de acordo com um tamanho prdeterminado:
Escolha um dos tamanhos no menu pop-up situado na parte inferior da janela do documento.
77
Para alterar os valores na lista do menu pop-up Tamanho da janela:
1 2
Escolha Editar os tamanhos, no menu pop-up Tamanho da janela. Clique em qualquer dos valores de largura e altura na lista Tamanhos de janela, e digite um novo valor. Para que a janela do documento se ajuste a uma largura especca (mantendo a altura inalterada), selecione um valor de altura e exclua-o.
Clique no campo Descrio, para inserir um texto descritivo sobre um tamanho especco. Clique em OK para salvar a alterao e retornar janela do documento.
Para adicionar um novo tamanho ao menu pop-up Tamanho da janela:
1 2 3
Escolha Editar os tamanhos, no menu pop-up Tamanho da janela. Clique no espao em branco abaixo do ltimo valor na coluna Largura. Digite os valores de Largura e Altura. Para denir apenas os valores de Largura ou de Altura, basta deixar um campo vazio. Clique no campo Descrio, para inserir um texto descritivo sobre o tamanho adicionado. Clique em OK para salvar a alterao e retornar janela do documento. Por exemplo: voc poder digitar SVGA ou PC comum prximo entrada de um monitor de 800 x 600 pixels, e Mac de 17 polegadas prximo entrada de um monitor de 832 x 624 pixels. Observe que a maioria dos monitores pode ser ajustada de acordo com diversas dimenses de pixels.
Como minimizar e restaurar as janelas e painis (apenas para os usurios de PCs) possvel minimizar e restaurar todas as janelas abertas do Dreamweaver janelas de documentos, inspetores e painis.
Para minimizar todas as janelas do Dreamweaver, pressione as teclas Shift+F4

ou selecione Janela > Minimizar todas.
Para restaurar todas as janelas do Dreamweaver, pressione as teclas

Alt+Shift+F4. Se houver pelo menos uma janela aberta, possvel selecionar Janela > Restaurar todas, para restaurar qualquer outra janela.
78
Captulo 2
Como definir as preferncias da barra de status Utilize as preferncias da barra de status para denir as opes da barra de status, situada na parte inferior da janela do documento. Para exibir estas preferncias, escolha Editar > Preferncias e selecione Barra de status.
Tamanhos da janela permite
personalizar os tamanhos da janela que aparecem no menu pop-up da barra de status. Consulte Como redimensionar a janela do documento na pgina 77.
Velocidade da conexo determina a velocidade da conexo (em quilobits por segundo) utilizada no clculo do tamanho do download. O tamanho do download da pgina exibido na barra de status. Quando uma imagem for selecionada, o tamanho do download de imagens e outras propriedades ser exibido no inspetor de propriedades. Mostrar o iniciador na barra de status exibe a barra do Iniciador, na parte inferior da janela do documento. Os botes da barra do Iniciador iniciam janelas, painis e inspetores. O Iniciador contm os mesmos botes (com texto) e funes. Para obter mais informaes, consulte Como personalizar a barra do Iniciador na pgina 80.
Como utilizar a barra do Iniciador A barra do Iniciador contm botes para abrir e fechar vrios painis, janelas e inspetores. Tambm possvel exibir o Iniciador, um painel utuante com botes idnticos.
Para mostrar ou ocultar o Iniciador:
Escolha Janela > Iniciador. Se a barra do Iniciador no aparecer na parte inferior da janela do documento, ative a opo Mostrar o iniciador na barra de status, nas preferncias da barra de status.
Para alterar a orientao do Iniciador, de horizontal para vertical:
Clique no cone de orientao, no canto inferior direito. Para obter mais informaes sobre os itens que podem ser abertos pelos botes padro do Iniciador, consulte Sobre a janela do site na pgina 114, Como utilizar os estilos HTML para formatar o texto na pgina 262, Como utilizar o painel Estilos CSS na pgina 275, O painel Comportamentos na pgina 470, Sobre como automatizar as tarefas na pgina 168, Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) na pgina 361, Como gerenciar e inserir propriedades na pgina 237 e Como utilizar o painel Referncia do Dreamweaver na pgina 358.
79
Como personalizar a barra do Iniciador Utilize as preferncias dos painis para especicar os itens que aparecero na barra do Iniciador e no Iniciador.
Para especificar que botes aparecero na barra do Iniciador e no Iniciador:
Escolha Editar > Preferncias e, em seguida, selecione Painis, na lista de categorias. Os itens selecionados para a exibio no Iniciador e na barra do Iniciador esto listados na caixa Mostrar no Iniciador.
Para adicionar um item ao Iniciador e barra do Iniciador, clique no boto com o sinal de adio (+). Para remover um item do Iniciador e da barra do Iniciador, realce-o e clique no boto com o sinal de subtrao (-). Para alterar a ordem dos itens que aparecem no Iniciador ou na barra do Iniciador, selecione um item da lista e clique em um boto de seta. Por exemplo: para mover um item para o lado direito do Iniciador, mova o item para a parte de baixo da lista.
Clique em OK. O Iniciador e a barra do Iniciador sero alterados, exibindo os itens especicados.
Como utilizar a barra de ferramentas A barra de ferramentas do Dreamweaver contm botes que permitem alternar rapidamente de uma visualizao para outra do documento: de cdigo, do projeto e uma terceira visualizao, que compreende estas duas. A barra de ferramentas tambm contm comandos comuns relacionados visualizao selecionada e ao status do documento. Os itens do menu Opes (o boto localizado direita) sero modicados, dependendo da visualizao selecionada.
Visualizao de cdigo Visualizao do projeto Ttulo do documento Status do arquivo Referncia Menu Opes
Visualizao de cdigo e do projeto
Visualizar no navegador
Navegao do cdigo
Atualizar a visualizao do projeto
Para visualizar ou ocultar a barra de ferramentas, escolha Exibir > Barra de

ferramentas.
80
Captulo 2
Para exibir o cdigo apenas na janela do documento, clique no boto Mostrar a

visualizao de cdigo.
Para exibir uma visualizao que contenha as visualizaes de cdigo e do

projeto, clique no boto Mostrar as visualizaes de cdigo e do projeto. Quando voc selecionar esta visualizao, a opo Visualizao do projeto no alto se tornar disponvel no menu Exibir. Utilize esta opo para especicar a visualizao que aparecer na parte superior da janela do documento.
Para exibir apenas a visualizao do projeto, clique no boto Mostrar a

visualizao do projeto. Tambm possvel acessar estas visualizaes atravs do menu Exibir.
Para digitar o ttulo de um documento, utilize o campo Ttulo.

Se o documento j tiver um ttulo, ele aparecer neste campo.
Para exibir o menu pop-up Status do arquivo, clique no boto do menu Status
do arquivo.
Para visualizar ou depurar o documento em um navegador, clique no boto

Visualizar/depurar no navegador e escolha um dos navegadores que aparecem na lista deste menu pop-up. Para adicionar ou alterar os navegadores que aparecem na lista deste menu, escolha Editar a lista de navegadores.
Para atualizar a visualizao do projeto, clique no boto Atualizar a visualizao

do projeto.
Para acessar o painel Referncia, clique no boto Referncia.

O painel Referncia contm informaes de referncia sobre os cdigos HTML, CSS e JavaScript. Para obter mais informaes, consulte Como utilizar o painel Referncia do Dreamweaver na pgina 358.
Para navegar pelo cdigo, clique no boto Navegao do cdigo. Para obter
mais informaes, consulte Como depurar o cdigo JavaScript na pgina 509.
Para acessar o menu Opes, clique no boto do menu Opes.

O menu Opes apresenta diversas opes para cada visualizao. Para obter mais informaes sobre as opes de visualizao do cdigo, consulte Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) na pgina 361. Para obter mais informaes sobre as opes de visualizao do projeto, consulte Como projetar o layout de pgina na pgina 177.
Nota: Quando a janela do documento exibir ambas as visualizaes, possvel acessar o menu Opes de qualquer uma das visualizaes clicando na visualizao desejada e, em seguida, no menu Opes.
81
Como utilizar os menus contextuais O Dreamweaver utiliza amplamente os menus contextuais, que permitem acessar rapidamente os comandos e propriedades mais teis, relativos ao objeto ou janela que estiver sendo trabalhada. Os menus contextuais apresentam apenas os comandos relacionados seleo em questo.
Para utilizar um menu contextual:
Clique com o boto direito do mouse no objeto ou janela (no Windows), ou pressione a tecla Control e clique no objeto ou janela (no Macintosh). Aparecer o menu contextual correspondente ao objeto ou janela selecionada. Escolha o comando no menu contextual e solte o boto do mouse.
Como utilizar o painel Objetos O painel Objetos contm botes para criar e inserir objetos como tabelas, camadas e imagens. Para mostrar ou ocultar o painel Objetos, escolha Janela > Objetos.
Para inserir um objeto:
Clique no boto correspondente do painel Objetos ou arraste o cone do boto para a janela do documento. Dependendo do objeto, aparecer uma caixa de dilogo de insero de objeto a ele correspondente, que solicitar a seleo ou insero do arquivo ou objeto desejado.
82
Captulo 2
Para ignorar essa caixa de dilogo e inserir um objeto alocador de espao vazio:
Mantenha pressionada a tecla Control (no Windows), ou Option (no Macintosh) enquanto insere o objeto. Por exemplo: para inserir um alocador de espao de uma imagem sem especicar um arquivo de imagem, mantenha pressionada a tecla Control ou Option e clique no boto Imagem.
Nota: Este procedimento no ignora todas as caixas de dilogo. Certos objetos, como barras de navegao, camadas, botes Flash e molduras, entre outros, no inserem alocadores de espao.
Por padro, o painel Objetos contm sete categorias: Caracteres, Comuns, Formulrios, Molduras, Cabealho, Invisveis e Especial. Ele tambm contm botes que alteram a visualizao: Padro e Layout.
A categoria Caracteres contm caracteres especiais, como os smbolos de

direitos autorais e marca registrada, alm de aspas curvas. Observe que possvel que estes smbolos no sejam exibidos corretamente nas verses anteriores 3.0 dos navegadores (Netscape e IE).
A categoria Comuns contm botes para criar e inserir os objetos mais

comumente utilizados, como imagens, tabelas e camadas.
A categoria Formulrios contm botes para criar os formulrios e inserir os

seus elementos.
A categoria Molduras contm estruturas comuns dos conjuntos de molduras. A categoria Cabealho contm botes para adicionar diversos elementos head,
como os tags meta, keywords, e base.
83
A categoria Invisveis contm botes para criar objetos que no so visveis na

janela do navegador, como as ncoras com nome. Escolha Exibir > Auxlios visuais > Elementos invisveis, para exibir os cones que marcam a posio desses objetos. Clique nos cones dos elementos invisveis na janela do documento, a m de selecionar os objetos e alterar as suas propriedades. Consulte Sobre os elementos invisveis na pgina 164.
A categoria Especial contm botes para inserir itens especiais, como

miniaplicativos Java, plug-ins e objetos ActiveX. Para obter mais informaes, consulte Como inserir mdia na pgina 325.
A seo Exibir do painel Objetos permite escolher entre a visualizao Padro

ou Layout. Se a Visualizao de layout for selecionada, tambm ser possvel selecionar as ferramentas de layout Desenhar a clula de layout e Desenhar a tabela de layout. Para obter mais informaes, consulte Como projetar o layout de pgina na pgina 177. Para alternar para outra categoria, utilize o menu pop-up situado no alto do painel. Voc pode modicar qualquer objeto do painel ou criar os seus prprios objetos; consulte Como modicar o painel Objetos na pgina 555 e Como criar um objeto simples na pgina 556. Para obter informaes sobre as opes de cada painel, consulte os tpicos relacionados na Ajuda do Dreamweaver. Algumas conguraes das preferncias gerais afetam o painel Objetos. Para modic-las, escolha Editar > Preferncias e, em seguida selecione Geral.
Ao inserir objetos, como imagens, tabelas, scripts e elementos head, uma caixa
de dilogo solicitar informaes adicionais. possvel suprimir estas caixas de dilogo ao desativar a opo Mostrar a caixa de dilogo quando inserir objetos ou ao manter pressionada a tecla Control enquanto cria o objeto. Ao inserir um objeto com esta opo desativada, sero conferidos valores de atributos padro ao objeto. Utilize o inspetor de propriedades para alterar as propriedades do objeto aps a insero.
A preferncia do painel Objetos permite exibir o contedo do painel Objetos

como apenas texto, apenas cones ou texto e cones.
84
Captulo 2
Como utilizar o inspetor de propriedades O inspetor de propriedades permite examinar e editar as propriedades do elemento selecionado na pgina. Um elemento da pgina um objeto ou texto. possvel selecionar elementos da pgina na janela do documento ou no inspetor de cdigo. Para mostrar ou ocultar o inspetor de propriedades, escolha Janela > Propriedades.
A maioria das alteraes feitas s propriedades ser imediatamente aplicada janela do documento. No caso de algumas propriedades, as alteraes no sero aplicadas enquanto voc no clicar fora dos campos de texto para edio de propriedades, pressionar a tecla Return ou pressionar a tecla de tabulao, para passar a outra propriedade. O contedo do inspetor de propriedades ir variar, dependendo do elemento selecionado. Para obter informaes sobre determinadas propriedades, selecione um elemento na janela do documento e, em seguida, clique no cone da Ajuda, no canto superior direito do inspetor de propriedades. O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas do elemento selecionado. Clique na seta de expanso, localizada no canto inferior direito do inspetor de propriedades, para examinar outras propriedades do elemento. Em alguns poucos casos, possvel que certas propriedades pouco conhecidas no apaream, mesmo no inspetor de propriedades expandido; nestes casos, utilize o inspetor de cdigo ou a visualizao de cdigo, para codicar estas propriedades manualmente.
85
Como utilizar os painis flutuantes de encaixe A maioria dos painis do Dreamweaver podem ser encaixados, ou seja, combinados em um nico painel utuante com diversas guias. Este recurso facilita o acesso s informaes necessrias sem desordenar o seu espao de trabalho. No entanto, o Iniciador, o inspetor de propriedades e a janela do site do site no podem ser encaixados. Agora, os painis e inspetores se encaixam automaticamente uns nos outros, nos lados da tela ou na janela do documento. Isto facilita a mudana e organizao dos diversos painis utuantes e janelas no Dreamweaver.
Para combinar dois ou mais painis, a fim de criar um painel com guias:
Arraste a guia (no a barra de ttulo) de um painel utuante sobre outro painel utuante. Quando aparecer uma borda realada ao redor do painel de destino, solte o boto do mouse. Clique em qualquer guia do painel para trazer o painel correspondente para a frente.
guia do painel Histrico painel Histrico sendo arrastado para o painel Camadas
Como o painel Objetos no possui uma guia, ele no pode ser encaixado com outros painis mediante o arraste; no entanto, possvel combinar outros painis com o painel Objetos, arrastando as guias daqueles sobre este. No entanto, possvel mover os painis com guias para a frente e para trs dos painis utuantes, reorganizando-os de acordo com o uxo de trabalho, utilizando o processo descrito acima.
Para remover um painel de um painel com guias:
Arraste a sua guia para fora da janela.
86
Captulo 2
Como definir as preferncias dos painis Utilize as preferncias dos painis para especicar os painis e inspetores que sempre aparecero na frente das janelas do documento e do site, e quais podero estar obscurecidos. Tambm possvel utilizar as preferncias dos painis para especicar os painis e inspetores que aparecero no Iniciador e na barra do Iniciador.
Para especificar o local em que cada painel aparecer em relao janela do documento:
Escolha Editar > Preferncias e, em seguida, selecione Painis, na lista de categorias. Por padro, todas as janelas , inspetores e painis aparecero na frente da janela do documento.
Cancele a seleo das janelas, inspetores e painis que desejar colocar atrs da janela do documento. Por exemplo: se desejar que a janela do documento obscurea o inspetor de cdigo, cancele a seleo da opo correspondente a este inspetor. A partir de agora, o inspetor de cdigo aparecer na frente da janela do documento somente quando for ativado. Da mesma forma, se preferir que a janela do documento obscurea quaisquer painis utuantes que tiver adicionado ao personalizar o Dreamweaver, cancele a seleo de Todos os outros utuadores.
Sobre o painel Histrico O painel Histrico mostra uma lista com todas as etapas do seu trabalho no documento ativo, desde a criao ou abertura do mesmo. O painel Histrico no mostra as etapas efetuadas em outras molduras, janelas de documentos ou na janela do site. Ela permite desfazer uma ou mais etapas, execut-las novamente e criar novos comandos para automatizar tarefas repetitivas.
Etapas
Controle deslizante (polegar) boto Executar novamente boto Copiar as etapas boto Salvar como comando
O boto deslizante (polegar) do painel Histrico indica inicialmente a ltima etapa efetuada.
87
Como utilizar o painel Histrico O painel Histrico mantm um registro de cada etapa do seu trabalho no Dreamweaver. Utilize o painel Histrico para desfazer diversas etapas simultaneamente. Se desejar desfazer a ltima operao realizada em um documento, escolha Editar > Desfazer, da mesma maneira que faria em qualquer outro aplicativo. O nome do comando Desfazer no menu Editar ser alterado, reetindo a ltima operao efetuada. O painel Histrico tambm permite executar novamente as etapas que j foram executadas e automatizar as etapas, criando novos comandos. Para obter mais informaes, consulte Sobre como automatizar as tarefas na pgina 168.
Para abrir o painel Histrico:
Escolha Janela > Histrico.

Para desfazer a ltima etapa:
Arraste o controle deslizante do painel Histrico uma etapa acima na lista. Esta ao provoca o mesmo efeito que a seleo de Editar > Desfazer. A etapa desfeita se tornar cinza.
Para selecionar 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;
este rolar automaticamente at a etapa, desfazendo etapas medida que rola.
88
Captulo 2
Nota: Para rolar automaticamente at uma determinada etapa, clique esquerda da mesma; a seleo da etapa feita clicando-se sobre a mesma. A seleo de uma etapa diferente da volta etapa no histrico dos comandos Desfazer.
Da mesma maneira que uma nica etapa no pode ser refeita aps uma nova ao, se vrias etapas forem desfeitas, no ser mais possvel refaz-las depois de efetuar uma nova ao no documento, j que elas desaparecero do painel Histrico. O painel Histrico tambm permite repetir as etapas que aparecem no histrico de etapas e automatizar as tarefas que se basearem nas etapas efetuadas.Consulte Sobre como automatizar as tarefas na pgina 168
Para definir o nmero de etapas que o painel Histrico manter e mostrar:
1 2
Escolha Editar > Preferncias e selecione Geral, na lista de categorias. Digite o Nmero mximo de etapas da paleta de histrico. O valor padro dever ser suciente para as necessidades da maioria dos usurios. Quanto mais alto o nmero, maiores sero os requisitos de memria do painel Histrico. Isso poder afetar o desempenho e diminuir signicativamente a velocidade do computador. Quando o painel Histrico atingir este nmero mximo de etapas, as primeiras etapas sero descartadas.
Nota: No possvel reorganizar a ordem das etapas no painel Histrico. No encare o painel Histrico como um conjunto arbitrrio de comandos, mas como uma maneira de exibir as etapas, na ordem em que foram efetuadas. Para apagar a lista de histrico do documento:
No menu contextual do painel Histrico, escolha Limpar o histrico. Este comando tambm limpar todas as informaes relacionadas aos comandos Desfazer do documento; depois de escolher Limpar o histrico, no ser mais possvel desfazer as etapas que tiverem sido limpas. Observe que o comando Limpar o histrico no desfaz etapas; ele simplesmente remove o registro das etapas da memria do Dreamweaver.
89
Como utilizar outros painis do Dreamweaver A rea de trabalho do Dreamweaver compreende vrios outros painis. Destacamos apenas alguns destes painis:
O inspetor de cdigo exibe o cdigo utilizado pelos navegadores para exibir o documento como uma pgina da Web. Para mostrar ou ocultar o inspetor de cdigo, escolha Janela > Inspetor de cdigo.
As modicaes feitas na janela do documento sero transpostas imediatamente para o inspetor de cdigo. Quando voc digitar HTML no inspetor de cdigo e clicar fora do mesmo, as alteraes correspondentes aparecero na janela do documento. Para obter mais informaes, consulte Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) na pgina 361. Para a edio secundria dos tags HTML, possvel utilizar o Editor rpido de tags em vez do inspetor de cdigo. Para exibir o Quick Tag Editor, pressione as teclas Control e T (no Windows), ou Command e T (no Macintosh), ou escolha Modicar > Quick Tag Editor. Para obter mais informaes, consulte Como editar um tag HTML na visualizao do projeto na pgina 369.
O painel Referncia fornece
informaes detalhadas sobre o tag HTML e os respectivos atributos com o qual estiver trabalhando. possvel abrir o painel Referncia a partir do menu Janela, da barra do Iniciador ou do inspetor de cdigo. Por exemplo: possvel selecionar um tag img, clicar no boto Referncia, na barra de ferramentas e, determinar quais atributos se aplicaro a ele (align, border, e assim por diante). Para obter mais informaes, consulte Como utilizar o painel Referncia do Dreamweaver na pgina 358.
O depurador JavaScript do Dreamweaver
permite depurar cdigo JavaScript do cliente. possvel abrir o depurador JavaScript a partir do menu Janela. Para obter mais informaes, consulte Como depurar o cdigo JavaScript na pgina 509.
90
Captulo 2
Como trabalhar com as cores

No Dreamweaver, muitas caixas de dilogo, assim como o inspetor de propriedades de muitos elementos de pginas, contm uma caixa de cores, que abre um seletor de cores. Utilize o seletor de cores para escolher uma cor para um elemento da pgina.
Para escolher uma cor no Dreamweaver:
Clique em uma caixa de cores, em qualquer caixa de dilogo ou no inspetor de propriedades. O seletor de cores aparecer.
caixa de cores do inspetor de propriedades
Siga um dos procedimentos abaixo: cores nas paletas Cubos de cor (padro) e Tom contnuo so aceitas pela Web, enquanto que as cores de outras paletas, no.
Utilize o conta-gotas, para selecionar uma amostra de cor na paleta. Todas as Utilize o conta-gotas para selecionar uma cor de qualquer lugar da tela,
inclusive fora das janelas do Dreamweaver. Se voc clicar na rea de trabalho ou em outro aplicativo, o Dreamweaver selecionar a cor do local clicado, porm possvel alternar para o outro aplicativo; neste caso, clique em uma janela do Dreamweaver, para continuar a trabalhar neste programa, ou mantenha pressionado o boto do mouse enquanto move do Dreamweaver para a rea de trabalho, a m de evitar sair do Dreamweaver.
Para aumentar a seleo de cores, utilize o menu pop-up situado no canto

superior direito do seletor de cores. possvel selecionar Cubos de cor, Tom contnuo, Windows, Mac OS, Tons de cinza e Passar cor aceita pela Web. Observe que as paletas Cubos de cor e Tom contnuo so aceitas pela Web, enquanto que Windows, Mac OS e Tons de cinza, no. Se voc estiver utilizando uma paleta que no for aceita pela Web e, em seguida, escolher Passar cor aceita pela Web, o Dreamweaver substituir a cor selecionada pela cor aceita pela Web mais prxima. Em outras palavras, possvel que a cor no corresponda que for visualizada.
Para limpar a cor sem ter que escolher outra cor, clique no boto Riscado. Para abrir o seletor de cores do sistema, clique no boto Roda de cores.
91
Sobre as cores aceitas pela Web

Em HTML, as cores so expressas como valores hexadecimais (#FF0000, por exemplo) ou como nomes (red). Uma cor aceita pela Web ter a mesma aparncia no Netscape Navigator e no Microsoft Internet Explorer, tanto nos sistemas do Windows quanto do Macintosh que estiverem 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. Contudo, os testes revelam que h somente 216 cores aceitas pela Web. O Internet Explorer no Windows no interpreta corretamente as cores #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) e #33FF00 (51,255,0). No Dreamweaver, as paletas Cubos de cor (padro) e Tom contnuo utilizam a paleta de 216 cores aceitas pela Web; a seleo de uma cor de uma dessas paletas exibir o valor hexadecimal a ela correspondente. Para escolher uma cor fora da faixa de cores aceitas pela Web, abra o seletor de cores do sistema, clicando no boto Roda de cores, situado 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 das verses para Windows e Macintosh. Se a programao for exclusiva para os navegadores do UNIX (ou se o pblico-alvo for composto por usurios do Windows ou Macintosh com monitores de 24 bits e usurios do UNIX com monitores de 8 bits), considere a possibilidade de utilizar os valores hexadecimais que combinam os pares 00, 40, 80, BF ou FF, que produzem as cores aceitas pela Web para o SunOS.
Como definir as preferncias

O Dreamweaver oferece denies de preferncias que controlam a aparncia geral da interface do usurio do programa, bem como as opes relativas a recursos especcos, como as camadas, folhas de estilos, exibio de cdigo HTML e JavaScript, editores externos e visualizao nos navegadores. Este guia do usurio oferece informaes sobre determinadas opes das preferncias, juntamente com o recurso ou tpico associado. Este guia descreve apenas as opes mais comuns das preferncias. Para obter informaes sobre uma determinada opo das preferncias, consulte o tpico correspondente na Ajuda do Dreamweaver.
92
Captulo 2
Como definir as preferncias gerais As preferncias gerais controlam a aparncia geral do Dreamweaver. Para alterar essas preferncias, escolha Editar > Preferncias e, em seguida, clique em Geral. As preferncias gerais dividem-se em duas subcategorias: opes de arquivo e de edio. Para obter informaes detalhadas sobre essas preferncias, consulte a Ajuda do Dreamweaver. Como definir as preferncias de fontes/codificao Utilize as preferncias de fontes/codicao para denir uma codicao da fonte padro nos novos documentos e para denir as fontes que o Dreamweaver utilizar para exibir cada codicao de fonte. A codicao de um documento determinar como o documento ser exibido em um navegador. As denies de fontes do Dreamweaver permitem trabalhar em um texto com a fonte e o tamanho preferidos, sem afetar a aparncia do documento quando este for visualizado por outras pessoas em um navegador.
Para alterar a codificao do documento atual:
Escolha Modicar > Propriedades da pgina e, em seguida, selecione uma codicao no menu pop-up Codicao do documento.
Para alterar a codificao padro a ser utilizada na criao de novos documentos:
Escolha Editar > Preferncias, clique em Fontes/codicao, na lista de Categorias e escolha uma codicao no menu pop-up Codicao padro.
Para definir as fontes a serem utilizadas em cada tipo de codificao:
Escolha Editar > Preferncias e clique em Fontes/codicao, na lista de Categorias. Selecione o tipo de codicao (como Ocidental (Latin1) ou japons, por exemplo) na lista Denies de fontes e, em seguida, escolha as fontes a serem utilizadas na codicao nos menus pop-up de fontes situados abaixo da lista Denies de fontes.
Para obter mais informaes sobre as preferncias de fontes/codicao, consulte a Ajuda do Dreamweaver.
93
Como 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 Como utilizar os editores de HTML externos na pgina 381.
possvel especicar os navegadores preferidos para visualizar o site. Consulte

Como visualizar nos navegadores na pgina 544.
O editor de imagens externo, como Macromedia Fireworks, pode ser iniciado

no Dreamweaver. Consulte Como utilizar um editor de imagens externo na pgina 301.
possvel congurar o Dreamweaver para que inicie um editor diferente, de

acordo com o tipo de arquivo. Consulte Como iniciar um editor externo na pgina 326.
Para obter informaes sobre a incluso de animao no seu site com os lmes
Flash, consulte Sobre o contedo Flash na pgina 328.
Para saber como tornar o site interativo utilizando os lmes Shockwave,

consulte Sobre os lmes Shockwave na pgina 338.
Personalizao bsica no Dreamweaver

Existem algumas tcnicas bsicas que podem ser utilizadas para personalizar o Dreamweaver, a m de adequ-lo s suas necessidades. Por exemplo: ao denir as preferncias, criar os seus prprios atalhos de teclado e adicionar extenses, possvel congurar a sua rea de trabalho, dispensando a necessidade de conhecer cdigos complexos ou de editar arquivos de texto. Para obter mais informaes sobre os recursos avanados de personalizao, consulte Como personalizar o Dreamweaver na pgina 553.
94
Captulo 2
Como utilizar o editor de atalhos de teclado Utilize o editor de atalhos de teclado para criar as suas prprias teclas de atalho, editar os atalhos existentes ou utilizar os conjuntos de atalhos pr-determinados.
Para acessar o editor de atalhos de teclado:
Escolha Editar > Atalhos de teclado. Aparecer a caixa de dilogo Atalhos de teclado, que contm diversas opes que podem ser selecionadas e comandos que podem ser editados.
boto Conjunto duplicado boto Excluir o conjunto boto Salvar como arquivo HTML boto Renomear o cone
Conjunto atual
um menu que exibe os conjuntos de atalhos pr-determinados enviados com o Dreamweaver, assim como qualquer conjunto personalizado que voc tiver denido. Como padro, o conjunto atual aquele que estiver sendo utilizado pelo DW no documento. Os conjuntos pr-determinados se encontram no alto do menu. Se estiver familiarizado com os atalhos do Dreamweaver 3, voc poder utiliz-los escolhendo o conjunto pr-determinado do Dreamweaver 3. Este conjunto apresenta os atalhos correspondentes aos recursos do Dreamweaver 3 e aos novos recursos do Dreamweaver 4.
Comandos
um menu pop-up que permite selecionar a categoria de comando a ser editada. Por exemplo: possvel editar os comandos de menu, como Abrir o arquivo, ou um dos comandos de edio de cdigo, como Ajustar as chaves.
95
Lista de comandos exibe os comandos associados categoria selecionada no menu
pop-up Comandos, assim como os atalhos a eles atribudos. As categorias de comandos Menu e menu Site exibiro esta lista como uma visualizao hierrquica que reete a estrutura dos menus. As outras categorias apresentam listas de comandos, de acordo com os seus nomes (Sair do aplicativo, por exemplo).
Janela de teclados
exibe a lista de atalhos atribudos ao comando selecionado. exibe a nova combinao de teclas a serem digitadas.
Pressionar as teclas
Sinal de adio adiciona
um novo atalho ao comando. Clique no sinal de adio (+), para ativar o campo Atalhos. Digite um novo comando de tecla e clique em Alterar, para adicionar um novo atalho de teclado a este comando. possvel atribuir dois atalhos de teclado diferentes a cada comando.
Sinal de subtrao remove Alterar aplica
o atalho selecionado da lista de atalhos.
o novo atalho ao comando e o adiciona lista de atalhos.
Clique no boto Duplicar, para duplicar o conjunto atual. possvel optar por
dar um nome ao conjunto ou manter o nome padro (o nome atual com o suxo copy).
Clique no boto Renomear, para renomear o conjunto. Clique no boto Salvar como arquivo HTML, para salvar o conjunto em um
formato de tabela HTML, para fcil visualizao e impresso. possvel abrir o arquivo HTML no navegador e imprimir os atalhos, para referncia rpida.
Clique no boto Excluir, para excluir cpias e conjuntos personalizados. No

possvel excluir os conjuntos ativos.
Para remover um atalho de um comando:
No menu pop-up Comandos, selecione a categoria de comando que contm o atalho de comando a ser removido; por exemplo: comandos do menu Site. A lista Comandos exibir os comandos associados quela categoria. Na lista Comandos, selecione o atalho de comando a ser removido. Ser exibida uma lista de atalhos atribudos aos comandos. Selecione os atalhos a serem removidos. Clique no boto com o sinal de subtrao (-).
3 4
96
Captulo 2
Para adicionar um atalho a um comando:
Selecione a categoria de comando que contm o comando desejado. A lista Comandos exibir os comandos associados quela categoria. Na lista Comando, selecione o comando. Na lista atalhos, voc ver os atalhos que j haviam sido atribudos ao comando. Clique no boto com o sinal de adio (+). O campo de entrada Atalhos se tornar ativo e o ponto de insero se mover para o campo Pressionar as teclas. Pressione a combinao de teclas que deseja adicionar; esta a combinao aparecer no campo Pressionar as teclas. Se houver um problema com o atalho (por exemplo: se a combinao de teclas j tiver sido atribuda a um outro comando), aparecer um alerta, que permitir atribuir novamente a combinao de teclas ou cancelar a operao.
Clique em Alterar. A nova combinao de teclas ser atribuda ao comando.
Para editar um atalho j existente:
Selecione a categoria de comando que contm o comando desejado. A lista Comando exibir os comandos na categoria escolhida. Na lista Comando, selecione o comando. No campo Novo atalho, voc ver os atalhos que j haviam sido atribudos ao comando. Se um comando apresentar mais de um atalho a ele atribudo, ser necessrio selecionar o que deseja alterar.
3 4
Clique no campo Pressionar as teclas e digite a combinao de teclas desejada. Clique no boto Alterar, para alterar o atalho.
Nota: Se houver um problema com a combinao de teclas, ser exibida uma mensagem explicativa, logo abaixo do campo Nova entrada de atalho, e talvez no seja possvel adicionar, excluir ou editar o atalho. Por exemplo: se a combinao de teclas j tiver sido atribuda a um outro comando, ser exibido um texto de advertncia logo abaixo do campo Nova entrada de atalho.
97
Como adicionar extenses ao Dreamweaver As extenses so novos recursos que podem ser facilmente adicionados ao Dreamweaver 4. possvel utilizar muitos tipos de extenses; por exemplo: existem extenses que permitem reformatar tabelas, efetuar conexes a bancos de dados auxiliares ou que podem auxili-lo a escrever scripts para navegadores. Para ter acesso s mais recentes extenses para o Dreamweaver, utilize o site de intercmbio da Macromedia na Web, no seguinte endereo: http://www.macromedia.com/exchange/dreamweaver/. 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 Package Manager. necessrio instalar o Package Manager antes de efetuar o download das extenses. O Package Manager funciona juntamente com o Dreamweaver e permite instalar e gerenciar as extenses. Depois de ter efetuado o download do site de intercmbio e instalado o Package Manager, inicie-o diretamente no Dreamweaver, escolhendo Gerenciar as extenses, no menu Comandos.
98
Captulo 2
Para instalar e gerenciar as extenses:
Clique no link de download, localizado no site da Web correspondente extenso desejada. possvel optar por abrir e instal-la diretamente no site ou salv-la em disco.
Se optar por abri-la diretamente, o Package Manager efetuar a instalao

automaticamente.
Se optar por salv-la em disco, salve o arquivo do pacote de extenso (.mxp) na

pasta Downloaded Extensions, abaixo da pasta do Dreamweaver. Por exemplo: Meu computador\c:\Arquivos de programas\Macromedia\Dreamweaver 4\Conguration\Extensions.
2
Clique duas vezes no arquivo do pacote de extenso ou escolha Instalar a extenso, no menu Arquivo do Package Manager. O arquivo ser instalado no Dreamweaver. Algumas extenses no se encontram acessveis enquanto o Dreamweaver no for reinicializado; possvel que haja uma solicitao para que voc saia do aplicativo e o reinicialize.
Utilize o Package Manager para remover extenses ou para examinar as informaes sobre uma determinada extenso.
99
100
Captulo 2
CAPTULO 3
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como planejar e definir o seu site
Um site da Web um conjunto de documentos vinculados com atributos compartilhados, como tpicos relacionados, uma concepo semelhante ou uma nalidade compartilhada. O Macromedia Dreamweaver uma ferramenta de criao e gerenciamento de sites que pode ser utilizada para criar sites da Web completos, alm de documentos individuais. Para obter os melhores resultados, projete e planeje o seu site da Web antes de criar qualquer pgina contida nele.
Nota: Se no for possvel aguardar o momento certo para a criao dos documentos, tente utilizar algumas das ferramentas de criao de documentos do Dreamweaver, para criar um exemplo de documento. Consulte Como criar, abrir e salvar os documentos HTML na pgina 158. Mas no tente criar os documentos definitivos antes de configurar o site.
A primeira etapa para criar um site da Web o planejamento. Consulte Sobre o planejamento e projeto de sites na pgina 101. A etapa seguinte envolve a congurao da estrutura bsica do site; consulte Como utilizar o Dreamweaver para denir um novo site na pgina 108. Se voc j tiver um site em um servidor da Web e desejar utilizar o Dreamweaver para edit-lo, consulte Como congurar um site remoto na pgina 131.
Sobre o planejamento e projeto de sites

No Dreamweaver, o termo site pode se referir a um site da Web ou a um local de armazenamento de documentos pertencentes a um site da Web. Quando comear a pensar na criao de um site da Web, voc deve seguir uma srie de etapas de planejamento para se assegurar que o seu site funcionar. Mesmo se estiver criando apenas uma home page pessoal, que ser vista apenas por amigos e famlia, pode ser vantajoso planejar o site com cuidado, a m de assegurar que todos podero utiliz-lo com sucesso.
101
Como determinar os seus objetivos A deciso de quais sero os objetivos do seu site a primeira etapa na criao de um site da Web. Faa perguntas sobre o site a si mesmo e a seus clientes. O que deseja alcanar possuindo um site da Web? Tome nota de seus objetivos, para que se lembre deles durante o processo de criao. Os objetivos ajudam a concentrar e destinar o seu site da Web s suas necessidades particulares. Um site da Web que proporciona notcias sobre um tema especco deve ter aparncia e navegao diferentes de um site da Web destinado a vender produtos. A complexidade dos seus objetivos afetar a navegao, a mdia utilizada (Flash, Director e assim por diante) e at mesmo a aparncia e impresso causada pelo site. Como escolher um pblico-alvo Aps decidir o que deseja alcanar com o seu site da Web, voc precisar decidir quem deseja que o visite. Esta pode ser uma pergunta pouco importante, j que a maioria das pessoas deseja que todo mundo visite o seu site da Web. No entanto, difcil criar um site da Web que todas as pessoas do mundo iro utilizar. As pessoas utilizam navegadores diferentes, se conectam em velocidades diferentes e podem ou no possuir plug-ins de mdia. Todos estes fatores podem afetar o uso do seu site. Por estes motivos, voc precisa determinar o seu pblico-alvo. Pense nas pessoas que sero atradas ao seu site da Web ou quem espera atrair. Que tipos de computadores voc acredita que elas usaro? Qual ser a plataforma predominante (Macintosh, Windows, Linux, etc.)? Qual a velocidade de conexo mdia (modem 33.6 ou DSL)? Que tipos de navegadores e tamanhos de monitores estas pessoas estaro utilizando? Voc est criando um site de intranet onde todos estaro utilizando o mesmo sistema operacional de computador e o mesmo navegador? Todos estes fatores podem afetar muito a aparncia que a sua pgina da Web tem para os seus visitantes. Depois de ter escolhido o seu pblico e determinado que tipos de computadores, velocidades de conexo e navegadores os seus visitantes utilizaro, voc pode iniciar o seu projeto. Digamos, por exemplo, que o seu pblico-alvo composto predominantemente de usurios que possuem monitores de 17 polegadas e utilizam o Internet Explorer 3.0 ou verses mais avanadas deste. medida que projetar a sua pgina da Web, voc dever testar o funcionamento do site no Internet Explorer da Microsoft num computador com Windows e um tamanho de tela de 800 x 600 pixels. Poucos visitantes devem utilizar o Netscape Navigator numa plataforma Macintosh, mas voc deve assegurar que o seu site funcione nestes tipos de computadores mesmo assim, at mesmo se a exibio no for exatamente a mesma que a do pblico-alvo.
102
Captulo 3
Como criar sites para que haja compatibilidade com o navegador Ao criar um site, voc deve se lembrar de que h vrios navegadores da Web que podero ser utilizados pelos seus visitantes. Se possvel, desenhe sites com ampla compatibilidade com o navegador, levando em considerao as outras restries do projeto. So utilizados cerca de 25 navegadores da Web diferentes, sendo que a maioria deles foi lanada em mais de uma verso. Mesmo que voc vise apenas o Netscape Navigator e Microsoft Internet Explorer, que so utilizados pela maioria dos usurios da Web, lembre-se de que nem todos tm a verso mais recente desses navegadores. Se o site estiver na Web, mais cedo ou mais tarde algum ir visit-lo utilizando o Netscape Navigator 2.0, o navegador que a AOL fornece aos seus clientes ou algum navegador somente de texto como o Lynx. Em algumas circunstncias, no necessrio criar sites compatveis com diversos navegadores. Por exemplo: se o site estiver disponvel apenas na intranet de sua empresa e voc souber que todos os funcionrios utilizam o mesmo navegador, possvel otimizar o site de modo a ser compatvel com esse navegador. Da mesma forma, se for criado contedo HTML para ser distribudo em CD-ROM junto com um navegador, razovel supor que todos os seus clientes tero acesso a esse determinado navegador. Na maioria dos casos, para os sites da Web desenhados para visitas pblicas, conveniente torn-los visveis atravs do maior nmero possvel de navegadores. Escolha um ou dois navegadores como principais e desenhe o site visando-os, mas tente explorar o site com outros navegadores de vez em quando, para evitar incluir muito contedo incompatvel. Tambm possvel enviar uma mensagem para um grupo de discusso, solicitando-lhes que visualizem o seu site. Esta pode ser uma boa maneira de obter comentrios de um pblico variado. Quanto mais sosticado for o site em termos de layout, animao, contedo de multimdia e interao menor ser a probabilidade de que seja compatvel com diversos navegadores. Nem todos os navegadores podem executar o JavaScript, por exemplo. Uma pgina contendo texto simples que no utiliza caracteres especiais ser exibida sem problemas em qualquer navegador, porm essa pgina parecer menos atraente do que aquelas que contm imagens, layout e forem interativas. Tente equilibrar o projeto, para obter o mximo de efeito e compatibilidade com o navegador. Um procedimento til fornecer vrias verses de certas pginas importantes, como a home page do site. Por exemplo: possvel desenhar uma verso com moldura e outra sem moldura dessa pgina. Voc poder incluir na sua pgina da Web um comportamento para direcionar automaticamente os visitantes que no dispuserem de navegadores com suporte a molduras para a verso sem molduras. Para obter mais informaes, consulte Como utilizar as aes de comportamentos enviadas com o Dreamweaver na pgina 478.
103
Como organizar a estrutura do site O cuidado na organizao do site desde o incio pode, posteriormente, evitar frustraes e economizar tempo. Se comear a criar documentos sem pensar em que local da hierarquia da pasta eles devero ser armazenados, possvel que voc tenha que lidar com uma pasta de difcil acesso e com demasiados arquivos, ou que os arquivos relacionados estejam espalhados em pastas com nomes semelhantes. A maneira usual de se congurar um site envolve a criao de uma pasta no disco local, que contm todos os arquivos do site (conhecido como o site local), e a criao e edio de documentos contidos nesta pasta. Quando o site estiver pronto para ser publicado e visualizado pelo pblico, estes arquivos podero, ento, ser copiados para um servidor da Web. Esta abordagem melhor do que criar e editar os arquivos no prprio site pblico ativo da Web, pois ela permite testar as alteraes no site local antes de torn-las publicamente visualizveis e, em seguida, quando o site estiver nalizado, efetuar o upload dos arquivos locais e atualizar todo o site pblico de uma vez s. Consulte Como utilizar o Dreamweaver para denir um novo site na pgina 108, para coordenar o seu site local com o Dreamweaver. Depois que o site local tiver sido denido com o Dreamweaver, voc estar capacitado, entre outras coisas, a gerenciar os arquivos do site, manter um registro dos links e atualizar as pginas.
Classifique o seu site em categorias. Coloque na mesma pgina as pginas que se relacionarem. Por exemplo: os press releases, informaes de contato e oportunidades de empregos em sua empresa podero ser armazenados em uma pasta, enquanto que as pginas relativas ao seu catlogo on-line podero ser armazenadas em outra pasta. Sempre que necessrio, utilize subpastas. Este tipo de organizao facilitar a manuteno e navegao do seu site.
104
Captulo 3
Decida onde colocar itens como imagens e arquivos de som. Por
exemplo: conveniente colocar todas as imagens em um nico local, para facilitar a localizao das mesmas quando forem inseridas em uma pgina. Algumas vezes, os criadores colocam todos os itens a serem utilizados em um site e que no forem HTML em uma pasta denominada Propriedades. possvel que esta pasta contenha outras pastas (para imagens, lmes Shockwave e arquivos de som, por exemplo). Alternativamente, possvel que haja uma pasta Propriedades para cada grupo de pginas relacionadas no site, se os diversos grupos no compartilharem muitas propriedades.
Site 1 Site 2
meu_site1 (pasta raiz)
meu_site2 (pasta raiz)
Sobre_a_empresa
Sobre_a_empresa
Catlogo
Propriedades
Propriedades (do site inteiro)
Catlogo
ndice.html (home page)
Propriedades
Utilize a mesma estrutura nos sites locais e remotos. O site local e o site remoto na
Web devero ter exatamente a mesma estrutura. Se voc criar um site local utilizando o Dreamweaver e, em seguida, efetuar o upload de tudo para o site remoto, o Dreamweaver se encarregar de duplicar com exatido a estrutura local no site remoto.
105
Como criar a sua aparncia de desenho Muito tempo ser economizado no processo, se o seu desenho e layout forem planejados antes de iniciar o trabalho no Dreamweaver. Pode ser to simples como criar um desenho de prottipo de acordo com a aparncia desejada do layout do site numa folha de papel. Uma abordagem mais avanada seria criar um desenho composto do site, utilizando aplicativos como o Macromedia Freehand ou Fireworks. O importante ter um prottipo do layout e desenho, para que este possa ser seguido mais tarde, quando o site estiver sendo construdo. importante manter a coerncia no layout e projeto da sua pgina. do seu interesse que os usurios possam clicar nas pginas do seu site sem carem confusos, porque todas as pginas tm uma aparncia diferente ou a navegao est posicionada num local diferente em cada pgina. Como projetar o esquema de navegao Um outro aspecto em que o planejamento de sites apresenta vantagens a navegao. medida que cria o seu site, pense na experincia que voc deseja proporcionar aos visitantes. Pense em como um visitante ao seu site poder se mover de uma rea para outra. Considere os seguintes aspectos:
Voc est aqui. Os visitantes devem saber facilmente onde esto no seu site e como retornar pgina de nvel superior. A busca e os ndices facilitam
a localizao de quaisquer informaes buscadas
pelos visitantes.
Os comentrios fornecem uma maneira atravs da qual os visitantes podem entrar em contato com o webmaster (quando necessrio) e com outras pessoas relevantes associadas empresa ou ao site, caso haja qualquer problema com o site.
Projete a aparncia da sua navegao. A navegao deve ser coerente no site inteiro. Se uma barra de navegao for colocada no alto da sua home page, procure mant-la nesta posio em todas as pginas vinculadas. O Dreamweaver possui duas ferramentas de navegao que podem ser utilizadas para criar o esquema de navegao. Para obter mais informaes, consulte Links e navegao na pgina 385.
106
Captulo 3
Como planejar e reunir as propriedades Depois que souber a aparncia que o desenho e layout tero, possvel criar e reunir as propriedades que sero necessrias. As propriedades podem ser itens como imagens, texto ou mdia (Flash, Shockwave, entre outros). Antes de comear a desenvolver o site, assegure-se de ter todos estes itens reunidos e prontos para serem utilizados. Seno, voc ter que parar sempre o desenvolvimento, para localizar uma imagem ou criar um boto. Se estiver utilizando imagens e grcos de um site de clip-art ou eles estiverem sendo criados por alguma outra pessoa, assegure-se de reuni-los e coloc-los numa pasta do site (consulte Como organizar a estrutura do site na pgina 104). Se estiver criando as propriedades voc mesmo, assegure-se de cri-las antes de iniciar o desenvolvimento, incluindo todas as imagens necessrias, se estiver utilizando imagens cambiveis. Em seguida, organize as propriedades, para que possa acesslas facilmente enquanto estiver criando o site no Dreamweaver. O Dreamweaver pode facilitar a reutilizao de layouts e elementos de pgina em vrios tipos de documentos, atravs da utilizao de modelos e bibliotecas. No entanto, mais fcil criar novas pginas com modelos e bibliotecas do que apliclos a documentos existentes.
Utilize os modelos,
se souber que muitas de suas pginas utilizaro o mesmo layout. Planeje e projete um modelo para tal layout e, em seguida, voc poder criar novas pginas a partir do modelo. Se decidir alterar o layout de todas as pginas, basta alterar o modelo.
Nota: Existem algumas restries quanto s alteraes que podem ser feitas aos documentos que se baseiam em modelos. O melhor aproveitamento que se pode dar aos modelos ocorre em ambientes de colaborao, para garantir que todos estejam utilizando o mesmo layout de pgina. possvel que os itens de biblioteca ofeream uma maior flexibilidade de uso fora dos ambientes de colaborao. Utilize itens de biblioteca, se voc j souber que determinadas imagens ou outros elementos aparecero em muitas pginas do site. Crie estes elementos com antecedncia e transforme-os em itens de uma biblioteca. Se estes itens forem alterados posteriormente, a nova verso atualizada aparecer em todas as pginas que os utilizarem.
Para obter mais informaes sobre como reutilizar os layouts e elementos de uma pgina, consulte Como reutilizar o contedo com os modelos e bibliotecas na pgina 409.
107
Como utilizar o Dreamweaver para definir um novo site

Depois que a estrutura do site tiver sido criada (consulte Como organizar a estrutura do site na pgina 104), voc dever designar o novo site no Dreamweaver. A congurao deste site local no Dreamweaver signica que o programa pode ser utilizado com FTP para efetuar o upload do site para um servidor da Web, controlar automaticamente e manter os links e arquivos compartilhados em colaborao. melhor denir o site local no Dreamweaver antes de iniciar a criao das pginas. O site local a estrutura do site que voc dene no seu computador para conter todas as suas pastas, propriedades e arquivos de um determinado site (consulte Como organizar a estrutura do site na pgina 104). A pasta raiz local do site dever se a pasta congurada especicamente para ele. Uma boa abordagem organizacional consiste na criao de uma pasta denominada Sites e na criao de pastas raiz locais dentro desta, uma para cada site a ser utilizado.
Para criar um novo site:
Escolha Site > Novo site. Na caixa de dilogo que aparecer, intitulada Denio do site, a categoria Informaes locais estar selecionada.
108
Captulo 3
Digite uma das seguintes opes: janela Site e no submenu Site > Abrir o site. Utilize qualquer nome que preferir. Ele no aparecer no navegador e servir apenas de referncia para voc.
No campo Nome do site, digite o nome do site. O nome do site aparecer na No campo Pasta raiz local, especique a pasta do disco local onde sero
armazenados os arquivos, modelos e itens de biblioteca do site. O Dreamweaver resolve os links relativos raiz levando em conta esta pasta (consulte Caminhos relativos raiz na pgina 388). Clique no cone correspondente pasta, para procurar e selecionar a pasta, ou digite um caminho e o nome da pasta no campo de texto. Se a pasta raiz local ainda no existir, crie-a na caixa de dilogo de busca de arquivos.
Na opo Atualizar a lista de arquivos locais automaticamente, indique se

deseja atualizar automaticamente a lista de arquivos locais cada vez que copiar arquivos para o site local. O cancelamento desta opo aumentar a velocidade com que o Dreamweaver copia estes arquivos, porm quando esta opo no estiver selecionada, o painel Local da janela do site deixar de ser automaticamente atualizado. Para atualizar manualmente a janela do site, clique no boto Atualizar, situado nesta janela. Para atualizar manualmente o painel Local apenas, escolha Exibir > Atualizar o local, na janela do site (no Windows), ou Site > Exibir os arquivos do site > Atualizar o local (no Macintosh).
No campo Endereo HTTP, digite a URL que o site da Web concludo

utilizar, para que o Dreamweaver possa vericar os links no site que utilizam URLs absolutas. Consulte Como vericar links numa pgina ou site na pgina 546. Por exemplo: o endereo absoluto HTTP do site da Macromedia na Web http://www.macromedia.com.
Na opo Cache, indique se deseja criar um cache local, para melhorar a

velocidade das tarefas de vinculao e gerenciamento do site. Se voc no selecionar esta opo, o Dreamweaver o noticar novamente, sugerindo a criao de um cache antes que ele crie o site. recomendvel que se selecione esta opo, porque o painel Propriedades somente funciona se um cache for criado. Para obter mais informaes sobre o painel Propriedades, consulte Como gerenciar e inserir propriedades na pgina 237.
3
Clique em OK.
A janela Arquivos do site se abrir. Para obter mais informaes sobre a janela do site e gerenciamento do site, consulte Gerenciamento de sites e colaborao na pgina 113. Posteriormente, quando o site estiver pronto para ser publicado em um servidor remoto, voc dever incluir informaes adicionais relacionadas ao site. Para obter informaes sobre os sites remotos, consulte Como congurar um site remoto na pgina 131.
109
Como editar um site da Web j existente:

possvel utilizar o Dreamweaver para editar um site j existente no seu disco local, mesmo se o site original no tiver sido criado com o Dreamweaver.
Para editar um site da Web j existente:
Escolha Site > Denir os sites e clique em Novo, ou escolha Site > Abrir o site > Denir os sites. Na caixa de dilogo que aparecer, intitulada Denio do site, a categoria Informaes locais estar selecionada.
Digite uma das seguintes opes: janela Site e no submenu Site > Abrir o site. Utilize qualquer nome que preferir. Ele no aparecer no navegador e servir apenas de referncia para voc.
No campo Nome do site, digite o nome do site. O nome do site aparecer na No campo Pasta raiz local, especique a pasta do disco local onde sero
armazenados os arquivos, modelos e itens de biblioteca do site. Clique no cone correspondente pasta, para procurar e selecionar a pasta, ou digite um caminho e o nome da pasta no campo de texto.
Na opo Atualizar a lista de arquivos locais automaticamente, indique se

deseja atualizar automaticamente a lista de arquivos locais cada vez que copiar arquivos para o site local. O cancelamento desta opo aumentar a velocidade com que o Dreamweaver copia estes arquivos, porm quando esta opo no estiver selecionada, o painel Local da janela do site deixar de ser automaticamente atualizado. Para atualizar manualmente a janela do site, clique no boto Atualizar, situado nesta janela. Para atualizar manualmente o painel Local apenas, escolha Exibir > Atualizar o local na janela do site (no Windows), ou Site > Exibir os arquivos do site > Atualizar o local (no Macintosh).
No campo Endereo HTTP, digite a URL que o site da Web concludo

utilizar, para que o Dreamweaver possa vericar os links no site que utilizam URLs absolutas. Consulte Como vericar links numa pgina ou site na pgina 546. Por exemplo: o endereo absoluto HTTP do site da Macromedia na Web http://www.macromedia.com.
Na opo Cache, indique se deseja criar um cache local, para melhorar a

velocidade das tarefas de vinculao e gerenciamento do site. Se voc no selecionar esta opo, o Dreamweaver o noticar novamente, sugerindo a criao de um cache antes que ele crie o site. recomendvel que se selecione esta opo, porque o painel Propriedades somente funciona se um cache for criado. Para obter mais informaes sobre o painel Propriedades, consulte Como gerenciar e inserir propriedades na pgina 237.
3
Clique em OK.
110
Captulo 3
A janela Arquivos do site se abrir. Para obter mais informaes sobre a janela do site e gerenciamento do site, consulte Gerenciamento de sites e colaborao na pgina 113.
Como editar um site remoto

possvel utilizar o Dreamweaver para copiar um site remoto j existente (ou um ramo deste) para o disco local e edit-lo a, mesmo se o site original no tiver sido criado com o Dreamweaver. Observe que, mesmo se pretender editar apenas uma parte do site remoto, duplique localmente toda a estrutura da ramicao 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 se 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
pblico_html
pasta raiz local (mapeie-a para pblico_html, e no para Projeto1 ou Projeto1/HTML)
Projeto1 Projeto1 (deve estar presente no site local; corresponde a Projeto1 no site remoto)
Propriedades
HTML
HTML (deve estar presente no site local; corresponde a Projeto1/HTML no site remoto)
Projeto2
Propriedades
HTML
111
Para editar um site remoto j existente:
Crie uma pasta local que abrigar o site existente e dena-a como sendo a pasta raiz local do site (consulte Como utilizar o Dreamweaver para denir um novo site na pgina 108). Dena um site remoto utilizando as informaes sobre o site j existente. Consulte Como congurar um site remoto na pgina 131. Certique-se de escolher a pasta raiz correta para o site remoto. Conecte-se ao site remoto, utilizando o boto Conectar, na janela do site. Dependendo da extenso do site remoto a ser editada, siga um dos procedimentos abaixo: clique em Obter, para efetuar o download do site inteiro no disco local.
3 4
Se desejar trabalhar com o site inteiro, selecione a pasta raiz do site remoto e Se desejar trabalhar apenas com um dos arquivos ou pastas do site, localize-o no
painel Remoto da janela do site e clique em Obter, para efetuar o seu download no disco local. O Dreamweaver duplicar automaticamente o quanto for possvel a estrutura do site remoto, posicionando o arquivo do qual se fez download na poro direita da hierarquia do site. Ao editar apenas uma parte de um site, opte preferencialmente por incluir os arquivos dependentes.
5
Prossiga como se estivesse criando um site a partir do zero: edite os documentos, visualize e teste-os, e carregue-os novamente para o site remoto.
Para obter mais informaes sobre o gerenciamento de sites, consulte Gerenciamento de sites e colaborao na pgina 113.
Para remover um site da lista de sites

Se no desejar mais trabalhar com um site no Dreamweaver, voc poder removlo da lista de sites. Os arquivos do site no sero removidos.
Nota: 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 2 3
Escolha Site > Denir os sites. Selecione o nome do site. Clique em Remover. Aparecer uma caixa de dilogo, solicitando a conrmao da remoo. Clique em Sim, para remover o site da lista.
112
Captulo 3
CAPTULO 4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Gerenciamento de sites e colaborao
O Macromedia Dreamweaver ajuda a organizar os arquivos dos seus sites locais e remotos, atravs da janela do site. Ele permite duplicar a estrutura do site local em um servidor remoto ou de um site da Web remoto no seu sistema local. Os links relativos criados no site local continuaro a funcionar aps a transferncia de arquivos para o site remoto, porque a estrutura dos dois sites ser idntica. Um site local criado no Dreamweaver utilizando-se o comando Novo site, para criar uma pasta raiz local para o site (ou tornando uma pasta existente a pasta raiz local); consulte Como utilizar o Dreamweaver para denir um novo site na pgina 108. Ao criar um novo site, voc estar denindo um site remoto, possvel adicionar as informaes posteriormente, utilizando o comando Denir os sites; consulte Como associar um servidor remoto a um site local na pgina 132. O Dreamweaver conta com alguns recursos para estruturar um site e transferir arquivos de e para 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 exisitirem em um dos sites. Os arquivos tambm podem ser sincronizados entre os sites locais e remotos; o Dreamweaver copia os arquivos em ambos os diretrios conforme a necessidade e remove os arquivos inteis, se houver algum. O Dreamweaver contm recursos para facilitar o trabalho de colaborao em um site 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 com 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 Relatrios de uxo de trabalho, para executar relatrios relativos ao site, exibir informaes sobre o status de retiradas e devolues de arquivos e procurar as Design Notes anexadas aos arquivos.
113
O Dreamweaver pode ser integrado a alguns dos mais conhecidos aplicativos de controle de origem e verso de arquivos. Para obter a integrao do controle de origem, conecte-se aos bancos de dados SourceSafe e a outros sistemas de controle de origem que oferecem suporte ao protocolo WebDAV. Contudo, observe que o Dreamweaver no executa o controle de verso. Uma vez que o seu site tiver sido publicado, qualquer pessoa de sua equipe poder continuar a mant-lo, utilizando estas mesmas ferramentas. Antes e aps a publicao do site, recomendvel manter um procedimento contnuo para a soluo de quaisquer problemas encontrados no site. Para obter mais informaes, consulte Como testar e publicar um site na pgina 541.
Sobre a janela do site

Utilize a janela do site para executar as operaes padro de manuteno de arquivos, como, por exemplo, criar novos documentos HTML, visualizar, abrir e transferir arquivos, criar pastas e excluir itens. Tambm possvel utilizar a janela do site para transferir arquivos entre os sites locais e remotos, e para determinar o layout da navegao do site utilizando o mapa do mesmo (consulte Como congurar um site remoto na pgina 131 e Como utilizar o mapa do site na pgina 124).
Como padro, o site remoto (ou mapa do site) aparecer no painel esquerdo, enquanto que o site local ser mostrado no painel direito. Esta denio pode ser alterada nas preferncias do site. Consulte Preferncias do site na pgina 117.
114
Captulo 4
Como utilizar os controles da janela do site Para abrir a janela do site, escolha Janela > Arquivos do site. Utilize os seguintes botes e opes da barra de ferramentas da janela do site para denir o que ser exibido nesta janela e para transferir arquivos entre os sites local e remoto:
Visualizao dos arquivos do site exibe
a estrutura de arquivos do site local e remoto nos painis da janela do site. As denies das preferncias determinaro o site que ser exibido no painel da direita ou da esquerda; consulte Preferncias do site na pgina 117. A visualizao dos arquivos do site constitui a visualizao padro da janela do site.
Visualizao do mapa do site exibe um mapa grco do site, levando em conta como os documentos esto vinculados uns aos outros. Mantenha pressionado este boto, para escolher no menu pop-up a opo Apenas o mapa ou Mapa e arquivos. O menu pop-up Site lista os sites por voc denidos. Para alternar entre diversos sites, escolha um outro site da lista. Para adicionar um site ou editar as informaes relativas a um site existente, escolha Denir os sites, na parte inferior do menu (consulte Como congurar um site remoto na pgina 131). Conectar/desconectar (disponvel com os protocolos FTP e WebDAV e com SourceSafe) conecta-se ou desconecta-se do site remoto. Como padro, o
Dreamweaver se desconectar do site remoto depois de 30 minutos de ociosidade (apenas no FTP). Para alterar o limite de tempo, escolha Editar > Preferncias, e selecione Site.
Atualizar atualiza
as listas de diretrios locais e remotos. Utilize esse boto para atualizar manualmente as listas de diretrios, caso seja cancelada a seleo das opes Atualizar automaticamente a lista de arquivos locais ou Atualizar automaticamente a lista de arquivos remotos, na caixa de dilogo Denio do site (consulte Como associar um servidor remoto a um site local na pgina 132). Por exemplo: voc no ver a lista de diretrios do site remoto enquanto no clicar no boto Atualizar, se tiver montado uma unidade que contm um site remoto depois da abertura da janela do site.
115
Obter o(s) arquivo(s) copia os arquivos selecionados do site remoto para o site local (substituindo a cpia local do arquivo j existente, se houver). Se a opo Ativar a devoluo e retirada de arquivos estiver ativada, as cpias locais sero somente de leitura; os arquivos continuaro disponveis no site remoto, para que outros membros da equipe possam retir-los. Se a opo Ativar a devoluo e retirada de arquivos estiver desativada, a obteno de um arquivo transferir uma cpia com os privilgios de leitura e gravao. Observe que os arquivos copiados so aqueles selecionados no painel que estiver ativo na janela do site. Se o painel Remoto estiver ativo, o arquivos remotos selecionados sero copiados para o site local; se o painel Local estiver ativo, as verses remotas dos arquivos locais selecionados sero copiadas para o site local. Consulte Como obter arquivos de um servidor remoto na pgina 151. Obter o(s) arquivo(s) copia os arquivos selecionados do site local para o site remoto. Observe que os arquivos copiados so aqueles selecionados no painel que estiver ativo na janela do site. Se o painel Local estiver ativo, o arquivos locais selecionados sero copiados para o site remoto; se o painel Remoto estiver ativo, as verses locais dos arquivos remotos selecionados sero copiadas para o site remoto. Consulte Como colocar arquivos em um servidor remoto na pgina 152. Nota: Se estiver adicionando um arquivo que ainda no exista no site remoto e a opo Ativar a devoluo e retirada de arquivos estiver ativa, o arquivo ser adicionado ao site remoto como retirado. Escolha a opo Devolver os arquivos, em vez de adicionar um arquivo sem o status de retirada. Retirar o(s) arquivo(s) transfere
uma cpia do arquivo do servidor remoto para o site local (substituindo a cpia local do arquivo j existente, se houver) e marca esse arquivo como tendo sido retirado do servidor. Esta opo no estar disponvel se Ativar a devoluo e retirada de arquivos estiver desativada no site atual. Consulte Como devolver e retirar os arquivos de um servidor remoto na pgina 141.
Devolver o(s) arquivo(s) transfere uma cpia do arquivo local para o servidor remoto, tornando-o disponvel para edio por outros usurios. O arquivo local se tornar somente de leitura. Esta opo no estar disponvel se a opo Ativar a devoluo e retirada de arquivos, na caixa de dilogo Denio do site, estiver desativada no site. Consulte Como devolver e retirar os arquivos de um servidor remoto na pgina 141. Parar a tarefa atual abandona a atividade em curso, inclusive a obteno e colocao de arquivos. O boto, um sinal octagonal vermelho de parada com um 'X' branco, aparecer no canto inferior direito da janela apenas quando houver uma tarefa em andamento. Observe que talvez haja uma demora at que o servidor processe a solicitao de parada. Por isso, a transferncia do arquivo poder no ser interrompida imediatamente. Este boto aparecer apenas quando houver uma tarefa em andamento.
O boto com um tringulo de reduo/expanso situado no canto inferior esquerdo da janela do site permite reduzir ou expandir esta janela, exibindo um ou dois painis.
116
Captulo 4
Preferncias do site Escolha Editar > Preferncias, selecione Site e, em seguida, escolha uma dentre as seguintes preferncias do site, para controlar os recursos de transferncia de arquivos disponveis na janela do site .
Mostrar sempre especica qual site (remoto ou local) ser sempre mostrado e em qual painel da janela do site (esquerdo ou direito) os arquivos locais e remotos aparecero. Como padro, o site local aparecer sempre direita. O pianel que no for escolhido (o esquerdo, como padro) ser o painel mutvel: este painel poder exibir o mapa do site ou os arquivos no outro site (o padro o site remoto). Arquivos dependentes exibe uma solicitao para transferir os arquivos dependentes (como imagens, folhas de estilos externas e outros arquivos mencionados no arquivo HTML) que o navegador carregar junto com o arquivo HTML. Como padro, as opes Solicitar na obteno/retirada e Solicitar na colocao/devoluo esto selecionadas. Nota: Para forar a solicitao Incluir os arquivos dependentes a aparecer quando essas opes estiverem desmarcadas, pressione a tecla Alt (no Windows) ou a tecla Option (no Macintosh) enquanto escolhe os comandos Obter, Colocar, Devolver ou Retirar. Conexo de FTP determina
se a conexo ao site remoto ser terminada aps o nmero especicado de minutos sem atividade.
Tempo limite do FTP especica o nmero de segundos durante os quais o Dreamweaver tentar estabelecer uma conexo com o servidor remoto. Se no houver resposta aps o tempo especicado, o Dreamweaver exibir uma caixa de dilogo de advertncia, alertando-o para esse fato.
117
Host da firewall especica
o endereo do servidor proxy atravs do qual ser estabelecida a conexo aos servidores externos, se voc no estiver atrs de uma rewall. Caso contrrio, deixe esse espao em branco.
Nota: No caso de estar atrs de uma firewall, selecione a opo Utilizar a firewall, na caixa de dilogo Definio do site. Consulte Como associar um servidor remoto a um site local na pgina 132. Porta da firewall especica
a porta da rewall atravs da qual voc se conectar ao servidor de FTP. Se a conexo for estabelecida atravs de uma porta diferente da 21 (o padro de FTP), digite o nmero aqui.
Opes de colocao: Salvar os arquivos antes de coloc-los indica que os arquivos no salvos sero salvos automaticamente antes de serem colocados no site remoto. Definir os sites remete-o
caixa de dilogo Denir os sites, onde possvel editar um site existente ou criar um novo site. Consulte Como associar um servidor remoto a um site local na pgina 132. possvel tambm denir se os tipos de arquivos a serem transferidos devem estar no formato ASCII (texto) ou binrio. Para fazer isso, abra o arquivo FTPExtensionMap.txt na pasta Dreamweaver/Conguration (FTPExtensionMapMac.txt, no Macintosh). possvel modicar e excluir a lista dos tipos de arquivos que sero transferidos em cada formato, bem como adicionar os seus prprios tipos de arquivo. Quando uma extenso no estiver denida nesse arquivo, o Dreamweaver transferir automaticamente o arquivo em modo binrio.
Nota: No Macintosh, o arquivo FTPExtensionMapMac.txt tambm inclui informaes sobre como mapear as extenses de arquivo para os criadores e tipos de arquivos do Macintosh. Esse mapeamento permite que, a um arquivo do qual foi feito download, seja atribudo o cone correto e que esse arquivo seja aberto pelo aplicativo adequado, quando for clicado duas vezes no Localizador.
Observe que, quando um arquivo for transferido como ASCII, a denio de preferncia de quebra de linha ser ignorada. Consulte Como denir as preferncias de formatao de cdigo na pgina 374.
118
Captulo 4
Como exibir e abrir os arquivos na janela do site

Utilize a janela do site para exibir os sites locais e remotos, adicionar ou remover documentos do site ou para estabelecer a estrutura navegacional do site segundo um mapa do site. Para obter mais informaes, consulte Sobre a janela do site na pgina 114. possvel denir cada uma das duas visualizaes da janela do site, para que mostrem o site local, o site remoto ou um mapa grco do site local. Por exemplo: possvel exibir o site local em um painel e o site remoto em outro; ou o site local na visualizao dos arquivos do site, em um painel, e a visualizao do mapa do site, no outro painel. Para obter mais informaes sobre a exibio de mapas de sites, consulte Sobre o mapa do site na pgina 123. Como exibir os sites locais A janela do site pode exibir o contedo tanto dos sites locais quanto dos remotos. Os sites locais podem ser exibidos na janela do site como uma lista de arquivos, um mapa visual ou ambos. Os sites remotos podem ser exibidos apenas como uma lista de arquivos. Para poder exibir um site remoto, necessrio congur-lo; consulte Como congurar um site remoto na pgina 131.
Para exbir os arquivos do site local, siga um dos procedimentos abaixo:
Escolha Janela > Arquivos do site. Na janela do site, se o mapa do site estiver sendo exibido, clique no boto
Arquivos do site.
A janela do site exibir dois conjuntos de arquivos: um lado da janela apresentar uma lista dos arquivos do site local, enquanto que o outro lado apresentar uma lista dos correspondentes arquivos do site remoto.
Nota: Se voc estiver exibindo um site local que no possui um site remoto correspondente, a visualizao Site remoto estar vazia.
119
Para exibir o mapa e os arquivos do site, siga um dos procedimentos abaixo:
Escolha Janela > Mapa do site. Se anteriormente, apenas o mapa tivesse sido
exibido, sem os arquivos do site, esta janela exibir apenas o mapa.
Na janela do site, clique no boto Mapa do site, ou mantenha pressionado o

boto do mouse com o ponteiro sobre o boto Mapa do site e, no menu popup, selecione Mapa e arquivos.
A janela do site exibe duas visualizaes: o site local como um mapa, identicado por Navegao no site; e, dependendo de como as preferncias tiverem sido denidas, os arquivos do site local (identicado por Pasta local) ou os arquivos do site remoto (identicado por Site remoto).
Para exibir apenas o mapa do site:
Mantenha pressionado o boto do mouse com o ponteiro sobre o boto Mapa do site e, no menu pop-up, selecione Apenas o mapa. Para obter mais informaes, consulte Como utilizar o mapa do site na pgina 124. Como alterar o layout da janela do site Como padro, o site remoto (ou o mapa do site local) aparecer no lado esquerdo da janela do site, enquanto que o site local aparecer no lado direito. possvel alternar entre estas visualizaes.
Para alterar o layout da janela do site:
1 2
Escolha Editar > Preferncias e, em seguida, selecione a categoria Site. Siga um dos procedimentos abaixo: deseja exibir os arquivos locais no lado direito ou esquerdo da janela do site. O site local aparecer no lado selecionado e o site remoto (ou o mapa do site) aparecer no lado oposto. Quando esta opo for escolhida, os arquivos do site local sero sempre mostrados na janela do site, mesmo quando a janela for reduzida a um painel.
No menu Mostrar sempre, selecione Arquivos locais e, em seguida, escolha se
120
Captulo 4
No menu Mostrar sempre, selecione Arquivos remotos e, em seguida, escolha se

deseja exibir os arquivos remotos no painel direito ou esquerdo. O site remoto aparecer no lado selecionado e o site local (ou o mapa do site, sempre local) aparecer no lado oposto. Quando esta opo for escolhida, os arquivos do site remoto sero sempre mostrados na janela do site, mesmo quando esta for reduzida a um painel.
3
Clique em OK, para aplicar as alteraes e fechar a caixa de dilogo Preferncias.
Para alterar a rea de exibio:
Na janela do site, siga um dos procedimentos abaixo:
Arraste a barra de diviso que separa as duas visualizaes, para aumentar ou

diminuir a rea de exibio da janela direita ou esquerda da janela.
Utilize as barras de rolagem, na parte inferior da janela do site, para rolar pelo
contedo das visualizaes.
No mapa do site, arraste a seta acima de um arquivo para alterar o espao entre
os arquivos.
Para reduzir a janela do site a uma visualizao:
Clique no boto com um pequeno tringulo branco, no canto inferior esquerdo da janela do site.
Nota: A visualizao que continuar visvel corresponder sua escolha de Mostrar sempre, na caixa de dilogo Preferncias do site.
Para obter mais informaes sobre as preferncias relativas ao site, consulte Preferncias do site na pgina 117. Como trabalhar com os arquivos na visualizao dos arquivos do site Utilize a visualizao dos arquivos do site para exibir os sites locais e remotos como listas de arquivos, abrir ou renomear arquivos, adicionar novas pastas ou arquivos a um site ou atualizar a visualizao do site depois de concluir as alteraes. Tambm possvel utilizar a visualizao de arquivos do site para determinar quais arquivos (em cada um dos sites) foram atualizados desde a ltima vez em que foram transferidos. Para obter mais informaes sobre a sincronizao do site local com o remoto, consulte Como sincronizar os arquivos nos sites local e remoto na pgina 154.
121
Para exibir os arquivos do site:
Siga um dos procedimentos abaixo:
Escolha Janela > Arquivos do site, para abrir a janela do site na visualizao dos
arquivos do site.
Na janela do site, clique no boto Arquivos do site.

Para abrir um arquivo na visualizao dos arquivos do site:
Clique duas vezes no cone do arquivo.

Para adicionar uma nova pasta ao site:
Certique-se de que um arquivo ou pasta esteja selecionada na janela do site; a nova pasta ser criada dentro da pasta selecionada ou na mesma pasta que o arquivo selecionado. Escolha Arquivo > Nova pasta, na janela do site (no Windows), ou Site > Exibir os arquivos do site > Nova pasta (no Macintosh). Tambm possvel acessar esta opo no menu contextual da janela do site. Digite um nome para a nova pasta.
Para adicionar um novo arquivo ao site:
Certique-se de que haja um arquivo ou pasta selecionada na janela do site; o novo arquivo ser criado dentro da pasta selecionada ou na mesma pasta que o arquivo selecionado. Escolha Arquivo > Novo arquivo, na janela do site (no Windows), ou Site > Exibir os arquivos do site > Novo arquivo (no Macintosh). Tambm possvel acessar esta opo no menu contextual da janela do site. Digite um nome para o novo arquivo.
Para renomear um arquivo ou pasta de um site:
Na janela do site, selecione o arquivo ou pasta a ser renomeada e siga um dos procedimentos abaixo, para ativar o campo de nome ao lado do arquivo ou pasta: Macintosh)
Escolha Arquivo > Renomear (no Windows), ou Site > Renomear (no Clique no arquivo, faa uma pausa e, em seguida, clique novamente.
2
Digite o novo nome e pressione a tecla Enter.
122
Captulo 4
Para atualizar a visualizao dos arquivos do site depois de concluir as alteraes fora do Dreamweaver:
Escolha Exibir > Atualizar o local, na janela do site (no Windows), ou Site >
Exibir os arquivos do site > Atualizar o local (no Macintosh).
Escolha Exibir > Atualizar o remoto, na janela do site (no Windows), ou Site >
Exibir os arquivos do site > Atualizar o remoto (no Macintosh).
Para atualizar ambos os painis, clique no boto Atualizar, situado na janela do

site.
Para localizar e selecionar os arquivos retirados:
Escolha Editar > Selecionar os arquivos retirados, na janela do site (no Windows), ou Site > Exibir os arquivos do site > Selecionar os arquivos retirados (no Macintosh).
Para localizar e selecionar os arquivos locais mais recentes:
Escolha Editar > Selecionar um local mais novo, na janela do site (no Windows), ou Site > Exibir os arquivos do site > Selecionar um local mais novo (no Macintosh).
Para localizar e selecionar os arquivos remotos mais recentes:
Escolha Editar > Selecionar um remoto mais novo, na janela do site (no Windows), ou Site > Exibir os arquivos do site > Selecionar um remoto mais novo (no Macintosh). Para obter mais informaes sobre como trabalhar com os sites locais e remotos, consulte Como utilizar as opes de devoluo e retirada de arquivos na pgina 139.
Sobre o mapa do site

Utilize a visualizao do mapa do site para exibir um site local como um mapa visual dos cones vinculados, adicionar novos arquivos a um site ou adicionar, modicar ou remover links. A visualizao do mapa do site ideal para criar o layout da estrutura do site. possvel congurar rapidamente a estrutura inteira do site e, em seguida, criar uma imagem grca do mapa do site.
Nota: O mapa do site se aplica apenas aos sites locais. Se desejar criar um mapa de um site remoto, copie o contedo deste para uma pasta na unidade local e utilize o comando Definir os sites, para definir o site como sendo local.
123
Como utilizar o mapa do site

necessrio denir uma home page correspondente ao site antes de exibir o mapa do mesmo. A home page do site o ponto de partida do mapa.
Para definir a home page do site:
1 2
Escolha Site > Denir os sites. Escolha Novo ou Editar, para denir um novo site ou abrir um site j existente, respectivamente. Aparecer a caixa de dilogo Denio do site. Selecione Layout do mapa do site. Clique no cone da pasta, para procurar uma home page para o site, ou digite um caminho de arquivo no campo Home page.
3 4
Para exibir um mapa de site, siga um dos procedimentos abaixo:
Escolha Janela > Mapa do site, a m de abrir a janela do site. Na janela do site, clique no boto Mapa do site.
Nota: Se nenhuma home page tiver sido definida ou se no for possvel ao Dreamweaver localizar uma pgina denominada index.html ou index.htm no site para utilizar como home page, aparecer uma caixa de dilogo, solicitando a seleo de uma home page clicando em Definir os sites. Escolha o site desejado e, em seguida, clique em Editar. A seguir, selecione Layout do mapa do site, na caixa de dilogo Definio do site.
O mapa do site mostrar os arquivos HTML e outros elementos da pgina como cones. Os links sero exibidos na ordem em que forem detectados no cdigofonte HTML.
O texto exibido em vermelho indica um link rompido. O texto exibido 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. Um cone com um cadeado indica um arquivo somente de leitura (no
Windows) ou bloqueado (no Macintosh).
124
Captulo 4
Como padro, o mapa exibe dois nveis da estrutura do site, a partir da home page atual. Clique nos sinais de adio (+) ou subtrao (), ao lado de uma pgina, a m de mostrar ou ocultar as pginas vinculadas abaixo do segundo nvel.
Como padro, os arquivos ocultos e dependentes no so exibidos no mapa do site. Os arquivos ocultos so arquivos HTML marcados como ocultos. O contedo das pginas de arquivos dependentes diferente de HTML, podendo incluir imagens, modelos, arquivos Shockwave ou Flash. Consulte Como modicar o layout do mapa do site na pgina 125 e Como mostrar e ocultar os arquivos do mapa do site na pgina 128. Como modificar o layout do mapa do site Utilize as opes do Layout do mapa do site para personalizar a aparncia do mapa do site. possvel especicar a home page, o nmero de colunas exibidas, se os identicadores de cones exibiro o nome do arquivo ou o ttulo da pgina, e decidir se os arquivos ocultos e dependentes sero mostrados.
Para modificar o layout do mapa do site:
Abra a caixa de dilogo Denio do site, utilizando um dos seguintes mtodos: categorias, esquerda, selecione Layout do mapa do site.
Escolha Site > Denir os sites e, em seguida, clique em Editar. Na lista de Escolha Exibir > Layout (no Windows), ou Site > Visualizao do mapa do site
> Layout (no Macintosh).
2
Clique no cone da pasta, para procurar uma home page para o site, ou digite um caminho de arquivo no campo Home page. necessrio que a home page esteja no site local. Se voc no especicar uma home page e o Dreamweaver no localizar um arquivo denominado index.html ou index.htm na raiz o programa solicitar a seleo de uma home page quando o mapa do site for aberto.
125
Escolha uma dentre as opes de Coluna: sero exibidas por linha na janela do mapa do site.
No campo Nmero de colunas, digite um nmero, para denir quantas pginas No campo Largura da coluna, digite um nmero, para denir a largura, em
pixels, das colunas do mapa do site.
4
Em Identicadores de cones, selecione se o nome exibido com os cones dos documentos no mapa do site ser representado por um nome de arquivo ou ttulo de pgina. Em Opes, selecione quais arquivos sero exibidos no mapa do site: HTML que estiverem marcados como ocultos pelo usurio no mapa do site. Se uma pgina estiver oculta, o seu nome e os links a ela sero exibidos em itlico. Para obter informaes sobre como ocultar os arquivos, consulte Como mostrar e ocultar os arquivos do mapa do site na pgina 128.
Escolha Exibir os arquivos marcados como ocultos, para exibir os arquivos
Escolha Exibir os arquivos dependentes, para mostrar todos os arquivos

dependentes na hierarquia do site. Um arquivo dependente uma imagem ou outro elemento diferente de HTML, que carregado pelo navegador junto com a pgina principal. Como 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 o ttulo da pgina.
Para selecionar vrias pginas no mapa do site, siga um dos procedimentos abaixo:
Mantendo a tecla Shift pressionada, clique para selecionar vrias pginas. Inicie em uma parte em branco da visualizao e arraste um grupo de arquivos,
para selecion-los.
Pressione a tecla Control (no Windows) ou Command (no Macintosh) e d um

clique, para selecionar pginas no-contguas.
Para abrir uma pgina para edio, siga um dos procedimentos abaixo:
Clique duas vezes no arquivo. Selecione o arquivo e escolha Arquivo > Abrir a seleo (no Windows) ou Site >
Abrir (no Macintosh).
126
Captulo 4
Para adicionar um arquivo j existente ao site, siga um dos procedimentos abaixo:
Arraste um arquivo do Windows Explorer ou do Localizador do Macintosh 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.
Selecione Site > Link a um arquivo existente (no Windows), ou Site >
Visualizao do mapa do site > Link a um arquivo existente (no Macintosh).
Para criar um novo arquivo e adicionar um link:
Selecione um arquivo HTML no mapa do site e, depois, siga um dos procedimentos abaixo: do mapa do site > Link a um novo arquivo (no Macintosh).
Escolha Site > Link a um novo arquivo (no Windows), ou Site > Visualizao Escolha Link a um novo arquivo, no menu contextual.
2
Na campo Nome do arquivo da caixa de dilogo Link a um novo arquivo, digite um nome de arquivo. No campo Ttulo, digite um ttulo de pgina para o arquivo. No campo Texto do link, digite o texto do link que conecta o arquivo selecionado ao novo arquivo. O texto e o link aparecero no arquivo selecionado. Clique em OK. O arquivo ser salvo na mesma pasta que o arquivo selecionado. Se for adicionado um novo arquivo a uma ramicao oculta, o novo arquivo tambm estar oculto. Consulte Como mostrar e ocultar os arquivos do mapa do site na pgina 128.
3 4
Para modificar o ttulo de uma pgina:
Certique-se de que a opo Mostrar os ttulos das pginas esteja selecionada. Escolha Exibir > Mostrar os ttulos das pginas (no Windows), ou Site > Visualizao do mapa do site > Mostrar os ttulos das pginas (no Macintosh).
Siga um dos procedimentos abaixo: tornar um campo editvel, digite um novo ttulo de documento.
Selecione uma pgina e, em seguida, clique no seu ttulo. Quando o ttulo se Selecione uma pgina e, em seguida, escolha Arquivo > Renomear (no
Windows), ou Site > Renomear (no Macintosh).
Nota: Durante o trabalho na janela do site, o Dreamweaver atualizar automaticamente todos os links aos arquivos cujos nomes tiverem sido modificados.
127
Para alterar a home page, siga um dos procedimentos abaixo:
Na visualizao Pasta local da janela do site, clique no arquivo a ser alterado

para home page e escolha Denir como home page, no menu contextual.
Selecione um arquivo na janela do site e escolha Site > Nova home page (no
Windows), ou Site > Visualizao do mapa do site > Nova home page (no Macintosh), para criar uma nova home page.
Na visualizao Pasta local da janela do site, clique no arquivo a ser alterado

para home page e escolha Site > Denir como home page (no Windows), ou Site > Visualizao do mapa do site > Denir como home page (no Macintosh), para transformar uma pgina existente em home page.
Escolha Site > Denir os sites e clique em Editar. Selecione Layout do mapa do
site, na caixa de dilogo Denio do site.
Para atualizar a visualizao do mapa do site depois de ter concludo as alteraes:
Clique em qualquer ponto do mapa do site, para cancelar a seleo dos arquivos. Escolha Exibir > Atualizar o local (no Windows), ou Site > Visualizao do mapa do site > Atualizar o local (no Macintosh).
Como mostrar e ocultar os arquivos do mapa do site possvel modicar o layout do mapa do site, para mostrar ou no os arquivos ocultos e dependentes. Esse procedimento til quando se deseja enfatizar tpicos ou contedos importantes e retirar a nfase de materiais menos relevantes. Para ocultar um arquivo utilizando o mapa do site, necessrio, primeiramente, 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.
Para marcar os arquivos como ocultos:
1 2
No mapa do site, selecione um ou mais arquivos. Escolha Exibir > Mostrar/ocultar o link (no Windows), ou Site > Visualizao do mapa do site > Mostrar/ocultar o link (no Macintosh)
128
Captulo 4
Para mostrar ou ocultar os arquivos marcados como ocultos, siga um dos procedimentos abaixo:
Escolha Exibir > Mostrar os arquivos marcados como ocultos (no Windows),
ou Site > Visualizao do mapa do site > Mostrar os arquivos marcados como ocultos (no Macintosh).
Escolha Exibir > Layout (no Windows), ou Site > Visualizao do mapa do site
> Layout (no Macintosh), para abrir a caixa de dilogo Denio do site, e selecionar a opo Exibir os arquivos marcados como ocultos. Como padro, os arquivos dependentes j esto ocultos. possvel optar por mostr-los ou no no mapa do site.
Para mostrar os arquivos dependentes, siga um dos procedimentos abaixo:
Escolha Exibir > Mostrar os arquivos dependentes (no Windows), ou Site >
Visualizao do mapa do site > Mostrar os arquivos dependentes (no Macintosh).
Escolha Exibir > Layout (no Windows) ou Site > Visualizao do mapa do site
> Layout (no Macintosh), para abrir a caixa de dilogo Denio do site, e selecionar a opo Exibir os arquivos dependentes.
Para desmarcar os arquivos marcados como ocultos:
1 2
No mapa do site, selecione um ou mais arquivos. Escolha Exibir > Mostrar os arquivos marcados como ocultos (no Windows), ou Site > Visualizao do mapa do site > Mostrar os arquivos marcados como ocultos (no Macintosh). Escolha Exibir > Mostrar/ocultar o link (no Windows), ou Site > Visualizao do mapa do site > Mostrar/ocultar o link (no Macintosh)
Como 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 ramicaes do mapa do site.
Para exibir uma ramificao diferente:
Selecione a pgina a ser exibida e escolha Exibir > Exibir como raiz (no Windows), ou Site > Visualizao do mapa do site > Exibir como raiz (no Macintosh). O mapa do site ser redesenhado na janela como se a pgina especicada estivesse na raiz do site. O campo Navegao no site, situado acima do mapa do site, exibe o caminho da home page at a pgina especicada. Selecione qualquer item nesse caminho para exibir o mapa do site a partir desse nvel, clicando uma vez.
129
Para expandir ou contrair os ramos:
Clique nos sinais de adio (+) ou subtrao (), para expandir ou reduzir a ramicao, respectivamente. Como salvar o mapa do site possvel 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:
No mapa do site, siga um dos procedimentos abaixo: Salvar o mapa do site, digite um nome no campo Nome do arquivo. No menu pop-up Tipo de arquivo, selecione .bmp ou .png.
No Windows, escolha Arquivo > Salvar o mapa do site. Na caixa de dilogo No Macintosh, selecione Site > Visualizao do mapa do site > Salvar o mapa
do site > Salvar o mapa do site como PICT, ou Site > Visualizao do mapa do site > Salvar o mapa do site > Salvar o mapa do site como JPEG.
2
Escolha uma localizao, digite um nome para a imagem e clique em Salvar.
Como localizar arquivos na janela do site possvel procurar um arquivo nos sites local e remoto a partir das janelas do documento e do site. Para obter mais informaes sobre como procurar e substituir arquivos, consulte Como procurar e substituir texto, tags e atributos na pgina 280. Para exibir a janela do site, escolha Janela > Arquivos do site.
Para localizar um arquivo no site local:
Selecione o arquivo na visualizao Site remoto, na janela do site, ou abra o arquivo em uma janela do documento. Escolha Site > Localizar no site local. Apenas no Windows, se a janela do site estiver ativa, escolha Editar > Localizar no site local. O arquivo ser realado na pasta Local da janela do site.
130
Captulo 4
Para localizar um arquivo no site remoto:
Selecione o arquivo na pasta Local, na janela do site, ou abra o arquivo em uma janela do documento. Escolha Site > Localizar no site remoto. Apenas no Windows, se a janela do site estiver ativa, escolha Editar > Localizar no site remoto. Tambm possvel selecionar o arquivo na pasta Local e clic-lo com o boto direito do mouse (no Windows), ou clicar nele mantendo a tecla Control pressionada (no Macintosh) e escolher a opo Localizar no site remoto, no menu contextual. O arquivo ser realado na visualizao Site remoto, na janela do site.
Nota: Se, enquanto a janela do documento estiver ativa, for selecionado Site > Localizar no site local, ou Site > Localizar no site remoto, e o arquivo no fizer parte do site que estiver aberto, o Dreamweaver tentar determinar a qual dos sites definidos localmente pertence o arquivo; se ele pertencer a apenas um site local, o Dreamweaver abrir este site e, em seguida, procurar nele o arquivo.
Como configurar um site remoto

Para poder congurar um site remoto, necessrio criar um site local (que poder, ento, ser associado ao site remoto). Consulte Como utilizar o Dreamweaver para denir um novo site na pgina 108. A prxima etapa da congurao de um site remoto determinar a sua localizao isto , qual servidor se ocupar desse site. O seu cliente, empregador ou provedor de servios da Internet j tem provavelmente um servidor congurado para trabalhar com pginas da Web (na Internet ou intranet); pergunte ao administrador de sistemas ou ao cliente qual o nome desse servidor, e descubra como transferir os arquivos para ele. Em particular, determine se o FTP ser utilizado para estabelecer a conexo com o servidor, ou se o servidor poder ser montado em sua rea de trabalho como uma unidade de disco acessvel atravs da rede. Se a conexo for estabelecida com o FTP, procure saber o nome do servidor de FTP e determine o diretrio do host, assim como as informaes relativas ao login e senhas. Ao reunir essas informaes, utilize o comando Denir os sites, para associar o servidor ao seu site local. Caso surjam problemas na congurao do site remoto, consulte Como solucionar problemas de congurao do site remoto na pgina 138. Depois que o site remoto estiver congurado, ser possvel efetuar o upload ou download dos arquivos para ele, caso j haja arquivos no site. Consulte Como utilizar as opes de devoluo e retirada de arquivos na pgina 139 e Como obter e colocar arquivos na pgina 151.
131
Como associar um servidor remoto a um site local Aps criar um site local, utilize o comando Denir os sites, para adicionar ou alterar as informaes relativas ao servidor remoto e s preferncias de devoluo/ retirada.
Para associar um servidor remoto a um site local existente:
Escolha Denir os sites, no menu pop-up Sites atuais, na janela do site, ou selecione Site > Denir os sites.
Aparecer uma caixa de dilogo com uma lista dos sites denidos atuais; escolha um site existente e clique em Editar. Se no houver sites denidos, crie um site local antes de continuar; consulte Como utilizar o Dreamweaver para denir um novo site na pgina 108.
3 4
Na lista de categorias esquerda, clique em Informaes remotas. Escolha uma dentre as seguintes opes de Acesso ao servidor: seguida, clique em OK e ignore o restante desse procedimento.
Utilize nenhum, caso no planeje efetuar o upload do site para um servidor. Em Utilize Local/Rede, se o servidor da Web estiver montado como uma unidade
da rede (no Windows), ou como um servidor AppleTalk ou NFS (no Macintosh), ou se o servidor da Web estiver em execuo no seu computador local. Clique no cone correspondente pasta, para procurar e selecionar a pasta do servidor na qual esto armazenados os arquivos do site. Se voc desejar que o painel Remoto da janela do site atualize automaticamente os arquivos conforme forem adicionados e excludos, selecione a opo Atualizar automaticamente a lista de arquivos remotos; para aumentar a velocidade de cpia de arquivos para o site remoto, no selecione essa opo. Para atualizar manualmente a janela do site a qualquer momento, clique no boto Atualizar, na janela do site. Clique em OK e ignore o restante desse procedimento.
Nota: Para atualizar manualmente apenas o painel Remoto, escolha Exibir > Atualizar o remoto, na janela do site (no Windows), ou Site > Visualizao dos arquivos do site > Atualizar o remoto (no Macintosh).
Utilize a opo FTP, se a conexo ao servidor da Web for estabelecida atravs do

protocolo FTP.
132
Captulo 4
Para se conectar a um servidor da Web utilizando o FTP:
Digite o nome do host de FTP para o qual deseja efetuar o upload dos arquivos do site da Web. O nome do host de FTP o nome completo da Internet de um sistema de computador, como ftp.mindspring.com. Digite o nome completo do host sem qualquer texto adicional; especialmente, no adicione um nome de protocolo antes do nome do host. Por exemplo:
Correto: ftp.mindspring.com Incorreto: ftp://ftp.mindspring.com Incorreto: mindspring.com

2
Digite o nome do diretrio do host no site remoto onde sero armazenados os documentos que estaro visveis para o pblico. Consulte Como determinar o diretrio do host do site remoto (apenas no FTP) na pgina 134. Digite o nome de login e a senha utilizados para estabelecer a conexo ao servidor de FTP. Como padro, o Dreamweaver salvar a sua senha. Cancele a seleo de Salvar, para ser noticado a digitar uma senha sempre que estabelecer conexo ao servidor remoto.
Selecione as opes de rewall adequadas ao seu site: de trs de uma rewall. Par obter mais informaes sobre as opes de rewalls, consulte Como associar um servidor remoto a um site local na pgina 132.
Selecione a opo Utilizar a rewall, se estiver se conectando ao servidor remoto Se a congurao de rewall necessitar da utilizao de FTP passivo (que
permite ao software local congurar a conexo do FTP, em vez de solicitar que o servidor remoto que o faa), selecione Utilizar FTP passivo. Caso no tenha certeza, se informe com o administrador do sistema.
5
Clique em OK.
133
Como determinar o diretrio do host do site remoto (apenas no FTP) O diretrio do host especicado na caixa de dilogo Denio do site deve ser o mesmo que a pasta raiz do site local. Se a estrutura do site remoto no coincidir com a do site local, os seus arquivos sero carregados para o local incorreto e no estaro visveis para os visitantes do site. Os caminhos at as imagens e links tambm se rompero.
Neste caso, no deveria ser o Diretrio do host
n sim no
No deveria ser o Diretrio do host Deveria ser o Diretrio do host
necessrio que o diretrio raiz remoto exista, para que o Dreamweaver possa se conectar a ele. Caso no haja um diretrio raiz para o seu site no servidor remoto, crie-o antes de tentar estabelecer a conexo ou pea ao administrador do servidor para criar um diretrio raiz, se no puder faz-lo. Se estiver em dvida sobre o que digitar no campo Diretrio do host, deixe-o em branco. Em alguns servidores, o diretrio raiz ser idntico quele com o qual voc estabeleceu a primeira conexo com o FTP. Para descobrir isso, conecte-se ao servidor. Se aparecer uma pasta com um nome semelhante a public_html, ou www ou o seu nome de login na visualizao de arquivos remotos, na janela do site, este ser provavelmente o diretrio a ser utilizado no campo Diretrio do host. Anote o nome do diretrio, desconecte-se e reabra a caixa de dilogo Denio do site. Em seguida, digite o nome do diretrio no campo Diretrio do host e conecte-se de novo.
134
Captulo 4
Sobre a integrao WebDAV e SourceSafe

O Dreamweaver permite acessar aplicativos de controle de origem e verso de arquivos na janela do site. possvel estabelecer conexes aos bancos de dados e servidores SourceSafe, alm de outros sistemas de controle de origem que oferecem suporte ao protocolo WebDAV. Utilizando a caixa de dilogo Denio do site, possvel selecionar um tipo de conexo ou sistema de controle de origem. Uma vez conectado, possvel utilizar os recursos de compartilhamento de arquivos do Dreamweaver, como Devolver/ retirar, Atualizar, Obter e Colocar, alm das Design Notes, para acessar os recursos correspondentes do seu prprio sistema de controle de origem.
Nota: Para poder utilizar este recurso, necessrio que o Visual SourceSafe esteja instalado no sistema ou que voc conte com o acesso a um sistema com suporte do WebDAV.
Como utilizar o Dreamweaver com o protocolo WebDAV possvel utilizar o Dreamweaver para estabelecer uma conexo que utilize o protocolo WebDAV (Web-based Distributed Authoring and Versioning) se o sistema oferecer suporte a este protocolo. Dois exemplos de servidores compatveis com o WebDAV atualmente disponveis so o Microsoft Internet Information Server (IIS) 5.0 e o Apache Web Server.
Para se conectar a um site utilizando o protocolo WebDAV:
1 2 3
Escolha Site > Denir os sites. Na caixa de dilogo Denir os sites, selecione Editar. Na caixa de dilogo Denio do site, selecione a categoria Informaes remotas. No menu pop-up Acesso, escolha WebDAV. Se desejar, selecione a opo Retirar os arquivos na abertura, para retirar automaticamente os arquivos na abertura. Clique em Denies.
4 5
Aparecer a caixa de dilogo Conexo WebDAV.
135
No campo URL, digite a URL completa at o diretrio do servidor WebDAV ao qual deseja se conectar. Esta URL inclui o protocolo, porta e diretrio (se for diferente do diretrio raiz). Por exemplo: http://apache1/WebDAV/meu site.
Digite o seu nome de usurio e senha nos campos apropriados. Estas informaes se destinam autenticao do servidor e no esto relacionadas ao Dreamweaver. Se estiver em dvida quanto ao seu nome de usurio e senha, informe-se com o administrador do sistema ou webmaster.
No campo correio eletrnico, digite o seu endereo de correio eletrnico. Este campo necessrio, sendo utilizado para identicar a propriedade do servidor WebDAV. Ele aparecer na janela do site, para ns de contato.
10
Clique em Salvar a senha, para armazenar a senha. Saia do Dreamweaver. A cada nova sesso que for iniciada, a senha continuar salva. Clique em OK. Escolha Site > Conectar, ou clique no boto Conectar, na barra de ferramentas da janela do site, para se conectar ao site remoto. Para se desconectar, escolha Site > Desconectar, ou clique no boto Desconectar.
11 12
Uma vez conectado, voc poder utilizar os recursos de compartilhamento de arquivos do Dreamweaver, como devolver ou retirar arquivos, e as Design Notes, entre outros. possvel alterar as informaes relativas conexo a qualquer momento, seguindo as etapas enumeradas e digitando as novas informaes na caixa de dilogo Conexo WebDAV. Como utilizar o Dreamweaver com o Visual SourceSafe A partir da janela do site do Dreamweaver, possvel acessar um banco de dados existente do Visual SourceSafe (VSS). Uma vez conectado, voc poder utilizar os recursos de transferncia de arquivos do Dreamweaver.
Nota: Para poder utilizar este recurso com o Windows, necessrio contar com a verso 6 do Microsoft Visual SourceSafe Client instalada. Para poder utilizar este recurso no Macintosh, necessrio contar com a verso 1.1.0 do cliente MetroWerks SourceSafe instalada. Os usurios do MetroWerks Visual SourceSafe podem acessar os bancos de dados da verso 5.0 do Microsoft SourceSafe, mas no os da verso 6.0. Se desejar garantir o acesso de toda a sua equipe a qualquer banco de dados VSS em todas as plataformas, utilize um banco de dados da verso 5.0. Para obter mais informaes, consulte a documentao do SourceSafe.
136
Captulo 4
Para se conectar a um banco de dados SourceSafe:
Na caixa de dilogo Denio do site, selecione a categoria Informaes remotas. No menu pop-up Acesso, escolha Banco de dados SourceSafe. Se desejar, selecione a opo Retirar os arquivos na abertura, para retirar automaticamente os arquivos na abertura. Clique em Denies.
2 3
Aparecer uma caixa de dilogo Abrir o banco de dados SourceSafe.

5
No campo Caminho do banco de dados, clique em Procurar, para procurar o banco de dados VSS desejado, ou digite o caminho completo do arquivo. O arquivo escolhido se transformar no arquivo srcsafe.ini e ser utilizado para inicializar o SourceSafe.
No campo Projeto, digite o projeto do banco de dados VSS que deseja utilizar como diretrio raiz do site remoto. Nos campos Nome de usurio e Senha, digite o seu nome de usurio e senha para login no banco de dados selecionado. Se no souber o seu nome de usurio e senha, informe-se com o administrador do sistema.
8 9
Clique em OK e retorne janela do site. Escolha Site > Conectar, ou clique no boto Conectar, na barra de ferramentas da janela do site, para se conectar ao site remoto. Para se desconectar, escolha Site > Desconectar, ou clique no boto Desconectar.
137
Como solucionar problemas de configurao do site remoto

Um servidor da Web pode ser congurado de vrias maneiras. Esta seo contm informaes sobre algumas questes comuns que podem ocorrer durante a congurao de um site remoto e como solucion-las.
A implementao de FTP do Dreamweaver pode no funcionar corretamente

em determinados servidores proxy, rewalls 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.
A implementao de FTP do Dreamweaver diferente daquela de alguns

aplicativos de FTP comuns. Em particular, necessrio conectar-se pasta raiz do sistema remoto e no possvel navegar pelo sistema de arquivos remotos. Em muitos aplicativos, possvel conectar-se a qualquer diretrio remoto e, em seguida, navegar pelo sistema de arquivos remotos, para localizar o diretrio desejado.
Se estiverem ocorrendo problemas na conexo e voc tiver especicado o

diretrio do host utilizando uma barra inclinada simples (/), possvel que voc precise especicar um caminho relativo no diretrio ao qual estiver se conectando, assim como a pasta raiz do site remoto. Por exemplo: se a pasta raiz remota for um diretrio de nvel mais elevado, possvel que voc precise especicar ../../ correspondente ao diretrio do host.
s vezes, nas conexes lentas, o valor padro de tempo limite de FTP,

equivalente a 60 segundos, resultar em um nmero excessivo de ultrapassagens do tempo limite. Se ocorrer um nmero freqente de tempo limite, aumente este valor (nas preferncias do site). Mas no o aumente demais, seno ser preciso aguardar um longo tempo quando uma conexo realmente no puder ser estabelecida. Os mais teis so os limites de tempo de 30 a 120 segundos.
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. Os caracteres especiais em nomes de pastas ou arquivos tambm podem, s vezes, impedir que o Dreamweaver crie um mapa do site.
No Macintosh, os nomes de arquivos no podem conter mais de 31 caracteres.

Se ocorrerem problemas com nomes longos de arquivos, renomeie-os com designaes mais curtas.
138
Captulo 4
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 provocam qualquer 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, pode ocorrer uma discrepncia devida ao apelido.
Em geral, quando ocorrer um problema em uma transferncia de FTP, examine

o registro do FTP, escolhendo Janela > Registro de FTP do site, na janela do documento (no Windows), ou Site > Registro do FTP (no Macintosh). Caso aparea uma mensagem de erro como: no possvel colocar o arquivo, possvel que no haja espao no site remoto. Verique o registro do FTP, para obter informaes mais detalhadas.
Como utilizar as opes de devoluo e retirada de arquivos

Quando estiver trabalhando em um ambiente de equipe, possvel retirar e devolver arquivos dos servidores local e remoto e utilizar as Design Notes para adicionar comentrios e notas para os seus colegas. A retirada de um arquivo equivale a declarar: Estou trabalhando com este arquivo no o toque!. Quando um arquivo for retirado, o Dreamweaver exibir uma marca de seleo ao lado do cone do arquivo, na janela do site. Uma marca de seleo verde indica que o arquivo foi retirado por voc, enquanto que uma marca vermelha signica que o arquivo foi retirado por um outro membro da equipe. O nome da pessoa que retirou o arquivo tambm ser exibido na janela do site. A devoluo de um arquivo possibilitar aos outros membros da equipe retirar e edit-lo. O status da verso local se tornar somente de leitura, a m de evitar eventuais alteraes enquanto algum o mantiver retirado. No servidor remoto, o Dreamweaver no modica o status dos arquivos retirados para somente de leitura. Caso os arquivos sejam transferidos com um aplicativo diferente do Dreamweaver, ser possvel sobrescrever os arquivos retirados. No entanto, nos outros aplicativos, o arquivo .LCK estar visvel ao lado do arquivo retirado na hierarquia de arquivos, a m de evitar acidentes deste gnero. A devoluo e retirada pode ser ativada em alguns sites e desativada em outros. Para obter mais informaes sobre a transferncia de arquivos entre os sites local e remoto sem devolv-los ou retir-los, consulte Como obter arquivos de um servidor remoto na pgina 151 e Como colocar arquivos em um servidor remoto na pgina 152.
139
Como configurar o sistema de devolues e retiradas Para poder utilizar o sistema de devolues e retiradas, necessrio associar o site local a um FTP remoto ou servidor de rede (consulte Como associar um servidor remoto a um site local na pgina 132). Em seguida, necessrio congurar as seguintes opes.
Para definir as opes de devoluo e retirada:
1 2 3
Escolha Site > Denir os sites e, em seguida, clique em Editar. Na lista de categorias esquerda, clique em Informaes remotas. Siga qualquer um dos procedimentos abaixo: trabalhando em equipe (ou sozinho, mas utilizando vrios computadores diferentes). Esta opo til para informar aos outros usurios sobre a retirada de um arquivo para edio, ou para alertar a si prprio que uma verso mais recente de um arquivo foi deixada em um outro computador. Consulte Como utilizar as opes de devoluo e retirada de arquivos na pgina 139.
Selecione a opo Ativar a devoluo e retirada de arquivos, se estiver
Selecione a opo Retirar os arquivos na abertura, se desejar retirar os arquivos

automaticamente quando clicar duas vezes para abri-los na janela do site. A utilizao da opo Arquivo > Abrir, para abrir um arquivo no o retira, mesmo quando esta estiver selecionada.
Digite um nome de retirada.

O nome da retirada aparecer na janela do site, juntamente com quaisquer arquivos que tiverem sido retirados, possibilitando que outros membros da equipe localizem-nos quando necessitarem de um desses arquivos. Se voc trabalhar sozinho utilizando vrios computadores, utilize um nome de retirada diferente em cada computador (por exemplo: AliceR-MacCasa e AliceRPCEscritrio), o que permitir saber onde est a ltima verso do arquivo, caso se esquea de devolv-lo.
Digite um endereo de correio eletrnico.

Se voc digitar um endereo de correio eletrnico e, em seguida, retirar um arquivo, o seu nome aparecer na janela do site, ao lado do arquivo, como um link clicvel (azul e sublinhado). Se um membro da equipe clicar no link, o programa padro do correio eletrnico desta pessoa exibir uma nova mensagem. O campo Para: conter o endereo de correio eletrnico, enquanto que o campo Assunto: conter os respectivos arquivo e nome do site.
140
Captulo 4
Como devolver e retirar os arquivos de um servidor remoto Utilize a janela do site ou o menu Site, na janela do documento, para devolver e retirar arquivos de um servidor remoto. Se um arquivo for retirado, mas voc decidir no edit-lo (ou preferir descartar as alteraes feitas), possvel desfazer a retirada, para que o arquivo no servidor que disponvel para os outros membros da equipe que queiram utiliz-lo.
Nota: Se for selecionado Site > Devolver, ou Site > Retirar enquanto a janela do documento estiver ativa, e o arquivo no fizer parte do site que estiver aberto, o Dreamweaver tentar determinar a qual dos sites definidos localmente pertence o arquivo; se ele pertencer a apenas um site local, o Dreamweaver abrir esse site e, em seguida, executar a operao de devoluo ou retirada. Para retirar arquivos de um servidor remoto:
Escolha o site desejado no menu pop-up Sites atuais, situado no alto da janela do site. Retire os arquivos, utilizando um dos mtodos abaixo: da janela do site.
Selecione um ou mais arquivos e clique no cone de Retirar, na parte superior No menu contextual ou no menu Site, escolha Retirar.
3
Para efetuar o download dos arquivos dependentes juntamente com os selecionados, clique em Sim no aviso. Para que no seja efetuado o download dos arquivos dependentes, clique em No.
Para devolver arquivos a um servidor remoto:
Escolha o site desejado no menu pop-up Sites atuais, situado na parte superior da janela do site. Selecione um ou mais arquivos retirados ou novos arquivos, no painel Local, e siga um dos procedimentos abaixo:
Clique no cone de Devolver, na parte superior da janela do site. Escolha Devolver, no menu contextual ou no menu Site.
Os arquivos retirados so indicados com uma marca de seleo verde. Se um arquivo for acompanhado por uma marca de seleo vermelha, porque outro usurio o retirou; no devolva esses arquivos. Um smbolo de cadeado indica um arquivo somente de leitura (no Windows) ou bloqueado (no Macintosh). Os novos arquivos no contm nem uma marca de seleo nem um smbolo de cadeado ao lado.
141
Para carregar os arquivos dependentes juntamente com o arquivo selecionado, clique em Sim no aviso. Para que os arquivos dependentes no sejam carregados, clique em No. sempre conveniente efetuar o upload dos arquivos dependentes ao devolver um novo arquivo, mas se as verses mais recentes dos dependentes j estiverem no servidor remoto, no ser preciso carreg-los novamente.
Para desfazer uma retirada:
Selecione o arquivo e escolha Site > Desfazer a retirada, ou clique com o boto direito do mouse (no Windows), ou pressione a tecla Control e clique no arquivo (no Macintosh), e escolha Desfazer a retirada, no menu contextual. A cpia local do arquivo se tornar somente de leitura e quaisquer alteraes feitas sero perdidas.
Para devolver ou retirar um arquivo ativo:
Na janela do documento, escolha Site > Devolver, ou Site > Retirar, ou utilize os cones da barra de ferramentas. Se o arquivo ativo for retirado, a verso aberta deste ser substituda pela nova verso retirada. Se o arquivo ativo for devolvido, ele dever ser automaticamente salvo antes da devoluo, dependendo das opes de preferncia denidas; consulte Preferncias do site na pgina 117.
Sobre as Design Notes

possvel controlar as informaes adicionais relativas aos seus documentos (como nomes de arquivos de origem de imagens e comentrios sobre o status do arquivo), atravs do comando Design Notes. Por exemplo: se um documento for copiado de um site para outro, possvel adicionar Design Notes sobre esse documento, informando que seu original est na outra pasta do site. Posteriormente, se voc (ou outro usurio) atualizar esse documento, voc ser informado que necessrio atualizar tambm a pgina original. O comando Design Notes pode ser utilizado tambm para controlar informaes sensveis que no podem ser colocadas no interior de um documento por motivos de segurana. Por exemplo: podem ser includas informaes sobre a criao do documento ou notas sobre a escolha de um determinado preo ou congurao, ou ainda quais fatores de marketing inuenciaram uma deciso sobre desenho. possvel ver quais arquivos apresentam Design Notes anexadas, na janela do site: haver um cone de Design Notes na coluna Notas da visualizao dos arquivos do site.
142
Captulo 4
Como salvar as informaes sobre o arquivo em Design Notes possvel criar um arquivo de Design Notes para cada documento ou modelo do site. Observe que, se forem adicionadas Design Notes a um modelo, os documentos criados com esse modelo no as herdaro. Pode-se criar tambm as Design Notes para miniaplicativos, controles ActiveX, imagens, lmes Flash, objetos Shockwave e campos de imagem nos documentos.
Para configurar as Design Notes para o seu site:
1 2
Escolha Site > Denir os sites e, em seguida, clique em Editar. Na lista de categorias, esquerda, clique em Design Notes. ainda no esteja selecionada). Quando a opo Manter as Design Notes estiver selecionada, podero ser criadas Design Notes para os arquivos do site. Quando um arquivo for copiado, movido, renomeado ou excludo, as Design Notes a ele associadas tambm sero copiadas, movidas, renomeadas ou excludas.
Ative as Design Notes para o site, selecionando Manter as Design Notes (caso
Decida se as Design Notes associadas ao site sero carregadas com o restante

dos documentos, selecionando ou desmarcando a opo Efetuar o upload das Design Notes para compartilhar. Quando a opo Efetuar o upload das Design Notes para compartilhar tiver sido selecionada, voc poder compartilhar as Design Notes com as outras pessoas de sua equipe. Quando um arquivo for colocado ou obtido, o Dreamweaver automaticamente colocar ou obter o arquivo de Design Notes a ele associado. Caso esteja trabalhando sozinho no site, voc poder cancelar a seleo desta opo para melhorar o desempenho das transferncias de arquivos; quando a opo for desmarcada, as Design Notes sero mantidas localmente, mas o seu upload no ser feito com os arquivos.
3
Clique em OK.
Para adicionar Design Notes a um documento:
Enquanto o documento estiver ativo na janela do documento, escolha Arquivo > Design Notes. Tambm possvel selecionar o arquivo na janela do site e, em seguida, escolher Arquivo > Design Notes, ou clicar duas vezes na coluna Notas. Se o arquivo residir em um site remoto, retire primeiro o arquivo e, em seguida selecione-o na pasta local. Consulte Como devolver e retirar os arquivos de um servidor remoto na pgina 141 ou Como obter e colocar arquivos na pgina 151.
143
Na guia Informaes bsicas, adicione notas de vrios tipos:
Escolha o status do documento no menu pop-up Status. Digite os comentrios no campo de texto Notas. Clique no cone de data (logo acima do campo de texto Notas), para inserir a
data atual local.
Para que o arquivo de Design Notes seja sempre aberto simultaneamente

abertura do arquivo, selecione Mostrar quando o arquivo estiver aberto.
3
Na guia Todas as informaes, adicione outras chaves e valores que possam ser teis para os outros programadores do site. Por exemplo: denomine uma chave Autor (no campo Nome) e dena o valor como sendo Henl (no campo Valor). Clique no boto com o sinal de adio (+) para adicionar um par chave/ valor; selecione um par e clique no boto com o sinal de subtrao () para remov-lo. Clique em OK, para salvar as notas. As notas inseridas so salvas em uma subpasta denominada _notes, na mesma localizao do arquivo. O nome do arquivo ser o mesmo do arquivo do documento, alm da extenso .mno. Por exemplo: se o nome do arquivo for index.html, o arquivo de Design Notes a ele associado ser denominado index.html.mno.
Para adicionar Design Notes a um objeto:
Escolha Design Notes, no menu contextual do objeto. Abra o menu contextual correspondente ao objeto, clicando com o boto direito do mouse (no Windows), ou pressionando Control e clicando no objeto (no Macintosh). Siga as etapas 2 a 4, para adicionar as Design Notes a um documento. Observe que um arquivo de Design Notes de um objeto salvo em uma subpasta _notes, no mesmo diretrio que o arquivo de origem do objeto, que no est necessariamente no mesmo diretrio do documento no qual aparece o objeto.
Para abrir as Design Notes associadas a um arquivo, siga um dos procedimentos abaixo:
Selecione um arquivo na janela do site ou abra o prprio arquivo e, em seguida,

escolha Arquivo > Design Notes. As Design Notes associadas ao arquivo sero abertas.
Na coluna Notas da janela do site, clique duas vezes no cone amarelo das
Design Notes.
144
Captulo 4
Para atribuir um status no contido no menu pop-up Status:
1 2 3 4 5
Abra as Design Notes correspondentes a um arquivo ou objeto. Clique na guia Todas as informaes. Clique no boto com o sinal de adio (+). No campo Nome, digite a palavra status. No campo Valor, digite o status. Se j existir um valor de status, ele ser substitudo pelo novo valor. Clique na guia Informaes bsicas e observe que o valor do novo status aparecer no menu pop-up Status.
Nota: possvel constar apenas um novo valor no menu de status de cada vez. Se esse procedimento for realizado novamente, o novo valor de status inserido na primeira vez ser substitudo pelo novo valor includo posteriormente.
Para desativar as Design Notes:
1 2 3 4
Escolha Site > Denir os sites. Na caixa de dilogo Denir os sites, selecione o site e clique em Editar. Na caixa de dilogo Denio do site, clique em Design Notes. Desmarque a opo Manter as Design Notes. O cancelamento da seleo dessa opo desativar o recurso Design Notes. Se esta opo for desmarcada e, em seguida, voc clicar em Limpar, todos os arquivos de Design Notes do site sero excludos.
Clique em OK. Aparecer uma caixa de dilogo, indagando se voc gostaria de excluir os arquivos de Design Notes existentes. Clique em Sim, para exclu-los, ou em No, para manter esses arquivos.
Para utilizar as Design Notes apenas localmente:
1 2 3
Escolha Site > Denir os sites. Na caixa de dilogo Denir os sites, selecione o site e clique em Editar. Na caixa de dilogo Denio do site, selecione a opo Manter as Design Notes, na caixa Design Notes. Desmarque a opo Efetuar o upload para compartilhamento. As Design Notes no sero transferidas para o site remoto quando os arquivos forem devolvidos/retirados. Voc ainda poder adicionar e modicar localmente as Design Notes do site.
145
Para excluir as Design Notes no associadas ao site:
1 2 3 4
Escolha Site > Denir os sites. Na caixa de dilogo Denir os sites, selecione o site e clique em Editar. Na caixa de dilogo Denio do site, clique em Design Notes. Clique em Limpar. O Dreamweaver solicitar que verique 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, ambos sero excludos; por essa razo, geralmente os arquivos rfos de Design Notes ocorrero apenas quando um arquivo for excludo ou renomeado fora do Dreamweaver.
Nota: Se a opo Manter as Design Notes for cancelada antes de clicar em Limpar, o Dreamweaver excluir todos os arquivos de Design Notes associados ao site.
Como utilizar as colunas de visualizao de arquivos com as Design Notes possvel personalizar as colunas que so exibidas nas listas Pasta local e Site remoto, na janela do site. possvel reordenar colunas, adicionar novas colunas (at, no mximo, 10 colunas), excluir ou ocultar colunas, associar Design Notes aos dados de colunas e designar colunas que podero ser compartilhadas com todos os usurios conectados ao site. As colunas padro so Nome, Notas, Tamanho, Tipo, Modicado e Retirado por. possvel ordenar de acordo com qualquer coluna, clicando no respectivo cabealho, na janela do site. A ao de clicar mais de uma vez em uma coluna inverter a ordem (de ascendente para descendente, ou vice-versa) segundo a qual a coluna classicada.
Nota: No possvel excluir, renomear ou associar uma Design Note a uma coluna padro (Nome, Notas, Tamanho, Tipo, Modificado e Retirado por). possvel alterar a ordenao e alinhamento destas colunas, assim como ocult-las, com exceo da coluna Nome, que no pode ser oculta. Para acessar as opes das colunas de visualizao de arquivos, siga um dos procedimentos abaixo:
Escolha Exibir > Colunas de visualizao de arquivos, na janela do site (no

Windows), ou Site > Exibir os arquivos do site > Colunas de visualizao de arquivos (no Macintosh).
Escolha > Denir os sites e, em seguida, clique em Editar. Em seguida,

selecione Colunas de visualizao de arquivos, na caixa de dilogo Denio do site.
146
Captulo 4
Na janela do site, clique com o boto direito do mouse (no Windows), ou

pressione a tecla Control e clique na coluna (no Macintosh) e selecione a opo Colunas de visualizao de arquivos.
Aparecer a caixa de dilogo Denio do site, que exibir as opes das colunas de visualizao de arquivos.
Para alterar a ordem das colunas:
Na tela Colunas de visualizao de arquivos, na caixa de dilogo Denio do site, selecione o nome de uma coluna. Clique no boto de seta acima ou seta abaixo, para alterar a posio da coluna selecionada. possvel alterar a ordem de qualquer coluna, exceto Nome, que sempre permanecer na posio original.
Para adicionar uma nova coluna:
Na tela Colunas de visualizao de arquivos, na caixa de dilogo Denio do site, clique no boto com o sinal de adio (+). No campo Nome da coluna, digite o nome da coluna. Escolha um valor no menu pop-up Associar Design Note, ou digite um outro valor qualquer. necessrio associar uma nova coluna Design Note, para que haja dados a serem exibidos na janela do site.
2 3
147
Escolha uma opo de alinhamento: esquerda, direita ou no centro. Esta opo determinar a maneira como o texto ser alinhado na coluna. Para mostrar ou ocultar a coluna, selecione ou cancele a seleo da opo Mostrar. Para compartilhar a coluna com todos os usurios que estiverem conectados ao site, selecione a opo Compartilhar com todos os usurios deste site.
Para excluir uma coluna que tiver sido adicionada:
1 2
Selecione a coluna que deseja excluir. Clique no boto com o sinal de subtrao (-).
Nota: A coluna ser excluda imediatamente e sem confirmao, portanto certifique-se de desejar exclui-la, antes de clicar no boto com o sinal de subtrao (-).
Como utilizar as Design Notes no Fireworks e no Dreamweaver Se uma imagem for aberta no Macromedia Fireworks 4.0 e exportada com outro formato, o Fireworks salvar automaticamente, no arquivo de Design Notes, o nome do arquivo de origem inicial. Por exemplo: se voc abrir minha_casa.png no Fireworks e export-lo para minha_casa.gif, o Fireworks criar automaticamente um arquivo de Design Notes chamado minha_casa.gif.mno, contendo o nome do arquivo original, como uma URL absoluta le:. Por exemplo: as Design Notes para minha_casa.gif devem conter a linha abaixo:
fw_source="file:///Mydisk/sites/assets/orig/minha_casa.png"
Se a imagem contiver pontos ativos ou imagens cambiveis, a origem de HTML desses itens tambm ser adicionada ao arquivo de Design Notes. Quando a imagem for importada para o Dreamweaver, o arquivo de Design Notes ser automaticamente copiado para o site, juntamente com a imagem. Quando a imagem for selecionada no Dreamweaver e voc decidir edit-la no Fireworks (consulte Como iniciar um editor externo na pgina 326), este abrir o arquivo original para ser editado. Para obter mais informaes, consulte Utilizao do Dreamweaver e do Fireworks juntos na pgina 307.
148
Captulo 4
Como utilizar os relatrios para melhorar o fluxo de trabalho

Utilize o comando Site > Relatrios, para melhorar a colaborao entre os membros de uma equipe da Web. possvel executar relatrios de uxo de trabalho que exibam as pessoas que retiraram certos arquivos e quais destes contam com Design Notes a eles associadas. possvel renar ainda mais os relatrios das Design Notes, especicando os parmetros nome/valor. Para obter mais informaes sobre a execuo de outros tipos de relatrios, consulte Como utilizar os relatrios para testar um site na pgina 550.
Nota: necessrio contar com uma conexo definida a um site remoto, para poder executar os relatrios de fluxo de trabalho. Para executar um relatrio Retirado por:
Escolha Site > Relatrios. Aparecer a caixa de dilogo Relatrios. Escolha uma opo no menu pop-up Relatrio sobre. possvel optar por preparar um relatrio sobre um documento, um site inteiro, determinados arquivos de um site ou uma pasta especca. Em Fluxo de trabalho, selecione Retirado por. Clique no boto Denies do relatrio. Aparecer a caixa de dilogo Retirado por. Digite o nome do membro de uma equipe e clique em OK.
3 4
149
Clique em Executar. O relatrio ser executado e a caixa de dilogo Relatrios exibir um resumo dos arquivos que tiverem sido retirados pela pessoa especicada.
Para executar um relatrio sobre determinadas Design Notes:
Escolha Site > Relatrios. Aparecer a caixa de dilogo Relatrios. Escolha uma opo no menu pop-up Relatrio sobre. possvel optar por preparar um relatrio sobre um documento, um site inteiro, determinados arquivos de um site ou uma pasta especca. Em Fluxo de trabalho, selecione Design Notes. O boto Denies do relatrio se tornar disponvel. Clique no boto Denies do relatrio. Aparecer a caixa de dilogo Design Notes.
Digite um ou mais pares nome/valor e selecione valores de comparao nos respectivos menus pop-up. Por exemplo: se especicar status contm rascunho, o relatrio procurar os arquivos cujas Design Notes apresentam o status de rascunho.
6 7
Clique em OK, para retornar caixa de dilogo Relatrios. Clique em Executar, para executar o relatrio.
150
Captulo 4
Como obter e colocar arquivos

Se voc estiver trabalhando em um ambiente com vrios usurios, utilize o sistema de devolues e retiradas para transferir os arquivos entre os sites local e remoto (consulte Como utilizar as opes de devoluo e retirada de arquivos na pgina 139). Caso esteja trabalhado sozinho no site remoto, em vez do sistema mencionado, possvel utilizar os comandos Obter e Colocar, para transferir os arquivos sem devolver ou retir-los.
Nota: Se voc selecionar a opo Site > Obter, ou Site > Colocar enquanto a janela do documento estiver ativa, e o arquivo no fizer parte do site que estiver aberto, o Dreamweaver tentar determinar a qual dos sites definidos localmente pertence o arquivo; se ele pertencer a apenas um site local, o Dreamweaver abrir esse site e, em seguida, executar a operao de obteno ou colocao.
Como obter arquivos de um servidor remoto Obter os arquivos copia-os de um site remoto para o site local. Se for utilizado o sistema de devolues e retiradas (isto , se a opo Ativar a devoluo e a retirada de arquivos estiver acionada), o comando Obter produzir uma cpia local somente de leitura do arquivo; os arquivos continuaro disponveis no site remoto para os outros membros da equipe retir-los. Se a opo Ativar a devoluo e retirada de arquivos estiver desativada, a obteno de um arquivo transferir uma cpia com os privilgios de leitura e gravao. Consulte Como utilizar as opes de devoluo e retirada de arquivos na pgina 139.
Nota: Se voc estiver trabalhando em um ambiente de equipe isto , se outras pessoas estiverem utilizando os mesmos arquivos no recomendada a desativao de Ativar a devoluo e retirada de arquivos. Em particular, se as outras pessoas estiverem utilizando o sistema de devolues e retiradas no site, voc tambm dever utilizar o mesmo sistema.
Observe que os arquivos copiados quando for clicada a opo Obter so aqueles selecionados no painel ativo da janela do site. Se o painel remoto estiver ativo, o arquivos remotos selecionados sero copiados para o site local; se o painel local estiver ativo, as verses remotas dos arquivos locais escolhidos sero copiadas no site local. Se voc no estiver trabalhando em um ambiente de equipe e desejar obter arquivos com privilgios de leitura e gravao, desative a opo Ativar a devoluo e retirada de arquivos no site; consulte Como associar um servidor remoto a um site local na pgina 132. Para obter apenas os arquivos cuja verso remota for mais recente que a local, utilize o comando Sincronizar; consulte Como sincronizar os arquivos nos sites local e remoto na pgina 154.
151
Para obter arquivos de um servidor remoto:
1 2 3
Escolha Janela > Arquivos do site, para abrir a janela do site. No alto da janela do site, escolha o site desejado, no menu pop-up Sites atuais. Caso seja utilizado o FTP para transferir arquivos, clique em Conectar, a m de abrir uma conexo com o servidor remoto. Se j houver uma conexo aberta (o boto indicar Desconectar), ignore essa etapa. Caso os arquivos remotos j estejam visveis no painel remoto devido a uma conexo anterior, no ser preciso clicar em Conectar; quando se clica em Obter, o Dreamweaver estabelece automaticamente a conexo.
Selecione os arquivos dos quais deseja efetuar o download. Normalmente, eles so escolhidos no painel remoto, mas, em vez disso, selecione os arquivos correspondentes no painel Local, se preferir. Clique em Obter, ou escolha Obter, no menu contextual ou no menu Site. Se o arquivo estiver aberto na janela do documento, possvel escolher Site > Obter, nessa janela. Para efetuar o download dos arquivos dependentes, clique em Sim; para ignorlos, clique em No. Se j houver cpias locais dos arquivos dependentes, clique em No. Para evitar perguntas sobre os arquivos dependentes em downloads posteriores, selecione a opo No me pergunte novamente.
Nota: Para interromper a transferncia de arquivos a qualquer momento, clique no boto Parar a tarefa atual (o sinal de parada vermelho com um X branco, no canto inferior direito da janela do site), ou pressione a tecla Esc (no Windows), ou as teclas Command e ponto (no Macintosh). possvel que a transferncia no pare imediatamente.
O Dreamweaver 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 exibir o registro, escolha Janela > Registro de FTP do site, na janela do site (no Windows), ou Site > Registro de FTP do site (no Macintosh). Como colocar arquivos em um servidor remoto A utilizao do comando Colocar copia arquivos do site local para o site remoto, geralmente sem alterar o status de retirada dos arquivos. H duas situaes comuns nas quais o comando Colocar utilizado em vez de Devolver: quando voc no estiver em um ambiente com muitos usurios e no estiver utilizando o sistema de devolues e retiradas; ou quando desejar colocar a verso atual do arquivo no servidor mas continuar a edit-lo.
Nota: Caso seja colocado um arquivo que ainda no existia no site remoto, e se for utilizado o sistema de devolues e retiradas, o arquivo ser copiado no site remoto e, em seguida, retirado, para que voc possa continuar a edit-lo.
152
Captulo 4
Se desejar colocar um arquivo em um servidor remoto e devolv-lo, utilize o comando Devolver. Consulte Como devolver e retirar os arquivos de um servidor remoto na pgina 141. Para colocar apenas os arquivos cuja verso local for mais recente do que a remota, consulte Como sincronizar os arquivos nos sites local e remoto na pgina 154.
Nota: 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 convertero esses caracteres durante o processo do upload, provocando a ruptura dos links entre os arquivos. Para colocar arquivos em um servidor remoto:
1 2
Escolha Janela > Arquivos do site, para abrir a janela do site. No alto da janela do site, escolha o site desejado no menu pop-up com a lista de sites atuais. Se for utilizado o FTP para a transferncia dos arquivos, clique em Conectar, para abrir uma conexo com o servidor remoto, que lhe permitir ver o que h no site remoto antes de transferir os arquivos. Contudo, no necessrio clicar em Conectar; quando voc clicar em Colocar, o Dreamweaver estabelecer automaticamente a conexo. Selecione os arquivos dos quais deseja efetuar o upload. Normalmente, eles so escolhidos no painel local, mas, em vez disso, selecione os arquivos correspondentes no painel Remoto, se preferir. Clique em Colocar, ou escolha Colocar, no menu contextual ou no menu Site. Se o arquivo no tiver sido salvo, possvel que aparea uma caixa de dilogo (dependendo da denio da preferncia, no painel Site, na caixa de dilogo Preferncias), que permite salvar o arquivo antes de coloc-lo no servidor remoto. Para salvar o arquivo, clique em Sim; para colocar a verso salva anteriormente no servidor remoto, clique em No. Se preferir no salvar o arquivo, as alteraes feitas aps o ltimo salvamento no sero colocadas no servidor remoto. Contudo, o arquivo continuar aberto para que seja ainda possvel salvar o arquivo depois de coloc-lo no servidor.
5 6
Para efetuar o upload dos arquivos dependentes, clique em Sim; para ignorlos, clique em No. Se j houver cpias locais dos arquivos dependentes, clique em No. Para evitar perguntas sobre os arquivos dependentes em uploads posteriores, selecione a opo No me pergunte novamente.
Nota: Para interromper a transferncia de arquivos a qualquer momento, clique no boto Parar a tarefa atual (o sinal de parada vermelho com um X branco, no canto inferior direito da janela do site), ou pressione a tecla Esc (no Windows), ou as teclas Command e ponto (no Macintosh). possvel que a transferncia no pare imediatamente.
153
Se o arquivo estiver aberto na janela do documento, ser possvel escolher Site > Colocar, na janela do documento. O Dreamweaver 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 exibir o registro, escolha Janela > Registro do FTP, na janela do site (no Windows), ou Site > Registro do FTP (no Macintosh).
Como sincronizar os arquivos nos sites local e remoto

Depois que os arquivos forem criados nos sites local e remoto, possvel sincroniz-los. Utilize o comando Site > Sincronizar, para transferir as verses mais recentes dos seus arquivos de e para o site remoto. Caso o site remoto seja um servidor de FTP (em vez de um servidor de rede), a sincronizao dos arquivos utilizar o FTP. Para obter mais informaes sobre o uso do FTP, consulte Como associar um servidor remoto a um site local na pgina 132. Antes de sincronizar os sites, o Dreamweaver permite vericar quais arquivos sero colocados ou obtidos no servidor remoto. O programa tambm conrmar quais arquivos foram atualizados aps o trmino da sincronizao. Para vericar quais arquivos so mais recentes no site local ou no site remoto, sem sincronizao, escolha Editar > Selecionar um local mais novo, ou Editar > Selecionar um remoto mais novo (no Windows, na janela do site), ou Site > Exibir os arquivos do site > Selecionar um local mais novo, ou Site > Exibir os arquivos do site > Selecionar um remoto mais novo (no Macintosh).
Para sincronizar os arquivos:
Se forem sincronizados arquivos ou pastas especcas, em vez do site inteiro, selecione esses arquivos ou pastas no painel local ou remoto da janela do site. Escolha Site > Sincronizar, na janela do site (no Windows), ou na barra de menu (no Macintosh). Para sincronizar o site inteiro, escolha Site nome do site inteiro, no menu popup Sincronizar. Para sincronizar apenas os arquivos selecionados, escolha Apenas os arquivos locais selecionados (ou Apenas os arquivos remotos selecionados, se o painel remoto for o local onde tiver sido realizada a seleo mais recente).
154
Captulo 4
Escolha uma direo para a cpia dos arquivos: os arquivos locais com as datas de modicao mais recentes que os seus correspondentes remotos.
Selecione Colocar os arquivos mais novos no remoto, se desejar carregar todos Selecione Obter os arquivos mais novos do remoto, se desejar efetuar o
download de todos os arquivos remotos com datas de modicao mais recentes do que as de seus correspondentes locais.
Escolha Obter e colocar os arquivos mais novos, para colocar as verses mais
recentes de todos os arquivos nos sites remoto e local.
5
Decida se ir excluir os arquivos do site de destino que no tiverem correspondentes no site de origem. Esta opo no estar disponvel, se voc tiver selecionado a opo Obter e colocar. Se for escolhida a opo Colocar os arquivos mais novos no remoto e selecionada a opo Excluir, o Dreamweaver excluir os arquivos no site remoto que no tiverem correspondentes locais. Se for escolhido Obter os arquivos mais novos do remoto, o Dreamweaver excluir os arquivos no site local para os quais no haja correspondentes remotos.
Clique em Visualizar. Se a verso mais recente de cada arquivo escolhido j estiver em ambos os lugares e no houver nada a ser excludo, aparecer um alerta informando-lhe que a sincronizao no ser necessria.
Na caixa de dilogo Sincronizar os arquivos, verique quais arquivos deseja excluir, colocar e obter. Se no desejar que o Dreamweaver exclua, coloque ou obtenha um determinado arquivo, desmarque-o, clicando na caixa de seleo esquerda do mesmo (na coluna Ao). Clique em OK. Os arquivos sero automaticamente transferidos (e excludos, conforme a necessidade) e o Dreamweaver atualizar o status na caixa de dilogo Sincronizar os arquivos. Para salvar as informaes relativas vericao em um arquivo local, clique em Salvar o registro.
155
156
Captulo 4
CAPTULO 5
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como configurar um documento
Uma vez criado o site local, voc poder preench-lo com documentos. Se ainda no tiver denido um site, consulte Como utilizar o Dreamweaver para denir um novo site na pgina 108. Um documento (ou seja, uma pgina do seu site da Web) pode conter texto e imagens, bem como um contedo mais sosticado, como animao, vdeo, links a outros documentos e som. Durante a criao e edio dos documentos, o Dreamweaver gera automaticamente o cdigo-fonte HTML e JavaScript subjacente. Para examinar ou editar este cdigo, utilize um dos editores de cdigo do Dreamweaver: a visualizao de cdigo, na janela do documento, ou o inspetor de cdigo. Para obter mais informaes, consulte Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) na pgina 361). possvel criar novos documentos no Dreamweaver comeando a partir de pginas HTML em branco ou modelos. Alternativamente, possvel abrir e modicar documentos HTML criados em outros aplicativos. Consulte Como criar, abrir e salvar os documentos HTML na pgina 158. Quando denir um documento, voc pode denir elementos de pgina bsicos. Por exemplo: o ttulo de pgina identica o documento para o visitante do site. Geralmente, este aparece na barra de ttulo da janela do navegador. As imagens e a cor de fundo, as cores do texto e dos links personalizam a pgina e distinguem o texto comum do hipertexto. As propriedades de margem permitem que se especique os tamanhos das margens superiores e inferiores da pgina. Consulte Como denir as propriedades do documento na pgina 160. Durante a incluso do contedo, os objetos podem ser selecionados e modicados diretamente na janela do documento. Em alguns casos, talvez seja preciso selecionar os marcadores que representem os elementos da pgina que no esto visveis na janela do documento, como comentrios e scripts, por exemplo. Consulte Como selecionar os elementos na janela do documento na pgina 162. Ao criar os seus documentos, possvel executar a mesma tarefa diversas vezes, utilizando o painel Histrico. Consulte Sobre como automatizar as tarefas na pgina 168.
157
Como criar, abrir e salvar os documentos HTML

O Macromedia Dreamweaver oferece vria maneiras de se criar um documento. possvel criar novos documentos HTML em branco, abrir um documento HTML existente, mesmo se no tiver sido criado no Dreamweaver, ou criar um novo documento a partir de um modelo. Tambm possvel abrir arquivos de texto diferentes de HTML, como arquivos JavaScript, arquivos eletrnicos de texto simples ou arquivos de texto salvos em processadores ou editores de texto. No possvel usar todas as ferramentas de edio de documentos do Dreamweaver num documento de texto simples, mas possvel utilizar recursos bsicos de edio de texto. Dentre as razes para abrir documentos de texto, se destacam a edio e a depurao de cdigo JavaScript, o exame do contedo do arquivo de congurao do Dreamweaver, a abertura de uma mensagem eletrnica contendo um trecho de HTML a ser copiado e colado em outro documento.
Para criar um documento HTML em branco numa janela de documento nova, siga um dos procedimentos abaixo:
No Windows, selecione Arquivo > Novo a partir de, em uma janela de

documento existente, ou selecione Arquivo > Nova janela, na janela do site.
No Macintosh, escolha Arquivo > Novo.

Se a visualizao de cdigo (na janela do documento) ou o inspetor de cdigo for aberto, voc poder notar que no se trata de um documento em branco ele contm os tags html, head (cabealho) e body (corpo), para adiantar o trabalho. Durante a digitao na visualizao do projeto, na janela do documento, ou durante a insero de objetos, como tabelas e imagens, o editor de cdigo pode ser mantido aberto para que seja observada a criao do cdigo-fonte HTML. Para obter mais informaes sobre os editores de cdigo, consulte Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) na pgina 361.
158
Captulo 5
Para abrir um arquivo HTML j existente, siga um dos procedimentos abaixo:
Escolha Arquivo > Abrir. Se o arquivo tiver sido criado com o Microsoft Word, escolha Arquivo >
Importar > Importar HTML do Word. Se voc selecionar Importar HTML do Word, o Dreamweaver abrir o arquivo e permitir que se especique as opes para remover o cdigo HTML no correspondente, gerado pelo Word. O Microsoft Word 97 e as verses mais avanadas contam com o recurso Salvar como HTML, que adiciona cdigo HTML desnecessrio medida que converte o documento em HTML. Para obter mais informaes, consulte Como limpar o HTML do Microsoft Word na pgina 379.
Nota: No possvel importar diretamente um arquivo do Microsoft Word (com a extenso .doc) para o Dreamweaver. Se desejar importar o contedo de um arquivo do Word, inicie o Word e salve o arquivo como HTML antes de importar o arquivo HTML resultante para o Dreamweaver. Criar um novo documento a partir de um modelo:
Escolha Arquivo > Novo a partir de modelo. Aparecer uma caixa de dilogo com uma lista de modelos disponveis para o site atual. necessrio criar antes os modelos nos quais se basearo os documentos; consulte Como criar os modelos na pgina 411. Quando for criado um documento com base em um modelo, algumas partes do documento sero bloqueadas para que no sejam editadas. O arquivo do modelo determinar quais regies sero editveis ou no. Este procedimento assegura a consistncia quando o modelo for utilizado para diversos documentos em um site.
Selecione um modelo e clique em Selecionar. Ser criado um novo documento a partir do modelo. Cada parte editvel do novo documento ser envolvida por uma borda azul como padro. O documento inteiro ser envolvido por uma borda amarela (como padro), como um lembrete de que se baseia num modelo e que, por conseguinte, algumas partes dele esto bloqueadas. Para personalizar as cores realadas, consulte Como denir as preferncias de modelo na pgina 417. Para modicar as partes editveis de um modelo, selecione o contedo do alocador de espao na regio editvel e digite sobre o mesmo. Em alguns casos, no h qualquer contedo do alocador de espao na regio editvel. Neste casos, clique dentro da regio editvel.
Para se informar mais sobre como criar e trabalhar com os modelos, consulte Como reutilizar o contedo com os modelos e bibliotecas na pgina 409.
159
Para salvar um documento:
1 2
Escolha Arquivo > Salvar. Fornea um nome para o arquivo e navegue para onde deseja que ele seja salvo.
Nota: Quando a caixa de dilogo aparecer pela primeira vez, o Dreamweaver adicionar automaticamente as extenses .htm (no Windows) ou .html (no Macintosh) ao nome do arquivo. possvel controlar qual extenso de arquivo ser adicionada, atravs da utilizao de uma opo nas Preferncias gerais. Para salvar um arquivo como texto simples no Windows, atribua ao nome dele uma extenso .txt. Para salvar um arquivo como texto simples no Macintosh, basta remover a extenso .html do nome dele. Para que o Dreamweaver considere o arquivo como arquivo HTML novamente, salve-o de novo com uma extenso .html ou .htm. Depois que o arquivo for salvo como texto, o Dreamweaver no interpretar qualquer cdigo HTML no arquivo.
Quando salvar os documentos, sempre que possvel, evite utilizar espaos e caracteres especiais nos nomes de arquivos e pastas. 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 estes caracteres durante o upload, o que causa o rompimento dos links aos arquivos. Tambm no coloque um algarismo na primeira posio de um nome de um arquivo.
3
Clique no boto Salvar, para salvar o arquivo.
Como definir as propriedades do documento

Os ttulos de pginas, as cores e imagens de fundo, as cores do texto e dos links, alm das margens, so propriedades bsicas de todo documento HTML. O ttulo de pgina identica e nomeia o documento. Uma cor e imagem de fundo dene a aparncia geral do documento. As cores do texto e dos links ajudam os visitantes do site a distinguir entre texto comum e hipertexto, e tambm a examinar quais links foram ou no visitados. Como alterar o ttulo de uma pgina O ttulo de uma pgina HTML ajuda os visitantes do site a controlar o que esto exibindo enquanto navegam; ele serve tambm para identicar a pgina nas listas de histrico e marcadores do visitante. Se uma pgina no for intitulada, ela aparecer na janela do navegador e nessas listas como um Documento sem ttulo. Observe que o ato de salvar um documento e lhe dar um nome no corresponde ao ato de dar um ttulo a uma pgina. Para localizar todos os documentos sem ttulo no seu site, utilize o comando > Relatrios. Consulte Como criar relatrios na pgina 550.
160
Captulo 5
Para alterar o ttulo de uma pgina:
Escolha Modicar > Propriedades da pgina. Clique num espao vazio da pgina, para se assegurar de que nada ser selecionado.
Em seguida, no menu contextual, escolha Propriedades da pgina, clicando com o boto direito do mouse (no Windows), ou pressionando a tecla Control e clicando na visualizao do projeto, na janela do documento (no Macintosh).
Escolha Exibir > Contedo do cabealho e, quando aparecer, clique no boto

Ttulo e, em seguida, abra o inspetor de propriedades.
Escolha Exibir > Barra de ferramentas.

2 3
Digite o ttulo da pgina na caixa de texto Ttulo. Se estiver editando o ttulo na caixa de dilogo Propriedades da pgina, clique em OK. O ttulo aparecer na barra de ttulo da janela do documento e na barra de ferramentas, se esta for exibida. O nome do arquivo da pgina e a pasta na qual o arquivo ser salvo aparecero entre parnteses, ao lado do ttulo, na barra de ttulo. Um asterisco indica que o documento contm alteraes que ainda no foram salvas.
Como definir uma imagem ou cor de fundo da pgina Utilize a caixa de dilogo Propriedades da pgina, para denir uma imagem ou cor de fundo da pgina. Se utilizar tanto uma imagem de fundo quanto uma cor de fundo, a cor aparecer durante o download da imagem e, ento, esta cobrir a cor. Se a imagem de fundo contiver algum pixel transparente, a cor de fundo transparecer.
Para definir uma imagem ou cor de fundo:
Escolha Modicar > Propriedades da pgina, ou selecione Propriedades da pgina, no menu contextual, na visualizao do projeto da janela do documento. Para denir uma imagem de fundo, clique no boto Procurar e, em seguida procure e selecione a imagem. Uma alternativa digitar o caminho at a imagem de fundo, na caixa Imagem de fundo. O Dreamweaver colocar lado a lado (repetir) a imagem de fundo, se esta no preencher inteiramente a janela, exatamente como fazem os navegadores. Para evitar que isto acontea, utilize a opo Cascading Style Sheets, para desativar a repetio de imagens. Consulte Como utilizar as folhas de estilos CSS na pgina 267.
Para denir uma cor de fundo, clique na caixa Cor de fundo e selecione uma cor do seletor de cores. Consulte Como trabalhar com as cores na pgina 91.
161
Como definir as cores padro do texto Dena as cores padro do texto comum, links visitados ou no, e dos links ativos na caixa de dilogo Propriedades da pgina, ou escolha um esquema de cores predenido para congurar as cores do texto e do fundo da pgina. Consulte Como trabalhar com as cores na pgina 91.
Nota: A cor dos links ativos a cor assumida por um link quando este for clicado. Alguns navegadores da Web podem no usar a cor que voc especificar. Para definir as cores padro do texto, siga um dos procedimentos abaixo:
Escolha Modicar > Propriedades da pgina e, em seguida, escolha as cores para

as opes Cor do texto, Cor do link, Links visitados e Links ativos.
Escolha Comandos > Denir o esquema de cores e, em seguida, escolha uma

cor de fundo e um conjunto de cores para o texto e os links. A caixa de amostras exibe a aparncia do esquema de cores no navegador.
Nota: possvel que as pessoas daltnicas tenham dificuldades em ver certas combinaes de cores de texto e de fundo em contraste baixo. recomendvel mostrar a sua pgina para uma pessoa daltnica, para determinar se ela podem ser lida corretamente.
Como selecionar os elementos na janela do documento

Para selecionar um elemento na visualizao do projeto da janela do documento, clique nele. Se um elemento estiver invisvel, necessrio torn-lo visvel antes de escolh-lo.
Para selecionar os elementos, utilize as seguintes tcnicas:
Para selecionar um elemento visvel na janela do documento, clique nele ou

arraste o mouse sobre o elemento.
Para selecionar um elemento invisvel, escolha Exibir > Auxlios visuais >
Elementos invisveis (se o item de menu j no estiver selecionado) e, em seguida, clique no marcador do elemento na janela do documento. Alguns objetos aparecem na pgina em um lugar diferente de onde estiver inserido o cdigo correspondente. Por exemplo: uma camada pode estar em qualquer posio na pgina, mas o cdigo que a dene estar em uma posio xa. Quando os elementos invisveis estiverem sendo exibidos, o Dreamweaver exibir os marcadores na janela do documento, para mostrar a localizao do cdigo destes. A seleo de um marcador seleciona o elemento inteiro. Por exemplo: a seleo do marcador de uma camada seleciona a camada inteira. Consulte Sobre os elementos invisveis na pgina 164.
162
Captulo 5
Para selecionar um tag completo (inclusive o seu contedo, se houver), clique

em um tag do seletor de tags, situado na parte inferior esquerda da janela do documento. O seletor de tags aparecer somente quando a visualizao do projeto estiver ativa. O seletor sempre mostra os tags que contm a seleo atual ou a posio do ponto de insero. O tag mais esquerda o tag mais externo que contm a seleo atual ou a posio do ponto de insero. O tag seguinte est contido no tag mais externo, e assim por diante. O tag mais direita o tag mais interno, que contm a seleo atual ou o ponto de insero.
seletor de tags
Por exemplo: se denir um link para uma imagem, o cdigo HTML ter a seguinte aparncia:
<a href="http://www.macromedia.com"><img src="agraphic.gif"></a>
Quando a imagem na janela do documento for clicada, o seletor de tags ser alterado, exibindo os tags correspondentes seleo.
<body><a><img>
Como a imagem est selecionada, o tag <img> no seletor de tags aparecer em negrito. O ato de clicar neste tag no seletor de tags corresponde seleo do tag <img src="agraphic.gif">, num editor de cdigo. Para selecionar o link (o tag a e tudo que estiver contido nele) ao invs da imagem, clique na imagem na janela do documento e clique em <a>, no seletor de tags.
Para examinar o cdigo HTML associado ao texto ou objeto selecionado, siga um dos procedimentos abaixo:
Para exibir a visualizao de cdigo na janela do documento, selecione Exibir >

Cdigo, ou Exibir > Cdigo e projeto. Para obter mais informaes sobre a visualizao de cdigo, consulte Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) na pgina 361.
Para abrir o inspetor de cdigo (numa janela separada), selecione Janela >
Inspetor de cdigo. Geralmente, quando algum elemento for selecionado em um dos editores de cdigo (a visualizao de cdigo ou o inspetor de cdigo), ele tambm ser selecionado na janela do documento. Talvez seja preciso sincronizar as duas visualizaes para que a seleo aparea. Consulte Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) na pgina 361.
163
Sobre os elementos invisveis Alguns cdigos HTML no possuem uma representao visvel num navegador. Por exemplo: os tags comment no aparecem nos navegadores. Entretanto, enquanto voc estiver criando uma pgina pode ser til selecionar tais elementos invisveis, edit-los, mov-los e exclui-los. O Dreamweaver permite especicar se cones devem ser exibidos marcando a localizao de elementos invisveis, na visualizao do projeto da janela do documento. Para exibir ou ocultar os cones marcadores de elementos invisveis, escolha Exibir > Auxlios visuais > Elementos invisveis. A exibio de elementos invisveis permite selecion-los e alterar as suas propriedades no inspetor de propriedades. A sua ocultao permite examinar a pgina mais detalhadamente, da maneira em que ela aparecer no navegador. Observe que a exibio dos elementos invisveis pode alterar levemente o layout da pgina, movendo outros elementos alguns pixels. Portanto, para obter uma preciso no layout, oculte os elementos invisveis. Para indicar os marcadores de elementos que aparecero ao se escolher a opo Exibir > Auxlios visuais > Elementos invisveis, dena as opes nas preferncias de elementos invisveis. Por exemplo: possvel especicar que as ncoras com nome devero estar visveis, mas no as quebras de linha. possvel criar certos elementos invisveis (como comentrios, ncoras com nome e scripts) utilizando os botes na categoria Invisveis do painel Objetos. Consulte Como utilizar o painel Objetos na pgina 82. A seguir, possvel modicar estes elementos utilizando o inspetor de propriedades. Como definir as preferncias de elementos invisveis Utilize as preferncias de elementos invisveis, para especicar quais tipos de elementos que estaro visveis quando for selecionada a opo Exibir > Auxlios visuais > Elementos invisveis.
Para alterar as preferncias de elementos invisveis:
1 2
Escolha Editar > Preferncias e, em seguida, clique em Elementos invisveis. Selecione os elementos que devero se tornar visveis. A marca de seleo ao lado do nome do elemento, na caixa de dilogo, signica que ele estar visvel quando a opo Exibir > Auxlios visuais> Elementos invisveis for selecionada.
Para obter uma explicao de cada preferncia dos elementos invisveis, consulte a Ajuda do Dreamweaver.
164
Captulo 5
Como utilizar as guias visuais no processo de desenho

O Dreamweaver oferece diversos tipos de guias visuais para auxili-lo a projetar os documentos e prever (aproximadamente) que aparncia eles tero nos navegadores. Siga qualquer um dos procedimentos abaixo:
Ajuste instantaneamente a janela do documento ao tamanho desejado, para ver

como os elementos se ajustam pgina. Consulte Como redimensionar a janela do documento na pgina 77.
Utilize as rguas para que sirvam como um guia visual ao posicionar e

redimensionar as camadas ou tabelas.
Utilize uma imagem de rastreamento como fundo da pgina, para ajud-lo a

duplicar um desenho criado em um aplicativo de edio de imagens ou ilustraes, como o Macromedia Fireworks.
Utilize a grade para posicionar e redimensionar as camadas com preciso. As

marcas da grade na pgina ajudam a alinhar as camadas, e quando o encaixe for ativado, as camadas se encaixaro automaticamente no ponto de grade mais prximo, ao serem redimensionadas ou movidas. Outros objetos, como as imagens e pargrafos, no se encaixam na grade. O encaixe funcionar independentemente da visibilidade da grade. Consulte Como encaixar as camadas na grade na pgina 448. Como exibir as rguas As rguas podem ser exibidas nas bordas superior e esquerda da pgina, marcadas em pixels, polegadas ou centmetros.
Para alterar as configuraes de rgua, siga um dos procedimentos abaixo:
Para mostrar ou ocultar as rguas, escolha Exibir > Rguas > Mostrar. Para alterar a origem, arraste o cone de origem da rgua para qualquer lugar na
pgina. Este cone aparecer no canto superior esquerdo da visualizao do projeto da janela de documento enquanto as rguas forem exibidas. Para redenir a origem para a sua posio padro, escolha Exibir > Rguas > Redenir a origem.
Para alterar a unidade de medida, escolha Pixels, Polegadas ou Centmetros, no

submenu Exibir > Rguas.
165
Como utilizar uma imagem de rastreamento Utilize uma imagem de rastreamento como um guia para recriar o desenho de uma pgina da qual foi feito um prottipo em um aplicativo grco. As imagens de rastreamento so imagens JPEG, GIF ou PNG que so colocadas no fundo da janela do documento. possvel ocultar a imagem, denir a sua opacidade e alterar a sua posio. A imagem de rastreamento visvel apenas no Dreamweaver. Essa imagem nunca pode ser vista quando a pgina for exibida em um navegador. Quando a imagem de rastreamento estiver visvel, a imagem e a cor de fundo reais da pgina no podero ser visualizadas na janela do documento; contudo, aparecero quando a pgina for exibida em um navegador.
Para colocar uma imagem de rastreamento na janela do documento:
Escolha Exibir > Imagem de rastreamento > Carregar. Escolha Modicar > Propriedades da pgina e, em seguida, clique no boto
Procurar, junto caixa de texto Imagem de rastreamento.
2
Na caixa de dilogo que aparecer, selecione um arquivo de imagem e clique em Selecionar (no Windows), ou Escolher (no Macintosh). Aparecer a caixa de dilogo Propriedades da pgina. Especique a transparncia da imagem, arrastando o boto deslizante Transparncia da imagem e, em seguida, clique em OK. Para alternar para outra imagem de rastreamento ou alterar a transparncia da imagem de rastreamento atual a qualquer hora, escolha Modicar > Propriedades de pgina.
Para exibir ou ocultar a imagem de rastreamento:
Escolha Exibir > Imagem de rastreamento > Mostrar.

Para alterar a posio de uma imagem de rastreamento:
Escolha Exibir > Imagem de rastreamento > Ajustar a posio. Siga, ento, um dos procedimentos abaixo:
Para especicar 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.
166
Captulo 5
Para redefinir a posio da imagem de rastreamento:
Escolha Exibir > Imagem de rastreamento > Redenir a posio. A imagem de rastreamento retornar ao canto superior esquerdo da janela de documento (coordenadas 0,0).
Para alinhar a imagem de rastreamento a um elemento selecionado:
1 2
Selecione um elemento na janela do documento. Escolha Exibir > Imagem de rastreamento > Alinhar com a seleo. O canto superior esquerdo da imagem de rastreamento ser alinhado com o canto superior esquerdo do elemento selecionado.
Como exibir e editar o contedo do cabealho

Os arquivos HTML so compostos por duas sees principais: a seo head e a seo body. A seo body a parte principal do documento, a parte visvel contendo texto, imagens, etc. A seo head a parte invisvel, com exceo do ttulo do documento, que aparece nas barras de ttulo das janelas dos navegadores e do Dreamweaver. D um ttulo a cada pgina que criar. A seo head contm tambm informaes importantes, que incluem o tipo de documento, a codicao de idioma, as funes e variveis JavaScript e VBScript, as palavras-chave e indicadores de contedo para os mecanismos de busca e as denies de estilo. No necessrio fornecer todos estes elementos para cada pgina; voc poder, por exemplo, fornecer as palavras-chave e indicadores de contedo apenas da sua home page. Os elementos da seo head podem ser exibidos utilizando o menu Exibir, a visualizao de cdigo da janela do documento ou o inspetor de cdigo.
Para exibir os elementos da seo head de um documento:
Escolha Exibir > Contedo do cabealho. Para cada elemento do contedo do head, aparecer um cone no alto da visualizao do projeto da janela do documento.
Nota: Se a janela do documento estiver definida para mostrar somente a visualizao de cdigo, a opo Exibir > Contedo do cabealho estar esmaecida.
167
Para inserir um elemento na seo head de um documento:
Siga um dos procedimentos abaixo: clique em um dos botes de objeto.
Escolha Cabealho, no menu pop-up situado no alto do painel Objetos, e Escolha um item no submenu Inserir > Cabealho.
2
Insira as opes para o elemento na caixa de dilogo que aparecer ou no inspetor de propriedades.
Para editar um elemento na seo head de um documento:
1 2 3
Escolha Exibir > Contedo do cabealho. Clique em um dos cones na seo head para selecion-lo. Dena ou modique as propriedades do elemento no inspetor de propriedades.
Para obter informaes sobre as propriedades de determinados elementos do head, consulte os seguintes tpicos na Ajuda do Dreamweaver:
propriedades do tag Meta propriedades do ttulo propriedades da palavra-chave propriedades da descrio propriedades de atualizao Como editar um script propriedades bsicas propriedades do link
Sobre como automatizar as tarefas

Ao criar os seus documentos, voc pode desejar executar a mesma tarefa vrias vezes. Esta seo explica como utilizar o painel Histrico para automatizar tarefas repetitivas. Para repetir uma srie de etapas uma ou duas vezes, reexecute-as diretamente no painel Histrico, que registra as etapas que voc executou enquanto trabalha em um documento. Para obter informaes bsicas sobre o painel Histrico, consulte Sobre o painel Histrico na pgina 87. Para automatizar uma tarefa realizada com freqncia, crie um novo comando que realiza a tarefa automaticamente.
168
Captulo 5
Alguns movimentos do mouse, como o ato de clicar ou arrastar para selecionar um elemento na janela do documento, no podero ser executados novamente ou salvos como parte dos comandos salvos. Ao realizar um destes movimentos, aparecer uma linha preta no painel 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 enquanto pressiona uma tecla de seta.
Nota: 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.
Certas outras etapas tambm no podem ser repetidas, como arrastar um elemento para outro local na pgina. Ao efetuar uma destas etapas, aparecer um cone de comando de menu com um pequeno X vermelho no painel Histrico. As etapas sero repetidas exatamente como elas foram executadas originalmente. No possvel alter-las enquanto estiverem sendo executadas. Por exemplo: se a cor de uma clula de tabela tiver sido anteriormente alterada para vermelho, a aplicao da mesma etapa a uma outra clula de tabela tambm alterar a cor da mesma para vermelho; no possvel especicar uma cor diferente quando a mesma etapa for aplicada a uma nova clula. Como repetir as etapas Para repetir a ltima etapa executada, utilize o comando Editar >Repetir, ou utilize o atalho do teclado, com as teclas Control e Y (no Windows), ou Command e Y (no Macintosh). O nome deste comando do menu Editar alterado, reetindo a ltima etapa efetuada; por exemplo: se a ltima etapa tiver sido a digitao de texto, o nome do comando ser Repetir a digitao. No possvel utilizar o comando Repetir imediatamente aps uma operao Desfazer ou Refazer. Para repetir as etapas que diferirem da mais recente ou para repetir diversas etapas simultaneamente, utilize o painel Histrico. Observe que as etapas executadas novamente sero aquelas que tiverem sido selecionadas (realadas) e no necessariamente a etapa indicada pelo controle deslizante.
Para repetir uma etapa:
No painel Histrico, selecione a etapa e clique no boto Executar novamente. A etapa ser executada novamente e uma cpia da mesma aparecer no painel Histrico.
169
Para repetir uma srie de etapas adjacentes:
Selecione as etapas no painel Histrico, seguindo um dos procedimentos abaixo: arraste do identicador de texto de uma etapa at o identicador de texto de uma outra etapa.
Arraste de uma etapa para outra. No arraste o controle deslizante, apenas Selecione a primeira etapa e, em seguida, pressionando a tecla Shift, clique na
ltima etapa, ou selecione a ltima etapa e depois, pressionando a tecla Shift, clique na primeira etapa.
Nota: Embora seja possvel selecionar uma srie de etapas que incluem uma linha preta de indicao do movimento do mouse, o movimento do mouse ser ignorado quando voc executar as etapas novamente.
Clique em Executar novamente. As etapas sero executadas novamente na ordem e uma nova etapa, denominada Executar novamente as etapas, aparecer no painel Histrico.
Para repetir etapas no adjacentes:
Selecione uma etapa e, em seguida, clique nas outras etapas mantendo a tecla Control pressionada (no Windows), ou a tecla Command pressionada (no Macintosh). Tambm possvel clicar na etapa selecionada, mantendo pressionada a tecla Control (no Windows), ou a tecla Command (no Macintosh), para cancelar a seleo da etapa.
Clique em Executar novamente. As etapas selecionadas sero executadas novamente na ordem e uma nova etapa, denominada Executar novamente as etapas, aparecer no painel Histrico.
Como aplicar etapas a um outro objeto possvel aplicar um conjunto de etapas do painel Histrico a qualquer objeto na janela do documento.
Para aplicar as etapas do painel Histrico a um novo objeto:
1 2
Selecione o objeto. Selecione as etapas relevantes no painel Histrico e, em seguida, clique em Executar novamente.
170
Captulo 5
Como aplicar etapas a vrios objetos Se forem selecionados diversos objetos em um documento aos quais se aplicaro as etapas do painel Histrico, os objetos sero tratados como uma nica seleo e o Dreamweaver tentar aplicar as etapas a esta seleo combinada. Por exemplo: no possvel 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 em um conjunto de objetos, necessrio que a ltima etapa da srie selecione o objeto seguinte do conjunto. O seguinte procedimento demonstra este princpio numa determinada situao: como denir o espaamento vertical e horizontal de uma srie de imagens.
Para definir o espaamento vertical e horizontal de uma srie de imagens:
Inicie com um documento no qual cada linha consiste de uma pequena imagem (como um marcador grco ou um cone) seguida de texto. O objetivo manter as imagens afastadas do texto e de outras imagens acima e abaixo.
2 3
Selecione a primeira imagem. No inspetor de propriedades, clique no boto Expandir (a seta no canto inferior direito), se desejar examinar todas as propriedades da imagem. Digite nmeros nas caixas de texto Espao V e Espao H, a m de denir o espaamento entre as imagens. Clique na barra de ttulo da janela do documento (em vez de clicar dentro desta), para ativar a janela do documento sem mover o ponto de insero. Pressione a tecla de seta esquerda, para mover o ponto de insero para a esquerda da imagem. Em seguida, pressione a tecla de seta abaixo, para mover o ponto de insero uma linha abaixo, deixando-o esquerda da segunda imagem da srie. Pressione as teclas Shift e seta direita, para selecionar a segunda imagem.
Nota: No selecione a imagem clicando na mesma, seno no ser possvel executar todas as etapas novamente.
171
Selecione as etapas do painel Histrico que correspondem alterao do espaamento da imagem e seleo da imagem seguinte. Clique no boto Executar novamente, para executar estas etapas novamente.
O espaamento da imagem atual ser alterado e a prxima imagem ser selecionada.

8
Continue a clicar em Executar novamente, at que todas as imagens tenham sido espaadas corretamente.
Para aplicar as etapas a um objeto em outro documento, utilize o boto Copiar as etapas. Como copiar e colar as etapas entre documentos Cada documento aberto possui o seu prprio histrico de etapas. possvel copiar as etapas de um documento e col-las em outro.
Nota: Copiar as etapas (um boto no painel Histrico) diferente de Copiar (no menu Editar). No possvel utilizar Editar > Copiar, para copiar as etapas, embora elas sejam coladas com o comando Editar > Colar.
O fechamento de um documento limpar o seu histrico. Se tiver certeza que desejar utilizar etapas de um documento aps t-lo fechado, copie as etapas com Copiar as etapas (ou salve-as como um comando; consulte Como criar novos comandos a partir das etapas do histrico na pgina 173) antes de fechar o documento. Copie com cuidado as etapas que incluem um comando Copiar ou Colar:
No utilize Copiar as etapas se uma das etapas for um comando Copiar; talvez
no seja possvel colar estas etapas da maneira desejada.
Se as etapas inclurem um comando Colar, no ser possvel col-las, a no ser

que as etapas tambm incluam um comando Copiar antes do comando Colar.
172
Captulo 5
Se voc colar as etapas em um editor de texto ou na visualizao de cdigo ou no inspetor de cdigo, elas aparecero 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 Como estender os recursos do Dreamweaver: Princpios bsicos na pgina 575.
Para reutilizar as etapas de um documento em outro documento:
1 2 3 4 5
Inicie com o documento que contm as etapas a serem reutilizadas. Selecione as etapas no painel Histrico. Clique no boto Copiar as etapas, no painel Histrico, para copiar as etapas. Abra o outro documento. Coloque o ponto de insero no local desejado ou selecione um objeto ao qual deseja aplicar as etapas. Escolha Editar > Colar, para colar as etapas. As etapas sero executadas novamente, medida que forem coladas no painel Histrico do documento. O painel Histrico as mostrar como apenas uma etapa, denominada Colar as etapas.
Como criar novos comandos a partir das etapas do histrico possvel salvar um conjunto de etapas do histrico como um comando com nome, que passar a estar disponvel no menu Comandos. Crie e salve um novo comando se for provvel a necessidade de percorrer novamente um determinado conjunto de etapas no futuro, especialmente se voc desejar utilizar estas etapas quando iniciar o Dreamweaver; os comandos salvos sero mantidos em carter permanente (a no ser que sejam excludos), enquanto que os comandos gravados sero descartados quando voc sair do Dreamweaver e as seqncias copiadas de etapas sero descartadas quando copiar outro elemento. possvel editar ou excluir os nomes de comandos colocados no menu Comandos, utilizando Comandos > Editar a lista de comandos. mais complicado editar e excluir os comandos includos no menu Comandos (ou seja, os comandos que no foram adicionados voluntariamente); consulte Sobre a personalizao dos menus do Dreamweaver na pgina 557.
173
Para criar um comando:
1 2
Selecione a etapa ou conjunto de etapas no painel Histrico. Clique no boto Salvar como comando, ou escolha Salvar como comando, no menu contextual do painel Histrico. Digite o nome do comando e clique em OK. O comando aparecer no menu Comandos.
Nota: O comando ser salvo como um arquivo JavaScript (ou s vezes como arquivo HTML) na pasta Dreamweaver/Configuration/Commands.
Para poder utilizar um comando salvo:
Selecione um objeto ao qual deseja aplicar o comando ou coloque o ponto de insero no local desejado. Escolha o comando no menu Comandos.
Para editar os nomes de comandos no menu Comandos:
1 2 3
Escolha Comandos > Editar a lista de comandos. Selecione o comando a ser renomeado e digite o seu novo nome. Clique em Fechar.
Para excluir um nome do menu Comandos:
1 2 3
Escolha Comandos > Editar a lista de comandos. Selecione um comando. Clique em Excluir e, em seguida, em Fechar.
174
Captulo 5
Como gravar comandos O Dreamweaver permite a gravao de um comando temporrio destinado utilizao por um perodo curto de tempo. So as seguintes as principais diferenas entre esta abordagem e a execuo das etapas no painel Histrico (consulte Como repetir as etapas na pgina 169):
As etapas so gravadas medida que forem efetuadas, dispensando a

necessidade de selecion-las no painel Histrico antes de execut-las.
Durante a gravao, o Dreamweaver impede que sejam efetuados movimentos

do mouse no-relacionados gravao (como o clique para selecionar um elemento em uma janela ou arrast-lo para um novo local).
Se voc alternar para um outro documento durante a gravao, o Dreamweaver

no gravar as alteraes feitas no outro documento. Olhe para o ponteiro do mouse para determinar se a gravao est se processando ou no em um determinado momento. O Dreamweaver manter apenas um comando gravado por vez; assim que for iniciada a gravao de um novo comando, o antigo se perder. Para salvar um novo comando sem perder um comando j gravado, salve o comando no painel Histrico. Uma vez gravado o comando, possvel salv-lo utilizando o painel Histrico.
Para gravar temporariamente uma srie de etapas utilizadas com freqncia:
Escolha Comandos > Iniciar a gravao, ou pressione as teclas Control, Shift e X (no Windows), ou Command, Shift e X (no Macintosh). O ponteiro ser alterado, indicando a gravao de um comando. Quando terminar a gravao, escolha Comandos > Parar a gravao, ou pressione as teclas Control, Shift e X (no Windows), ou Command, Shift e X (no Macintosh).
Para executar um comando gravado:
Escolha Comandos > Executar o comando gravado, ou pressione as teclas Control e P (no Windows), ou Command e P (no Macintosh).
175
Para salvar um comando gravado:
Escolha Comandos > Executar o comando gravado, para executar o comando. Aparecer uma etapa, denominada Executar o comando, na lista de etapas do painel Histrico.
2 3
Selecione a etapa Executar o comando e clique no boto Salvar como comando. Digite o nome do comando e clique em OK. O comando aparecer no menu Comandos.
176
Captulo 5
CAPTULO 6
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como projetar o layout de pgina
O layout de pgina uma parte importante do projeto da Web. O termo layout de pgina se refere aparncia que a pgina ter no navegador, como a posio de um menu ou as imagens, por exemplo. O Macromedia Dreamweaver proporciona diversas maneiras de criar e controlar o layout da pgina da Web. Um mtodo comum de criar o layout de pgina consiste na utilizao de tabelas HTML. No entanto, as tabelas podem ser de difcil utilizao, porque elas no foram originalmente criadas para o layout de pgina da Web, mas sim para exibir dados tabulares. Para simplicar o processo de utilizao de tabelas para o layout de pgina, o Dreamweaver conta com a visualizao de layout. Na visualizao de layout possvel projetar a pgina utilizando tabelas como estrutura subjacente. Contudo, evite cometer os erros associados sua utilizao. Por exemplo: possvel desenhar clulas (clulas de tabela) na pgina com facilidade e, em seguida mov-las para onde desejar. O layout pode ter uma largura xa ou se expandir, at ocupar toda a janela do navegador (consulte Como denir a largura do layout na pgina 189). Ainda possvel dispor as suas pginas utilizando tabelas segundo a maneira tradicional (consulte Como utilizar as tabelas para apresentar o contedo na pgina 195), ou utilizando camadas e depois convertendo-as em tabelas (consulte Como utilizar as tabelas e camadas para o layout na pgina 455). No entanto, a visualizao de layout do Dreamweaver a forma mais fcil de denir o layout da pgina. Para utilizar a visualizao de layout, necessrio sair da visualizao padro do Dreamweaver.
177
Para passar visualizao de layout:
Escolha Exibir > Visualizao de tabela> Visualizao de layout, ou clique no boto Visualizao de layout, no painel Objetos.
cone de Desenhar a clula de layout cone de Desenhar a tabela de layout cone de Visualizao de layout
A opo Mostrar as guias da tabela de layout est automaticamente ativada na visualizao de layout. Para desativar guias da tabela quando estiver na visualizao de layout, escolha Exibir > Visualizao de tabela > Mostrar as guias da tabela de layout.
Nota: Se a tabela for criada na visualizao padro do Dreamweaver, ento alterne para a visualizao de layout. possvel que a tabela tenha clulas de layout vazias, que devero ser excludas para criar novas clulas.
Sobre as clulas e tabelas de layout

Quando alternar para a visualizao de layout, voc poder adicionar clulas de layout pgina. Estas clulas o auxiliaro a delinear o layout da pgina. Por exemplo: possvel desenhar uma clula ao longo do alto da pgina, para conter um menu, uma clula no lado direito da pgina, para submenus, e uma clula junto a esta, para exibir o contedo dos submenus. til pensar no layout em termos de uma grade com linhas e colunas.
178
Captulo 6
Quando uma clula de layout for criada na pgina, o Dreamweaver automaticamente criar uma tabela de layout como um recipiente para a clula. Uma clula de layout no pode existir fora de uma tabela de layout. possvel criar a pgina de layout utilizando diversas clulas de layout em uma tabela de layout, ou utilizar tabelas de layout mltiplas, para obter um layout mais avanado. A utilizao de tabelas de layout mltiplas isolar certas sees do layout, para que elas no sejam afetadas por outra seo. Este recurso especialmente til se o contedo de uma clula de layout puder ser alterado e causar a expanso da clula. Quando a clula cresce, as clulas prximas a ela sero afetadas, porque elas no podem se sobrepor. Se tiver criado o layout com tabelas de layout mltiplas, as linhas e colunas de uma tabela no afetaro outras tabelas. Tambm possvel aninhar as tabelas de layout (inserindo uma tabela de layout em uma tabela de layout j existente). As clulas dentro de uma tabela aninhada no esto restritas pelas linhas e colunas da tabela exterior. Consulte Como desenhar uma tabela de layout aninhada na pgina 182.
Como desenhar clulas e tabelas de layout

possvel desenhar clulas e tabelas de layout na pgina enquanto estiver na visualizao de layout. Se, inicialmente, criar uma clula de layout, ser automaticamente inserida uma tabela de layout, para funcionar como um recipiente para a clula de layout. Sempre haver uma clula de layout numa tabela de layout.
Nota: A tabela de layout que automaticamente criada pelo Dreamweaver ter a largura da janela do documento. possvel modificar o seu tamanho ou provocar o seu alongamento automtico, se necessrio. Para desenhar uma clula de layout:
Assegure-se de estar na visualizao de layout e, em seguida, clique no boto Desenhar a clula de layout, na categoria Layout, no painel Objetos. O ponteiro do mouse se transformar em um sinal de adio (+). Posicione o ponteiro do mouse onde deseja comear a clula na pgina e, em seguida, arraste-o para criar a clula de layout. Para criar algumas clulas sem ter que clicar no boto Clula de layout a cada vez, mantenha pressionada a tecla Control (no Windows), ou a tecla Command (no Macintosh).
A clula ser contornada em azul na pgina. O azul a cor de contorno padro das clulas de layout. Consulte Como denir as preferncias de visualizao de layout na pgina 194 para modic-la. O tamanho de cada clula exibido na rea do cabealho da coluna, no alto da clula. Para obter mais informaes sobre a largura, consulte Como denir a largura do layout na pgina 189.
179
O layout da pgina segue uma grade de colunas e linhas, para que as clulas possam abranger diversas colunas ou linhas. Porm, elas nunca podero se sobrepor umas s outras na pgina. O Dreamweaver o auxilia a manter esta estrutura, encaixando automaticamente as novas clulas que forem criadas nas clulas j existentes, se voc as desenhar prximas umas das outras (afastadas a at 8 pixels de distncia). As clulas se encaixaro automaticamente no lado da pgina, se as desenhar junto extremidade (afastadas a at 8 pixels). Para desativar temporariamente o encaixe, pressione a tecla Alt (no Windows), ou a tecla Option (no Macintosh) enquanto desenha a clula na pgina.
Isto no implica na necessidade de que todas as clulas tenham o mesmo tamanho ou largura. possvel que as clulas de uma mesma coluna tenham diferentes larguras, ou diferentes alturas, em uma mesma linha.
180
Captulo 6
Para desenhar uma tabela de layout:
Assegure-se de estar na visualizao de layout e, em seguida, clique no boto Desenhar a tabela de layout, na categoria Layout, no painel Objetos. O ponteiro do mouse se transformar em um sinal de adio (+). Posicione o ponteiro do mouse na pgina e, em seguida, clique e arraste o mouse, para criar a tabela de layout. Se esta for a primeira tabela que estiver desenhando na pgina, ela ser automaticamente posicionada no canto superior esquerdo da pgina. Para criar algumas tabelas sem ter que clicar no boto Tabela de layout a cada vez, mantenha pressionada a tecla Control (no Windows), ou a tecla Command (no Macintosh).
A tabela ser contornada em verde na pgina. O verde a cor de contorno padro das tabelas de layout. Consulte Como denir as preferncias de visualizao de layout na pgina 194 para modic-la. Uma guia de tabela de layout tambm aparece no alto de cada tabela que for desenhada e auxilia a distinguir e selecionar a tabela. O tamanho da cada tabela exibido na rea do cabealho da coluna , no alto da tabela.
Para obter mais informaes sobre a largura, consulte Como denir a largura do layout na pgina 189. No possvel sobrepor tabelas. O layout da pgina segue uma grade de colunas e linhas, para que as tabelas possam abranger diversas linhas ou colunas. Porm, elas nunca podero se sobrepor umas s outras na pgina. O Dreamweaver o auxilia a manter esta estrutura, encaixando automaticamente as novas tabelas que forem criadas nas tabelas ou clulas j existentes, se voc as desenhar prximas umas das outras (afastadas a at 8 pixels de distncia). As tabelas se encaixaro automaticamente no lado da pgina, se as desenhar junto extremidade (afastadas a at 8 pixels). Para desativar o encaixe, pressione a tecla Alt (no Windows), ou a tecla Option (no Macintosh) enquanto desenha a tabela na pgina. possvel criar tabelas de layout em reas vazias do layout da pgina, em uma tabela de layout j existente (aninhamento) ou ao redor de clulas e tabelas de layout j existentes. Quando voc criar uma tabela de layout em um documento vazio, ela se encaixar automaticamente no canto superior esquerdo da janela de documento.
Nota: Se a pgina j apresentar algum contedo, s ser possvel desenhar a tabela de layout abaixo da parte inferior do mesmo.
181
Para desenhar uma tabela de layout ao redor de clulas e tabelas j existentes:
Assegure-se de estar na visualizao de layout e, em seguida, clique no boto Desenhar a tabela de layout, na categoria Layout, no painel Objetos. O ponteiro do mouse se transformar em um sinal de adio (+). Clique e arraste o mouse ao redor das clulas e tabelas de layout existentes. A tabela de layout ir incorporar as clulas e tabelas existentes.
Como desenhar uma tabela de layout aninhada possvel desenhar uma tabela de layout numa tabela de layout j existente (este recurso cria uma tabela aninhada). As clulas dentro de uma tabela aninhada no esto restritas pelas linhas e colunas da tabela exterior. possvel inserir diversas tabelas aninhadas.
Para desenhar uma tabela aninhada:
Clique no boto Desenhar a tabela de layout, na categoria Layout, no painel Objetos. O ponteiro do mouse se transformar em um sinal de adio (+). Posicione o ponteiro do mouse no espao cinza de uma tabela de layout existente e, em seguida, clique e arraste o mouse para criar a tabela de layout aninhada.
Uma tabela de layout aninhada no pode ser maior do que a tabela que a contm.
182
Captulo 6
Como utilizar a grade do Dreamweaver possvel ativar a grade do Dreamweaver, para utiliz-la como um guia, quando estiver desenhando o seu layout. possvel encaixar automaticamente o layout na grade, alter-la ou controlar o comportamento de encaixe, atravs da especicao das conguraes de grade.
Para exibir ou ocultar a grade na janela do documento:
Escolha Exibir > Grade > Mostrar a grade, ou selecione a opo Grade, no menu suspenso Opes, na barra de ferramentas.
Para alterar as definies de grade:
Clique em Exibir > Grade > Editar a grade, para abrir a clula de dilogo Denies de grade. Siga qualquer um dos procedimentos abaixo: nmero hexadecimal na clula. Este recurso controla a cor das linhas da grade.
Clique na seta prxima amostra de cor e selecione a cor na paleta ou digite o Selecione Mostrar a grade, para mostrar a grade na janela do documento. Selecione Encaixar na grade, para possibilitar o encaixe. Digite o fator de espaamento que deseja e, no menu pop-up, selecione Pixels,
Polegadas ou Centmetros. Este recurso controla a distncia entre as linhas da grade.
Escolha linhas ou pontos para as linhas de grade.

3
Clique em Aplicar, para visualizar as alteraes e depois em OK, para fechar a caixa de dilogo.
Como adicionar contedo a uma clula possvel adicionar texto, imagens e outros tipos de mdia s clulas de layout na visualizao de layout, assim como voc o faria na exibio normal do Dreamweaver (visualizao padro). Clique na clula onde dever ser inserido o contedo e, em seguida, digite o texto ou insira outros arquivos. O contedo s pode ser inserido numa clula de layout, portanto voc dever criar inicialmente as clulas de layout (consulte Como desenhar clulas e tabelas de layout na pgina 179). Os espaos cinzas na sua pgina indicam as reas que no esto disponveis para adicionar contedo, a no ser que voc insira uma clula de layout nessas reas.
183
Se voc adicionar um material maior do que a clula de layout, esta se expandir automaticamente. Quando a clula se expandir, as clulas ao seu redor podem ser afetadas, e a coluna em que a clula se encontra tambm se ampliar.
Para adicionar texto a uma clula:
Clique na clula de layout em que deseja inserir o texto e siga um dos procedimentos abaixo:
Digite o texto na clula. A clula se expandir automaticamente medida que o

texto for digitado.
Cole o texto copiado de outro documento. Utilize o comando Colar. Para obter
mais informaes, consulte Como inserir texto e objetos na pgina 252.
Para adicionar uma imagem a uma clula:
1 2
Clique na clula de layout onde deseja adicionar a imagem. Clique no boto Inserir a imagem, no painel Objetos, escolha Inserir > Imagem, ou arraste o boto Inserir a imagem, no painel Objetos da pgina. Na caixa de dilogo Selecionar a imagem, escolha um arquivo de imagem.
Para obter mais informaes, consulte Como denir as propriedades da imagem na pgina 292. Como limpar as alturas das clulas Aps inserir o contedo nas suas clulas, voc pode limpar as alturas das clulas para remover a denio. O Dreamweaver cria automaticamente as clulas com uma determinada altura, mas uma vez adicionado o contedo clula, esta altura no ser mais necessria.
184
Captulo 6
Para limpar as alturas, siga um dos procedimentos abaixo:
Selecione Limpar as alturas das clulas, no menu Cabealho da coluna. As

alturas sero limpas e algumas linhas podero se contrair.
Selecione uma tabela de layout (clique na guia ou na extremidade da tabela) e,

em seguida, clique no boto Limpar as alturas das linhas, no inspetor de propriedades.
Como mover e redimensionar as clulas e tabelas de layout

Todas as clulas e tabelas no layout podem ser movidas e redimensionadas, o que facilita o ajuste do layout da pgina. Para poder utilizar a grade do Dreamweaver como guia enquanto move ou redimensiona as clulas e tabelas, consulteComo utilizar a grade do Dreamweaver na pgina 183.
Para redimensionar uma clula:
Clique na extremidade da clula ou, mantendo pressionada a tecla Control (no Windows), ou a tecla Command (no Macintosh), clique em qualquer ponto da clula. Aparecero alas de seleo ao redor da clula. Utilize as alas de seleo para aumentar a clula at o tamanho desejado.
A clula se encaixar automaticamente s clulas existentes (se estiver afastada at 8 pixels das suas bordas). Uma clula de layout no pode se sobrepor s outras clulas e no possvel redimension-la fora dos limites da tabela de layout a ela correspondente. Uma clula de layout pelo menos to grande quanto o contedo nela compreendido.
185
Para mover uma clula:
1 2
Clique na extremidade da clula. Arraste a clula at onde desejar na pgina ou utilize as teclas de seta. A tecla de seta mover a tabela um pixel por vez. Se a tecla Shift for mantida pressionada, a tabela ser movida 10 pixels por vez.
Para redimensionar uma tabela:
Clique na guia da tabela. Aparecero alas de seleo ao redor da tabela de layout. Utilize as alas de seleo para arrastar a tabela at o tamanho desejado.
A tabela se encaixar automaticamente s clulas e tabelas existentes (se estiver afastada at 8 pixels da clula existente). A tabela de layout no pode ser redimensionada a um tamanho menor do que o limite das clulas nela compreendidas. Ela tambm no pode ser redimensionada de maneira a se sobrepor tabelas e clulas vizinhas.
Para mover uma tabela:
1 2
Clique na guia da tabela. Arraste a tabela at onde desejar na pgina ou utilize as teclas de seta. A tecla de seta mover a tabela um pixel por vez. Se a tecla Shift for mantida pressionada, a tabela ser movida 10 pixels por vez.
186
Captulo 6
Como formatar as clulas e tabelas de layout

A aparncia de qualquer clula ou tabela de layout pode ser alterada no inspetor de propriedades. Como formatar uma clula de layout possvel denir o alinhamento, a largura, altura e as cores de fundo do contedo no inspetor de propriedades.
Para formatar uma clula de layout no inspetor de propriedades:
Clique na extremidade da clula ou, mantendo pressionada a tecla Control (no Windows), ou a tecla Command (no Macintosh), clique em qualquer ponto da clula. Escolha Janela > Propriedades, para abrir o inspetor de propriedades. Escolha dentre as seguintes opes de aparncia: escolha Alongamento automtico (consulte Como denir a largura do layout na pgina 189).
2 3
Para alterar a largura, escolha Fixa e digite uma largura na caixa, em pixels, ou Para alterar a altura, especique a altura na caixa de texto, em pixels. Para denir a cor de fundo da clula de layout, escolha a cor no seletor de cores,
ou digite o cdigo hexadecimal correspondente cor que deseja na caixa de texto.
Para denir o alinhamento horizontal, selecione no menu pop-up Horizontal.

possvel denir o alinhamento dos contedos da clula de layout, tanto para a esquerda, quanto para o centro, direita ou padro.
Para denir o alinhamento vertical, selecione no menu pop-up Vertical.

possvel denir o alinhamento dos contedos da clula de layout, tanto para a cima, quanto para o meio, baixo, linha de base ou padro.
Selecione Sem quebra, para impedir a quebra automtica de linhas. Se

selecionada, a clula de layout se alargar para acomodar todo o contedo, sem quebrar para uma nova linha.
187
Como formatar as tabelas de layout possvel denir a largura e altura, o preenchimento e o espaamento, entre outros, no inspetor de propriedades.
Para formatar uma tabela de layout:
1 2 3
Clique na guia ou extremidade da tabela. Escolha Janela > Propriedades, para abrir o inspetor de propriedades. Escolha dentre as seguintes opes de aparncia: escolha Alongamento automtico (consulte Como denir a largura do layout na pgina 189).
Para alterar a largura, escolha Fixa e digite uma largura na caixa, em pixels, ou Para alterar a altura, especique a altura no campo de texto, em pixels. Para denir o preenchimento da clula, especique o nmero de pixels no
campo Preenchimento da clula. O preenchimento da clula especica o espao entre o contedo da clula de layout e os seus limites (ou parede). Quando o espaamento for denido acima de 0, todas as clulas de layout na tabela selecionada tero este espaamento. Se houver dois nmeros que aparecem na rea de cabealho da coluna, utilize a opo Tornar consistentes as larguras, abaixo.
Para denir o espaamento da clula, especique o nmero de pixels no campo

de texto Espaamento da clula. O espaamento da clula especica o espao entre cada clula de layout. Quando o espaamento for denido acima de 0, todas as clulas de layout na tabela selecionada tero este espaamento. Se houver dois nmeros que aparecem na rea de cabealho da coluna, utilize a opo Tornar consistentes as larguras, abaixo.
Para limpar as denies de altura de todas as clulas na tabela de layout

selecionada, clique no boto de atributos Limpar a altura. Se no houver elementos na tabela, esta ser completamente fechada.
188
Captulo 6
Se o layout apresentar clulas de largura xa, clique no boto Tornar

consistentes as larguras. Este recurso redene automaticamente as larguras HTML das clulas, tornando-as coincidentes com o seu respectivo contedo. Por exemplo: se tiver denido a largura como 200 pixels e, subseqentemente, tiver adicionado contedo com largura superior a 250, sero exibidos os dois nmeros seguintes na barra superior tabela: 250 entre aspas e 200 entre parnteses. Ao clicar na opo Tornar consistentes as larguras, a denio de 200 pixels ser removida e a de 250 ser mantida.
Para remover as imagens espaadoras (imagens transparentes que so utilizadas

para controlar o espaamento no layout) da tabela de layout, clique no boto Remover todas as imagens espaadoras. Para obter mais informaes, consulte Como utilizar imagens espaadoras na pgina 192
Se a tabela de layout selecionada estiver aninhada dentro de outra tabela, clique

em Remover o aninhamento, para remover a tabela de layout aninhada sem perder o seu contedo. A tabela de layout desaparecer e as clulas de layout e seus contedos passaro a integrar a tabela-me.
Como definir a largura do layout

Existem dois tipos de larguras que podem ser utilizadas na visualizao de layout: Largura xa e Alongamento automtico. A largura aparece na rea do cabealho da coluna, no alto de cada coluna. A largura xa uma largura numrica especca (como 300 pixels) e exibida como um nmero. O alongamento automtico redimensiona a largura automaticamente, dependendo do tamanho da janela, e exibido como uma linha ondulada. Com o alongamento automtico o layout ocupar a janela do navegador, independente do tamanho de janela que o usurio tiver denido. Embora a largura xa seja a denio padro, normalmente algumas clulas ou tabelas de layout sero denidas com a largura xa, enquanto uma poder apresentar o alongamento automtico. As denies que especicar afetaro todas as clulas ou tabelas naquela coluna. Apenas uma coluna num layout pode ter alongamento automtico.
189
Por exemplo: suponha que o layout inclua uma barra de menu no lado esquerdo da pgina, o ttulo no alto e a rea do contedo principal no lado direito. possvel denir a coluna da esquerda como tendo a largura xa e a rea do contedo principal como tendo alongamento automtico.
190
Captulo 6
Para definir a largura de alongamento automtico, siga um dos procedimentos abaixo:
V para o alto da coluna qual deseja denir o alongamento automtico e

selecione Provocar o alongamento automtico da coluna, no menu Cabealho da coluna. Apenas uma coluna pode ter alongamento automtico.
Selecione a coluna e clique no boto Alongamento automtico, no inspetor de

propriedades. Quando voc denir uma coluna como tendo alongamento automtico, o Dreamweaver inserir imagens espaadoras nas colunas de largura xa, para controlar o layout. Uma imagen espaadora uma imagem transparente que no visvel na janela do navegador, mas utilizada para controlar o espaamento. Consulte Como utilizar imagens espaadoras na pgina 192, para obter mais informaes.
Para definir a largura fixa, siga um dos procedimentos abaixo:
V para o alto da coluna qual deseja denir a largura xa e selecione Tornar

xa a largura da coluna, no menu Cabealho da coluna. O recurso Tornar xa a largura da coluna dene automaticamente a largura da coluna, para que coincida com o seu respectivo contedo.
No inspetor de propriedades, clique na opo Fixa e digite um valor numrico.

Se voc inserir um valor numrico menor do que a largura do contedo, o Dreamweaver denir automaticamente o nmero correto de pixels da largura. s vezes, dois nmeros aparecero no menu Cabealho da coluna: a largura real da coluna e a largura que aparece no cdigo HTML. Isto pode acontecer por diversas razes, como a insero de contedo mais largo do que a largura desenhada ou especicada. recomendvel tornar consistentes as larguras, para que somente um nmero aparea.
Para tornar consistente a largura (para que apenas a largura real seja especificada):
Selecione Tornar consistentes as larguras das clulas, no menu Cabealho da coluna.
191
Como utilizar imagens espaadoras As imagens espaadoras so imagens transparentes que no so visveis na janela do navegador, mas que so utilizadas para controlar o espaamento em tabelas de alongamento automtico. A imagen espaadora mantm a largura que voc tiver denido para cada tabela e clula na pgina. Se preferir no utilizar as imagens espaadoras em tabelas de alongamento automtico, o tamanho das colunas ser modicado ou estas desaparecero, se no apresentarem contedo. possvel inserir e remover as imagens espaadoras de cada coluna ou permitir que o Dreamweaver adicione-as automaticamente, quando criar uma coluna de alongamento automtico. As colunas que contm imagens espaadoras possuem uma barra dupla no alto. Quando voc inserir uma imagem espaadora em uma coluna ou denir o alongamento automtico da coluna, aparecer uma caixa de dilogo, que indagar como voc deseja congurar o arquivo da imagem espaadora. Se voc j tiver denido uma imagem espaadora para o site nas preferncias do Dreamweaver, a caixa de dilogo no aparecer. Consulte Como denir as preferncias de visualizao de layout na pgina 194.
Para definir a imagem espaadora:
Dena uma coluna como alongamento automtico ou escolha Adicionar uma imagem espaadora, no menu Cabealho da coluna.
Na caixa de dilogo que aparecer, escolha dentre as seguintes opes: selecionar esta opo e clicar em OK, aparecer outra caixa de dilogo, que lhe permitir navegar at o diretrio do site onde deseja armazenar o arquivo da imagem espaadora, como uma pasta de imagens, por exemplo. Esta a opo recomendada.
Informe ao Dreamweaver onde criar o arquivo da imagem espaadora: Se
Procure um arquivo existente de imagem espaadora: Se j tiver criado um

arquivo da imagem espaadora para o site, escolha esta opo e depois navegue at a imagem espaadora, na prxima caixa de dilogo que aparecer. A imagem espaadora dever ser um GIF transparente de 1 pixel por 1 pixel.
192
Captulo 6
Desative as imagens espaadoras para as colunas de alongamento automtico:

Se selecionar esta opo, aparecer uma caixa de dilogo avisando-o de que outras colunas do layout podero ser reduzidas para uma largura menor. Se escolher no usar imagens espaadoras, as larguras das colunas tero o mesmo tamanho que o contedo destas. As colunas sem contedo se reduziro a nada. A Ajuda relativa s imagens espaadoras mantm a estrutura do layout como voc originalmente o tiver denido. possvel inserir e remover as imagens espaadoras em colunas especcas ou remover todas as imagens espaadoras da pgina.
Para inserir uma imagem espaadora numa coluna:
Selecione Adicionar imagem espaadora, no menu Cabealho da coluna. A imagem espaadora ser inserida na coluna. Voc no ver a imagem, mas a coluna poder se deslocar levemente e uma barra dupla aparecer no alto.
Para remover uma imagem espaadora de uma coluna:
Selecione Remover a imagem espaadora, no menu Cabealho da coluna. A imagem espaadora ser removida e a coluna poder se deslocar.
Para remover todas as imagens espaadoras da pgina:
Selecione Remover todas as imagens espaadoras, no menu Cabealho da coluna, ou clique no boto Remover todas as imagens espaadoras, no inspetor de propriedades da tabela de layout. O layout completo poder se deslocar levemente ou dramaticamente, dependendo do contedo. Se no houver contedo em algumas colunas, estas podero desaparecer completamente.
193
Como definir as preferncias de visualizao de layout

Utilize a categoria Visualizao de layout, nas preferncias, para denir ou alterar os arquivos e locais das imagens espaadoras, bem como as cores que a visualizao de layout utiliza para desenhar as tabelas, clulas, e assim por diante.
Para abrir as preferncias de visualizao de layout:
Escolha Editar > Preferncias e, em seguida, selecione Visualizao de layout, na lista de categorias.
Espaadores de insero automtica especica se o Dreamweaver dever ou no inserir automaticamente imagens espaadoras quando for provocado o alongamento automtico de uma coluna. Imagem espaadora dene o arquivo de imagem espaadora dos sites. Escolha um
site no menu suspenso e, em seguida, crie uma nova imagem espaadora ou procure uma imagem j existente naquele site.
Contorno da clula
dene a cor a ser utilizada para desenhar o contorno da clula.
Realce da clula dene a cor que realar a clula, quando voc escolh-la ou mover o mouse sobre ela. Contorno da tabela Fundo da tabela
dene a cor a ser utilizada para desenhar o contorno da tabela.
dene a cor de fundo da janela do documento.
194
Captulo 6
CAPTULO 7
Como utilizar as tabelas para apresentar o contedo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
As tabelas so uma ferramenta muito avanada para organizar os dados e as imagens em uma pgina HTML. As tabelas proporcionam aos designers da Web um meio de adicionar uma estrutura horizontal e vertical a uma pgina. As tabelas consistem de trs componentes bsicos:
Linhas (espaamento horizontal) Colunas (espaamento vertical) Clulas (o recipiente criado pela interseo de uma linha e uma coluna)
195
Utilize as tabelas para organizar os dados tabulares, desenhar colunas em uma pgina ou organizar texto e imagens em uma pgina da Web. Aps a criao da tabela, a aparncia e a estrutura desta podem ser facilmente modicadas. possvel incluir contedo; adicionar, excluir, dividir ou mesclar as linhas e colunas; modicar as propriedades de tabelas, linhas ou clulas, para adicionar cor e alinhamento, e copiar e colar clulas.
Nota: recomendvel utilizar a visualizao de layout para visualizar o layout de pgina (Consulte Como projetar o layout de pgina na pgina 177). A visualizao de layout uma maneira fcil de se implementar a sua pgina de layout com tabelas como estrutura subjacente. Utilize tabelas no Dreamweaver para adicionar dados tabulares pgina.
Como inserir uma tabela

Utilize o painel Objetos ou o menu Inserir, para criar uma nova tabela.
Para inserir uma tabela:
Siga um dos procedimentos abaixo: inserir a tabela na pgina e clique no boto Tabela, na categoria Comuns do painel Objetos, ou escolha Inserir > Tabela.
Na janela do documento, coloque o ponto de insero no local onde deseja Arraste o boto Tabela, do painel Objetos at o local escolhido na pgina.
Aparecer a caixa de dilogo Inserir tabela.
2
Nessa caixa de dilogo, aceite os valores ou digite novos valores.

Nota: A caixa de dilogo Inserir tabela retm os valores das definies mais recentes digitadas para uma tabela.
No campo Linhas, especique o nmero de linhas da tabela. No campo Colunas, especique o nmero de colunas da tabela. No campo Preenchimento da clula, especique o nmero de pixels entre o
contedo da clula e os seus limites (ou parede). O preenchimento padro 1 pixel. Insira 0 (zero), para no preencher.
196
Captulo 7
No campo Espaamento entre as clulas, especique o nmero de pixels entre

cada clula da tabela. O espaamento padro 2 pixels. Insira 0 (zero), para no espaar.
No campo Largura, especique a largura da tabela, em pixels, ou como uma

percentagem da janela do navegador.
No campo Borda, especique a largura, em pixels, da borda da tabela. Digite 0,

para que no haja borda.
3
Clique em OK, para criar a tabela.
Se desejar inserir uma tabela sem ter que especicar inicialmente essas opes, desative a opo Mostrar a caixa de dilogo quando inserir objetos, nas preferncias gerais. Consulte Como denir as preferncias na pgina 92. Como adicionar o contedo a uma clula da tabela Podem ser adicionados texto e imagens s clulas da tabela.
Para adicionar texto a uma tabela:
Clique em uma clula na qual deseja adicionar o texto e siga um dos procedimentos abaixo: medida que o texto for digitado.
Digite o texto na tabela. As clulas da tabela se expandiro automaticamente Cole o texto copiado de outro documento. Consulte Como inserir texto e
objetos na pgina 252.
2
Pressione a tecla de tabulao, para deslocar-se para a prxima clula, ou as teclas Shift e de tabulao, para voltar clula anterior. Quando a tecla de tabulao for pressionada na ltima clula de uma tabela, ser adicionada automaticamente outra linha tabela. possvel utilizar tambm as teclas de seta para mover-se entre as clulas.
Como utilizar as tabelas para apresentar o contedo
197
Para adicionar uma imagem a uma tabela:
1 2
Clique na clula na qual ser inserida a imagem. Clique no boto Inserir imagem, na categoria Comuns do painel Objetos, ou escolha Inserir > Imagem. Na caixa de dilogo Selecionar a origem da imagem, escolha um arquivo de imagem.
Para obter informaes sobre a denio das propriedades da imagem, consulte Como denir as propriedades da imagem na pgina 292. Como importar os dados da tabela Os dados criados em outro aplicativo (como o Microsoft Excel) e salvos em um formato delimitado (separados por tabulaes, vrgulas, dois pontos, ponto-evrgula ou outros delimitadores), podem ser importados para o Dreamweaver e reformatados como uma tabela.
Para importar os dados da tabela:
Escolha Arquivo > Importar > Importar os dados tabulares. Escolha Inserir > Dados tabulares.
Aparecer a caixa de dilogo Importar os dados da tabela ou Inserir dados tabulares, dependendo da sua seleo. Com exceo dos ttulos, essas caixas de dilogo so idnticas.
Digite o nome do arquivo a ser importado, no campo Arquivo de dados.
198
Captulo 7
No menu pop-up Delimitador, selecione o formato do delimitador que corresponde ao formato do documento a ser importado. Se for selecionado Outro, aparecer um campo direita do menu pop-up. Digite o delimitador utilizado para separar os dados da tabela.
Nota: Caso voc no selecione (ou especifique) o delimitador utilizado quando o arquivo foi salvo, o arquivo no ser importado de modo adequado e os dados no sero formatados corretamente na tabela. No ser exibida uma mensagem de erro ou de advertncia para alert-lo sobre a ocorrncia do problema.
Para Largura da tabela, selecione uma das seguintes opes: caracteres mais longa em cada coluna.
Selecione Ajustar aos dados, para criar uma tabela que se ajuste seqncia de Selecione Denir, para especicar a largura da tabela como uma percentagem
da janela do navegador ou como um nmero de pixels.
5
Selecione as opes de formatao da tabela: contedo da clula e os seus limites (ou parede).
No campo Preenchimento da clula, especique o nmero de pixels entre o No campo Espaamento entre as clulas, especique o nmero de pixels entre
cada clula da tabela.
No campo Formatar a linha do alto, selecione uma das quatro opes de

formatao: sem formatao, negrito, itlico, ou negrito itlico.
No campo Borda, especique a largura, em pixels, da borda da tabela. Digite 0,

para que no haja borda.
6
Clique em OK.
199
Como selecionar os elementos da tabela

Basta um gesto para selecionar uma tabela inteira, uma linha ou coluna, ou uma faixa de clulas contguas na tabela. Depois da seleo da tabela ou de clulas individuais, possvel:
Modicar a aparncia das clulas selecionadas ou do texto nelas contido.

Consulte Como formatar as tabelas e clulas na pgina 201.
Copiar e colar clulas adjacentes. Consulte Como copiar e colar as clulas na

pgina 212. possvel escolher clulas descontguas de uma tabela, para alterar as suas propriedades. As selees de clulas descontguas no podem ser copiadas ou coladas.
Para selecionar a tabela inteira, siga um dos procedimentos abaixo:
Clique no canto superior esquerdo da tabela ou em qualquer ponto da

extremidade direita ou inferior.
Clique uma vez na tabela e escolha Modicar > Tabela > Selecionar a tabela. Clique uma vez na tabela e escolha Editar > Selecionar tudo. Posicione o ponto de insero em qualquer lugar dentro da tabela e selecione o
tag <table>, no seletor de tags, no canto inferior esquerdo da janela do documento. Aparecero alas de seleo ao redor da tabela, quando esta for selecionada.
Para selecionar as colunas e linhas, siga um dos procedimentos abaixo:
Posicione o ponto de insero na margem esquerda de uma linha ou no alto de

uma coluna. Clique quando a seta de seleo aparecer.
Clique em uma clula e arraste horizontal ou verticalmente, para selecionar

diversas linhas ou colunas.
200
Captulo 7
Para selecionar uma ou mais clulas, siga um dos procedimentos abaixo:
Clique em uma clula e arraste-a vertical ou horizontalmente, at uma outra

clula.
Clique em uma clula e, em seguida, pressione a tecla Shift e clique em outra

clula. Todas as clulas que estiverem dentro da regio retangular sero selecionadas.
Para selecionar clulas descontguas, siga um dos procedimentos abaixo:
Pressione a tecla Control (no Windows), ou Command (no Macintosh), e

clique na tabela para adicionar clulas, linhas ou colunas seleo.
Selecione diversas clulas na tabela e, em seguida, pressione a tecla Control (no

Windows), ou Command (no Macintosh) e clique nas clulas, linhas ou colunas, para cancelar a seleo das clulas individuais.
Como formatar as tabelas e clulas

A aparncia das tabelas pode ser alterada pela denio de propriedades da tabela e clulas, ou pela aplicao de um desenho predenido tabela. Consulte Como denir as propriedades da tabela na pgina 203, Como denir as propriedades das colunas, linhas e clulas na pgina 204 e Como usar um esquema de desenho para formatar uma tabela na pgina 206. Para formatar o texto nas tabelas, aplique a formatao ao texto selecionado ou utilize os estilos. Consulte Como inserir e formatar texto na pgina 251.
201
Sobre os tags de tabelas Quando as tabelas forem formatadas na janela do documento, possvel denir as propriedades que se aplicam tabela inteira ou s linhas, colunas ou clulas selecionadas na tabela. Ao denir uma propriedade (como a cor de fundo ou o alinhamento) de uma maneira, para a tabela inteira, e de outra, para clulas individuais, conveniente compreender como o Dreamweaver interpreta o cdigo-fonte HTML. Quando uma propriedade for denida mais de uma vez em uma tabela, ela ser interpretada desta maneira: a formatao da clula, que faz parte do tag td, prevalece sobre a formatao das linhas da tabela (tag tr) que, por sua vez, prevalece sobre a formatao da tabela (tag table). Por conseguinte, se for especicado azul para a cor de fundo de uma nica clula e, em seguida, denido amarelo para o fundo da tabela inteira, a clula azul no se tornar amarela, pois o tag td prevalece sobre o tag table. No exemplo seguinte, o tag table dene uma cor de fundo amarela (#FFFF99) para a tabela inteira. O primeiro tag tr altera estas clulas para verde (#33FF66) e o segundo tag td modica a clula central do alto para azul (#333399). Os tags tr e td na linha inferior no foram alterados, por isso estas clulas adquirem a cor da tabela, que o amarelo.
<table border="1" width="75%" bgcolor="#FFFF99"> <tr bgcolor="#33FF66"> <td> </td> <td bgcolor="#333399"> </td> <td> </td> <tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>
202
Captulo 7
Como definir as propriedades da tabela O inspetor de propriedades exibe as propriedades da tabela quando esta for selecionada. O comando Formatar a tabela tambm pode ser utilizado para aplicar rapidamente um desenho predenido a uma tabela selecionada. Consulte Como usar um esquema de desenho para formatar uma tabela na pgina 206.
Para especificar as propriedades da tabela:
1 2
Selecione a tabela. Escolha Janela > Propriedades, para abrir o inspetor de propriedades. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades.
Para denominar a tabela:
No campo Nome da tabela, digite um nome para a tabela.

Para selecionar as opes de layout da tabela:
Nos campos Linhas e Colunas, especique o nmero de linhas e colunas

na tabela.
Nos campos L e U, especique a largura e a altura da tabela, em pixels, ou

como uma percentagem da janela do navegador. Em geral, no necessrio denir a altura de uma tabela.
Utilize o campo Alinhar, para especicar como a tabela se alinhar aos outros
elementos no mesmo pargrafo, como texto ou imagens. esquerda alinha a tabela esquerda dos outros elementos, direita alinha a tabela direita dos outros elementos e No centro centraliza a tabela. possvel alinhar esquerda, alinhar direita ou centralizar a tabela em relao aos outros elementos. Pode-se tambm escolher o alinhamento padro do navegador.
Utilize os botes Limpar as alturas das linhas e Limpar as larguras das colunas,
para excluir todos os valores de altura de linha e largura de coluna da tabela.
Utilize o boto Converter as larguras da tabela em pixels, para converter a

largura da tabela, de uma percentagem da janela do navegador em sua largura atual, em pixels.
Utilize o boto Converter as larguras da tabela em percentagens, para converter

a largura da tabela, de pixels em uma percentagem da janela do navegador.
203
Para definir o preenchimento e espaamento da clula, escolha uma das seguintes opes:
No campo CellPad (Preenchimento da clula), especique o nmero de pixels

entre o contedo da clula e os seus limites (ou parede).
No campo CellSpace (Espaamento entre as clulas), especique o nmero de

pixels entre cada clula da tabela. Quando no forem atribudos valores especcos de espaamento e preenchimento da clula, o Netscape Navigator, Microsoft Internet Explorer e o Dreamweaver exibiro a tabela como se o espaamento entre as clulas fosse denido como 2 e o preenchimento da clula como 1.
Para definir as bordas da tabela, escolha uma das seguintes opes:
No campo Borda, especique a largura, em pixels, da borda da tabela. A

maioria dos navegadores exibe a borda como uma linha tridimensional. Caso a tabela esteja sendo utilizada para layout de pgina, especique um valor 0 para a borda. Para exibir os limites da tabela e das clulas quando a borda for denida como 0, escolha Exibir > Auxlios visuais > Bordas da tabela.
Utilize o campo Brdr Color (Cor da borda), para selecionar uma cor de borda
para a tabela inteira.
Utilize as opes de cor de fundo, para denir a imagem ou a cor de fundo

da tabela.
Utilize o campo Imagem de fundo, para denir a imagem de fundo da tabela.

Como definir as propriedades das colunas, linhas e clulas Selecione qualquer combinao de clulas e, em seguida, utilize o inspetor de propriedades para alterar a aparncia de clulas, linhas e colunas individuais. Para selecionar as clulas, linhas e colunas, consulte Como selecionar os elementos da tabela na pgina 200. Para aplicar a formatao a uma tabela inteira, consulte Como denir as propriedades da tabela na pgina 203.
Para formatar uma linha, coluna ou clula:
1 2
Selecione qualquer combinao de clulas na tabela. Escolha Janela > Propriedades, para abrir o inspetor de propriedades, e clique na seta de expanso, no canto inferior direito, para examinar todas as propriedades.
204
Captulo 7
Escolha dentre as seguintes opes de aparncia: contedo de uma clula, coluna ou linha. O contedo pode ser alinhado esquerda, direita, no centro ou de acordo com o padro do navegador (normalmente, esquerda, para as clulas normais, e centralizado, para as clulas de cabealho).
Utilize o menu pop-up Horiz, para denir o alinhamento horizontal do
Utilize o menu pop-up Vert, para denir o alinhamento vertical do contedo

de uma clula, coluna ou linha. O contedo pode ser alinhado no alto, no meio, embaixo, na linha de base ou de acordo com o padro do navegador (normalmente, no meio).
Especique a largura e altura das clulas selecionadas, em pixels, nos campos L

e U. Para utilizar percentagens, coloque um sinal de percentual (%) aps o valor.
Para denir uma imagem de fundo para uma clula, coluna ou linha, utilize o
campo Fundo. Clique no cone correspondente pasta, para procurar uma imagem; tambm possvel digitar o caminho da imagem ou utilizar o cone do indicador de arquivos.
Para denir a cor de fundo de uma clula, coluna ou linha, utilize o campo
Fundo. possvel utilizar o seletor de cores ou digitar o cdigo hexadecimal correspondente cor escolhida.
Para denir a cor de borda das clulas, utilize a opo Borda.

4
Escolha dentre as seguintes opes de layout: selecionadas e criar uma clula. Consulte Como dividir e mesclar as clulas na pgina 210.
Clique no boto Mesclar as clulas, para combinar as clulas, linhas ou colunas Clique no boto Dividir a clula, para dividir a clula em duas. Consulte
Como dividir e mesclar as clulas na pgina 210.
Selecione Sem quebra, para impedir a quebra automtica de linhas. Esta opo
expande as clulas, a m de que acomodem todos os dados medida que forem digitados ou colados em uma clula. Normalmente, as clulas se expandem horizontalmente para acomodar a palavra maior e, em seguida, se expandem verticalmente.
Selecione Cabealho, para formatar as clulas ou linhas selecionadas como um

cabealho de tabela. Como padro, o contedo das clulas do cabealho da tabela est em negrito e no centro.
205
Como usar um esquema de desenho para formatar uma tabela Utilize o comando Formatar a tabela, para aplicar rapidamente um desenho predenido a uma tabela. Em seguida, as opes podem ser selecionadas para personalizar o desenho.
Para utilizar um desenho predefinido:
1 2
Selecione a tabela e escolha Comandos > Formatar a tabela. Na caixa de dilogo que aparecer, escolha um esquema de desenho na lista esquerda. A tabela ser atualizada, de modo a exibir um exemplo do desenho. Para aprimorar ainda mais a personalizao do desenho, altere as opes Cores da linha, Linha do alto e Coluna esquerda. Para modicar a largura da borda, digite um valor no campo Borda. Digite 0, para que no haja borda. Para aplicar o desenho s clulas da tabela (tagstd) em vez das linhas (tags tr), selecione a opo Aplicar todos os atributos aos tags TD e no aos TR. A formatao de clulas de tabela se sobrepor a qualquer formatao especicada para a linha em que a clula se encontra. No entanto, se desejar que todas as clulas numa linha sejam formatadas da mesma forma, melhor formatar a linha da tabela ao invs de cada clula. Este procedimento resultar em cdigo HTML mais limpo e conciso. Consulte Como formatar as tabelas e clulas na pgina 201.
Clique em Aplicar ou OK, para formatar a tabela com o desenho selecionado.
206
Captulo 7
Como redimensionar as tabelas e clulas

possvel redimensionar a tabela inteira, ou determinadas linhas e colunas. Quando a tabela inteira for redimensionada, todas as clulas sero alteradas proporcionalmente.
Para redimensionar a tabela:
1 2
Selecione a tabela. Arraste uma das alas de seleo, para redimensionar a tabela em relao a esta dimenso. Quando as alas dos cantos forem arrastadas, ambas as dimenses sero redimensionadas.
Para alterar o tamanho de uma linha ou coluna, siga um dos procedimentos abaixo:
Para alterar a altura da linha, arraste a borda inferior da mesma. Para alterar a largura de uma coluna, arraste a borda direita da mesma.
Como alterar a largura das colunas O inspetor de propriedades permite especicar a largura de uma coluna de trs maneiras.
Para definir a largura da coluna:
1 2 3
Clique em qualquer uma das clulas da coluna ou selecione a mesma. Escolha Janela > Propriedades, para abrir o inspetor de propriedades. No campo L, siga um dos procedimentos abaixo: especicado.
Digite um nmero para denir a largura da coluna com o nmero de pixels Digite um nmero seguido de um sinal de percentual (%) para denir a largura
da coluna como sendo uma percentagem da largura da tabela.
Deixe o campo em branco (o padro), para que o navegador e o Dreamweaver

possam determinar a largura adequada de acordo com o contedo da clula e as larguras das outras colunas. Normalmente, o espao alocado com base na linha mais longa ou na imagem mais larga. Esta a razo pela qual uma coluna s vezes torna-se mais larga do que as outras na tabela, quando nela for adicionado o contedo.
207
Como redefinir a largura e a altura A maneira mais simples de denir as larguras das colunas e as alturas das linhas arrastar as bordas da tabela. Quando uma coluna ou linha for arrastada, automaticamente sero denidos valores especcos para todas as linhas e colunas, em pixels, ou como percentagens das dimenses da tabela, dependendo da maneira como a largura da tabela for especicada. Se o resultado desejado no puder ser obtido arrastando as bordas da tabela, possvel limpar as larguras das colunas e recomear.
Para alterar as larguras e alturas, siga um dos procedimentos abaixo:
Selecione a tabela, escolha Modicar > Tabela, e selecione Limpar as alturas das
clulas ou Limpar as larguras das clulas.
Abra a visualizao de cdigo (ou o inspetor de cdigo) e altere as larguras e

alturas diretamente no cdigo HTML.
No inspetor de propriedades, digite valores especcos para a largura e altura,

nas caixas L e U.
Como adicionar e remover linhas e colunas

Utilize os comandos no submenu Modicar > Tabela, ou os do menu contextual, para adicionar e remover linhas e colunas de uma tabela.
Para adicionar linhas ou colunas:
1 2
Clique na clula na qual dever aparecer a nova linha ou coluna. Siga um dos procedimentos abaixo: Tabela > Inserir linha, no menu contextual.
Para adicionar uma linha, escolha Modicar > Tabela > Inserir linha, ou escolha Para adicionar uma coluna, escolha Modicar > Tabela > Inserir coluna, ou
escolha Tabela > Inserir coluna, no menu contextual.
Para adicionar linhas e colunas, escolha Modicar > Tabela > Inserir linhas
ou colunas, ou escolha Tabela > Inserir linhas ou colunas, no menu contextual.
3
Na caixa de dilogo que aparecer, digite o nmero de linhas ou colunas a serem adicionadas. Especique se as novas linhas ou colunas devero aparecer antes ou depois da linha ou coluna selecionada. Clique em OK.
208
Captulo 7
Para excluir uma linha ou coluna:
1 2
Clique em uma clula da linha ou coluna que ser excluda. Escolha uma das seguintes opes: Tabela > Excluir a linha, no menu contextual.
Para excluir uma linha, escolha Modicar > Tabela > Excluir a linha, ou escolha Para excluir uma coluna, escolha Modicar > Tabela > Excluir a coluna, ou
escolha Tabela > Excluir a coluna, no menu contextual.
Para adicionar ou excluir as linhas ou colunas a partir da base ou da direita de uma tabela:
Selecione a tabela inteira. Clique no canto superior esquerdo da tabela ou clique uma vez na tabela e escolha Modicar > Tabela > Selecionar a tabela. No inspetor de propriedades, siga um dos procedimentos abaixo:
Aumente o valor da linha ou coluna, para adicionar linhas. Diminua o valor da linha ou coluna, para excluir as linhas.
O Dreamweaver adicionar e remover as linhas da base da tabela e isso adicionar e remover colunas direita. O Dreamweaver no avisar quando as linhas ou colunas que contm dados estiverem sendo excludas. Como aninhar as tabelas Uma tabela aninhada aquela que est dentro de outra. Uma tabela aninhada pode ser congurada como qualquer outra tabela; contudo, a sua largura est limitada pela largura da clula na qual ela aparece.
209
Para aninhar uma tabela na clula de uma tabela:
Siga um dos procedimentos abaixo: Inserir > Tabela.
Clique na clula onde dever ser inserida a segunda tabela e escolha Clique na clula onde dever ser inserida a segunda tabela. Arraste o boto Tabela, da categoria Comuns, do painel Objetos, at a clula
onde dever aparecer a segunda tabela.
2
Especique as propriedades da tabela na caixa de dilogo Inserir tabela, e clique em OK.
Como dividir e mesclar as clulas Utilize o inspetor de propriedades ou os comandos do menu Modicar > Tabela, para dividir ou mesclar as clulas. possvel mesclar qualquer nmero de clulas adjacentes contanto que a seleo inteira tenha a forma retangular para produzir uma nica clula que abranja diversas colunas ou linhas. Uma clula pode ser dividida em qualquer nmero de linhas ou colunas, no importando se tiver sido mesclada anteriormente. O Dreamweaver ir reestruturar automaticamente a tabela (adicionando os atributos COLSPAN ou ROWSPAN, necessrios), criando a disposio especicada. Na ilustrao seguinte, as clulas no meio das duas primeiras linhas foram mescladas, de modo a abranger duas linhas.
210
Captulo 7
Para mesclar duas ou mais clulas em uma tabela:
Selecione as clulas a serem mescladas. As clulas selecionadas devem ser adjacentes e retangulares.
Esta seleo tem a forma retangular, por isso as clulas podem ser mescladas.
Esta seleo da tabela no tem a forma retangular, por isso as clulas no podem ser mescladas.
2
Escolha Modicar > Tabela > Mesclar as clulas, ou clique no boto Mesclar as clulas, no inspetor de propriedades. O contedo das clulas individuais ser colocado na clula mesclada resultante. As propriedades da primeira clula selecionada sero aplicadas clula mesclada.
Para dividir uma clula mesclada:
1 2
Clique na clula ou selecione-a. Escolha Modicar > Tabela > Dividir a clula, ou clique no boto Dividir a clula, no inspetor de propriedades. Na caixa de dilogo Dividir a clula, escolha se a clula ser dividida em linhas ou colunas e, em seguida, digite o nmero de linhas ou colunas.
211
Como copiar e colar as clulas

possvel copiar ou colar diversas clulas da tabela, sem que percam a formatao, ou copiar apenas o contedo da clula. As clulas podem ser coladas em um ponto de insero ou em um local selecionado de uma tabela existente. Para colar diversas clulas da tabela, o contedo da rea de trabalho dever ser compatvel com a estrutura da tabela ou da seleo na qual as clulas sero coladas.
Para recortar ou copiar as clulas de uma tabela:
Selecione uma ou mais clulas na tabela. Para serem recortadas ou copiadas, as clulas selecionadas devem formar um retngulo. Consulte Como selecionar os elementos da tabela na pgina 200.
Seleo correta: as clulas podem ser recortadas ou copiadas.
Seleo incorreta: estas clulas no podem ser recortadas ou copiadas.

2
Recorte ou copie as clulas, utilizando os comandos no menu Editar. Se for selecionada a linha ou coluna inteira, esta ser removida da tabela quando for escolhida a opo Editar > Recortar.
212
Captulo 7
Para colar as clulas da tabela:
Escolha onde deseja que as clulas sejam coladas. clula.
Para colar as clulas antes ou acima de uma determinada clula, clique nesta Para criar uma nova tabela com as clulas coladas, clique no local onde a tabela
dever aparecer (contanto que no seja dentro de outra tabela).
2
Escolha Editar > Colar. Se forem coladas linhas ou colunas inteiras em uma tabela existente, estas sero adicionadas tabela. Se estiver colando um clula determinada, 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 denir uma nova tabela.
Para remover o contedo e manter a clula intacta:
1 2
Selecione uma ou mais clulas. Escolha Editar > Limpar, ou pressione a tecla Delete.
Nota: Se todas as clulas em uma linha ou coluna forem selecionadas, a linha ou coluna, no apenas o seu contedo, ser removida da tabela.
213
Como ordenar as tabelas

Uma ordenao simples da tabela pode ser executada atravs da classicao com base no contedo de uma coluna. possvel tambm realizar uma ordenao da tabela mais complexa, classicando-a em relao a duas colunas. No possvel ordenar as tabelas que contm o atributo COLSPAN ou ROWSPAN isto , aquelas que comportam clulas mescladas. Para obter mais detalhes sobre as clulas mescladas, consulte Como dividir e mesclar as clulas na pgina 210.
Para ordenar uma tabela:
1 2
Selecione a tabela e escolha Comandos > Ordenar a tabela. Na caixa de dilogo que aparecer, escolha dentre as seguintes opes:
Selecione a coluna a ser ordenada na opo Ordenar por. Escolha se deseja ordenar a coluna alfabtica ou numericamente na opo
Ordem. Esta opo importante quando o contedo de uma coluna for numrico. Uma ordenao alfabtica aplicada a uma lista de nmeros de um e dois dgitos resultar em uma ordenao alfanumrica (como 1, 10, 2, 20, 3, 30, por exemplo), em vez de uma ordenao numrica direta (como 1, 2, 3, 10, 20, 30).
Selecione Ascendente (A a Z ou crescente) ou Descendente, para a ordem de

classicao.
3
Para executar uma ordenao secundria em uma coluna diferente, especique as opes de ordenao no menu pop-up Em seguida, por. Selecione a opo A ordenao inclui a primeira linha, para inserir a primeira linha na ordenao. Se a primeira linha for um cabealho que no puder ser movido, no marque esta opo. Clique em Aplicar ou OK, para ordenar a tabela.
214
Captulo 7
Como exportar os dados da tabela

Os dados de uma tabela criada no Dreamweaver podem ser exportados, se forem salvos em um formato de arquivo que aceite dados delimitados. Os separadores do delimitador que podem ser utilizados so vrgula, dois pontos, ponto-e-vrgula ou espao. No possvel selecionar partes de uma tabela para exportar; ela sempre exportada inteira. Se apenas alguns dados da tabela forem necessrios (as primeiras seis linhas ou colunas, por exemplo) crie uma nova tabela, copie as informaes para a nova tabela e exporte-a.
Para exportar uma tabela:
1 2
Coloque o ponto de insero em qualquer clula da tabela a ser exportada. Escolha Arquivo > Exportar > Exportar a tabela. Aparecer a caixa de dilogo Exportar a tabela.
No menu pop-up Delimitador, selecione um valor de delimitador para os dados da tabela. No menu Quebras de linha, selecione as quebras de linha do sistema operacional para o qual o arquivo estiver sendo exportado Windows, Macintosh ou UNIX. Clique em Exportar. Na caixa de dilogo que aparecer, digite um nome para o arquivo e clique em Salvar.
5 6
215
216
Captulo 7
CAPTULO 8
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como utilizar as molduras (frames)
As molduras so utilizadas em uma pgina da Web para dividi-la em vrias pginas HTML. Por exemplo: uma pgina da Web consiste em trs molduras. Uma moldura estreita lateral que contm um menu de rolagem, outra no alto com o logotipo e o nome do site da Web, e uma moldura grande que ocupa o restante da pgina e acomoda o contedo principal. Cada uma dessas molduras uma pgina HTML independente. Elas funcionam juntas na pgina atravs da utilizao de um ou mais conjuntos de molduras, que constituem uma pgina HTML, que dene a estrutura e as propriedades da pgina da Web, incluindo informaes sobre o nmero de molduras exibidas na pgina, o tamanho dos elementos, a origem da pgina carregada em uma moldura e outras propriedades que podem ser conguradas. Uma pgina com um conjunto de molduras no exibida em um navegador, ela armazena apenas as informaes sobre a maneira como as molduras sero exibidas em uma pgina. (Esta a pgina que deve ser visualizada quando for utilizada a opo Visualizar no navegador.)
217
Neste exemplo, a moldura do alto permaneceria esttica e nunca seria alterada a cada pgina do site. O menu da moldura lateral ter links que alteram o contedo da rea da moldura principal, mas do contrrio, permanecer esttica. A rea da moldura principal dinmica, isto , modica-se dependendo do item de menu escolhido. Todas as molduras e conjuntos molduras da pgina podem ser formatados utilizando o inspetor de propriedades. possvel denir a rolagem como ativada ou desativada, congurar a largura e altura, denominar cada pgina e muito mais. Para obter mais informaes, consulte Sobre as propriedades das molduras e dos conjuntos de molduras na pgina 226. Uma pgina da Web que contm trs molduras consiste em quatro pginas HTML individuais: o arquivo do conjunto de molduras e trs arquivos que comportam o contedo que aparece dentro das molduras. Quando uma pgina for projetada para utilizar conjuntos de molduras, esses quatro arquivos devem ser salvos, para que a pgina funcione corretamente no navegador. Para obter mais informaes sobre a maneira de criar pginas da Web bem-sucedidas, que utilizem molduras, consulte Sobre a criao de pginas da Web com base em molduras na pgina 219.
Como decidir se as molduras sero utilizadas

A utilizao mais comum da molduras para navegao. Uma pgina da Web pode usar uma moldura para acomodar o menu de navegao e outra para o contedo da pgina. Como o menu de navegao est em uma moldura, um visitante do site poder clicar em um item de menu e o contedo aparecer na moldura de contedo, mas o menu de navegao no ser alterado. Esse procedimento mantm o usurio orientado no site.
218
Captulo 8
Contudo, as molduras podem ser confusas de implementar e, com freqncia, so criadas pginas da Web sem molduras, que atingem os mesmos objetivos daquelas que as utilizam. Por exemplo: para colocar a barra de navegao no lado esquerdo da pgina, divida a pgina em duas molduras ou inclua a navegao esquerda em cada pgina do site. A diferena que, quando so utilizadas molduras, necessrio criar a navegao apenas uma vez. Se voc decidir utilizar molduras no seu site da Web, certique-se de ter compreendido a relao entre molduras e conjuntos de molduras, porque a vinculao com molduras pode ser confusa.
Sobre a criao de pginas da Web com base em molduras

As molduras so uma ferramenta muito til para os designers da Web, mas elas precisam ser implementadas corretamente para que funcionem. Execute as etapas abaixo para garantir que a sua pgina da Web funcione corretamente (no necessariamente em uma determinada ordem):
Crie as molduras e o conjunto de molduras na pgina. Consulte Como criar

molduras na pgina 219.
Salve cada um dos arquivos utilizados no site. Lembre-se de que cada moldura e
o conjunto de molduras uma pgina da Web independente, e cada pgina deve ser salva. Consulte Como salvar os arquivos de molduras e de conjuntos de molduras na pgina 225.
Dena as propriedades de cada moldura e do conjunto de molduras. Isso inclui

o nome de cada moldura e do conjunto de molduras, a denio de opes xas e de rolagem, etc. Consulte Sobre as propriedades das molduras e dos conjuntos de molduras na pgina 226.
Verique se todos os links incluem os respectivos destinos, para que o contedo

vinculado aparea na rea correta. Consulte Como controlar o contedo de molduras com os links na pgina 233.
Como criar molduras

H duas maneiras de criar um conjunto de molduras no Dreamweaver: voc pode desenh-lo ou escolher entre vrios conjuntos de molduras predenidos. A seleo de um conjunto de molduras predenido congura automaticamente todos os conjuntos de molduras e as molduras necessrios criao do layout, e a maneira mais fcil de inserir um layout de molduras na pgina. As molduras podem ser criadas apenas na visualizao do projeto da janela do documento.
219
Como inserir um conjunto de molduras predefinido Os conjuntos de molduras predenidos facilitam a seleo do tipo de conjunto de molduras a ser criado. Os cones de conjuntos de molduras predenidos, na categoria Molduras do painel Objetos, so uma representao visual de cada conjunto de molduras aplicado a um documento selecionado.
O conjunto de molduras escolhido circunda o documento atual no qual o ponto de insero est situado. A rea azul do cone de conjunto de molduras predenido representa a pgina ou moldura escolhida em um documento, enquanto que a rea branca representa a(s) nova(s) moldura(s).
Para inserir um conjunto de molduras predefinido:
1 2
Coloque o ponto de insero no documento. Siga um dos procedimentos abaixo: predenido. Para inserir o conjunto de molduras, clique em um cone ou arraste-o diretamente para o documento.
Na categoria Molduras do painel Objetos, selecione um conjunto de molduras Para selecionar um conjunto de molduras predenido, escolha Inserir >
Molduras > Esquerda, Direita, Superior, Inferior, Esquerda e superior, Superior esquerda, Esquerda superior ou Dividir.
220
Captulo 8
Como projetar e inserir um conjunto de molduras Antes de criar um conjunto de molduras ou trabalhar com molduras, torne visveis as bordas da moldura na janela do documento. Para exibir as bordas da moldura em um documento, escolha Exibir > Auxlios visuais > Bordas da moldura. Quando as bordas da moldura forem mostradas, ser adicionado espao em volta da borda do documento, fornecendo um indicador visual das reas da moldura no documento.
Para criar um conjunto de molduras, siga um dos procedimentos abaixo:
Escolha Modicar > Conjunto de molduras > Dividir a moldura para a

esquerda, para a direita, para cima ou para baixo.
Arraste uma das bordas da moldura at a janela do documento para dividir o

documento vertical ou horizontalmente. Arraste uma borda da moldura a partir de um dos cantos, para dividir o documento em quatro molduras.
Mantenha pressionada a tecla Alt (no Windows), ou Option (no Macintosh), e

arraste para dividir uma moldura interna.
Para excluir uma moldura:
Arraste a borda da moldura para fora da pgina ou at a borda da moldura-me.
221
Como criar um conjunto aninhado de molduras Um conjunto de molduras que estiver dentro de outro denominado um conjunto aninhado de molduras. Cada novo conjunto de molduras criado inclui o seu respectivo documento HTML com um conjunto de molduras e documentos com molduras. A maioria das pginas da Web que utilizam molduras contm, de fato, conjuntos aninhados de molduras, e vrios dos conjuntos de molduras predenidos no Dreamweaver tambm utilizam o aninhamento. Por exemplo: um documento com trs molduras poder exibir o logotipo de uma empresa em uma moldura no alto do documento, os controles de navegao em uma moldura no lado esquerdo de um documento e o contedo em uma terceira moldura.
Conjunto de molduras principal
As molduras do menu e do contedo esto aninhadas dentro do conjunto de molduras padro
Para criar um conjunto aninhado de molduras:
Coloque o ponto de insero na moldura onde dever ser inserido um conjunto aninhado de molduras. Siga um dos procedimentos abaixo: esquerda, para a direita, para cima ou para baixo.
Escolha Modicar > Conjunto de molduras > Dividir a moldura para a Na categoria Molduras do painel Objetos, selecione um cone de conjunto de
molduras.
Escolha Inserir > Molduras > Esquerda, Direita, Superior, Inferior, Esquerda e
superior, Superior esquerda, Esquerda superior ou Dividir.
222
Captulo 8
Como selecionar uma moldura ou um conjunto de molduras

As molduras e os conjuntos de molduras so documentos HTML individuais. Para fazer alteraes em uma moldura ou em um conjunto de molduras, inicie selecionando a moldura ou o conjunto de molduras a serem modicados. Voc pode selecionar uma moldura ou um conjunto de molduras na janela do documento, ou utilizar o painel Molduras. Quando uma moldura ou um conjunto de molduras for selecionado, as linhas de seleo aparecero no painel Molduras e na janela do documento. Como utilizar o painel Molduras O painel Molduras fornece uma representao visual das molduras em um documento. Pode-se clicar em uma moldura ou em um conjunto de molduras, no painel Molduras, para selecion-los no documento e, em seguida, exibir ou editar as propriedades do item escolhido, no inspetor de propriedades. Consulte Sobre as propriedades das molduras e dos conjuntos de molduras na pgina 226. O painel Molduras mostra a hierarquia da estrutura do conjunto de molduras de um modo que no aparece na janela do documento. Nesse painel, uma borda tridimensional espessa envolve um conjunto de molduras; as molduras so contornadas por uma linha na cinza e cada uma delas identicada por um nome.
Para exibir o painel Molduras, siga um dos procedimentos abaixo:
Escolha Janela > Molduras. Pressione as teclas Control e F10 (no Windows), ou Command e F10 (no
Macintosh).
223
Para selecionar uma moldura no painel Molduras:
Clique na moldura, no painel Molduras.

Para selecionar um conjunto de molduras no painel Molduras:
Clique na borda que circunda as molduras, no painel Molduras. Como selecionar uma moldura ou um conjunto de molduras na janela do documento Na janela do documento, quando uma moldura for selecionada, suas bordas sero marcadas com uma linha pontilhada; quando um conjunto de molduras for escolhido, todas as bordas das molduras nesse conjunto sero marcadas com uma linha pontilhada. Selecione as molduras e os conjuntos de molduras, para alterar suas propriedades. O inspetor de propriedades exibir as propriedades da moldura ou do conjunto de molduras escolhido. Consulte Sobre as propriedades das molduras e dos conjuntos de molduras na pgina 226.
Para selecionar uma moldura na janela do documento:
Pressione a tecla Alt (no Windows), ou as teclas Option e Shift (no Macintosh), e clique dentro de uma moldura.
Para selecionar um conjunto de molduras na janela do documento:
Clique na borda de uma moldura, na janela do documento.

Para mover a seleo at a prxima moldura, siga um dos procedimentos abaixo:
Para mover a seleo at a prxima moldura,

Mantenha pressionada a tecla Alt (no Windows), ou Command (no Macintosh), e pressione a tecla de seta direita ou esquerda.
Para mover a seleo at o conjunto-pai de molduras (que contm as molduras

aninhadas), Pressione a tecla Alt (no Windows), ou Command (no Macintosh), e a seta para cima.
Para mover a seleo at a moldura-lha (a moldura que est aninhada em

outra moldura), pressione a tecla Alt (no Windows), ou Command (no Macintosh), e a seta para baixo.
224
Captulo 8
Como salvar os arquivos de molduras e de conjuntos de molduras

Um arquivo de conjunto de molduras e seus arquivos de molduras associados devem ser salvos para que a pgina possa ser visualizada em um navegador. possvel salvar individualmente uma pgina com um conjunto de molduras ou com uma moldura, ou salvar todos os arquivos de molduras abertos e a pgina com o conjunto de molduras. Quando o Dreamweaver for utilizado para criar documentos com molduras, a cada novo documento ser dado um nome de arquivo temporrio. Por exemplo: MolduraSemNome_1, para a pgina com o conjunto de molduras, SemNome_1, SemNome_2, etc., para as pginas com molduras. Quando uma das opes de salvamento for selecionada, ser aberta a caixa de dilogo Salvar o arquivo, j pronta para salvar um documento com o seu nome de arquivo temporrio. Como os arquivos no tm ttulo, poder ser difcil determinar qual arquivo de moldura est sendo salvo. Examine as linhas da seleo da moldura na janela do documento, para identicar o documento que est sendo salvo. A rea selecionada identica a moldura mencionada na caixa de dilogo Salvar o arquivo. O nome do arquivo de moldura ou de conjunto de moldura selecionado tambm aparecer na barra de ttulo.
225
Para salvar um arquivo de conjunto de molduras:
Selecione o conjunto de molduras, no painel Molduras ou na janela do documento. Escolha uma dentre as seguintes opes: conjunto de molduras.
Para salvar o arquivo do conjunto de molduras, escolha Arquivo > Salvar o Para salvar um novo arquivo de conjunto de molduras, escolha Arquivo >
Salvar o conjunto de molduras como.
Para salvar um documento que estiver dentro de uma moldura:
Clique na moldura para selecion-la e, em seguida, escolha Arquivo > Salvar a moldura, ou Arquivo > Salvar a moldura como.
Para salvar todos os arquivos em um conjunto de molduras:
Escolha Arquivo > Salvar todas as molduras. Esse comando salva todos os documentos abertos, inclusive documentos individuais, molduras e conjuntos de molduras.
Nota: Ao salvar os arquivos, utilize as linhas de seleo de molduras, na janela do documento, para ajud-lo a identificar os documentos com molduras e aqueles com conjuntos de molduras.
Sobre as propriedades das molduras e dos conjuntos de molduras

As molduras e os conjuntos de molduras tm inspetores de propriedades prprios.
As propriedades das molduras determinam o nome da moldura, arquivo de

origem, margens, rolagem, redimensionamento e bordas de cada moldura em um conjunto.
As propriedades dos conjuntos de molduras controlam as dimenses das

molduras, assim como a cor e largura das bordas entre elas.
Para exibir as propriedades da moldura:
Escolha Janela > Propriedades, para exibir o inspetor de propriedades, caso no esteja aberto. Siga um dos procedimentos abaixo: Macintosh), clique na moldura.
Mantendo pressionada a tecla Alt (no Windows) ou as teclas Option e Shift (no Clique em uma moldura, no painel Molduras.
226
Captulo 8
Como definir as propriedades das molduras Utilize o inspetor de propriedades, para denominar uma moldura e denir as bordas e margens. Para examinar todas as propriedades das molduras, clique na seta de expanso, localizada no canto inferior direito do inspetor de propriedades. necessrio dar nome s molduras, para que os links da pgina funcionem corretamente.
Para especificar as propriedades das molduras:
Selecione uma moldura, seguindo um dos procedimentos abaixo:
Clique em uma moldura, no painel Molduras. Mantendo pressionada a tecla Alt (no Windows) ou as teclas Option e Shift (no
Macintosh), clique em uma moldura na janela do documento.
2
Escolha Janela > Propriedades, para abrir o inspetor de propriedades. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades.
Para denominar uma moldura, digite um nome no campo Nome da moldura.

Nota: Nesse campo determinado o nome da moldura, a ser utilizado como referncia de destino e script de hyperlinks. O nome de uma moldura dever conter apenas uma palavra. So permitidos os sinais de sublinhado (_), mas no hfens (-), pontos (.) e espaos. Os nomes das molduras devem iniciar com uma letra (ao invs de um nmero). No utilize as palavras reservadas do JavaScript (top ou navigator, por exemplo) como nomes de molduras.
227
Escolha uma dentre as seguintes opes de molduras: arquivo ou clique no cone correspondente pasta, para procurar e selecionar o arquivo. Tambm possvel abrir um arquivo em uma moldura, posicionando o cursor na mesma e escolhendo Arquivo > Abrir na moldura.
Orig. determina o documento de origem da moldura. Digite um nome de
Paginao determina se as barras de rolagem aparecero quando no houver

espao suciente para exibir o contedo da moldura. A denio padro da maioria dos navegadores Autom.
Sem redimensionamento restringe o tamanho da moldura e impede que os

usurios arrastem as suas bordas. As molduras podem ser sempre redimensionadas na janela do documento, contudo, se essa opo for selecionada, um usurio no poder redimension-las em seu navegador.
Bordas controlam a borda da moldura. As opes so Sim, No e Padro. A

escolha da opo Bordas anula as denies de borda conguradas para o conjunto de molduras. Consulte Como denir as propriedades dos conjuntos de molduras na pgina 229. A denio padro da maioria dos navegadores Sim. Uma borda pode ser desativada apenas quando todas as molduras a ela adjacentes estiverem denidas como No, ou Padro, com o conjunto-pai de molduras denido como No.
Cor da borda dene a cor de todas as bordas adjacentes moldura. Essa

denio anula a cor da borda do conjunto de molduras.
5
Dena as seguintes opes de margem (se as opes no estiverem visveis, clique na seta de expanso, no canto inferior direito):
Largura da margem dene
a largura das margens esquerda e direita, em pixels (o espao entre as bordas da moldura e o seu contedo).
Altura da margem dene a altura das margens superior e inferior, em pixels (o espao entre as bordas da moldura e o seu contedo).
228
Captulo 8
Como definir as propriedades dos conjuntos de molduras Utilize as propriedades dos conjuntos de molduras para denir as bordas e o tamanho das molduras. A denio da propriedade de uma moldura anular o parmetro correspondente em um conjunto de molduras. Por exemplo: a denio das propriedades da borda em uma moldura anular essas mesmas propriedades denidas no conjunto de molduras. Os conjuntos de molduras predenidos so utilizados para aplicar rapidamente um conjunto a um documento. Esses conjuntos compartilham os seguintes valores de propriedades padro: no haver bordas, barras de rolagem e redimensionamento de molduras quando forem visualizadas em um navegador. Para alterar os valores padro, selecione as opes desejadas no inspetor de propriedades.
Para exibir as propriedades dos conjuntos de molduras:
Escolha Janela > Propriedades, para exibir o inspetor de propriedades, caso no esteja aberto. Siga um dos procedimentos abaixo:
Clique em uma borda entre duas molduras, na janela do documento. Clique na borda que circunda as molduras, no painel Molduras.
3
Para examinar todas as propriedades dos conjuntos de molduras, clique na seta de expanso, no canto inferior direito do inspetor de propriedades.
229
Para especificar as propriedades dos conjuntos de molduras:
1 2
Selecione um conjunto de molduras. No menu pop-up Bordas, selecione se as bordas sero exibidas em volta das molduras quando o documento for exibido em um navegador.
Se desejar exibir as bordas, selecione Sim. Se no quiser exibir as bordas, selecione No. Caso o navegador do usurio deva determinar como as bordas sero mostradas,
selecione Padro.
3
No campo Largura da borda, digite um nmero, para especicar a largura das bordas no conjunto de molduras. No campo Cor da borda, utilize o seletor de cores para selecionar uma cor para a borda, ou digite um valor hexadecimal correspondente a uma cor. Para selecionar as opes de tamanho de moldura, clique nas guias na caixa Seleo de linha/coluna, para selecionar uma linha, ou nas guias situadas no alto, para selecionar uma coluna. Em seguida, no campo Valor, digite um nmero para denir o tamanho da linha ou coluna selecionada, e, no menu pop-up Unidades, especique a unidade de medida para o nmero no campo Valor.
Como denominar um documento com um conjunto de molduras Para adicionar um ttulo a uma pgina com um conjunto de molduras, utilize a opo Propriedades da pgina.
Para denominar uma pgina com um conjunto de molduras:
Selecione um conjunto de molduras, seguindo um dos procedimentos abaixo:
Clique na borda do conjunto de molduras, no painel Molduras. Mantendo pressionada a tecla Alt (no Windows), ou as teclas Option e Shift
(no Macintosh), clique em uma moldura na janela do documento. Talvez seja necessrio pressionar a tecla Alt (no Windows) ou Command(no Macintosh) mais a tecla de seta para cima, para selecionar o conjunto de molduras.
2 3
Escolha Modicar > Propriedades da pgina. No campo Ttulo, digite um nome para o documento.
230
Captulo 8
Como especificar os tamanhos das molduras Arraste a borda de uma moldura na janela do documento, a m de denir os tamanhos aproximados das molduras; em seguida, utilize o inspetor de propriedades para especicar o espao que o navegador reservar para uma moldura, quando o tamanho da tela no permitir que as molduras sejam exibidas no tamanho em que foram criadas.
Para especificar os tamanhos das molduras:
Clique na borda de uma moldura, para selecionar o conjunto de molduras. Escolha Exibir > Auxlios visuais >Bordas da moldura, se as bordas no estiverem visveis.
No inspetor de propriedades, clique na seta de expanso, para exibir todas as propriedades. Na caixa Seleo de lin./col, clique na linha ou coluna a ser alterada.
Para especicar como o espao ser alocado quando a janela do navegador for redimensionada, digite um nmero no campo Valor e escolha uma dentre as seguintes opes de Unidades: absoluto. Esta a melhor opo para as molduras que devero ter sempre o mesmo tamanho, como uma barra de navegao. Se for denida uma opo de Unidades diferente para as outras molduras, o espao reservado a elas ser denido apenas depois que as molduras especicadas em pixels tiverem assumido o seu tamanho total.
Pixels dene o tamanho da coluna ou linha selecionada como um valor
Percentagem especica que a moldura atual dever assumir um valor percentual

do conjunto de molduras do qual faz parte. Para as molduras especicadas com unidades como percentagens, o espao ser alocado aps o das molduras denidas em pixels, porm antes das molduras denidas como relativas.
Relativa especica que o espao destinado moldura dever ser proporcional ao

das outras molduras. O espao reservado s molduras especicadas com unidades relativas denido aps as molduras denidas em pixels e percentagens, porm elas ocuparo todo o espao restante na janela do navegador.
231
Como definir as bordas de molduras e conjuntos de molduras possvel especicar a aparncia das bordas de molduras e conjuntos de molduras em um documento. Ao denir as opes de bordas de uma moldura, a opo do conjunto de molduras correspondente ser ignorada.
Para definir as bordas de molduras:
Selecione a moldura, clicando e mantendo pressionada a tecla Alt (no Windows), ou as teclas Option e Shift (no Macintosh), ou clique na moldura, no painel Molduras. Dena as seguintes opes no inspetor de propriedades: denio padro da maioria dos navegadores Sim. Para desativar uma borda, todas as molduras a ela adjacentes devero estar denidas como No (ou Padro, com o conjunto-pai de molduras denido como No).
Bordas controlam a borda das molduras. As opes so Sim, No e Padro. A
Cor da borda dene a cor de todas as bordas adjacentes moldura.

Para definir as bordas do conjunto de molduras:
Selecione o conjunto de molduras, clicando na borda de uma moldura, na janela do documento, ou na borda que circunda as molduras, no painel Molduras. Dena as seguintes opes no inspetor de propriedades: Sim, para exibir as bordas em cores e trs dimenses; No, para exibir as bordas em cinza e lisas, ou Padro, para que o navegador determine como sero exibidas as bordas. A denio padro da maioria dos navegadores Sim.
Bordas controlam a borda das molduras no conjunto de molduras. Escolha
Cor da borda dene a cor de todas as bordas no conjunto de molduras. Essa

denio pode ser ignorada para uma nica moldura, especicando uma cor de borda para essa moldura.
Largura da borda especica a largura das bordas no conjunto de molduras.

Digite 0, para especicar sem borda.
232
Captulo 8
Como alterar a cor do fundo de uma moldura possvel alterar a cor do fundo de uma moldura, denindo a cor de fundo do documento na moldura.
Para alterar a cor de fundo de um documento em uma moldura:
Posicione o cursor na moldura e escolha Modicar > Propriedades da pgina. Clique com o boto direito do mouse (no Windows), ou mantenha pressionada
a tecla Control (no Macintosh) e clique na moldura e, no menu contextual, escolha Propriedades da pgina.
2
Clique no menu pop-up Fundo, para selecionar uma cor.
Como controlar o contedo de molduras com os links

Para utilizar links nas molduras, deve ser denido um destino para o link. O destino a moldura na qual o contedo vinculado ser aberto. Por exemplo: se o menu de navegao estiver na moldura esquerda e o contedo vinculado dever aparecer na moldura principal de contedo, dena destinos para todos os links do menu de navegao. O destino ser o nome da moldura principal de contedo. Por exemplo: main_frame. Quando o usurio clicar em um link de navegao, o contedo ser aberto na moldura principal. Para selecionar uma moldura na qual o arquivo ser aberto, utilize o menu pop-up Destino, no inspetor de propriedades. Um arquivo pode ser denido para que seja aberto em uma nova moldura, substitua as informaes na mesma moldura que o link, ou troque-as em outra moldura. O contedo vinculado pode anular a moldura (no escolhendo um destino) ou aparecer em uma janela de navegador inteiramente nova.
Para designar uma moldura:
1 2
Selecione um texto ou objeto. No campo Link, no inspetor de propriedades, siga um dos procedimentos abaixo:
Digite o nome do arquivo a ser vinculado. Clique no cone correspondente pasta e selecione o arquivo a ser vinculado. Clique e arraste o cone do indicador de arquivos, para selecionar o arquivo a
ser vinculado. Para especicar uma ncora (local especco) no arquivo a ser vinculado, digite o sinal de nmero (#) antes do nome da ncora. Consulte Como estabelecer um link a um local especco de um documento na pgina 394.
233
No menu pop-up Destino, escolha o local onde o documento vinculado dever aparecer. nomes das molduras aparecero nesse menu. Selecione uma moldura com nome, para abrir um documento vinculado na moldura escolhida.
Se as molduras tiverem sido denominadas no inspetor de propriedades, os

abre o documento vinculado em uma nova janela de navegador e disponibiliza a janela atual.
_blank _parent _self
abre o documento vinculado no conjunto-pai de molduras do link.
abre o link na moldura, substituindo o contedo da mesma.
_top abre o link no conjunto de molduras mais externa do documento, substituindo todas as molduras.
Como tratar os navegadores que no podem exibir molduras

O Dreamweaver permite especicar contedos a serem exibidos nos navegadores mais antigos, com base em texto e sem suporte s molduras. O Dreamweaver insere o contedo especicado no documento com o conjunto de molduras, utilizando uma instruo semelhante seguinte:
<noframes><body bgcolor="#FFFFFF"> este o contedo noframes. </body></noframes>
Quando um navegador sem suporte s molduras carregar o arquivo do conjunto de molduras, o navegador exibir apenas o contedo delimitado por tags noframes.
Para definir o contedo para navegadores sem suporte a molduras:
Escolha Modicar > Conjunto de molduras > Editar o contedo NoFrames. O Dreamweaver limpar a janela do documento e as palavras Contedo NoFrames aparecero no alto da rea do corpo do documento.
Para criar o contedo NoFrames, siga um dos procedimentos abaixo:
Na janela do documento, digite ou insira o contedo. Escolha Janela > inspetor de cdigo e, entre os tags noframes, digite o
contedo ou o cdigo HTML para o contedo.
3
Escolha novamente Modicar > Conjunto de molduras > Editar o contedo NoFrames, para retornar exibio normal do documento com o conjunto de molduras.
234
Captulo 8
Como utilizar os comportamentos com molduras

possvel aplicar vrios comportamentos que se valem do modo de operao das molduras. Geralmente, as molduras so utilizadas quando o designer da pgina da Web deseja controlar a exibio de seu contedo. H vrios comportamentos que facilitam a alterao do contedo de uma moldura.
Definir o texto da moldura substitui o contedo e a formatao de uma moldura
pelo contedo especicado. O contedo pode incluir qualquer HTML vlido. Utilize esta ao para exibir informaes dinamicamente. Consulte Denir o texto da moldura na pgina 497.
abre uma nova pgina na janela ou moldura especicada. Esta ao particularmente til para alterar o contedo de duas ou mais molduras com um clique. Consulte Ir para a URL na pgina 490.
Ir para a URL
utilizada para direcionar um usurio a pginas especcas em um site da Web. possvel anexar os comportamentos a imagens da barra de navegao e denir qual imagem ser exibida, com base nas aes do usurio. Por exemplo: uma imagem de boto pode ser mostrada no estado ativo ou inativo, para permitir que o usurio saiba qual pgina de um site est sendo exibida. Consulte Como inserir uma barra de navegao na pgina 405.
Inserir a barra de navegao Inserir o menu de salto permite congurar uma lista de menu pop-up com links que abrem arquivos em uma janela de navegador, quando forem clicados. Uma janela ou moldura especca tambm pode ser designada, na qual o documento ser aberto. Consulte Como inserir um menu de salto na pgina 402.
235
236
Captulo 8
CAPTULO 9
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como gerenciar e inserir propriedades
As propriedades so elementos (arquivos de imagens ou de lmes, por exemplo) utilizados para construir uma pgina ou um site. O painel Propriedades ajuda a gerenciar e organizar as propriedades do site mais facilmente do que na janela do site. O painel exibe as propriedades do site, dividindo-as nas seguintes categorias:
Imagens Cores URLs lmes Flash lmes Shockwave lmes MPEG e QuickTime Scripts Modelos Itens de biblioteca
Nota: Apenas os arquivos que se enquadram nas categorias acima sero mostrados no painel Propriedades. Outros tipos de arquivos que so s vezes denominados propriedades no sero mostrados no painel.
Se as propriedades de um site ainda no tiverem sido denidas, elas podero ser obtidas de vrias fontes. Por exemplo: as propriedades podem ser criadas em um aplicativo como o Macromedia Fireworks ou Macromedia Flash, recebidas de um colega de trabalho ou cliente, ou copiadas de um CD de clip-art. Para obter mais informaes sobre o planejamento e obteno de propriedades, consulte Sobre o planejamento e projeto de sites na pgina 101.
237
O painel Propriedades pode ser utilizado de duas maneiras diferentes: como uma lista facilmente acessvel das propriedades do site (a lista Site), ou como um modo de organizar as propriedades que so utilizadas com mais freqncia (a lista Favoritos). O painel Propriedades coloca automaticamente as propriedades do site na lista Site. A lista Favoritos iniciada vazia e o usurio incluir as propriedades que desejar. A maioria das operaes do painel Propriedades so as mesmas das listas Site e Favoritos. Contudo, h algumas tarefas que podem ser executadas apenas na lista Favoritos (consulte Como utilizar as propriedades favoritas na pgina 246). Os modelos e os itens de biblioteca so tratados com mais detalhe no Como reutilizar o contedo com os modelos e bibliotecas na pgina 409.
Como utilizar o painel Propriedades

O painel Propriedades fornece duas maneiras de exibir as propriedades: a lista Site, que mostra todas as propriedades (de tipos reconhecidos pelo painel) do site, e a lista Favoritos, que exibe apenas as propriedades escolhidas explicitamente. A maioria dos procedimentos abaixo podem ser executados na lista Site ou Favoritos. Em ambas as listas, as propriedades esto divididas em categorias; o usurio escolhe qual categoria de propriedades ser listada, clicando em um dos botes de categoria, no lado esquerdo do painel. Tanto a lista Site quanto a lista Favoritos esto disponveis para todas as categorias de propriedades, exceto os modelos e itens de biblioteca. A lista Site exibe todas as propriedades (nas categorias reconhecidas) existentes como arquivos do site (mesmo que algum documento as utilize ou no), alm de todas as cores e URLs utilizadas em quaisquer documentos do site. possvel trabalhar com as seguintes categorias de propriedades: so arquivos de imagens nos formatos GIF, JPEG ou PNG. Para obter informaes sobre as imagens, consulte Como inserir imagens na pgina 289.
Imagens
so as cores utilizadas em documentos e folhas de estilos no site, incluindo as cores do texto, do fundo e dos links.
Cores
so as URLs externas dos links aos quais os documentos do site esto vinculados. Essa categoria inclui os seguintes tipos de links: FTP, gopher, HTTP, HTTPS, JavaScript, correio eletrnico (mailto) e arquivo local (file://).
URLs
so arquivos em qualquer verso do formato Macromedia Flash. O painel Propriedades exibe apenas os arquivos SWF (Flash compactados) e no os arquivos Flash de origem. Consulte Sobre o contedo Flash na pgina 328.
Filmes Flash
so arquivos em qualquer verso do formato Macromedia Shockwave. Consulte Sobre os lmes Shockwave na pgina 338.
Filmes Shockwave
238
Captulo 9
Filmes so arquivos de lme no formato QuickTime ou MPEG. Consulte Como inserir mdia na pgina 325.
so arquivos JavaScript ou VBScript. Observe que os scripts nos arquivos HTML (ao invs dos arquivos JavaScript ou VBScript independentes) no aparecero no painel Propriedades. Para obter informaes sobre o trabalho com JavaScript no Dreamweaver, consulte Como depurar o cdigo JavaScript na pgina 509.
Scripts
fornecem um modo de utilizar o mesmo layout em vrias pginas e tambm de modi-los em todas as pginas simultaneamente. Consulte Como reutilizar o contedo com os modelos e bibliotecas na pgina 409.
Modelos Itens de biblioteca so
elementos utilizados em vrias pginas. Quando um item de biblioteca for modicado, todas as pginas que o contm sero atualizadas. Consulte Como reutilizar o contedo com os modelos e bibliotecas na pgina 409.
Para abrir o painel Propriedades:
Escolha Janela > Propriedades. Aparecer o painel Propriedades.
O painel pode demorar alguns segundos at criar a lista Site, porque dever ler o cache do site para criar a lista.
Nota: Antes de utilizar o painel Propriedades, defina um site e crie um cache de site. Consulte Como utilizar o Dreamweaver para definir um novo site na pgina 108.
239
Algumas alteraes no aparecero imediatamente no painel Propriedades:
Quando uma propriedade for adicionada ou removida do site, as alteraes no

aparecero no painel Propriedades at que a lista Site seja atualizada, clicando no boto Atualizar a lista Site. Se uma propriedade for adicionada ou removida fora do Dreamweaver utilizando o Windows Explorer ou o Localizador, por exemplo necessrio recriar o cache do site para que as alteraes apaream no painel Propriedades.
Quando for removida a nica instncia de uma determinada cor ou URL no

site, ou quando um novo arquivo salvo contiver uma cor ou uma URL ainda no utilizada anteriormente no site, as alteraes no aparecero no painel Propriedades at que a lista Site seja atualizada.
Para atualizar manualmente a lista Site:
Clique em Site, no alto do painel Propriedades, para garantir que a lista Site estar em exibio. Clique no boto Atualizar a lista Site, na parte inferior do painel Propriedades. O cache do site ser criado ou atualizado, conforme necessrio, e o painel propriedades ser atualizado a m de mostrar todas as propriedades reconhecidas no site.
Para recriar do zero o cache do site manualmente e atualizar a lista Site:
Pressione Control (no Windows) ou Command (no Macintosh) e clique no boto Atualizar a lista Site, na parte inferior do painel Propriedades.
Para exibir a lista Favoritos:
Clique em Favoritos, no alto do painel Propriedades. A lista Favoritos estar vazia at que as propriedades sejam includas.
Para exibir a lista Site:
Clique em Site, no alto do painel Propriedades.

Nota: Nas categorias Modelos e Biblioteca, as opes Site e Favoritos no esto disponveis. Para exibir as propriedades de uma determinada categoria:
Clique no cone de categoria adequado e clique em Site ou Favoritos. Por exemplo: para exibir todas as imagens no site, clique no cone de Imagens e, em seguida, clique em Site.
240
Captulo 9
Para visualizar uma propriedade:
Selecione a propriedade no painel Propriedades. A rea de visualizao, no alto do painel, mostra uma prvia visual da propriedade. Quando uma propriedade de lme for selecionada, a rea de visualizao mostrar um cone. Para exibir um lme, clique no boto 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).
Para adicionar propriedades lista Favoritos:
1 2
Selecione uma ou mais propriedades na lista Site. Clique no boto Adicionar pasta Favoritos. As propriedades so includas na lista Favoritos. Para ver a lista Favoritos, clique em Favoritos no alto do painel. Para conhecer outros mtodos de incluso de propriedades lista Favoritos, consulte Como adicionar e remover as propriedades da lista Favoritos na pgina 246.
Nota: No h listas Favoritos para os modelos e itens de biblioteca.
Como adicionar uma propriedade a uma pgina A maior parte dos tipos de propriedades podem ser inseridos em um documento arrastando-as para a visualizao do projeto da janela do documento, ou utilizando o boto 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. Os modelos so aplicados ao documento inteiro.
Para inserir uma propriedade em um documento:
Coloque o ponto de insero na visualizao do projeto, onde a propriedade dever aparecer. Escolha Janela > Propriedades, para abrir o painel Propriedades, caso ainda no esteja aberto. Selecione a categoria da propriedade. Escolha uma categoria diferente de Modelos. Um modelo pode ser aplicado apenas a um documento inteiro e no pode ser inserido em um documento.
241
Selecione Site ou Favoritos e localize a propriedade desejada. No h listas Site ou Favoritos para os itens de biblioteca; ignore essa etapa ao inserir um item de biblioteca.
Siga um dos procedimentos abaixo: arraste-a at a rea de contedo do cabealho, na janela do documento; se essa rea no estiver visvel, escolha primeiro Exibir > Contedo do cabealho.
Arraste a propriedade do painel para a visualizao do projeto. Nos scripts, Selecione a propriedade no painel e clique em Inserir.
A propriedade ser inserida no documento. Se a propriedade for uma cor, ela ser aplicada a partir do ponto de insero, ou seja, a digitao subseqente aparecer nessa cor.
Para alterar a cor do texto selecionado em um documento:
1 2 3
Selecione a categoria Cores, no painel Propriedades. Escolha a cor a ser aplicada. Clique em Aplicar.
Para adicionar um link seleo atual em um documento:
Selecione a categoria URLs, no painel Propriedades e localize a URL a ser aplicada. Siga um dos procedimentos abaixo:
Arraste a URL do painel para a seleo na visualizao do projeto. Selecione a URL e clique no boto Aplicar.
Para aplicar um modelo ao documento ativo:
Selecione a categoria Modelo, no painel Propriedades e localize um modelo a ser aplicado. Siga um dos procedimentos abaixo:
Arraste o modelo do painel para a visualizao do projeto. Selecione o modelo e clique no boto Aplicar.
242
Captulo 9
Como alterar a ordem das propriedades Como padro, as propriedades em uma determinada categoria so listadas por nomes em ordem alfabtica. O nome da propriedade pode ser um nome de arquivo (como no caso das imagens), um nmero hexadecimal (por exemplo: as cores) ou uma URL. As propriedades tambm podem ser listadas por qualquer um dos vrios outros critrios.
Para listar as propriedades em uma ordem diferente:
Clique em um dos cabealhos de colunas. Por exemplo: para classicar a lista de imagens por tipo (a m de que todas as imagens GIF, todas as JPEG, etc. estejam agrupadas), clique no cabealho de coluna Tipo.
Para alterar a largura de uma coluna:
1 2
Posicione o cursor sobre a linha que separa dois cabealhos de colunas. Arraste esta linha para alterar a largura da coluna.
Como selecionar e editar as propriedades O painel propriedades permite selecionar vrias propriedades simultaneamente. Esse painel tambm fornece um modo rpido de iniciar a edio das propriedades.
Para selecionar vrias propriedades:
Selecione uma das propriedades clicando nesse item. Em seguida, escolha as outras propriedades de uma das seguintes maneiras: propriedades.
Pressione a tecla Shift e clique, para selecionar uma srie consecutiva de 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.
243
Para editar uma propriedade:
Clique duas vezes na propriedade. Selecione a propriedade e, em seguida, clique em Editar.

No caso de alguns tipos de propriedades (imagens, por exemplo), a 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 Favoritos. 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. Se um editor externo no for aberto para uma propriedade que deveria utilizlo, escolha Editar > Preferncias, selecione a categoria Tipos de arquivos / editores, e certique-se de que haja um editor externo denido para o tipo de arquivo da propriedade. Consulte Como iniciar um editor externo na pgina 326.
2 3
Altere a propriedade. Ao concluir a edio da propriedade, siga um dos procedimentos abaixo: cor ou URL), salve-a (utilizando qualquer editor empregado para edit-la) e feche a propriedade.
Se a propriedade estiver na forma de um arquivo (qualquer uma diferente de Se a propriedade for uma URL, clique em OK, ao terminar a edio na caixa de
dilogo Editar a URL. Se a propriedade for uma cor, o seletor de cores do Dreamweaver se fechar automaticamente quando uma cor for escolhida. Para fechar o seletor de cores sem escolher uma cor, pressione a tecla Esc. Como trabalhar com propriedades e sites Talvez seja conveniente procurar um arquivo na janela do site que corresponde a uma propriedade no painel Propriedades. Esse procedimento pode ser til, por exemplo, durante a transferncia de uma propriedade para ou de um site remoto. O painel Propriedades mostra todas as propriedades (dos tipos reconhecidos) no site atual. O site atual aquele que contm o documento ativo. 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 Favoritos inteira, de uma s vez.
Nota: A janela do site pode exibir um site diferente daquele mostrado no painel Propriedades. Isso ocorre porque o painel Propriedade est associado ao documento ativo. Para determinar qual site do painel Propriedades est em exibio, olhe para a barra de ttulo do painel.
244
Captulo 9
Para localizar um arquivo de propriedade na janela do site:
Clique com o boto direito do mouse (no Windows), ou pressione a tecla Control e clique (no Macintosh) no nome da propriedade ou no cone correspondente no painel Propriedades, e escolha Localizar no site, no menu contextual. Aparecer a janela do site, com o arquivo de propriedade selecionado. Localizar no site no estar disponvel para cores e URLs que no correspondam aos arquivos no site. Observe que Localizar no site procura o arquivo correspondente propriedade e no um arquivo que a utiliza.
Para copiar as propriedades da lista Site ou Favoritos em outro site:
Clique com o boto direito do mouse (no Windows), ou pressione a tecla Control e clique (no Macintosh) no cone ou no nome de uma ou mais propriedades, para copi-la(s). Na lista Favoritos, pode ser copiada uma pasta Favoritos, bem como propriedades individuais.
No menu contextual, escolha Copiar para o site, e escolha o nome do site de destino no submenu. O submenu listar todos os sites que o usurio tiver denido. As propriedades so copiadas no site especicado, nas localizaes correspondentes quelas no site atual. O Dreamweaver cria novas pastas na hierarquia do site de destino, conforme necessrio. As propriedades tambm so adicionadas lista Favoritos do site especicado. Quando um documento for aberto no site de destino, o painel Propriedades alternar para esse site e mostra a propriedade copiada.
Nota: Se a propriedade copiada for uma cor ou URL, ela aparecer na lista Favoritos, e no na lista Site, do outro site. Isso ocorre porque no h qualquer arquivo correspondente cor ou URL. Por conseguinte, nenhum arquivo poder ser copiado no outro site.
245
Como utilizar as propriedades favoritas

A maioria das operaes do painel Propriedades so idnticas nas listas Site e Favoritos (consulte Como utilizar o painel Propriedades na pgina 238). Contudo, h vrias tarefas que podem ser executadas apenas na lista Favoritos. Como a lista Site do painel Propriedades mostra todas as propriedades reconhecidas no site, essa lista torna-se muito longa no caso de alguns sites grandes. Se as propriedades utilizadas com freqncia forem adicionadas lista Favoritos, as que tiverem relao entre si podero ser agrupadas e receber apelidos que lembrem sua funo, para que sejam encontradas facilmente no painel Propriedades.
Nota: As propriedades favoritas no so armazenadas como arquivos separados no disco rgido, elas so referncias de propriedades existentes na lista Site. O Dreamweaver controla quais propriedades da lista Site sero exibidas na lista Favoritos.
Como adicionar e remover as propriedades da lista Favoritos H vrias maneiras de adicionar propriedades lista Favoritos do site.
Para adicionar propriedades lista Favoritos, siga um dos procedimentos abaixo:
Selecione uma ou mais propriedades na lista Site, e clique no boto Adicionar

pasta Favoritos.
Selecione uma ou mais propriedades na lista Site, e escolha Adicionar pasta

Favoritos, no menu contextual.
Clique com o boto direito do mouse (no Windows), ou pressione a tecla

Control (no Macintosh) e clique em um elemento na visualizao do projeto da janela do documento, e escolha o comando no menu contextual, para adicionar o elemento categoria Favoritos apropriada. Por exemplo: pode ser selecionada uma imagem e escolhida a opo Adicionar pasta de imagens favoritas, no menu contextual. Observe que o menu contextual correspondente ao texto conter Adicionar pasta de cores favoritas ou Adicionar pasta de URLs favoritas, dependendo de o texto incluir ou no um link anexado. Note tambm que apenas os elementos que se enquadrarem em uma das categorias no painel Propriedades podero ser adicionados lista Favoritos.
Selecione um ou mais arquivos na janela do site e escolha Adicionar pasta

Favoritos, no menu contextual. Os arquivos que no se enquadrarem em uma categoria no painel Propriedades sero ignorados. Independentemente do mtodo escolhido, as propriedades sero adicionadas lista Favoritos e o painel Propriedades exibir essa lista.
Nota: No h listas Favoritos para os modelos e itens de biblioteca.
246
Captulo 9
Para remover propriedades da lista Favoritos:
Selecione uma ou mais propriedades (ou uma pasta Favoritos) na lista Favoritos. Clique no boto Remover da pasta Favoritos, na parte inferior do painel Propriedades. As propriedades sero removidas da lista Favoritos, mas ainda aparecero na lista Site. Se uma pasta Favoritos for removida, essa pasta e todas as propriedades nela contidas sero excludas da lista Favoritos.
Como criar um apelido para uma propriedade favorita As propriedades na lista Favoritos podem ter apelidos. O apelido mostrado 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. Apenas as propriedades da lista Favoritos podem ter apelidos. Na lista Site, as propriedades so listadas pelos seus nomes de arquivos reais (ou seus valores, no caso das cores e URLs).
Para apelidar uma propriedade favorita:
1 2 3
Clique na categoria que contm a propriedade escolhida. Clique em Favoritos, para exibir a lista Favoritos. Siga um dos procedimentos abaixo: Control e clique (no Macintosh) no nome da propriedade ou no cone correspondente no painel Propriedades, e escolha Editar o apelido, no menu contextual.
Clique com o boto direito do mouse (no Windows), ou pressione a tecla
Clique uma vez no nome da propriedade, faa uma pausa e clique nele
novamente. No clique duas vezes de uma s vez.
4
Digite um apelido para a propriedade, em seguida, pressione a tecla Enter (no Windows), ou a tecla Return (no Macintosh). O apelido aparecer na coluna Apelido.
247
Como agrupar as propriedades na pasta Favoritos Em uma categoria da lista Favoritos, possvel criar e denominar grupos de propriedades, chamados de pastas Favoritos. Por exemplo: se houver um conjunto de imagens que so utilizadas em vrias pginas de catlogos em um site de comrcio eletrnico, elas podero ser agrupadas em uma pasta chamada Imagens_de_Catlogo.
Nota: A insero de uma propriedade em uma pasta Favoritos no alterar a localizao do arquivo da propriedade no disco rgido. Para criar uma pasta Favoritos:
Clique em Favoritos (no alto do painel Propriedades), para exibir a lista Favoritos. Clique no boto Nova pasta Favoritos. Denomine a pasta. Arraste as propriedades para a pasta.
2 3 4
Como criar uma nova cor, URL, modelo ou item de biblioteca O painel Propriedades pode ser utilizado para criar, cores, URLs, modelos e itens de biblioteca. Observe que novas cores ou URLs podem ser adicionadas lista Site, que contm apenas as propriedades que j estiverem em uso no site.
Para criar uma nova cor:
1 2 3 4
Clique no boto de categoria Cores. Clique em Favoritos, para mostrar a lista Favoritos. Clique no boto Nova cor. Selecione uma cor utilizando o seletor de cores. Para sair do seletor de cores sem escolher uma cor, pressione a tecla Esc ou clique na barra cinza, no alto do seletor. Para obter mais informaes sobre o uso do seletor de cores, consulte Como trabalhar com as cores na pgina 91.
Se desejar, d um apelido cor.
248
Captulo 9
Para criar uma nova URL:
1 2 3 4
Clique no boto de categoria URLs. Clique em Favoritos, para mostrar a lista Favoritos. Clique no boto Nova URL. Digite uma URL e um apelido na caixa de dilogo Adicionar URL, e clique em OK.
Para criar um novo modelo:
1 2
Clique no boto de categoria Modelos. Clique no boto Novo modelo. Para obter mais informaes sobre a criao de novos modelos, consulte Como reutilizar o contedo com os modelos e bibliotecas na pgina 409.
Para criar um novo item de biblioteca, siga um dos procedimentos abaixo:
Clique no boto de categoria Biblioteca e, em seguida, clique no boto Novo

item de biblioteca.
Selecione um elemento ou texto na visualizao do projeto da janela do

documento e, em seguida, arraste-o at o painel Propriedades. Independentemente do tipo do elemento que seja arrastado, ser criado um novo item de biblioteca que o contm. Para obter mais informaes sobre a criao de novos itens de biblioteca, consulte Como reutilizar o contedo com os modelos e bibliotecas na pgina 409.
249
250
Captulo 9
10
CAPTULO 10
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como inserir e formatar texto
A formatao no Dreamweaver semelhante de um processador de texto padro. No inspetor de propriedades, utilize o submenu Texto > Formato do pargrafo ou o menu suspenso Formato, para denir o estilo de formatao padro (Pargrafo, Pr-formatado, Cabealho 1, Cabealho 2, etc.) para um bloco de texto. Para alterar a fonte, o tamanho, a cor e o alinhamento do texto selecionado, use o menu Texto ou o inspetor de propriedades. Para aplicar as formataes negrito, itlico, cdigo, sublinhado, etc., use o submenu Texto > Estilo. possvel tambm combinar vrios tags HTML padro para formar um nico estilo, denominado estilo HTML. Por exemplo: a formatao HTML pode ser aplicada manualmente utilizando uma combinao de tags e atributos, que ser salva como um estilo HTML; essa formatao salva no painel Estilos HTML. Na prxima vez que o usurio desejar formatar texto utilizando essa combinao de tags HTML, bastar selecionar o estilo salvo no painel Estilos HTML. Os estilos HTML contam com suporte de todos os navegadores da Web e economizam tempo em relao formatao manual de texto. Outro tipo de estilo, denominado folhas de estilos em cascata (Cascading Style Sheets CSS), permite formatar as pginas e o texto, com a vantagem da atualizao automtica. Os estilos CSS podem ser armazenados diretamente no documento ou, para se obter mais capacidade e exibilidade, em uma folha de estilos externa. Se uma folha de estilos externa for anexada a vrias pginas da Web, todas as pginas iro reetir quaisquer alteraes feitas na folha de estilos. Para acessar os estilos CSS, utilize o painel Estilos CSS. A formatao HTML manual e os estilos HTML aplicam a formatao usando os tags HTML padro (por exemplo: b, font e code) que recebem suporte de todos os navegadores da Web mais populares. Os estilos CSS denem a formatao para o texto inteiro em uma determinada classe ou redenem a formatao para um tag especco (por exemplo: h1, h2, p ou li). As CSS recebem suporte apenas dos seguintes navegadores da Web: Netscape Navigator 4.0 e Microsoft Internet Explorer 4.0, e de suas verses mais avanadas.
251
Em uma mesma pgina, podem ser utilizados os estilos CSS e HTML, bem como a formatao HTML manual. A formatao HTML manual anula a formatao aplicada por um estilo HTML ou CSS; assim, embora seja trabalhosa, poder ser utilizada como um mtodo conveniente de modicao da formatao aplicada com os estilos HTML ou CSS. Alm disso, os estilos CSS da pgina anulam os estilos CSS externos. Consulte Como utilizar as folhas de estilos CSS na pgina 267.
Como inserir texto e objetos

O contedo das pginas pode ser adicionado atravs da digitao e colagem de texto, e da insero de objetos (imagens, tabelas e camadas, por exemplo).
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 Editar > Colar. O Dreamweaver no manter a formatao de texto que foi aplicada no outro programa, mas preservar as quebras de linha.
Para inserir tabelas, dados tabulares, imagens e outros objetos em um documento, proceda da seguinte maneira:
Utilize os comandos no menu Inserir para incluir os objetos especicados no

seu documento, no ponto de insero.
Escolha Janela > Objetos, para abrir o painel Objetos. Localize o tipo de objeto
desejado e clique ou arraste-o, para inserir o objeto na janela do documento. Para a maioria dos objetos, aparecer uma caixa de dilogo, solicitando a escolha de opes ou de um arquivo. Para ignorar essas caixas de dilogo, escolha Editar > Preferncias, selecione Geral e, em seguida desmarque a opo Mostrar a caixa de dilogo quando inserir objetos.
Nota: Para inserir vrios espaos consecutivos, utilize Inserir > Caracteres especiais > Espao no-separvel (teclas Control, Shift e barra de espao) ou pressione a tecla Enter/ Return. Mas, se desejar enfileirar itens em colunas, utilize uma tabela.
Os dados tabulares podem ser importados para um documento atravs do salvamento inicial desses arquivos (por exemplo: arquivos do Microsoft Excel ou um banco de dados) como arquivos de texto delimitados.
252
Captulo 10
Para importar dados tabulares:
Escolha Arquivo > Importar > Importar os dados tabulares, ou selecione Inserir > Dados tabulares. Aparecer a caixa de dilogo Importar os dados da tabela. Procure o arquivo desejado ou digite o seu respectivo nome no campo de texto. Selecione o delimitador utilizado quando o arquivo foi salvo como texto delimitado. As opes disponveis so Tabulao, Vrgula, Ponto-e-vrgula, Dois pontos e Outro. Digite o caractere que foi utilizado como delimitador.
2 3
Se for selecionado Outro, aparecer um campo em branco ao lado da opo.

4
Utilize as demais opes para formatar ou denir a tabela para a qual os dados sero importados. Clique em OK quando terminar.
Como inserir datas O Dreamweaver fornece um objeto Data conveniente, que insere a data atual em qualquer formato preferido (com ou sem a hora) e d ao usurio a opo de atualizar a data sempre que o arquivo for salvo.
Nota: Lembre-se de que 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:
Na janela do documento, coloque o ponto de insero onde a data dever ser inserida. Siga um dos procedimentos abaixo:
Escolha Inserir > Data. Abra o painel Objetos, escolhendo Janela > Objetos e, em seguida, abra a
categoria Comuns e clique no boto Data.
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 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.
Sugesto: Se for escolhida a opo 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 Editar o formato da data, no inspetor de propriedades.
253
Sobre os 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: ).
Sugesto: 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, utilize > para maior do que (>) e ⁢ para menor do que (<).
Infelizmente, muitos navegadores (especialmente, os mais antigos e aqueles diferentes do Navigator e Internet Explorer) no exibem corretamente muitas das entidades denominadas. A maioria dos navegadores exibe muitas das entidades numricas mais comuns, porm lembrar de um nmero de entidade mais difcil do que lembrar de um nome. Como inserir caracteres de texto especiais Vrios caracteres especiais podem ser inseridos (na forma de entidades HTML) atravs da escolha da categoria Caracteres, no menu suspenso do painel Objetos.
Para inserir um caractere especial em um documento:
Na janela do documento, coloque o ponto de insero onde o caractere especial dever ser inserido. Siga um dos procedimentos abaixo:
Escolha o nome do caractere no submenu Inserir > Caracteres. Abra o painel Objetos (escolhendo Janela > Objetos), selecione a categoria
Caracteres no menu suspenso e escolha o caractere desejado. H muitos outros caracteres especiais disponveis; para selecionar um deles, escolha Inserir > Caracteres > Mais e escolha um caractere. Em seguida, clique em OK.
254
Captulo 10
Como copiar e colar o cdigo-fonte HTML no Dreamweaver O cdigo-fonte HTML pode ser copiado e colado de outro aplicativo ou da visualizao de cdigo. possvel escolher se o cdigo HTML ser copiado e colado como texto ou cdigo com tags intactos, dependendo do modo de copiar e colar.
Para copiar o cdigo-fonte HTML e col-lo na visualizao de cdigo:
Copie o cdigo de outro aplicativo (por exemplo: BBEdit ou HomeSite), da visualizao de cdigo ou do inspetor de cdigo no Dreamweaver, e coloque o ponto de insero na visualizao de cdigo. Escolha Editar > Colar, e selecione Atualizar a visualizao do projeto, na barra de ferramentas. Por exemplo: copie do BBEdit o cdigo-fonte HTML para uma tabela e cole-o na visualizao de cdigo do Dreamweaver, para que ele aparea como uma tabela na visualizao de projeto.
Se desejar que o cdigo-fonte HTML aparea como texto, coloque o ponto de insero diretamente na visualizao do projeto e escolha Editar > Colar, para colar o cdigo como texto. Esta opo poder ser escolhida quando o documento do Dreamweaver contiver instrues sobre a gravao de HTML e o usurio quiser que o cdigo aparea como texto no documento.
Para copiar e colar como um cdigo-fonte HTML:
1 2
Selecione e copie o cdigo de outro aplicativo. Coloque o ponto de insero na visualizao do projeto e escolha Editar > Colar como HTML.
Tambm possvel selecionar um item na visualizao do projeto (uma tabela, por exemplo) e escolher Editar > Copiar como HTML. Esse item podem ser colado, em seguida, em outro aplicativo como um cdigo-fonte HTML. Para obter mais informaes sobre edio do cdigo-fonte HTML, consulte Como gravar e editar o cdigo na pgina 365.
255
Como criar listas

medida que voc digita na janela do documento, podem ser criadas listas numeradas (ordenadas), listas com marcadores (no-ordenadas) e listas de denies a partir de um texto existente ou de um novo texto. As listas de denies no utilizam caracteres esquerda, como marcadores ou nmeros, porm estes so utilizados freqentemente em glossrios ou descries. As listas tambm podem ser aninhadas. As listas aninhadas so aquelas que contm outras listas. Por exemplo: o usurio poder querer aninhar uma lista ordenada ou com marcadores em uma outra lista numerada ou ordenada.
Para criar uma nova lista:
Na visualizao do projeto, coloque o ponto de insero na linha onde a lista de novos itens ser adicionada. Clique nos botes Lista com marcadores ou Lista numerada, no inspetor de propriedades, ou escolha Texto > Lista e selecione o tipo de lista desejado: Lista no-ordenada (com marcadores), Lista ordenada (numerada) ou Lista de denies. Uma lista pode ser inserida na visualizao do cdigo, usando o menu Texto, mas o Dreamweaver adicionar apenas o primeiro e o ltimo tags da lista HTML, em seguida, necessrio colocar manualmente os cdigos nos itens individuais da lista.
Comece digitando a lista, pressionando Enter (no Windows) ou Return (no Macintosh) para iniciar outro item da lista. Para concluir a lista, pressione duas vezes Enter (no Windows) ou Return (no Macintosh).
Para criar uma lista usando texto j existente:
1 2
Escolha uma srie de pargrafos para transform-los em uma lista. Clique nos botes Lista com marcadores ou Lista numerada, no inspetor de propriedades, ou escolha Texto > Lista e selecione o tipo de lista desejado: Lista no-ordenada, Lista ordenada ou Lista de denies.
Para criar uma lista aninhada:
1 2
Selecione os itens da lista a serem aninhados. Clique no boto Recuo, no inspetor de propriedades, ou escolha Texto > Recuo. O Dreamweaver recuar o texto e criar uma lista separada com os atributos HTML da lista original.
Aplique um novo estilo ou tipo de lista ao texto recuado, seguindo o mesmo procedimento utilizado acima.
256
Captulo 10
Como configurar as fontes, estilos, cor e alinhamento

Pode-se aplicar formatao de texto HTML a uma letra ou criar um site inteiro, utilizando os comandos Texto > Formato do pargrafo ou as opes no inspetor de propriedades. Esse tipo de formatao manual substitui ou anula a formatao congurada por um estilo HTML ou CSS. Para aplicar a formatao de texto HTML, utilize o inspetor de propriedades e os comandos no menu Texto. Por exemplo: Texto > Formato do pargrafo, e Texto > Estilo. Como definir e alterar as fontes e estilos Utilize o inspetor de propriedades ou o menu Texto, para denir ou alterar as caractersticas da fonte de um texto selecionado.
Para definir ou alterar as caractersticas da fonte:
Selecione o texto. Se nenhum texto for selecionado, a alterao ser aplicada ao texto subseqente ao que for digitado. Escolha dentre as seguintes opes: propriedades ou no submenu Texto > Fonte. Os navegadores exibem o texto utilizando a primeira fonte da combinao que estiver instalada no sistema do usurio. Se nenhuma das fontes na combinao estiver instalada, o navegador exibir o texto conforme as especicaes de preferncias do navegador. Consulte tambm Como modicar as combinaes de fontes na pgina 260. Escolha Padro, para remover as fontes aplicadas anteriormente; Padro aplica a fonte padro ao texto selecionado (a fonte padro do navegador ou aquela designada para esse tag na folha de estilos CSS).
Para alterar a fonte, escolha uma combinao de fontes no inspetor de
Para alterar o estilo de fonte, clique em Negrito ou Itlico, no inspetor de

propriedades, ou escolha um estilo de fonte (Negrito, Itlico, Sublinhado, etc.) no submenu Texto > Estilo.
Para alterar o tamanho da fonte, escolha um tamanho (1 a 7), no inspetor de

propriedades ou no submenu Texto > Tamanho. Os tamanhos de fontes HTML so pontos de tamanho relativo e no especcos. Os usurios denem o tamanho do ponto da fonte padro para os seus navegadores; esse tamanho de fonte ser visto quando for selecionado Padro ou 3, no inspetor de propriedades ou no submenu Texto > 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 geralmente parecem maiores no Windows do que no Macintosh, apesar de, no Macintosh, o Internet Explorer 5 utilizar o mesmo tamanho de fonte que no Windows.
257
Para aumentar ou diminuir o tamanho do texto selecionado, escolha um

tamanho relativo (+1 a + 4 ou 1 a 3), no inspetor de propriedades ou no submenu Texto > Alterar o tamanho.
Sugesto: 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 Como utilizar as folhas de estilos CSS na pgina 267.
Esses nmeros indicam uma diferena relativa do tamanho da fonte bsica. O valor padro da fonte bsica 3. Assim, um valor +4 resulta em um tamanho de fonte 3 + 4, ou 7. 7 a soma mxima para os seus valores de tamanho da fonte. Se o usurio tentar utilizar valores mais altos, eles sero mostrados como 7. O Dreamweaver no exibe o tag basefont (que inserido na seo head ), embora o tamanho da fonte deva ser exibido corretamente em um navegador. Para testar esse procedimento, compare textos denidos para 3 e +3. Como utilizar os pargrafos e cabealhos Utilize o menu pop-up Formato, no inspetor de propriedades, ou o submenu Texto > Formato do pargrafo, para aplicar os tags de cabealho e pargrafo padro. Para redenir a aparncia dos tags de cabealho e pargrafo, utilize as folhas de estilos CSS; consulte Como utilizar as folhas de estilos CSS na pgina 267.
Para aplicar um tag de cabealho ou pargrafo:
Coloque o ponto de insero no pargrafo ou selecione uma parte do texto no pargrafo. No submenu Texto > Formato do pargrafo ou no menu suspenso Formato, no inspetor de propriedades, escolha uma opo: Texto pr-formatado, etc.). O tag HTML associado ao estilo selecionado (por exemplo: h1 para Cabealho 1, h2 para Cabealho 2, pre para Texto prformatado, etc.) ser aplicado ao pargrafo inteiro.
Selecione um formato de pargrafo (por exemplo: Cabealho 1, Cabealho 2,
Escolha Nenhum, para remover um formato de pargrafo.

Como alterar a cor do texto possvel alterar a cor do texto selecionado, para que a nova cor anule a cor do texto denida em Propriedades da pgina. Se nenhuma cor tiver sido congurada em Propriedades da pgina, a cor de pgina padro ser preto.
258
Captulo 10
Para alterar a cor do texto:
1 2
Selecione o texto. Escolha dentre as seguintes opes: de cores, no inspetor de propriedades.
Escolha uma cor na paleta de cores aceitas pelo navegador, clicando no seletor Escolha Texto > Cor. Aparecer a caixa de dilogo Seletor de cores do sistema.
Selecione uma cor e clique em OK.
Digite o nome da cor ou um nmero hexadecimal diretamente no campo do

inspetor de propriedades.
Para denir a cor padro do texto, utilize o comando Modicar > Propriedades
da pgina. Consulte Como denir as cores padro do texto na pgina 162.
Para retornar o texto cor padro:
No inspetor de propriedades, clique na caixa de cores para abrir a paleta decores aceitas pelo navegador . Clique no boto Riscado (o boto quadrado branco com uma linha vermelha cortando-o, situado no canto superior direito).
Como alinhar o texto Alinhe o texto na pgina usando o inspetor de propriedades ou o submenu Texto > Alinhar. Centralize qualquer elemento na pgina utilizando o comando Texto > Alinhar > No centro.
Para alinhar o texto:
Selecione o texto a ser alinhado ou simplesmente insira o indicador no incio do texto. Clique em uma opo de alinhamento ( esquerda, direita, No centro), no inspetor de propriedades, ou escolha Texto > Alinhar e selecione um comando de alinhamento.
Para centralizar os elementos:
Selecione o elemento (imagem, plug-in, tabela ou um outro elemento da pgina) a ser centralizado. Escolha Texto > Alinhar > No centro.
Nota: Blocos inteiros de texto podem ser alinhados e centralizados; no possvel alinhar ou centralizar parte de um cabealho ou de um pargrafo.
259
Para recuar o texto e remover o recuo:
1 2
Selecione o texto desejado. Clique no boto Recuo ou Remover o recuo, no inspetor de propriedades, escolha Texto > Recuo ou Remover o recuo, ou selecione Lista > Recuo ou Remover o recuo, no menu contextual. Esse procedimento aplica ou remove o tag blockquote quando o texto selecionado for um pargrafo ou cabealho; se o texto for uma lista, ser adicionado ou removido um tag ul ou ol extra.
Como modificar as combinaes de fontes Utilize o comando Editar a lista de fontes para denir as combinaes de fontes que aparecem no inspetor de propriedades e no submenu Texto > Fonte. As combinaes de fontes determinam como um navegador exibir o texto de uma 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 especicao das preferncias do navegador do usurio.
Para modificar as combinaes de fontes:
1 2
Escolha Texto > Fonte > Editar a 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 Fontes escolhidas, no canto inferior esquerdo da caixa de dilogo. direita, h uma lista com todas as fontes disponveis, instaladas no seu sistema.
Escolha dentre as seguintes opes: boto << ou >>, entre as listas Fontes escolhidas e Fontes disponveis.
Para adicionar ou remover fontes de uma combinao de fontes, clique no 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 que no esteja instalada no sistema, digite o nome da
fonte no campo de texto abaixo da lista Fontes disponveis e clique no boto << para inclu-la na combinao. A incluso de uma fonte no instalada no sistema til, por exemplo, para designar uma fonte especca do Windows, quando o usurio estiver criando algo em um Macintosh.
Para mover a combinao de fontes para cima ou para baixo em uma lista,
clique nos botes de seta, no alto da caixa de dilogo.
260
Captulo 10
Para adicionar uma nova combinao a uma lista de fontes:
1 2
Escolha Texto > Fonte > Editar a lista de fontes. Selecione uma fonte na lista Fontes disponveis e clique no boto << para mover a fonte para a lista Fontes escolhidas. Repita a etapa 2 para cada fonte subseqente na combinao. Para adicionar uma fonte que no esteja instalada no sistema, digite o nome da fonte no campo de texto abaixo da lista Fontes disponveis e clique no boto << para inclu-la na combinao de fontes. A incluso de uma fonte no instalada no sistema til, por exemplo, para designar uma fonte especca do Windows, quando o usurio estiver criando algo em um Macintosh.
Ao terminar a seleo das fontes especcas, selecione uma famlia de fontes genrica no menu Fontes disponveis e clique no boto <<, para mover a famlia genrica para a lista Fontes escolhidas. As famlias de fontes genricas incluem cursivas, fantasia, monoespaadas, sansserif e serif. Se nenhuma das fontes na lista Fontes escolhidas estiver disponvel no sistema do usurio, o texto aparecer na fonte padro associada famlia de fontes genrica. Por exemplo: a fonte monoespaada padro na maioria dos sistemas Courier.
Como utilizar as 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:
Na janela do documento, coloque o ponto de insero onde ser inserida uma rgua horizontal. Siga um dos procedimentos abaixo:
Escolha Inserir > Rgua horizontal. Escolha Janela > Objetos, para abrir o painel Objetos e, em seguida, clique no
boto Rgua horizontal, na categoria Comuns.
Para modificar uma rgua horizontal:
1 2
Na janela do documento, selecione uma rgua horizontal. Escolha Janela > Propriedades, para abrir o inspetor de propriedades, e modique as propriedades conforme desejar.
261
Como utilizar os estilos HTML para formatar o texto

Um estilo HTML denido por um ou mais tags HTML (por exemplo: b, i, font e center) que aplicam a formatao ao texto. A especicao HTML 4.0 lanada pelo World Wide Web Consortium (W3C), no incio de 1998, recomenda a utilizao das folhas de estilos CSS em vez dos tags de formatao HTML. Na prtica, contudo, os tags de formatao HTML embora ofeream um controle mais limitado sobre a aparncia do que as folhas de estilos CSS, alm da demora para serem carregados recebem suporte de uma gama mais ampla de navegadores do que as folhas de estilos CSS e, provavelmente, iro se manter como parte das ferramentas dos programadores da Web, enquanto os navegadores 3.0 e menos avanados ainda se constituam em uma parte signicativa do trfego de rede. Para obter informaes especcas sobre a formatao com os tags HTML, consulte um dos seguintes tpicos:
Como denir e alterar as fontes e estilos na pgina 257 Como alterar a cor do texto na pgina 258 Como alinhar o texto na pgina 259
Os tags HTML que denem a estrutura do documento, muito antes do que a sua aparncia por exemplo: cabealhos, pargrafos e listas ainda so parte integrante da especicao de HTML. De fato, se voc estiver planejando utilizar folhas de estilos CSS para denir as caractersticas da fonte para a sua pgina, importante utilizar os tags de cabealho padro, porque eles ajudam a preservar a estrutura da pgina nos navegadores que no oferecem suporte s folhas de estilos CSS. Para ver um exemplo de como isto funciona, experimente visualizar a Ajuda do Dreamweaver em um navegador 3.0. Consulte Como utilizar os pargrafos e cabealhos na pgina 258.
262
Captulo 10
Como utilizar os estilos HTML Utilize os estilos HTML para salvar a formatao de texto e pargrafo, a m de utiliz-la em outros documentos. Quando tiver sido criado um estilo HTML com base em um ou mais tags HTML, possvel reaplicar essa formatao a textos em quaisquer documentos, usando o painel Estilos HTML.
Menu contextual
Excluir o estilo Aplicao automtica Novo estilo
Diferentemente dos estilos CSS, a formatao com o estilo HTML afeta apenas o texto ao qual foi aplicada ou o texto que tiver sido criado com um estilo HTML selecionado. Se a formatao de um estilo HTML criado por voc for alterada, o texto originalmente formatado com esse estilo no ser atualizado. Para ter a possibilidade de alterar a formatao e, automaticamente, atualizar todas as ocorrncias dessa formatao, utilize os estilos CSS; consulte Como utilizar as folhas de estilos CSS na pgina 267. Para exibir o guia OReilly de referncia de HTML, distribudo com o Dreamweaver, clique no boto Referncia, na barra de ferramentas, e escolha Referncia de HTML OReilly, no menu suspenso. O painel Estilos HTML pode servir para registrar os estilos HTML utilizados em um site, a m de poderem ser compartilhados com outros usurios, sites locais ou remotos.
Para exibir o painel Estilos HTML, siga um dos procedimentos abaixo:
Escolha Janela > Estilos HTML. Clique no cone de Estilos HTML, na barra do Iniciador ou no Iniciador.
263
Para visualizar um estilo HTML existente:
No painel Estilos HTML, selecione um estilo. Observe que Limpar o estilo do pargrafo e Limpar o estilo da seleo so utilizados no texto que contm um estilo aplicado, mas que em si no se constitui em um estilo, no podendo assim ser visualizado ou editado.
No painel Estilos HTML, clique com o boto direito do mouse (no Windows), ou pressione a tecla Control e clique (no Macintosh), e escolha Editar, no menu contextual, ou clique duas vezes no estilo HTML e selecione Editar, no menu contextual. Na caixa de dilogo Denir o estilo HTML, especique as denies para o estilo. As opes Aplicar a determinam se o estilo ser aplicado ao texto selecionado (Seleo) ou ao bloco de texto atual (Pargrafo). As opes Ao aplicar determinam se as conguraes para o estilo sero adicionadas formatao original do texto (Adicionar ao estilo existente) ou removidas da formatao existente e substitudas pelas novas conguraes (Limpar o estilo existente).
Para aplicar um estilo HTML existente:
No painel Estilos HTML, selecione um estilo.
Se a caixa de seleo Aplicao automtica, na parte inferior do painel, estiver

selecionada, clique uma vez no estilo.
Se a caixa de seleo Aplicao automtica no estiver selecionada, clique no

estilo e, depois, em Aplicar.
Para limpar a formatao do texto no documento:
1 2
Selecione o texto formatado. No painel Estilos HTML, clique em Limpar o estilo do pargrafo ou Limpar o estilo da seleo. Limpar o estilo do pargrafo remove a formatao do bloco de texto atual no documento. Limpar o estilo da seleo remove a formatao do texto selecionado.
Nota: As opes Limpar o estilo do pargrafo e Limpar o estilo da seleo podem ser utilizadas para remover qualquer formatao (exceto CSS), independentemente de como a formatao original tenha sido aplicada (por exemplo: atravs do painel Estilos HTML ou do inspetor de propriedades). Para remover um estilo do painel Estilos HTML:
1 2 3
No painel Estilos HTML, desmarque a caixa de seleo para desativar a opo Aplicao automtica. Selecione um estilo HTML. Clique no cone de Excluir o estilo (lixeira), na parte inferior direita do painel.
264
Captulo 10
Para criar um novo estilo HTML com base em um texto existente:
No documento, selecione ou crie o texto que contm a formatao a ser utilizada como base do novo estilo HTML. O inspetor de propriedades pode ser utilizado para exibir e aplicar a formatao. No painel Estilos HTML, clique no cone de Novo estilo (sinal de adio), no canto inferior direito. Na caixa de dilogo Denir o estilo HTML, nomeie o estilo e ajuste a formatao, se for necessrio. inteiro. Note que o estilo de pargrafo ser aplicado ao bloco inteiro de texto, no qual estiver o ponto de insero, independentemente do texto que estiver selecionado.
2 3
Escolha se deseja aplicar o estilo HTML ao texto selecionado ou ao pargrafo
Escolha se o estilo HTML ser acrescentado ao estilo j existente (CSS ou HTML)

do texto ou pargrafo selecionado, ou para substituir a formatao da seleo ou do pargrafo pelo novo estilo HTML. Lembre-se da hierarquia para aplicar os estilos: os estilos HTML precedem os estilos CSS, que prevalecem sobre os estilos CSS externos. Consulte Como utilizar as folhas de estilos CSS na pgina 267. Observe que as opes de formatao no painel Estilos HTML correspondem s do inspetor de propriedades.
4
Clique em OK.
Para criar um novo estilo HTML com base em um estilo HTML existente:
1 2
Certique-se de que no haja texto selecionado na janela do documento. No painel Estilos HTML, selecione um estilo e, em seguida, siga um dos procedimentos abaixo: contextual suspenso.
Clique no tringulo, no canto superior direito do painel, para exibir o menu Clique com o boto direito do mouse (no Windows), ou pressione a tecla
Control e clique (no Macintosh). Em seguida, escolha Duplicar, no menu contextual. Aparecer a caixa de dilogo Denir o estilo HTML. Para redeni-lo com as opes padro, clique em Limpar.
3
Conclua as etapas 3 e 4 das instrues, para criar um novo estilo com base em um texto existente.
265
Para criar um novo estilo HTML a partir do zero:
No painel Estilos HTML, clique no cone de Novo estilo; possvel tambm escolher Texto > Estilos HTML > Novo estilo. Aparecer a caixa de dilogo Denir o estilo HTML. Conclua as etapas 3 e 4 das instrues para criar um novo estilo com base em um texto existente. Clique em Limpar, para redenir a caixa de dilogo com as opes padro. Clique em OK.
Para editar um estilo HTML existente:
1 2
Certique-se de que no haja texto selecionado na janela do documento. No painel Estilos HTML, verique se a caixa de seleo Aplicao automtica est desmarcada. Se a opo Aplicao automtica estiver ativada, o estilo HTML ser aplicado quando este for escolhido no painel Estilos HTML.
No painel Estilos HTML, clique com o boto direito do mouse (no Windows) ou pressione Control e clique (no Macintosh) no estilo. Em seguida, escolha Editar, no menu contextual. Aparecer a caixa de dilogo Denir o estilo HTML. Para redeni-lo com as opes padro, clique em Limpar. Quando um estilo HTML editado, o Dreamweaver no atualiza automaticamente o texto que tenha sido formatado previamente utilizando este estilo. Se desejar atualizar a formatao aplicada com um estilo, utilize uma folha de estilos CSS; consulte Como utilizar as folhas de estilos CSS na pgina 267.
Para compartilhar os estilos HTML com outros sites ou usurios:
Escolha Janela > Arquivos do site, para abrir a janela do site na visualizao dos arquivos do site. No painel direita, abra a pasta raiz do site e, em seguida, abra a pasta Biblioteca. H um arquivo chamado styles.xml. Esse arquivo contm todos os estilos HTML do site. Ele pode ser colocado, obtido, devolvido, retirado e copiado como qualquer outro no site. Tambm possvel criar Design Notes para o arquivo styles.xml. Observe que, para criar ou editar um estilo para um site remoto, necessrio retirar primeiro o arquivo styles.xml. Para obter mais informaes sobre o uso dessas opes, consulte Como congurar um site remoto na pgina 131.
266
Captulo 10
Como utilizar as folhas de estilos CSS

Um estilo um grupo de atributos de formatao que controla a aparncia de uma faixa de texto de um nico documento. Um estilo CSS pode ser utilizado para controlar muitos documentos de uma vez e inclui todos os estilos para um documento. A vantagem de utilizar uma folha de estilos CSS, em vez de um estilo HTML, que, alm de estar vinculada a vrios documentos, quando um estilo CSS for atualizado ou alterado, a formatao de todos os documentos que utilizam essa folha de estilos ser tambm automaticamente atualizada. Por exemplo: imagine o gerenciamento de um site da Web muito grande, como o Yahoo ou Macromedia.com. A utilizao dos estilos CSS permite fazer alteraes rpidas e precisas nas fontes e na formatao do site inteiro, ou em muitas pginas. Alm disso, os estilos CSS permitem controlar muitas propriedades que no podem ser administradas quando for utilizado apenas o HTML. Por exemplo: podem-se atribuir marcadores de listas personalizados e especicar diferentes tamanhos de fontes e unidades (pixels, pontos, etc.). A utilizao dos estilos CSS e a denio de tamanhos de fontes garante um tratamento mais consistente do layout e da aparncia da pgina em vrios navegadores. Os estilos CSS esto disponveis h algum tempo, porm muitos designers e criadores de sites da Web relutam em utiliz-los devido ao suporte inconsistente pelos navegadores. Contudo, se entre o seu pblico houver pessoas que utilizam navegadores que oferecem suporte aos estilos CSS (4.0 e mais avanados), voc deveria se dispor a obter as vantagens da capacidade e controle que esses estilos oferecem. Os estilos CSS so identicados pelo nome ou pelo tag HTML, o que permite alterar o atributo de um estilo e visualizar instantaneamente as modicaes no texto inteiro ao qual esse estilo foi aplicado. Os estilos CSS nos documentos HTML podem controlar a maioria dos atributos tradicionais de formatao de texto, como fonte, tamanho e alinhamento. Eles podem especicar tambm atributos HTML exclusivos, como posicionamento, efeitos especiais e imagens cambiveis pelo mouse. As folhas de estilos CSS residem na rea head de um documento. Os estilos CSS podem denir os atributos de formatao dos tags HTML, faixas de texto identicadas por um atributo class ou texto que atenda ao critrio compatvel com a especicao de folhas de estilos CSS. O Dreamweaver reconhece os estilos denidos nos documentos existentes, contanto que eles estejam em conformidade com as instrues CSS. As folhas de estilos CSS funcionam em navegadores 4.0 e mais avanados. O Internet Explorer 3.0 reconhece algumas folhas de estilos CSS, porm os navegadores das verses anteriores as ignoram.
267
H trs tipos disponveis de folhas de estilos CSS no Dreamweaver:
Os estilos CSS personalizados so semelhantes queles utilizados em um

processador de texto, exceto pela ausncia de distino entre os estilos de caractere e de pargrafo. Os estilos CSS personalizados podem ser aplicados a qualquer faixa ou bloco de texto. Se o estilo CSS for aplicado a um bloco de texto (como um pargrafo inteiro ou lista no-ordenada), ser adicionado um atributo class ao tag do bloco (por exemplo: p class="myStyle" ou ul class="myStyle"). Se o estilo CSS for aplicado a uma faixa de texto, os tags span, que contm o atributo class, sero inseridos em volta do texto selecionado. Consulte Como aplicar um estilo (classe) CSS personalizado na pgina 273.
Os estilos de tags HTML redenem a formatao de um tag especco, como

h1.
Quando for criado ou alterado um estilo CSS para o tag h1, todos os textos formatados com o tag h1 sero imediatamente atualizados.
Nota: Tenha cuidado ao redefinir os tags em uma CSS vinculada, pois isto poder alterar o layout de muitas pginas. Por exemplo: se o tag table for redefinido de modo a ter uma determinada aparncia, ele ir alterar o layout de outras pginas que utilizarem tabelas.
Os estilos do seletor CSS redenem a formatao de uma determinada

combinao de tags (por exemplo: td h2 ser aplicado sempre que um cabealho h2 aparecer em uma clula de tabela) ou de todos os tags que contiverem um atributo id (por exemplo: #myStyle ser aplicado a todos os tags que contiverem o par atributo-valor ID="myStyle"). A formatao HTML manual anula a formatao aplicada com os estilos CSS (ou HTML). Para que os estilos CSS controlem a formatao de um pargrafo, remova toda a formatao HTML manual ou os estilos HTML. Embora seja possvel congurar um nmero ilimitado de atributos de estilo CSS denidos pela especicao CSS1 no Dreamweaver, nem todos os atributos aparecero na janela do documento. Os atributos ocultos so marcados com um asterisco (*) na caixa de dilogo Denio de estilo. Observe tambm que alguns dos atributos de estilo CSS, que podem ser denidos no Dreamweaver, tm uma aparncia diferente no Microsoft Internet Explorer 4.0 e no Netscape Navigator 4.0, e alguns no contam atualmente com suporte de nenhum navegador.
Nota: Para exibir o guia OReilly de referncia de CSS, distribudo com o Dreamweaver, clique no boto Referncia, na barra de ferramentas e escolha Referncia de HTML O'Reilly, no menu pop-up.
268
Captulo 10
Sobre as propriedades dos estilos CSS A especicao Cascading Style Sheets (CSS1), que administrada pelo World Wide Web Consortium, dene as propriedades dos estilos CSS (por exemplo: fonte, cor, preenchimento, margem, espaamento entre as palavras) que controlam a aparncia dos elementos na pgina da Web. O Dreamweaver permite denir qualquer propriedade CSS1. No Internet Explorer 4.0 e mais avanado, podem ser utilizadas as linguagens de script, como JavaScript ou VBScript, para alterar as propriedades de posicionamento e estilos CSS dos elementos aps a carga da pgina. No Netscape Navigator 4.0 e mais avanado, as propriedades dos estilos CSS no podem ser alteradas depois que a pgina tiver sido carregada, apenas as propriedades de posicionamento. Como criar ou vincular uma folha de estilos CSS externa Uma folha de estilos CSS um arquivo de texto externo que contm especicaes de estilos e formatao. Quando uma folha de estilos CSS externa for editada, todos os documentos a ela vinculados sero atualizados com essas alteraes. Os estilos CSS de um documento podem ser exportados para criar uma nova folha de estilos CSS e, em seguida, anexados ou vinculados a uma folha de estilos externa, a m de aplicar os estilos nela contidos.
A Ajuda do Dreamweaver consiste de pginas HTML que utilizam uma folha de estilos CSS vinculada, chamada help.css. Para examinar a aparncia do cdigo para uma denio de folha de estilos, abra o arquivo help.css (na pasta Help/html) em um editor de texto. Abra qualquer um dos arquivos de tpicos (aqueles iniciados por um nmero) para ver como a folha de estilos CSS est vinculada ao documento atravs de um tag link, e tambm como os estilos CSS especcos so aplicados. Voc tambm pode copiar o help.css para a sua pasta raiz local e aplicar os seus estilos a uma pgina de teste.
269
Para anexar uma folha de estilos CSS externa:
1 2
Escolha Janela > Estilos CSS, ou clique no cone de Estilos CSS, no Iniciador. No painel Estilos CSS, clique com o boto direito (no Windows), ou pressione a tecla Control e clique (no Macintosh), e escolha Anexar a folha de estilos, no menu pop-up. Tambm possvel clicar no cone de Anexar a folha de estilos, na parte inferior do painel Estilos CSS. Na caixa de dilogo Selecionar a folha de estilos, digite o nome do arquivo em um campo URL ou procure o arquivo desejado. Selecione um documento ou caminho relativo raiz do site. Consulte Sobre as localizaes e os caminhos dos documentos na pgina 386. Clique em Abrir. A folha de estilos ser anexada ao documento do Dreamweaver e os seus estilos aparecero no painel Estilos CSS.
Para vincular ou criar uma folha de estilos CSS externa
1 2
Escolha Janela > Estilos CSS, ou clique no cone de Estilos CSS, no Iniciador. No painel Estilos CSS, clique com o boto direito (no Windows), ou pressione a tecla Control e clique (no Macintosh), e escolha Editar a folha de estilos, no menu suspenso. Na caixa de dilogo Editar a folha de estilos, clique em Vincular. Na caixa de dilogo Vincular a folha de estilos externa, siga um dos procedimentos abaixo: uma folha de estilos CSS externa, ou digite o caminho da folha de estilos na caixa Arquivo/URL. A busca recomendada porque garante que ser digitado o caminho correto da folha de estilos.
3 4
Clique em Procurar (no Windows) ou Escolher (no Macintosh), para procurar
Crie uma nova folha de estilos CSS externa, digitando um novo nome de
arquivo (que ainda no exista no local especicado). O nome do arquivo deve conter a extenso .css.
5
Selecione a opo Vincular ou Importar, para especicar e criar o tag utilizado para anexar a folha de estilos CSS externa ao documento e, em seguida, clique em OK. A opo Importar insere no documento atual as informaes contidas no arquivo da folha de estilos CSS externa, enquanto Vincular acessa e reserva as informaes sem transferi-las. Embora ambas as opes passem todos os estilos da folha de estilos CSS externa para o documento atual, Vincular oferece mais recursos e funciona com mais navegadores. O nome da folha de estilos CSS externa aparecer com o identicador (vincular ou importar) na lista de estilos, na caixa de dilogo Editar os estilos. Conclua as etapas abaixo para criar ou editar os estilos denidos na folha de estilos CSS externa.
270
Captulo 10
Na caixa de dilogo Editar a folha de estilos, selecione o nome da folha de estilos externa e clique em Editar. Aparecer a caixa de dilogo Editar a folha de estilos para essa folha de estilos. Clique em Novo, para denir os estilos na folha de estilos CSS externa. Na caixa de dilogo Novo estilo, dena o novo estilo. Consulte Como criar um estilo CSS no Dreamweaver na pgina 272. Ao terminar de denir os estilos, clique em Salvar.
7 8
Como editar uma folha de estilos CSS externa: Quando uma folha de estilos CSS que controla o texto no documento for editada, o texto inteiro ser reformatado instantaneamente. As edies afetam todos os documentos vinculados folha de estilos.
Para editar uma folha de estilos CSS externa:
Abra qualquer documento que esteja vinculado folha de estilos CSS externa a ser alterada. Siga um dos procedimentos abaixo: No painel Estilos CSS, clique com o boto direito (no Windows), ou pressione a tecla Control e clique (no Macintosh), e escolha Editar a folha de estilos, no menu suspenso.
Escolha Janela > Estilos CSS, ou clique no cone de Estilos CSS, no Iniciador.
Escolha Texto > Estilos CSS > Editar a folha de estilos.

3
Na caixa de dilogo Editar a folha de estilos, selecione o nome da folha de estilos externa e clique em Editar. Aparecer uma segunda caixa de dilogo Editar a folha de estilos, exibindo os estilos na folha externa. Escolha os estilos a serem editados.
Edite o estilo. Consulte Como criar um estilo CSS no Dreamweaver na pgina 272. Ao terminar a edio dos estilos, clique em Salvar.
271
Como criar um estilo CSS no Dreamweaver Crie um estilo CSS para automatizar a formatao dos tags HTML ou uma faixa de texto identicada por um atributo class.
Para criar um estilo CSS:
Escolha Janela > Estilos CSS e, no painel Estilos CSS, clique com o boto direito do mouse (no Windows) ou pressione a tecla Control e clique (no Macintosh), e escolha Novo estilo, no menu pop-up. Tambm possvel clicar no cone de Novo estilo, na parte inferior do painel Estilos CSS. Escolha dentre as seguintes opes de estilos CSS: cria um estilo que pode ser aplicado como um atributo class a uma faixa ou bloco de texto.
Criar estilo personalizado (classe)
redene a formatao padro de um tag HTML especicado. Lembre-se que possvel alterar o layout de muitas pginas quando um tag for redenido.
Redefinir o tag HTML
dene a formatao para uma determinada combinao de tags ou para todos os tags que contm um atributo 1d especco.
Utilizar o seletor CSS
Digite um nome, tag ou seletor para o novo estilo: Caso o ponto no seja includo, o Dreamweaver o digitar. Esses nomes podem conter qualquer combinao de letras e nmeros, mas deve ser colocada uma letra aps o ponto. Por exemplo: .cabealhocomercial1.
Os nomes de estilos CSS (classe) personalizados devem iniciar com um ponto.
Para redenir um estilo de tag HTML, digite um tag HTML ou escolha algum
no menu pop-up .
Para um seletor CSS, digite qualquer critrio vlido para um seletor (por
exemplo: td ou #myStyle), ou escolha um seletor no menu pop-up. Os seletores disponveis no menu so a:active, a:hover, a:link e a:visited.
4
Selecione o local onde o estilo ser denido: Novo arquivo de folha de estilos (externa) ou Apenas este documento. Clique em OK. Aparecer a caixa de dilogo Denio de estilo. Escolha as denies de formatao para o novo estilo CSS. Mantenha os atributos em branco, caso no sejam importantes para o estilo. Os atributos que no aparecem na janela do documento so marcados com um asterisco (*) na caixa de dilogo Denio de estilo. Alguns dos atributos de estilo CSS que podem ser denidos no Dreamweaver tm uma aparncia diferente no Microsoft Internet Explorer 4.0 e no Netscape Navigator 4.0, e alguns no contam atualmente com suporte de nenhum navegador.
5 6
272
Captulo 10
Clique em OK ou Aplicar.
Consulte os tpicos seguintes na Ajuda do Dreamweaver, para obter informaes sobre denies especcas:
painel Denio de estilo do tipo painel Denio de estilo do fundo painel Denio de estilo de bloco painel Denio de estilo de caixa painel Denio de estilo de borda painel Denio de estilo de lista painel Denio de estilo de posicionamento painel Denio de estilo de extenses
Quando for criado um estilo (classe) personalizado, ele aparecer no painel Estilos CSS e no submenu Texto > Estilos CSS. Os estilos de tags HTML e do seletor CSS no aparecem no painel Estilos CSS, porque no podem ser aplicados, mas so representados automaticamente na janela do documento, onde ocorrer o tag ou seletor. Como aplicar um estilo (classe) CSS personalizado Os estilos (classes) personalizados so o nico tipo de estilo CSS que pode ser aplicado a qualquer texto em um documento, sem levar em considerao os tags que o controlam. O painel Estilos CSS exibe os nomes de todos os estilos disponveis. No confunda os estilos CSS com as opes como Negrito ou Varivel do submenu Texto > Estilo; essas opes so atributos de formatao predenidos, que correspondem a tags HTML especcos. Quando dois ou mais estilos CSS forem aplicados ao mesmo texto, estes podero se tornar conitantes e produzir resultados inesperados. Consulte Sobre os estilos conitantes na pgina 275.
273
Para aplicar um estilo CSS personalizado:
1 2
Escolha Janela > Estilos CSS. 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. Para especicar o tag exato ao qual o estilo CSS deve ser aplicado, escolha o tag com o seletor, na parte inferior esquerda da janela do documento. Tambm possvel selecionar o tag exato no seletor de tags, clique com o boto direito do mouse (no Windows) ou pressione a tecla Control e clique (no Macintosh), para mostrar um menu contextual, e escolha Set Class, para examinar uma lista de estilos CSS a serem aplicados. Se for selecionada uma faixa de texto em um nico pargrafo, o estilo CSS afetar apenas a faixa selecionada.
Clique em um nome de estilo no painel Estilos CSS.
Um estilo CSS tambm pode ser aplicado escolhendo um nome de estilo no submenu Texto > Estilos CSS, ou clicando com o boto direito do mouse (no Windows), ou pressionando a tecla Control e clicando (no Macintosh) para escolher o nome do estilo no submenu Estilos CSS do menu contextual. O tag da seleo atual aparecer ao lado do comando Estilo personalizado. Como exportar os estilos para criar uma folha de estilos CSS Os estilos de um documento podem ser exportados para criar uma nova folha de estilos CSS. Em seguida, ela pode ser vinculada a outros documentos, para que os estilos sejam aplicados.
Para exportar os estilos CSS de um documento e criar uma folha de estilos CSS:
Escolha Arquivo > Exportar > Exportar os estilos CSS, ou selecione Texto > Exportar a folha de estilos. Aparecer a caixa de dilogo Exportar os estilos como um arquivo CSS. Digite um nome para o estilo e clique em Salvar. O estilo ser salvo como uma folha de estilos CSS.
274
Captulo 10
Sobre os estilos conflitantes Quando dois ou mais estilos CSS forem aplicados ao mesmo texto, estes podero se tornar conitantes e produzir resultados inesperados. Os navegadores aplicam os atributos de estilo segundo as regras abaixo:
Se dois estilos forem aplicados ao mesmo texto, o navegador exibir todos os

atributos de ambos os estilos, a menos que os atributos especcos sejam conitantes. Por exemplo: um estilo pode especicar azul para a cor do texto e outro denir vermelho.
Se os atributos de dois estilos aplicados ao mesmo texto forem conitantes, o

navegador exibir o atributo do estilo mais prximo (quele do texto).
Se houver um conito direto, os atributos dos estilos CSS (aplicados com o

atributo class ) anularo aqueles dos estilos de tags HTML. No exemplo seguinte, o estilo denido para h1 deve especicar a fonte, o tamanho e a cor para todos os pargrafos h1, mas o estilo CSS personalizado .Blue aplicado a esse pargrafo anula a denio de cor no estilo H1. O segundo estilo CSS personalizado .Red anula o .Blue porque ele est contido no estilo .Blue.
<h1><span class="Blue">Este pargrafo est controlado pelo estilo personalizado .Blue e pelo estilo h1 de tag HTML.<span class="Red">Exceto pelo fato de esta sentena ser controlada pelo estilo .Red. </span> Agora, estamos de volta ao estilo .Blue.</span></h1>
Como utilizar o painel Estilos CSS Utilize o painel Estilos CSS para aplicar os estilos CSS personalizados seleo atual. O painel Estilos CSS exibe apenas os estilos CSS (classes) personalizados; os estilos redenidos de tags HTML e de seletor CSS no aparecem no painel Estilos CSS, porque so aplicados automaticamente a qualquer texto controlado pelo tag ou seletor especicado. (Caso seja conveniente recortar e colar estilos que podem ser reutilizados, mas no atualizados e personalizados, utilize o painel Estilos HTML.) Escolha Janela > Estilos CSS, para exibir o painel Estilos CSS.
Aplicar
exibe o tag da seleo atual. Escolha um tag no menu pop-up para selecionar uma opo diferente.
abre a caixa de dilogo Novo estilo. Crie um novo estilo para um determinado documento ou crie uma nova folha de estilos externa.
Novo estilo Anexar a folha de estilos abre a caixa de dilogo Selecionar o arquivo de folha de estilos. Selecione uma folha de estilos externa para anexar ao documento atual.
abre a caixa de dilogo Editar a folha de estilos. Edite qualquer um dos estilos no documento atual ou em uma folha de estilos externa.
Editar a folha de estilos
Consulte tambm Como utilizar as folhas de estilos CSS na pgina 267.
275
Nota: Clique com o boto direito do mouse (no Windows), ou pressione a tecla Control e clique (no Macintosh) no painel Estilos CSS, para abrir um menu contextual que inclui os comandos Editar, Duplicar, Excluir, Aplicar o novo estilo, Editar a folha de estilos e Anexar a folha de estilos.
Como definir as preferncias de estilos CSS As preferncias de estilos CSS controlam a maneira pela qual o Dreamweaver grava o cdigo que dene os estilos CSS. Esses estilos podem ser gravados de forma abreviada, com a qual algumas pessoas acham mais fcil trabalhar. Algumas verses mais antigas dos navegadores no interpretam corretamente o formato abreviado. A menos que voc prera que o Dreamweaver grave os estilos de forma abreviada, no h razo para alterar qualquer uma das preferncias de estilos CSS. Escolha Editar > Preferncias, e clique em Estilos CSS, para exibir as preferncias de formato da folha de estilos CSS. Consulte tambm Como utilizar as folhas de estilos CSS na pgina 267.
Utilizar o formato abreviado para determina quais atributos de estilo CSS o Dreamweaver gravar em formato abreviado. Ao editar os estilos CSS, utilize o formato abreviado controla se o Dreamweaver regravar os estilos existentes no formato abreviado. Escolha a opo Se o formato original for abreviado, para fazer com que o Dreamweaver mantenha todos os estilos originais. Escolha De acordo com as denies acima, para que o Dreamweaver reescreva os estilos em formato abreviado, segundo os atributos especicados nas caixas de seleo Utilizar o formato abreviado de.
276
Captulo 10
Como converter os estilos CSS em tags HTML

Se voc utilizar os estilos CSS para especicar a formatao do texto (como famlia, tamanho, cor e decorao das fontes) e, posteriormente, decidir tornar a formatao visvel em um navegador 3.0, utilize o comando Arquivo > Converter > Compatvel com navegador 3.0, para converter o maior nmero de informaes possveis sobre os estilos para os tags HTML.
Nota: Nem todos os estilos CSS podem ser convertidos em HTML, porque os tags HTML no abrangem ou oferecem suporte a todos os atributos possveis nas CSS. Para converter um arquivo que utiliza os estilos CSS em um arquivo compatvel com navegador 3.0:
1 2
Escolha Arquivo > Converter > Compatvel com navegador 3.0. Na caixa de dilogo que aparecer, escolha Estilos CSS em markup de HTML. Quando a opo Camadas em tabelas for selecionada, o Dreamweaver substituir todas as camadas por uma tabela e manter o posicionamento original. Os estilos CSS sero substitudos, onde for possvel, pelos tags HTML, como b e font. Qualquer markup CSS que no puder ser convertido em HTML ser removido. Consulte Tabela de converso de CSS em markup de HTML na pgina 278 para obter informaes sobre quais estilos sero convertidos e quais sero removidos.
Clique em OK. O Dreamweaver abrir o arquivo convertido em uma nova janela sem ttulo.
Nota: Este procedimento de converso dever ser efetuado sempre que o arquivo original for alterado, para atualizar o arquivo compatvel com os navegadores da verso 3.0. Por esse motivo, recomendamos que isto seja efetuado apenas depois que voc estiver inteiramente satisfeito com o arquivo original.
277
Tabela de converso de CSS em markup de HTML Os atributos CSS relacionados na tabela abaixo so convertidos em markup de HTML utilizando o comando Arquivo > Converter > Compatvel com navegador 3.0. Consulte Como converter os estilos CSS em tags HTML na pgina 277. Os atributos no contidos na tabela sero removidos.
atributo CSS Convertido em
color font-family font-size font-style: oblique font-style: italic font-weight list-style-type: square list-style-type: circle list-style-type: disc list-style-type: upper-roman list-style-type: lower-roman list-style-type: upper-alpha list-style-type: lower-alpha list-style text-align text-decoration: underline text-decoration: line-through
FONT COLOR FONT FACE FONT SIZE="[1-7]" I I B UL TYPE="square" UL TYPE="circle" UL TYPE="disc" OL TYPE="I" OL TYPE="i" OL TYPE="A" OL TYPE="a" UL ou OL com TYPE, conforme for adequado P ALIGN ou DIV ALIGN, conforme for adequado U STRIKE
278
Captulo 10
Como verificar a ortografia

Utilize o comando Vericar a ortograa, no menu Texto, para corrigir a ortograa no documento. Esse comando ignora os tags HTML e valores de atributos. Como padro, a vericao ortogrca utiliza o dicionrio ortogrco de ingls dos EUA. Para alterar o dicionrio, escolha Editar > Preferncias > Geral, e selecione um outro dicionrio no menu pop-up. Os dicionrios dos idiomas adicionais esto disponveis para download no Centro de suporte do Dreamweaver. Como verificar a ortografia utilizando a caixa de dilogo Verificar a ortografia Utilize as seguintes opes da caixa de dilogo Vericar a ortograa para examinar a ortograa no documento: Para exibir a caixa de dilogo, escolha Texto > Vericar a ortograa.
Adicionar ao dicionrio pessoal adiciona
a palavra no-reconhecida ao seu dicionrio pessoal. Para remover as palavras do dicionrio pessoal, edite o arquivo Personal.dat em um editor de texto. Esse arquivo est em Dreamweaver 4/ Conguration/Dictionaries.
Ignorar ignora
a ocorrncia de uma palavra no-reconhecida. todas as ocorrncias de uma palavra no-reconhecida.
Ignorar todas ignora Alterar substitui
a ocorrncia da palavra no-reconhecida pelo texto digitado na caixa Alterar para, ou pela seleo na lista Sugestes.
Alterar todas substitui
todas as ocorrncias da palavra no-reconhecida.
279
Como procurar e substituir texto, tags e atributos

possvel realizar uma busca de texto, texto circundado por determinados tags ou tags e atributos HTML no documento atual, em arquivos especcos, em um diretrio ou no site inteiro. Observe que sero utilizados comandos diferentes para procurar arquivos e texto (e/ou tags HTML 1) nos arquivos: Localizar no site local e Localizar no site remoto buscam arquivos, enquanto que Editar > Localizar e substituir procuram texto e tags nos arquivos.
Para procurar texto e/ou HTML nos documentos:
Escolha dentre as seguintes opes: Localizar e substituir.
Na visualizao do projeto, na janela do documento ou do site, escolha Editar > Na visualizao de cdigo, clique com o boto direito do mouse (no Windows),
ou clique mantendo a tecla Control pressionada (no Macintosh), e escolha Localizar e substituir no menu contextual.
2
Na caixa de dilogo Localizar e substituir que aparecer, utilize a opo Localizar em, para especicar os arquivos a serem localizados: disponvel apenas quando for escolhida Localizar ou substituir, na janela ativa do documento ou no menu contextual, no inspetor de cdigo.
Documento atual restringe a busca ao documento ativo. Esta opo estar A escolha de Todo o site local expande a busca para todos os documentos
HTML, arquivos de biblioteca e documentos de texto localizados no site. Aps a escolha de Site atual, o nome deste aparecer direita do menu pop-up. Se este no for o site no qual deseja efetuar a busca, escolha um outro site no menu pop-up Sites atuais, na janela do site.
Arquivos selecionados do site restringe a busca aos arquivos e pastas que

estiverem selecionados na janela do site. Esta opo est disponvel apenas quando Localizar ou substituir tiver sido escolhida na janela do site ativa (isto , na frente da janela do documento).
A escolha de Pasta restringe a busca a um grupo especco de arquivos. Aps

escolher a pasta, clique no cone correspondente pasta, para procurar e selecionar o diretrio no qual ser efetuada a busca.
280
Captulo 10
Utilize a opo Procurar, para especicar o tipo de busca a ser efetuada. no cdigo-fonte HTML. Consulte Sobre as buscas de cdigo-fonte HTML na pgina 282.
A escolha de Cdigo-fonte permite procurar determinadas seqncias de texto A escolha de Texto permite procurar determinadas seqncias de texto na janela
do documento. Uma busca de texto ignora qualquer HTML que interrompa a seqncia. Por exemplo: uma busca de o co preto coincidiria com o co preto e o <i>co</i> preto..
A escolha de Texto avan. permite procurar determinadas seqncias de texto

dentro ou fora de um ou mais tags. Por exemplo: em um documento que contm o seguinte HTML, a procura de tenta fora do tag i acarretaria a localizao apenas da segunda instncia da palavra tenta: Joo <i>tenta</i>
entregar o trabalho dentro do prazo, mas nem sempre consegue. Ele sempre tenta cumprir os prazos. Consulte Como procurar texto contido em tags
especcos na pgina 284.
A escolha de Tag especco permite procurar determinados tags, atributos e

valores de atributo, como todos os tags td com a denio de valign para top. Consulte Como procurar os tags e atributos HTML na pgina 282.
Nota: A ativao atravs das teclas Control e Enter ou Shift e Enter (no Windows), ou Control e Return, Shift e Return ou Command e Return (no Macintosh) adiciona quebras de linha nos campos de busca de texto, permitindo a procura de um caractere de retorno. Verifique se a opo Ignorar os diferentes espaos em branco est desmarcada ao fazer essa busca, quando no forem utilizadas as expresses regulares. Observe que esse procedimento localiza um determinado caractere de retorno, mas no apenas uma quebra de linha; por exemplo: no localizar um tag <br> ou <p>. Os caracteres de retorno aparecem como espaos na visualizao do projeto e no como quebras de linha.
Utilize uma das seguintes opes para expandir ou limitar a busca: exatamente com a caixa do texto a ser localizado. Por exemplo: se voc tentar localizar o chapu marrom, no encontrar O chapu marrom.
Nota: A opo Ignorar os diferentes espaos em branco trata qualquer espao em branco como espao simples, com o intuito de coincidir com a busca. Por exemplo: com esta opo selecionada, este texto coincidiria com este texto, porm no com estetexto. Esta opo no estar disponvel quando Utilizar expresses regulares estiver selecionada; neste caso, ser necessrio escrever textualmente a expresso normal, a fim de ignorar qualquer espao em branco Observe que os tags <p> e <br> no so considerados espao em branco.
A opo Coincidir maisc./minsc restringe a busca ao texto que coincidir
A opo Utilizar expresses regulares acarreta a interpretao de certos

caracteres e cadeias de caracteres pequenas (como ?, *, \w e \b) da seqncia de busca como operadores comuns de expresses. Por exemplo: a busca de o co b\w*\b coincidir com o co preto e o co policial. Consulte Sobre as expresses regulares na pgina 286.
281
Nota: Se voc estiver trabalhando na visualizao de cdigo, fizer alteraes no seu documento e tentar localizar e substituir qualquer item que no seja cdigo-fonte, aparecer uma caixa de dilogo informando que o Dreamweaver est sincronizando as duas visualizaes antes de efetuar a busca. Para obter mais informaes sobre a sincronizao de visualizaes, consulte Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) na pgina 361.
Sobre as buscas de cdigo-fonte HTML Utilize a opo Cdigo-fonte HTML, na caixa de dilogo Localizar e substituir, para procurar seqncias especcas de texto no cdigo-fonte HTML. Por exemplo: uma busca de co preto no seguinte cdigo coincidiria com duas instncias (no atributo alt e na primeira frase):
<img src="barnaby.gif" width="100" height="100" alt=Barnab, um co preto.><br> Ontem, vimos vrios ces pretos no parque. O co <a href=barnab.html>preto</a> de que mais gostamos se chama Barnab.
A frase co preto tambm aparece na segunda orao, porm ela no coincide com a busca, pois interrompida por um link. Consulte Como procurar e substituir texto, tags e atributos na pgina 280 para obter instrues passo a passo que explicam como iniciar uma busca. Como procurar os tags e atributos HTML Utilize a opo Tag especco, na caixa de dilogo Localizar e substituir, para procurar tags, atributos e valores de atributos especcos. Por exemplo: possvel procurar todos os tags img sem o atributo alt. Consulte Como procurar e substituir texto, tags e atributos na pgina 280 para obter informaes sobre os vrios tipos de buscas.
Para realizar uma busca de tag:
Escolha Editar > Localizar e substituir, e especique em quais arquivos dever ser feita a busca, conforme a explicao em Como procurar e substituir texto, tags e atributos na pgina 280. Escolha Tag especco, no menu pop-up Procurar. Escolha um tag especco no menu pop-up ao lado do menu pop-up Procurar, ou selecione [qualquer tag]. Se desejar apenas procurar todas as ocorrncias do tag especicado, pressione o boto com o sinal de subtrao (-) e passe etapa 6. Caso contrrio, prossiga na etapa 4.
2 3
282
Captulo 10
Limite a busca, utilizando um dos seguintes modicadores de tags: que este coincida com o critrio de busca. possvel especicar um determinado valor deste atributo ou escolher [qualquer valor].
Escolha Com atributo, para selecionar um atributo que deva estar no tag, para Escolha Sem atributo, para selecionar um atributo que no deva estar no tag,
para que este coincida com o critrio de busca. Por exemplo: escolha esta opo para procurar todos os tags IMGsem o atributo ALT.
Escolha Contendo, para especicar um texto ou tag que deve estar contido
no tag original para que haja coincidncia. Por exemplo: no cdigo <b><font face="Arial">Cabealho 1</font></b>, o tag font est contido no tag b.
Escolha No contendo, para especicar um texto ou tag que no deve estar

contido no tag original, para que haja coincidncia.
Escolha Dentro do tag, para especicar um tag dentro do qual deve estar o tag
de destino, para que haja coincidncia.
Escolha Fora do tag, para especicar um tag dentro do qual no deve estar o tag
de destino, para que haja coincidncia.
5
Clique no boto com o sinal de adio (+) e repita a etapa 4, a m de restringir mais ainda a busca. Inicie a busca: no documento.
Escolha Localizar o prximo, para realar a prxima instncia do texto da busca Escolha Localizar todos, para gerar uma lista de todas as instncias do texto da
busca no documento.
Clique em Localizar o prximo para realar a prxima instncia do texto da

busca no documento atual ou, caso haja algum, abra o prximo documento que contenha o texto da busca.
Escolha Localizar todos, para gerar uma lista de todas as instncias do texto da
busca no documento atual ou, se voc estiver procurando um diretrio ou site, gerar uma lista de documentos que contenham o texto da busca.
283
Como procurar texto contido em tags especficos Utilize a opo Texto avan., na caixa de dilogo Localizar e substituir, para procurar determinadas seqncias de texto que podero estar ou no em um conjunto de tags de conteno. Por exemplo: possvel procurar a expresso Sem ttulo entre os tags <title>, a m de localizar todas as pginas sem ttulo no site. Consulte Como procurar e substituir texto, tags e atributos na pgina 280 para obter informaes sobre os vrios tipos de buscas.
Para realizar uma busca de texto avanada:
Escolha Editar > Localizar e substituir, e especique em quais arquivos dever ser feita a busca, conforme a explicao em Como procurar e substituir texto, tags e atributos na pgina 280. No menu pop-up Localizar, selecione Texto avan. Digite o texto a ser localizado no campo de texto adjacente ao menu pop-up Procurar. Por exemplo: digite a expresso Sem ttulo. Escolha Dentro do tag ou Fora do tag e, em seguida, escolha um tag no menu pop-up adjacente. Por exemplo: escolha Dentro do tag e, em seguida title. Clique no boto com o sinal de adio (+), a m de restringir mais ainda a busca dos tags com um ou mais atributos especcos. Uma vez que o tag <title> no possui atributos, no ser necessrio utilizar esta opo para localizar todas as pginas sem ttulo no site.
2 3
Escolha Localizar o prximo, para abrir o prximo documento que contiver o texto de busca, ou clique em Localizar todos, para gerar uma lista de documentos que contm esse texto.
284
Captulo 10
Como salvar os padres de busca possvel salvar os padres de busca para uso posterior clicando no boto Salvar a consulta, na caixa de dilogo Localizar e substituir. O salvamento de uma consulta conveniente se esta for realizada com freqncia e se voc no quiser reconstruir vrias vezes esse padro de busca. Por exemplo: para retirar tags no-padronizados de documentos criados com um outro editor visual de HTML ou para conrmar se todas as imagens contidas em um arquivo possuem os atributos height, width e alt, antes que o documento seja publicado na Web.
Para salvar um padro de busca:
Dena os parmetros da busca, seguindo as etapas descritas em Como procurar e substituir texto, tags e atributos na pgina 280. Se estiver realizando uma busca de tag ou texto avanado, consulte Como procurar os tags e atributos HTML na pgina 282 ou Como procurar texto contido em tags especcos na pgina 284, para obter informaes sobre a denio de parmetros adicionais de busca.
Clique no boto Salvar a consulta (identicado por um cone em forma de disco). O local padro onde as consultas so salvas a pasta Conguration/Queries, contida na pasta do aplicativo do Dreamweaver.
Na caixa de dilogo que aparecer, digite o nome do arquivo que identicar a consulta e clique em Salvar. Por exemplo: se o padro de busca envolver a localizao de tags img sem o atributo alt, a consulta poder se chamar img_no_alt.dwr. As consultas de localizao terminam com a extenso dwq, enquanto que as consultas de substituio terminam com a extenso dwr.
Para chamar um padro de busca novamente:
1 2
Escolha Editar > Localizar e substituir. Clique no boto Carregar a consulta (identicado por um cone em forma de pasta). A caixa de dilogo Carregar a consulta ser aberta automaticamente na pasta Conguration/Queries. possvel navegar at uma outra pasta, se houver consultas salvas em outras pastas.
Selecione um arquivo de consulta e clique em Abrir. Na caixa de dilogo Localizar, apenas as consultas de localizao (arquivos .dwq) estaro disponveis. Na caixa de dilogo Substituir, tanto as consultas de localizao (arquivos .dwq) quanto as de substituio (arquivos .dwr) estaro disponveis.
Clique em Localizar o prximo, Localizar todos, Substituir ou Substituir todos, para iniciar a busca.
285
Sobre as expresses regulares As expresses regulares consistem de padres que descrevem as combinaes de caracteres no texto. Utilize essas expresses em suas buscas, para que o auxiliem a descrever conceitos como frases iniciadas com O e valores de atributo que contenham um nmero. A tabela a seguir lista os caracteres especiais em expresses regulares, bem como seus signicados 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 algumas condies se aplicam*, o padro de busca poderia ter a seguinte aparncia: aplicam\*. 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 ^ Coincidir com Incio da entrada ou linha. Exemplo
^T coincidir com T em Terracota, mas no em Cabana do Pai Toms o$ coincidir com o em nmero, mas no em nmeros um* coincidir com um em rum,
umi em luminoso e u em azul
$ *
Final da entrada ou linha. O caractere precedente zero ou mais vezes. O caractere precedente uma ou mais vezes.
um+ coincidir com um em rum e

umi em luminoso, porm no coincidir com qualquer ocorrncia de azul
O caractere precedente no mximo re?ta coincidir com rta em curta e reta em preta, porm uma vez (isto , indica que o caractere precedente opcional). no coincidir com qualquer ocorrncia de caneta ou brotar Qualquer caractere, exceto nova linha. x ou y.
.pr coincidir com propriedades

e programa na frase propriedades do programa
x|y
FF0000|0000FF coincide com FF0000 em bgcolor=#FF0000 e 0000FF em font color=#0000FF r{2} coincidir com rr em carro
e com os primeiros dois erres em brrrrrr, porm no coincidir com qualquer ocorrncia de for
{n}
Exatamente 'n' ocorrncias do caractere precedente.
{n,m}
Pelo menos 'n' e, no mximo, 'm' ocorrncias do caractere precedente.
F{2,4} coincidir com FF em

#FF0000 e com os primeiros quatro efes em #FFFFFF
286
Captulo 10
Caractere [abc]
Coincidir com
Exemplo
Qualquer um dos caracteres dentro [e-g] coincidir com e em dos colchetes. Especifique tabela, f em fraude e g" em uma faixa de caracteres com um Aguarde hfen ([a-f] equivale a [abcdef], por exemplo). Qualquer um dos caracteres que no esteja dentro dos colchetes. Especifique uma faixa de caracteres com um hfen ([â-f] equivale a [âbcdef], por exemplo]). Um limite de palavra (como um espao ou retorno de carro).
[âbc]
[âeiou] coincidir inicialmente

com r em cravo, b em biblioteca e f em OFF!
\b
\bb coincidir com b em

blasfmia, porm no coincidir com qualquer ocorrncia de abrir ou liberdade
\B
Um limite sem palavra.
\Bb coincidir com b em

liberdade, porm no coincidir com blasfmia
\d \D \f \n \r \s
Qualquer caractere numrico. Equivale a [0-9]. Qualquer caractere no numrico. Equivale a [^0-9]. Alimentao de formulrio. Alimentao de linha. Retorno de carro.
\d coincidir com 3 em C3PO e 2 em apartamento 2G \D coincidir com S em 900S e Q em Q45

-
\scoluna coincidir com coluna Qualquer caractere contendo em 100 colunas, porm no espaos em branco, inclusive espaos, tabulaes, alimentaes coincidir com colunas de formulrio ou de linha.
Qualquer caractere que no contenha espaos em branco. Uma tabulao. Qualquer caractere alfanumrico, inclusive o sinal de sublinhado. Equivale a [A-Za-z0-9_].
\S
\Scoluna coincidir com coluna

em colunas:, porm no coincidir com 100 colunas b\w* coincidir com Alfabeto em Alfabeto cirlico e com objeto e abstrato em nenhum objeto abstrato
\t \w
287
Caractere \W
Coincidir com Qualquer caractere que no seja alfanumrico. Equivale a [Â-Zaz0-9_].
Exemplo \W coincidir com & em Joca & Mateus e com % em 100%
Control e Enter ou Shift e Enter (no Windows), ou Control e Return, Shift e Return ou Command e Return (no Macintosh)
Caractere de retorno. Verifique se a opo Ignorar os diferentes espaos em branco est desmarcada ao efetuar essa busca, quando no forem utilizadas as expresses regulares. Observe que esse procedimento coincidir com um determinado caractere, mas no a noo geral de quebra de pgina; por exemplo: no coincidir com um tag <br> ou <p>. Os caracteres de retorno aparecem como espaos na janela do documento e no como quebras de linha.
Utilize parnteses para denir grupos nas expresses regulares que sero mencionadas posteriormente; utilize $1, $2, $3, etc. (utilize ($) no campo Localizar e (\) no campo Substituir para referir-se ao primeiro, segundo, terceiro, etc. grupos de parnteses. 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 americanas e europias).
288
Captulo 10
11
CAPTULO 11
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como inserir imagens
Em geral, so utilizados trs formatos de arquivos grcos nas pginas da Web: GIF, JPEG e PNG. Atualmente, apenas os formatos GIF e JPEG recebem suporte total da maioria dos navegadores. O Microsoft Internet Explorer 4.0 ou mais avanado, e o Netscape Navigator 4.04 ou mais avanado tambm oferecem suporte parcial exibio de imagens PNG. A menos que o um site destine-se a usurios com navegadores que oferecem suporte ao formato PNG, utilize os GIFs ou JPEGs para atingir um pblico maior. Os arquivos GIF (Graphic Interchange Format) so aqueles que utilizam 256 cores no mximo. Os GIFs so mais apropriados para exibir imagens em tons descontnuos ou aquelas que contm grandes superfcies de cores slidas (barras de navegao, botes, cones, logotipos ou outras imagens com matizes e cores uniformes, por exemplo). Podem ser criados GIFs com fundo transparente; GIFs entrelaados, que entram em foco lentamente medida que uma imagem carregada no navegador; ou GIFs animados, que so vrios GIFs salvos como um nico arquivo. O formato de arquivo JPEG (Joint Photographic Experts Group) a opo mais avanada para imagens fotogrcas ou de tons contnuos, porque os arquivos JPEG podem conter milhes de cores. Esses arquivos tendem a ser maiores do que os GIFs e PNGs. Como a qualidade do arquivo JPEG maior, tambm aumenta o tamanho do arquivo e o tempo de download. Tente equilibrar a qualidade da imagem e o tamanho do arquivo, compactando o arquivo JPEG. O formato de arquivo PNG (Portable Network Group) um substituto livre de patentes ao GIF, que inclui suporte para as imagens que tiverem as cores indexadas, escala de cinza e true-color, alm de suporte ao canal alfa de transparncia. PNG o formato de arquivo original do Macromedia Fireworks. Os arquivos PNG retm todas as informaes sobre camadas, vetores, cores e efeitos originais (por exemplo: aplicao de sombra) e, a qualquer momento, todos os elementos so editveis. Os arquivos devem ter a mesma extenso .png, para que possam ser reconhecidos como PNG pelo Macromedia Dreamweaver.
289
Os GIFs, JPEGs e PNGs podem ser inseridos em documentos do Dreamweaver. Alm da insero de uma imagem na pgina, possvel tambm coloc-la em uma tabela, formulrio ou camada. Durante a incluso das imagens, estas podem ser selecionadas e modicadas diretamente na janela do documento. Por exemplo: o inspetor de propriedades pode ser utilizado para adicionar links a uma imagem, incluir uma borda ao redor de uma imagem, denir o tamanho da imagem, inserir espao ao redor de uma imagem e denir o alinhamento. Para criar imagens interativas (imagens cambiveis, barras de navegao ou mapas de imagens, por exemplo), utilize os comportamentos do Dreamweaver. Para congurar um uxo de trabalho de produo eciente, utilize a caixa de dilogo Preferncias do Dreamweaver para denir um editor de imagens preferido (o Fireworks, por exemplo). A denio de um editor de imagens permite inici-lo e editar uma imagem durante o trabalho no Dreamweaver. Se o Fireworks for escolhido como editor preferido, as edies podem ser feitas nesse programa e, com um clique, a imagem ser automaticamente atualizada no arquivo do Dreamweaver. Para obter mais informaes sobre como utilizar o Fireworks no Dreamweaver, consulte Utilizao do Dreamweaver e do Fireworks juntos na pgina 307. Alm da insero de imagens em uma pgina, possvel denir uma imagem de fundo; consulte Como denir uma imagem ou cor de fundo da pgina na pgina 161. Para sobrepor as imagens, insira-as em camadas; consulte Como utilizar as camadas na pgina 439.
290
Captulo 11
Como inserir uma imagem

Quando uma imagem for inserida em um documento do Dreamweaver, o programa ir gerar automaticamente uma referncia desse arquivo no cdigo-fonte HTML. Para assegurar que essa referncia est correta, o arquivo de imagem deve estar no site. Caso no esteja, o Dreamweaver perguntar se o arquivo deve ser copiado na pasta raiz.
Para inserir uma imagem:
Siga um dos procedimentos abaixo: documento e, em seguida, escolha Inserir > Imagem, ou clique no boto Inserir imagem, na categoria Comuns do painel Objetos.
Coloque o ponto de insero onde a imagem dever aparecer na janela do Coloque o ponto de insero onde a imagem dever aparecer na janela do
documento e, em seguida, pressione as teclas Control, Alt e I (no Windows), ou Command, Option e I (no Macintosh).
Arraste o boto Inserir imagem, do painel Objetos at a localizao na janela do

documento.
Arraste uma imagem do painel Propriedades at a localizao na janela do

documento; em seguida, v para a etapa 3.
Arraste uma imagem da janela do site at a localizao na janela do documento;

em seguida, v para a etapa 3.
Arraste uma imagem da rea de trabalho at a localizao na janela do

documento e, em seguida, v para a etapa 3.
2
Na caixa de dilogo que aparecer, clique em Procurar, para escolher um arquivo, ou digite o caminho do arquivo de imagem. Se voc estiver trabalhando em um documento que no foi salvo, o Dreamweaver ir gerar uma referncia le:// para esse arquivo de imagem. Quando o documento for salvo em algum lugar do site, o Dreamweaver converter a referncia em um caminho relativo a documento.
Dena as propriedades da imagem no inspetor de propriedades. Consulte Como denir as propriedades da imagem na pgina 292.
291
Como definir as propriedades da imagem

Para denir as seguintes propriedades da imagem, selecione uma imagem na janela do documento e, em seguida, escolha Janela > Propriedades, para exibir o inspetor de propriedades. O inspetor exibir inicialmente as propriedades mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades.
Utilize o campo de texto abaixo da imagem em miniatura para denir uma imagem que sirva de referncia, quando voc estiver utilizando um comportamento do Dreamweaver (por exemplo: permuta de imagens) ou uma linguagem de script, como JavaScript ou VBScript.
L e U reservam
espao para uma imagem em uma pgina durante o carregamento desta em um navegador. O Dreamweaver preencher automaticamente esses campos com o tamanho original da imagem. Os valores padro e noidenticados so pixels. Tambm possvel especicar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milmetros) e cm (centmetros), alm de suas combinaes. Por exemplo: 2pol+5mm; o Dreamweaver converter os valores em pixels no cdigo-fonte HTML. Se forem denidos valores para L e U que no correspondem s reais largura e altura da imagem, esta poder no ser exibida corretamente no navegador. Para restaurar os valores originais, clique nos identicadores dos campos. Esses valores podem ser alterados, a m de redimensionar essa instncia da imagem, mas esse procedimento no reduzir o tempo de download, porque o navegador efetuar o download de todos os dados da imagem antes de redimension-la. Para reduzir esse tempo e assegurar que todas as instncias de uma imagem apaream com o mesmo tamanho, utilize um aplicativo de edio de imagens para redimensionlas.
Orig. especica o arquivo de origem da imagem. Clique no cone correspondente pasta, para procurar o arquivo de origem, ou digite o caminho. Para obter informaes sobre a insero de caminhos, consulte Caminhos absolutos na pgina 386. Link especica
um hyperlink para a imagem. Arraste o cone do indicador de arquivos at um arquivo na janela do site ou clique no cone correspondente pasta, para procurar um documento no seu site, ou digite a URL.
Alinhar coloca uma imagem e o texto na mesma linha. Consulte Como alinhar os
elementos na pgina 294.
292
Captulo 11
Alt. especica um texto alternativo que aparecer no lugar da imagem para os navegadores somente de texto ou para aqueles denidos para download manual de imagens. Para os usurios com decincia visual, que utilizam sintetizadores de fala com navegadores somente de texto, o texto falado em voz alta. Em alguns navegadores, esse texto tambm aparecer quando o ponteiro estiver sobre a imagem. Campo de nome do mapa possibilita a criao de mapas de imagens do cliente. Consulte Como criar os mapas de imagens na pgina 296. Espao V e Espao H adicionam
espao, em pixels, acima, abaixo e em ambos os lados da imagem. Espao V adiciona espao nas partes superior e inferior de uma imagem. Espao H adiciona espao nos lados direito e esquerdo de uma imagem.
Destino especica
a moldura ou janela na qual a pgina vinculada dever ser carregada. Esta opo no estar disponvel quando a imagem no estiver vinculada a outro arquivo. Os nomes de todas as molduras no documento atual aparecero na lista Destino. possvel tambm escolher entre os seguintes nomes de destino reservados:
_blank
carrega o arquivo vinculado em uma janela do navegador nova e sem
nome. carrega o arquivo vinculado em um conjunto-pai de molduras ou na janela da moldura que contm o link. Se a moldura que contm o link no estiver aninhada, o arquivo vinculado ser carregado na janela inteira do navegador.
_parent
carrega o arquivo vinculado na mesma moldura ou janela que o link. Esse destino o padro, portanto geralmente no necessrio especic-lo.
_self _top carrega o arquivo vinculado na janela inteira do navegador, removendo todas as molduras.
Orig. baixa especica
a imagem que deve ser carregada antes da imagem principal. Muitos designers utilizam uma verso de 2 bits (em preto e branco) da imagem principal, porque carregada rapidamente, e d uma idia aos visitantes do que eles iro ver.
Borda dene
a largura, em pixels, da borda em volta da imagem. Insira 0 (zero), para que no haja uma borda. A borda pode ser aplicada a imagens que estejam ou no vinculadas. A cor do link denida na caixa de dilogo Propriedades da pgina. Se for denida uma borda para uma imagem sem links, a borda ter a mesma cor do texto no pargrafo no qual a imagem ser inserida.
Editar inicia
o editor de imagens especicado nas preferncias de editores externos e abre a imagem selecionada. Quando voc salvar a imagem e retornar ao Dreamweaver, este programa atualizar a janela do documento com a imagem editada. Consulte Como utilizar um editor de imagens externo na pgina 301. os valores L e U do tamanho original da imagem.
Redefinir o tamanho redene
293
Como alinhar os elementos Utilize o inspetor de propriedades para denir o alinhamento de uma imagem em relao a outros elementos na mesma linha ou pargrafo. O HTML no fornece um modo de colocar texto ao redor dos limites da imagem, como possvel faz-lo com alguns aplicativos de processamento de texto. Uma imagem pode ser alinhada a um texto, a outra imagem, a um plug-in ou a outros elementos na mesma linha. Os botes de alinhamento ( esquerda, direita e No centro) tambm podem ser utilizados para denir o alinhamento horizontal de uma imagem.
Padr. do navegador especica
genericamente um alinhamento na linha de base. O padro pode ser diferente, dependendo do navegador do visitante do site.
Linha de base e Embaixo alinham a parte inferior do objeto selecionado com a linha de base do texto (ou de outro elemento). No alto alinha
uma imagem parte superior do item mais alto (imagem ou texto) a metade do objeto selecionado com a linha de base do texto. o objeto selecionado parte superior do caractere mais alto na no meio absoluto da linha.
na linha.
No meio alinha Alto do texto alinha
linha do texto.
No meio absoluto alinha O mais abaixo alinha esquerda coloca
a parte de baixo absoluta (incluindo as hastes descendentes, como na letra g) com a base do objeto selecionado. o objeto selecionado 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.
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.
294
Captulo 11
Como redimensionar as imagens e os outros elementos Os elementos, como as imagens, plug-ins, lmes Macromedia Shockwave ou Flash, miniaplicativos e controles ActiveX podem ser visualmente redimensionados na janela do documento do Dreamweaver. O redimensionamento visual ajuda a determinar como um elemento afetar o layout em diferentes dimenses. O redimensionamento redene os atributos width e height de um elemento. Os campos L e U, no inspetor de propriedades, exibem a largura e altura do elemento durante o redimensionamento. O tamanho do arquivo do elemento no alterado. Os lmes Macromedia Flash e os outros elementos que se baseiam em vetores so inteiramente redimensionveis e no perdem a qualidade quando a sua escala for modicada. Os elementos dos mapas de bits, como as imagens GIF, JPEG e PNG, podem tornar-se mal denidos ou distorcidos, caso os atributos width e height sejam redenidos. Mantenha a tecla Shift pressionada durante o redimensionamento de um mapa de bits, para manter as mesmas propores. Contudo, recomendamos que esses elementos sejam redimensionados visualmente no Dreamweaver apenas para determinar o layout. Quando tiver sido especicado o tamanho da imagem, edite o arquivo em um aplicativo de edio de imagens. A edio da imagem tambm poder reduzir o seu respectivo tamanho de arquivo e, por conseqncia, o tempo de download.
Para redimensionar um elemento:
Selecione o elemento (uma imagem ou lme Shockwave, por exemplo) na janela do documento. Aparecero as alas de redimensionamento na parte de baixo, no lado direito do elemento e no canto inferior direito. Se as alas de redimensionamento no aparecerem, clique fora do elemento a ser redimensionado e, em seguida, escolha-o novamente ou clique em <img>, no seletor de tags, para selecionar o elemento.
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 de baixo. Para ajustar a largura e altura do elemento simultaneamente, arraste a ala de
seleo do canto.
Pressione a tecla Shift e arraste a ala de seleo do canto para preservar as

propores (entre largura e altura) do elemento enquanto ajusta as suas dimenses.
295
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 inspetor de propriedades, a m de digitar um valor numrico. Para retornar um elemento redimensionado s suas escalas originais, no inspetor de propriedades, exclua os valores nos campos L e U, ou clique no boto Redimensionar o tamanho.
Como criar os 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). Utilize o inspetor de propriedades da imagem para criar e editar gracamente os mapas de imagens do cliente. Os mapas de imagens do cliente armazenam as informaes sobre hyperlinks no documento HTML, mas no em um arquivo de mapa separado, como no caso dos mapas de imagens do servidor. Quando um visitante do site clicar em um ponto ativo na imagem, a URL a ela associada ser enviada diretamente ao servidor. Isso torna os mapas de imagens de clientes mais rpidos que os do servidor, porque o servidor no precisar interpretar onde o usurio clicou. Os mapas de imagens de clientes contam com suporte do Netscape Navigator 2.0 e mais avanado, NCSA Mosaic 2.1 e 3.0, e de 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 cliente e de servidor em um mesmo documento. Contudo, os navegadores que oferecem suporte a ambos os tipos de mapas priorizam os do cliente. Para incluir um mapa de imagens do servidor em um documento, necessrio gravar o cdigo HTML adequado.
Para criar um mapa de imagens do cliente:
1 2
Selecione a imagem. Clique na seta de expanso, no canto inferior direito do inspetor de propriedades, para examinar todas as propriedades. No campo Nome do mapa, digite um nome exclusivo para o mapa de imagens.
Nota: Caso sejam utilizados vrios mapas de imagens no mesmo documento, d um nome exclusivo a cada mapa.
296
Captulo 11
Para denir as reas do mapa de imagens, siga um dos procedimentos abaixo: um ponto ativo circular.
Selecione a ferramenta de crculo e arraste o cursor sobre a imagem para criar Selecione a ferramenta de retngulo e arraste o cursor sobre a imagem para criar
um ponto ativo retangular.
Selecione a ferramenta de polgono e dena um ponto ativo com forma

irregular, clicando uma vez em cada canto. Clique na ferramenta de seta para fechar o formato. Quando um ponto ativo for criado, aparecer um inspetor de propriedades de pontos ativos. Para obter informaes sobre o inspetor de propriedades de pontos ativos, consulte Como denir as propriedades dos pontos ativos na pgina 297.
5
No campo Link do inspetor de propriedades de pontos ativos, clique no cone correspondente pasta, para procurar o arquivo que ser aberto quando o ponto ativo for clicado. Uma alternativa digitar o nome do arquivo. Para denir onde o arquivo vinculado ser aberto, digite o nome da janela, no campo Destino. possvel tambm escolher um nome de moldura no menu pop-up Destino. No campo Alt., digite o texto alternativo que aparecer nos navegadores somente de texto. Alguns navegadores exibem esse texto como uma dica de ferramenta, quando o usurio parar o mouse sobre o ponto ativo.
8 9
Repita as etapas 4 a 7, para denir outros pontos ativos no mapa de imagens. No nal do mapeamento da imagem, clique em uma rea em branco no documento para alterar o inspetor de propriedades.
Como definir as propriedades dos pontos ativos As propriedades listadas abaixo aparecero no inspetor de propriedades quando um ponto ativo for selecionado. especica o nome do mapa de imagens. Crie um nome exclusivo para cada mapa de imagens de um documento.
Mapa
especica o arquivo ou URL a ser exibido quando o usurio clicar no ponto ativo. Se o link for estabelecido a um arquivo no mesmo site, digite um caminho que seja relativo ao documento. Os nomes de arquivos iniciados por le:// no so relativos.
Link Destino especica
a moldura ou janela na qual a pgina vinculada dever ser carregada. A opo Destino no estar disponvel enquanto o ponto ativo selecionado no contiver um link.
297
Os nomes de todas as molduras no documento atual aparecero na lista. Se a moldura especicada no existir quando o documento for aberto em um navegador, a pgina vinculada ser carregada em uma nova janela que tem o nome que voc especicou. possvel tambm escolher entre os seguintes nomes de destino reservados:
_blank
carrega o arquivo vinculado em uma janela do navegador nova e sem
nome. carrega o arquivo vinculado em um conjunto-pai de molduras ou na janela da moldura que contm o link. Se a moldura que contm o link no estiver aninhada, o arquivo vinculado ser carregado na janela inteira do navegador.
_parent
carrega o arquivo vinculado na mesma moldura ou janela que o link. Esse destino o padro, portanto geralmente no necessrio especic-lo.
_self _top carrega o arquivo vinculado na janela inteira do navegador, removendo todas as molduras.
Alt. especica um texto alternativo que aparece no lugar da imagem para os navegadores somente de texto ou para aqueles denidos para download manual de imagens.
Como 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:
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.
298
Captulo 11
Para mover um ponto ativo:
Utilize a ferramenta de indicador de ponto ativo, para selecionar o ponto ativo a ser movido. Siga um dos procedimentos abaixo:
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:
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.
Como criar uma imagem cambivel Uma imagem cambivel aquela que se altera quando o cursor for movido sobre a mesma. Esse tipo de imagem consiste, de fato, em duas imagens: a imagem primria (exibida quando a pgina for carregada pela primeira vez) e a imagem cambivel (que aparecer quando o cursor for deslizado sobre a imagem primria). Ambas as imagens devero ter o mesmo tamanho; caso contrrio, o Dreamweaver redimensionar automaticamente a segunda imagem para que coincida com as propriedades da primeira. As imagens cambiveis so automaticamente denidas para responder ao evento MouseOver. Para obter informaes sobre a denio 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, consulte Permutar a imagem na pgina 503. A barra de navegao uma forma mais complexa de imagem cambivel. Para criar uma barra de navegao, utilize o comando Inserir > Imagens interativas > Barra de navegao; consulte Como inserir uma barra de navegao na pgina 405.
299
Para criar uma imagem cambivel:
Na janela do documento, coloque o ponto de insero no local onde dever aparecer a imagem cambivel. Insira a imagem cambivel, utilizando um dos seguintes mtodos: cambivel.
Na categoria Comuns do painel Objetos, clique no cone de Inserir imagem Na categoria Comuns do painel Objetos, arraste o cone de Inserir imagem
cambivel para o local desejado na janela do documento.
Escolha Inserir > Imagens interativas > Imagem cambivel.

Aparecer a caixa de dilogo Inserir imagem cambivel.
3 4
No campo Nome da imagem, digite um nome para a imagem cambivel. No campo Imagem original, clique em Procurar e selecione a imagem ou digite o caminho da imagem a ser exibida quando a pgina for carregada. No campo Imagem cambivel, clique em Procurar e selecione a imagem ou digite o caminho da imagem a ser exibida quando o cursor for deslizado sobre a imagem original. Para que as imagens sejam pr-carregadas no cache do navegador a m de que sejam carregadas mais rapidamente, selecione a opo Pr-carregar a imagem cambivel. No campo Quando tiver clicado, v para a URL, clique em Procurar e selecione o arquivo, ou digite o caminho do arquivo a ser aberto quando um usurio clicar na imagem cambivel.
Nota: Se no for definido um link para a imagem, o Dreamweaver inserir um link nulo (#) no cdigo-fonte HTML ao qual o comportamento de imagem cambivel estiver anexado. Se o link nulo for removido, a imagem cambivel no funcionar.
Clique em OK, para fechar a caixa de dilogo Inserir imagem cambivel.
Para testar uma imagem cambivel:
1 2
Escolha Arquivo > Visualizar no navegador, ou pressione a tecla F12. No navegador, passe o cursor sobre a imagem original. A exibio alternar para a imagem cambivel.
300
Captulo 11
Como utilizar um editor de imagens externo

O Dreamweaver facilita a criao de pginas HTML e o trabalho em um editor de imagens para editar as suas ilustraes. No Dreamweaver, possvel abrir uma imagem selecionada em um editor de imagens externo; ao retornar para o Dreamweaver, aps salvar o arquivo de imagem, as alteraes feitas nesse arquivo estaro visveis na janela do documento. O Macromedia Fireworks pode ser utilizado como um editor de imagens externo. O Fireworks 3 e Fireworks 4 utilizam as Design Notes para controlar onde o arquivo PNG original ser armazenado no disco rgido local. O Fireworks 2 no utiliza as Design Notes, mas perguntar ao usurio onde ser colocado o arquivo PNG original. O Fireworks 1 procura automaticamente, na pasta que contm o arquivo selecionado, um arquivo PNG com o mesmo nome. Por exemplo: se for selecionada uma imagem cujo arquivo de origem seja images/ myPhoto.gif e a pasta de imagens tambm contiver um arquivo chamado myPhoto.png, o Fireworks abrir o arquivo PNG. Para obter mais informaes sobre como utilizar o Fireworks em conjunto com o Dreamweaver, consulte Utilizao do Dreamweaver e do Fireworks juntos na pgina 307. Caso qualquer outro aplicativo tenha sido escolhido como editor de imagens externo e iniciado a partir do Dreamweaver, o aplicativo abrir a imagem selecionada (images/myPhoto.gif, por exemplo). Utilize o editor de imagens para modicar a imagem, salve as alteraes e, em seguida, exiba a imagem modicada e atualizada no Dreamweaver. Se preferir, abra manualmente o arquivo original a partir do qual o GIF foi produzido (por exemplo: mylogo.png deve ser o arquivo original do Fireworks), faa as alteraes e salve a imagem modicada. O Dreamweaver ainda atualizar a imagem na janela do documento no retorno ao programa. Caso a imagem no aparea quando voc voltar janela do Dreamweaver, selecione a imagem e, em seguida, clique no boto Atualizar, no inspetor de propriedades.
301
Como definir as preferncias do editor de imagens externo A caixa de dilogo Preferncias do Dreamweaver pode ser utilizada para especicar qual editor de imagens ser iniciado para editar imagens com extenses de arquivo especcas. Por exemplo: o Dreamweaver pode ser informado a iniciar o Fireworks, quando o usurio quiser editar um arquivo GIF, e a iniciar um editor de imagens diferente, para a edio de um arquivo JPEG. Pode ser denido mais de um editor de imagens externo para uma extenso de arquivo; em seguida, quando voc estiver pronto para editar a imagem, poder utilizar o menu contextual para escolher qual editor ser iniciado.
Para definir um editor de imagens externo para um tipo especfico de arquivo:
Abra a caixa de dilogo Tipos de arquivos / editores, seguindo um dos procedimentos abaixo:
Escolha Editar > Preferncias e selecione Tipos de arquivos / editores. Escolha Editar > Editar com editor externo e selecione Tipos de arquivos /
editores.
2
Na lista de extenses, selecione o tipo de arquivo para o qual ser denido o editor externo. Clique no boto com o sinal de adio (+), acima da lista de editores. Na caixa de dilogo Selecionar o editor externo, procure o aplicativo a ser iniciado como editor para esse tipo de arquivo.
3 4
302
Captulo 11
Na caixa de dilogo Preferncias, clique em Tornar primrio, se esse editor for o principal para esse tipo de arquivo. Para congurar um editor adicional para esse tipo de arquivo, repita as etapas 3 e 4. O Dreamweaver utiliza automaticamente este editor primrio quando esse tipo de imagem for escolhido para edio. Os outros editores da lista podem ser escolhidos no menu contextual para a imagem na janela do documento.
Para adicionar um novo tipo de arquivo lista de extenses:
Abra a caixa de dilogo Tipos de arquivos / editores, seguindo um dos procedimentos abaixo:
Escolha Editar > Preferncias e selecione Tipos de arquivos / editores. Escolha Editar > Editar com editor externo e selecione Tipos de arquivos /
editores.
2 3 4
Clique no boto com o sinal de adio (+), acima da lista de extenses. Digite a extenso do tipo de imagem a ser editada (JPEG, por exemplo). Para denir um editor externo, clique no boto com o sinal de adio (+), acima da lista de editores. Na caixa de dilogo que aparecer, escolha o aplicativo a ser utilizado para editar esse tipo de imagem. Clique em Tornar primrio, se desejar que este editor seja o primrio para o tipo de imagem.
Para alterar uma preferncia de editor existente:
Nas preferncias de editores externos, clique na extenso de arquivo cujo editor ser alterado. Utilize os botes com o sinal de adio (+) ou de subtrao (), acima da lista de editores, para adicionar ou remover um editor.
Para obter mais informaes sobre as outras opes nas preferncias de editores externos, consulte Como iniciar um editor externo na pgina 326.
303
Como iniciar um editor de imagens externo Escolha Editar > Preferncias > Tipos de arquivos / editores para denir um editor de imagens externo para os tipos de imagens especicados. Aps a seleo do editor, ele poder ser iniciado para editar imagens durante o trabalho no documento do Dreamweaver.
Para iniciar o editor de imagens externo, siga um dos procedimentos abaixo:
Clique duas vezes nas imagens a serem editadas. Clique com o boto direito do mouse (no Windows), ou pressione a tecla
Control e clique (no Macintosh) na imagem a ser editada e, em seguida, escolha Editar com, no menu contextual, para selecionar um editor previamente denido, ou escolha Procurar e escolha um editor.
Selecione a imagem a ser editada e clique em Editar a imagem, no inspetor

de propriedades.
Clique duas vezes no arquivo de imagem, na janela do site, para iniciar o editor
de imagens primrio. Se no for especicado um editor de imagens, o Dreamweaver iniciar o editor padro para o tipo de arquivo.
Nota: Quando uma imagem for aberta na janela do site, os recursos de integrao do Fireworks descritos acima no estaro em vigor e o Fireworks no abrir o arquivo PNG original. Para poder utilizar os recursos de integrao do Fireworks, abra as imagens a partir da janela do documento.
Como 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, o Dreamweaver inserir o cdigo-fonte HTML ao tag area. Trs comportamentos se aplicam especicamente s imagens: Pr-carregar as imagens, Permutar a imagem e Restaurar a imagem permutada. carrega as imagens que no aparecem na pgina imediatamente (como aquelas que sero permutadas com as linhas de tempo, comportamentos, camadas ou JavaScript) no cache do navegador. Este processo evita as demoras causadas pelo download quando as imagens tiverem que ser exibidas. Consulte Pr-carregar as imagens na pgina 495.
Pr-carregar as imagens
troca uma imagem por outra, alterando o atributo SRC do tag Utilize esta ao para criar botes cambiveis e outros efeitos em imagens (inclusive a permuta simultnea de mais de uma imagem). Consulte Permutar a imagem na pgina 503.
Permutar a imagem
img.
304
Captulo 11
Restaurar a imagem permutada restaura o ltimo conjunto de imagens permutadas aos seus arquivos de origem anteriores. Esta ao ser adicionada automaticamente, sempre que voc anexar a ao Permutar a imagem a um objeto, como padro; no ser necessrio selecion-la manualmente. Consulte Restaurar a imagem permutada na pgina 504.
Os comportamentos tambm podem ser utilizados para criar sistemas de navegao mais sosticados, como uma barra de navegao ou um menu de salto. Consulte Como criar as barras de navegao na pgina 404 e Como criar menus de salto na pgina 401.
305
306
Captulo 11
12
CAPTULO 12
Utilizao do Dreamweaver e do Fireworks juntos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Recursos exclusivos de integrao tornam fcil trabalhar em arquivos no Macromedia Dreamweaver 4 e no Macromedia Fireworks 4 de maneira permutvel. O Dreamweaver e o Fireworks reconhecem e compartilham muitas das edies de arquivos, incluindo alteraes e links, mapas de imagens, fatias de tabelas e mais. Juntas, as duas aplicaes fornecem um uxo de trabalho aerodinmico para edio, otimizao e colocao de arquivos grcos da Web em pginas HTML. Se voc quiser modicar imagens e tabelas do Fireworks em um documento do Dreamweaver, voc pode iniciar o Fireworks para fazer edies e, em seguida, retornar ao documento atualizado no Dreamweaver. Se voc quiser fazer edies rpidas de otimizao para imagens e animaes colocadas no Fireworks, voc pode iniciar a caixa de dilogo otimizao do Fireworks e informar as conguraes atualizadas. Em ambos os casos, as atualizaes so feitas aos arquivos colocados no Dreamweaver, assim como aos arquivos de origem do Fireworks, se os arquivos fonte tiverem sido iniciados.
Obteno de arquivos do Fireworks no Dreamweaver

Voc pode colocar imagens e cdigo HTML do Fireworks no Dreamweaver de vrias maneiras diferentes. No Dreamweaver, voc pode usar os recursos de insero para colocar arquivos do Fireworks em documentos. A partir do Fireworks, voc pode exportar os arquivos diretamente para a pasta de um site do Dreamweaver, ou voc pode copiar e colar cdigo HTML em um documento Dreamweaver.
307
Colocao de imagens do Fireworks no Dreamweaver Voc pode colocar imagens GIF, JPEG, ou PNG geradas pelo Fireworks diretamente em um documento Dreamweaver.
Para inserir uma imagem Fireworks em um documento Dreamweaver:
1 2
Posicione o ponto de insero onde deseja que a imagem aparea na janela do documento Dreamweaver. Siga uma das seguintes opes:
Selecione Inserir > Imagem. Clique no boto Inserir imagem na categoria Comum do painel Objetos.
3
Navegue para o arquivo Fireworks desejado e clique em Abrir. Se o arquivo do Fireworks no estiver no site atual do Dreamweaver, uma mensagem exibida, perguntando se deseja copiar o arquivo para a pasta raiz.
Insero de cdigo HTML do Fireworks no Dreamweaver O Dreamweaver permite inserir cdigo HTML gerado pelo Fireworks, completo com imagens associadas, fatias e JavaScript, em um documento. Este recurso de insero torna fcil adicionar tabelas ou mapas de imagens criados no Fireworks em um documento Dreamweaver.
Para inserir HTML do Fireworks em um documento Dreamweaver:
1 2 3
No Dreamweaver, salve o documento em um site denido. Posicione o ponto de insero no documento onde deseja que o cdigo HTML inserido comece. Siga uma das seguintes opes:
Selecione Inserir > Imagens interativas > HTML do Fireworks. Clique no boto HTML do Fireworks na categoria Comum do painel Objetos.
4 5
Na caixa de dilogo que exibida, clique em Procurar para selecionar o arquivo HTML do Fireworks desejado. Selecione a opo Excluir arquivo aps a insero para mover o arquivo HTML para a Lixeira (Windows) ou Lixeira (Macintosh) quando a operao tiver terminado. Use esta opo se no precisar mais do arquivo HTML do Fireworks aps inseri-lo. Esta opo no afeta o arquivo PNG de origem associado ao arquivo HTML.
Nota: Se o arquivo HTML estiver em uma unidade de rede, ele permanentemente excludo, ao invs de movido para a Lixeira.
Clique em OK para inserir o cdigo HTML, junto com suas imagens, fatias e JavaScript associados, no documento Dreamweaver.
308
Captulo 12
Como copiar e colar HTML do Fireworks no Dreamweaver Uma maneira rpida de colocar imagens e tabelas geradas pelo Fireworks no Dreamweaver envolve copiar e colar o cdigo HTML do Fireworks diretamente no documento Dreamweaver.
Para copiar e colar o HTML do Fireworks no Dreamweaver:
1 2
No Fireworks, selecione Editar > Copiar cdigo HTML. Siga a orientao do assistente durante a congurao da exportao do seu cdigo HTML e das imagens. Quando perguntado, especique a pasta do site do Dreamweaver como destino para as imagens exportadas. O assistente exporta as imagens para o destino especicado e copia o cdigo HTML para a rea de transferncia.
No Dreamweaver, posicione o ponto de insero no documento onde deseja colar o cdigo HTML e selecione Editar > Colar. Todo o cdigo HTML e JavaScript associado aos arquivos Fireworks exportados copiado para o documento Dreamweaver e todos os links para imagens so atualizados.
Para exportar e colar HTML do Fireworks no Dreamweaver:
1 2 3 4 5
No Fireworks, selecione Arquivo > Exportar. Na caixa de dilogo Exportar, especique a pasta do site do Dreamweaver como destino para as imagens exportadas. Selecione HTML e imagens no menu pop-up Salvar como tipo. Selecione Copiar para rea de transferncia a partir do menu pop-up e clique em Salvar. No Dreamweaver, posicione o ponto de insero no documento onde deseja colar o cdigo HTML e selecione Editar > Colar. Todo o cdigo HTML e JavaScript associado aos arquivos Fireworks exportados copiado para o documento Dreamweaver e todos os links para imagens so atualizados.
Utilizao do Dreamweaver e do Fireworks juntos
309
Exportao de arquivos do Fireworks para o Dreamweaver O comando Arquivo > Exportar no Fireworks permite exportar e salvar imagens otimizadas e arquivos HTML para um local dentro da pasta do site Dreamweaver desejado. Voc pode ento abrir os arquivos para edio no Dreamweaver. Alternativamente, voc pode exportar o arquivo Fireworks como camadas Folha de Estilos em Cascata (CSS) ou itens de biblioteca do Dreamweaver. Os itens de biblioteca do Dreamweaver simplicam o processo de edio e atualizao de um componente freqentemente usado no site da Web como, por exemplo, uma srie de links no rodap ou uma barra de navegao. Um item de biblioteca uma parte de um arquivo HTML localizado em uma pasta de nome Biblioteca na raiz do seu site. Voc pode arrastar cpias de um item de biblioteca para qualquer pgina no seu site da Web.
Para exportar imagens e HTML do Fireworks para o Dreamweaver:
1 2 3 4 5
No Fireworks, selecione Arquivo > Exportar. Selecione HTML e imagens no menu pop-up Salvar como tipo. Selecione Exportar arquivo HTML no menu pop-up HTML. Especique uma pasta de destino dentro da pasta do site do Dreamweaver. Clique em Salvar para exportar os arquivos.
Para exportar arquivos Fireworks como camadas CSS:
1 2 3 4
No Fireworks, selecione Arquivo > Exportar. Selecione Camadas CSS (.htm) no menu pop-up Salvar como tipo. Especique uma pasta de destino dentro da pasta do site do Dreamweaver. Clique em Salvar para exportar os arquivos.
310
Captulo 12
Para exportar um arquivo do Fireworks como um item de biblioteca do Dreamweaver:
1 2
No Fireworks, selecione Arquivo > Exportar. Selecione Biblioteca Dreamweaver (.lbi) no menu pop-up Salvar como tipo.
Nomeie o arquivo e especique uma pasta de destino chamada Biblioteca na raiz do site do Dreamweaver. Se necessrio, o Fireworks solicitar a criao desta pasta. Clique em Salvar para exportar o arquivo.
311
Execuo do Fireworks a partir do Dreamweaver

Voc pode iniciar o Fireworks diretamente a partir de um documento Dreamweaver selecionando uma imagem Fireworks, fatia de tabela ou tabela posicionada para edio ou otimizao. Para que estes recursos de iniciar-e-editar funcionem corretamente, voc deve designar o Fireworks como o editor de imagem externo primrio no Dreamweaver. Designao do Fireworks como editor externo de imagens primrio do Dreamweaver O Dreamweaver 4 fornece preferncias para iniciar automaticamente aplicaes especcas para editar tipos especcos de arquivo. Para utilizar os recursos iniciare-editar do Fireworks, certique-se de que o Fireworks 4 est denido como editor primrio para arquivos GIF, JPEG e PNG no Dreamweaver. Embora voc possa usar verses anteriores do Fireworks como editores externos de imagens, estas verses oferecem capacidade limitada de iniciar-e-editar. O Fireworks 3 no suporta completamente a execuo e edio de tabelas posicionadas e fatias em tabelas, enquanto o Fireworks 2 no suporta a execuo e edio de arquivos PNG de origem para imagens colocadas.
Para definir o Fireworks 4 como o editor externo de imagens primrio no Dreamweaver 4:
No Dreamweaver, selecione Editar > Preferncias e selecione Tipos de arquivos/ editores. Na lista Extenses, selecione uma extenso de arquivo da Web (.gif, .jpg, ou .png). Na lista editores, selecione Fireworks 4 e clique em Tornar primrio.
Repita os passos 2 e 3 para denir o Fireworks 4 como o editor primrio para outras extenses de arquivos da Web.
312
Captulo 12
Sobre Notas de Design e arquivos fonte Sempre que voc exporta um arquivo do Fireworks a partir de uma origem PNG salva para o site do Dreamweaver, o Fireworks escreve uma Nota de Design que contm informao sobre o arquivo. Por exemplo, quando voc exporta uma tabela do Fireworks, o Fireworks escreve uma Nota de Design para cada arquivo de fatia exportado e para o arquivo HTML que rene as fatias da tabela. Estas Notas de Design contm referncias para o arquivo PNG de origem que gerou os arquivos exportados. Quando voc inicia e edita uma imagem do Fireworks a partir do Dreamweaver, o Dreamweaver usa a Nota de Design para localizar um arquivo PNG de origem para aquele arquivo. Para obter melhores resultados, sempre salve o arquivo PNG de origem do Fireworks e os arquivos exportados em um site do Dreamweaver. Isto garante que qualquer usurio que compartilhe o site poder localizar o PNG de origem ao iniciar o Fireworks a partir do Dreamweaver. Especificao de preferncias iniciar-e-editar para os arquivos fonte do Fireworks As preferncias de iniciar-e-editar do Fireworks permitem especicar como manipular arquivos PNG de origem ao iniciar arquivos Fireworks a partir de outra aplicao, como o Macromedia Director ou o Dreamweaver. O Dreamweaver reconhece as preferncias iniciar-e-editar do Fireworks apenas em certos casos em que voc inicia e otimiza uma imagem do Fireworks. Especicamente, voc deve iniciar e otimizar uma imagem que no seja parte de uma tabela do Fireworks e que no contenha um caminho correto Nota Design para um arquivo PNG de origem. Em todos os outros casos, inclusive todas os casos de iniciar-e-editar de imagens do Fireworks, o Dreamweaver automaticamente executa o arquivo PNG de origem, pedindo-lhe para localizar o arquivo de origem se este no puder ser encontrado.
313
Para especificar preferncias iniciar-e-editar para o Fireworks:
No Fireworks, selecione Editar > Preferncias e clique na guia Iniciar e editar (Windows) ou selecione Executar e editar a partir do menu pop-up (Macintosh). Especique as opes de preferncia a serem usadas ao editar ou otimizar imagens do Fireworks colocadas em uma aplicao externa: executa automaticamente o arquivo PNG do Fireworks que est denido na Nota de Design como a origem para a imagem colocada. As atualizaes so feitas tanto para o PNG de origem quanto para sua imagem correspondente.
Usar sempre o PNG de origem Nunca usar o PNG de origem executa automaticamente a imagem colocada do Fireworks, independente da existncia de um arquivo PNG de origem. As atualizaes so feitas apenas na imagem colocada. Perguntar quando iniciar
permite especicar toda vez se deseja ou no iniciar o arquivo PNG de origem. Quando voc edita ou otimiza uma imagem colocada, o Fireworks exibe uma mensagem perguntando se deseja tomar uma deciso iniciar-e-editar. Voc tambm pode especicar preferncias globais de iniciar-eeditar a partir desta mensagem.
Edio de arquivos do Fireworks colocados no Dreamweaver

A integrao iniciar-e-editar permite usar o Fireworks para editar imagens e tabelas geradas pelo Fireworks colocadas em um documento Dreamweaver. O Dreamweaver inicia automaticamente o Fireworks, permitindo fazer as edies desejadas na imagem. As atualizaes feitas no Fireworks so automaticamente aplicadas imagem colocada no Dreamweaver. O Fireworks reconhece e preserva muitas edies feitas ao documento no Dreamweaver, incluindo links alterados, mapas de imagens editados e texto editado em fatias de texto. O Inspetor de propriedades no Dreamweaver ajuda a identicar imagens, fatias de tabelas e tabelas geradas pelo Fireworks em um documento.
314
Captulo 12
Edio de imagens do Fireworks Voc pode iniciar o Fireworks para editar imagens individuais colocadas em um documento Dreamweaver.
Para iniciar e editar uma imagem do Fireworks colocada no Dreamweaver:
No Dreamweaver, selecione Janela > Propriedades para abrir o Inspetor de propriedades se necessrio. Siga uma das seguintes opes: como uma imagem do Fireworks e exibe o nome do arquivo PNG de origem conhecido para a imagem.) Em seguida clique em Editar no Inspetor de propriedades.
Selecione a imagem desejada. O Inspetor de propriedades identica a seleo
Mantenha pressionada a tecla Control (Windows) ou Command (Macintosh) e

clique duas vezes na imagem que deseja editar.
Clique com o boto direito do mouse (Windows) ou clique com Control

(Macintosh) na imagem desejada e selecione Editar com Fireworks 4 no menu de contexto. O Dreamweaver inicia o Fireworks, se este ainda no estiver aberto.
3
Se perguntado, especique se deseja iniciar um arquivo de origem do Fireworks para a imagem colocada.
315
No Fireworks, edite a imagem. A janela do documento indica que voc est modicando uma imagem a partir do Dreamweaver. O Dreamweaver reconhece e preserva todas as edies aplicadas imagem no Fireworks. Quando tiver terminado de fazer as edies, clique em Concludo na janela do documento. Clicar em Concludo exporta a imagem utilizando as conguraes atuais de otimizao para o arquivo PNG de origem, atualiza o GIF ou JPEG usado pelo Dreamweaver e salva o arquivo de origem PNG se tiver sido selecionado um arquivo de origem.
Nota: Quando voc abre uma imagem a partir da janela do site Dreamweaver, os recursos de integrao do Fireworks descritos acima no esto ativos; o Fireworks no abre o arquivo PNG original. Para usar os recursos de integrao com o Fireworks, abra as imagens a partir da janela do documento Dreamweaver.
Edio de tabelas do Fireworks Quando voc inicia e edita uma fatia de imagem que parte de uma tabela colocada do Fireworks, o Dreamweaver automaticamente inicia o arquivo PNG de origem para toda a tabela.
Para iniciar e editar uma tabela do Fireworks colocada no Dreamweaver:
1 2
No Dreamweaver, selecione Janela > Propriedades para abrir o Inspetor de propriedades se necessrio. Siga uma das seguintes opes: Clique dentro da tabela e clique na tag TABLE na barra de status para selecionar toda a tabela. O Inspetor de propriedades identica a seleo como uma tabela do Fireworks e exibe o nome do arquivo PNG de origem conhecido para a tabela.) Em seguida clique em Editar no Inspetor de propriedades. Clique no canto superior esquerdo da tabela para selecion-la e, em seguida, clique em Editar no Inspetor de propriedades. Selecione a fatia de tabela desejada e clique em editar no Inspetor de propriedades. Mantenha pressionada a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes na imagem que deseja editar. Clique com o boto direito do mouse (Windows) ou clique com Control (Macintosh) na tabela desejada e selecione Editar com Fireworks 4 no menu de contexto. O Dreamweaver inicia o Fireworks, se este ainda no estiver aberto. O arquivo de origem PNG para toda a tabela aparece na janela do documento.
316
Captulo 12
No Fireworks, edite a imagem da tabela. O Dreamweaver reconhece e preserva todas as edies aplicadas imagem no Fireworks. Quando tiver terminado de fazer as edies, clique em Concludo na janela do documento. Clicar em Concludo exporta o HTML e os arquivos de fatia da imagem para a tabela utilizando as conguraes atuais de otimizao, atualiza a tabela colocada no Dreamweaver e salva o arquivo de origem PNG. O Fireworks exporta e substitui apenas o HTML e os arquivos de fatia de imagem necessrios para atualizar a tabela no Dreamweaver.
Otimizao de imagens e animaes do Fireworks colocadas no Dreamweaver

Voc pode iniciar o Fireworks a partir do Dreamweaver para fazer alteraes rpidas de exportao, como fazer novo exemplo ou alterar o tipo do arquivo, para imagens e animaes colocadas do Fireworks. O Fireworks permite fazer alteraes nas conguraes de otimizao, nas conguraes de animao e no tamanho e rea da imagem exportada.
Para alterar as configuraes de otimizao para uma imagem do Fireworks colocada no Dreamweaver:
No Dreamweaver, selecione a imagem desejada e selecione Comandos > Otimizar a imagem no Fireworks. Se perguntado, especique se deseja iniciar um arquivo de origem do Fireworks para a imagem colocada.
317
No Fireworks, faa as edies desejadas na caixa de dilogo otimizao:
Para editar as conguraes de otimizao, clique na guia Opes. Para obter

mais informaes, consulte Utilizao Fireworks.
Para editar o tamanho e rea da imagem exportada, clique na guia Arquivo.

Para obter mais informaes, consulte Redimensionamento de arquivos colocados do Fireworks na pgina 319.
Para editar conguraes de animao para a imagem, clique na guia

Animao. Para obter mais informaes, consulte Edio de animaes colocadas no Fireworks na pgina 320.
4
Quando terminar de editar a imagem, clique em Atualizar. Clicar em Atualizar exporta a imagem utilizando as novas conguraes de otimizao, atualiza o GIF ou JPEG colocado no Dreamweaver e salva o arquivo PNG de origem se tiver sido selecionado um arquivo de origem. Se voc alterou o formato da imagem, o vericador de links do Dreamweaver solicita a atualizao das referncias para a imagem. Por exemplo, se voc alterou o formato de uma imagem chamada minha_imagem de GIF para JPEG, clicar em OK neste aviso altera todas as referncias para minha_imagem.gif no seu site para minha_imagem.jpg.
318
Captulo 12
Redimensionamento de arquivos colocados do Fireworks Ao iniciar e otimizar uma imagem do Fireworks a partir do Dreamweaver, voc pode redimensionar a imagem e selecionar uma rea especca da imagem a ser exportada.
Para especificar as dimenses da imagem exportada:
1 2
No Fireworks, na caixa de dilogo otimizao, clique na guia Arquivo. Para alterar a escala de uma imagem quando ela exportada, especique uma porcentagem de escala ou digite a largura e a altura desejadas em pixels. Selecione Limitar para colocar em escala a largura e a altura proporcionalmente.
Para exportar uma rea selecionada da imagem, selecione a opo rea de exportao e especique a rea de exportao: circunde a rea de exportao desejada. (Arraste dentro da visualizao para mover reas ocultas na exibio.)
Arraste a borda pontilhada que aparece em volta da visualizao at que ela
Digite as coordenadas de pixel para os limites da rea de exportao.
319
Edio de animaes colocadas no Fireworks Se estiver iniciando e otimizando uma animao colocada do Fireworks, voc tambm pode editar as conguraes da animao. As opes de animao na caixa de dilogo otimizao so similares quelas disponveis no painel Molduras do Fireworks.
Para editar uma imagem animada:
1 2
No Fireworks, na caixa de dilogo otimizao, clique na guia Animao. Use as seguintes tcnicas para visualizar molduras de animao a qualquer momento: esquerdo da caixa de dilogo, ou use os controles de moldura na rea inferior direita da caixa de dilogo.
Para exibir uma nica moldura, selecione a moldura desejada na lista do lado Para exibir a animao, clique no controle Reproduzir/Parar na rea inferior
direita da caixa de dilogo.
3
Faa as edies na animao: desejada na lista e escolha uma opo no menu pop-up (indicado pelo cone de lixeira).
Para especicar o mtodo de eliminao da moldura, selecione a moldura Para denir a exibio, selecione a moldura desejada na lista e digite o tempo de
retardo em centsimos de segundo.
Para congurar a animao para reproduzir repetidamente, clique no boto

Ciclos e selecione o nmero desejado de repeties a partir do menu pop-up.
Selecione a opo Cortar automtico para cortar cada moldura como uma rea
retangular, de modo que apenas a rea de imagem que difere entre as molduras seja exportada. Selecionar esta opo reduz o tamanho do arquivo.
Selecione a opo Diferena automtica para exportar apenas os pixels que se

alteram entre molduras. Selecionar esta opo reduz o tamanho do arquivo.
320
Captulo 12
Atualizao do HTML do Fireworks colocado no Dreamweaver

O comando Arquivo > Atualizar HTML no Fireworks fornece uma alternativa para a tcnica iniciar-e-editar para a atualizao de arquivos do Fireworks colocados no Dreamweaver. Com Atualizar HTML, voc pode editar uma imagem PNG de origem no Fireworks e, em seguida, automaticamente atualizar todo o cdigo HTML exportado e os arquivos de imagem colocados em um documento do Dreamweaver. Este comando permite atualizar arquivos do Dreamweaver mesmo quando o Dreamweaver no est sendo executado.
Para atualizar o HTML do Fireworks no Dreamweaver:
1 2
No Fireworks, selecione Arquivo > Atualizar HTML. Navegue para o arquivo Dreamweaver que contm o HTML que deseja atualizar e clique em Abrir. Navegue at a pasta de destino onde deseja colocar os arquivos de imagens atualizados e clique em Selecionar. O Fireworks atualiza o cdigo HTML e JavaScript no documento Dreamweaver. O Fireworks tambm exporta as imagens associadas com o HTML e coloca as imagens na pasta de destino especicada. Se o Fireworks no conseguir encontrar o HTML correspondente para atualizar, voc ter a opo de inserir o novo HTML no documento Dreamweaver. O Fireworks coloca a seo JavaScript do novo cdigo no incio do documento e coloca a tabela HTML ou link para a imagem no nal.
Criao de lbuns de fotografias na Web

O comando Criar lbum de fotograas na Web no Dreamweaver permite gerar automaticamente um site da Web que exibe um lbum de imagens de uma dada pasta. Este comando usa JavaScript para chamar o Fireworks, que cria uma miniatura e uma imagem de tamanho maior para cada uma das imagens da pasta. O Dreamweaver ento cria uma pgina da Web que contm todas as miniaturas e links para as imagens maiores. Para usar Criar lbum de fotograas na Web, voc deve ter tanto o Dreamweaver quanto o Fireworks instalados no seu sistema. Antes de comear, coloque todas as imagens para seu lbum de fotograas em uma nica pasta. (A pasta no precisa estar em um site.) Alm disso, certique-se de que os nomes de arquivo de imagem terminem em extenses reconhecidas pelo comando Criar lbum de fotograas na Web (.gif, .jpg, .jpeg, .png, .psd, .tif, ou .tiff ).As imagens com extenso de arquivo no reconhecidas no so includas no lbum de fotograas.
321
Para criar um lbum de fotografias na Web:
1 2
No Dreamweaver, selecione Comandos > Criar lbum de fotograas na Web. No campo de texto Ttulo do lbum de fotograas, digite um ttulo. O ttulo ser exibido em um retngulo cinza no topo da pgina que contm as miniaturas. Se desejado, voc pode digitar at duas linhas de texto adicional para aparecer diretamente abaixo do ttulo, nos campos de texto Informaes do subcabealho e Outras informaes.
Selecione a pasta que contm as imagens de origem clicando no boto Procurar prximo ao campo de texto Pasta das imagens de origem. Em seguida selecione (ou crie) uma pasta de destino na qual colocar as imagens e arquivos HTML exportados clicando no boto Procurar prximo ao campo de texto Pasta de destino. A pasta de destino no deve j conter um lbum de fotograas; se contiver, e se alguma das imagens novas tiver o mesmo nome da imagem usada anteriormente, voc pode sobrescrever os arquivos de imagem e miniaturas existentes.
Especique as opes de exibio para as imagens miniatura: Tamanho da miniatura. As imagens so postas em escala proporcionalmente para criar miniaturas que caibam em um quadrado que tenha as dimenses indicadas de pixels.
Selecione um tamanho para as imagens miniatura a partir do menu pop-up
Para exibir o nome do arquivo de cada imagem original abaixo da miniatura

correspondente, selecione Mostrar os nomes dos arquivos.
Digite o nmero de colunas para a tabela que exibe as miniaturas.

5
Selecione um formato para as imagens miniatura a partir do menu pop-up Formato da miniatura:
GIF WebSnap 128 cria miniaturas GIF que usam uma paleta adaptativa da Web de at 128 cores.
cria miniaturas GIF que usam uma paleta adaptativa da Web de at 256 cores.
GIF WebSnap 256 JPEG - Melhor qualidade cria miniaturas JPEG com qualidade relativamente maior e tamanhos de arquivo maiores. JPEG - Arquivo menor
cria miniaturas JPEG com qualidade relativamente menor e tamanhos de arquivo menores.
322
Captulo 12
Selecione um formato para imagens de tamanho maior a partir do menu popup Formato da fotograa. Uma imagem de tamanho maior do formato especicado criada para cada uma das imagens originais. Voc pode especicar um formato para as imagens de tamanho maior diferente do formato especicado para as miniaturas.
Nota: O comando Criar lbum de fotografias na Web no permite usar os arquivos de imagem originais como as imagens de tamanho maior, porque os formatos originais de imagem diferentes de GIF e JPEG podem no ser exibidos adequadamente em todos os navegadores. Note que se as imagens originais forem arquivos JPEG, as imagens de tamanho maior geradas podem ter tamanho de arquivo maior ou menor qualidade que os arquivos originais.
Selecione uma Porcentagem de escala para as imagens de tamanho maior. Denir Escala como 100% cria imagens de tamanho maior do mesmo tamanho que as originais. Note que a porcentagem de escala aplicada a todas as imagens; se as imagens originais no forem todas do mesmo tamanho, coloc-las em escala pela mesma porcentagem pode no produzir os resultados desejados.
Selecione criar pgina de navegao para cada fotograa para criar uma pgina da Web individual para cada imagem de origem, contendo links de navegao rotulados como Voltar, Incio e Prximo. Se voc selecionar esta opo, as miniaturas so vinculadas s pginas de navegao. Se voc no selecionar esta opo, as miniaturas so vinculadas diretamente s imagens de tamanho maior.
Clique em OK para criar os arquivos HTML e de imagem para o lbum de fotograas da Web. O Fireworks inicia (se j no estiver sendo executado) e cria as miniaturas e as imagens de tamanho maior. Isso pode levar vrios minutos se voc tiver includo um nmero grande de arquivos e imagem. Quando o processamento estiver completo, o Dreamweaver ca novamente ativo e cria a pgina que contm as miniaturas.
323
10
Quando for exibido um dilogo que diz lbum criado, clique em OK. Voc pode ter que esperar alguns segundos para que a pgina de lbum de fotograas aparea. As miniaturas so exibidas em ordem alfabtica por nome de arquivo.
Nota: Clicar no boto Cancelar na caixa de dilogo do Dreamweaver aps o processamento ter comeado no interrompe o processo de criao do lbum de fotografias; meramente faz com que o Dreamweaver no exiba a pgina principal do lbum de fotografias.
324
Captulo 12
13
CAPTULO 13
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como inserir mdia
O Macromedia Dreamweaver permite adicionar som ou lmes aos sites da Web de maneira rpida e fcil. possvel incorporar ou editar os arquivos e objetos multimdia, como, por exemplo, miniaplicativos Java, lmes Quicktime, Flash e Shockwave, alm de arquivos de udio MP3. Tambm possvel anexar Design Notes a estes objetos. Agora possvel inserir objetos de boto e texto Flash dentro do prprio Dreamweaver.
Como inserir objetos de mdia

possvel inserir um miniaplicativo Java, um lme QuickTime ou Shockwave, lme ou objeto Flash, controle ActiveX ou outros objetos de udio ou vdeo em uma pgina.
Para inserir um objeto de mdia em uma pgina, siga um dos procedimentos abaixo:
Posicione o ponto de insero no local onde deseja inserir o objeto e, em

seguida, clique no boto apropriado, no painel Objetos. Os objetos Shockwave, ActiveX e Flash tm botes denidos. Utilize o boto plugin do Netscape Navigator, para inserir lmes e arquivos de adio QuickTime. Para obter mais informaes, consulte Como inserir o contedo de plug-ins do Netscape Navigator na pgina 341.
Arraste o boto apropriado, do painel Objetos at o local onde deseja que o

objeto aparea na janela do documento.
Coloque o ponto de insero na janela do documento no local onde deseja

inserir o objeto e, em seguida, escolha o objeto apropriado nos submenus Inserir > Mdia, ou Inserir > Imagens interativas.
325
Na maioria dos casos, aparecer uma caixa de dilogo, que permite escolher um arquivo de origem e especicar certos parmetros do objeto de mdia.
Sugesto: Para evitar que certas caixas de dilogo apaream, escolha Editar > Preferncias > Geral e cancele a seleo da opo 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), ou Option (no Macintosh), enquanto estiver inserindo o objeto. 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.
Cada boto deste painel insere o cdigo-fonte HTML necessrio ao aparecimento do objeto ou alocador de espao na pgina. Para especicar o arquivo de origem, denir as dimenses, outros parmetros e atributos, utilize o inspetor de propriedades correspondente a cada objeto.
Como iniciar um editor externo

possvel clicar duas vezes na maioria dos arquivos na janela do site para edit-los diretamente. Se o arquivo for um arquivo HTML, ele ser aberto no Dreamweaver. Se ele for de outro tipo, como um arquivo de imagem, ele ser aberto em um editor externo apropriado, como o Macromedia Fireworks. Cada tipo de arquivo com que o Dreamweaver no lida diretamente pode ser associado a um ou mais editores externos do seu sistema. O editor que for iniciado quando voc clicar duas vezes no arquivo na janela do site denominado editor primrio. possvel denir qual editor ser associado a que tipo de arquivo nas preferncias dos tipos de arquivos / editores. Se houver mais de um editor associado ao tipo de arquivo, ser possvel iniciar um editor secundrio para um determinado arquivo: clique com o boto direito do mouse (no Windows) ou, mantendo a tecla Control pressionada (no Macintosh), clique no nome do arquivo na janela do site e escolha um editor no submenu Abrir com, do menu contextual. Na maioria das vezes, o editor primrio o mesmo aplicativo que seria iniciado se voc clicasse no cone correspondente ao arquivo na rea de trabalho. Para especicar explicitamente os editores externos que devero ser iniciados para um determinado tipo de arquivo, escolha Editar > Preferncias e, na lista de categorias, selecione Tipos de arquivos / editores. As extenses dos nomes de arquivos, como .gif, .wav e .mpg, encontram-se listadas esquerda, abaixo de Extenses. Os editores associados extenso selecionada encontram-se listados direita, abaixo de Editores. Tambm possvel procurar um editor externo para editar o arquivo. Clique com o boto direito do mouse (no Windows) ou, mantendo a tecla Control pressionada (no Macintosh), clique no arquivo na visualizao do projeto da janela do documento e escolha Editar com > Procurar, ou selecione o arquivo e escolha > Editar > Editar com editor externo.
326
Captulo 13
Para adicionar um tipo de arquivo lista de extenses nas preferncias dos tipos de arquivos / editores:
1 2
Clique no boto de adio (+), situado acima da lista de extenses. Digite a extenso do tipo de arquivo (incluindo o ponto no incio da extenso), ou diversas extenses relacionadas, separadas por espaos. Por exemplo: possvel digitar .png .jpg.
Para adicionar um editor a um determinado tipo de arquivo:
1 2 3
Selecione a extenso do tipo de arquivo na lista de extenses. Clique no boto de adio (+), situado acima da lista de editores. Na caixa de dilogo que aparecer, escolha o aplicativo a ser adicionado lista de editores. Por exemplo, escolha o cone do aplicativo Excel, para adicion-lo sua lista de editores.
Para remover um tipo de arquivo da lista:
Selecione o tipo de arquivo na lista de extenses.

Nota: No possvel desfazer a ao depois de remover um tipo de arquivo, portanto certifique-se que deseja remov-lo.
Clique no boto de subtrao (), situado acima da lista de extenses.
Para tornar um editor o editor primrio de um tipo de arquivo:
1 2 3
Selecione o tipo de arquivo. Selecione o editor (ou adicione-o, se j no estiver na lista). Clique no boto Tornar primrio.
Para dissociar um editor de um tipo de arquivo:
1 2 3
Selecione o tipo de arquivo na lista de extenses. Selecione o editor na lista de editores. Clique no boto de subtrao (), situado acima da lista de editores.
Como inserir mdia
327
Como utilizar as Design Notes com objetos de mdia

Do mesmo modo que faria com outros objetos no Dreamweaver, voc poder adicionar Design Notes a um objeto de mdia.
Para adicionar Design Notes a um objeto de mdia:
Clique com o boto direito do mouse no objeto (no Windows), ou pressione a tecla Control e clique no objeto (no Macintosh) na janela do documento.
Nota: necessrio definir o site antes de adicionar Design Notes a qualquer objeto. Consulte Sobre as Design Notes na pgina 142.
2 3
No menu contextual, escolha Design Notes. Digite as informaes que deseja na Design Note.
Tambm possvel adicionar uma Design Note a um objeto de mdia na janela do site, ao selecionar o arquivo, exibir o menu contextual e selecionar as Design Notes neste menu. Para obter mais detalhes, consulte Sobre as Design Notes na pgina 142.
Sobre o contedo Flash

A tecnologia do Macromedia Flash constitui a soluo mais eciente para a produo de grcos e animaes com base em vetores. O Flash Player est disponvel tanto como um plug-in do Netscape Navigator quanto um controle ActiveX para o Internet Explorer no PC, tendo sido includo nas verses mais recentes do Netscape Navigator, Microsoft Windows e America Online. Antes de utilizar os comandos Flash disponveis no Dreamweaver, revise os trs tipos diferentes de arquivos Flash.
O arquivo Flash (.fla)
uma arquivo-fonte para qualquer projeto e criado no programa de mesmo nome. Este tipo de arquivo pode ser aberto apenas no Flash, no no Dreamweaver ou em navegadores. possvel abrir o arquivo Flash no Flash e, subseqentemente, export-lo como um arquivo SWF ou SWT para ser utilizado nos navegadores. Para obter mais informaes, consulte Como utilizar os objetos boto Flash na pgina 329 e Como criar novos modelos de boto na pgina 335.
O arquivo de filmeFlash (.swf)
uma verso comprimida do arquivo Flash (.a), otimizado para visualizao na Web. Este arquivo pode ser executado em navegadores e visualizado no Dreamweaver, mas no pode ser editado no Flash. Este o tipo de arquivo criado quando se utiliza o objetos de boto e texto Flash. Para obter mais informaes, consulte Como utilizar os objetos boto Flash na pgina 329 e Como utilizar os objetos de texto Flash na pgina 332.
328
Captulo 13
Os arquivos do modelo Flash Generator (.swt) possibilitam a modicao e substituio de informaes num arquivo de lme Flash. Estes arquivos so utilizados no objeto de boto Flash, permitindo a modicao do modelo com os seus prprios textos ou links, a m de criar um SWF personalizado para inserir no seu documento. No Dreamweaver, estes arquivos de modelo podem ser encontrados nas pastas Dreamweaver/Conguration/Flash Objects/Flash Buttons e Flash Text.
Se voc utilizar Flash para projetar os seus prprios arquivos de modelos Generator (consulte Como criar novos modelos de boto na pgina 335), estes modelos podero ser distribudos aos membros da sua equipe de design da Web. Os membros, por sua vez, podero salvar estes arquivos na pasta Conguration/ Flash Objects/Flash Buttons e acess-los utilizando o objeto de boto Flash.
Como utilizar os objetos boto Flash

O objeto de boto Flash permite personalizar e inserir um conjunto de botes Flash predenidos.
Nota: necessrio salvar os documentos antes de inserir um objeto de boto ou texto Flash.
Para inserir um objeto de boto Flash:
Na visualizao do projeto da janela do documento, selecione Inserir boto Flash, no painel Objetos, ou selecione Inserir > Imagens interativas > Boto Flash. Tambm possvel arrastar o cone do boto Flash at a janela do documento. Aparecer a caixa de dilogo Inserir boto Flash.
Como inserir mdia
329
Na lista de estilos, selecione o estilo de boto que deseja. Ser mostrado um exemplo de boto no campo Amostra. possvel clicar nesta amostra, para vericar como funcionar no navegador. Entretanto, o campo Amostra ser atualizado automaticamente, mostrando as alteraes de texto ou fonte que tiverem sido efetuadas. Estas alteraes aparecero na visualizao do projeto.
No campo Texto do boto (opcional), digite o texto que dever aparecer. Por exemplo, digite Pressione-me! Este campo aceitar alteraes apenas se o boto selecionado possuir um parmetro {Button Text} denido. Isto ser mostrado no campo Amostra. O texto que digitar substituir o parmetro {Button Text} quando voc visualizar o arquivo.
No campo Fonte, especique o tamanho e tipo de fonte que deseja, no menu pop-up. S necessrio selecionar fontes e tamanhos se os parmetros de texto do boto estiverem denidos. Se a fonte padro de um boto no estiver disponvel no sistema, selecione uma outra fonte no menu pop-up. Lembre-se de que a fonte selecionada no ser vista no campo Amostra, mas possvel clicar em Aplicar, para inserir o boto na pgina, para examinar a aparncia do texto.
No campo Link (opcional), digite um link relativo a documento ou absoluto para o boto. Os links relativos a site no so aceitos porque os navegadores no os reconhecem nos lmes Flash. Se utilizar um link relativo a documento, assegure-se de salvar o arquivo SWF no mesmo diretrio que o arquivo HTML. A interpretao de links relativos a documento varia nos navegadores e, para se assegurar de que os links funcionaro corretamente, salve o arquivo no mesmo diretrio.
No campo Destino (opcional), especique uma moldura ou janela de destino onde colocar o link do boto Flash. No campo Cor de fundo (opcional), dena a cor de fundo para o lme Flash. Utilize o seletor de cores ou digite um valor hexadecimal da Web (como, por exemplo, #FFFFFF). No campo Salvar como, digite o nome do novo arquivo SWF. possvel utilizar o nome de arquivo padro (por exemplo: boto1.swf ) ou digitar um novo nome. Se o arquivo contiver um link relativo a documento, ser necessrio salvar o arquivo no mesmo diretrio que o documento HTML atual, para manter os links relativos a documento
330
Captulo 13
Clique em Obter mais estilos, para ir para o site de intercmbio da Macromedia e efetuar o download de mais estilos de botes. Para obter mais informaes, consulte Como adicionar extenses ao Dreamweaver na pgina 98.
10
Clique em Aplicar, ou OK, para inserir o boto Flash na janela do documento.
Sugesto: Selecione Aplicar, para examinar as alteraes na visualizao do projeto enquanto mantm a caixa de dilogo aberta. possvel continuar alterando o boto. Para modificar um objeto de boto Flash:
Enquanto estiver na visualizao do projeto, selecione um objeto de boto Flash. O inspetor de propriedades exibir as propriedades do boto Flash. possvel fazer alteraes no inspetor de propriedades. Estas alteraes modicaro apenas os atributos HTML, como largura, altura e cor de fundo. Para alterar o contedo, exiba a caixa de dilogo Inserir boto Flash, utilizando um dos seguintes mtodos:
Clique duas vezes no objeto de boto Flash. No inspetor de propriedades, clique em Editar. Clique com o boto direito do mouse (no Windows), ou pressione a tecla
Control e clique (no Macintosh) e, no menu contextual, escolha Editar.
4
Na caixa de dilogo Inserir boto Flash, efetue as edies desejadas nos campos descritos no procedimento anterior. Na visualizao do projeto, possvel redimensionar o objeto facilmente utilizando as alas de redimensionamento. Para redimensionar o objeto ao seu tamanho original, selecione Redenir o tamanho, no inspetor de propriedades. Consulte Como redimensionar as imagens e os outros elementos na pgina 295.
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 inspetor de propriedades, clique no boto verde Executar. Para nalizar a visualizao, clique no boto vermelho Parar.
Nota: No possvel editar o objeto de boto Flash enquanto o estiver executando.
conveniente visualizar o documento no navegador, para examinar a aparncia exata do boto Flash.
Como inserir mdia
331
Como utilizar os objetos de texto Flash

O objeto de texto Flash permite criar e inserir um lme Flash que contm somente texto. Isto permite criar um pequeno lme grco com base em vetores com as fontes de designer e o texto de sua escolha.
Para inserir um objeto de texto Flash:
Na visualizao do projeto da janela do documento, selecione Inserir texto Flash, no painel Objetos, ou selecione Inserir > Imagens interativas > Texto Flash. Aparecer a caixa de dilogo Inserir texto Flash. No menu pop-up Fontes, selecione uma fonte. Este menu contm uma lista de todas as fontes TrueType contidas no sistema. Digite um tamanho de fonte no campo Tamanho. Os tamanhos so pontos com tamanhos especicados. Especique os atributos de estilo (negrito ou itlico) e alinhamento do texto, clicando nos boto de estilo apropriados. No campo Cor, dena a cor do texto, utilizando o seletor de cores ou digitando o valor hexadecimal da Web (#FFFFFF, por exemplo). No campo Cor da imagem cambivel, dena a cor que aparecer quando o ponteiro for passado sobre o objeto de texto Flash. Utilize o seletor de cores ou digite um valor hexadecimal da Web (#FFFFFF, por exemplo). Digite o texto desejado no campo Texto. Para examinar o estilo da fonte que est sendo exibido no campo Texto, selecione Mostrar a fonte.
332
Captulo 13
Se desejar associar um link ao objeto de texto Flash, digite um link absoluto ou relativo a documento no campo Link. Os links relativos a site no so aceitos porque os navegadores no os reconhecem nos lmes Flash. Se utilizar um link relativo a documento, assegure-se de salvar o arquivo SWF no mesmo diretrio que o arquivo HTML. A interpretao de links relativos a documento varia nos navegadores e, para se assegurar de que os links funcionaro corretamente, salve o arquivo no mesmo diretrio.
Se tiver digitado um link, especique uma moldura ou janela de destino onde colocar o link no campo Destino. No campo Cor de fundo, escolha uma cor de fundo para o texto. Utilize o seletor de cores ou digite um valor hexadecimal da Web (#FFFFFF, por exemplo). No campo Salvar como, digite um nome para o arquivo. possvel utilizar o nome de arquivo padro (por exemplo: texto1.swf ) ou digitar um novo nome. Se o arquivo contiver um link relativo a documento, ser necessrio salvar o arquivo no mesmo diretrio que o documento HTML atual, para manter os links relativos a documento
10
11
12
Clique em Aplicar, ou OK, para inserir o texto Flash na janela do documento. Se clicar em Aplicar, a caixa de dilogo permanecer aberta e ser possvel visualizar o texto no documento.
Para modicar ou executar o objeto de texto Flash, utilize o mesmo procedimento adotado para o boto Flash. Consulte Como utilizar os objetos boto Flash na pgina 329.
Como definir as propriedades dos objetos Flash

Inicialmente, o inspetor de propriedades dos objetos Flash exibir as propriedades mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior direito, para examinar outras propriedades. O inspetor de propriedades tambm contm um boto Executar, que permite a visualizao dos objetos Flash na janela do documento. Ao clicar no boto verde Executar, voc ver a aparncia do objeto como num navegador.
Nome especica
o nome que identicar o boto para a criao de scripts. Digite um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades.
L e U especicam
a largura e altura do objeto, em pixels. Tambm possvel especicar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milmetros), cm (centmetros) ou % (percentagem da largura ou altura do objetopai). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm.
Como inserir mdia
333
Arquivo especica
o caminho at o arquivo do objeto Flash. Clique no cone correspondente pasta, para procurar um arquivo, ou digite um caminho.
Alinhar determina Bg especica Editar
como o objeto ser alinhado na pgina. Para obter uma descrio de cada opo, consulte Como alinhar os elementos na pgina 294. a cor de fundo do objeto. retorna o boto selecionado ao tamanho original do lme. acessa a caixa de dilogo do objeto Flash.
Redefinir o tamanho
Executar / Parar permitem
visualizar o objeto Flash na janela do documento. Clique no boto verde Executar, para examinar o objeto no modo Executar. Clique no boto vermelho Parar, para nalizar o lme e poder editar o objeto.
ID dene
o parmetro opcional ID do ActiveX. Este parmetro utilizado mais freqentemente para passar informaes entre os controles ActiveX.
Espao V e Espao H especicam o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do boto. Qualidade dene o parmetro quality dos tags object e embed que denem o boto. Um lme ter uma aparncia melhor com uma congurao elevada, mas necessitar de um processador rpido para fazer uma apresentao correta na tela. Baixa enfatiza a velocidade e desenfatiza a aparncia, enquanto Alta favorece a aparncia em detrimento da velocidade. Baixa automtica enfatiza a velocidade de incio, mas melhora a aparncia se possvel. Alta automtica enfatiza ambas as qualidades inicialmente, mas sacrica a aparncia em funo da velocidade, se necessrio. Escala dene o parmetro scale dos tags object e embed que denem o objeto de boto ou texto. Este parmetro dene como o lme ser exibido dentro da rea denida para o ele pelos valores width e height. As opes so Padro (mostrar todas), Sem bordas e Ajuste exato. A opo Mostrar todas torna visvel o lme inteiro na rea especicada, mantendo as mesmas propores do lme e evitando a sua distoro. As bordas podero aparecer nos dois lados do lme. A opo Sem bordas semelhante a Mostrar todas, exceto que partes do lme podem estar cortadas. Com a opo Ajuste exato, o lme inteiro preencher a rea especicada, mas no sero mantidas as propores do lme, podendo ocorrer algumas distores. Parmetros abre
uma caixa de dilogo, na qual podem ser digitados outros parmetros. Consulte Como utilizar os parmetros na pgina 348.
334
Captulo 13
Como criar novos modelos de boto Utilize o Flash em conjunto com os os modelos gratuitos de autoria do Generator para criar novos modelos de boto, que incluem objetos de texto do Generator. Tambm possvel fazer o download de novos modelos de boto no site de intercmbio da Macromedia para o Dreamweaver na Web e coloc-los na pasta do boto Flash. Para obter mais informaes sobre como criar novos modelos de boto, leia o artigo sobre este assunto, no site da Macromedia: http://www.macromedia.com/support/ dreamweaver/insert_media.html. Para obter mais informaes sobre como utilizar as extenses, consulte Como adicionar extenses ao Dreamweaver na pgina 98.
Como inserir filmes Flash

Quando voc inserir um lme Flash em um documento, o Dreamweaver utilizar os tags object (denido pelo Internet Explorer para os controles ActiveX) e embed (denido pelo Netscape Navigator), a m de obter os melhores resultados em todos os tipos de navegadores. Quando voc zer alteraes ao lme no inspetor de propriedades, o Dreamweaver mapear as entradas dos parmetros apropriados aos tags object e embed.
Nota: Se inserir um filme utilizando o objeto de filme Flash, ser inserido um parmetro codebase, que instrui o Internet Explorer para o Windows a fazer o download automtico do controle ActiveX necessrio (Flash 4 e mais recente). Voc poder alterar o atributo, se no desejar que isto acontea. Para inserir e visualizar um filme Flash:
Na visualizao do projeto, na janela do documento, coloque o ponto de insero onde deseja inserir o lme. Insira o lme de uma das seguintes maneiras:
Clique no cone de Inserir Flash, no painel Objetos. Escolha Inserir > Mdia > Flash. Arraste o cone de Inserir Flash, do painel Objetos at o ponto de insero no
documento.
3
Na caixa de dilogo que aparecer, selecione um arquivo de lme Flash (.swf ). Aparecer um alocador de espao Flash na janela do documento (diferentemente dos objetos de boto e texto Flash). Para visualizar o lme Flash na janela de documento, clique no boto verde Executar, no inspetor de propriedades. Clique em Parar, para terminar a visualizao. Tambm possvel visualizar o lme Flash em um navegador, pressionando a tecla F12.
Sugesto: Para visualizar todo contedo Flash numa pgina, pressione simultaneamente as teclas Control, Alt, Shift e P (no Windows), ou Shift, Option, Command e P (no Macintosh). Todos os objetos e filmes Flash esto definidos para Executar.
Como inserir mdia
335
Como definir as propriedades dos filmes Flash Para exibir as seguintes propriedades no inspetor de propriedades, selecione um lme Flash. Inicialmente, o inspetor de propriedades exibir as propriedades mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades.
Nome especica um nome que identicar o lme para a criao de scripts. Digite um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades. L e U especicam
a largura e altura do lme, em pixels. Tambm possvel especicar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milmetros), cm (centmetros) ou % (percentagem do valor do objeto-pai). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm.
Arquivo especica
o caminho at o arquivo do lme Flash. Clique no cone correspondente pasta, para procurar um arquivo, ou digite um caminho.
Alinhar determina como o lme ser alinhado na pgina. Para obter uma descrio
de cada opo, consulte Como alinhar os elementos na pgina 294.

Fundo especica
uma cor de fundo para a rea do lme. Esta cor tambm aparecer enquanto o lme no estiver sendo executado (durante a carga e aps a sua execuo).
ID dene
Espao V e Espao H especicam o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do lme. Parmetros abre
uma caixa de dilogo na qual podem ser digitados parmetros adicionais a serem passados ao lme. Consulte Como utilizar os parmetros na pgina 348. O lme deve ser projetado para poder admitir estes parmetros adicionais.
Qualidade dene o parmetro quality dos tags object e embed que executam o lme. As conguraes se relacionam ao nvel anti-lias utilizado durante a execuo do lme. A aparncia do lme ser melhor com uma congurao elevada, mas necessitar de um processador mais rpido para ser apresentado corretamente na tela. Baixa enfatiza a velocidade e desenfatiza a aparncia, enquanto Alta favorece a aparncia em detrimento da velocidade. Baixa automtica enfatiza a velocidade de incio, mas melhora a aparncia se possvel. Alta automtica enfatiza ambas as qualidades inicialmente, mas sacrica a aparncia em funo da velocidade, se necessrio. Escala dene o parmetro scale dos tags object e embed que executam o lme. Para
obter mais informaes, consulte Como denir as propriedades dos objetos Flash na pgina 333.
336
Captulo 13
Execuo automtica executa
o lme automaticamente quando a pgina for
carregada.
Loop repete
o lme indenidamente. retorna o lme selecionado ao seu tamanho original.
Redefinir o tamanho
Como inserir objetos Generator

O Macromedia Generator possibilita uma maneira de lidar com o contedo dinmico na Web. Os arquivos do Generator podem ser criados com o Flash 4 ou 5, utilizando os modelos gratuitos de autoria do Generator; os arquivos passam a ser veiculados por um servidor da Web que executa o software de servidor do Generator. possvel inserir um objeto Generator em um documento do Dreamweaver.
Para inserir um objeto Generator:
Na janela do documento, coloque o ponto de insero onde deseja inserir o objeto. Clique no boto Generator, no painel Objetos. Na caixa de dilogo que aparecer, selecione o arquivo de modelo do Generator (.swt). Se desejar, clique no boto de adio (+), para adicionar um par de parmetros name=value. Em seguida, digite o nome do parmetro no campo Nome e o valor do parmetro no campo Valor. Repita esta etapa para cada parmetro. Para remover um parmetro, selecione-o na lista Parmetros e clique no boto de subtrao (). Quando terminar de digitar os parmetros, clique em OK, para inserir o objeto Generator.
2 3
Para editar os parmetros depois que o objeto Generator tiver sido inserido, utilize o inspetor de cdigo ou a visualizao de cdigo, na janela do documento. Os pares name=value so utilizados pelo servidor do Generator, em conjuno com outras fontes de dados, para criar dinamicamente o lme ou arquivo de imagem Flash.
Como inserir mdia
337
Sobre os filmes Shockwave

Shockwave, o padro da Macromedia para multimdia interativa na Web, um formato compactado que permite o download rpido dos arquivos de mdia criados no Macromedia Director, para que sejam executados pela maior parte dos navegadores mais comuns. Como inserir filmes Shockwave O software que executa os lmes Shockwave est disponvel como um plug-in do Netscape Navigator e um controle ActiveX. Quando voc inserir um lme Shockwave, o Dreamweaver utilizar os tags object (para o controle ActiveX) e embed (para o plug-in), a m de obter os melhores resultados em todos os navegadores. Quando voc zer alteraes ao lme no inspetor de propriedades, o Dreamweaver mapear as entradas dos parmetros apropriados aos tags object e embed.
Para inserir um filme Shockwave:
Na visualizao do projeto da janela do documento, coloque o ponto de insero onde deseja inserir o lme Shockwave. Clique no boto Shockwave, no painel Objetos, ou selecione Inserir > Mdia > Shockwave, ou arraste o boto Shockwave para o documento. Na caixa de dilogo que aparecer, selecione um arquivo de lme. No inspetor de propriedades, digite a largura e altura do lme, nas caixas L e U.
3 4
Como definir as propriedades Shockwave Para garantir os melhores resultados, tanto no Internet Explorer da Microsoft como no Netscape Navigator, o Dreamweaver insere os lmes Shockwave utilizando os tags object e embed. (object o tag denido pela Microsoft para os controles ActiveX, enquanto que embed o tag denido pela Netscape Navigator para os plug-ins). Para exibir as propriedades no inspetor de propriedades, selecione um lme Shockwave. Inicialmente, o inspetor de propriedades exibir as propriedades mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades.
Nome especica um nome que identicar o lme para a criao de scripts. Digite um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades. L e U especicam
a largura e altura do lme, em pixels. Tambm possvel especicar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milmetros), cm (centmetros) ou % (percentagem da largura ou altura do objetopai). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm.
338
Captulo 13
Arquivo especica
o caminho at o arquivo do lme Shockwave. Clique no cone correspondente pasta, para procurar um arquivo, ou digite um caminho.
Alinhar determina como o lme ser alinhado na pgina. Para obter uma descrio
de cada opo, consulte Como alinhar os elementos na pgina 294.

Fundo especica
uma cor de fundo para a rea do lme. Esta cor tambm aparecer enquanto o lme no estiver sendo executado (durante a carga e aps a sua execuo).
Executar permite que visualize o lme na visualizao do projeto da janela do documento. Clique no boto Parar, para interromper o lme e retornar ao alocador de espao Shockwave. Parmetros abre
uma caixa de dilogo na qual podem ser digitados outros parmetros a serem passados ao lme Shockwave. Consulte Como utilizar os parmetros na pgina 348. O lme Shockwave deve ter sido projetado para poder admitir estes parmetros.
ID dene
Espao V e Espao H especicam o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do lme.
Como adicionar som a uma pgina

H vrios tipos diferentes de arquivos e formatos de som, assim como diferentes maneiras de adicionar som s pginas da Web. Dentre os fatores a serem considerados antes de decidir qual formato e mtodo sero utilizados para adicionar o som, esto o objetivo, o seu pblico, o tamanho do arquivo, a qualidade do som e as diferenas entre os navegadores.
Nota: Os arquivos sonoros so tratados de forma diferente e inconsistente pelos diversos navegadores. Pode-se desejar salvar arquivos sonoros como SWFs, para melhorar a sua consistncia.
Sobre os formatos de arquivos de udio A seguinte lista descreve os formatos de arquivos de udio mais comuns, juntamente com algumas das vantagens e desvantagens de cada um para os projetos da Web. O formato .midi ou .mid (interface digital de instrumento musical) destina-se msica instrumental. Os arquivos MIDI contam com suporte de vrios navegadores e no necessitam de plug-ins. Apesar de sua qualidade de som ser muito boa, esta tambm pode depender da placa de som do visitante. Um arquivo MIDI pequeno pode oferecer um clipe de som longo. Os arquivos MIDI no podem ser gravados e devem ser sintetizados num computador com hardware e software especiais.
Como inserir mdia
339
Os arquivos no formato .wav (extenso Waveform) possuem uma qualidade de som boa, contam com suporte de vrios navegadores e no necessitam de plug-ins. possvel gravar os seus prprios arquivos WAV a partir de um CD, ta, 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. O formato .aif (formato de arquivo de intercmbio de udio - AIFF) , assim como o formato WAV, possui uma qualidade de som boa, pode ser executado pela maioria dos navegadores, e no necessita de plug-ins. possvel gravar arquivos AIFF a partir de um CD, ta, 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.
MPEG)
O formato .mp3 (udio do Motion Picture Experts Group ou Camada-3 de udio um formato compactado que torna os arquivos de som consideravelmente menores. A qualidade som muito boa. Se um arquivo MP3 tiver sido gravado e compactado corretamente, a sua qualidade pode competir com a de um CD. Novas tecnologias permitem transferir o arquivo gradualmente, para que o visitante no precise esperar pelo download do arquivo inteiro at poder ouvi-lo. No entanto, o tamanho do arquivo maior do que um arquivo Real Audio. Por isso, possvel que o download de uma msica inteira em uma conexo de linha telefnica comum ainda demore um pouco. Para executar os arquivos MP3, os visitantes devem fazer 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. A qualidade de som inferior dos arquivos MP3, mas novos aparelhos de reproduo e codicadores melhoraram a sua qualidade consideravelmente. Para poder executar estes arquivos, os visitantes devero efetuar o download e instalar o aplicativo auxiliar ou plug-in RealPlayer. Como vincular a um arquivo de udio A vinculao a um arquivo de udio uma maneira simples e efetiva de adicionar som s pginas da Web. Este mtodo de incorporar arquivos de som permite aos visitantes escolher se desejam ouvir o arquivo e coloca o arquivo disposio de um pblico maior. Alguns navegadores no contam com o suporte a arquivos de som incorporados.
Para criar um link a um arquivo de udio:
1 2
Selecione o texto ou a imagem que deseja utilizar como link ao arquivo de udio. No inspetor de propriedades, clique no cone correspondente pasta, para procurar o arquivo de udio, ou digite o caminho e o nome do arquivo no campo Link.
340
Captulo 13
Como incorporar udio A incorporao de udio encaixa o aparelho de reproduo de som diretamente na pgina, mas o som s ser executado se os visitantes do seu site contarem com o plug-in apropriado ao arquivo escolhido. Incorpore os arquivos, se desejar utilizar o som como msica de fundo ou se desejar mais controle sobre a prpria apresentao de som. Por exemplo: possvel ajustar o volume, a aparncia do aparelho de reproduo na pgina e os pontos de incio e m do arquivo de som.
Para incorporar um arquivo de udio
Na visualizao do projeto, coloque o ponto de insero onde deseja incorporar o arquivo. Clique no boto Plug-in, no painel Objetos, ou selecione Inserir > Mdia > Plug-in. Para obter mais informaes sobre o objeto de plug-in, consulte Como inserir o contedo de plug-ins do Netscape Navigator na pgina 341.
No inspetor de propriedades, clique no cone correspondente 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 nos campos apropriados ou redimensionando o alocador de espao de plug-in, na janela do documento. Estes valores determinam o tamanho com o qual os controles de udio sero exibidos no navegador. Por exemplo: tente uma largura de 144 pixels e uma altura de 60 pixels, para examinar como o aparelho de reproduo de udio aparecer no Netscape Navigator e no Internet Explorer.
Como inserir o contedo de plug-ins do Netscape Navigator

Os plug-ins aprimoram o funcionamento do Netscape Navigator, possibilitando maneiras de exibir o contedo de mdia em diversos formatos. Os plug-ins so os meios atravs dos quais os arquivos de contedo so executados e exibidos nos sites da Web. Por exemplo: dentre os plug-ins mais freqentes esto o RealPlayer e QuickTime, enquanto alguns arquivos de contedo incluem os lmes MP3s e QuickTime. Depois de criar o contedo de um plug-in do Navigator, possvel utilizar o Dreamweaver para inseri-lo em um documento HTML. O Dreamweaver utiliza o tag embed para marcar a referncia ao arquivo de contedo.
Como inserir mdia
341
Para inserir o contedo de plug-ins do Navigator:
Na visualizao do projeto, na janela do documento, coloque o ponto de insero onde deseja inserir o contedo. Clique no boto Plug-in, no painel Objetos. Na caixa de dilogo que aparecer, selecione um arquivo de contedo para o plug-in do Navigator.
2 3
Como definir as propriedades dos plug-ins do Netscape Navigator Aps ter inserido o contedo de um plug-in do Netscape Navigator, utilize o inspetor de propriedades para denir os parmetros do contedo. Para exibir as seguintes propriedades no inspetor de propriedades, selecione um objeto de plugin do Netscape Navigator. Inicialmente, o inspetor de propriedades exibir as propriedades mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades.
Nome especica
um nome que identicar o plug-in para a criao de scripts. Digite um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades.
L e U especicam
a largura e altura, em pixels, alocadas ao objeto na pgina. Tambm possvel especicar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milmetros), cm (centmetros) ou % (percentagem da largura e altura do objeto-pai). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm.
Orig especica
o arquivo de origem dos dados. Clique no cone correspondente pasta, para procurar um arquivo, ou digite um nome de arquivo.
URL do Plg especica
a URL do atributo pluginspage. Digite a URL completa do site onde os usurios podero efetuar o download do plug-in. Se o usurio que estiver visualizando a pgina no contar com o plug-in, o navegador tentar efetuar o seu download a partir desta URL.
Alinhar determina
como o objeto ser alinhado na pgina. Para obter uma descrio de cada opo, consulte Como alinhar os elementos na pgina 294.
Espao V e Espao H especicam o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do plug-in. Borda especica
a largura da borda ao redor do plug-in.
342
Captulo 13
Parmetros abre
uma caixa de dilogo na qual podero ser digitados parmetros adicionais, a serem passados ao plug-in do Netscape Navigator. Consulte Como utilizar os parmetros na pgina 348. Muitos plug-ins respondem a parmetros especiais. O plug-in Flash, por exemplo, inclui parmetros relacionados a bgcolor, salign e scale. Tambm possvel visualizar os atributos designados ao plug-in selecionado, clicando no boto Atributo. possvel editar, adicionar e excluir os atributos (como a largura e a altura) nesta caixa de dilogo. Como executar os plug-ins na janela do documento possvel visualizar lmes e animaes que dependem dos plug-ins do Navigator (elementos que utilizam o tag embed) diretamente na janela do documento. No possvel visualizar na janela do documento os lmes ou animaes que dependem dos controles ActiveX. possvel executar todos os elementos de plug-in simultaneamente, a m de examinar a aparncia que a pgina ter para o usurio, ou executar cada elemento individualmente, para garantir que o elemento de mdia correto tenha sido incorporado. Para executar os lmes, assegure-se de que os plug-ins necessrios tenham sido instalados no computador. Quando o Dreamweaver for inicializado, ele procurar automaticamente todos os plug-ins instalados, inicialmente na pasta Conguration/Plugins e, em seguida, nas pastas de plug-ins de todos os navegadores que estiverem instalados.
Para executar o contedo de plug-ins na janela do documento:
Insira um ou mais elementos de mdia, escolhendo Inserir > Mdia > Shockwave, Inserir > Imagens interativas > Flash, ou Inserir > Mdia > Plug-in. Execute o contedo do plug-in: Plug-ins > Executar, ou clique no boto Executar, no inspetor de propriedades.
Selecione um dos elementos de mdia que tiver inserido e escolha Exibir > Escolha Exibir > Plug-ins > Executar todos, para executar todos os elementos de
mdia na pgina selecionada que dependerem de plug-ins.
Nota: A opo Executar todos se aplica ao documento atual e no a outros documento num conjunto de molduras, por exemplo. Para interromper a execuo do contedo de plug-ins:
Selecione um elemento de mdia e escolha Exibir > Plug-ins > Parar, ou clique no boto Parar, no inspetor de propriedades. Tambm possvel selecionar Exibir > Plug-ins > Parar todos, para interromper a execuo de todos os contedos de plu-gin.
Como inserir mdia
343
Resoluo de problemas relacionados aos plug-ins do Navigator Se, aps ter seguido estas etapas para executar o contedo do plug-in na janela do documento, alguns elementos do contedo do plug-in no forem executados, tente um dos seguintes procedimentos:
Certique-se de que o plug-in associado esteja instalado no computador e que

o contedo do mesmo seja compatvel com a verso do plug-in que voc possui.
Abra o arquivo Conguration/Plugins/UnsupportedPlugins.txt em um editor

de texto e procure o plug-in com problemas na lista. Este 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, adicione-o a este arquivo.
Certique-se de contar com memria suciente (e, no Macintosh, que haja

memria suciente alocada ao Dreamweaver). Alguns plug-ins exigem entre 2 MB e 5 MB a mais de memria, para que sejam executados.
Como inserir um controle ActiveX

Os controles ActiveX (anteriormente conhecidos como controles OLE) so componentes reutilizveis semelhantes a mini-aplicativos que podem funcionar como plug-ins dos navegadores. Eles so executados no Internet Explorer com o Windows, porm no so executados no Macintosh ou no Netscape Navigator. No Dreamweaver, o objeto ActiveX permite fornecer atributos e parmetros para um controle ActiveX no navegador do visitante. O Dreamweaver utiliza o tag object para marcar o local na pgina onde o controle ActiveX aparecer e para fornecer parmetros ao controle ActiveX.
Para inserir o contedo de controles ActiveX:
Na janela do documento, coloque o ponto de insero onde deseja inserir o contedo e siga um dos procedimentos abaixo:
Clique no boto ActiveX, no painel Objetos. Escolha Inserir > Mdia > ActiveX. Arraste e sollte o cone ActiveX.
Um cone marca o local onde o controle ActiveX aparecer na pgina no Internet Explorer.
344
Captulo 13
Como configurar as propriedades dos controles ActiveX Aps ter inserido um objeto ActiveX, utilize o inspetor de propriedades para denir os atributos do tag object e parmetros do controle ActiveX. Clique em Parmetros, no inspetor de propriedades, para digitar os nomes e valores relativos s propriedades que no aparecem no inspetor de propriedades. No h um formato padro universalmente aceito para os parmetros dos controles ActiveX; para estabelecer os parmetros a serem empregados, consulte a documentao relativa ao controle ActiveX a ser utilizado. Inicialmente, o inspetor de propriedades exibir as propriedades mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades.
Nome especica
um nome que identicar o objeto ActiveX para a criao de scripts. Digite um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades.
L e U especicam
a largura e altura do objeto, em pixels. Tambm possvel especicar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milmetros), cm (centmetros) ou % (percentagem da largura e altura do objetopai). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm.
Class ID identica
o controle ActiveX ao navegador. Digite um valor ou escolha um valor no menu pop-up. Quando a pgina tiver sido carregada, o navegador utilizar a Class ID para localizar o controle ActiveX necessrio ao objeto ActiveX associado pgina. Se o navegador no conseguir localizar o controle ActiveX especicado, ele tentar efetuar o seu download a partir do local especicado em Base.
Incorporar faz
com que o Dreamweaver adicione um tag embed dentro do tag object do controle ActiveX. Se o controle ActiveX possuir um equivalente ao plugin do Netscape Navigator, o tag embed ativar este plug-in. O Dreamweaver atribuir os valores digitados como propriedades ActiveX aos equivalentes do plug-in do Netscape Navigator.
Alinhar determina Parmetros abre
como o objeto ser alinhado na pgina. Para obter uma descrio de cada opo, consulte Como alinhar os elementos na pgina 294. uma caixa de dilogo na qual podero ser digitados parmetros adicionais, a serem passados ao objeto ActiveX. Consulte Como utilizar os parmetros na pgina 348. Muitos controles ActiveX respondem a parmetros especiais.
Orig dene
o arquivo de origem dos dados a ser utilizado para um plug-in do Netscape Navigator, se a opo Incorporar estiver ativa. Se voc no digitar um valor, o Dreamweaver tentar determinar o valor a partir das propriedades do ActiveX que j tiverem sido digitadas.
Espao V e Espao H especicam o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do objeto.
Como inserir mdia
345
Base especica
a URL que contm o controle ActiveX. O Internet Explorer efetuar o download do controle ActiveX deste local, se ainda no tiver sido instalado no sistema do usurio. Se voc no especicar um parmetro Base e o visitante ainda no dispuser do controle ActiveX necessrio, o navegador no poder exibir o objeto ActiveX. uma imagem a ser exibida, se o navegador no oferecer suporte ao tag object. Esta opo estar disponvel apenas quando a opo Incorporar no estiver selecionada.
ID dene Imagem alt especica
Dados especica
um arquivo de dados a ser carregado pelo controle ActiveX. Muitos controles ActiveX, como o Shockwave e o RealPlayer, no utilizam este parmetro. a largura da borda ao redor do objeto.
Bordas especica
Como inserir um miniaplicativo Java

Java uma linguagem de programao que permite o desenvolvimento de aplicativos pequenos (miniaplicativos) que podem ser incorporados s pginas da Web. Depois de criar o miniaplicativo Java, possvel inseri-lo em um documento HTML atravs do Dreamweaver. O Dreamweaver utiliza o tag applet para marcar a referncia ao arquivo do miniaplicativo.
Para inserir um miniaplicativo Java:
Na janela do documento, coloque o ponto de insero onde deseja inserir o miniaplicativo. Clique no boto Miniaplicativo, no painel Objetos. Na caixa de dilogo que aparecer, selecione um arquivo que contenha o miniaplicativo Java.
2 3
346
Captulo 13
Como configurar as propriedades dos miniaplicativos Java Aps ter inserido um miniaplicativo Java, utilize o inspetor de propriedades para denir os parmetros. Para exibir as seguintes propriedades no inspetor de propriedades, selecione um miniaplicativo Java. Inicialmente, o inspetor de propriedades exibir as propriedades mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades.
Nome especica
um nome que identicar o miniaplicativo para a criao de scripts. Digite um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades.
L e U especicam
a largura e altura do miniaplicativo, em pixels. Tambm possvel especicar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milmetros), cm (centmetros) ou % (percentagem da largura ou altura do objeto-pai). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm.
Cdigo especica
o arquivo contendo o cdigo Java do miniaplicativo. Clique no cone correspondente pasta, para procurar um arquivo, ou digite um nome de arquivo.
Base identica
a pasta que contm o miniaplicativo selecionado. Quando voc escolher um miniaplicativo, este campo ser preenchido automaticamente.
Alinhar determina Alt especica
como o objeto ser alinhado na pgina. Para obter uma descrio de cada opo, consulte Como alinhar os elementos na pgina 294. um contedo alternativo (geralmente uma imagem) que ser exibido se o navegador do usurio no oferecer suporte aos miniaplicativos Java ou estiver com o Java desativado. Se voc digitar texto, o Dreamweaver o interpretar atravs da utilizao do atributo alt do tag applet. Se voc escolher uma imagem, o Dreamweaver inserir um tag img entre os tags applet de abertura e nalizao.
Nota: Para especificar um contedo alternativo que possa ser exibido tanto no Netscape Navigator (com o Java desativado) como no Lynx (um navegador com base em texto), selecione uma imagem e adicione manualmente um atributo alt ao tag img no inspetor de cdigo. Espao V e Espao H especicam Parmetros abre
o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do miniaplicativo. uma caixa de dilogo na qual podem ser digitados parmetros adicionais a serem passados ao miniaplicativo. Muitos miniaplicativos respondem a parmetros especiais.
Como inserir mdia
347
Como utilizar os parmetros

Utilize a caixa de dilogo Parmetros para digitar valores relacionados aos parmetros especiais denidos para os lmes Shockwave e Flash, controles ActiveX, plug-ins do Netscape Navigator e miniaplicativos Java. Os parmetros so utilizados com os tags object, embed e applet. Os parmetros denem atributos especcos para o tipo de objeto a ser inserido. Por exemplo: um objeto de lme Flash pode possuir um parmetro de qualidade <param name=quality value=best> para o tag do objeto. A caixa de dilogo Parmetro est disponvel no inspetor de propriedades. Consulte a documentao do objeto que estiver utilizando, para obter informaes sobre os parmetros que ele requer.
Nota: No h um padro universalmente aceito para identificar os arquivos de dados dos controles ActiveX. Consulte a documentao relativa ao controle ActiveX a ser utilizado, para estabelecer os parmetros a serem empregados. Para abrir a caixa de dilogo Parmetros:
Selecione um objeto que possa admitir parmetros (como um lme Shockwave, um controle ActiveX, um plug-in do Navigator ou um miniaplicativo Java) na janela do documento. Abra a caixa de dilogo utilizando um dos seguintes mtodos: Control e clique no objeto (no Macintosh) e, no menu contextual, escolha Parmetros.
Clique com o boto direito do mouse (no Windows), ou pressione a tecla Abra o inspetor de propriedades, se ainda no tiver sido aberto, e clique no
boto Parmetros, localizado na parte inferior do inspetor de propriedades. Certique-se de que o inspetor de propriedades esteja aberto.
Para digitar um valor de um parmetro na caixa de dilogo Parmetros:
1 2 3
Clique no boto com o sinal de adio (+). Na coluna Parmetro, digite o nome do parmetro. Na coluna Valor, digite o valor do parmetro.
Para remover os parmetros:
Selecione um parmetro e pressione o boto com o sinal de subtrao (-).

Para reordenar os parmetros:
Selecione um parmetro e utilize os botes de seta acima e abaixo.
348
Captulo 13
Como utilizar os comportamentos para controlar os elementos de mdia

possvel adicionar comportamentos pgina, a m de iniciar e interromper diversos objetos de mdia.
Controlar o Shockwave ou Flash permite executar, parar, rebobinar ou ir para um quadro de um lme Shockwave ou Flash. Consulte Controlar o Shockwave ou Flash na pgina 485.
permite executar um som. Por exemplo: possvel executar um efeito sonoro sempre que o usurio passar o ponteiro do mouse sobre um link. Consulte Executar o som na pgina 494.
Executar o som Verificar o plug-in permite vericar se os visitantes ao seu site j possuem o plug-in
necessrio instalado, em seguida os direciona para outras URLs, dependendo de eles contarem com o plug-in correto. Isto se aplica somente aos plug-ins do Netscape, pois o comportamento Vericar o plug-in no verica os controles ActiveX. Consulte Vericar o plug-in na pgina 483.
Como inserir mdia
349
350
Captulo 13
14
CAPTULO 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como editar o HTML no Dreamweaver
Embora o Macromedia Dreamweaver permita criar e editar visualmente as pginas da Web, sem a necessidade de o usurio preocupar-se com o cdigo-fonte HTML, s vezes necessrio acessar o HMTL subjacente da pgina. A possibilidade de editar o HTML pode lhe proporcionar mais controle ao modicar e solucionar problemas na pgina da Web. Por exemplo: suponha que voc selecionou um texto no seu documento e aplicou uma nova fonte, mas esta apareceu apenas na metade da frase. Ao examinar o cdigo HTML na visualizao de cdigo do Dreamweaver (ou no inspetor de cdigo), voc descobre que o tag de nalizao </font> est no meio da frase; basta mover </font> para o nal da frase e o problema ser corrigido. Uma boa maneira de aprender como funciona o HTML utilizar os recursos de edio visual, juntamente com a visualizao de cdigo (ou inspetor de cdigo) do Dreamweaver. possvel comparar o cdigo HTML exibio visual para examinar como correspondem. O Dreamweaver fornece acesso ao cdigo HTML atravs da visualizao de cdigo, do inspetor de cdigo e do Quick Tag Editor. Para obter ajuda na compreenso e gravao do cdigo HTML, utilize o painel Referncia do Dreamweaver. O Dreamweaver tambm permite abrir os arquivos HTML gravados em outro local, sem a preocupao com o comprometimento do cdigo. O Dreamweaver utiliza o Roundtrip HTML para garantir que o contedo e a estrutura do HTML no seja alterada durante a alternncia entre o Dreamweaver e um editor de HTML externo. Alm disso, o Dreamweaver pode ser utilizado para limpar os arquivos HTML que contm cdigo ilegvel ou confuso.
351
Como compreender os tags HTML bsicos

Pode ser til ter uma compreenso bsica do HTML ao utilizar o Dreamweaver. O cdigo HTML e o projeto visual podem ser vistos simultaneamente com facilidade; isso d ao usurio a oportunidade de entender como funciona o cdigo HTML. A compreenso e a possibilidade de modicar o cdigo podem ajud-lo a solucionar problemas em suas pginas da Web. Se voc for iniciante em HTML, as explicaes abaixo fornecem uma viso geral resumida. Caso voc j conhea o HTML, passe para a prxima seo. O HTML uma linguagem de markup de texto. Isto signica que os documentos HTML contm texto simples com tags de markup especcos, que informam ao navegador da Web como exibir o texto. Por exemplo: o tag i controla o texto em itlico. A colocao de <i> no HTML informa ao navegador que o texto subseqente deve estar em itlico. A colocao de </i> no HTML informa ao navegador que o texto subseqente deve ser revertido para o texto padro. O tag com uma barra inclinada para a direita (/) chamado de tag de nalizao. Os navegadores da Web interpretam esses tags no documento HTML e exibem o texto com a formatao adequada. Alguns tags contm atributos que podem acompanh-los. O alinhamento de uma imagem pode ser especicado dentro do tag da imagem. Por exemplo: <IMG SRC="image.gif" align="left">. align um atributo do tag da imagem. Estrutura de um documento Cada documento HTML (pgina da Web) deve conter determinados tags padro head e body. A seo head contm o ttulo da pgina da Web (e os scripts) e na seo body est o texto que aparecer na pgina, conforme ser exibida no navegador. Abaixo, mostrada a estrutura de um documento de amostra:
<html> <head> <title>Title goes here</title> </head> <body> <center> <p> <font size=+2>Welcome to my page</font> </p> <p> The p is a paragraph tag, which tells the browser that this is all one paragraph. </p> </center> </body> </html>
352
Captulo 14
Os tags necessrios para cada documento HTML so html, head e body.
Tags do cabealho A seo head (envolta por tags head) contm apenas o ttulo da pgina (envolto pelos tags title ) e os scripts de programao. Por exemplo: cdigo JavaScript que implementa um cmbio de imagens usando o mouse na pgina. O texto colocado entre <title> e </title> aparecer no alto da barra de ttulo da janela do navegador. Mas no ser mostrado na pgina. Por exemplo: o HTML seguinte resulta na pgina mostrada abaixo:
<html> <head> <title>Purcy the cat</title> </head>
353
Tags de corpo do texto O corpo do texto do documento acomoda o contedo da pgina. Todo o texto, imagens, tabelas e qualquer outro contedo devem ser colocados entre <body> e </ body>.
<html> <head> <title>Purcy the cat</title> </head> <body> <center> <h2> Welcome to my home page. </h2> <p> I am a two-year-old part Siamese cat who lives in San Francisco with my two owners. </p> <br> <img src="cat.gif" width="400" height="250 align=center> <br> <p> I like to eat all kinds of food, especially cheese. </p> </center> </body> </html>
Todos os tags na seo body do exemplo podem ser utilizados para formatar o contedo.
354
Captulo 14
Os tags de cabealho ou seja, h1 a h6 marcam o texto como cabealho. Normalmente, os cabealhos so exibidos na pgina da Web com texto maior ou mais escuro do que o corpo do texto comum; h1 o tamanho maior e h6 o menor. necessrio colocar sempre o tag de abertura antes do contedo, seguido de um tag de nalizao, no nal do contedo, como no exemplo abaixo:
<h1>Este um cabealho 1</h1>
separam o texto em pargrafos. Como os navegadores da Web quebram automaticamente as linhas e ignoram os retornos de carro, os tags p devem ser utilizados para evitar que os navegadores exibam o texto inteiro sem nenhuma separao. O tag p adiciona espao em branco extra entre as linhas. necessrio colocar sempre o tag de abertura antes do contedo do pargrafo, seguido do tag de nalizao no nal do contedo, como neste exemplo:
<p> I am a two-year-old Siamese cat who lives in San Francisco with my two owners. </p> <p> I like to eat all kinds of food, especially cheese. </p>
Tags de quebra de linha (br) foram as quebras de linha na pgina, em vez de adicionar espao em branco extra, como o tag de pargrafo. Como o tag br insere uma nica quebra de linha, no necessrio incluir um tag de nalizao.
Tags de pargrafo (p)
Tags de quebra de linha
Espao criado pelas quebras de linha
355
Tags de imagem inserem
imagens na pgina. Um tag de imagem segue o formato
<img src="imagefilename">; o nome do arquivo de imagem deve ser colocado entre
aspas. Os tags de imagem tambm contam com atributos que podem acompanhlos. Por exemplo: width, height, border, align e valign. Os atributos width e height especicam o tamanho da imagem a ser interpretado pelo navegador; a largura da borda pode ser denida como 0 ou um nmero maior (como padro, as imagem contm uma borda quando so utilizadas como links). Os atributos align e valign denem o alinhamento da imagem: align (para alinhamento horizontal) pode ser denido como left, right ou center, e valign (alinhamento vertical) como top, bottom ou middle. O exemplo a seguir mostra um tag de imagem completo:
<img src="cat.gif" width="400" height="250 align=center>
356
Captulo 14
Tags de formatao de texto O cdigo-fonte HTML pode ser utilizado para formatar o texto em uma pgina da Web. possvel especicar negrito ou itlico para o texto, e exibi-lo com uma determinada fonte. Por exemplo:
<b>This text will appear bold in the Web page</b>. <i>This text will appear italic in the Web page</i>. <font face=verdana size=2>This text will display with the Verdana font face and will be larger than the other text.</font>
Como inserir os comentrios

Um comentrio um texto descritivo, inserido no cdigo HTML para explic-lo ou fornecer outras informaes. O comentrio aparecer apenas na visualizao de cdigo (ou no inspetor de cdigo) e no ser exibido na pgina da Web, no navegador.
Para inserir um comentrio:
Coloque o ponto de insero onde deve ser adicionado o comentrio, na visualizao de cdigo (ou no inspetor de cdigo) ou na visualizao do projeto. Consulte Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) na pgina 361.
Clique no boto Comentrio, na categoria Invisveis do painel Objetos, ou escolha Inserir > Tags invisveis > Comentrio.
A criao de um comentrio gera o cdigo HTML seguinte:


Para exibir os marcadores de comentrios na visualizao do projeto, escolha Exibir > Auxlios visuais > Elementos invisveis. Certique-se de que os comentrios estejam selecionados nas preferncias de elementos invisveis, caso contrrio, o marcador no aparecer. Para obter mais informaes, consulte Como denir as preferncias de elementos invisveis na pgina 164.
357
Para adicionar um comentrio existente, siga um dos procedimentos abaixo:
Selecione o marcador Comentrios, na visualizao do projeto e digite o texto

no inspetor de propriedades.
Localize o comentrio no cdigo (consulte o exemplo anterior) e adicione o

texto diretamente nesta posio.
Como utilizar o painel Referncia do Dreamweaver

O painel Referncia uma ferramenta de referncia rpida para os tags HTML, objetos JavaScript, estilos CSS e seus atributos. Esse painel contm informaes relativas a tags, objetos ou estilos especcos, utilizados na visualizao de cdigo (ou no inspetor de cdigo).
Para abrir o painel Referncia:
Selecione o tag, objeto ou estilo na visualizao de cdigo ou do projeto, sobre o qual devem ser obtidas informaes. Clique no boto Referncia, na barra de ferramentas (Exibir > Barra de ferramentas) ou escolha Janela > Referncia.
O painel Referncia aberto e exibe as informaes sobre o tag, objeto ou estilo selecionado. Para ajustar o tamanho do texto no painel Referncia, selecione Fonte grande, Fonte mdia ou Fonte pequena, no menu de opes (a seta pequena na parte superior direita do painel).
358
Captulo 14
O menu pop-up Livro exibe o nome do livro que originou o material de referncia: OReilly HTML Reference, JavaScript Reference ou CSS Reference. Para exibir os tags, objetos ou estilos de outro livro, escolha uma opo no menu Livro.
O menu pop-up Tag, Objeto ou Estilo (dependendo do livro selecionado) exibe o tag, objeto ou estilo escolhido na visualizao de cdigo (ou no inspetor de cdigo). Para exibir outras informaes sobre outro tag, objeto ou estilo, selecione uma nova opo no menu. Ao lado do menu pop-up Tag, Objeto ou Estilo, h um outro menu que contm uma lista de atributos para o tag escolhido. A escolha padro Descrio, que exibe uma descrio do tag selecionado. Pode ser escolhido tambm um atributo no menu para que sejam exibidas mais informaes sobre essa opo. Os atributos so utilizados para formatar o contedo no tag. O atributo align pode ser utilizado para especicar o alinhamento de uma imagem no tag de imagem. Por exemplo: <img src="image.gif" align="left">.
359
Sobre o Roundtrip HTML

O Roundtrip HTML uma ferramenta exclusiva do Dreamweaver, que permite mover os documentos entre o Dreamweaver e um editor de HTML com base em texto, com pouco ou nenhum impacto sobre o contedo e a estrutura do cdigofonte HTML original do documento. O Dreamweaver mantm e interpreta alguns HTMLs que so tecnicamente invlidos (por exemplo: os tags font em volta de vrios tags p), se esse cdigo receber suporte dos navegadores. Contudo, o cdigo-fonte HTML que tiver sido gerado pelo Dreamweaver durante a edio grca sempre tecnicamente vlido. Abaixo, esto os recursos principais do Roundtrip HTML:
Como padro, o Dreamweaver regravar os ttulos sobrepostos, fechar os tags

que esto indevidamente abertos e remover os tags de nalizao adicionais, quando voc retornar ao Dreamweaver de um editor de HTML externo ou abrir um documento HTML j existente. Para que o Dreamweaver no regrave qualquer HTML, escolha Editar > Preferncias, em seguida, selecione Regravao de cdigo, para desativar esse comando. Consulte Preferncias de regravao de cdigo na pgina 377. Se a regravao de cdigo for desativada, qualquer HTML que o Dreamweaver iria regravar, ser exibido como invlido.
Quando a opo Realar o HTML incorreto estiver ativada, o Dreamweaver

realar o HTML incorreto (que o programa no oferece suporte) em amarelo. Quando um tag invlido for selecionado, o Dreamweaver informar como corrigir o erro no inspetor de propriedades. Como padro, a opo Realar o HTML incorreto est ativada na visualizao de cdigo (ou no inspetor de cdigo). Para desativ-la, escolha Realar o HTML incorreto no menu Opes, na janela da visualizao de cdigo (ou no inspetor de cdigo). O realce de erros est sempre ativado na visualizao do projeto.
Nota: A opo Ativar/desativar o realce de HTML incorreto estar disponvel apenas na visualizao de cdigo (ou no inspetor de cdigo). A visualizao do projeto exibe sempre o realce de erros.
O Dreamweaver no altera os tags no-reconhecidos incluindo XML

porque no dispe de um critrio para avali-los como corretos ou incorretos. Se um tag no-reconhecvel se sobrepuser a um outro vlido, o Dreamweaver poder marc-lo como incorreto, mas no regravar o cdigo. O tag personalizado, abaixo, seria marcado como incorreto, por exemplo: <MyNewTag><b>text</MyNewTag></b>.
O Dreamweaver no altera os tags ColdFusion Markup Language (CFML) ou

Active Server Pages (ASP) da Microsoft, e exibe cones para identicar os blocos de cdigo CFML ou ASP na janela do documento, quando for possvel. Consulte Como editar os arquivos ColdFusion e Active Server no Dreamweaver na pgina 383.
360
Captulo 14
O Dreamweaver permite iniciar um editor de HTML com base em texto para

editar o documento. O Dreamweaver est integrado ao HomeSite (no Windows) e BBEdit (no Macintosh). Consulte Como utilizar os editores de HTML externos na pgina 381.
Como utilizar a visualizao de cdigo (ou o inspetor de cdigo)

O cdigo-fonte HTML do documento pode ser exibido de vrias maneiras: apenas a visualizao de cdigo na janela do documento, a janela do documento pode ser dividida de modo a exibir a visualizao de cdigo e a visualizao do projeto, ou pode ser aberto o inspetor de cdigo. A visualizao de cdigo e o inspetor de cdigo funcionam exatamente da mesma maneira, a nica diferena que o inspetor de cdigo est em uma janela separada. A diviso da janela do documento para exibir o cdigo facilita a visualizao do projeto, durante a implementao de alteraes no cdigo HTML. medida que for adicionado ou alterado o contedo na visualizao do projeto, o Dreamweaver exibe imediatamente as modicaes na visualizao de cdigo ou no inspetor de cdigo. Essa caracterstica torna a visualizao de cdigo ou o inspetor de cdigo uma ferramenta til para aprender o HTML, caso voc ainda no o conhea, ou para ajud-lo a lembrar da sintaxe ou dos valores corretos para tags ou atributos especcos. Os tags e scripts HTML so codicados por cores e podem ser ajustados nas denies de preferncias. As alteraes ou incluses feitas no cdigo aparecem na visualizao do projeto somente depois da sincronizao das visualizaes de cdigo e do projeto.
Para sincronizar as visualizaes de cdigo e do projeto:
Clique na visualizao do projeto aps trabalhar em um editor de cdigo, ou clique no boto Atualizar a visualizao do projeto, na barra de ferramentas. Escolha Exibir > Barra de ferramentas, para exibir essa barra. O Dreamweaver nunca regrava o HTML digitado diretamente em um editor de cdigo. Se for digitado um cdigo invlido e a opo Realar o HTML incorreto estiver ativada, o Dreamweaver realar o cdigo invlido no editor de cdigo. Como padro, o realce de erros est ativado nos editores de cdigo. O realce de erros sempre aparece na visualizao do projeto, mesmo quando Realar o HTML incorreto estiver desativado na visualizao de cdigo.
361
Como abrir a visualizao de cdigo (ou o inspetor de cdigo) O cdigo-fonte HTML pode ser exibido de vrias maneiras: atravs da exibio do cdigo e do projeto na janela do documento, da exibio apenas do cdigo e da abertura do inspetor de cdigo.
Para exibir as visualizaes de cdigo e do projeto:
Escolha Exibir > Cdigo e projeto, ou clique no boto Mostrar as visualizaes de cdigo e do projeto, na barra de ferramentas. O cdigo HTML aparece no painel superior e a visualizao do projeto no painel inferior. O tamanho dos painis pode ser ajustado arrastando a barra de diviso.
362
Captulo 14
Para ajustar a diviso das visualizaes de cdigo e do projeto, siga um dos procedimentos abaixo:
Para exibir a visualizao do projeto na parte superior, escolha Exibir >

Visualizao do projeto no alto. Uma alternativa selecionar visualizao do projeto no alto, no menu pop-up Opes da barra de ferramentas.
Para exibir apenas o cdigo HTML na janela do documento, escolha Exibir >
Cdigo, ou clique no boto Mostrar a visualizao de cdigo, na barra de ferramentas .
Para exibir apenas o projeto visual, escolha Exibir > Projeto, ou clique no boto
Mostrar a visualizao do projeto, na barra de ferramentas. Se voc preferir trabalhar com o cdigo HTML em uma janela separada, utilize o inspetor de cdigo para exibi-lo.
Para abrir o inspetor de cdigo, siga um dos procedimentos abaixo:
Escolha Janela > Inspetor de cdigo. Clique no cone de inspetor de cdigo, na barra do Iniciador (no canto inferior
direito da janela do documento).
Pressione a tecla F10.
Para alternar entre a janela do documento e o inspetor de cdigo:
Pressione as teclas Control e de tabulao (no Windows), ou Option e de tabulao (no Macintosh).
363
Como definir as opes da visualizao de cdigo (ou do inspetor de cdigo) No menu Opes dos editores de cdigo, podem ser denidos a quebra automtica de linhas, o recuo do cdigo, a sinalizao da sintaxe por cores e muito mais. Para acessar o menu Opes, a visualizao de cdigo (ou o inspetor de cdigo) deve estar ativa. Clique na visualizao de cdigo (ou no inspetor de cdigo) para ativ-la.
Para definir as opes da visualizao de cdigo (ou do inspetor de cdigo):
Acesse as opes seguindo um dos procedimentos abaixo: Barra de ferramentas, para exibir essa barra.
Clique no menu pop-up Opes, na barra de ferramentas. Escolha Exibir > Escolha Exibir > Opes da visualizao de cdigo.
O menu Opes tambm est disponvel no alto do inspetor de cdigo.
2
Dena as opes desejadas: necessidade de rolagem horizontal. Essa denio no insere quebras de linha, mas facilita a exibio do cdigo.
Quebra automtica de linha, segmenta o texto de modo que esteja visvel sem a Nmeros de linhas adiciona nmeros s linhas lateralmente. Realar o HTML incorreto ativa o realce de erros. Quando Realar o HTML
incorreto est ativado, o Dreamweaver reala o HTML invlido (isto , que o programa no oferece suporte) em amarelo. Quando um tag invlido for selecionado, o Dreamweaver informar como corrigir o erro no inspetor de propriedades.
Sinalizao da sintaxe por cores marca as diferentes partes do cdigo com cores,
de modo que os vrios elementos possam ser identicados rapidamente. Para alterar as cores, consulte Preferncias de cores de cdigo na pgina 374.
Recuo automtico recua automaticamente o cdigo. Para alterar o espaamento

do recuo ou os tags que produzem recuo automtico, consulte Preferncias de formato de cdigo na pgina 375.
364
Captulo 14
Como gravar e editar o cdigo Durante a gravao e edio do cdigo na visualizao de cdigo (ou no inspetor de cdigo), linhas especcas do cdigo podem ser recuadas ou vericados os tags para garantir que esto ajustados. O recuo de uma linha ou seo especca do cdigo ajuda a separ-lo do restante, facilitando a sua localizao. A vericao dos tags para ver se esto ajustados ajuda a garantir que todos contm tags de abertura e nalizao. Esse procedimento especialmente til quando diversos nveis de alinhamento forem utilizados no cdigo por exemplo: quando vrias tabelas forem aninhadas em outras tabelas.
Para recuar o cdigo selecionado:
Escolha uma ou mais linhas de cdigo a serem recuadas. Para que o recuo funcione, a linha inteira deve estar selecionada. Escolha Editar > Recuar o cdigo.
O cdigo ser recuado. Escolha Editar > Remover o recuo do cdigo para retornar o cdigo recuado posio inicial.
Para verificar o ajuste dos tags:
1 2
Coloque o ponto de insero no cdigo aninhado a ser vericado. Escolha Editar > Selecionar o tag-pai. Os tags correspondentes de abertura e nalizao sero realados no cdigo. A nova escolha de Editar > Selecionar o tag-pai realar os tags correspondentes que envolvem a seleo anterior.
Como inserir os scripts

Os scripts podem ser gravados ou inseridos na visualizao de cdigo (ou no inspetor de cdigo), ou JavaScript e VBScript serem digitados na visualizao do projeto sem precisar utilizar a visualizao de cdigo. Os arquivos de script podem ser abertos na visualizao de cdigo do Dreamweaver. O Dreamweaver no altera nem regrava o arquivo. Para obter mais informaes, consulte Como abrir e editar os arquivos no-HTML no Dreamweaver na pgina 368. Para exibir os marcadores de script na janela do documento, escolha Exibir > Auxlios visuais > Elementos invisveis. Consulte tambm Como denir as preferncias de elementos invisveis na pgina 164.
365
Para inserir um script na visualizao de cdigo ou do projeto:
1 2
Coloque o ponto de insero onde o script deve ser colocado. Clique no boto Script, no painel Objetos, ou escolha Inserir > Tags invisveis > Script. Na caixa de dilogo que aparecer, escolha a linguagem de script no menu popup Linguagem. Se voc utilizar o JavaScript e no tiver certeza de sua verso, escolha JavaScript em vez de JavaScript1.1 ou JavaScript1.2.
Digite o cdigo do script na caixa de texto Contedo.
Para vincular a um arquivo de script externo:
1 2 3
Siga as etapas 1 a 3 acima. Clique em OK, deixando em branco a caixa de texto Contedo. Selecione o marcador de script na visualizao do projeto, na janela do documento. Escolha Exibir > Auxlios visuais > Elementos invisveis para exibir o marcador. Verique se os scripts esto selecionados nas preferncias de elementos invisveis, caso contrrio, o marcador de script no aparecer. Para obter mais informaes, consulte Como denir as preferncias de elementos invisveis na pgina 164.
No inspetor de propriedades, clique no cone de pasta para procurar e selecionar o arquivo de script externo, ou digite o nome do arquivo na caixa Orig.
Como editar um script Um script pode ser editado em um editor de cdigo ou na visualizao do projeto.
Para editar o script na visualizao de cdigo:
Localize o script na visualizao de cdigo e edite-o diretamente. A seleo do marcador de script na visualizao do projeto realar o script na visualizao de cdigo.
Para editar o script na visualizao do projeto:
1 2
Selecione o marcador de script. No inspetor de propriedades, clique no boto Editar.
366
Captulo 14
Se tiver sido estabelecido um link com um arquivo de script externo, o arquivo ser aberto automaticamente na visualizao de cdigo, onde podem ser feitas as edies. Caso contrrio, a caixa de dilogo Propriedades do script ser aberta e o script poder ser editado na caixa de texto Script.
Nota: Se no houver nenhum cdigo entre os tags script, a caixa de dilogo Propriedades do script ser aberta, mesmo que haja tambm um link para um arquivo de script externo.
As propriedades seguintes aparecem na caixa de dilogo Propriedades do script (e no inspetor de propriedades) quando um marcador de script for selecionado:
Linguagem especica JavaScript ou VBScript como a linguagem do script. Tipo especica o tipo de script, de cliente ou de servidor. Origem especica um arquivo de script vinculado externamente. Clique no
cone de pasta para escolher o arquivo ou digite o caminho.
Script especica onde o script ser editado/gravado.

Para verificar se as chaves esto ajustadas:
1 2
Coloque o ponto de insero no cdigo aninhado a ser vericado. Escolha Editar > Ajustar as chaves. Os tags correspondentes de abertura e nalizao sero realados no cdigo. A nova escolha de Editar >Ajustar as chaves realar os tags correspondentes que envolvem a seleo anterior.
367
Como exibir as funes de script Todas as funes de script JavaScript ou VB Script no cdigo podem ser exibidas no menu pop-up Navegao do cdigo, na barra de ferramentas (Exibir > Barra de ferramentas).
Para exibir as funes de script:
Clique no boto Navegao do cdigo, na barra de ferramentas.
Se o cdigo contiver funes JavaScript ou VB Script, elas aparecero no menu. Para ver a lista de funes em ordem alfabtica, mantenha pressionado Control (no Windows), ou Option (no Macintosh) e clique no boto Navegao do cdigo.
Para ir at uma funo no cdigo:
Selecione uma funo no menu pop-up Navegao do cdigo. A funo ser realada na visualizao de cdigo (ou no inspetor de cdigo).
Como abrir e editar os arquivos no-HTML no Dreamweaver

Quando aberto um arquivo no-HTML (.js, por exemplo) no Dreamweaver, o programa no o altera. Esses arquivos so abertos na visualizao de cdigo (ou no inspetor de cdigo), com a visualizao do projeto desativada. O arquivo pode ser editado e salvo como um arquivo HTML ou no-HTML. O Dreamweaver pode ser denido para abrir automaticamente os arquivos noHTML com determinadas extenses, como padro. Por exemplo: as preferncias podem ser denidas de modo a que os arquivos .js sejam abertos automaticamente na visualizao de cdigo (ou no inspetor de cdigo).
368
Captulo 14
Para definir as preferncias padro para os arquivos no-HTML:
1 2
Escolha Editar > Preferncias, em seguida, selecione Tipos de arquivos/editores. No campo Abrir da visualizao de cdigo, digite as extenses de nome de arquivo que sero abertas automaticamente nessa visualizao. Coloque um espao entre cada tipo de arquivo.
As extenses de arquivo padro listadas so .js, .txt e .asa. Podem ser includas quantas o usurio quiser.
Como editar um tag HTML na visualizao do projeto

Utilize o Quick Tag Editor para vericar e editar rapidamente a origem de HTML de um nico tag na visualizao do projeto, sem ter de alternar para a visualizao de cdigo e voltar. A maneira mais fcil de abrir o Quick Tag Editor pressionando as teclas Control e T (no Windows), ou Command e T (no Macintosh). O Quick Tag Editor dispe de trs modos:
Inserir o HTML, utilizado para incluir o novo cdigo HTML Editar o tag, utilizado para editar um tag existente Colocar o tag ao redor, utilizado para envolver com um novo tag a seleo
Na visualizao do projeto, a seleo determinar o modo de abertura do Quick Tag Editor. Nos trs modos, a operao bsica do Quick Tag Editor a mesma: abra o editor, digite ou edite os tags e atributos e, em seguida, feche-o. Se for utilizado qualquer HTML invlido no Quick Tag Editor, o Dreamweaver tentar corrigi-lo, inserindo aspas de nalizao e sinais de maior, onde for necessrio. Para executar uma edio de HTML mais extensa, utilize a visualizao de cdigo (ou o inspetor de cdigo).
369
Para abrir o Quick Tag Editor no modo Inserir o HTML:
Clique na visualizao do projeto, para colocar o ponto de insero onde o cdigo dever ser includo. Pressione as teclas Control e T (no Windows), ou Command e T (no Macintosh), ou clique no boto Quick Tag Editor, no inspetor de propriedades. O Quick Tag Editor aberto. Digite o tag HTML e, em seguida, pressione Enter. O tag inserido no cdigo. Pressione a tecla Esc, para sair sem fazer alteraes.
Para abrir o Quick Tag Editor no modo Editar o tag:
Selecione o texto ou objeto que est sendo editado na visualizao do projeto. O tag a ser editado tambm pode ser selecionado no seletor de tags, na parte inferior da janela do documento.
Pressione as teclas Control e T (no Windows), ou Command e T (no Macintosh), ou clique no boto Quick Tag Editor, no inspetor de propriedades. O Quick Tag Editor aberto. Digite atributos novos ou edite os j existentes, ou edite o nome do tag e, em seguida, pressione Enter. O tag editado inserido no cdigo. Pressione a tecla Esc, para sair sem fazer alteraes.
370
Captulo 14
Para abrir o Quick Tag Editor no modo Colocar o tag ao redor:
Selecione um texto ou objeto no formatado. Se for selecionado um texto ou objeto que inclua um tag HTML de abertura ou nalizao, o Quick Tag Editor ser aberto no modo Editar o tag.
Pressione as teclas Control e T (no Windows), ou Command e T (no Macintosh), ou clique no boto Quick Tag Editor, no inspetor de propriedades. O Quick Tag Editor aberto. Digite um nico tag de abertura <font="verdana">, por exemplo, e pressione a tecla Enter. O tag inserido no incio da seleo e o tag de nalizao correspondente colocado no nal. Pressione a tecla Esc, para sair sem fazer alteraes.
Para aplicar imediatamente as alteraes:
Aps a edio de um tag, pressione a tecla de tabulao ou as teclas Shift e de tabulao. As alteraes so aplicadas imediatamente, ao invs de quando o usurio sai do Quick Tag Editor. Para evitar esse comportamento, desmarque a opo Aplicar as alteraes durante a edio nas preferncias do Quick Tag Editor. Consulte Como denir as preferncias do Quick Tag Editor na pgina 373.
Nota: Quando a seleo da opo Aplicar a alteraes ao editar cancelada, vrias alteraes aplicadas de uma s vez aparecem como uma nica etapa no painel Histrico e so desfeitas com apenas uma operao Refazer. Para alternar entre os modos do Quick Tag Editor:
Com o Quick Tag Editor ativo, pressione as teclas Control+T (no Windows), ou Command+T (no Macintosh). O Quick Tag Editor altera os modos Inserir o HTML, Editar o tag e Colocar o tag ao redor, sempre que o atalho de teclado for utilizado.
Para mover o Quick Tag Editor na tela:
Arraste a ala do editor (onde aparece o nome do modo).
371
Como utilizar o menu de sugestes No Quick Tag Editor, possvel acessar um menu de sugestes de atributos que lista todos os atributos vlidos do tag que est sendo editado ou inserido. Se o Dreamweaver no reconhecer o tag que estiver sendo editado, o menu de sugestes conter todos os atributos que o Dreamweaver reconhece para qualquer tag. O menu de sugestes no aparecer, caso a opo Ativar a sugesto de tags estiver desmarcada nas preferncias do Quick Tag Editor.
Para ver uma lista dos atributos vlidos para um tag que est sendo editado:
Faa uma pausa de alguns segundos durante a edio de um nome de atributo. Aparecer um menu de sugestes, que lista todos os atributos vlidos para o tag que est sendo editado. Controle o menu de sugestes das seguintes maneiras:
Quando a digitao de um nome de atributo iniciada, o menu de sugestes

rolado e reala o primeiro nome de atributo que comece com as letras digitadas.
Para mover o realce para cima ou para baixo no menu, utilize as teclas de seta
para cima e para baixo, ou a barra de rolagem.
Para escolher o nome do atributo realado, pressione a tecla Enter (no

Windows), ou a tecla Return (no Macintosh). Uma alternativa clicar duas vezes em um nome de atributo no menu.
Para fechar a lista de sugestes sem escolher qualquer entrada, pressione Esc, ou
continue a digitao. Quando ocorrer uma pausa durante a digitao ou edio de um nome de tag, aparecer um menu suspenso de sugestes semelhante, com uma lista de nomes de tags, em vez de nomes de atributos. Os tags e atributos que aparecem no menu de sugestes tm origem no arquivo TagAttributeList.txt, que est na pasta Dreamweaver/Conguration. Se voc for um usurio experiente no Dreamweaver e quiser adicionar ou remover tags do menu de sugestes, possvel editar esse arquivo. Consulte Como abrir e editar os arquivos no-HTML no Dreamweaver na pgina 368.
Para editar os valores de atributos existentes no modo Editar o tag:
Pressione a tecla de tabulao para mover-se para frente, de um item para outro, at que o atributo (ou tag) a ser editado aparea selecionado. Pressione as teclas Shift e de tabulao, para voltar ao nome do atributo, valor do atributo ou nome do tag anterior.
372
Captulo 14
Para adicionar um novo atributo ao tag:
Utilize a tecla de tabulaao, as teclas de seta e a barra de espao para mover o ponto de insero at a posio na qual o atributo ser inserido. Digite um nome de atributo vlido para o tag. Se ocorrer uma pausa na digitao, aparecer o menu de sugestes.
Como remover um tag O tag de um documento pode ser removido, mantendo o seu contedo (se houver) na mesma posio.
Para remover um tag:
Siga um dos procedimentos abaixo: documento.
Selecione o tag, no seletor de tags, no canto inferior esquerdo da janela do Selecione algo na janela do documento, ou clique, para colocar o ponto de
insero na janela.
2
Clique com o boto direito do mouse (no Windows), ou pressione Control e clique (no Macintosh) na visualizao do projeto, e escolha Remover o tag, no menu contextual.
Como definir as preferncias do Quick Tag Editor As preferncias do Quick Tag Editor permitem controlar se as edies feitas utilizando esse editor so atualizadas automaticamente na janela do documento. Os controles para o menu de sugestes tambm podem ser ajustados. Para exibir essas preferncias, escolha Editar > Preferncias e selecione Quick Tag Editor.
Aplicar as alteraes durante a edio controla
se as alteraes do Quick Tag Editor sero atualizadas automaticamente no documento, enquanto voc percorre os atributos, no modo Editar o tag. Se esta opo for desativada, ser necessrio pressionar a tecla Enter, para aplicar as alteraes no documento. Esta opo ignorada nos modos Inserir o HTML e Colocar o tag ao redor; nesses modos, a tecla Enter deve sempre ser pressionada, para aplicar as alteraes no documento.
Ativar a sugesto de tags controla se o menu de sugestes ser exibido durante a digitao no Quick Tag Editor. O limite de tempo tambm pode ser ajustado antes da exibio do menu para o tag ou atributo.
373
Como definir as preferncias de formatao de cdigo

As seguintes preferncias de formatao de cdigo-fonte HTML podem ser denidas no Deamweaver:
As preferncias de cores de cdigo controlam como os tags HTML (e o texto

entre eles) e os scripts sero codicados utilizando cores na visualizao de cdigo ou no inspetor de cdigo. Consulte Preferncias de cores de cdigo na pgina 374.
As preferncias de formato de cdigo determinam as opes comuns de

formatao de cdigo, como tamanho e recuo da linha. Consulte Preferncias de formato de cdigo na pgina 375. Essas preferncias fornecem uma interface de usurio para alterar o arquivo SourceFormat.txt.
As preferncias de regravao de cdigo determinam quais alteraes, se houver,

o Dreamweaver far no cdigo quando um documento HTML ou de script for aberto. Consulte Preferncias de regravao de cdigo na pgina 377.
As preferncias de fontes/codicao permitem especicar a fonte com a qual o

cdigo aparecer na visualizao de cdigo (ou no inspetor de cdigo). Consulte Como denir as preferncias de fontes/codicao na pgina 93. Finalmente, o arquivo SourceFormat.txt (na pasta Dreamweaver/Conguration) fornece especicaes precisas para a formatao de cdigo. A edio desse arquivo em um editor de texto lhe possibilita o mais alto grau de controle sobre a maneira pela qual o Dreamweaver grava o cdigo; possvel alterar determinadas opes especcas a tags nesse arquivo, que no poderiam ser modicadas utilizando as preferncias de formato de cdigo. Contudo, no edite esse arquivo a menos que voc seja um usurio ou programador avanado do Dreamweaver, porque poderia produzir erros no programa. Consulte Como alterar a formatao HTML padro na pgina 569. Preferncias de cores de cdigo Utilize as preferncias de cores de cdigo para controlar as cores de fundo, texto, tag e das palavras-chave reservadas na visualizao de cdigo (ou no inspetor de cdigo). Para trabalhar com essas preferncias, escolha Editar > Preferncias e selecione Cores de cdigo.
Fundo especica
a cor de fundo da visualizao de cdigo (ou do inspetor de cdigo). Essa cor aparecer apenas quando o usurio clicar ou digitar na visualizao de cdigo ou no inspetor de cdigo.
Texto especica
a cor do texto que aparece entre os tags. Por exemplo: no cdigo <b>algum texto</b>, a palavra texto aparece na cor especicada para o texto, mas no os tags. Para anular a cor do texto de um tag especco, selecione a opo Incluir o contedo.
374
Captulo 14
Comentrios especica
a cor para os tags de comentrios ()
e seus
contedos.
Padro do tag especica
a cor para todos os tags exceto os de comentrios. Para anular essa cor, dena a opo Especco ao tag.
Palavras-chave reservadas especica a cor de todas as palavras-chave reservadas. Para anular essa cor, dena a opo Especco ao tag. Outras palavras-chave especica a cor de todas as outras palavras-chave. Para anular essa cor, dena a opo Especco ao tag. Seqncias de caracteres especica
a cor de todas as seqncias no cdigo. Para anular essa cor, dena a opo Especco ao tag. permite anular as outras denies de cores, especicando cores para tags especcos.
Especfico ao tag Para definir uma cor de um tag especfico:
Selecione um tag, na caixa Especco ao tag. Pressione a tecla Shift e clique para selecionar tags adjacentes. Para selecionar tags no-adjacentes, mantenha pressionada a tecla Control (no Windows), ou a tecla Command (no Macintosh) e, em seguida, clique.
Clique no boto de opo ao lado da amostra de cor, na parte inferior do painel, e utilize um dos seguintes mtodos para escolher um novo valor de cor: navegador ou no seletor de cores do sistema.
Clique na amostra de cor e selecione outra cor na paleta de cores aceitas pelo No campo de texto ao lado da amostra, digite um valor hexadecimal.
3
Para colorir o texto entre os tags de abertura e de nalizao, selecione Aplicar a cor ao contedo do tag.
Preferncias de formato de cdigo Utilize as seguintes preferncias de formato de cdigo para controlar a formatao de cdigo, como recuo, tamanho da linha, e caixa alta ou baixa para os nomes de tags e atributos. Para obter informaes sobre os controles de formatao de cdigo adicionais, consulte Como alterar a formatao HTML padro na pgina 569. Observe que todas as preferncias, exceto Anular a caixa de, afetam apenas os novos documentos e incluses feitas nos documentos existentes. Ou seja, quando um documento HTML que tiver sido criado anteriormente for aberto, estas opes de formatao no sero aplicadas a ele; para reformatar os documentos HTML existentes, utilize o comando Aplicar a formatao de origem. Consulte Como formatar o cdigo-fonte HTML nos documentos existentes na pgina 379.
375
Recuo ativa
o recuo de todos os tags marcados com indent no arquivo SourceFormat.txt. Consulte Como alterar a formatao HTML padro na pgina 569.
Utilizar especica
se os recuos sero feitos com espaos ou tabulaes.
Linhas e colunas da tabela recua
automaticamente os tags tr e td para facilitar a leitura do cdigo da tabela. A opo Recuo deve estar selecionada para que funcione.
Molduras e conjuntos de molduras recua automaticamente os tags frame e frameset
aninhado para facilitar a leitura dos arquivos de conjunto de molduras. A opo Recuo deve estar selecionada para que esta opo funcione.
Tamanho do recuo determina o tamanho dos recuos. O tamanho medido em espaos se a opo Utilizar estiver denida para espaos ou tabulaes, respectivamente. Tamanho da tabulao determina
o tamanho das tabulaes (medido em
caracteres de espaos).
Quebra automtica de linha adiciona
uma quebra de linha incondicional quando uma linha atinge a largura de coluna especicada. Observe que o Dreamweaver inserir quebras de linhas incondicionais apenas nos locais onde estas no alteraro a aparncia do documento nos navegadores, por isso algumas linhas podem ser mantidas mais longas que a especicao na opo Quebra automtica de linha. De modo contrrio, a caixa de seleo Quebra automtica de linha, na visualizao de cdigo (ou no inspetor de cdigo), adiciona uma quebra condicional s linhas que ultrapassarem a largura da janela.
Quebras de linha especica
o tipo de servidor remoto (Windows, Macintosh ou UNIX) que serve de host para o site remoto. A escolha do tipo adequado dos caracteres de quebra de linha assegura que o cdigo-fonte HTML aparecer corretamente quando exibido no servidor remoto. Observe que, para o FTP, essa denio aplica-se apenas ao modo de transferncia binria; o modo de transferncia ASCII do Dreamweaver ignora esse parmetro. Quando efetuado o download dos arquivos no modo ASCII, o Dreamweaver dene as quebras de linha com base no sistema operacional do computador; se for efetuado upload dos arquivos no modo ASCII, todas as quebras de linha sero denidas para CR LF. Essa denio tambm til quando se est trabalhando com um editor de texto externo que reconhece apenas determinados tipos de quebras de linha. Por exemplo: utilize CR LF (no Windows), se o Bloco de Notas for o editor externo e, no Macintosh, utilize CR, no caso do SimpleText.
Caixa dos tags e Caixa dos atributos controlam
a caixa alta ou baixa dos nomes de tags e atributos. Estas opes so aplicadas a tags e atributos inseridos ou editados na janela do documento, mas no aos inseridos diretamente na visualizao de cdigo (ou no inspetor de cdigo), ou queles inseridos em um documento quando este for aberto (a menos que uma ou ambas as opes em Ignorar a caixa de estejam selecionadas).
376
Captulo 14
Ignorar a caixa de: Tags e Atributos especica se as opes de caixa denidas sero implementadas sempre, inclusive quando for aberto um documento HTML existente. Quando uma destas opes for selecionada, todos os tags ou atributos nos documentos abertos sero imediatamente convertidos para a caixa especicada, bem como todos os tags ou atributos abertos daqui em diante (at que seja cancelada novamente esta opo). Os tags ou atributos digitados na visualizao de cdigo (ou no inspetor de cdigo) e no Quick Tag Editor tambm sero convertidos para a caixa especicada, da mesma forma que os tags e atributos inseridos utilizando o painel Objetos. Por exemplo: se desejar que os nomes de tags sejam convertidos sempre em letras minsculas, especique minsculas, em Caixa do tag e, em seguida, selecione a opo Ignorar a caixa de: Tags. Em seguida, quando for aberto um documento que contenha nomes de tags em maisculas, o Dreamweaver os converter em minsculas.
se os elementos devem ser centralizados utilizando div ou center. Ambos fazem parte da especicao HTML 4.0 Transitional, mas center conta com suporte de um nmero maior de navegadores.
align="center"
Centralizao especica
Preferncias de regravao de cdigo As preferncias de regravao de HTML determinam as aes do Dreamweaver quando abre os documentos HTML ou de script. Essas preferncias no tm efeito quando o HTML ou os scripts so editados na visualizao de cdigo ou no inspetor de cdigo. Se estas opes forem desativadas, o Dreamweaver exibir itens de markup invlidos na janela do documento para o HTML que seria regravado. Se um documento HTML for importado do Microsoft Word, poder ser utilizado o comando Limpar o HTML do Word, para remover os cdigos HTML desnecessrios. Para obter mais informaes, consulte Como limpar o HTML do Microsoft Word na pgina 379.
Ajustar os tags abertos e aninhados incorretamente regrava
os tags sobrepostos. Por exemplo: <b><i>text</b></i> ser regravado como <b><i>text</i></b>. Esta opo tambm inserir aspas e colchetes de nalizao, se estiverem faltando.
Remover os tags adicionais de finalizao exclui
os tags de nalizao sem os
correspondentes de abertura.
Advertir quando resolver ou remover tagsexibe
um resumo dos HTMLs tecnicamente invlidos que o Dreamweaver tentou corrigir. O resumo contm o local do problema (sob a forma de nmeros de linha e coluna), para que seja localizada a correo e assegurada a sua interpretao adequada.
Nunca regravar o HTML: Em Arquivos com extenses permite
fazer com que o Dreamweaver no regrave o HTML nos arquivos com a extenso de nome de arquivo especicada. Esta opo particularmente til para os tipos de arquivos que contm tags de outros fabricantes (como os tags ASP). Para obter mais informaes, consulte Como impedir a regravao de tags de outros fabricantes na pgina 582.
377
As duas opes de Caracteres especiais permitem controlar a codicao do Dreamweaver de certos caracteres em determinados contextos. Em geral, melhor manter essas opes selecionadas, a menos que os arquivos contenham tags especcos de outros fabricantes, que utilizam esses caracteres. Para obter mais informaes sobre estas opes, consulte Como impedir a regravao de tags de outros fabricantes na pgina 582.
Como limpar o cdigo-fonte HTML

Utilize o comando Limpar o HTML, para remover os tags vazios, combinar os tags font aninhados e aprimorar o cdigo HTML confuso ou ilegvel.
Para limpar o cdigo-fonte HTML:
1 2
Abra um documento existente e escolha Comandos > Limpar o HTML. Na caixa de dilogo que aparecer, escolha dentre as seguintes opes:
<b></b> e <font color="FF0000"></font> so considerados tags vazios, mas no o tag <b> em <b>algum texto</b>.
Remover os tags vazios remove os tags sem contedo entre eles. Por exemplo: Remover os tags aninhados redundantes remove todas as ocorrncias
o que gostaria de dizer</b>,
redundantes de um tag. Por exemplo: no cdigo <b>Isto <b>exatamente </b> os tags b em volta da palavra exatamente so redundantes e seriam removidos. todos os comentrios que no tiverem sido inseridos pelo Dreamweaver. Por exemplo:  seria removido, mas no  (porque um comentrio do Dreamweaver que marca o incio de uma regio editvel em um modelo).
Remover os comentrios de HTML no pertencentes ao Dreamweaver remove
Remover os comentrios de HTML pertencentes ao Dreamweaver remove

todos os comentrios inseridos pelo Dreamweaver. Por exemplo: <!-#BeginEditable "doctitle" --> seria removido, mas no  (porque no um comentrio do Dreamweaver). A remoo dos comentrios do Dreamweaver converte em documentos HTML comuns os documentos com base em modelos, e os itens de biblioteca em cdigo HTML normal (isto , eles no podero mais ser atualizados quando o modelo original ou o item de biblioteca for alterado)..
Remover tag(s) especco(s) remove os tags especicados no campo de texto

adjacente. Utilize esta opo para remover os tags personalizados, inseridos por outros editores visuais, e outros tags, que voc no deseja que apaream no seu site (por exemplo: blink). Separe vrios tags com vrgulas (por exemplo: font, blink).
378
Captulo 14
Combinar os tags <font> aninhados sempre que possvel consolida dois ou mais
tags font, quando eles controlarem a mesma faixa de texto. Por exemplo: <font size="7"><font color="#FF0000">grande e vermelho</font></font> seria alterado para <font size="7" COLOR="#FF0000">grande e vermelho</font>.
Mostrar o registro quando concluir exibe uma caixa de alerta com os detalhes
sobre as alteraes feitas no documento logo que a limpeza terminar.
3
Clique em OK. Dependendo do tamanho do documento e do nmero de opes selecionadas, a limpeza poder demorar alguns segundos.
Como formatar o cdigo-fonte HTML nos documentos existentes As opes de formatao da origem de HTML especicadas nas preferncias de formato HTML e no arquivo SourceFormat.txt sero aplicadas apenas aos novos documentos criados com o Dreamweaver subseqentemente. Para aplicar as opes de formatao nos documentos HTML existentes, utilize o comando Aplicar a formatao de origem..
Para aplicar as opes de formatao da origem de HTML a um documento j existente:
Escolha Arquivo > Abrir, para abrir um arquivo HTML existente na janela do documento. Escolha Comandos > Aplicar a formatao de origem.
Como limpar o HTML do Microsoft Word

Os documentos salvos como arquivos HTML no Microsoft Word podem ser abertos no Dreamweaver e, em seguida, possvel utilizar o comando Limpar o HTML do Word, para remover o cdigo HTML no correspondente, gerado pelo Word. O cdigo que o Dreamweaver remove basicamente utilizado pelo Word para formatar e exibir os documentos no Word, no sendo necessrio exibio do arquivo HTML. Guarde 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 Limpar o HTML do Word. O comando Limpar o HTML do Word est disponvel para os documentos salvos como arquivos HTML no Word 97 ou mais avanado.
379
Para limpar o HTML do Word:
1 2
No Microsoft Word, salve o documento como um arquivo HTML. Abra o documento HTML no Dreamweaver utilizando um dos seguintes mtodos: arquivo a ser aberto. O Dreamweaver abrir o arquivo e, em seguida, a caixa de dilogo Limpar o HTML do Word, automaticamente.
Escolha Arquivo > Importar > Importar o HTML do Word, e selecione um
Escolha Arquivo > Abrir, e selecione um arquivo a ser aberto.

gerado automaticamente um arquivo de registro de correes de HTML, se a opo Advertir ao ajustar ou remover os tags estiver selecionada nas preferncias de regravao de HTML. Isso no faz parte do recurso Limpar o HTML do Word. Clique em Continuar, para sair da caixa de dilogo. No Dreamweaver, escolha Comandos >Limpar o HTML do Word.
3
Qualquer um dos mtodos produzir uma pequena demora enquanto o Dreamweaver tenta determinar a verso do Word utilizada para salvar o arquivo. Se o Dreamweaver no puder detect-la, selecione a verso correta utilizando o menu pop-up. Escolha quais opes o recurso Limpar o HTML do Word deve utilizar. A guia Bsica exibe as seguintes opes: ao Word, inclusive o XML dos tags html, os dados meta personalizados do Word e os tags de links no cabealho do documento, o markup XML do Word, os tags condicionais e seus contedos, alm dos pargrafos vazios e margens dos estilos. Cada uma dessas opes pode ser escolhida individualmente usando a guia Detalhes.
Remover todo o markup especco ao Word remove todo o HTML especco
Limpar as CSS remove todas as CSS especcas do Word, incluindo os estilos

CSS de entrada linear quando for possvel (nos casos em que o estilo-pai tiver as mesmas propriedades do estilo), os atributos de estilo iniciados por mso, as declaraes de estilo diferentes de CSS, os atributos de estilo CSS das tabelas e todas as denies de estilo no utilizadas do cabealho. Esta opo pode ser ainda mais personalizada usando a guia Detalhes.
Limpar os tags <font> remove os tags HTML, convertendo o corpo do texto

padro para o tamanho 2 HTML.
Ajustar os tags aninhados incorretamente remove os tags do markup font

inseridos pelo Word, fora dos tags de pargrafo e cabealho (nvel de bloco).
Denir a cor do fundo insere um valor hexadecimal, para denir a cor do

fundo do documento. Se no for denida uma cor de fundo, o documento HTML do Word ter um fundo cinza. O valor hexadecimal padro denido pelo Dreamweaver branco.
380
Captulo 14
Aplicar a formatao de origem aplica no documento as opes de formatao

da origem especicadas nas preferncias de formato HTML e no SourceFormat.txt..
Mostrar o registro quando concluir exibe uma caixa de alerta com os detalhes
sobre as alteraes feitas no documento logo que a limpeza terminar.
5
Clique em OK. Dependendo do tamanho do documento e do nmero de opes selecionadas, a limpeza poder demorar alguns segundos. As preferncias escolhidas sero automaticamente salvas como denies padro de Limpar o HTML do Word.
Como utilizar os editores de HTML externos

Talvez seja conveniente utilizar um editor de texto para colocar manualmente os cdigos em grande quantidades de HTML, JavaScript ou VBScript. Qualquer editor de texto externo pode ser utilizado com o Dreamweaver, incluindo o Bloco de Notas (incorporado ao Windows 95 e NT) ou o SimpleText (incorporado ao Macintosh), BBEdit, HomeSite, vi, emacs e TextPad. Consulte Como utilizar um editor de texto externo com o Dreamweaver na pgina 381 e Como utilizar o BBEdit com o Dreamweaver (apenas no Macintosh) na pgina 382. Como utilizar um editor de texto externo com o Dreamweaver possvel iniciar o editor de texto externo principal a partir do Dreamweaver, para editar o HTML de origem no documento e, em seguida, voltar ao Dreamweaver a m de continuar a edio gracamente. O Dreamweaver detecta as alteraes que foram salvas no documento externamente e lhe avisa para recarreg-lo ao retornar. Se o BBEdit for utilizado no Macintosh, siga as etapas em Como utilizar o BBEdit com o Dreamweaver (apenas no Macintosh) na pgina 382, em vez das expostas abaixo. Para congurar os editores externos para os tipos de arquivos diferentes de texto e HTML, consulte Como iniciar um editor externo na pgina 326.
Para escolher um editor de HTML externo:
1 2
Escolha Editar > Preferncias, em seguida, selecione Tipos de arquivos/editores. Apenas no Macintosh: cancele a seleo da opo Ativar a integrao com o BBEdit, para poder utilizar um outro editor de HTML. Para utilizar o BBEdit, mantenha selecionada a opo Ativar a integrao com o BBEdit e ignore as etapas restantes. Clique no boto Procurar, ao lado da caixa Editor de cdigo externo, para escolher um editor de texto.
381
Na opo Recarregar os arquivos modicados, especique o que o Dreamweaver dever fazer ao detectar alteraes externas em um documento aberto no Dreamweaver. Na opo Salvar na iniciao, especique se o Dreamweaver deve sempre salvar o documento antes de iniciar o editor, nunca salvar o documento ou lhe perguntar se salvar ou no o documento quando o editor de texto externo for iniciado.
Para iniciar o editor de HTML externo:
Escolha Editar > Editar com (nome do editor). Como utilizar o BBEdit com o Dreamweaver (apenas no Macintosh) Quando a integrao com o BBEdit estiver ativada, uma vez que um documento estiver aberto no BBEdit e no Dreamweaver, a alternncia de um aplicativo para outro atualizar automaticamente o documento com as alteraes mais recentes. Alm disso, ambos os programas controlam a seleo; por exemplo: possvel fazer uma seleo no Dreamweaver e, em seguida, alternar para o BBEdit, onde o mesmo elemento estar selecionado. A integrao com o BBEdit pode ser desativada, se for mais conveniente trabalhar com uma verso mais antiga do BBEdit ou com um outro editor de texto HTML. As selees no sero controladas se a integrao com o BBEdit estiver desativada.
Para utilizar o BBEdit com o Dreamweaver:
1 2 3
Escolha Editar > 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 2
Escolha Editar > Preferncias e selecione Tipos/editores de arquivos. Cancele a seleo de Ativar a integrao com o BBEdit e clique em OK.
382
Captulo 14
Como editar os arquivos ColdFusion e Active Server no Dreamweaver O Dreamweaver exibe cones que identicam os blocos de cdigo Cold Fusion Markup Language (CFML) ou Active Server Page (ASP) na visualizao do projeto, sempre que possvel.
Nota: Como padro, o Dreamweaver nunca regrava o HTML encontrado nos arquivos ColdFusion e ASP. Para editar um bloco de cdigo ASP na visualizao do projeto:
1 2 3
Clique no marcador amarelo de ASP, para selecion-lo. No inspetor de propriedades, clique no boto Editar. Edite o cdigo ASP na caixa de dilogo que parecer e, em seguida, clique em OK.
Para editar um bloco de cdigo CFML na visualizao do projeto:
1 2
Clique no marcador de CFML, para selecion-lo. No inspetor de propriedades, siga um dos procedimentos abaixo: valores, ou para adicionar novos.
Clique no boto Atributos, para editar os atributos existentes do tag e seus Clique no boto Contedo, para editar o contedo que aparecer entre os tags
CFML de abertura e nalizao. Se o tag selecionado estiver vazio (ou seja, no houver um tag de nalizao), o boto Contedo estar desativado. Caso no haja marcadores ou texto realado onde existe cdigo ASP ou CFML, primeiro certique-se de que a opo Exibir > Auxlios visuais > Elementos invisveis esteja ativada. Se esta opo estiver selecionada e, mesmo assim, os cones no aparecerem, o Dreamweaver no poder exibir o cdigo como CFML ou ASP. Isto pode acontecer, por exemplo, quando tags condicionais forem inseridos em tags HTML, como no cdigo ASP seguinte:
<input type="checkbox" name="month" value="October" <% if month="October" then %>checked<% end if %> >
Para editar cdigo CFML ou ASP nos editores de cdigo, siga um dos procedimentos abaixo:
Localize o cdigo na visualizao de cdigo ou no inspetor de cdigo, e edite-o diretamente.
383
Para localizar o cdigo CFML ou ASP:
Posicione o ponto de insero prximo ao local do cdigo CFML ou ASP na visualizao do projeto. O cdigo CFML ou ASP ser realado na visualizao de cdigo ou no inspetor de cdigo, e poder ser editado diretamente. Para obter informaes sobre o processamento de cdigos CFML ou ASP, e exibir os resultados na janela do documento, consulte Como personalizar a interpretao dos tags de outros fabricantes na pgina 576.
384
Captulo 14
15
CAPTULO 15
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Links e navegao
Aps especicar um site local para armazenar os documentos do site da Web e criar as pginas HTML, talvez seja conveniente estabelecer conexes entre os seus e outros documentos ou tipos de arquivos. Para obter mais informaes sobre a congurao de um site local, consulte Como utilizar o Dreamweaver para denir um novo site na pgina 108. O Macromedia Dreamweaver oferece diversos modos de criar links de hipertexto para documentos, imagens, arquivos de multimdia ou programas dos quais se pode efetuar o download. Podem ser estabelecidos links com qualquer texto ou imagem em qualquer parte de um documento, inclusive texto ou imagens localizados em um cabealho, lista, tabela, camada ou moldura. Para obter detalhes sobre a criao de links, consulte Como criar os links na pgina 390. Para exibir uma representao visual de como os arquivos so vinculados, utilize o mapa do site. Nesse mapa, possvel adicionar novos documento ao site, criar e remover links ao documento e vericar os links aos arquivos dependentes. Consulte Como utilizar o mapa do site na pgina 124. H vrias maneiras diferentes de criar e gerenciar os links. Alguns designers da Web preferem criar links a pginas ou arquivos inexistentes, medida que trabalham, enquanto outros acham mais conveniente criar primeiro todos os arquivos e pginas e, em seguida, adicionar os links. Outra maneira de gerenciar os links criar pginas alocadoras de espao, que representam o arquivo nal e permitem adicionar links rapidamente e veric-los, antes que as pginas tenham sido realmente concludas. Consulte Como vericar links numa pgina ou site na pgina 546.
385
Sobre as localizaes e os caminhos dos documentos

Ao criar links, essencial compreender o caminho de arquivo entre o documento do qual parte o link e o que est sendo vinculado. Cada pgina da Web tem um endereo nico chamado Universal Resource Locator (URL). (Para obter informaes detalhadas sobre as URLs, consulte a pgina do World Wide Web Consortium sobre atribuio de nomes e endereos). Contudo, quando criado um link local (entre dois documentos no mesmo site), normalmente, a URL inteira do documento que est sendo vinculado no especicada; em vez disso, indicado um caminho relativo ao documento atual ou pasta raiz do site. Abaixo, esto os trs tipos de caminhos de link:
Caminhos absolutos (por exemplo: http://www.macromedia.com/support/

dreamweaver/contents.html).
Caminhos relativos a documento (por exemplo: dreamweaver/contents.html). Caminhos relativos raiz (por exemplo: /support/dreamweaver/contents.html).
Com o Dreamweaver, possvel selecionar facilmente o tipo de caminho de documento a ser criado para os links. Consulte Como vincular documentos utilizando o inspetor de propriedades e o cone do indicador de arquivos na pgina 391.
Nota: melhor utilizar o tipo de link preferido ou mais confortvel, relativo ao documento ou 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 a URL completa 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. Deve ser utilizado um caminho absoluto para estabelecer um link a 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 exibilidade quando for necessrio mover os arquivos no site.
Nota: 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 para as imagens. Para obter mais informaes, consulte Como inserir uma imagem na pgina 291.
386
Captulo 15
Caminhos relativos a documento 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 esto na mesma pasta, e possivelmente permanecero juntos. O caminho relativo a documento tambm utilizado para estabelecer um link a um documento em outra pasta, especicando o caminho atravs da hierarquia de pastas, do documento atual ao vinculado. Na especicao desse caminho, no consta a parte da URL absoluta, que a mesma para ambos os documentos. fornecido apenas o segmento do caminho que diferente.
Para estabelecer um link a outro arquivo na mesma pasta que o documento

atual, basta indicar o nome do arquivo.
Para vincular a um arquivo em uma subpasta da pasta do documento atual,

fornea o nome da subpasta, coloque uma barra inclinada para a direita e, em seguida, o nome do arquivo.
Para vincular a um arquivo em uma pasta-me daquela onde est o documento

atual, preceda o nome do arquivo por ../ (onde .. signica um nvel acima na hierarquia de pastas). Por exemplo: suponha que o site tenha esta estrutura:
meu_site (pasta raiz)
suporte
contedo.html
horas.html
recursos
dicas.html
produtos
catlogo.html
Links e navegao
387
Para estabelecer um link de contents.html a outros arquivos:
Para estabelecer um link de contents.html a hours.html (ambos os arquivos

esto na mesma pasta), o nome do arquivo o caminho relativo: hours.html.
Para vincular a tips.html (na subpasta chamada resources), utilize o caminho

relativo resources/tips.html. Cada barra inclinada (/) representa mover um nvel abaixo na hierarquia de pastas.
Para vincular a index.html (na pasta-me, 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-me), utilize o

caminho relativo ../products/catalog.html. A ../ move um nvel acima em direo pasta-me; products/ move um nvel para baixo na subpasta products.
Nota: 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.
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 utilizando a janela do site, o Dreamweaver atualizar automaticamente todos os links relevantes. Caminhos relativos raiz Caminhos relativos raiz fornecem o caminho da pasta raiz do site a um documento. Pode ser conveniente utilizar esses tipos de caminhos ao trabalhar em um site grande da Web, que use vrios servidores, ou um servidor que hospede diversos sites diferentes. Contudo, se voc no estiver familiarizado com esse tipo de caminho, pode ser melhor continuar usando os caminhos relativos a documento. Um caminho relativo raiz inicia com uma barra inclinada para a direita, que representa a pasta raiz do site. Por exemplo: /support/tips.html um caminho relativo raiz para um arquivo (tips.html) na subpasta support, dentro da pasta raiz do site.
388
Captulo 15
Um caminho relativo raiz , normalmente, o melhor modo de especicar 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 utilizando a janela do site, o Dreamweaver atualizar automaticamente todos os links relevantes.
Para utilizar os caminhos relativos raiz, dena primeiro um site local no

Dreamweaver escolhendo uma pasta raiz local que seja equivalente raiz do documento em um servidor. Consulte Como utilizar o Dreamweaver para denir um novo site na pgina 108. O Dreamweaver utiliza essa pasta para determinar os caminhos relativos raiz para os arquivos.
Nota: Os links relativos raiz so interpretados pelos servidores, e no pelos navegadores, por isso, se for aberta uma pgina que utiliza links relativos raiz no seu navegador (sem usar Visualizar no navegador, no Dreamweaver), os links no funcionaro. Quando o recurso Visualizar no navegador for utilizado para visualizar um documento que contm links relativos raiz, o Dreamweaver converter temporariamente esses links (apenas no arquivo visualizado) para usar os caminhos file:// absolutos. Contudo, possvel visualizar apenas uma pgina de cada vez, que utilize os links relativos raiz se um link for seguido a partir da pgina visualizada, os links relativos raiz da nova pgina no sero convertidos e o navegador no poder segui-los. A exibio de pginas em conjuntos de molduras que utilizam links relativos raiz causa problemas semelhantes. Para visualizar um conjunto de pginas que utilizam links relativos raiz, siga um dos procedimentos abaixo:
Coloque os arquivos em um servidor remoto e exiba-os nesse local. (Apenas no Windows) Escolha Editar > Preferncias, e nas Preferncias de
visualizao no navegador, selecione Visualizar utilizando o servidor local. Para usar essa opo, necessrio que um servidor da Web esteja em execuo no seu computador local.
Links e navegao
389
Como criar os links

O tag HTML para criar um link de hipertexto chamado de tag de ncora ou de tag a. O Dreamweaver cria um par de tags de ncora para objetos, texto ou imagens criados para serem vinculados. Podem ser criados links para outros documentos e arquivos, e para locais especcos em um nico documento usando o tag a href. Por exemplo: se for selecionado na janela do documento o texto Home Page e, em seguida, for criado um link a um arquivo denominado home.htm, o cdigo-fonte HTML para o link deve ter a aparncia abaixo:
<a href="home.htm">Home Page</a>
Se um link for criado para um local especco de um documento, necessrio criar primeiro uma ncora com nome. Por exemplo: a name="MainMenu". Em seguida, crie um link dentro da pgina que se rera ncora com nome. Por exemplo: a href="#MainMenu". Antes de criar os links, certique-se de ter compreendido como funcionam os caminhos relativos a documento, relativos raiz e absolutos. Consulte Sobre as localizaes e os caminhos dos documentos na pgina 386. Podem ser criados diversos tipos de links em um documento.
Um link a outro documento ou arquivo, como um arquivo de imagem, lme,

PDF ou som.
Um link de ncora com nome, que salta para uma localizao especca em um
documento.
Um link de correio eletrnico, que cria uma nova mensagem com o endereo
do destinatrio j preenchido.
Os links nulos e de script, que permitem anexar comportamentos a um objeto

ou criar um link que execute cdigo JavaScript. Com o Dreamweaver, h diversas maneiras de criar facilmente links locais (entre os documentos de um mesmo site):
Utilize a janela do mapa do site para exibir, criar, alterar ou excluir links. Na janela do documento, utilize Modicar > Criar link, para selecionar um
arquivo a ser vinculado.
Utilize o inspetor de propriedades para estabelecer o link a um arquivo,

utilizando o cone da pasta, para procurar e selecionar um arquivo atravs do cone do indicador de arquivos, para selecionar um arquivo ou digitar o seu caminho.
Nota: A digitao de URLs ou caminhos a um arquivo pode produzir links e caminhos incorretos que no funcionam. Para garantir um caminho correto, utilize o cone correspondente pasta para procurar o link.
390
Captulo 15
No menu contextual, escolha Criar link e, em seguida, selecione um arquivo a

ser vinculado. Para criar um link externo (a um documento em outro site), digite um caminho absoluto (com o protocolo adequado) no inspetor de propriedades. Ao criar links externos, verique se foi digitado o caminho completo (incluindo http://). Como vincular documentos utilizando o inspetor de propriedades e o cone do indicador de arquivos Utilize o inspetor de propriedades e o cone do indicador de arquivos para criar links de uma imagem, objeto ou texto para outro documento ou arquivo. Para obter mais informaes, consulte Como criar e modicar os links no mapa do site na pgina 399.
Para criar links entre documentos usando o cone correspondente pasta ou a caixa de texto do link:
Selecione o texto ou uma imagem na visualizao do projeto, na janela do documento. Abra o inspetor de propriedades (Janela > Propriedades) e siga um dos procedimentos abaixo:
Clique no cone correspondente pasta, direita do campo Link, para procurar

e selecionar um arquivo. O caminho para o documento vinculado aparecer no campo URL. Utilize o menu pop-up Relativo a, na caixa de dilogo Selecionar o arquivo HTML, para escolher se o caminho ser relativo a documento ou raiz e, em seguida, clique em Selecionar.
Nota: Quando o tipo de caminho for alterado no campo Relativo a, o Dreamweaver definir a seleo como o tipo de caminho padro para os links posteriores at que ela seja modificada.
No campo Link, digite o caminho e o nome do arquivo do documento.

Para criar um link a um documento no site, digite um caminho relativo a documento ou raiz. Para criar um link a um documento fora do site, digite um caminho absoluto que inclua o protocolo (por exemplo: http://). Esse procedimento pode ser utilizado para digitar um link a um arquivo que ainda no foi criado.
Links e navegao
391
Selecione a localizao na qual o documento ser aberto. Para que o documento vinculado aparea em um local diferente da janela ou moldura atual, selecione uma opo no menu pop-up Destino, no inspetor de propriedades.
Sugesto: Se todos os links da pgina forem definidos para o mesmo destino, possvel especific-lo uma vez, escolhendo Inserir > Tag do cabealho > Base e selecionando as informaes do destino.
Para obter informaes sobre a maneira de designar molduras, consulte Como controlar o contedo de molduras com os links na pgina 233.
Para estabelecer um link a um documento usando o cone do indicador de arquivos:
Selecione o texto ou uma imagem na visualizao do projeto, na janela do documento. Arraste o cone do indicador de arquivos, direita do campo Link, no inspetor de propriedades, e indique um outro documento aberto, uma ncora visvel em um documento aberto ou um documento na janela do site. O campo Link ser atualizado para mostrar o link.
Nota: O documento aberto na janela do documento ou do site, que est sendo indicado, ser movido para o primeiro plano da tela, durante a seleo.
Solte o boto do mouse.
Como arrastar o cone do indicador de arquivos do inspetor de propriedades at um arquivo na janela do site.
392
Captulo 15
Para criar um link a partir de uma seleo em um documento aberto:
1 2
Selecione o texto na visualizao do projeto, 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.
Indique um outro documento aberto, uma ncora visvel de um documento aberto ou um documento na janela do site. Solte o boto do mouse.
Pressione a tecla Shift e arraste o cone do indicador de arquivos, do texto na janela do documento at um arquivo na janela do site.
Para criar um link usando o mapa do site e o cone do indicador de arquivos:
Na janela do site, exiba as visualizaes de arquivos do site e de mapa do site mantendo pressionado o cone de mapa do site e escolhendo 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 indicador de arquivos e aponte-o para outro arquivo no mapa do site ou para um arquivo local na visualizao dos arquivos do site.
Links e navegao
393
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.
Para obter informaes sobre a exibio de um mapa de site, consulte Como utilizar o mapa do site na pgina 124. Como estabelecer um link a um local especfico de um documento O inspetor de propriedades pode ser utilizado para estabelecer um link a uma determinada seo de um documento, criando primeiro as ncoras com nomes. Essas ncoras permitem denir marcadores em um documento e so colocadas, freqentemente, em um tpico especco ou no alto do documento. Podem ser criados links para essas ncoras com nome, que levam rapidamente o visitante at a posio especicada. A criao de um link a uma ncora com nome um processo em duas etapas. Primeiro, crie uma ncora com nome e, em seguida, crie um link a essa ncora.
Para criar uma ncora com nome:
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:
Escolha Inserir > Tags invisveis > ncora com nome. Pressione as teclas Control, Alt e A (no Windows), ou Command, Option e A
(no Macintosh).
Na categoria Invisveis do painel Objetos, clique no boto ncora com nome.
394
Captulo 15
No campo Nome da ncora da caixa de dilogo Inserir ncora com nome, digite o nome da ncora. Se no aparecer um marcador da ncora no local do ponto de insero, escolha Exibir > Auxlios visuais >Elementos invisveis.
Nota: Os nomes de ncoras no podem conter espaos nem devem ser colocados dentro de uma camada. Para estabelecer um link a uma ncora com nome:
Na visualizao do projeto, na janela do documento, selecione um texto ou uma imagem da qual ser criado um link. No campo Link, no inspetor de propriedades, digite um sinal de nmero (#) e o nome da ncora. Por exemplo: digite #alto.
Para estabelecer um link a uma ncora com o nome "alto" no arquivo atual, Para estabelecer um link a uma ncora com o nome alto em um documento
diferente, na mesma pasta, digite nomedoarquivo.html#alto.
Nota: Os nomes de ncoras so sensveis a maisculas e minsculas. Para estabelecer um link a uma ncora utilizando o mtodo de indicao de arquivos:
1 2
Abra o documento que contm a ncora com nome escolhida. Escolha Exibir > Auxlios visuais >Elementos invisveis, para tornar a ncora visvel. 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: de propriedades, e arraste-o at a ncora que ser vinculada: uma ncora no mesmo documento ou em outro documento aberto.
Clique no cone do indicador de arquivos, direita do campo Link, no inspetor Pressione a tecla Shift e arraste o cursor na janela do documento, a partir do
texto ou imagem selecionada at a ncora que ser vinculada: uma ncora no mesmo documento ou em outro documento aberto.
Links e navegao
395
Como 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 eletrnica, o campo Para ser atualizado automaticamente com o endereo especicado no link de correio eletrnico.
Para criar um link de correio eletrnico utilizando o comando Inserir link de correio eletrnico:
Na visualizao do projeto, na janela do documento, posicione o ponto de insero onde dever aparecer o link de correio eletrnico ou selecione o texto a ser mostrado neste lugar. Siga um dos procedimentos abaixo:
Escolha Inserir > Link de correio eletrnico. Na categoria Comuns do painel Objetos, selecione Inserir link de correio
eletrnico.
2
No campo Texto, na caixa de dilogo Inserir link de correio eletrnico, digite ou edite o texto que aparecer no documento como um link de correio eletrnico. No campo Correio eletrnico, digite o endereo eletrnico do destinatrio. Clique em OK.
3 4
Para criar um link de correio eletrnico utilizando o inspetor de propriedades:
Selecione o texto ou uma imagem na visualizao do projeto, na janela do documento. No campo Link, no inspetor de propriedades, digite mailto: seguido de um endereo de correio eletrnico. No digite espaos entre os dois pontos e o endereo eletrnico. Por exemplo: digite mailto:jdoe@macromedia2.com.
396
Captulo 15
Como criar links nulos e de script Os tipos mais comuns de links ocorrem entre documentos e ncoras com nome (descritos em Como vincular documentos utilizando o inspetor de propriedades e o cone do indicador de arquivos na pgina 391 e Como estabelecer um link a um local especco de um documento na pgina 394, respectivamente), mas h tambm outros tipos de links. 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 a anexao de comportamentos a objetos, consulte Como anexar um comportamento na pgina 473.
Um link nulo Links de scripts executam o 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:
Selecione o texto, uma imagem ou um objeto na visualizao do projeto, na janela do documento. No inspetor de propriedades, digite um sinal de nmero (#) no campo Link.
Para criar um link de script:
Selecione o texto, uma imagem ou um objeto na visualizao do projeto, na janela do documento. No campo Link, no inspetor de propriedades, digite javascript: seguido de cdigo JavaScript ou de uma chamada a funo. Por exemplo: a digitao de javascript:alert('Este link conduz ao ndice') no campo Link produz um link que, quando clicado, exibe uma caixa de alerta JavaScript com a mensagem Este link conduz ao ndice.
Nota: 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\").
Links e navegao
397
Como gerenciar os links

O Dreamweaver pode atualizar os links de e para um documento, sempre que este for movido ou renomeado em um site local. Esse recurso funciona melhor quando o site inteiro (ou toda uma seo autnoma deste) estiver armazenado na unidade local. Nenhuma alterao ser feita nos arquivos que estiverem no site remoto, at que os arquivos locais sejam colocados ou devolvidos ao servidor remoto.
Para ativar o gerenciamento de links no Dreamweaver:
1 2
Escolha Editar > Preferncias e, em seguida, selecione a categoria Geral. Selecione Sempre, ou Solicitar, no menu pop-up Atualizar os links ao mover os arquivos, e clique em OK. Se for escolhida a opo Sempre, o Dreamweaver atualizar automaticamente todos os links para e de um documento selecionado sempre que este for movido ou renomeado. (Para obter instrues especcas sobre o que fazer quando um arquivo for excludo, consulte Como alterar um link no site inteiro na pgina 400). Quando for escolhida a opo Solicitar, o Dreamweaver exibir primeiramente uma caixa de dilogo que contm uma lista de todos os arquivos afetados pela alterao. Clique em Atualizar, para atualizar os links nestes arquivos, ou em No atualizar, para deix-los inalterados.
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 do site local. Esse arquivo de cache ser criado quando a opo Cache estiver selecionada na caixa de dilogo Denio do site, e ser atualizado imperceptivelmente durante a utilizao do Dreamweaver para adicionar, alterar ou excluir links a arquivos no site local.
Para criar um arquivo de cache do site:
1 2
Escolha Site > Denir os sites. Selecione o site na caixa de dilogo Denir os sites e, em seguida, clique em Editar. Na categoria Informaes locais, marque a caixa de seleo Ativar o cache.
Na primeira vez em que os links a arquivos forem alterados ou excludos no site local, aps ter iniciado o Dreamweaver, este aplicativo lhe solicitar a carga do cache. Se voc clicar em Sim, o cache ser carregado e todos os links ao arquivo alterado sero automaticamente atualizados. Se escolher No, as alteraes podero ser observadas no cache, porm este no ser carregado e os links no sero atualizados.
398
Captulo 15
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 m de vericar se este est desatualizado. Se nenhum arquivo tiver sido alterado fora do Dreamweaver, no haver problemas em clicar em Parar, quando o boto aparecer.
Para criar novamente o cache do site:
Na janela do site, escolha Recriar o cache do site. Como criar e modificar os links no mapa do site possvel modicar a estrutura do site no respectivo mapa adicionando, alterando e removendo links. O mapa do site ser atualizado automaticamente, exibindo as alteraes feitas no site.
Para adicionar um link, siga um dos procedimentos abaixo:
Arraste uma pgina do Windows Explorer ou do Localizador do Macintosh, e

solte-a em uma pgina do mapa do site.
Selecione uma pgina HTML e escolha Site > Link a um arquivo existente (no
Windows), ou Site > Visualizao do mapa do site > Link a um arquivo existente (no Macintosh), ou escolha Link a um arquivo existente, no menu contextual.
Selecione uma pgina HTML no mapa do site. Aparecer o cone do indicador

de arquivos. Arraste o cone at o objeto a ser vinculado: um arquivo na visualizao dos arquivos do site, um documento do Dreamweaver aberto ou uma ncora com nome em um documento aberto na rea de trabalho. Consulte Como vincular documentos utilizando o inspetor de propriedades e o cone do indicador de arquivos na pgina 391.
Para alterar um link:
No mapa do site, selecione a pgina cujo link est sendo alterado e escolha Site > Alterar o link (no Windows), ou Site > Visualizao do mapa do site > Alterar o link (no Macintosh). Procure o arquivo ou digite uma URL.
Para remover um link, siga um dos procedimentos abaixo:
Selecione a pgina no mapa do site e escolha Site > Remover o link (no
Windows), ou Site > Visualizao do mapa do site > Remover o link (no Macintosh).
Selecione a pgina no mapa do site e escolha Remover o link, no

menu contextual. A remoo de um link no exclui o arquivo, mas remove o link da origem de HTML na pgina que est indicando o link.
Links e navegao
399
Para abrir a origem de um link:
1 2
Selecione um arquivo no mapa do site. Escolha Site > Abrir a origem do link (no Windows), ou Site > Visualizao do mapa do site > Abrir a origem do link (no Macintosh). O inspetor de propriedades e o arquivo de origem que contm o link sero abertos. O link ser realado.
Como 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 lmes 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 2 3
Selecione um arquivo no painel Pasta local, na janela de site. Escolha Site > Alterar o link no site inteiro. Na caixa de dilogo que aparecer, clique no cone de pasta para procurar e selecionar um arquivo. possvel tambm digitar o caminho e o nome do arquivo no campo Em links a. Clique em OK. O Dreamweaver atualizar os documentos que se vincularem ao arquivo selecionado, de maneira que indiquem o novo arquivo, utilizando o formato de caminho existente no documento (por exemplo: se o caminho antigo for relativo a documento, o novo caminho tambm ser do mesmo tipo). O tipo de link, relativo a documento ou raiz, no importante. O link ser atualizado automaticamente.
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.
Nota: 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.
400
Captulo 15
Para alterar os links de correio eletrnico, FTP, nulos ou de scripts no site inteiro:
1 2
Escolha Site > Alterar o link no site inteiro. Na caixa de dilogo Alterar o link no site inteiro, digite as seguintes informaes: sendo alterado.
No campo Alterar todos os links a, digite o texto completo do link que est No campo Em links a, digite o texto completo do link de substituio.
3
Clique em OK.
Por exemplo: para atualizar todos os links de correio eletrnico que levam ao seu endereo antigo, digite mailto:juser@isp.com na caixa Alterar todos os links a, e digite mailto:juser-interface@isp.com na caixa Em links a.
Como criar menus de salto

Um menu de salto um menu pop-up em um documento, visvel aos usurios do site, que lista as opes que estabelecem links a documentos e arquivos. Podem ser criados links a documentos no seu site da Web, a documentos em outros sites da Web, links de correio eletrnico, links a imagens ou a qualquer tipo de arquivo que possa ser aberto em um navegador. H trs componentes bsicos que um menu de salto pode conter:
Um aviso de seleo no menu, como uma descrio da categoria para os itens

do menu, ou instrues. Por exemplo: Escolha uma opo. (Opcional)
Uma lista de itens de menu vinculados: um usurio escolhe uma opo e um

documento ou arquivo vinculado aberto. (Necessrio)
Um boto Ir. (Opcional)
Links e navegao
401
Como inserir um menu de salto Para inserir um menu de salto no documento, utilize o objeto formulrio Menu de salto.
Para criar um menu de salto:
Escolha Inserir > Objeto formulrio > Menu de salto. Aparecer a caixa de dilogo Menu de salto. Para criar um aviso de seleo, digite o texto do aviso no campo Texto da caixa de dilogo. Em Opes, marque a caixa de seleo Selecionar o primeiro item aps a alterao da URL e, em seguida, clique no boto com o sinal de adio (+) para incluir um item de menu. No campo Texto, da caixa de dilogo Inserir o menu de salto, digite o texto que aparecer na lista do menu. No campo Aps selecionar, v para a URL, selecione o arquivo a ser aberto e siga o procedimento abaixo:
Clique em Procurar e, em seguida, selecione o arquivo a ser aberto. Digite o caminho do arquivo a ser aberto.
5
No menu pop-up Abrir as URLs em, selecione uma localizao onde o arquivo ser aberto:
Selecione Janela principal, para abrir o arquivo na mesma janela. Selecione uma moldura onde ser aberto o arquivo.
Nota: Se a moldura a ser designada no aparecer no menu pop-up Abrir as URL em, feche a caixa de dilogo Inserir o menu de salto, e digite o nome da moldura. Para obter mais informaes sobre a maneira de designar uma moldura, consulte Como definir as propriedades das molduras na pgina 227.
Para adicionar um boto Ir em vez de um aviso de seleo no menu: Em Opes, selecione a opo Inserir o boto Ir aps o menu. Para incluir itens de menu adicionais, clique no boto com o sinal de adio (+) e repita as etapas 3 a 6 desse procedimento. Clique em OK.
402
Captulo 15
Como editar os itens do menu de salto Para alterar os itens do menu de salto, utilize o inspetor de propriedades ou o painel Comportamentos. possvel alterar a ordem da lista ou o arquivo ao qual um item est vinculado, ou adicionar, excluir ou renomear um item. Para alterar a localizao na qual um arquivo vinculado aberto, ou adicionar ou alterar um aviso de seleo no menu, deve ser utilizado o painel Comportamentos; consulte Menu de salto na pgina 491.
Para editar um item do menu de salto com o inspetor de propriedades:
1 2
No inspetor de propriedades, escolha Janela > Propriedades. Na visualizao do projeto da janela do documento, clique no objeto menu de salto para selecion-lo. Aparecer o cone de menu de lista, no inspetor de propriedades. No inspetor de propriedades, clique no boto Valores da lista. Altere os itens do menu e, em seguida, clique em OK.
3 4
Como solucionar problemas nos menus de salto Quando os usurios escolhem um item de menu de salto, no possvel selecionlo novamente, caso eles retornem a essa pgina ou se o campo Abrir a URL em especicar uma moldura. 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 novamente aps cada seleo no menu.
Utilize um boto Ir, que permite ao usurio visitar de novo o link que estiver
selecionado.
Nota: Selecione apenas uma destas opes por menu de salto, porque elas se aplicam a todo um menu de salto.
Links e navegao
403
Como criar as barras de navegao

Uma barra de navegao composta por uma ou um conjunto de imagens, que exibe as alteraes com base nas aes de um usurio. As barras de navegao so, com freqncia, um modo fcil de se mover entre as pginas e arquivos de um site.
Antes de utilizar o comando Inserir a barra de navegao, crie 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. Um elemento da barra de navegao pode apresentar quatro estados:
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.
Sobreposta: a imagem que aparecer quando o cursor for movido sobre uma
imagem ativa. A aparncia do elemento alterada (por exemplo: poder car mais clara) para informar aos usurios que eles no podem interagir com o elemento.
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.
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 dever aparecer 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 de barra de navegao para os quatro estados; por exemplo: talvez sejam escolhidos apenas os estados Ativa e Inativa.
404
Captulo 15
Voc pode criar uma barra de navegao, copi-la em outra pginas no seu site, utiliz-la com molduras e editar os comportamentos da pgina, para mostrar os diferentes estados medida que as pginas so acessadas. Como inserir uma barra de navegao Quando uma barra de navegao inserida, os nomes dos elementos da barra recebem nomes e so escolhidas imagens que os representem.
Para criar uma barra de navegao:
Escolha Inserir > Imagens interativas > Barra de navegao. Na categoria Comuns do painel Objetos, selecione Inserir a barra de navegao.
Aparecer a caixa de dilogo Inserir a barra de navegao.
No campo Nome do elemento, digite o nome do elemento da barra de navegao por exemplo: Home. Cada elemento corresponde a um boto com um conjunto de at quatro imagens de estados. Os nomes dos elementos aparecero na lista Elementos da barra de navegao. Utilize os botes de seta para organizar os elementos na barra de navegao.
Links e navegao
405
Selecione as opes de estado da imagem para esse elemento (voc deve escolher uma Imagem ativa; os outros estados da imagem so opcionais):
No campo Imagem ativa, clique em Procurar, para selecionar a imagem inicial. No campo Imagem sobreposta, clique em Procurar, para selecionar a imagem a
ser mostrada quando o usurio mover o cursor sobre o elemento, quando a imagem ativa estiver em exibio.
No campo Imagem inativa, clique em Procurar, para selecionar a imagem a ser

exibida depois que o usurio clicar no elemento.
No campo Imagem sobreposta enquanto inativa, clique em Procurar, para

selecionar a imagem a ser exibida quando o usurio mover o cursor sobre a imagem inativa.
No campo Quando clicado, v para a URL, selecione uma localizao na qual o

arquivo vinculado ser aberto e siga um dos procedimentos abaixo:
Selecione Janela principal, para abrir o arquivo na mesma janela. Selecione uma moldura na qual o arquivo ser aberto.
Nota: Se a moldura a ser designada no aparecer no menu pop-up, saia da caixa de dilogo Inserir a barra de navegao e digite o nome da moldura. Para obter informaes sobre a maneira de denominar uma moldura, consulte Como definir as propriedades das molduras na pgina 227.
Selecione as opes de carga da imagem: carregada. Se esta opo no estiver selecionada, pode haver uma demora quando o usurio mover o cursor do mouse sobre a imagem cambivel.
Pr-carregar as imagens efetua o download das imagens quando a pgina Selecione Mostrar a imagem inativa inicialmente, para exibir o elemento
escolhido em seu estado inativo, quando a pgina for exibida. Por exemplo: quando a home page for carregada, o elemento Home na barra de navegao dever estar no estado inativo. Quando esta opo for selecionada, aparecer um asterisco aps o elemento na lista Elementos da barra de navegao.
5
Em Inserir, selecione uma destas opes: horizontalmente no documento, utilize o menu pop-up Inserir.
Para escolher se os elementos da barra de navegao sero inseridos vertical ou Para inserir os elementos da barra de navegao como uma tabela, marque a
caixa de seleo Utilizar as tabelas.
6
Clique no boto com o sinal de adio (+) para adicionar outro elemento barra de navegao e, em seguida, repita as etapas 2 a 5 at terminar de denir todos os elementos. Clique em OK.
406
Captulo 15
Como modificar uma barra de navegao Quando uma barra de navegao for criada para um documento, as suas imagens podero ser adicionadas ou removidas, atravs do comando Modicar a barra de navegao. Esse comando serve para alterar uma imagem ou um conjunto de imagens, mudar o arquivo que ser aberto quando um boto for clicado, selecionar uma janela ou moldura diferente na qual abrir um arquivo, e reordenar a posio das imagens.
Para modificar uma barra de navegao:
1 2 3
Escolha Modicar > Barra de navegao. Na lista Elementos da barra de navegao, selecione o elemento a ser editado. Edite-o e, em seguida, clique em OK.
Como anexar comportamentos aos links

Um comportamento pode ser anexado a qualquer link em um documento. Considere a possibilidade de utilizar os seguintes comportamentos ao inserir elementos vinculados em seus documentos. Para obter mais informaes, consulte Como anexar um comportamento na pgina 473.
Definir a mensagem de status 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. Consulte Denir a mensagem de status na pgina 499. Abrir a janela do navegador utilizado para abrir uma URL em uma nova janela. possvel especicar as propriedades da nova janela, inclusive o seu tamanho, nome e atributos (se ela ser redimensionvel, possuir uma barra de menus e assim por diante). Consulte Abrir a janela do navegador na pgina 492. Menu de salto utilizado para editar um menu de salto. possvel alterar a lista de
menus, especicar um arquivo vinculado diferente ou modicar o local do navegador no qual os documentos vinculados sero abertos. Consulte Menu de salto na pgina 491.
Definir a imagem da barra de navegaopermite 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 ponteiro estiver sobre uma parte da barra de navegao, a exibio das outras imagens na barra ou no documento ser alterada. Consulte Denir a imagem da barra de navegao na pgina 496.
Links e navegao
407
408
Captulo 15
16
CAPTULO 16
Como reutilizar o contedo com os modelos e bibliotecas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
O painel Propriedades (consulte Como gerenciar e inserir propriedades na pgina 237) fornece acesso a todas as propriedades do site. O Dreamweaver oferece duas categorias vinculadas especiais de propriedades: modelos e bibliotecas. Uma pgina que utiliza uma propriedade vinculada ser atualizada automaticamente quando a propriedade vinculada for alterada. Os modelos e bibliotecas do Dreamweaver podem auxili-lo a criar pginas da Web com um desenho consistente. A utilizao de modelos e bibliotecas tambm facilita a manuteno do site da Web, j que possvel redesenh-lo e alterar centenas de pginas em segundos. Um modelo um documento que pode ser utilizado para criar diversas pginas com o mesmo layout. Quando um modelo criado, possvel indicar quais elementos de uma pgina devero permanecer inalterados (no-editveis ou bloqueados), em documentos baseados neste modelo, e quais podero ser alterados. Por exemplo: caso voc esteja publicando uma revista on-line, o nome e a aparncia geral do layout provavelmente no sero alterados de uma edio para outra, ou at mesmo de uma matria para outra, mas o ttulo e o contedo da matria sero diferentes. Um designer poder criar o layout da pgina de matria de uma revista, com texto do alocador de espao, onde o ttulo da matria e seu contedo estaro (e com aquelas regies marcadas para a edio); o designer poder, ento, salvar este layout como um modelo. A pessoa responsvel pela nova edio da revista criar uma nova pgina com base no modelo e substituir o texto do alocador de espao pelo ttulo e texto real da nova matria. Um modelo pode ser modicado mesmo depois da criao de documentos que tiverem se baseado nele. Ao modicar um modelo, as regies bloqueadas (no editveis) dos documentos que se basearem no modelo sero atualizadas para corresponder s alteraes ao modelo.
409
Nota: Se abrir um arquivo de modelo, voc pode editar qualquer elemento deste arquivo, independente de estar marcado como editvel ou bloqueado. Se abrir um documento que se baseia num arquivo de modelo, apenas as regies que estiverem marcadas como editveis podero ser editadas. Portanto, os termos editvel e bloqueado se referem ao fato de a regio ser editvel nos documentos com base em modelo, e no no arquivo do modelo.
Os modelos so os melhores instrumentos nas situaes em que voc desejar impor um layout idntico a um grupo de pginas. Nestes casos, projete inicialmente o layout nal completo do conjunto de pginas e, em seguida, adicione o contudo s pginas. Se voc desejar apenas que as pginas tenham os mesmos cabealhos e rodaps, com layouts variveis, utilize os itens de biblioteca para armazenar os cabealhos e rodaps. Os itens de biblioteca so elementos de pgina armazenados que podem ser reutilizados em diversas pginas; da mesma maneira que os modelos, possvel atualizar todas as pginas que utilizarem um item de biblioteca, sempre que desejar alterar o contedo do item. Para obter mais informaes, consulte Como criar, gerenciar e editar os itens de biblioteca na pgina 429. importante observar que nas pginas criadas com modelos, no possvel converter as tabelas em camadas ou vice-versa.
Nota: A utilizao de um modelo pode limitar as alteraes posteriores ao projeto e ao layout. Se, posteriormente, voc pretender efetuar grandes alteraes de layout s pginas, utilize os itens de biblioteca, ao invs de modelos.
Os modelos so partircularmente teis num ambiente de colaborao, nos quais o designer controla os layouts de pgina e outras pessoas, que no contam com autorizao para alterar o layout, adicionam contedo s pginas. O Dreamweaver tambm oferece outros tipos de contedo reutilizvel: as serverside includes (incluses do servidor) e os itens de biblioteca. Voc poder utilizar estes elementos para o contedo que se repetir em todas as pginas do site (os cabealhos e rodaps, por exemplo) ou que aparecer apenas em algumas pginas, mas que deve ser atualizado freqentemente (como as manchetes de notcias ou descontos nas vendas). Estas abordagens so apropriadas para tipos diversos de sites:
As server-side includes (incluses do servidor) podem ser utilizadas apenas nos

sites que forem exibidos a partir de um servidor, e no nos sites que forem exibidos num sistema local sem um servidor. Elas podem ser vistas apenas nos servidores que estiverem congurados para process-las. Pergunte ao seu webmaster ou ao administrador da rede se o servidor da Web oferece suporte s server-side includes. Consulte Como utilizar as server-side includes na pgina 436.
Os itens de biblioteca podem ser utilizados nos sites que forem exibidos
localmente, assim como nos sites residentes em um servidor. Nos sites que forem exibidos localmente, sem um servidor, necessrio utilizar os itens de biblioteca, ao invs das server-side includes. Consulte Como criar, gerenciar e editar os itens de biblioteca na pgina 429.
410
Captulo 16
Como criar os modelos

Um modelo pode ser criado a partir de um documento HTML j existente e, em seguida, ser modicado para que atenda s suas exigncias, ou ser criado a partir do zero, com base em um documento HTML em branco. O Dreamweaver salva os modelos com a extenso .dwt em uma pasta chamada Templates, na pasta raiz local do site. Se a pasta Templates ainda no existir, o Dreamweaver a criar quando voc salvar um novo modelo.
Nota: No retire os modelos da pasta Templates e no coloque arquivos diferentes de modelos nesta pasta. Tambm no mova pasta Templates para fora da pasta raiz local. Ao fazer isto, voc estar provocando erros nos caminhos dos modelos.
Se desejar armazenar informaes adicionais sobre um modelo como, por exemplo, o autor do modelo, a data da ltima alterao ou o motivo de certas decises de layout, voc poder criar um arquivo Design Notes para o modelo. Os documentos que se basearem no modelo no herdaro as Design Notes do mesmo. Para obter mais informaes, consulte Sobre as Design Notes na pgina 142. A maioria das operaes relacionadas aos modelos estaro disponveis somente quando a visualizao do projeto estiver ativa. Se um comando relacionado a modelo estiver esmaecido quando a visualizao de cdigo estiver ativa, clique na visualizao do projeto.
Para salvar um documento j existente como um modelo:
1 2
Escolha Arquivo > Abrir, e selecione um documento. Quando o documento for aberto, escolha Arquivo > Salvar como modelo.
Nota: Se o documento se basear em um modelo, voc dever desanex-lo deste modelo, para poder salv-lo como um modelo.
Na caixa de dilogo que aparecer, selecione um site no menu pop-up e digite o nome do modelo, na caixa Salvar como. Clique em Salvar. O arquivo de modelo ser salvo na pasta Templates do site, com a extenso .dwt.
Para criar um novo modelo vazio:
Escolha Janela > Modelos. O painel Propriedades aparecer com a categoria Modelos selecionada. Na parte inferior do painel Propriedades clique no boto Novo modelo. Um novo modelo vazio e sem ttulo ser adicionado lista de modelos no painel. Com o modelo selecionado, digite um nome para ele.
Como reutilizar o contedo com os modelos e bibliotecas
411
Para editar o arquivo de modelo no qual um documento se baseia:
Escolha Modicar > Modelos > Abrir o modelo anexado.

Para editar um arquivo de modelo:
Escolha Janela > Modelos. O painel Propriedades aparecer, aberto na categoria Modelos. O painel inferior do painel Propriedades contm uma lista dos modelos disponveis para o seu site. O painel superior exibe uma visualizao do modelo selecionado.
No painel Propriedades , siga um dos procedimentos abaixo:
Clique duas vezes no nome do modelo. Na parte inferior do painel Propriedades, clique no boto Editar o modelo.
3
Edite o modelo na janela do documento. Crie regies editveis no modelo como desejar (consulte Como denir as regies editveis de um modelo na pgina 415). Salve o modelo editado, atravs da escolha de Arquivo >Salvar.
Nota: Se ainda no tiver definido qualquer regio editvel, voc ser advertido neste ponto sobre o fato. Voc poder salvar o modelo de qualquer maneira e poder modificar o arquivo do modelo, at mesmo se ele no contiver regies editveis, mas no ser possvel modificar os documentos baseados no modelo, at ter criado uma regio editvel no modelo.
Para renomear um modelo no painel Propriedades:
1 2 3
Clique no nome do modelo uma vez, para selecion-lo. Aps uma pequena pausa, clique novamente. Quando o nome se tornar editvel, digite um novo nome.
Nota: Este mtodo funciona da mesma forma que a renomeao de um arquivo no Windows Explorer (no Windows) ou no Localizador (no Macintosh). Assim como no Windows Explorer e no Localizador, assegure-se de fazer uma pequena pausa entre os cliques. No clique duas vezes no nome; desta forma o modelo ser aberto para edio.
Clique em outro lugar ou pressione a tecla Enter (no Windows) ou Return (no Macintosh). O Dreamweaver perguntar se voc deseja atualizar os documentos que se basearem neste modelo. clique em Atualizar.
Para atualizar todos os documentos no site que se basearem neste modelo, Para evitar a atualizao de todos os documentos que se baseiam neste modelo,
clique em No atualizar. Um documento que voc optar por no atualizar continuar a se basear no modelo (no desanexado); para atualizar tal documento posteriormente, abra o modelo e escolha Modicar >Modelos >Atualizar.
412
Captulo 16
Para excluir um arquivo de modelo:
1 2
Selecione o modelo no painel Propriedades. Clique no boto Excluir e conrme que deseja excluir o modelo. Tenha cuidado, pois aps excluir um arquivo de modelo, no ser possvel recuper-lo. O arquivo de modelo ser excludo do site. Os documentos que se baseavam neste modelo no sero desanexados do modelo. Eles conservaro a estrutura e as regies editveis que o arquivo de modelo possua antes de ser excludo. Para transformar tal documento em um arquivo HTML normal sem regies editveis ou bloqueadas, utilize Modicar> Modelos > Desanexar do modelo. Para obter mais informaes, consulte Como desanexar um documento de um modelo na pgina 424.
Como definir as propriedades da pgina do modelo Os documentos criados a partir de um modelo herdaro as propriedades da pgina do mesmo, com exceo do ttulo da pgina. Se um documento se basear num modelo, possvel alterar o seu ttulo, porm quaisquer alteraes feitas s suas outras propriedades da pgina sero ignoradas. Se aplicar um modelo a um documento e, em seguida, necessitar modicar as propriedades da pgina do documento, voc dever modicar as propriedades da pgina do modelo e atualizar as pginas que o utilizarem. O que signica que as propriedades da pgina de todos os documentos que se basearem naquele modelo sero modicadas.
Para modificar as propriedades da pgina do modelo:
1 2 3
Abra o arquivo do modelo e escolha Modicar > Propriedades da pgina. Especique as opes desejadas para a pgina e clique em OK. Atualize as pginas que se basearem no modelo, se houver alguma. Para obter mais informaes, consulte Como atualizar as pginas com base em um modelo na pgina 424.
Para obter mais informaes sobre as propriedades da pgina, consulte Como denir as propriedades do documento na pgina 160.
413
Sobre links em modelos Para criar um link em um arquivo de modelo, utilize o cone de pasta ou o cone do indicador de arquivos, no inspetor de propriedades. No digite o nome do arquivo a ser vinculado. Se digitar o nome, o link no funcionar como esperado. As seguintes informaes explicam porque este problema ocorre e oferecem um exemplo de situao na qual isso pode ocorrer. Quando voc criar um arquivo de modelo abrindo uma pgina existente e salvando a pgina como um modelo, o Dreamweaver garantir que todos os links na pgina continuaro a indicar os mesmos arquivos que indicavam anteriormente. Como os modelos so salvos em uma pasta Templates especial, isto signica que o caminho exibido de um link relativo ao documento se alterar quando voc salvar a pgina como um modelo. No se preocupe com esta alterao. Quando criar um documento com base em modelo e, em seguida, salvlo, todos os links relativos ao documento sero atualizados para continuar a indicar os arquivos corretos, como era de se esperar. Ao adicionar um link relativo a documento em um arquivo de modelo, mesmo se digitar o caminho na caixa de de texto do link, no inspetor de propriedades, fcil digitar um caminho incorreto por engano. O caminho correto o caminho da pasta Templates ao documento que voc estiver vinculando, e no o caminho da pasta do documento. Para evitar este problema, utilize o cone de pasta ou o cone do indicador de arquivos para selecionar os arquivos aos quais deseja vincular. Para obter mais informaes sobre como vincular usando o cone do indicador de arquivos, consulte Como vincular documentos utilizando o inspetor de propriedades e o cone do indicador de arquivos na pgina 391. O seguinte exemplo demonstra o problema. Suponha que voc possui um site no qual algumas pginas de catlogo (denominadas aparelhos.html, apetrechos.html e adicionais.html) se baseiam em um arquivo de modelo denominado Pginas_de_catlogo.dwt. A estrutura da pasta do site ter a seguinte aparncia:
414
Captulo 16
Suponha que voc deseje que cada pgina se baseie em um modelo, para conter um link que indique um arquivo home.html. Abra o modelo Pginas_de_catlogo, para adicionar o link e selecione a imagem que gostaria de anexar ao link. Mas, se digitar home.html na caixa de texto do link no inspetor de propriedades, voc se deparar com o problema do link relativo a documento: ao salvar o modelo editado, os documentos que se baseiam no modelo iro indicar o local incorreto porque o link no arquivo de modelo ser interpretado como relativo pasta Templates, em vez de ser relativo pasta Catalog. Isso signica que o link home.html no arquivo de modelo indicar a home.html na pasta Templates, ao invs de ../Catalog/home.html. Ao atualizar os documentos com base no modelo, o Dreamweaver modicar os links relativos ao documento nos documentos. Nos documentos da pasta Catalog, um link no arquivo de modelo que indicar ../Catalog/home.html ser convertido em home.html, mas um link no arquivo de modelo que indicar home.html ser convertido em ../Templates/ home.html. Se voc selecionar o arquivo home.html, utilizando o cone de pasta ou o cone do indicador de arquivos em vez de digitar manualmente o nome do arquivo, o Dreamweaver atualizar automaticamente todos os documentos com base no modelo, para utilizar os caminhos relativos corretos para home.html.
Nota: Em alguns casos (como, por exemplo, caminhos de arquivos em manipuladores de eventos nos modelos) voc no poder utilizar o cone de pasta ou o cone do indicador de arquivos. Assegure-se de digitar manualmente o caminho correto.
Como definir as regies editveis de um modelo

Em um modelo, as regies editveis so partes da pgina que podem ser alteradas nos arquivos com base no modelo. Por exemplo: o texto de um artigo em um boletim apareceria em uma regio editvel, para que todo o artigo pudesse conter um texto diferente. As regies bloqueadas (no editveis ) integram o layout de pgina e permanecem constantes em todas as pginas. Quando o modelo for criado, todas as suas regies sero bloqueadas. Para torn-lo til, necessrio tornar algumas regies editveis, desbloqueando-as. Enquanto o arquivo de modelo estiver sendo editado, possvel fazer alteraes tanto s regies editveis quanto s bloqueadas. Em um documento com base no modelo, no entanto, as modicaes podero ser feitas apenas nas regies editveis do documento; as regies bloqueadas no podero ser alteradas.
Nota: Ao nomear uma regio, no possvel utilizar os seguintes caracteres: aspas simples ou duplas (' e "), sinais de maior e menor (< >) e "e" comerciais (&).
415
Para definir o contedo de um modelo j existente como uma regio editvel:
No arquivo do modelo, selecione o texto ou contedo que deseja tornar uma regio editvel. Siga um dos procedimentos abaixo:
Escolha Modicar > Modelos > Nova regio editvel. Clique com o boto direito do mouse (no Windows), ou pressione a tecla
Control e clique no texto selecionado (no Macintosh) e, no menu contextual, escolha Nova regio editvel.
3
Na caixa de dilogo Nova regio editvel, digite um nome exclusivo para a regio. Em um determinado modelo, no possvel utilizar o mesmo nome para mais de uma regio editvel. A regio editvel delimitada por um contorno retangular realado no modelo, utilizando o conjunto de cores de realce em Preferncias. Uma guia no canto superior esquerdo da regio exibir o nome da mesma. possvel marcar como editvel uma tabela inteira ou uma clula de tabela; no entanto, no possvel marcar vrias clulas de tabela como uma nica regio editvel. Observe que o Dreamweaver no distinguir entre marcar uma clula de tabela como editvel e marcar o contedo da clula como editvel. As camadas e o seu contedo so elementos separados; quando uma camada for transformada em editvel, a sua posio, assim como o seu contedo, podero ser alterados; enquanto que a transformao do contedo em editvel permitir alterar somente o contedo da camada, e no a sua posio. Para selecionar o contedo da camada, clique na mesma e escolha Editar > Selecionar tudo. Para selecionar a camada, certique-se que os elementos invisveis estejam sendo exibidos e, em seguida, clique no cone que representa a localizao da camada. Para obter mais informaes sobre as camadas, consulte Como utilizar as camadas na pgina 439.
Nota: Se o contedo da camada tiver sido transformado em editvel e, posteriormente, voc desejar tornar editvel a posio do mesmo, remova a regio editvel ao redor do contedo antes de marcar a camada como editvel. Consulte Como bloquear uma regio editvel na pgina 421.
Para inserir uma regio editvel vazia em um modelo:
No modelo, coloque o ponto de insero onde deseja incluir uma regio editvel. Escolha Modicar > Modelos > Nova regio editvel.
416
Captulo 16
Na caixa de dilogo Nova regio editvel, digite o nome da regio. O nome da regio, entre chaves ({}), ser inserido no modelo como um alocador de espao, delimitado por um contorno retangular realado com a cor de realce apropriada. Quando o modelo for aplicado a um documento, as chaves e o nome da regio podero ser selecionados e substitudos por texto, imagens ou qualquer outro contedo.
Como definir as preferncias de modelo possvel utilizar as preferncias de realce do Dreamweaver para personalizar as cores de realce dos contornos em volta das regies editveis e bloqueadas de um modelo. A cor da regio editvel aparecer no modelo, bem como nos documentos que se basearem no mesmo. A cor da regio bloqueada aparecer somente nos documentos que se basearem no modelo.
Para alterar as cores de realce do modelo:
1 2
Escolha Editar > Preferncias e, em seguida, selecione a categoria Realce. Clique na caixa de cor Regies editveis e selecione a cor de realce, utilizando o seletor de cores, ou digite o valor hexadecimal correspondente cor de realce na caixa de texto. Faa o mesmo para as regies bloqueadas. Para obter informaes sobre como utilizar o seletor de cores, consulte Como trabalhar com as cores na pgina 91. Clique na opo Mostrar, para ativar ou desativar a exibio dessas cores na janela do documento. Clique em OK.
Para exibir as cores de realce na janela do documento:
Escolha Exibir > Auxlios visuais> Elementos invisveis. As cores de realce aparecero na janela do documento apenas quando a opo Exibir > Auxlios visuais > Elementos invisveis estiver ativa e as opes apropriadas estiverem ativas nas preferncias de realce.
Nota: Se os elementos invisveis forem exibidos mas as cores de realce no, escolha Editar > Preferncias e certifique-se de que a opo Mostrar, ao lado da cor de realce apropriada tenha sido selecionada. Assegure-se, tambm, de que a cor escolhida esteja visvel em relao a cor de fundo da pgina. Caso seja daltnico, talvez tenha que alterar a cor de realce, do padro para uma cor mais viva.
417
Como exibir as regies editveis e bloqueadas Em arquivos de modelos e documentos com base nos modelos, as regies editveis aparecero na visualizao do projeto da janela do documento entre contornos retangulares, na cor de realce apropriada. Uma pequena guia aparecer no canto superior esquerdo de cada regio editvel, exibindo o nome da mesma. Nos arquivos de modelos, apenas as regies editveis estaro marcadas com contornos realados. O contedo das regies editveis e bloqueadas pode ser alterado.
Tanto as regies bloqueadas quanto as editveis podem ser modificadas.
As regies editveis esto entre contornos realados.
418
Captulo 16
Nos documentos com base em modelos, alm dos contornos de regies editveis, a pgina inteira estar circundada por um contorno de cor diferente, com uma guia no canto superior direito, mostrando o nome do modelo no qual o documento se baseia. Este retngulo realado est presente para lembrar que o documento se baseia em um modelo e que nada poder ser modicado fora das regies editveis.
Limite realado ao redor da pgina.
Apenas as regies editveis podero ser modificadas
Nota: Se tentar editar uma regio bloqueada em um documento com base em modelo quando o realce estiver desativado, o ponteiro do mouse se modificar, indicando que no possvel clicar na regio.
Como visualizar o cdigo-fonte HTML de regies editveis e bloqueadas O contedo editvel marcado no HTML pelos comentrios do Dreamweaver #BeginEditable e #EndEditable. Tudo entre estes comentrios editvel. O cdigofonte HTML de uma regio editvel, denominado Edit_Region ter a seguinte aparncia:
 {Edit_Region} 
419
O HTML de uma tabela editvel denominada Editable_Table ter a seguinte aparncia:

 <table width="77%" border="1"> <tr> <td> </td> <td> </td> </tr> </table> 
Nos arquivos de modelo, as regies editveis no so realadas na visualizao de cdigo da janela do documento (ou no inspetor de cdigo). possvel fazer alteraes no cdigo-fonte HTML correspondente tanto s regies editveis quanto s bloqueadas. Nos documentos com base em modelos, se a sinalizao da sintaxe por cores estiver ativa, as regies bloqueadas estaro realadas nos editores de cdigo. Para obter mais informaes sobre a sinalizao da sintaxe por cores, consulte Como denir as opes da visualizao de cdigo (ou do inspetor de cdigo) na pgina 364. Apenas o cdigo-fonte HTML correspondente s regies editveis (no-realadas) poder ser alterado.
O HTML das regies bloqueadas estar realado.
Apenas o HTML correspondente s regies editveis poder ser modificado.
420
Captulo 16
Nota: O Dreamweaver no impede que se digite em regies bloqueadas no inspetor de cdigo ou na visualizao de cdigo da janela do documento. No entanto, o Dreamweaver descarta todas as alteraes feitas nas regies bloqueadas. Portanto, seja cuidadoso, digitando somente em regies editveis.
Como bloquear uma regio editvel Caso tenha marcado uma regio do arquivo de modelo como editvel e, subseqentemente, desejar bloque-la (torn-la no-editvel) novamente, utilize o comando Remover a regio editvel.
Nota: No possvel bloquear uma regio em um arquivo com baseado em modelo. S possvel bloquear uma regio em um arquivo de modelo. Para bloquear uma regio (torn-la no-editvel) em um arquivo de modelo:
1 2
Escolha Modicar > Modelos > Remover a regio editvel. Selecione o nome da regio na lista e clique em OK. A regio ser bloqueada. Ela deixar de ter um nome, j que somente as regies editveis possuem nome.
Como utilizar os estilos, linhas de tempo, comportamentos e tags do cabealho nos modelos Nos documentos com base em modelos, os estilos CSS, as linhas de tempo, os comportamentos e os tags da seo head (cabealho) no contam com o suporte. Todos estes elementos inserem informaes na seo head de um documento. Como a seo head de um documento que se basear em modelo estar bloqueada (com exceo do ttulo do documento), o Dreamweaver no poder inserir uma folha de estilos ou cdigo JavaScript em tal documento. Para utilizar estes itens num documento com base em modelo, necessrio adicion-los ao arquivo de modelo no qual o documento se baseia. Para permitir que uma folha de estilos de um arquivo de modelo seja editvel, sem ter que atualizar as pginas a cada vez que alterar a folha de estilos, utilize uma folha de estilos externa. Se no for possvel adicionar estes elementos ao arquivo de modelo, possvel desanexar o documento do modelo, o que tornar editvel a seo head. No entanto, aps desanexar o documento do modelo, o documento deixar de ser atualizado quando o modelo for alterado. Consulte Como desanexar um documento de um modelo na pgina 424. Para obter mais informaes sobre estes elementos, consulte Como utilizar as folhas de estilos CSS na pgina 267, Como animar as camadas na pgina 458 e Como utilizar os comportamentos na pgina 469.
421
Como criar documentos a partir de modelos

Os modelos podem ser utilizados como ponto de partida para novos documentos ou para serem aplicados a documentos existentes. Ao criar um novo documento a partir de um modelo, voc poder escolher se o documento dever permanecer anexado ao modelo. Como padro, quando um modelo for alterado, o documento que se basear nele ser atualizado, reetindo as alteraes no modelo. Mas, se voc cancelar a seleo da opo Atualizar a pgina quando o modelo for alterado, na caixa de dilogo Novo a partir de modelo, o novo documento ser criado como papel de carta: uma cpia do modelo, que um arquivo HTML independente, sem regies bloqueadas ou editveis. Neste caso, a atualizao do modelo no alterar o documento. Em outras palavras, o cancelamento da seleo desta opo equivale a criar um novo documento a partir de um modelo e, depois desanexar o documento do modelo.
Nota: A opo de no atualizar o documento quando o modelo for alterado oferecida para os usurios que desejarem utilizar os modelos como arquivos de papel de carta, um ponto de partida para criar documentos completamente independentes. Se desejar utilizar o comportamento de modelo padro do Dreamweaver, no qual os documentos com base em modelo so atualizados quando o modelo alterado, mantenha a opo selecionada. Para criar um novo documento com base em modelo, siga um dos procedimentos abaixo:
Escolha Arquivo > Novo a partir de modelo. Na caixa de dilogo que aparecer,
escolha um modelo. Se no desejar que o novo documento seja atualizado quando o modelo for alterado, cancele a seleo Atualizar a pgina quando o modelo for alterado. Em seguida, clique em Selecionar.
Escolha Arquivo > Novo, para criar um novo documento e, em seguida, aplique
nele um modelo, selecionando um modelo na categoria Modelos do painel Propriedades e clique no boto Aplicar. De forma alternativa, possvel arrastar um modelo do painel Propriedades para o documento.
Para aplicar um novo modelo a um documento j existente do Dreamweaver:
Abra o documento. Siga um dos procedimentos abaixo:
Clique na visualizao do projeto, na janela do documento e, em seguida,

escolha Modicar > Modelos > Aplicar o modelo pgina. Escolha um modelo na lista e clique em Selecionar.
Selecione o modelo na categoria Modelos do painel Propriedades e clique no

boto Aplicar.
Arraste o modelo da categoria Modelos, no painel Propriedades, para a

visualizao do projeto da janela do documento.
Nota: Dizer que um modelo foi aplicado a um documento equivale a dizer que um documento se baseia em um modelo. Estas frases podem ser intercambiadas.
422
Captulo 16
Quando voc aplicar um modelo a um documento existente que ainda no se baseia em um modelo, o Dreamweaver transformar o documento em uma cpia do arquivo de modelo, colocando o material da seo existente body (corpo) do documento em uma nica regio editvel de sua escolha.
Nota: Os comportamentos e outros scripts no documento existente que estiverem associados ao contedo do body, permanecem na seo head do documento, aps a aplicao do modelo. Outros itens da seo head do documento existente, como os tags meta, sero descartados quando o modelo for aplicado.
Quando voc aplicar um novo modelo a um documento existente, que se baseia em um outro modelo, o Dreamweaver transformar o documento em uma cpia do novo modelo, colocando o material das regies editveis do documento existente nas regies editveis correspondentes do novo modelo, sempre que possvel. O Dreamweaver efetua esta operao comparando os nomes das regies editveis no documento com os nomes das regies editveis no novo modelo. Para cada nome de regio que coincidir, o Dreamweaver colocar o contedo existente de tal regio na nova regio com o mesmo nome. Por exemplo: suponha que voc deseje experimentar uma nova aparncia para o site, mas ainda no esteja pronto para alterar todas as pginas. possvel criar um novo modelo com layout e desenho novos, dando s regies editveis no novo modelo os mesmos nomes que as do modelo antigo. A seguir, quando aplicar o novo modelo a uma das pginas, o material das regies editveis da pgina ser colocado nas regies editveis correspondentes do novo layout. Se houver regies editveis no modelo antigo que no correspondem s regies no novo modelo, a caixa de dilogo Escolher a regio editvel para o contedo rfo indagar qual ser a nova regio editvel de destino do contedo rfo. Escolha um nome de regio editvel. Todo o contedo das regies editveis sem correspondncia ser anexado regio escolhida. Todo o contedo rfo do documento existente dever ser inserido em uma nica regio editvel. Se selecionar o item Nenhum, em vez do nome da regio, o contedo das regies sem correspondncia no documento existente ser descartado. Se voc acreditar que as regies editveis do documento correspondem s regies editveis do novo modelo que estiver aplicando mas, mesmo assim, a caixa de dilogo do contedo rfo aparecer, clique em Cancelar, e o novo modelo no ser aplicado ao documento. Em seguida, possvel examinar as regies editveis do documento e as regies editveis do modelo, para descobrir quais regies do documento no aparecem no novo modelo. possvel, ento, adicionar novas regies com aqueles nomes ao novo arquivo de modelo. Todas as novas regies editveis que se encontrarem no novo modelo, mas no no modelo antigo, sero adicionadas ao documento. As novas regies contm o texto do alocador de espao padro existente no novo arquivo de modelo. Aps aplicar um modelo a um documento, se os resultados no alcanarem as suas expectativas, voc poder utilizar a opo Editar >Desfazer a aplicao do modelo, para reverter ao estado do documento antes da aplicao do modelo.
423
Como localizar as regies editveis do documento Todas as regies editveis no corpo de um modelo so mostradas em uma lista, na parte inferior do submenu Modicar > Modelos. Utilize essa lista para selecionar e editar as regies.
Para localizar uma regio editvel e selecion-la no documento:
Escolha Modicar > Modelos, e selecione o nome da regio na lista, na parte inferior do submenu. A regio ser selecionada no documento. possvel digitar texto novo na regio ou clicar nela, para editar o contedo. Como desanexar um documento de um modelo Para alterar as regies editveis e bloqueadas de uma pgina que utiliza um modelo, necessrio desanexar primeiramente a pgina do modelo. Quando a pgina estiver desanexada, ela se transformar em um documento normal, sem regies editveis ou bloqueadas, e perder a conexo a qualquer arquivo de modelo. Observe que, com isso, a pgina no ser mais atualizada com o modelo.
Para desanexar um documento de um modelo:
1 2
Abra o documento a ser desanexado. Escolha Modicar > Modelos > Desanexar do modelo. A pgina ser desanexada do modelo e todas as regies se tornaro editveis.
Como atualizar as pginas com base em um modelo

Quando for feita uma alterao a um modelo, o Dreamweaver solicitar a atualizao das pginas que o utilizarem. Podem ser utilizados tambm os comandos de atualizao, para atualizar manualmente a pgina atual ou o site inteiro. A utilizao dos comandos de atualizao funciona da mesma maneira que a reaplicao do modelo. Para obter informaes sobre a edio de modelos, consulte Como criar os modelos na pgina 411 e Como denir as regies editveis de um modelo na pgina 415.
424
Captulo 16
Para abrir e modificar o modelo utilizado para criar o documento atual:
1 2
Escolha Modicar > Modelos > Abrir o modelo anexado. Modique o contedo do modelo como desejar. Para modicar as propriedades da pgina do modelo, escolha Modicar > Propriedades da pgina. Os documentos que se basearem em modelos herdaro as propriedades da pgina dos mesmos, com exceo do ttulo da pgina.
Para atualizar o documento atual, para que utilize a verso mais recente de um modelo:
Escolha Modicar > Modelos > Atualizar a pgina atual.

Para atualizar o site inteiro ou todos os documentos que utilizarem um modelo especfico:
Escolha Modicar > Modelos > Atualizar as pginas. Aparecer a caixa de dilogo Atualizar as pginas. No menu pop-up Procurar em, siga um dos procedimentos abaixo: adjacente. Esse procedimento atualizar todas as pginas no site escolhido em relao ao modelo.
Escolha Site inteiro e, em seguida, escolha o nome do site no menu pop-up Escolha Arquivos que utilizam e, em seguida, escolha o nome do modelo no
menu pop-up adjacente. Este procedimento atualizar todas as pginas no site atual s quais tiver sido aplicado o modelo selecionado.
3
Verique se a opo Modelos est selecionada na opo Atualizar. Para atualizar os itens de biblioteca simultaneamente, assegure-se de que a opo Itens de biblioteca esteja selecionada. Consulte Como criar, gerenciar e editar os itens de biblioteca na pgina 429, para obter mais informaes. Clique em Iniciar. O Dreamweaver atualizar os arquivos conforme indicado. Caso voc tenha selecionado a opo Mostrar o registro, o Dreamweaver fornecer informaes sobre os arquivos que tentar atualizar, incluindo informaes sobre o xito em sua atualizao.
425
Como exportar e importar o contedo XML

possvel pensar que um documento com base em modelo contenha um conjunto de dados representados por pares nome/valor. Cada par consiste em um nome de regio editvel e no respectivo contedo da regio. Por exemplo: suponha que um modelo contenha trs regies editveis: nmero_do_item, preo_do_item e cor_do_item. possvel descrever por completo um documento com base no modelo, fornecendo o nome do modelo e os trs pares nome/valor correspondentes s regies editveis. O Dreamweaver permite exportar os pares nome/valor para um arquivo XML, para que seja possvel trabalhar com os dados do documento fora do Dreamweaver (num editor XML, por exemplo, ou num editor de texto, ou at mesmo num aplicativo de banco de dados). Por outro lado, possvel importar os dados de um documento XML que estiver estruturado adequadamente para um documento com base em um modelo do Dreamweaver.
Para exportar as regies editveis do documento como XML:
Escolha Arquivo > Abrir, e abra um documento com base em modelo (que contenha regies editveis). Escolha Arquivo > Exportar > Exportar as regies editveis como XML. Na caixa de dilogo XML, escolha uma notao de tag e clique em OK. Consulte Como utilizar as notaes de tags XML na pgina 428, para obter mais detalhes.
2 3
Na caixa de dilogo que aparecer, digite o nome do arquivo XML e clique em Salvar. O Dreamweaver gerar um arquivo XML contendo o material das regies editveis do documento. O arquivo XML inclui o nome do modelo no qual o documento se baseia, assim como o nome e o contedo de cada regio editvel.
Nota: O material nas regies bloqueadas no ser exportado para o arquivo XML.
Para importar um contedo XML:
1 2
Escolha Arquivo > Importar >Importar XML para o modelo. Selecione o arquivo XML e clique em Abrir.
O Dreamweaver criar um novo documento a partir do modelo especicado no arquivo XML. A seguir, ele preencher o contedo de cada regio editvel do documento utilizando os dados do arquivo XML. O documento resultante ser aberto na janela do documento. Se o modelo especicado no for localizado, o Dreamweaver solicitar a escolha de outro modelo a ser utilizado.
426
Captulo 16
Observe que se o arquivo XML no estiver denido exatamente como o Dreamweaver espera, talvez no seja possvel importar os dados. Uma soluo para este problema exportar um arquivo XML ctcio 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. Sobre o XML XML signica Extensible Markup Language, uma linguagem de markup para documentos estruturados. Ele se assemelha a uma generalizao de HTML, que permite criar os seus prprios tags. XML deriva-se de SGML, a linguagem padro de markup generalizado; assim como SGML, XML uma linguagem para denir conjuntos de tags e as relaes entre os mesmos. Os tags XML se assemelham aos tags HTML: eles consistem de um nome e de atributos opcionais, delimitados por sinais de maior e menor. Assim como em HTML, so utilizados um tag de abertura e outro de nalizao (nos quais o nome do tag precedido por uma barra inclinada) para marcar o contedo entre os tags. Uma diferena entre as sintaxes que, em XML, um tag vazio (que utiliza um tag nico, como <img>, ao invs de um tag de abertura e um de nalizao, contendo texto ou outro material) dever terminar com uma barra inclinada logo antes do sinal de maior. Por exemplo: um tag <img> em XML poder ter a seguinte aparncia:
<img src="test.png" />
Realmente, a sintaxe do XML mais rigorosa e estrita do que a do HMTL. Os arquivos que no estiverem em conformidade rigorosa com a sintaxe do XML sero rejeitados pelos analisadores XML. O XML oferece uma maneira de marcar seqncias de caracteres literais, que podem incluir tags que dispensam a anlise. um elemento denominado seo CDATA, que inclui uma seqncia de caracteres literal entre colchetes. Qualquer elemento contido pelos colchetes no ser analisado pelo analisador XML. O XML exportado pelo Dreamweaver faz uso extensivo das sees CDATA. Uma introduo completa ao XML no faz parte do escopo deste manual. Para obter mais informaes sobre o XML, consulte Recursos de tecnologias da Web e HTML na pgina 25.
427
Como utilizar as notaes de tags XML O Dreamweaver permite exportar contedos XML utilizando uma das duas notaes de tags: tags de nomes das regies editveis ou tags XML padro do Dreamweaver. Escolha a notao que mais se adapte maneira como o contedo XML ser incorporado ao site da Web. A maneira mais fcil de examinar as diferenas entre as duas notaes de tags, se voc compreender a sintaxe XML, confrontar os exemplos. O seguinte cdigo XML foi exportado de um documento que se baseou em um modelo denominado newstemplate. O documento contm uma regio editvel denida, conhecida como News_Story e uma regio editvel padro (doctitle), que contm o tag title).
Os tags dos nomes de regies editveis utilizam os nomes das regies editveis
do seu documento como tags XML. O contedo de cada regio editvel est includo como uma seo CDATA. Neste exemplo, o tag doctitle identica o ttulo do documento, enquanto o tag News_Story refere-se regio editvel.
<?xml version="1.0"?> <newstemplate template="/Templates/newstemplate.dwt"> <doctitle> <![CDATA[<ttulo>Matria ttulo de hoje</ttulo>]]> </doctitle> <News_Story> <![CDATA[<p>Aqui onde a matria deve ser includa.</p>]]> </News_Story> </newstemplate>
Os tags XML padro do Dreamweaver utilizam um tag denominado item. O

tag item possui um atributo name, que d o nome regio editvel. O tag contm uma seo CDATA que, por sua vez, contm o contedo da regio editvel. Neste exemplo, o tag item com name="doctitle" identica o ttulo do documento e o tag item com name="News_Story" refere-se regio editvel.
<?xml version="1.0"?> <templateItems template="/Templates/newstemplate.dwt"> <item name="doctitle"> <![CDATA[<ttulo>Manchete de hoje</ttulo>]]> </item> <item name="News_Story"> <![CDATA[<p>A matria dever ser includa aqui.</p>]]> </item> </templateItems>
428
Captulo 16
Como criar, gerenciar e editar os itens de biblioteca

As bibliotecas constituem uma maneira de armazenar elementos de pginas como, por exemplo, imagens, texto e outros objetos, a serem reutilizados ou atualizados com freqncia no site da Web. Estes elementos so denominados itens de biblioteca. Quando um item de biblioteca for colocado em um documento, o Dreamweaver inserir uma cpia do cdigo-fonte HTML correspondente ao item no documento e adicionar um comentrio HTML com uma referncia ao item externo original. A referncia ao item externo da biblioteca possibilita a atualizao simultnea do contedo de um site inteiro, por meio da alterao do item de biblioteca e, em seguida, da utilizao dos comandos de atualizao no submenu Modicar > Biblioteca. O Dreamweaver armazena os itens de biblioteca na pasta Library, contida na pasta raiz local de cada site. Todos os sites possuem a sua prpria biblioteca. Para copiar um item de biblioteca de um site para outro, utilize o comando Copiar para o site, no painel Propriedades. Consulte Como gerenciar e inserir propriedades na pgina 237, para obter mais informaes. Observe que se um item de biblioteca contiver links, estes ltimos podero no funcionar no novo site. Observe tambm que as imagens de um item de biblioteca no sero copiadas para o novo site. Segue um exemplo de utilizao de um item de biblioteca: suponha que esteja criando um site grande para uma rma. A rma possui um slogan que deseja que aparea em todas as pginas do site, mas o departamento de marketing ainda est se decidindo quanto aos detalhes do contedo do slogan. Se criar um item de biblioteca para conter o slogan e utiliz-lo em todas as pginas, quando o departamento de marketing fornecer o slogan nal, voc poder alterar o item de biblioteca e automaticamente atualizar todas as pginas que o utilizarem. Como criar um item de biblioteca possvel criar um item de biblioteca a partir de qualquer elemento na seo body de um documento, incluindo texto, tabelas, formulrios, applets de Java, plugins, elementos ActiveX, barras de navegao e imagens. No caso de itens vinculados, como as imagens, a biblioteca armazenar somente uma referncia ao item. O arquivo original dever permanecer no local especicado para que o item de biblioteca funcione corretamente. Mesmo assim, ainda poder ser til armazenar uma imagem em um item de biblioteca; por exemplo: voc poderia armazenar um tag img completo em um item de biblioteca, que permitiria alterar facilmente o texto alt da imagem, ou at o seu atributo src, pelo 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.
429
Os itens de biblioteca tambm podem conter comportamentos, porm h requisitos especiais para a edio dos comportamentos nesses itens; consulte Como editar um comportamento em um item de biblioteca na pgina 434. Os itens de biblioteca no podem conter linhas de tempo ou folhas de estilos, porque o cdigo correspondente a esses elementos integra a seo head (cabealho).
Nota: Em geral, seja cuidadoso quanto mistura de itens de biblioteca e modelos na mesma pgina. Os resultados podem se tornar confusos. Para criar um item de biblioteca:
Selecione uma parte de um documento, para salv-la como um item de biblioteca. Siga um dos procedimentos abaixo: painel Propriedades.
Escolha Janela > Biblioteca, e arraste a seleo para a categoria Biblioteca, no Na parte inferior do painel Propriedades (na categoria Biblioteca), clique no
boto Novo item de biblioteca.
Escolha Modicar > Biblioteca > Adicionar objeto biblioteca.

3
Digite um nome para o novo item de biblioteca. Cada item de biblioteca ser salvo como um arquivo separado (com extenso .lbi) na pasta Library da pasta raiz local do site.
Como definir as preferncias de biblioteca A cor de realce dos itens de biblioteca pode ser personalizada, mostrada ou ocultada, de acordo com a denio nas preferncias de realce.
Para alterar a cor de realce de itens de biblioteca:
1 2
Escolha Editar > Preferncias e, em seguida, selecione a categoria Realce. 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 Como trabalhar com as cores na pgina 91. Selecione Mostrar, para alternar a exibio da cor de realce da biblioteca. Clique na opo Mostrar, para ativar ou desativar a exibio da cor de realce dos itens de biblioteca na janela do documento. Clique em OK, para fechar a caixa de dilogo Preferncias.
3 4
430
Captulo 16
Para exibir as cores de realce na janela do documento:
Escolha Exibir > Auxlios visuais > Elementos invisveis. As cores de realce aparecero na janela do documento, apenas quando a opo Exibir > Auxlios visuais > Elementos invisveis estiver ativa e as opes apropriadas estiverem ativas nas preferncias de realce. Como 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. Escolha Janela > Biblioteca. O painel Propriedades aparecer, exibindo a categoria Biblioteca. Arraste um item de biblioteca do painel Propriedades at a janela do documento, ou selecione um item e clique no boto Inserir. Para inserir o contedo de um item de biblioteca sem criar uma referncia deste no documento, pressione a tecla Control (no Windows) ou Option (no Macintosh) enquanto arrasta um item para fora da categoria Biblioteca, no painel Propriedades. Se inserir um item desta forma, voc poder edit-lo no documento, mas o documento no ser atualizado quando atualizar as pginas que utilizam o item de biblioteca.
Como alterar um item de biblioteca Ao alterar um item de biblioteca, voc poder optar por atualizar todos os documentos que o utilizam. Se preferir no atualizar, os documentos permanecero associados ao item de biblioteca. possvel atualiz-los mais tarde, escolhendo Modicar > Biblioteca > Atualizar as pginas. Outros tipos de alteraes aos itens de biblioteca incluem a sua renomeao, para romper a sua conexo com os documentos e modelos, a sua excluso da biblioteca do site e a recriao de um item de biblioteca perdido.
Nota: Os painis de estilos CSS, de linhas de tempo e de comportamentos no estaro disponveis durante a edio de um item de biblioteca porque esses itens podem conter apenas os elementos body. O cdigo das linhas de tempo e das folhas de estilos CSS integra a seo head, enquanto que o painel Comportamentos no estar disponvel porque ele insere cdigo nas sees head e body. Para obter instrues sobre a edio de comportamentos, consulte Como editar um comportamento em um item de biblioteca na pgina 434. A caixa de dilogo Propriedades de pgina tambm no estar disponvel, porque um item de biblioteca no pode incluir um tag body ou seus atributos.
431
Para editar um item de biblioteca:
Escolha Janela > Biblioteca. Aparecer a categoria Biblioteca, no painel Propriedades. Selecione um item de biblioteca. Aparecer uma visualizao do item de biblioteca no alto do painel Propriedades. No possvel editar qualquer elemento na visualizao.
Na parte inferior do painel Propriedades, clique no boto Editar. De maneira alternativa, clique duas vezes no item de biblioteca. O Dreamweaver abrir uma nova janela para a edio do item de biblioteca. Esta janela semelhante a uma janela de documento, mas a sua visualizao do projeto possui um fundo cinza, indicando a edio do item de biblioteca, ao invs do documento.
4 5
Edite o item de biblioteca e, em seguida, salve as alteraes. Na caixa de dilogo que aparecer, escolha se deseja atualizar os documentos no site local que utilizam o item de biblioteca editado: de bilioteca editado.
Escolha Atualizar, para atualizar todos os documentos no site local com o item Escolha No atualizar, para evitar que os documentos sejam alterados at que
voc utilize Modicar > Biblioteca > Atualizar a pgina atual, ou Atualizar as pginas.
Para atualizar o documento atual, para que utilize a verso mais recente de todos os itens de biblioteca:
Escolha Modicar > Biblioteca > Atualizar a pgina atual.

Para atualizar o site inteiro ou todos os documentos que utilizarem um item de biblioteca especfico:
Escolha Modicar > Biblioteca > Atualizar as pginas. Aparecer a caixa de dilogo Atualizar as pginas. No menu pop-up Procurar em, siga um dos procedimentos abaixo: adjacente. Este procedimento atualizar todas as pginas no site selecionado, para que utilizem a verso atual de todos os itens de biblioteca.
Escolha Site inteiro e, em seguida, escolha o nome do site no menu pop-up Escolha Arquivos que utilizam e, em seguida, escolha um item de biblioteca no
menu pop-up adjacente. Este procedimento atualizar todas as pginas no site atual que utilizarem o item de biblioteca selecionado.
432
Captulo 16
Verique se a opo Itens de biblioteca est selecionada na opo Atualizar. Para atualizar os modelos simultaneamente, assegure-se de que a opo Modelos esteja selecionada. Consulte Como atualizar as pginas com base em um modelo na pgina 424, para obter mais informaes. Clique em Iniciar. O Dreamweaver atualizar os arquivos conforme indicado. Caso voc tenha selecionado a opo Mostrar o registro, o Dreamweaver fornecer informaes sobre os arquivos que tentar atualizar, incluindo informaes sobre o xito em sua atualizao.
Para renomear um item de biblioteca no painel Propriedades:
1 2 3
Clique no nome do item de biblioteca uma vez, para selecion-lo. Aps uma pequena pausa, clique novamente. Quando o nome se tornar editvel, digite um novo nome.
Nota: Este mtodo funciona da mesma forma que a renomeao de um arquivo no Windows Explorer (no Windows) ou no Localizador (no Macintosh). Assim como no Windows Explorer e no Localizador, assegure-se de fazer uma pequena pausa entre os cliques. No clique duas vezes no nome; desta forma, o item de biblioteca ser aberto para edio.
Clique em outro local ou pressione a tecla Enter (no Windows) ou Return (no Macintosh). O Dreamweaver indagar se voc deseja atualizar os documentos que utilizam este item. Atualizar.
Para atualizar todos os documentos no site que utilizarem este item, clique em Para evitar a atualizao de qualquer documento que utilizar este item, clique
em No atualizar.
Para excluir um item de uma biblioteca:
1 2
Selecione o item na categoria Biblioteca, no painel Propriedades. Clique no boto Excluir e conrme que deseja excluir o item. Tenha cuidado, pois aps excluir um item de biblioteca, no ser possvel utilizar o comando Refazer para recuper-lo. No entanto, talvez voc possa recri-lo, como descrito no prximo procedimento. A excluso de um item remove-o da biblioteca, mas no altera o contedo de qualquer um dos documentos que utilizam o item.
433
Para recriar um item de biblioteca ausente ou excludo:
1 2
Selecione uma instncia do item em um documento. Clique no boto Recriar, no inspetor de propriedades.
Como tornar editveis os itens de biblioteca de um documento Se tiver adicionado um item de biblioteca ao documento e desejar edit-lo especicamente em uma pgina, ser necessrio romper o link entre o item do documento e a biblioteca. Quando a ocorrncia do item de biblioteca tornar-se editvel, essa instncia no poder ser atualizada quando o item de biblioteca tiver sido modicado.
Para tornar editvel um item de biblioteca:
1 2
Selecione um item de biblioteca no documento atual. Clique em Desanexar do original, no inspetor de propriedades. A ocorrncia 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.
Como editar um comportamento em um item de biblioteca Quando for criado um item de biblioteca que contm um elemento com um anexo de comportamento, o Dreamweaver copiar o elemento e o seu manipulador de evento o atributo que especica o evento que disparar a ao (como onClick, onLoad ou onMouseOver) e que ao dever ser chamada quando ocorrer o evento para o arquivo do item de biblioteca. 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 (se elas ainda no estiverem l).
Nota: Se codificar manualmente o JavaScript (se cri-lo sem utilizar os comportamentos do Dreamweaver), voc poder integr-lo a um item de biblioteca, se utilizar o comportamento Chamar o JavaScript 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.
434
Captulo 16
As funes JavaScript no sero armazenadas com o item de biblioteca porque so elementos da seo head do documento, enquanto os itens de biblioteca podero conter apenas elementos do body. Por isso, o painel Comportamentos no estar disponvel durante a edio de um item de biblioteca, pois apenas parte do cdigo do comportamento (o manipulador de evento) ser includo no item de biblioteca. preciso inicialmente inserir o item de biblioteca em um documento, para poder editar o comportamento na biblioteca e, em seguida, tornar editvel o item 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 Como utilizar os comportamentos na pgina 469.
Para editar um comportamento em um item de biblioteca:
Abra um documento que contenha o item de biblioteca. Anote o nome do item, bem como os tags que ele contm. Essas informaes sero necessrias nas etapas 8 e 9.
Selecione o item de biblioteca e clique em Desanexar do original, no inspetor de propriedades. Selecione o elemento que contm o comportamento anexado. Escolha Janela > Comportamentos, para abrir o painel Comportamentos. No painel Comportamentos, clique duas vezes na ao que deseja alterar. Na caixa de dilogo que aparecer, faa as alteraes necessrias e clique em OK. Escolha Janela > Biblioteca, para abrir a categoria Biblioteca, no painel Propriedades. Assegure-se de ter gravado o nome exato do item de biblioteca original. Em seguida, selecione o item de biblioteca original e exclua-o, clicando no boto Excluir, no painel Propriedades. Na janela do documento, selecione todos elementos que compem o item de biblioteca. Selecione com cuidado exatamente os mesmos elementos contidos no item de biblioteca original.
3 4
5 6
No painel Propriedades, clique no boto Novo item de biblioteca e denomine o novo item com o mesmo nome do que foi excludo na etapa 7. Certique-se de utilizar exatamente a mesma graa e caixa alta ou baixa. Para atualizar o item de biblioteca nos outros documentos do site, escolha Modicar > Biblioteca > Atualizar as pginas. Na caixa de dilogo Atualizar as pginas, no menu pop-up Procurar em, selecione Arquivos que utilizam.
10
11
435
12
Escolha o nome do item de biblioteca recm-criado no menu pop-up adjacente. Na opo Atualizar, certique-se de que os itens de biblioteca tenham sido selecionados e, em seguida, clique em Iniciar. Quando tiver concludo as atualizaes, clique em Fechar, para sair da caixa de dilogo Atualizar as pginas.
13
14
Como definir as propriedades dos itens de biblioteca Utilize as propriedades dos itens de biblioteca para especicar o arquivo de origem de um item, torn-lo editvel, ou recriar um item de biblioteca original aps a edio de uma ocorrncia dele no documento. Selecione um item de biblioteca no documento, para abrir o inspetor de propriedades.
Orig. exibe Abrir abre
o nome e a localizao do arquivo de origem do item de biblioteca. No possvel editar estas informaes. o arquivo de origem do item de biblioteca para edio. Isto equivale a selecionar o item no painel Propriedades e cliquar no boto Editar.
Desanexar do original rompe
o link entre o item de biblioteca selecionado e o seu arquivo de origem. Quando um item for desanexado, ele poder ser editado em um documento, mas ele no mais um item de biblioteca e no poder ser atualizado quando o item de biblioteca original for alterado.
Recriar substitui
o item de biblioteca original pela seleo atual. Utilize esta opo para recriar itens de biblioteca, se o item de biblioteca original estiver faltando ou tiver sido excludo acidentalmente.
Como utilizar as server-side includes

As server-side includes (incluses do servidor) so instrues destinadas ao servidor para que ele inclua o arquivo especicado no documento atual, antes de enviar o documento ao usurio que o requisitou. Elas se assemelham aos itens de biblioteca veiculados pelo servidor. Ao abrir um documento que se encontra no servidor, o servidor processa as instrues das includes e cria um novo documento em que as instrues so substitudas pelo contedo do arquivo includo. O servidor, ento, envia este novo documento ao seu navegador. Ao abrir um documento local em um navegador, no entanto, no h qualquer servidor para processar as instrues das includes no documento. Por conseguinte, o navegador abrir o documento sem processar tais instrues e o arquivo, que deveria ser includo, no aparecer no navegador. Sem utilizar o Dreamweaver, poder ser difcil visualizar os arquivos locais e conferir a aparncia que eles tero para os visitantes depois que forem colocados no servidor.
436
Captulo 16
Com o Dreamweaver, no entanto, possvel visualizar os documentos exatamente como eles aparecero depois de sua colocao no servidor, tanto na visualizao do projeto quanto na visualizao no navegador. Para poder exibir os arquivos includos, o Dreamweaver utiliza um conversor que reete a maneira que o servidor utilizaria para processar as instrues contidas nas includes. A colocao de uma server-side include em um documento inserir uma referncia a um arquivo externo. O contedo do arquivo especicado no ser inserido no documento. O Dreamweaver exibir o contedo do arquivo externo na janela do documento, facilitando assim a criao das pginas, porm o arquivo includo no poder ser editado diretamente em um documento. Para poder editar o contedo de uma server-side include, voc dever editar diretamente o arquivo a ser includo. Todas as alteraes feitas no arquivo externo sero automaticamente transpostas para os documentos que o inclurem. H dois tipos de server-side includes: Virtual e Arquivo. Escolha qual delas deseja utilizar, dependendo do tipo de servidor da Web que estiver utilizando:
Se o servidor for um servidor Apache Web, escolha Virtual. Esta a opo

padro no Dreamweaver. No Apache, a opo Virtual funciona em todos os casos, enquanto Arquivo funciona em apenas alguns casos.
Se o seu servidor for um servidor Microsoft IIS, escolha Arquivo. Virtual

funciona com o IIS somente em circunstncias especcas. 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 congurados para examinar todos os arquivos, vericando a ocorrncia de server-side includes. Outros servidores so congurados para examinar somente os arquivos com uma extenso especca como, por exemplo, .shtml, .shtm ou .inc. Se uma server-side include no estiver funcionando, pergunte ao administrador do sistema se necessrio utilizar uma extenso especial no nome do arquivo que utiliza a include. 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 congurar o servidor para examinar todos os arquivos (no apenas os arquivos com uma certa extenso) quanto ocorrncia de server-side includes. Entretanto, a anlise de um arquivo quanto ocorrncia de server-side includes 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 proporcionaro a opo de anlise de todos os arquivos.
437
Para inserir uma server-side include:
Escolha Inserir > Server-side include, ou clique no boto SSI, na categoria Comuns, do painel Objetos. Na caixa de dilogo que aparecer, procure e selecione um arquivo.
Para alterar o arquivo que ser includo:
1 2 3
Selecione a server-side include na janela do documento. Abra o inspetor de propriedades. Siga um dos procedimentos abaixo: para incluir.
Clique no cone correspondente pasta, procure e selecione um novo arquivo Na caixa de texto, digite o caminho e o nome do novo arquivo para incluir.
Como editar o contedo de uma server-side include Assim como os itens de biblioteca, as server-side includes so selecionadas como uma unidade na janela do documento. Diferentemente dos itens de biblioteca, o cdigo-fonte HTML das server-side includes contido no arquivo includo no aparecer no inspetor de cdigo ou na visualizao de cdigo da janela do documento. Em vez disso, ser mostrada a instruo do servidor, cuja aparncia se assemelha do exemplo abaixo:

Para poder editar o contedo associado a este arquivo includo, abra o arquivo.
Nota: As server-side includes no podem conter tags head ou body. Para editar uma server-side include:
Selecione a server-side include na janela do documento ou no inspetor de cdigo e, em seguida, clique em Editar, no inspetor de propriedades. O arquivo includo ser aberto na janela do documento. Edite o arquivo e salve-o. As alteraes sero transpostas imediatamente para o documento atual e em qualquer documento subseqente que for aberto e incluir esse arquivo.
438
Captulo 16
17
CAPTULO 17
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como utilizar as camadas
Uma camada um recipiente das pginas da Web que contm elementos de pgina em HTML. Ao utilizar camadas na pgina, voc obtm mais controle e exibilidade, tornando a pgina dinmica. As camadas foram criadas para serem utilizadas no desenho da Web, proporcionando aos designers o mesmo tipo de controle e exibilidade que eles possuem no design de impresso tradicional. possvel empilhar uma camada em cima da outra, ocultar algumas enquanto exibe outras, ou mover uma camada pela tela com uma linha de tempo. Por exemplo: possvel empilhar uma camada contendo texto sobre uma camada que apresente uma imagem de fundo. possvel provocar o aparecimento de imagens na pgina para, subseqentemente, desvanecerem. Tudo isso pode ser feito utilizando as camadas no Dreamweaver, sem ter que codicar nada em JavaScript ou HTML. Uma desvantagem de se utilizar as camadas nas pginas da Web que elas no so completamente visveis nos navegadores da Web mais antigos. Somente o Internet Explorer 4.0 e o Netscape 4.0, alm dos navegadores acima, exibem as camadas, mas nem sempre de forma consistente. Para que todos possam visualizar a sua pgina da Web, utilize as camadas juntamente com as tabelas. possvel projetar o layout da pgina utilizando camadas e, depois, converter as camadas em tabelas. Para obter mais informaes, consulte Como utilizar as tabelas e camadas para o layout na pgina 455.
Nota: recomendvel utilizar a visualizao de layout para visualizar o layout de pgina (consulte Como projetar o layout de pgina na pgina 177). A visualizao de layout uma maneira fcil de implementar a pgina de layout com tabelas como estrutura subjacente.
439
Sobre as camadas e o cdigo HTML

Quando voc inserir camadas nas pginas da Web, o Dreamweaver inserir o tag HTML a elas correspondente no cdigo. possvel denir quatro tags diferentes para as camadas: div, span, layer e ilayer. div e span so os tags mais comuns e so recomendados, para que a maior parte dos usurios possa visualizar as camadas. Tanto o Microsoft Internet Explorer 4.0 como o Netscape Navigator 4.0 oferecem suporte s camadas criadas com os tags div e span. Somente as verses 4.0 do Navigator oferecem suporte s camadas criadas com os tags layer e ilayer (a Netscape no oferece mais suporte nas ltimas verses de navegadores). As verses mais antigas dos dois navegadores exibiro o contedo de uma camada, porm no exibiro o posicionamento. Como padro, o Dreamweaver cria camadas com o tag div e insere o cdigo da camada na posio do ponto de insero ou no alto da pgina, logo aps o tag body. Se for criada uma camada aninhada, o Dreamweaver inserir o cdigo dentro do tag que dene a camada-me. Para alterar o tag padro, consulte Preferncias de camada na pgina 444. A seguir uma amostra de cdigo HTML para uma camada simples (com a aparncia que teria no Dreamweaver):
<div id="Layer1" style="position:absolute; visibility:inherit; width:200px; height:115px; z-index:1"> </div>
A seguir uma amostra de cdigo HTML para uma camada aninhada (com a aparncia que teria no Dreamweaver):
<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px; height:158px; z-index:1;"> Contedo da camada-me. <div id="Nested" style="position:absolute; left:97px; top:114px; width:54px; height:69px; z-index:1;"> Contedo da camada aninhada. </div> </div>
possvel denir as propriedades para posicionar as camadas na pgina. Estas propriedades incluem esquerda e No alto (coordenadas x e y, respectivamente), ndice z (tambm denominado ordem de empilhamento) e Visibilidade. Para obter mais informaes, consulte Como denir as propriedades de camada na pgina 449.
440
Captulo 17
Como criar camadas na pgina

O Dreamweaver permite criar camadas na pgina com facilidade e preciso. possvel desenhar uma camada na pgina, inserir uma camada atravs do menu ou arrast-la para a pgina. Crie tantas camadas quanto forem necessrias para conter todos os elementos da pgina. Tambm possvel criar uma camada dentro de outra camada (aninhamento), colocar camadas em cima de outras (empilhamento) ou ocultar certas camadas enquanto outras so exibidas. Utilize o painel Camadas para gerenciar as camadas e efetuar estas aes com facilidade. Para obter mais informaes, consulte Sobre o painel Camadas na pgina 442. Todas as camadas que criar na sua pgina possuiro certas caractersticas padro, como tag, visibilidade, altura, largura e assim por diante. Para alterar as denies padro, escolha Editar > Preferncias, e selecione Camadas. Para obter mais informaes sobre estas caractersticas, consulte Preferncias de camada na pgina 444. Se no desejar que as camadas se sobreponham umas s outras medida que crilas na pgina, ative a opo Evitar sobreposies, no painel Camadas, ou escolha Modicar > Organizar > Evitar sobreposies de camadas. Consulte Como evitar as sobreposies de camadas na pgina 456.
Para criar uma camada, siga um dos procedimentos abaixo:
Para desenhar uma camada, clique no boto Desenhar camada, no painel

Objetos e, em seguida, arraste a camada para a janela do documento.
Para inserir uma camada, posicione o ponto de insero na janela do

documento, onde deseja posicionar a camada e, em seguida, escolha Inserir > Camada.
Para arrastar e soltar uma camada, arraste o boto Desenhar camada, do painel
Objetos at a janela do documento. Para desenhar mais de uma camada ao mesmo tempo, clique no boto Desenhar camada, no painel Objetos, e mantenha pressionada a tecla Control (no Windows), ou Command (no Macintosh), enquanto desenha todas as camadas. Voc poder continuar a desenhar novas camadas, contanto que no solte a tecla Control. Se a opo Elementos invisveis estiver ativada, aparecer um marcador de camada na janela do documento a cada vez que for desenhada uma camada na pgina. Se os marcadores de camadas no estiverem visveis e desejar v-los, escolha Exibir > Auxlios visuais> Elementos invisveis. Para obter mais informaes, consulte Como denir as preferncias de elementos invisveis na pgina 164.
441
Nota: Se a opo Elementos invisveis estiver ativa, os elementos na pgina podero parecer deslocados. Os elementos invisveis podem ser exibidos apenas na janela do documento. Portanto, quando a pgina for visualizada em um navegador, os outros elementos aparecero em suas posies corretas.
Sobre o painel Camadas O painel Camadas constitui um meio de gerenciar as camadas dos documentos. Escolha Janela > Camadas, ou pressione a tecla F11, para abrir o painel Camadas. As camadas so exibidas como uma lista empilhada de nomes; a primeira camada criada est na parte inferior da lista, enquanto que a camada criada mais recentemente est no alto da lista. As camadas aninhadas so exibidas como nomes conectados s camadas-me. Clique na seta de expanso, para mostrar ou ocultar as camadas aninhadas.
Utilize o painel Camadas para evitar sobreposies, alterar a visibilidade das camadas, aninhar ou empilhar camadas e selecionar uma ou mais camadas.
442
Captulo 17
Como aninhar as camadas As camadas aninhadas foram criadas dentro de uma outra camada. Utilize o painel Camadas ou as tcnicas de insero, arrastar e soltar ou de desenho para criar camadas aninhadas. O aninhamento utilizado regularmente para agrupar as camadas. Uma camada aninhada se move com a sua camada-me e pode ser denida para herdar a visibilidade da me.
Se deseja forar o aninhamento automtico das camadas, dena as preferncias das camadas enquanto as desenha na pgina. Escolha Editar > Preferncias, selecione Camadas e clique na caixa de seleo Aninhamento. Todas as camadas que forem desenhadas dentro de outras camadas sero automaticamente aninhadas. Para obter mais informaes, consulte Preferncias de camada na pgina 444.
Nota: Utilize o ajuste de redimensionamento da Netscape quando estiver utilizando camadas aninhadas na pgina (Comandos > Adicionar/Remover o ajuste de redimensionamento da Netscape). De outra forma, as camadas perdero a sua posio na verso 4.0 da Netscape. Para criar uma camada aninhada, siga um dos procedimentos abaixo:
Para inserir uma camada aninhada, posicione o ponto de insero dentro de

uma camada existente e escolha Inserir > Camada.
Para arrastar e soltar uma camada aninhada, arraste o boto Desenhar camada,
no painel Objetos e, em seguida, solte-o dentro de uma camada existente.
Para desenhar uma camada aninhada, clique no boto Desenhar camada, no

painel Objetos e, em seguida, arraste a camada para dentro de uma outra camada. Se Aninhamento estiver desativado nas preferncias de camada, mantenha pressionada a tecla Alt (no Windows), ou Option (no Macintosh), para desenhar uma camada dentro de outra j existente.
443
Para criar uma camada aninhada utilizando o painel Camadas:
Escolha Janela > Camadas, ou pressione a tecla F11, para abrir o painel Camadas. Selecione uma camada no painel Camadas e, em seguida, mantenha pressionada a tecla Control (no Windows), ou Command (no Macintosh) e arraste a camada at a camada de destino no painel Camadas. Solte o boto do mouse quando aparecer uma caixa ao redor do nome da camada de destino.
Preferncias de camada Utilize as preferncias de camada para ajustar as denies padro das novas camadas criadas. Escolha Editar > Preferncias e, em seguida, clique em Camadas, para alterar as preferncias de camada.
Tag dene
o tag HTML padro a ser utilizado na criao de camadas. As opes so DIV (padro), span, layer ou ilayer. div ou span so recomendadas para assegurar que as camadas funcionaro em todos os navegadores das verses 4.0 e mais recentes. layer e ilayer funcionam apenas nos navegadores Netscape 4.x.
Visibilidade determina Largura
se as camadas sero visveis como padro.
e altura denem a largura e altura padro das camadas criadas pelo comando Inserir > Camada.
Cor de fundo determina
a cor de fundo padro. Selecione a cor no seletor de cores.
Imagem de fundo especica
uma imagem de fundo padro. Clique em Procurar, para localizar o arquivo no computador, ou digite o caminho at o arquivo de imagem na caixa de texto.
Aninhamento torna
aninhada uma camada desenhada dentro dos limites de outra j existente. Mantenha pressionada a tecla Alt (no Windows), ou Option (no Macintosh), para alterar essa denio temporariamente enquanto desenha a camada. insere JavaScript no contedo head de um documento e corrige um problema conhecido nos navegadores Netscape 4.x, que acarreta a perda das coordenadas de posicionamento das camadas quando um usurio redimensionar a janela do navegador. JavaScript fora a pgina a ser recarregada a cada vez que a janela do navegador for redimensionada, atribuindo a posio correta s camadas. O JavaScript tambm pode ser adicionado ou removido, atravs da escolha de Comandos > Adicionar/remover o ajuste de redimensionamento da Netscape.
Compatibilidade do Netscape 4
444
Captulo 17
Como manipular as camadas

As camadas podem ser selecionadas, redimensionadas ou ativadas durante o trabalho no layout da pgina. necessrio selecionar uma camada, para poder mov-la, redimension-la ou alinh-la. O redimensionamento das camadas permite alterar as dimenses de uma nica camada ou tornar iguais as alturas e larguras de duas ou mais camadas. A ativao das camadas permite apenas a insero do seu contedo. Para evitar que as camadas se sobreponham quando forem movidas ou redimensionadas, utilize a opo Evitar sobreposies. Consulte Como evitar as sobreposies de camadas na pgina 456. Como selecionar as camadas Selecione uma ou mais camadas, para tornar iguais as suas larguras e alturas, reposicion-las, alinh-las, etc. Para obter uma lista completa de opes, consulte Como denir as propriedades de camada na pgina 449.
Para selecionar uma camada, siga um dos procedimentos abaixo:
Clique no nome da camada, no painel Camadas. Clique na ala de seleo da camada. Se a ala no estiver visvel, clique em
qualquer ponto dentro da camada para torn-la visvel.
Clique na borda de uma camada. Se nenhuma camada estiver ativa ou selecionada, mantenha pressionada a tecla
Shift enquanto clica dentro de uma camada.
Se houver mltiplas camadas selecionadas, clique dentro de uma delas

enquanto mantm pressionadas as teclas Control e Shift (no Windows), ou as teclas Command e Shift (no Macintosh). Esta opo ir cancelar a seleo de todas as camadas e selecionar apenas aquela que foi escolhida.
Clique no marcador da camada, na janela do documento, que representa o local

da camada no cdigo HTML. Se o marcador da camada no estiver visvel, escolha Exibir > Auxlios Visuais > Elementos invisveis.
445
Para selecionar camadas mltiplas, siga um dos procedimentos abaixo:
Pressione a tecla Shift enquanto clica nos nomes de duas ou mais camadas, no
painel Camadas.
Pressione a tecla Shift e clique dentro ou na borda de duas ou mais camadas.

Quando houver camadas mltiplas selecionadas, as alas da ltima camada escolhida estaro realadas em preto. As alas das outras camadas estaro realadas em branco. Como redimensionar as camadas possvel redimensionar uma nica ou vrias camadas simultaneamente, a m de tornar iguais as suas larguras e alturas. Se a opo Evitar sobreposies estiver ativada, no ser possvel redimensionar uma camada para que esta se sobreponha a outra camada. Consulte Como evitar as sobreposies de camadas na pgina 456.
Para redimensionar uma camada, siga um dos procedimentos abaixo:
Para redimensionar arrastando o cursor, selecione a camada e arraste qualquer

uma das alas de redimensionamento.
Para redimensionar um pixel por vez, selecione a camada e pressione a tecla

Control e uma das teclas de seta (no Windows), ou a tecla Option e uma das teclas de seta (no Macintosh).
Para redimensionar de acordo com o incremento de encaixe na grade, pressione

as teclas Shift, Control e uma das teclas de seta (no Windows), ou Option e uma das teclas de seta (no Macintosh). Para obter informaes sobre a denio de incrementos de encaixe na grade, consulte Como encaixar as camadas na grade na pgina 448.
No inspetor de propriedades, digite os valores da largura e altura.

O redimensionamento de uma camada ir alterar a sua largura e altura. Ele no denir a extenso do contedo da camada que estar visvel. Para denir a regio visvel de uma camada, consulte Como denir as propriedades de camada na pgina 449.
446
Captulo 17
Para redimensionar camadas mltiplas:
1 2
Na janela do documento, selecione duas ou mais camadas. Siga um dos procedimentos abaixo: > Tornar as alturas iguais. As primeiras camadas selecionadas assumiro a largura ou altura da ltima camada selecionada (realada em preto).
Escolha Modicar > Alinhar > Tornar as larguras iguais, ou Modicar > Alinhar
No inspetor de propriedades, abaixo de Camadas mltiplas, digite os valores de

largura e altura. Os valores sero aplicados a todas as camadas selecionadas. Como mover as camadas Qualquer pessoa que j tenha trabalhado com aplicativos grcos bsicos estar familiarizada com o procedimento de transferncia de camadas na janela do documento. Se a opo Evitar sobreposies estiver ativa, no ser possvel mover uma camada para que se sobreponha a outra. Consulte Como evitar as sobreposies de camadas na pgina 456.
Para mover uma ou mais camadas, siga um dos procedimentos abaixo:
Para mover arrastando, selecione as camadas e arraste a ala de seleo da ltima

camada selecionada (realada em preto).
Para mover um pixel por vez, selecione as camadas e utilize as teclas de seta.
Pressione a tecla Shift e uma das teclas de seta, para mover a camada de acordo com o incremento de encaixe na grade. Para obter informaes sobre a denio de incrementos de encaixe na grade, consulte Como encaixar as camadas na grade na pgina 448. Como alinhar as 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, possvel que as camadas-lhas que no estiverem selecionadas se movam. Para evitar esse tipo de problema, no utilize camadas aninhadas.
447
Para alinhar duas ou mais camadas:
1 2
Selecione as camadas. Escolha Modicar > Alinhar e selecione uma opo de alinhamento.
Por exemplo: se voc selecionar 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). Como encaixar as camadas na grade Utilize a grade como um guia visual para posicionar ou redimensionar as camadas na janela do documento. possvel ativar esta grade para utiliz-la como um guia enquanto estiver desenhando as camadas. possvel encaixar as camadas automaticamente na grade e alter-la ou controlar o comportamento de encaixe, atravs da especicao das denies de grade. O encaixe funcionar independentemente da visibilidade da grade.
Para exibir a grade, siga um dos procedimentos abaixo:
Escolha Exibir > Grade > Mostrar a grade. Escolha Exibir > Grade > Editar a grade, e selecione a opo Mostrar a grade.
Para encaixar uma camada:
1 2
Escolha Exibir > Grade > Encaixar na grade, para ativar (ou desativar) o encaixe. Selecione a camada e arraste-a. A camada saltar para a posio de encaixe mais prxima.
Para alterar as definies de grade:
Clique em Exibir > Grade > Editar a grade, para abrir a clula de dilogo Denies de grade. Siga qualquer um dos procedimentos abaixo: nmero hexadecimal na clula. Este recurso controla a cor das linhas da grade.
Clique na seta prxima amostra de cor e selecione a cor na paleta ou digite o Selecione Mostrar a grade, para mostrar a grade na janela do documento. Selecione Encaixar na grade, para possibilitar o encaixe. Digite o fator de espaamento que deseja e, no menu pop-up, selecione Pixels,
Polegadas ou Centmetros. Este recurso controla a distncia entre as linhas da grade.
Escolha linhas ou pontos para as linhas de grade.

3
Clique em Aplicar, para visualizar as alteraes e, em seguida, em OK, para fechar a caixa de dilogo.
448
Captulo 17
Como tornar ativas as camadas Antes de colocar objetos numa camada, esta deve ser ativada. A ativao de uma camada coloca o ponto de insero em seu interior, reala a sua borda e exibe a ala de seleo, mas no seleciona a camada.
Para ativar uma camada:
Clique em qualquer ponto dentro da camada.
Como definir as propriedades de camada

Utilize o inspetor de propriedades para especicar o nome e posio de uma camada, assim como denir outras opes de camadas. Para exibir todas as seguintes propriedades, clique na seta de expanso, localizada no canto inferior direito do inspetor de propriedades.
Identidade da camada especica
um nome que identicar a camada no painel Camadas e como referncia de scripts. Digite um nome na caixa sem ttulo, no lado esquerdo do inspetor de propriedades. Utilize apenas caracteres alfanumricos padro no nome de uma camada. No utilize caracteres especiais, como espaos, hfens, barras ou pontos. Cada camada deve possuir seu prprio nome exclusivo.
E e A (esquerda
e alto) especicam a posio da camada em relao ao canto superior esquerdo da pgina ou camada-me (se aninhada).
L e U especicam
a largura e altura da camada. Esses valores sero ignorados se o contedo da camada exceder o tamanho especicado. Se div ou span forem denidos como tag padro, os valores padro para local e tamanho sero expressos em pixels (px). Tambm possvel especicar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milmetros), cm (centmetros) ou % (percentagem do valor da camada-me). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm. A denio Estouro controla como as camadas reagiro quando o contedo exceder o tamanho da camada.
449
ndice Z determina o ndice Z (ou ordem de empilhamento) da camada. As camadas com nmeros mais elevados aparecero acima das camadas com nmeros menores. Os valores podem ser positivos ou negativos. mais fcil alterar a ordem de empilhamento das camadas utilizando o painel Camadas do que digitando valores especcos ao ndice z. Consulte Como alterar a ordem de empilhamento de camadas na pgina 453.
As camadas da Netscape (que contm os tags layer ou ilayer) tambm podem ser empilhadas em relao a outras camadas na pgina. Quando voc selecionar uma camada da Netscape, aparecero duas outras opes no canto inferior direito do inspetor de propriedades. Utilize a opo A/B para selecionar uma posio de empilhamento relativa e, em seguida, escolha o nome de outra camada no menu pop-up direita. A especica uma camada acima da atual; B especica uma camada abaixo da atual.
Vis determina
a condio inicial de exibio da camada (visvel ou no). Utilize uma linguagem de criao de scripts, como JavaScript, para controlar a propriedade de visibilidade e exibir dinamicamente o contedo das camadas. Escolha dentre as seguintes opes:
Default (Padro) no especica uma propriedade de visibilidade, porm a

maior parte dos navegadores interpreta essa opo como Inherit (Herdar).
Inherit (Herdar) utiliza a propriedade de visibilidade da camada-me. Visible (Visvel) exibe o contedo da camada, independentemente do valor da
camada-me.
Hidden (Oculto) oculta o contedo da camada, independentemente do valor

da camada-me. Observe que as camadas ocultas criadas com o tag ilayer ocuparo o mesmo espao, como se estivessem visveis.
Imagem de fundo especica
a imagem de fundo da camada. Clique no cone correspondente pasta, para procurar e selecionar um arquivo de imagem, ou digite o caminho da imagem no campo de texto.
Cor de fundo especica Tag determina
a cor de fundo da camada. Deixe esta opo em branco para especicar um fundo transparente.
ilayer
o tag HTML a ser usado. span e div so recomendados. layer e criam camadas no Netscape Navigator que, no entanto, s sero visveis nos navegadores Netscape Navigator 4.
450
Captulo 17
Estouro determina
o que ocorrer se o contedo exceder o tamanho da camada. Escolha dentre as seguintes opes:
Visible (Visvel) aumenta o tamanho da camada, para que todo o seu contedo
esteja visvel. A camada se expandir para baixo e para a direita.
Hidden (Oculta) mantm o tamanho da camada e corta qualquer contedo

que no caiba na mesma. No so fornecidas barras de rolagem.
Paginao adiciona barras de rolagem camada, independentemente do

contedo ser maior ou no que o tamanho da camada. Quando as barras de rolagem forem explicitamente denidas, evita-se qualquer confuso resultante do aparecimento e desaparecimento das mesmas em um ambiente dinmico. Essa opo funciona apenas nos navegadores que oferecem suporte s barras de rolagem.
Automtico faz com que as barras de rolagem apaream apenas quando o

contedo da camada ultrapassar os seus limites.
Corte dene
a rea visvel de uma camada e pode ser utilizada para retirar contedo das margens da camada. Especique os valores que representam a distncia, em pixels, dos limites da camadas. As denies A (alto) e E (esquerda) so relativas camada, e no pgina.
As opes esquerda, no alto e Pg. X, Pg. Y (apenas
com layer e ilayer) permitem posicionar uma camada em relao sua camada-me. A opo esquerda, no alto posiciona a camada em relao ao canto superior esquerdo da camada-me. A opo Pg. X, Pg. Y posiciona a camada em um local absoluto em relao ao canto superior esquerdo da pgina, independente da posio da camada-me.
Orig (apenas com layer e ilayer) permite exibir um outro documento HTML na camada. Clique no cone correspondente pasta, para procurar e selecionar o documento, ou digite o caminho at o documento. Observe que o Dreamweaver no exibir essa propriedade na janela do documento. A/B (apenas
com layer e ilayer) especica a camada acima (A) ou abaixo (B) da camada atual, na ordem de empilhamento (ndice z). Somente as camadas denidas previamente no documento aparecero na lista de nomes de camadas, situada direita do menu A/B.
451
Como definir as propriedades de camadas mltiplas Quando duas ou mais camadas forem selecionadas, o inspetor de propriedades de camadas exibir as propriedades de texto e um subconjunto das propriedades comuns das camadas, que permitiro modicar vrias camadas simultaneamente. Para selecionar camadas mltiplas, pressione a tecla Shift enquanto seleciona as camadas. Consulte Como manipular as camadas na pgina 445.
E e A especicam L e U especicam
a posio das camadas em relao ao canto superior esquerdo da pgina ou camada-me. a largura e altura das camadas. Esses valores sero ignorados se o contedo da camada exceder o tamanho especicado. Se div ou span forem denidos como tag padro, os valores padro para local e tamanho sero expressos em pixels (px). Tambm possvel especicar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milmetros), cm (centmetros) ou % (percentagem do valor da camada-me). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm.
Vis determina
a condio inicial de exibio da camada. Escolha dentre as seguintes opes:
Default (Padro) no especica uma propriedade de visibilidade, porm a

maior parte dos navegadores interpreta essa opo como Inherit (Herdar).
Inherit (Herdar) utiliza a propriedade de visibilidade da camada-me. Visible (Visvel) exibe o contedo da camada, independentemente do valor da
camada-me.
Hidden (Oculto) exibe o contedo da camada de forma transparente,

independentemente do valor da camada-me. Observe que as camadas ocultas criadas com os tags layer e ilayer ocuparo o mesmo espao, como se estivessem visveis.
Tag determina o tag HTML a ser utilizado. span e div so recomendados. layer e ilayer criam camadas Netscape Navigator, mas sero visveis apenas nos navegadores Netscape 4. Imagem de fundo especica
a imagem de fundo de uma camada. Clique no cone correspondente pasta, para procurar e selecionar um arquivo de imagem, ou digite o caminho da imagem no campo de texto.
Cor de fundo especica
a cor de fundo de uma camada. Deixe esta opo em branco para especicar um fundo transparente.
452
Captulo 17
Como alterar a ordem de empilhamento de camadas

Utilize o inspetor de propriedades ou o painel Camadas para alterar a ordem de empilhamento das camadas. A camada na parte superior do painel Camadas est situada no alto da ordem de empilhamento. Em cdigo HTML, a ordem de empilhamento, ou ndice z, determina a ordem segundo a qual as camadas sero desenhadas em um navegador. O ndice z de cada camada pode ser alterado no inspetor de propriedades ou no painel Camadas.
Para alterar a ordem de empilhamento das camadas no painel Camadas:
Escolha Janela > Camadas, para abrir o painel Camadas. Siga um dos procedimentos abaixo:
Selecione e arraste uma camada para cima ou para baixo, de acordo com a
ordem de empilhamento desejada. Aparecer uma linha medida que a camada for movida. Solte o boto do mouse quando a linha de colocao aparecer na ordem de empilhamento desejada.
Na coluna Z, clique no nmero da camada que estiver sendo alterada. Digite

um nmero mais alto que o existente, para mover a camada para uma posio superior na ordem de empilhamento, ou um nmero mais baixo, para mover a camada at uma posio inferior na ordem de empilhamento.
Para alterar a ordem de empilhamento das camadas com o inspetor de propriedades:
Escolha Janela > Camadas, para abrir o painel Camadas e examinar a ordem de empilhamento atual. Selecione uma camada no painel ou na janela do documento. No inspetor de propriedades da camada, digite um nmero no campo ndice Z. ordem de empilhamento.
2 3
Digite um nmero mais alto, para mover a camada at uma posio superior na Digite um nmero mais baixo, para mover a camada at uma posio inferior
na ordem de empilhamento.
453
Como alterar a visibilidade das camadas

Ao trabalhar em um documento, voc poder mostrar ou ocultar as camadas, a m de examinar a aparncia da pgina sob diversas condies. Utilize o painel Camadas para alterar a visibilidade das camadas. Utilize o painel Preferncias de camada para denir a visibilidade padro de novas camadas. Consulte Preferncias de camada na pgina 444.
Para alterar a visibilidade de uma camada:
1 2
Escolha Janela > Camadas, para abrir o painel Camadas. Na linha da camada que estiver sendo alterada, clique na coluna do cone representando um olho, para denir a visibilidade desejada.
Um olho aberto signica que a camada est visvel. Um olho fechado signica que a camada est invisvel. Se no houver um cone representando um olho, a camada herdar as
denies de visibilidade da camada-me. Quando as camadas no estiverem aninhadas, a camada-me ser o corpo do documento, que est sempre visvel.
Para alterar a visibilidade de todas as camadas simultaneamente:
1 2
Escolha Janela > Camadas, para abrir o painel Camadas. Clique no cone representando um olho, no alto da coluna do cabealho.
454
Captulo 17
Como utilizar as tabelas e camadas para o layout

Em vez de utilizar clulas e tabelas de layout na visualizao de layout para criar o layout (consulte Como projetar o layout de pgina na pgina 177), alguns usurios preferem trabalhar com camadas e tabelas. O Dreamweaver permite criar o layout utilizando camadas e, em seguida, convert-las em tabelas, j que os navegadores 3.0 no oferecem suporte a camadas. possvel aprimorar o layout e otimizar o desenho da pgina movimentando-se entre as diversas camadas e tabelas. 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. Crie o layout original e converta-o antes de salv-lo como um modelo. Uma tabela ou camada simples no pode ser convertida. S possvel converter camadas em tabelas e vice-versa para uma pgina inteira. Se desejar gerar arquivos compatveis com os navegadores das verses 3.0 a partir do arquivo atual, utilize as opes de converso do menu Arquivo. Consulte Como converter para obter compatibilidade com a verso 3.0 na pgina 457. Como converter entre camadas e tabelas Crie o layout utilizando camadas e, em seguida, converta as camadas em tabelas, para que o layout possa ser visualizado na maioria dos navegadores.
Para converter camadas em uma tabela:
1 2
Escolha Modicar > Converter > Camadas em tabela. Na caixa de dilogo que aparecer, selecione as opes de layout desejadas. Mais preciso cria uma clula correspondente a cada camada, alm de quaisquer outras clulas que forem necessrias manuteno do espao entre as camadas. Menor: fechar as clulas vazias especica que as margens das camadas devero se alinhar se forem posicionadas, de acordo com o nmero especicado de pixels. Se selecionar esta opo, a tabela resultante ter poucas linhas e colunas vazias, mas poder no coincidir com o layout estipulado de forma precisa. Utilizar GIFs transparentes preenche a ltima linha da tabela com GIFs transparentes. Esse procedimento garante que a tabela ser exibida com as mesmas larguras de coluna em todos os tipos de navegadores. Quando esta opo estiver ativa, no ser possvel editar a tabela resultante arrastando as suas colunas. Quando estiver desativada, a tabela resultante no apresentar GIFs transparentes, porm a sua aparncia poder variar, de acordo com o tipo de navegador utilizado. Centralizar na pgina centraliza a tabela resultante na pgina. Se esta opo estiver desativada, a tabela ser alinhada esquerda. Selecione as ferramentas de layout e opes de grade desejadas e clique em OK.
455
Para converter uma tabela em camadas:
1 2
Escolha Modicar > Converter > Tabelas em camadas. Na caixa de dilogo que aparecer, selecione as opes desejadas. lo a posicionar as camadas. Consulte Como encaixar as camadas na grade na pgina 448.
Mostrar a grade e Encaixar na grade permitem utilizar uma grade para auxili Evitar sobreposies de camadas restringe a posio das camadas ao serem
criadas, movidas e redimensionadas, para que no se sobreponham. Consulte Como evitar as sobreposies de camadas na pgina 456.
Mostrar o painel Camadas exibe o painel Camadas. Consulte Sobre o painel

Camadas na pgina 442.
3
Clique em OK.
As tabelas sero convertidas em camadas. As clulas vazias no sero convertidas em camadas, a no ser que elas tenham uma cor de fundo.
Nota: Os elementos de pgina que tiverem sido colocados fora das tabelas na pgina tambm sero colocados em camadas.
Como evitar as sobreposies de camadas Como 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 para garantir a compatibilidade com os navegadores da verso 3.0, utilize a opo Evitar sobreposies, que restringir o movimento e posicionamento das camadas, de maneira que no haja sobreposio.
Para evitar que as camadas se sobreponham:
Escolha Modicar > Organizar > Evitar sobreposies de camadas, ou ative a opo Evitar sobreposies, no painel Camadas.
456
Captulo 17
Quando esta opo estiver ativada, uma camada no poder ser criada na frente de, movida ou redimensionada sobre ou aninhada dentro de uma camada existente. Se esta opo for ativada depois da criao de camadas sobrepostas, arraste a camada sobreposta e afaste-a da outra camada. O Dreamweaver no corrigir as camadas sobrepostas automaticamente na pgina quando a opo Evitar sobreposies de camadas for ativada. Quando essa opo e o encaixe estiverem ativos, a camada no se encaixar na grade, se isto acarretar a sobreposio de duas camadas. Em vez disso, ela se encaixar na margem da camada mais prxima.
Nota: Certas aes permitem que as camadas se sobreponham, mesmo quando a opo Evitar sobreposies estiver ativada. Se inserir uma camada a partir do menu, digite nmeros no inspetor de propriedades ou reposicione as camadas editando o cdigo-fonte HTML, no inspetor de HTML. possvel provocar a sobreposio ou o aninhamento de camadas enquanto a opo estiver ativada. Se isto ocorrer, arraste as camadas sobrepostas at a janela do documento, a fim de separ-las.
Como converter para obter compatibilidade com a verso 3.0 Utilize a opo Converter, no menu Arquivo, para criar uma verso de pgina compatvel com navegador 3.0, que utiliza camadas. O Dreamweaver criar um outro documento convertido, preservando o original. Em geral, estas converses devero ser efetuadas apenas quando voc estiver inteiramente satisfeito com o arquivo original, j que seria necessrio repetir a converso a cada vez que esse arquivo for alterado.
Para converter um arquivo a ser utilizado com os navegadores da verso 3.0:
1 2
Escolha Arquivo > Converter > Compatvel com navegador 3.0. Na clula de dilogo que aparecer, escolha se deseja converter camadas em tabelas, estilos CSS em markup de HTML (estilos de caracteres), ou ambos. Clique em OK.
O Dreamweaver abrir o arquivo convertido em uma nova janela sem ttulo. Quando a opo Converter camadas em tabelas ou Ambos for selecionada, todas as camadas sero substitudas por uma nica tabela, que manter o posicionamento original.
Nota: No possvel converter as camadas sobrepostas ou fora da pgina, esquerda ou no alto.
Se a opo Converter estilos CSS em markup de HTML ou Ambos for selecionada, o markup de CSS ser substitudo, onde for possvel, por estilos de caracteres HTML. Qualquer markup de CSS que no puder ser convertido em HTML ser removido. Consulte a Tabela de converso de CSS em markup de HTML na pgina 278 para obter mais informaes sobre os estilos que so convertidos e os que so removidos.
457
O cdigo de linhas de tempo que anima as camadas ser removido. O cdigo de linhas de tempo que no estiver relacionado s camadas (comportamentos ou alteraes origem da imagem, por exemplo) ser executado conforme especicado. A linha de tempo ser automaticamente rebobinada at o quadro 1. Para obter mais informaes sobre as linhas de tempo, consulte Como criar uma animao de linha de tempo na pgina 461.
Como animar as camadas

O HTML dinmico, ou DHTML, refere-se possibilidade de alterar as propriedades de estilo ou posicionamento de elementos HTML com uma linguagem de criao de scripts. As linhas de tempo utilizam o HTML dinmico para alterar as propriedades de camadas e imagens em uma srie temporal de quadros. Utilize as linhas de tempo para criar animaes que dispensem quaisquer controles ActiveX, plug-ins ou miniaplicativos de Java (mas no requerem JavaScript). As linhas de tempo criam animaes alterando com o tempo a posio, tamanho, visibilidade e ordem de empilhamento de uma camada. As linhas de tempo tambm so teis para outras aes que devero ocorrer aps o nal da carga da pgina. Por exemplo: as linhas de tempo podem alterar o arquivo de origem de um tag de imagem, para que imagens diversas apaream na pgina durante um certo perodo de tempo. As funes de camadas das linhas de tempo funcionam apenas nos navegadores das verses 4.0 ou mais avanadas. Abra o inspetor de HTML para examinar o cdigo de JavaScript gerado por uma linha de tempo. O cdigo da linha de tempo est na funo MM_initTimelines dentro de um tag script, no contedo head do documento. Ao editar o HTML de um documento que contm linhas de tempo, tome cuidado especial para no mover, renomear ou excluir qualquer elemento ao qual se refere a linha de tempo.
458
Captulo 17
Painel Linhas de tempo O painel Linhas de tempo representa a alterao das propriedades das camadas e imagens ao longo do tempo. Escolha Janela > Linhas de tempo, para abrir o painel Linhas de tempo. Clique no painel Linhas de tempo com o boto direito do mouse (no Windows), ou enquanto mantm pressionada a tecla Control (no Macintosh), para abrir um menu contextual contendo todos os comandos relevantes.
Menu pop-up Linha de tempo Cabeote de execuo Nmeros de quadros
Canal de comportamentos
Quadros primrios Barras de animao Cabeote de execuo mostra
Canais de animao
o quadro da linha de tempo que est em exibio
na pgina.
Menu pop-up Linha de tempo especica Canais de animao exibem
quais linhas de tempo do documento esto exibidas no painel Linhas de tempo. barras para animar as camadas e imagens.
Barras de animao mostram a durao de cada animao de objeto. Uma nica linha pode incluir vrias barras, que representam diversos objetos. Barras diferentes no podem controlar o mesmo objeto no mesmo quadro. Quadros primrios so
quadros situados em uma barra na qual voc havia especicado algumas propriedades (como a posio) do objeto. O Dreamweaver calcula os valores intermedirios dos quadros situados entre os quadros primrios. Os quadros primrios so indicados por pequenos crculos.
Canal de comportamentos o canal contendo os comportamentos que devero ser
executados em um determinado quadro da linha de tempo.
459
Nmeros de quadros indicam
o nmero seqencial de quadros. O nmero entre os botes Voltar e Executar representa o quadro atual. Controle a durao da animao ao denir o nmero total de quadros e o nmero de quadros por segundo (qps). A denio padro de 15 quadros por segundo constitui uma boa taxa mdia, a ser utilizada na maior parte dos navegadores executados nos sistemas mais comuns do Windows e Macintosh. possvel que as taxas mais rpidas no melhorem o desempenho. Os navegadores sempre executam cada quadro da animao, mesmo se no puderem atingir a taxa de quadros especicada no sistema do usurio. A taxa de quadros ser ignorada se for mais alta do que o navegador pode gerenciar. Opes de execuo Abaixo, est uma lista das opes de execuo para exibir a animao.
Rebobinar move Voltar move
o cabeote de execuo at o primeiro quadro da linha de tempo.
o cabeote de execuo um quadro esquerda. Clique em Voltar e mantenha pressionado o boto do mouse, para executar a linha de tempo de trs para diante.
Executar move
o cabeote de execuo um quadro direita. Clique em Executar e mantenha pressionado o boto do mouse, para executar a linha de tempo continuamente.
Execuo automtica inicia a execuo automtica de uma linha de tempo quando a pgina tiver sido carregada em um navegador. A execuo automtica anexa um comportamento ao tag body da pgina, que executa a ao Executar a linha de tempo quando a pgina for carregada. Loop provoca
a repetio indenida da linha de tempo quando a pgina estiver aberta em um navegador. A opo Loop insere o comportamento Ir para o quadro da linha de tempo, no canal de comportamentos, aps o ltimo quadro da animao. Clique duas vezes no marcador deste quadro, para editar os parmetros do comportamento e alterar o nmero de repeties.
460
Captulo 17
Como criar uma animao de linha de tempo As linhas de tempo criam animaes alterando a posio, tamanho, visibilidade e ordem de empilhamento das camadas. As linhas de tempo podem alterar tambm os arquivos de origem de imagens. Assim, possvel criar uma apresentao de slides de imagem com linhas de tempo. As linhas de tempo podem mover apenas as camadas. Para mover imagens ou texto, crie uma camada utilizando o boto Desenhar camada, no painel Objetos e, em seguida, insira imagens, texto ou qualquer outro tipo de contedo na camada. Consulte Como criar camadas na pgina na pgina 441.
Para criar uma animao de linha de tempo:
1 2 3
Se desejar animar uma camada, mova-a at o ponto inicial da animao. Escolha Janela > Linhas de tempo. Selecione a camada a ser animada. Certique-se de ter selecionado o elemento desejado. Para selecionar uma camada, clique no marcador ou na ala de seleo da camada, ou utilize o painel Camadas. Consulte tambm Como manipular as camadas na pgina 445. Quando a camada estiver selecionada, aparecero alas ao seu redor, como mostra a seguinte ilustrao.
Clique no marcador da camada para selecion-la
boto Desenhar camada
Camada selecionada contendo uma imagem
Ao clicar na camada, surgir um ponto de insero piscando dentro da mesma, porm isto no indica que ela esteja selecionada.
461
Escolha Modicar > Linha de tempo >Adicionar objeto linha de tempo, ou simplesmente arraste o objeto selecionado at o painel Linhas de tempo. Aparecer uma barra no primeiro canal da linha de tempo. O nome da camada aparecer na barra.
5 6
Clique no marcador do quadro primrio, no nal da barra. Mova a camada na pgina para onde dever estar ao nal da animao. Uma linha aparecer exibindo o caminho da animao na janela do documento. Se desejar que a camada se mova em uma curva, selecione a respectiva barra de animao e clique mantendo pressionada a tecla Control (no Windows) , ou a tecla Command (no Macintosh) e clique num quadro no meio da barra de animao, para adicionar um quadro primrio na posio do cursor, ou clique em um quadro no meio da barra de animao e, no menu de atalhos, escolha Adicionar quadro primrio. Repita essa etapa para denir outros quadros primrios. Mantenha pressionado o boto Executar, para visualizar a animao na pgina. Repita o procedimento para adicionar outras camadas e imagens linha de tempo, e criar uma animao mais complexa.
Como criar uma linha de tempo arrastando um caminho Se desejar criar uma animao com um caminho complexo, a gravao do caminho medida que arrasta a camada poder ser mais eciente do que a criao de quadros primrios individuais.
Para criar uma linha de tempo arrastando um caminho:
1 2
Selecione uma camada. Mova a camada at o ponto inicial da animao. Certique-se de ter selecionado o elemento correto. Clique no marcador da camada, na ala de seleo da camada ou utilize o painel Camadas para selecionar uma camada. Consulte tambm Como manipular as camadas na pgina 445.
3 4 5
Escolha Modicar > Linha do tempo > Gravar o caminho da camada. Arraste a camada pela pgina para criar um caminho. Solte o mouse no ponto em que a animao dever parar. O Dreamweaver adicionar uma barra de animao linha de tempo com o nmero apropriado de quadros primrios.
No painel Linhas de tempo, clique no boto Rebobinar; em seguida, mantenha pressionado o boto Executar, para visualizar a animao.
462
Captulo 17
Como modificar as linhas de tempo Aps ter denido os componentes bsicos de uma linha de tempo, faa alteraes, como adicionar e remover quadros, alterar o incio da animao, etc.
Para modificar uma linha de tempo, siga um dos procedimentos abaixo:
Para tornar a animao mais longa, arraste o marcador do quadro nal para a
direita. Todos os quadros primrios da animao sero acomodados no novo espao, mantendo constantes as suas posies relativas. Pressione a tecla Alt (no Windows), ou Option (no Macintosh) enquanto arrasta o marcador do quadro nal, para impedir que os outros quadros primrios se movam.
Para antecipar ou retardar a chegada da camada posio do quadro primrio,

mova o marcador do quadro primrio para a direita ou esquerda, ao longo da barra.
Para alterar o incio de uma animao, selecione uma ou todas as barras

associadas animao (pressione a tecla Shift para selecionar mais de uma barra simultaneamente) e arraste para a esquerda ou direita.
Para alterar a localizao de toda a animao, selecione a barra inteira e arraste

o objeto sobre a pgina. O Dreamweaver ajustar a posio de todos os quadros primrios. Qualquer tipo de alterao feita com uma barra inteira selecionada modicar todos os quadros primrios.
Para adicionar ou remover quadros da linha de tempo, escolha Modicar >

Linha de tempo > Adicionar quadro, ou Modicar > Linha de tempo > Remover o quadro.
Para que a linha de tempo seja executada automaticamente quando a pgina for
aberta em um navegador, clique em Execuo automtica. Esta opo anexar um comportamento pgina, que executar a ao Executar a linha de tempo quando a pgina for carregada.
Para que a linha de tempo seja repetida continuamente, clique em Loop. Esta
opo inserir a ao Ir para o quadro da linha de tempo no canal de comportamentos, aps o ltimo quadro da animao. possvel editar os parmetros relacionados a esse comportamento, para denir o nmero de repeties.
463
Como alterar as propriedades das imagens e camadas com as linhas de tempo Alm de mover as camadas com as linhas de tempo, possvel alterar o arquivo de origem de uma imagem e a visibilidade, tamanho e ordem de empilhamento de uma camada.
Para alterar as propriedades de imagens e camadas com uma linha de tempo:
No painel Linhas de tempo, siga um dos procedimentos abaixo: quadros inicial e nal so sempre primrios.
Selecione um quadro primrio na barra que controla o objeto a ser alterado. Os Para criar um novo quadro primrio, clique em um quadro no meio da barra de
animao e escolha Modicar > Linha de tempo > Adicionar quadro primrio, ou clique em um quadro da barra de animao enquanto mantm pressionada a tecla Control (no Windows) ou Command (no Macintosh).
2
Dena as novas propriedades do objeto, escolhendo uma das seguintes opes: correspondente pasta, ao lado da caixa Orig, no inspetor de propriedades, para procurar e selecionar uma nova imagem.
Para alterar o arquivo de origem de uma imagem, clique no cone Para alterar a visibilidade de uma camada, escolha default (padro), inherit
(herdar), visible (visvel) ou hidden (oculta), no menu pop-up Vis, no inspetor de propriedades. Ou utilize os cones representando um olho, no painel Camadas. Consulte Como alterar a visibilidade das camadas na pgina 454.
Para alterar o tamanho de uma camada, arraste suas alas de

redimensionamento ou digite novos valores nos campos L (largura) e U (altura), no inspetor de propriedades. Atualmente, as verses 4.0 do Internet Explorer e mais recentes so os nicos navegadores capazes de alterar dinamicamente o tamanho de uma camada.
Para alterar a ordem de empilhamento de uma camada, digite um novo valor

no campo ndice Z, ou utilize o painel Camadas. Consulte Como alterar a ordem de empilhamento de camadas na pgina 453.
3
Mantenha pressionado o boto Executar, para examinar a animao.
A camada selecionada estar sempre visvel e no alto da ordem de empilhamento.
464
Captulo 17
Como utilizar mltiplas linhas de tempo Em vez de tentar controlar todas as aes em uma pgina com uma linha de tempo, mais fcil trabalhar com linhas de tempo individuais que controlam partes distintas da pgina. Por exemplo: a pgina poder incluir elementos interativos que acionam diversas linhas de tempo.
Para gerenciar vrias linhas de tempo, utilize as seguintes opes:
Para criar uma nova linha de tempo, escolha Modicar > Linha de tempo >
Adicionar linha de tempo.
Para remover a linha de tempo selecionada, escolha Modicar > Linha de

tempo > Remover a linha de tempo. Esta opo remover permanentemente todas as animaes desta linha de tempo.
Para renomear a linha de tempo selecionada, escolha Modicar > Linha de

tempo > Renomear a linha de tempo, ou digite um novo nome no menu popup Linha de tempo, no painel Linhas de tempo.
Para exibir uma outra linha de tempo no painel Linhas de tempo, escolha uma
nova linha de tempo no menu pop-up Linha de tempo, no painel Linhas de tempo. Como copiar e colar as animaes Quando a seqncia de animao o satiszer, copie e cole-a em outra rea da linha de tempo, em outra linha de tempo do mesmo documento ou em uma linha de tempo de outro documento. Tambm possvel copiar e colar vrias seqncias simultaneamente.
Para recortar ou copiar e colar seqncias de animao:
Clique em uma barra de animao para selecionar uma seqncia. Para selecionar diversas seqncias, pressione a tecla Shift enquanto clica, ou pressione a teclas Control e A (no Windows), ou Command e A (no Macintosh), para selecionar todas as seqncias. Copie ou recorte a seleo. Siga um dos procedimentos abaixo:
2 3
Mova o cabeote de execuo para um outro ponto da linha de tempo. Selecione uma outra linha de tempo, no menu pop-up Linha de tempo. Abra outro documento ou crie um novo e, em seguida, clique no inspetor de
linhas de tempo.
465
Cole a seleo na linha de tempo. As barras de animao de um mesmo objeto no podem se sobrepor porque uma camada no pode ocupar dois lugares simultaneamente (nem uma imagem pode ter duas origens diferentes ao mesmo tempo). Se a barra de animao a ser colada se sobrepuser a uma outra do mesmo objeto, o Dreamweaver acomodar automaticamente a seleo at o primeiro quadro sem sobreposio.
H dois princpios a serem levados em conta quando forem coladas seqncias de animao em um outro documento:
Se voc copiar uma seqncia de animao de uma camada e o novo

documento j contiver uma camada com o mesmo nome, o Dreamweaver aplicar as propriedades da animao camada existente no novo documento.
Se voc copiar uma seqncia de animao de uma camada e o novo

documento no contiver uma camada com o mesmo nome, o Dreamweaver colar a camada e o seu contedo do documento original, juntamente com a seqncia de animao. Para aplicar a seqncia de animao colada a uma outra camada no novo documento, escolha Alterar o objeto, no menu contextual e, no menu pop-up, selecione o nome da segunda camada. Se desejar, exclua a camada colada. Consulte Como aplicar uma seqncia de animao a um objeto diferente na pgina 466. Como aplicar uma seqncia de animao a um objeto diferente Para economizar tempo, possvel criar uma seqncia de animao e aplic-la a cada uma das camadas restantes do documento.
Para aplicar uma seqncia de animao existente a outros objetos:
1 2
No painel Linhas de tempo, selecione a seqncia de animao e copie-a. Clique em qualquer quadro do painel Linhas de tempo e cole a seqncia no quadro. Clique com o boto direito do mouse (no Windows), ou pressione a tecla Control e clique (no Macintosh) na seqncia de animao colada e escolha Alterar o objeto, no menu contextual. Na caixa de dilogo que aparecer, escolha outro objeto no menu pop-up e clique em OK. Repita as etapas 2 a 4 para quaisquer outros objetos aos quais ser associada a mesma seqncia de animao.
Depois de criada a seqncia de animao, ainda possvel mudar de opinio sobre as camadas que devero ser animadas; basta seguir as etapas 3 e 4, acima, (no necessrio copiar ou colar).
466
Captulo 17
Dicas de animao para as linhas de tempo As seguintes sugestes podem melhorar o desempenho das animaes e facilitar a sua criao:
Mostre e oculte as camadas, em vez de alterar o arquivo de origem nas

animaes que compreendem vrias imagens. A alternncia de arquivos de origem de uma imagem poder tornar a animao mais lenta porque dever ser feito o download da nova imagem. Se for efetuado o download de todas as imagens simultaneamente em camadas ocultas, antes da execuo da animao, no haver pausas perceptveis ou imagens ausentes.
Estenda as barras de animao, para criar um movimento mais suave. Se a

animao e as imagens estiverem saltando entre as posies, arraste o quadro nal da barra de animao da camada para permitir o movimento ao longo de um nmero maior de quadros. O aumento da barra de animao cria mais pontos de dados entre os pontos inicial e nal do movimento e tambm provoca o movimento mais lento do objeto. Tente aumentar o nmero de quadros por segundo (qps) para melhorar a velocidade, porm leve em conta que a maioria dos navegadores executados nos sistemas mais comuns no podem animar muito mais rpido do que 15 qps. Teste a animao em diversos sistemas, com navegadores diferentes, para estabelecer as melhores denies.
No anime mapas de bits grandes. A animao de imagens grandes resulta em

animaes lentas. Em vez disso, crie imagens compostas e mova apenas pequenas partes da imagem. Por exemplo: mostre o movimento de um carro animando apenas as suas rodas.
Crie animaes simples. No crie animaes que exijam mais recursos do que
os navegadores atuais podem oferecer. Os navegadores sempre executam cada quadro de uma animao de linha de tempo, mesmo quando o desempenho do sistema ou da Internet diminuir.
467
Aes de comportamentos para controlar as linhas de tempo de camadas

Anexe as aes de comportamentos listadas abaixo a um link, boto ou outro objeto, a m de controlar as linhas de tempo e as camadas. Para criar efeitos interessantes, coloque os comportamentos que contm estas aes no canal de comportamentos. Por exemplo: faa com que uma linha de tempo interrompa a execuo de si prpria. Para obter mais informaes, consulte Como anexar um comportamento a uma linha de tempo na pgina 476 e Como utilizar os comportamentos na pgina 469.
Arrastar a camada permite ao usurio arrastar uma camada. Utilize esta ao para criar quebra-cabeas, controles deslizantes e outros elementos mveis da interface do usurio. Consulte Arrastar a camada na pgina 486. Mostrar/ocultar as camadas mostra, oculta ou restaura a visibilidade padro de uma ou mais camadas. Esta ao til para mostrar informaes medida que o usurio interagir com a pgina. Consulte Mostrar/ocultar as camadas na pgina 501. Executar a linha de tempo e Parar a linha de tempo permite aos usurios iniciar e parar a linha de tempo clicando em um link ou boto. Estas aes tambm podem iniciar e parar uma linha de tempo automaticamente quando o usurio passar o cursor sobre um link, uma imagem ou outro objeto. Consulte Executar a linha de tempo e Parar a linha de tempo na pgina 505. Ir para o quadro da linha de tempo faz com que a linha de tempo salte para um determinado quadro. A caixa de seleo Loop, no painel Linhas de tempo, adiciona a ao Ir para o quadro da linha de tempo aps o ltimo quadro da animao, retornando-a ao primeiro quadro e iniciando a animao novamente. Consulte Ir para o quadro da linha de tempo na pgina 504. Definir o texto da camada substitui o contedo e a formatao de uma camada em uma pgina pelo contedo especicado. O contedo pode incluir qualquer HTML vlido. Consulte Denir o texto da camada na pgina 498.
468
Captulo 17
18
CAPTULO 18
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como utilizar os comportamentos
Os comportamentos permitem ao visitante interagir com pginas da Web 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 Comportamentos, possvel adicionar um comportamento a uma pgina ao especicar uma ao e, subseqentemente, o evento que a ir disparar. 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 mover o ponteiro sobre um link, o navegador gerar um evento onMouseOver correspondente ao link; em seguida, o navegador vericar se existe algum cdigo JavaScript a ser chamado quando o evento for gerado. Diferentes eventos so denidos para diferentes elementos de pgina. Por exemplo: na maior parte dos navegadores, onMouseOver e onClick so eventos associados a links, enquanto que onLoad um evento associado a imagens e seo body do documento. Uma ao consiste de cdigo previamente escrito em JavaScript, que realiza uma tarefa especca, como a abertura de uma janela do navegador, a exibio ou ocultamento de uma camada, a execuo de um som ou a interrupo de um lme Shockwave. As aes que so fornecidas com o Dreamweaver so cuidadosamente escritas pelos programadores do Dreamweaver, para proporcionar o mximo de compatibilidade entre os diferentes navegadores. Depois de anexar um comportamento a um elemento da pgina, sempre que o evento especicado 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 especicar 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.
469
Um nico evento pode disparar diversas aes e possvel especicar a ordem na qual estas aes ocorrero. O Macromedia Dreamweaver proporciona cerca de 24 aes de comportamentos. possvel ter acesso a outras aes no site de intercmbio da Macromedia na Web, assim como nos sites de outros programadores. Consulte Como fazer o download de e instalar os comportamentos de outros fabricantes na pgina 478. Se souber utilizar os recursos JavaScript, voc poder gravar as suas prprias aes relacionadas a comportamentos. Para obter mais informaes sobre a gravao de aes de comportamentos, consulte Extenso dos recursos do Dreamweaver.
Nota: Os termos comportamento e ao se relacionam ao Dreamweaver, e no ao HTML. Do ponto de vista do navegador, uma ao se assemelha a qualquer outro tipo de cdigo JavaScript.
O painel Comportamentos
Utilize o painel Comportamentos para anexar comportamentos a elementos de pgina (mais especicamente, aos tags) e para modicar os parmetros de comportamentos anexados anteriormente. Para abrir o painel Comportamentos, escolha Janela > Comportamentos. O tag que estiver selecionado na janela do documento aparecer na barra de ttulo do painel Comportamentos. 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, estas aparecero na ordem na qual sero executadas. Se no houver qualquer comportamento na lista de comportamentos, o elemento selecionado no apresenta qualquer comportamento a ele anexado. Para obter informaes detalhadas sobre as opes do painel Comportamentos, consulte a Ajuda do Dreamweaver.
Sobre os eventos
A lista a seguir descreve os eventos que podem ser associados s aes listadas no menu pop-up Aes (+) do painel Comportamentos. 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 denio de atualizao automtica de uma pgina a cada 10 segundos. O Dreamweaver possui muitas aes comuns que podem ser disparadas atravs da utilizao destes eventos.
470
Captulo 18
A lista tambm especica o navegador que pode gerar cada evento. NS3 corresponde ao Netscape Navigator 3.0; NS4 corresponde ao Netscape Navigator 4.0; IE3 corresponde ao Internet Explorer 3.0; IE4 corresponde ao Internet Explorer 4.0. Para obter mais informaes sobre os eventos no Internet Explorer, consulte a pgina de eventos de HTML dinmico da Microsoft (disponvel em Recursos de tecnologias da Web e HTML na pgina 25). Observe que a maior parte dos eventos s poder ser utilizada com certos elementos de pgina. Para determinar os eventos correspondentes a um determinado elemento de pgina que recebem o suporte de um determinado navegador, insira o elemento de pgina no documento e anexe um comportamento a ele. Em seguida, consulte o menu pop-up Eventos, no painel Comportamentos. Para obter uma consulta bem detalhada dos tags que podero ser utilizados em associao a um evento e navegador determinados, procure o evento em um dos arquivos da pasta Dreamweaver/Conguration/Behaviors/ Events.
onAbort (NS3,
NS4, IE4, IE5) gerado quando o visitante interromper a transferncia de uma imagem no navegador (por exemplo: quando clicar no boto Parar do navegador enquanto a imagem estiver sendo transferida). IE5) gerado quando um elemento de dados ligados na pgina tiver terminado a atualizao da origem dos dados.
onAfterUpdate (IE4,
onBeforeUpdate (IE4,
IE5) gerado quando um elemento de dados ligados na pgina tiver sido alterado e prestes a perder o foco (e, portanto, prestes a atualizar a origem dos dados).
onBlur (NS3,
NS4, IE3, IE4, IE5) o oposto de onFocus. O evento onBlur gerado quando o elemento especicado deixar de ser o foco da interao com o visitante. Por exemplo: quando um visitante clicar fora de um campo de texto depois de ter clicado nele, o navegador gerar um evento onBlur para o campo de texto.
onBounce (IE4,
IE5) gerado quando o contedo de um elemento do letreiro tiver alcanado os limites deste.
onChange (NS3,
NS4, IE3, IE4, IE5) gerado quando o visitante alterar um valor na pgina, como na escolha de um item de um menu, ou quando alterar o valor de um campo de texto e, em seguida, clicar em outro local da pgina.
onClick (NS3, NS4, IE3, IE4, IE5) gerado quando o visitante clicar no elemento
especicado, como um link, boto ou mapa de imagens. O clique no ser efetuado at que o visitante solte o boto do mouse; utilize o evento onMouseDown para provocar uma ao assim que o boto for pressionado.
onDblClick (NS4,
IE4, IE5) gerado quando o visitante clicar duas vezes no elemento especicado. Clicar duas vezes denido como a ao de pressionar rapidamente e soltar o boto do mouse enquanto se indica um elemento.
onError (NS3,
NS4, IE4, IE5) gerado quando ocorrer um erro do navegador enquanto uma pgina ou imagem estiver sendo transferida.
471
onFinish (IE4,
IE5) gerado quando o contedo de um elemento do letreiro tiver concludo um loop.

onFocus (NS3,
NS4, IE3, IE4, IE5) gerado quando o elemento especicado se tornar o foco da interao com o visitante. Por exemplo: a ao de clicar em um campo de texto de um formulrio gera um evento onFocus.
onHelp (IE4, IE5) gerado quando o visitante clicar no boto Ajuda do navegador
ou escolher Ajuda, no menu do navegador.

onKeyDown (NS4,
IE4, IE5) gerado assim que o visitante pressionar qualquer tecla. No necessrio que o visitante solte a tecla para que este evento seja gerado. O navegador no poder detectar a tecla que foi pressionada.
onKeyPress (NS4,
IE4, IE5) gerado assim que o visitante pressionar e soltar qualquer tecla; este evento equivale combinao dos eventos onKeyDown e onKeyUp. O navegador no poder detectar a tecla que foi pressionada.
onKeyUp (NS4, onLoad (NS3,
IE4, IE5) gerado assim que o visitante soltar uma tecla aps tla pressionado. O navegador no poder detectar a tecla que foi pressionada. NS4, IE3, IE4, IE5) gerado quando uma imagem ou pgina tiver terminado de ser transferida.
onMouseDown (NS4, IE4, IE5) gerado quando o visitante pressionar o boto do
mouse. No necessrio que o visitante solte o boto do mouse para que este evento seja gerado.
onMouseMove (IE3,
IE4, IE5) gerado quando o visitante mover o mouse enquanto indica o elemento especicado. Ou seja, o ponteiro permanece dentro dos limites do elemento.
onMouseOut (NS3,
NS4, IE4, IE5) gerado quando o ponteiro se afastar do elemento especicado. Em geral, o elemento especicado uma imagem ou um link anexado a uma imagem. Em geral, este evento utilizado com o comportamento Restaurar a imagem permutada, para retornar uma imagem ao seu estado original quando o visitante deixar de indic-la.
onMouseOver (NS3,
NS4, IE3, IE4, IE5) gerado quando o mouse for inicialmente movido para indicar o elemento especicado (ou seja, quando o ponteiro passar a indicar o elemento). Em geral, o elemento especicado para este evento um link.
onMouseUp (NS4, onMove (NS4)
IE4, IE5) gerado quando o boto do mouse for solto.
gerado quando uma janela ou moldura for movida.
onReadyStateChange (IE4,
IE5) gerado quando o estado do elemento especicado for alterado. Os estados do elemento podem ser no inicializado, carregando e concludo.
onReset (NS3,
NS4, IE3, IE4, IE5) gerado quando um formulrio for redenido aos seus valores padro.
472
Captulo 18
onResize (NS4,
IE4, IE5) gerado quando o visitante redimensionar a janela do navegador ou uma moldura.
onRowEnter (IE4,
IE5) gerado quando o ponteiro de registro da origem dos dados ligados tiver sido alterado.
onRowExit (IE4, IE5) gerado quando o ponteiro de registro da origem dos dados
ligados estiver prestes a ser alterado.

onScroll (IE4,
IE5) gerado quando o visitante rolar para cima ou para baixo na
pgina.
onSelect (NS3,
NS4, IE3, IE4, IE5) gerado quando o visitante selecionar texto em um campo de texto.
onStart (IE4, IE5) gerado quando o contedo de um elemento do letreiro iniciar
um loop.
onSubmit (NS3,
NS4, IE3, IE4, IE5) gerado quando o visitante enviar um NS4, IE3, IE4, IE5) gerado quando o visitante deixar a pgina.
formulrio.
onUnload (NS3,
Como anexar um comportamento

possvel anexar comportamentos ao documento inteiro (ou seja, ao 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 Netscape Navigator 4.0 ou qualquer navegador da verso 3.0.
Nota: No possvel anexar um comportamento a texto simples. Para obter mais detalhes, consulte Sobre os comportamentos e texto na pgina 475.
possvel especicar mais de uma ao por evento. As aes ocorrem na ordem em que aparecem na lista da coluna Aes do painel Comportamentos. Para obter mais informaes sobre como alterar a ordem das aes, consulte Como alterar um comportamento na pgina 476.
Para anexar um comportamento:
Selecione um elemento na pgina, como uma imagem ou link, por exemplo. Para anexar um comportamento pgina inteira, clique no tag <body>, no seletor de tags situado no canto inferior esquerdo da janela do documento.
Escolha Janela > Comportamentos, para abrir o painel Comportamentos. O tag HTML do objeto selecionado aparecer na barra de ttulo do painel Comportamentos.
473
Clique no boto com o sinal de adio (+) e escolha uma ao no menu pop-up 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 Executar a linha de tempo estar esmaecida se o documento no possuir linhas de tempo, enquanto que a ao Controlar o Shockwave ou Flash estar esmaecida se o documento no contiver lmes Shockwave ou Flash. Se no houver qualquer evento disponvel para o objeto selecionado, todas as aes estaro esmaecidas. A escolha de uma ao acarretar o aparecimento de uma caixa de dilogo, que exibir os parmetros e instrues correspondentes ao.
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 Como utilizar as aes de comportamentos enviadas com o Dreamweaver na pgina 478.
O evento padro que desencadeia a ao aparecer na coluna Eventos. Se este no for o evento de desencadeamento desejado, escolha outro evento no menu pop-up Eventos. Para abrir o menu pop-up Eventos, selecione um evento ou ao no painel Comportamentos e clique na seta preta para baixo que aparecer entre o nome do evento e o da ao. Os eventos que aparecero no menu pop-up Eventos dependero do objeto selecionado e dos navegadores especicados no submenu Mostrar os eventos de. possvel que alguns eventos estejam 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, certique-se de que o objeto correto esteja selecionado ou altere os navegadores de destino no menu pop-up Mostrar os eventos de. Se voc estiver anexando um comportamento a uma imagem, alguns eventos (como onMouseOver) aparecero entre parnteses. Estes eventos estaro disponveis apenas para os links. Se voc escolher um deles, o Dreamweaver colocar um tag a em volta da imagem, a m de denir um link nulo. Na caixa Link do inspetor de propriedades, 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.
474
Captulo 18
Sobre os comportamentos e texto

No possvel anexar um comportamento a texto simples. Os tags p e span no geram eventos nos navegadores, portanto no possvel desencadear uma ao a partir destes 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 se voc executar este procedimento, o texto aparecer como um link. possvel alterar a cor do texto e remover o seu sublinhado se preferir que ele no se assemelhe a um link, porm possvel que o visitante ao site no perceba que h uma razo para clicar no texto.
Para anexar um comportamento ao texto selecionado:
No inspetor de propriedades, digite javascript:; no campo Link. Assegure-se de ter includo os sinais de dois pontos e ponto-e-vrgula.
Nota: Ao invs destes, possvel utilizar o sinal # no campo Link, se preferir. O problema em utilizar o sinal # que quando um visitante clicar no link, o navegador saltar at o alto da pgina correspondente. O ato de clicar no link nulo de JavaScript no provocar qualquer efeito sobre a pgina, sendo, portanto, geralmente prefervel.
Mantendo o texto selecionado, abra o painel Comportamentos (Janela > Comportamentos). No menu pop-up Aes, escolha uma ao, digite os parmetros a ela correspondentes e escolha um evento para dispar-la. Para obter mais detalhes, consulte Como anexar um comportamento na pgina 473.
Para alterar a aparncia de texto com links:
Abra o inspetor de cdigo (Janela > Inspetor de cdigo) ou a visualizao de cdigo da janela do documento. Localize o link. No tag a href do link, insira o seguinte atributo: style="text-decoration:none; color:black". Esta denio de atributo desativa o sublinhado e torna preta a cor do texto. Obviamente, se o texto circundante tiver outra cor, utilize-a em vez da cor preta. 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 mais detalhes, consulte Como inserir e formatar texto na pgina 251.
2 3
475
Como anexar um comportamento a uma linha de tempo

Para disparar um comportamento em um determinado quadro de uma linha de tempo (em vez de esperar que a interao com o visitante o dispare), coloque o comportamento na linha de tempo. Para obter informaes sobre a criao de linhas de tempo, consulte Como animar as camadas na pgina 458. Por exemplo: possvel iniciar a reproduo de um som no quadro 15 de uma linha de tempo. Apenas um tipo de evento pode desencadear uma ao em uma linha de tempo: a animao que atinge um determinado quadro (um evento onFrame7, por exemplo). Alm dos objetos de uma linha de tempo, o comportamento pode afetar qualquer objeto na pgina. Visualize a linha de tempo em um navegador, para examinar o funcionamento do comportamento. No possvel visualizar os comportamentos no Dreamweaver.
Para colocar um comportamento em uma linha de tempo:
Clique em um quadro do canal de comportamentos, no painel Linhas de tempo. Utilize o painel Comportamentos para escolher uma ao a ser executada no quadro. A ao aparecer no painel Comportamentos, e um evento indicar o nmero do quadro no qual ela ser disparada. Aparecer um sinal de subtrao () no canal de comportamentos do quadro da linha de tempo.
Como alterar um comportamento

Depois de anexar um comportamento, voc poder alterar o evento que dispara a ao, adicionar ou remover aes e alterar os parmetros relativos s aes.
Para alterar um comportamento:
1 2
Selecione um objeto que possua um comportamento a ele anexado. Escolha Janela > Comportamentos, para abrir o painel Comportamentos. Os comportamentos aparecero no painel, em ordem alfabtica, segundo o evento. Se houver diversas aes para o mesmo evento, estas aparecero na ordem na qual sero executadas.
476
Captulo 18
Escolha dentre as seguintes opes: comportamento ou selecione-o e pressione a tecla Enter (no Windows), ou Return (no Macintosh). Em seguida, altere os parmetros na caixa de dilogo e clique em OK.
Para editar os parmetros de uma ao, clique duas vezes no nome do
Para alterar a ordem das aes de um determinado evento, selecione uma ao e

clique no boto de seta acima ou abaixo.
Para excluir um comportamento, selecione-o e clique no boto com o sinal de

subtrao (), ou pressione a tecla Delete.
Como atualizar um comportamento

Se as suas pginas contiverem comportamentos que tiverem sido criados com as verses 1 ou 2 do Dreamweaver, esses comportamentos no sero atualizados automaticamente quando as pginas forem abertas na verso atual do Dreamweaver. Entretanto, quando voc atualizar uma ocorrncia de um comportamento em uma pgina (adotando o procedimento exposto abaixo), todas as outras ocorrncias do comportamento na pgina tambm sero atualizadas. Os comportamentos que tiverem sido criados com a verso 3 do Dreamweaver funcionaro sem alteraes na verso 4 deste software.
Para atualizar um comportamento em uma pgina:
1 2 3 4
Selecione um elemento ao qual tiver sido anexado o comportamento. Abra o painel Comportamentos. Clique duas vezes no comportamento. Clique em OK na caixa de dilogo do comportamento.
Todas as ocorrncias desse comportamento na pgina sero atualizadas.
Como criar novas aes

As aes consistem de cdigo JavaScript e HTML. Se estiver bastante familiarizado com JavaScript, voc poder escrever novas aes e adicion-las ao menu pop-up Aes, no painel Comportamentos. Para obter mais informaes, consulte Extenso dos recursos do Dreamweaver.
477
Como fazer o download de 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 destes usurios optaram por compartilhar suas extenses com outros usurios ao envi-las ao site de intercmbio do Macromedia Dreamweaver na Web.
Para efetuar o download e instalar novos comportamentos do site de intercmbio:
Abra o painel Comportamentos e, no menu pop-up Aes (+), escolha Obter mais comportamentos. O navegador primrio ser aberto e o site de intercmbio aparecer. necessrio 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 mais detalhes, consulte Como adicionar extenses ao Dreamweaver na pgina 98.
Como utilizar as aes de comportamentos enviadas com o Dreamweaver

As aes de comportamento includas com o Dreamweaver foram criadas para que funcionem com todas as verses do Netscape Navigator 4, e nas verses 4.0 e mais avanadas do Internet Explorer. O Netscape Navigator 5 nunca foi lanado externamente e o Netscape Navigator 6 ainda no havia sido lanado quando este manual foi escrito.
Nota: As aes do Dreamweaver foram escritas para que possam ser executadas no maior nmero possvel de navegadores. Se voc remover manualmente o cdigo de uma ao do Dreamweaver ou substitui-lo 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.
478
Captulo 18
Consulte a tabela abaixo para obter detalhes sobre como funcionam as aes em determinadas verses anteriores 4.0 do Netscape Navigator e do Internet Explorer. Para obter uma explicao sobre como cada ao funciona e como escolher as opes associadas a ela, consulte os tpicos listados aps a tabela .
No Macintosh Ao Netscape Navigator 3.0 OK OK OK Internet Explorer 3.0x Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros No Windows Netscape Navigator 3.0 OK OK OK OK OK Internet Explorer 3.01 OK OK OK OK Falha sem provocar erros Falha sem provocar erros OK Falha sem provocar erros Falha sem provocar erros OK Falha sem provocar erros OK Falha sem provocar erros Falha sem provocar erros OK Falha sem provocar erros
Chamar o JavaScript Alterar a propriedade Verificar o navegador
Verificar o plug-in OK Controlar o Shockwave ou Flash Arrastar a camada Ir para a URL Menu de salto Opo Ir do menu de salto Abrir a janela do navegador Executar o som OK
Falha sem provocar erros OK OK OK OK OK
Falha sem provocar erros OK OK OK OK OK OK OK OK
Mensagem pop- OK up Pr-carregar as imagens OK
Definir a imagem OK da barra de navegao Definir o texto da OK moldura Definir o texto da Falha sem camada provocar erros
OK Falha sem provocar erros
479
No Macintosh Ao Netscape Navigator 3.0 OK Internet Explorer 3.0x Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros
No Windows Netscape Navigator 3.0 OK Internet Explorer 3.01 OK
Definir a mensagem de status
Definir o texto do OK campo de texto Mostrar/ocultar as camadas Permutar a imagem Restaurar a imagem permutada Falha sem provocar erros OK OK
OK Falha sem provocar erros OK OK
OK Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros
Ir para o quadro A animao da Falha sem da linha de tempo origem da provocar erros imagem e a chamada do Executar a linha comportamento de tempo e Parar funcionam, a linha de tempo porm a animao da camada falha sem provocar erros. Validar o formulrio OK Falha sem provocar erros
A animao da Falha sem origem da provocar erros imagem e a chamada do comportamento funcionam, porm a animao da camada falha sem provocar erros. OK OK
Chamar o JavaScript A ao Chamar o JavaScript permite utilizar o painel Comportamentos para especicar a execuo de uma funo ou linha de cdigo personalizada de JavaScript quando ocorrer um evento. possvel escrever o JavaScript ou utilizar o cdigo disponvel gratuitamente em diversas bibliotecas de JavaScript na Web.
Para poder utilizar a ao Chamar o JavaScript:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Chamar o JavaScript, no menu pop-up Aes. Digite o JavaScript a ser executado ou o nome de uma funo. Por exemplo: para criar um boto Voltar, digite if (history.length > 0){history.back()}. Se tiver encapsulado o cdigo em uma funo, digite apenas o nome da funo (goBack() , por exemplo).
480
Captulo 18
4 5
Clique em OK. Verique 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 popup Mostrar os eventos de.
Alterar a propriedade Utilize a ao Alterar a propriedade, 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 afetadas so determinadas pelo navegador; um nmero maior de propriedades poder ser alterado por este comportamento no Microsoft Internet Explorer (IE) 4.0 do que no IE 3.0 ou nas verses 3.0 e 4.0 do Netscape Navigator. Por exemplo: possvel denir dinamicamente a cor de fundo de uma camada .
Nota: Utilize esta ao apenas se j estiver muito familiarizado com HTML e JavaScript. Para poder utilizar a ao Alterar a propriedade:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Alterar a propriedade, no menu pop-up Aes. No menu pop-up Tipo de objeto, escolha o tipo de objeto cuja propriedade deseja alterar. O menu pop-up Objeto com nome passar a listar todos os objetos com nome do tipo selecionado.
4 5
Escolha um objeto no menu pop-up Objeto com nome. Escolha uma propriedade no menu pop-up Propriedade, ou digite o nome da propriedade no campo de texto. Para poder examinar as propriedades que podem ser alteradas em cada navegador, escolha navegadores diferentes ou verses de navegadores diferentes, no menu pop-up de navegadores. Se estiver digitando o nome de uma propriedade, certique-se de utilizar o nome correto da propriedade JavaScript (e lembre-se de que as propriedades JavaScript so sensveis a maisculas/ minsculas).
Digite o novo valor da propriedade, no campo Novo valor, e clique em OK.
481
Verique 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 popup Mostrar os eventos de.
Verificar o navegador Utilize a ao Vericar o navegador, 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 por mant-los na mesma pgina, caso estiverem utilizando qualquer outro navegador. til anexar este comportamento ao 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. Uma outra opo seria anexar este comportamento a um link nulo (<um href="javascript:;">, por exemplo), de forma que a ao determinasse o destino do link, com base na marca e verso do navegador do visitante.
Para poder utilizar a ao Verificar o navegador:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Vericar o navegador, no menu pop-up Aes. Determine como gostaria de separar os visitantes: por marca de navegador, por verso de navegador ou por ambos. Por exemplo: voc prefere que todos os visitantes com um navegador da verso 4.0 vejam uma pgina, enquanto os visitantes com outras verses vejam uma pgina diferente? Ou, talvez, que os usurios do Netscape Navigator visualizem uma pgina e os usurios do Microsoft Internet Explorer (IE) visualizem uma pgina diferente?
4 5
Especique 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 especicada e como proceder no caso contrrio. As opes so Ir para a URL, Ir para a URL Alt. e Continuar nesta pgina. Especique uma verso do Microsoft Internet Explorer.
482
Captulo 18
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 especicada e como proceder no caso contrrio. As opes so Ir para a URL, Ir para a URL Alt. e Continuar nesta pgina. No menu pop-up Outros navegadores, escolha uma opo, para especicar as aes a serem tomadas se o navegador no for o Netscape Navigator ou o Microsoft 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 e, se no puderem ler este comportamento, eles permanecero na pgina de qualquer maneira.
Digite os caminhos e nomes de arquivos da URL e da URL alternativa nos campos de texto situados na parte inferior da caixa de dilogo. Se digitar uma URL remota, digite tambm o prexo http://, alm do endereo www. Clique em OK. Verique 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 popup Mostrar os eventos de. Lembre-se de que o objetivo deste comportamento o de vericar as diversas verses de navegadores, portanto recomendvel escolher um evento que funcione tanto na verso 3.0 quanto nas posteriores dos navegadores.
10 11
Verificar o plug-in Utilize a ao Vericar o plug-in, 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.
Nota: No possvel detectar determinados plug-ins no Microsoft Internet Explorer (IE) utilizando o JavaScript. Contudo, a seleo de Flash ou Director adicionar o cdigo VBScript apropriado pgina, a fim de detectar os plug-ins no IE do Windows. A deteco de plug-ins no possvel no IE que estiver sendo executado no Macintosh. Para poder utilizar a ao Verificar o plug-in:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Vericar o plug-in, no menu pop-up Aes.
483
No menu pop-up Plug-in, escolha um plug-in, ou clique na tecla Enter e digite o nome exato do plug-in no campo adjacente. Utilize o nome exato do plug-in, conforme o especicado em negrito na pgina Sobre os plug-ins, no Netscape Navigator. No Windows, escolha Ajuda do Navigator > comando Sobre os plug-ins; no Macintosh, escolha Sobre os plugins, no menu Apple.
No campo Se for localizado, ir para a URL, especique uma URL para os visitantes que contam com o plug-in. Se especicar uma URL remota, digite tambm o prexo http:// no endereo. Para garantir que os visitantes com o plug-in permanecero na mesma pgina, deixe este campo em branco.
No campo Caso contrrio, ir para a URL, especique uma URL alternativa para os visitantes que no contam com o plug-in. Para garantir que os visitantes sem o plug-in permanecero na mesma pgina, deixe este campo em branco.
A deteco de plug-ins no possvel no Internet Explorer que estiver sendo executado no Macintosh, e a maioria dos plug-ins no pode ser detectada no Internet Explorer que estiver sendo executado no Windows. Como padro, quando a deteco for impossvel, o visitante ser enviado para a URL listada no campo Caso contrrio. Para, em vez disso, enviar o visitante para a primeira URL (Se for localizado), selecione a opo Ir sempre para a primeira URL se a deteco no for possvel. Quando esta opo estiver selecionada, ela implicar em 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, selecione a opo Ir sempre para a primeira URL se a deteco no for possvel; os visitantes que no dispuserem do plug-in recebero uma noticao do navegador para que efetuem o download do plug-in. Se o contedo do plug-in no for uma parte essencial da pgina, no selecione essa opo. Esta opo se aplica apenas ao Internet Explorer; o Netscape Navigator sempre capaz de detectar os plug-ins.
7 8
484
Captulo 18
Controlar o Shockwave ou Flash Utilize a ao Controlar o Shockwave ou Flash para executar, parar, rebobinar ou ir para um quadro de um lme Shockwave ou Flash.
Para poder utilizar a ao Controlar o Shockwave ou Flash:
Escolha Inserir > Mdia > Shockwave, ou Inserir > Mdia > Flash, para inserir um lme Shockwave ou Flash, respectivamente. Escolha Janela > Propriedades, e digite o nome de um lme, no campo de texto no alto mais esquerda (ao lado do cone de Shockwave ou Flash). necessrio dar um nome ao lme, para poder control-lo com a ao Controlar o Shockwave ou Flash. Selecione os itens a serem utilizados no controle do lme Shockwave ou Flash. Por exemplo: se houver uma imagem de um boto Executar a ser utilizada na reproduo do lme, selecione-a. Abra o painel Comportamentos (Janela > Comportamentos). Clique no boto com o sinal de adio (+) e escolha Controlar o Shockwave ou Flash, no menu pop-up Aes. Aparecer uma caixa de dilogo com os parmetros. No menu pop-up Filme, escolha um lme. O Dreamweaver automaticamente listar os nomes de todos os lmes Shockwave e Flash do documento. Mais especicamente, o Dreamweaver apresentar uma lista com os lmes cujos nomes de arquivos terminem com .dcr, .dir, .swf ou .spl e que estiverem em tags object ou embed.
4 5
Escolha uma das aes para executar, parar, rebobinar ou ir para um quadro do lme. A opo Executar executa o lme a partir do quadro no qual ocorre a ao. Clique em OK. Verique 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 Mostrar os eventos de, no menu pop-up Eventos.
8 9
485
Arrastar a camada A ao Arrastar a camada permite ao visitante arrastar uma camada. Utilize esta ao para criar quebra-cabeas, controles deslizantes e outros elementos mveis de interface. possvel especicar, 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 Arrastar a camada deve ser chamada antes que a camada possa ser arrastada pelo visitante, certique-se de que o evento que disparar a ao ocorrer antes que o visitante tente arrastar a camada. melhor anexar a ao Arrastar a camada 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 Arrastar a camada:
Escolha Inserir > Camada, ou clique no boto Camada, no painel Objetos, e desenhe uma camada na visualizao do projeto da janela do documento. Selecione o tag body, clicando em <body>, no seletor de tags, situado na parte inferior da janela do documento. Abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Arrastar a camada, no menu pop-up Aes. Se a opo Arrastar a camada 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 o tag body ou um link (um tag) ou, no menu pop-up Mostrar os eventos de, altere o navegador de destino para IE 4.0.
3 4
5 6
No menu pop-up Camada, selecione a camada que deseja tornar arrastvel. No menu pop-up Movimento, escolha Restrito ou No restrito. O movimento no restrito adequado aos quebra-cabeas e outros jogos que envolvem o arraste e soltura de elementos. No caso dos controles deslizantes e cenrios mveis, como gavetas de arquivos, cortinas e mini-persianas, opte pelo movimento restrito.
486
Captulo 18
Digite os valores do movimento restrito (expressos em pixels) nos campos Acima, Abaixo, esquerda e direita. Os valores se relacionam posio inicial da camada. Para restringir o movimento a uma regio retangular, digite valores positivos nos quatro campos. Para permitir apenas o movimento vertical, digite valores positivos em Acima e Abaixo, e zero em esquerda e direita. Para permitir apenas o movimento horizontal, digite valores positivos em esquerda e direita, e zero em Acima e Abaixo.
Digite os valores do destino de soltura (em pixels) nos campos esquerda e Acima. O destino de soltura o ponto at o qual voc deseja que o visitante arraste a camada. A camada ter alcanado o destino de soltura quando as suas coordenadas esquerda e do alto coincidirem com os valores digitados nos campos esquerda e Acima. Os valores se relacionam ao canto superior esquerdo da janela do navegador. Clique em Obter a posio atual, para preencher automaticamente os campos com a posio da camada.
Digite um valor (em pixels) no campo Encaixar, se distante, a m de determinar a distncia mnima do destino de soltura da qual o visitante dever se aproximar para a camada se encaixar no destino. Quanto maior o valor, mais fcil ser para o visitante detectar o destino de soltura.
10
No caso de quebra-cabeas simples e manipulaes de cenrios, no h necessidade de ultrapassar este ponto. Para denir a ala de arraste da camada, controlar o movimento da camada enquanto estiver sendo arrastada e disparar uma ao quando a camada for solta, clique na guia Avanado. Para especicar se o visitante dever clicar em uma determinada rea da camada para que esta seja arrastada, escolha rea dentro da camada, no menu pop-up 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.
11
487
12
Escolha qualquer opo Enquanto arrasta que desejar utilizar: para a frente da ordem de empilhamento enquanto for arrastada. Se selecionar esta opo, utilize o menu pop-up para optar por deixar a camada na frente ou restaur-la sua posio original na ordem de empilhamento.
Selecione Trazer a camada para frente, se preferir que a camada seja transferida
Digite um cdigo JavaScript ou um nome de funo (monitorLayer(), por

exemplo) no campo Chamar o JavaScript, a m de executar repetidamente o cdigo ou funo enquanto a camada for arrastada. Por exemplo: possvel gravar uma funo que monitore as coordenadas da camada e exiba indicaes como voc est prximo ou muito distante do destino de soltura em um campo de texto.
13
Digite um cdigo JavaScript ou um nome de funo (evaluateLayerPos(), por exemplo) no segundo campo Chamar o JavaScript, a m de executar o cdigo ou funo quando a camada for solta. Selecione Apenas se estiver encaixada, nos casos em que o JavaScript for executado apenas se a camada tiver alcanado o destino de soltura. Clique em OK. Verique 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 popup Mostrar os eventos de. Lembre-se de que as camadas no contam com o suporte dos navegadores da verso 3.0.
14 15
Nota: No possvel anexar a ao Arrastar a camada a um objeto associado aos eventos onMouseDown ou onClick.
Como reunir informaes sobre a camada arrastvel Quando voc anexar a ao 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 denir trs propriedades de cada camada arrastvel MM_LEFTRIGHT, MM_UPDOWN e MM_SNAPPED que voc poder utilizar nas suas prprias funes JavaScript, a m de determinar as posies relativas horizontal e vertical da camada e se a camada atingiu o destino de soltura.
Nota: As informaes fornecidas aqui se destinam ao uso apenas de programadores de JavaScript que j contem com experincia.
488
Captulo 18
Por exemplo: a funo a seguir exibe o valor da propriedade MM_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 Microsoft Internet Explorer.
funo getPos(layername){ var layerRef = MM_findObj(layername); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; }
Em vez de exibir o valor de MM_UPDOWN ou MM_LEFTRIGHT em um campo de formulrio, grave uma funo que exiba uma mensagem no campo de formulrio, dependendo de quo prximo o valor estiver da zona de soltura, ou chame outra funo que mostre ou oculte uma camada, dependendo do valor. Os limites de sua imaginao e a sua habilidade de lidar com os recursos JavaScript ditaro como voc reagir aos valores de MM_UPDOWN ou MM_LEFTRIGHT. especialmente til 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 Arrastar a camada 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 redenida como false se o ponteiro do mouse for passado sobre a prpria. Isto poder ocorrer quando tiver utilizado Arrastar a camada 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: se desejar denir diversos destinos de soltura para uma nica camada).
Para evitar o novo registro de camadas j encaixadas:
Faa uma cpia de segurana do documento antes de alterar o cdigo. possvel faz-lo na janela do site do Dreamweaver, no Windows Explorer (no Windows) ou no Localizador (no Macintosh).) Escolha Editar > Localizar. No menu pop-up Localizar, escolha Origem de HTML. Digite (!curDrag) no campo de texto adjacente.
2 3 4
489
Clique em Localizar o prximo. Se o Dreamweaver indagar se voc deseja continuar a procurar desde o incio do documento, clique em Sim. O Dreamweaver se deparar com a seguinte instruo:
if (!curDrag) return false;
Feche a caixa de dilogo Localizar e modique a instruo na visualizao de cdigo da janela do documento ou no inspetor de cdigo, para que corresponda a:
if (!curDrag || curDrag.MM_SNAPPED != null) return false;
Os dois pipes (||) signicam "ou", enquanto que curDrag uma varivel que representa a camada que est sendo registrada como arrastvel. O signicado 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. Ir para a URL A ao Ir para a URL abre uma nova pgina na janela ou na moldura especicada. Esta ao particularmente til para alterar o contedo de duas ou mais molduras com um clique. Ela tambm pode ser chamada em uma linha de tempo, para que salte at uma nova pgina depois de um determinado intervalo de tempo.
Para poder utilizar a ao Ir para a URL:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Ir para a URL, no menu pop-up Aes. Na lista de seleo Abrir em, escolha um destino para a URL. A lista Abrir em automaticamente listar os nomes de todas as molduras no conjunto de molduras, assim como na janela principal. Se no houver molduras, a janela principal ser a nica opo.
Nota: Esta ao poder provocar resultados inesperados se houver qualquer moldura com os nomes top, blank, self ou parent. Algumas vezes, os navegadores confundem estes nomes com os dos destinos reservados.
Clique em Procurar, para selecionar um documento a ser aberto, ou digite o caminho e nome do documento no campo URL. Repita as etapas 3 e 4, para abrir outros documentos em outras molduras. Clique em OK. Verique se o evento padro corresponde ao desejado.
5 6 7
490
Captulo 18
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 Mostrar os eventos de. Menu de salto Quando for criado um menu de salto utilizando Inserir > Objetos de formulrio > Menu de salto, o Dreamweaver criar um objeto de menu e lhe anexar o comportamento Menu de salto (ou Ir do menu de salto). Em geral, no necessrio anexar manualmente a ao Menu de salto a um objeto. Para obter mais informaes sobre os menus de salto e a sua criao, consulte Como inserir um menu de salto na pgina 402. 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 Menu de salto, no painel Comportamentos.
possvel editar os itens do menu da mesma maneira que faria em qualquer

outro menu, ao selecion-lo e utilizar o boto Listar os valores, no inspetor de propriedades. Consulte Como criar um menu pop-up na pgina 533, para obter mais detalhes.
Para editar um menu de salto utilizando o painel 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 Comportamentos. Na coluna Aes, clique duas vezes em Menu de salto. Faa as alteraes desejadas na caixa de dilogo Menu de salto e, em seguida, clique em OK.
Ao Ir do menu de salto A ao Ir do menu de salto est intimamente associada ao Menu de salto; Ir do menu de salto permite associar um boto 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 Ir abrir o link que estiver selecionado no menu de salto. Normalmente, os menus de salto no exigem a ocorrncia de um boto Ir; 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 estiver escolhido no menu de salto, este no ocorrer. Em geral, isto no far diferena, porm, se o menu de salto aparecer em uma moldura e os itens deste menu se vincularem a pginas em outras molduras, o boto Ir poder ser til, permitindo aos visitantes escolher novamente um item que j tenha sido selecionado no menu de salto.
491
Para adicionar uma ao Ir do menu de salto:
Selecione um objeto a ser utilizado como boto Ir (geralmente uma imagem de boto) e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Ir do menu de salto, no menu pop-up Aes. No menu pop-up Escolher o menu de salto, selecione um menu a ser ativado pelo boto Ir. Clique em OK.
Abrir a janela do navegador Utilize a ao Abrir a janela do navegador, para abrir uma URL em uma nova janela. possvel especicar as propriedades da nova janela, inclusive o seu tamanho, nome e atributos (se ela ser redimensionvel, possuir uma barra de menus e assim por diante). Por exemplo: possvel utilizar este comportamento para abrir uma imagem maior em outra janela quando o visitante clicar em uma imagem em miniatura; com este comportamento, possvel adequar o tamanho da nova janela ao da imagem. Se voc no especicar qualquer atributo da janela, ela ser aberta no tamanho e com os atributos da janela que a tiver iniciado. A especicao de qualquer atributo da janela automaticamente desativar todos os outros atributos que no estiverem explicitamente ativos. Por exemplo: se voc no denir qualquer atributo para a janela, ela poder ser aberta com 640 por 480 pixels e possuir uma barra de navegao, barra de ferramentas de localizao, barra de status e barra de menus. Se voc denir a largura explicitamente como sendo 640 e a altura como sendo 480 pixels e no denir 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 poder utilizar a ao Abrir a janela do navegador:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Abrir a janela do navegador, no menu pop-up Aes. Clique em Procurar, para selecionar um arquivo ou digite a URL a ser exibida.
492
Captulo 18
Dena qualquer uma das seguintes opes:

Largura da janela Altura da janela
especica a largura da janela, em pixels.
especica a altura da janela, em pixels.
a linha de botes do navegador que inclui Voltar, Avanar, Pgina inicial e Atualizar.
Barra de ferramentas de navegao Barra de ferramentas de localizao
a linha de opes do navegador que
incluem o campo 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 Arquivo, Editar, Exibir, Ir e Ajuda. Dena explicitamente esta opo, se desejar que os visitantes possam navegar a partir da nova janela. Se voc no denir 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.
Barra de menus
especica que as barras de rolagem aparecero se o contedo ultrapassar a rea visvel. Se voc no denir esta opo explicitamente, as barras de rolagem no aparecero. Se a opo 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).
Barras de rolagem, se necessrias
especica 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 denida explicitamente, os controles de redimensionamento no estaro disponveis e o canto inferior direito da janela no poder ser arrastado.
Alas de redimensionamento
o nome da nova janela. D um nome nova janela, se desejar atribuir links a ela ou control-la com o JavaScript. Este nome no pode conter espaos ou caracteres especiais.
Nome da janela
5 6
493
Executar o som Utilize a ao Executar o som, 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.
Nota: possvel que os navegadores exijam algum tipo de suporte adicional de udio (como um plug-in de udio) para que possam executar sons. Por conseguinte, diferentes navegadores dotados de diferentes plug-ins muitas vezes executam os sons de maneiras diferentes. difcil prever com exatido como sero executados os sons que voc programou aos visitantes do seu site. Para poder utilizar a ao Executar o som:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Executar o som, no menu pop-up Aes. Clique em Procurar, para selecionar um arquivo de som, ou digite o caminho e nome do arquivo no campo Executar o som. Clique em OK. Verique 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 popup Mostrar os eventos de.
4 5
Mensagem pop-up A ao Mensagem pop-up exibe um alerta em JavaScript com a mensagem por voc especicada. 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 (\{).
Exemplo
A URL desta pgina {window.location}, e hoje {new Date()}.

Nota: 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 Abrir a janela do navegador. Para obter mais detalhes, consulte Abrir a janela do navegador na pgina 492.
494
Captulo 18
Para poder utilizar a ao Mensagem pop-up:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Mensagem pop-up, no menu pop-up Aes. Digite a mensagem no campo Mensagem. Clique em OK. Verique 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 popup Mostrar os eventos de.
3 4 5
Pr-carregar as imagens A ao Pr-carregar as imagens 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). Este processo evita os atrasos causados pelo download quando as imagens tiverem que ser exibidas.
Nota: Quando a opo Pr-carregar as imagens, na caixa de dilogo Permutar a imagem, for selecionada, a ao Permutar a imagem pr-carregar automaticamente todas as imagens de realce, dispensando a necessidade de adicionar manualmente a opo Prcarregar as imagens quando estiver utilizando Permutar a imagem. Para poder utilizar a ao Pr-carregar as imagens:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Pr-carregar as imagens, no menu pop-up Aes. Clique em Procurar, para selecionar o arquivo de imagem a ser pr-carregado, ou digite o caminho e nome do arquivo de imagem no campo Arquivo de origem da imagem. Clique no boto com o sinal de adio (+), situado no alto da caixa de dilogo, para adicionar a imagem lista Pr-carregar as imagens.
Nota: 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 escolhida.
Para todas as imagens restantes a serem pr-carregadas na pgina, repita as etapas 3 e 4.
495
Para remover uma imagem da lista Pr-carregar as imagens, selecione a imagem na lista e clique no boto com o sinal de subtrao (). Clique em OK. Verique 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 popup Mostrar os eventos de.
7 8
Definir a imagem da barra de navegao Utilize a ao Denir a imagem da barra de navegao 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 Como inserir uma barra de navegao na pgina 405. Utilize a guia Bsico da caixa de dilogo Denir a imagem da barra de navegao, 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 Avanado da caixa de dilogo Denir a imagem da barra de navegao, para alterar o estado de outras imagens em um documento com base no estado do boto. Como padro, a ao de clicar em um elemento da barra de navegao automaticamente retornar todos os outros elementos desta barra ao seu estado Ativo; utilize a guia Avanado se desejar denir um outro estado para uma imagem quando este for Inativo ou Sobreposto.
Para editar uma ao Definir a imagem da barra de navegao:
Selecione a imagem da barra de navegao a ser editada e abra o painel Comportamentos. Na coluna Aes do painel Comportamentos, clique duas vezes na ao Denir a imagem da barra de navegao associada ao evento que estiver alterando. Na guia Bsico da caixa de dilogo Denir a imagem da barra de navegao, selecione as opes de edio de imagens.
Para definir diversas imagens para um boto da barra de navegao:
Selecione a imagem da barra de navegao a ser editada e abra o painel Comportamentos. Na coluna Aes do painel Comportamentos, clique duas vezes na ao Denir a imagem da barra de navegao associada ao evento que estiver alterando. Clique na guia Avanado da caixa de dilogo Denir a imagem da barra de navegao.
496
Captulo 18
No menu pop-up Quando o elemento estiver sendo exibido, escolha um estado para a imagem. Para obter informaes sobre os estados das imagens, consulte Como criar as barras de navegao na pgina 404. depois que um usurio tiver clicado na imagem selecionada.
Escolha Imagem inativa, se desejar alterar a exibio de uma outra imagem Escolha Imagem sobreposta ou Imagem sobreposta enquanto inativa, se desejar
alterar a exibio de uma outra imagem quando o ponteiro estiver sobre a imagem selecionada.
5
Na lista Denir tambm a imagem, selecione uma outra imagem a ser denida na pgina. Clique em Procurar, para selecionar o arquivo de imagem a ser exibido, ou digite o caminho e nome do arquivo de imagem no campo Para o arquivo de imagem. Se tiver selecionado Imagem sobreposta ou Imagem sobreposta enquanto inativa na etapa 4, ainda h uma opo adicional. Clique em Procurar, no campo de texto Se inativa, o arquivo de imagem, para selecionar o arquivo de imagem, ou digite o caminho e nome do arquivo de imagem a ser exibido.
Definir o texto da moldura A ao Denir o texto da moldura permite denir dinamicamente o texto de uma moldura, substituindo o contedo e a formatao da moldura pelo contedo especicado. O contedo pode incluir qualquer HTML vlido. Utilize esta ao para exibir informaes dinamicamente. Embora ao Denir o texto da moldura substitua a formatao de uma moldura, possvel selecionar a opo Preservar a cor de fundo, para preservar os atributos das cores do fundo da pgina e do texto. 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 molduras:
Escolha Modicar > Conjunto de molduras > Dividir a moldura para a esquerda, para a direita, para cima ou para baixo. Para obter mais informaes, consulte Como criar molduras na pgina 219.
497
Para poder utilizar a ao Definir o texto da moldura:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e, no menu pop-up Aes, escolha Denir o texto > Denir o texto da moldura. Na caixa de dilogo Denir o texto da moldura, escolha a moldura de destino no menu pop-up Moldura. Clique no boto Obter o HTML atual, para copiar o contedo da seo body da moldura de destino. Digite uma mensagem no campo Novo HTML e, em seguida, clique em OK. Verique 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 Mostrar os eventos de.
5 6
Definir o texto da camada A ao Denir o texto da camada substitui o contedo e a formatao de uma camada j existente em uma pgina pelo contedo especicado. O contedo pode incluir qualquer cdigo-fonte HTML vlido. A ao Denir o texto da camada substitui o contedo e a formatao de uma camada, mas mantm os atributos da mesma, inclusive a cor. Formate o contedo, inclusive os tags HTML no campo Novo HTML, na caixa de dilogo Denir o texto da 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

Para criar uma camada:
Escolha Inserir > Camada. Para obter mais informaes, consulte Como criar camadas na pgina na pgina 441.
No inspetor de propriedades, digite um nome para a camada.
498
Captulo 18
Para anexar uma ao Definir o texto da camada:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Denir o texto > Denir o texto da camada, no menu pop-up Aes. Na caixa de dilogo Denir o texto da camada, utilize o menu pop-up Camada, para escolher a camada de destino. Digite uma mensagem no campo Novo HTML e, em seguida, clique em OK. Verique 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 Mostrar os eventos de.
4 5
Definir a mensagem de status A ao Denir a mensagem de status 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 na Ajuda do Dreamweaver. Observe, contudo, que os visitantes geralmente ignoram as mensagens na 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

Para poder utilizar a ao Definir a mensagem de status:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Denir o texto > Denir a mensagem de status, no menu pop-up Aes. Na a caixa de dilogo Denir a mensagem de status, digite a mensagem no campo Mensagem. A mensagem dever ser concisa. Se a mensagem no couber na barra de status, o navegador a truncar.
Clique em OK.
499
Verique 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 popup Mostrar os eventos de.
Definir o texto do campo de texto A ao Denir o texto do campo de texto substitui o contedo de um campo de texto de um formulrio pelo contedo especicado. 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:
Escolha Inserir > Objetos de formulrio > Campo de texto. Se o Dreamweaver solicitar a adio de um tag de formulrio, clique em Sim. Para obter mais informaes, consulte Como criar formulrios na pgina 519.
No inspetor de propriedades, digite um nome para o campo de texto. Certique-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).
Para poder utilizar a ao Definir o texto do campo de texto:
1 2
Selecione um campo de texto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Denir o texto > Denir o texto do campo de texto, no menu pop-up Aes. Na caixa de dilogo Denir o texto do campo de texto, escolha o campo de texto de destino no menu pop-up Campo de texto. Digite o texto no campo Novo texto e, em seguida, clique em OK. Verique 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 Mostrar os eventos de.
4 5
500
Captulo 18
Mostrar/ocultar as camadas A ao Mostrar/ocultar as camadas 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 Mostrar/ocultar as camadas tambm til para criar uma camada de prcarga ou seja, uma camada grande que obscurece o contedo da pgina inicialmente, desaparecendo em seguida, quando todos os componentes da pgina tiverem sido carregados.
Para poder utilizar a ao Mostrar/ocultar as camadas:
Escolha Inserir > Camada, ou clique no boto Camada, situado no painel Objetos, 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 Comportamentos. Clique no boto com o sinal de adio (+) e escolha Mostrar/ocultar as camadas, no menu pop-up Aes. Se a opo Mostrar/ocultar as camadas 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 o tag body ou um link (um tag) ou, no menu pop-up Mostrar os eventos de, altere o navegador de destino para IE 4.0.
No menu pop-up Camadas com nome, selecione a camada cuja visibilidade deseja alterar. Clique em Mostrar, para mostrar a camada, Ocultar, para ocult-la, ou Padro, para restaurar a visibilidade padro da mesma. 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. Verique 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 popup Mostrar os eventos de.
7 8
501
Quando forem exibidas em uma janela do Netscape Navigator, possvel que as camadas sejam reduzidas, para acomodar todo o contedo. A m de impedir que isso ocorra, adicione texto ou imagens s camadas ou dena valores de corte das mesmas.
Para criar uma camada de pr-carga:
Clique no boto Desenhar a camada, na categoria Comuns do painel Objetos, e desenhe uma camada grande na visualizao do projeto da janela do documento. Certique-se de que a camada cubra todo o contedo da pgina. No painel Camadas, arraste o nome da camada at o alto da lista de camadas, para especicar que esta camada dever aparecer na frente da ordem de empilhamento. Selecione a camada, se ainda no tiver sido selecionada, e d-lhe o nome loading, utilizando o campo mais esquerda do inspetor de propriedades de camadas. Mantendo a camada selecionada, dena, no inspetor de propriedades, a cor de fundo da camada como sendo a mesma cor que o fundo da pgina.
Clique dentro da camada (que dever estar obscurecendo o restante do contedo da pgina) e, se desejar, digite uma mensagem. Por exemplo: as mensagens Aguarde at que a pgina seja carregada ou Carregando... mantm o visitante informado sobre o que est ocorrendo, para que ele no pense que a pgina no possui um contedo.
502
Captulo 18
Clique no tag <body> no seletor de tags, situado no canto inferior esquerdo da janela do documento. No menu pop-up Aes do painel Comportamentos, escolha Mostrar/ocultar as camadas. Na lista Camadas com nome, selecione a camada denominada carregando Clique em Ocultar. Clique em OK. Certique-se de que o evento listado ao lado da ao Mostrar/ocultar as camadas, 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.
8 9 10 11
Permutar a imagem A ao Permutar a imagem permuta uma imagem por outra, ao alterar o atributo src do tag img. Utilize esta ao para criar botes cambiveis e outros efeitos em imagens (inclusive a permuta simultnea de mais de uma imagem).
Nota: Como 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 poder utilizar a ao Permutar a imagem:
Escolha Inserir > Imagem, ou clique no boto Imagem, situado no painel Objetos, para inserir uma imagem. Nomeie a imagem no campo de texto mais esquerda, no inspetor de propriedades. A ao Permutar a imagem 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 Permutar a imagem se todas tiverem sido nomeadas previamente.
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 Comportamentos. Clique no boto com o sinal de adio (+) e escolha Permutar a imagem, no menu pop-up Aes. Na lista Imagens, selecione a imagem cuja origem deseja alterar.
503
Clique em Procurar, para selecionar o arquivo da nova imagem, ou digite o caminho e nome do arquivo da nova imagem no campo Denir 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 modicadas; caso contrrio, a ao Restaurar a imagem permutada a ela correspondente no ir restaurar todas as imagens. Quando a pgina tiver sido carregada, selecione a opo Pr-carregar as imagens, para carregar as novas imagens no cache do navegador. Este procedimento evita os atrasos causados pelo download quando as imagens tiverem que ser exibidas.
10 11
Restaurar a imagem permutada A ao Restaurar a imagem permutada restaura o ltimo conjunto de imagens permutadas aos seus arquivos de origem anteriores. Esta ao adicionada automaticamente, sempre que voc anexar a ao Permutar a imagem a um objeto; no ser necessrio selecion-la manualmente se tiver deixado selecionada a opo Restaurar durante a anexao de Permutar a imagem. Ir para o quadro da linha de tempo A ao Ir para o quadro da linha de tempo move o cabeote de execuo at o quadro especicado. possvel utilizar esta ao no canal Comportamento, no painel Linhas de tempo, para que certas partes da linha de tempo sejam repetidas o nmero de vezes especicado, para criar um link ou boto Rebobinar ou para permitir que o usurio salte at partes diversas da animao.
Para poder utilizar a ao Ir para o quadro da linha de tempo:
Escolha Janela > Linha de tempo, para abrir o painel Linhas de tempo e se certicar que o documento contm uma linha de tempo. Se no houver barras de animao roxas no painel Linhas de tempo, o documento no contm uma linha de tempo. Consulte Como criar uma animao de linha de tempo na pgina 461.
Selecione um objeto ao qual deseja anexar o comportamento. Para anexar o comportamento a um quadro da linha de tempo, clique no canal Comportamento no quadro desejado.
504
Captulo 18
3 4
Abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Linha de tempo > Ir para o quadro da linha de tempo, no menu pop-up Aes. Se esta ao estiver esmaecida, o documento no contm uma linha de tempo. Selecione uma linha de tempo, no menu pop-up Linha de tempo. Digite um nmero de quadro no campo Ir para o quadro. Se voc estiver adicionando esta ao no canal Comportamento de uma linha de tempo e desejar repetir um segmento desta, digite o nmero de repeties no campo Loop. Deixe este campo em branco se no estiver anexando Ir para o quadro da linha de tempo a um quadro.
5 6 7
8 9
Executar a linha de tempo e Parar a linha de tempo Utilize as aes Executar a linha de tempo e Parar a linha de tempo, para permitir que o visitante inicie ou pare uma linha de tempo ao clicar em um link ou boto ou inicie ou pare uma linha de tempo automaticamente ao passar o cursor sobre um link, imagem ou outro objeto. A ao Executar a linha de tempo ser automaticamente anexada ao tag body com o evento onLoad quando for selecionada a opo Execuo automtica, no painel Linhas de tempo.
Para poder utilizar as aes Executar a linha de tempo e Parar a linha de tempo:
Escolha Janela > Linha de tempo, para abrir o painel Linhas de tempo e se certicar que o documento contm uma linha de tempo. Se no houver barras de animao roxas no painel Linhas de tempo, o documento no contm uma linha de tempo. Consulte Como criar uma animao de linha de tempo na pgina 461.
2 3
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Executar a linha de tempo ou Parar a linha de tempo, no menu pop-up Aes. Selecione a linha de tempo a ser executada ou parada, ou opte por parar todas linhas de tempo, no menu pop-up. Clique em OK.
505
Verique 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 popup Mostrar os eventos de.
Validar o formulrio A ao Validar o formulrio verica o contedo de determinados campos de texto, a m de garantir que o usurio tenha digitado o tipo correto de dados. Anexe esta ao a certos campos de texto com o evento onBlur, a m de validar os campos medida que o usurio estiver preenchendo o formulrio, ou anexe-a ao formulrio com o evento onSubmit, a m de avaliar diversos campos de texto simultaneamente quando o usurio clicar no boto Enviar. A anexao desta ao a um formulrio evita que este seja enviado ao servidor se algum dos campos contiver dados incorretos.
Para poder utilizar a ao Validar o formulrio:
Escolha Inserir > Formulrio, ou clique no boto Formulrio, situado no painel Objetos, para inserir um formulrio. Escolha Inserir > Objetos de formulrio > Campo de texto, ou clique no boto Campo de texto, situado no painel Objetos, para inserir um campo de texto. Repita esta etapa para inserir outros campos de texto. Siga um dos procedimentos abaixo: o formulrio, selecione um campo de texto e escolha Janela > Comportamentos.
Para validar determinados campos medida que o usurio estiver preenchendo Para validar vrios campos quando o usurio enviar o formulrio, clique no tag
<form> no seletor de tags, situado no canto inferior esquerdo da janela do documento, e escolha Janela > Comportamentos. 4 5
No menu pop-up Aes, escolha Validar o formulrio. Siga um dos procedimentos abaixo: selecionado na janela do documento, na lista Campos com nome.
Se estiver validando determinados campos, selecione o mesmo campo que tiver Se estiver validando vrios campos, selecione um campo de texto na
lista Campos com nome.
6
Selecione a opo apropriada, se o campo se destinar a receber dados.
506
Captulo 18
Escolha uma dentre as seguintes opes Aceitar: conter qualquer tipo especco de dados. Esta opo no ter signicado (ela equivale ausncia, no campo, da ao Validar o formulrio) se a opo Necessrio no estiver selecionada.
Utilize a opo Qualquer item, se o campo for necessrio, porm no precisar
Utilize a opo Endereo eletrnico, para vericar se o campo contm um sinal

de @.
Utilize a opo Nmero, para vericar se o campo contm apenas algarismos

numricos.
Utilize a opo Nmero de, para vericar se o campo contm apenas um

nmero em uma faixa especca.
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 Eventos.
10
Se estiver validando um determinado campo, certique-se de que o evento padro seja onBlur ou onChange. Se no for, selecione onBlur ou onChange no menu pop-up. Ambos os eventos disparam a ao Validar o formulrio, 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 especicado que o campo necessrio.
507
508
Captulo 18
19
CAPTULO 19
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como depurar o cdigo JavaScript
O depurador Javascript do Macromedia Dreamweaver permite revelar erros no cdigo JavaScript do cliente. possvel escrever o cdigo utilizando a visualizao de cdigo (ou o inspetor de cdigo) do Dreamweaver e, em seguida, executar o depurador, para vericar o cdigo quanto sintaxe e erros lgicos. Os erros de sintaxe provocam a exibio de uma mensagem de erro pelo navegador; os erros lgicos acarretam o funcionamento incorreto da pgina, porm no so relatados pelo navegador. O depurador funciona com o Microsoft Internet Explorer e com o Netscape Navigator na plataforma Windows, e com o Netscape Navigator na plataforma Macintosh. Para obter mais informaes sobre a criao de scripts, consulte Como inserir os scripts na pgina 365. Inicialmente, o depurador verica o cdigo quanto a erros de sintaxe e, em seguida, executado juntamente com o navegador, para auxili-lo na vericao dos erros lgicos. Se forem detectados erros lgicos, a janela do depurador JavaScript o auxiliar a isol-los no cdigo JavaScript, permitindo o exame de variveis e propriedades de documento enquanto o programa estiver sendo executado. possvel denir pontos de interrupo (semelhantes s instrues de alerta) no cdigo, a m de parar a execuo do programa e exibir os valores dos objetos e propriedades JavaScript em uma lista de variveis. Tambm possvel avanar at a instruo seguinte ou at uma chamada de funo, para examinar a mudana dos valores da varivel. O depurador JavaScript pode reduzir signicativamente o tempo envolvido na localizao e isolamento de erros no cdigo.
509
Como executar o depurador

Depois de escrever o cdigo, voc poder iniciar o depurador JavaScript, para que ele verique os erros. Inicialmente, o depurador vericar os erros de sintaxe e, em seguida, abrir a pgina no navegador, para que voc verique os erros lgicos.
Para iniciar a depurao:
Escolha Arquivo > Depurar no navegador e, em seguida, selecione o navegador na lista. Como alternativa, clique no boto Visualizar/depurar no navegador, na barra de ferramentas (Exibir > Barra de ferramentas), e selecione a opo Depurar no Internet Explorer ou Depurar no Netscape Communicator.
Se o depurador localizar algum erro de sintaxe, ele parar e apresentar uma lista de erros na janela Erros de sintaxe JavaScript. Consulte Como localizar erros de sintaxe na pgina 511.
2
Se estiver utilizando o Netscape Navigator, clique em OK, na caixa de advertncia do depurador que aparecer e, em seguida, clique em Conceder, na caixa de dilogo Segurana Java.
Nota: Se voc j tiver aceitado um certificado de segurana da Macromedia, possvel que a caixa de dilogo Segurana Java no aparea.
Se estiver utilizando o Internet Explorer (apenas no Windows), clique em Sim, na caixa de dilogo Segurana Java e, em seguida, em OK, na caixa de advertncia do depurador que aparecer.
O depurador se conectar com o navegador, porm no efetuar uma conexo de rede ou com qualquer servidor da Internet. O navegador aparecer com a janela do depurador Javascript, que ser interrompida automaticamente na primeira linha de cdigo. A janela do depurador Javascript aparecer com a janela do navegador. O depurador parar automaticamente na primeira linha de cdigo.
Para executar o depurador:
Clique no boto Executar, na janela do depurador Javascript.

Para parar o depurador:
Clique no boto Parar a depurao, na janela do depurador Javascript. O depurador ser fechado.
510
Captulo 19
Como localizar erros de sintaxe Se o depurador localizar algum erro de sintaxe, ele parar e apresentar uma lista de erros na janela Erros de sintaxe JavaScript.
Para visualizar a descrio do erro:
Selecione um erro na janela Erros de sintaxe JavaScript. Aparecer uma descrio do erro na rea Descrio detalhada.
Para ter acesso ao erro selecionado no cdigo, siga um dos procedimentos abaixo:
Clique duas vezes no erro. Clique no boto Ir para a linha.

O cdigo ser realado na visualizao de cdigo (ou no inspetor de cdigo).
511
Como localizar e corrigir os erros lgicos

Quando o depurador localizar erros lgicos, ser aberta a janela do depurador JavaScript. Um ponto de interrupo (semelhante a um alerta) ser automaticamente denido na primeira linha do cdigo. O depurador pra a execuo em cada ponto de interrupo, o que permite examinar os valores dos objetos e propriedades JavaScript na janela da lista de variveis.
Depois que o depurador tiver parado em um ponto de interrupo, possvel analisar o cdigo (executar uma instruo por vez). Este procedimento permite vericar se o programa executado como deveria. O depurador pode analisar at mesmo cdigo vinculado. Por exemplo: se o cdigo contiver um link a um arquivo de origem, o depurador analisar este arquivo e o exibir na janela do depurador JavaScript. medida que avana na anlise do cdigo, voc poder acompanhar as modicaes nos valores das variveis no programa.
Definir/remover o ponto de interrupo Executar Parar a depurao Depurao parcial Depurao total Depurao circular Remover todos os pontos de interrupo
512
Captulo 19
Como definir os pontos de interrupo Um ponto de interrupo indica um ponto do cdigo no qual voc deseja interromper a execuo do programa. Na denio de um ponto de interrupo, ele ser marcado com um pequeno ponto vermelho na margem esquerda da janela do depurador Javascript. Quando a execuo do programa for parada no ponto de interrupo, aparecer uma pequena seta sobre o ponto e se tornar possvel examinar os objetos e propriedades existentes neste ponto. Isso permitir identicar rapidamente a origem do problema no cdigo JavaScript. Os pontos de interrupo podero ser denidos apenas no cdigo JavaScript (entre os tags script) ou em uma linha com um manipulador de evento. Se voc denir um ponto de interrupo em outro ponto, o Dreamweaver automaticamente o denir na prxima linha vlida de cdigo (ou colocar o ponto de insero nesta linha, se ela j contar com um ponto de interrupo denido). Se no houver linhas vlidas nas quais o ponto de interrupo possa ser denido, ser emitido um alerta sonoro.
Para definir um ponto de interrupo, siga um dos procedimentos abaixo:
Na janela do depurador JavaScript, coloque o ponto de insero na linha onde

deseja o ponto de interrupo e, em seguida, clique no boto Denir/remover o ponto de interrupo, na parte superior da janela do depurador. Para remover o ponto de interrupo, clique novamente no boto Denir/remover o ponto de interrupo.
513
Na visualizao de cdigo (ou no inspetor de cdigo), coloque o ponto de

insero na linha onde deseja o ponto de interrupo e, em seguida, selecione Editar > Denir o ponto de interrupo, ou escolha Denir o ponto de interrupo, no menu pop-up Navegao do cdigo, na barra de ferramentas. Tambm possvel clicar com o boto direito do mouse (no Windows) ou clicar mantendo a tecla Control pressionada (no Macintosh) e escolher a opo Denir o ponto de interrupo, no menu contextual. Para remover o ponto de interrupo, selecione Remover o ponto de interrupo, no menu contextual.
Para remover todos os pontos de interrupo, siga um dos procedimentos abaixo:
Na janela do depurador Javascript, clique no boto Remover todos os pontos de

interrupo.
Na visualizao de cdigo (ou no inspetor de cdigo), selecione Remover todos

os pontos de interrupo, no menu pop-up Navegao do cdigo, na barra de ferramentas, ou escolha Editar > Remover todos os pontos de interrupo.
514
Captulo 19
Como analisar o cdigo possvel analisar o cdigo e executar uma instruo por vez, para monitorar os seus efeitos sobre o programa. Por exemplo: possvel analisar uma condio if, para vericar se o programa ir parar na primeira linha da instruo condicional ou na linha executvel seguinte instruo if. Quando o depurador parar em uma instruo com uma chamada a uma funo, voc poder vericar a funo, para se certicar de que ela ser executada corretamente. Se a funo estiver correta, voc poder determinar a depurao circular da mesma pelo depurador, at o retorno da funo. O programa ir parar novamente na prxima instruo aps o local da chamada funo. Se voc tentar depurar uma instruo que contenha uma funo JavaScript no padronizada, o comportamento equivaler depurao parcial.
Para efetuar a depurao parcial de uma instruo:
Clique no boto Depurao parcial, situado na parte superior da janela do depurador Javascript. Quando o programa parar em qualquer instruo (inclusive naquelas com uma chamada a uma funo), voc poder efetuar a depurao parcial da instruo, continuar e interromper o processo antes da instruo seguinte.
Para depurar uma funo totalmente:
Clique no boto Depurao total, situado na parte superior da janela do depurador Javascript.
Para depurar uma funo circularmente:
Clique no boto Depurao circular. Tambm possvel utilizar a opo Depurao circular quando o depurador estiver dentro de uma funo denida pelo usurio. A depurao circular acarreta a execuo das instrues restantes na denio da funo. O depurador ir parar na instruo seguinte.
515
Como examinar e editar os valores das variveis Para vericar os valores das variveis medida que examina o cdigo, utilize a lista de variveis do Dreamweaver, localizada no painel inferior da janela do depurador Javascript. Os nomes das variveis so digitados na coluna da esquerda; a coluna da direita apresenta uma lista dos valores atuais de cada varivel quando o programa parar a execuo em um ponto de interrupo ou aps a depurao total do cdigo.
Para adicionar uma varivel lista de variveis, siga um dos procedimentos abaixo:
Selecione o nome da varivel na seo do cdigo da janela do depurador

JavaScript. Clique no boto com o sinal de adio (+) e pressione a tecla Enter.
Clique no boto com o sinal de adio (+), digite o nome da varivel que deseja
examinar e pressione a tecla Enter. medida que voc examinar o cdigo, os valores aparecero do lado de cada varivel. Se a varivel for um objeto com propriedades, ser possvel expandi-la (mostrar as suas propriedades e valores), clicando no boto com o sinal de adio (+) (no Windows), ou no boto com um tringulo (no Macintosh), ao seu lado na lista. A varivel expandida ser automaticamente reduzida cada vez que o cdigo for examinado.
516
Captulo 19
Para remover um item da lista de variveis:
1 2
Selecione o item da lista de variveis. Clique no boto com o sinal de subtrao (-).
Para editar um valor:
1 2 3
Selecione o item da lista de variveis. Clique no valor da lista de variveis. Edite o valor, digitando na caixa de texto que aparecer.
517
518
Captulo 19
20
CAPTULO 20
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como criar formulrios
Os formulrios permitem interagir com ou reunir informaes dos visitantes ao seu site. Por exemplo: possvel indagar o nome e endereo eletrnico de um usurio, pedir que o visitante participe de uma pesquisa, assine um livro de convidados ou fornea comentrios a respeito do seu site. Os formulrios se dividem em duas partes: O cdigo-fonte HTML que descreve o formulrio (por exemplo: os campos, identicadores e botes que o usurio ver na pgina) e um script ou aplicativo que processa as informaes enviadas (um script CGI, por exemplo). No possvel coletar os dados de um formulrio sem utilizar um script de processamento.
1. O visitante preenche o formulrio e o envia a um servidor da Web para processamento 2. O script de CGI processa o formulrio
CGI-bin
3. Um novo documento HTML criado e enviado ao visitante
Utilize o Macromedia Dreamweaver para criar diversos objetos de formulrio, como campos de texto, de senha, botes de opo, caixas de seleo, menus popup e imagens clicveis (como um boto Enviar). Tambm possvel utilizar o comportamento Validar o formulrio do Dreamweaver para vericar as informaes fornecidas por um visitante; por exemplo: possvel vericar se um endereo do correio eletrnico contm um smbolo de arroba (@) ou se um campo essencial contm uma entrada.
519
Sobre os scripts CGI

Geralmente, os formulrios so processados por scripts CGI (Common Gateway Interface). A CGI constitui uma maneira padronizada de enviar informaes entre um servidor e um script de processamento. Normalmente, os scripts CGI so escritos em Perl ou outra linguagem de programao, como C++, Java, VBScript ou JavaScript, por exemplo. Antes de criar formulrios interativos, verique com o seu provedor de servios da Internet ou administrador do servidor se possvel executar scripts CGI no seu servidor.
Sobre os objetos de formulrio

No Dreamweaver, os tipos de entrada em formulrios so denominados objetos de formulrio. possvel inserir objetos de formulrio utilizando a categoria Formulrios do painel Objetos, ou escolhendo as opes Inserir > Formulrio, e Inserir > Objetos de formulrio.
A categoria Formulrios apresenta os seguintes botes:

Inserir formulrio insere um formulrio no documento. O Dreamweaver inserir tags form de abertura e nalizao no cdigo-fonte HTML. Quaisquer outros objetos de formulrio, como campos de texto, botes, e assim por diante, devem ser inseridos entre os tags form, para que os dados sejam processados corretamente por todos os navegadores. Inserir campo de texto insere um campo de texto em um formulrio. Os campos de texto aceitam qualquer tipo de texto, seja ele alfabtico ou numrico. O texto digitado pode ser exibido como uma linha simples, linhas mltiplas, marcadores ou asteriscos (com a nalidade de proteger as senhas).
520
Captulo 20
insere um boto de texto em um formulrio. Os botes realizam tarefas quando forem clicados, como o envio e redenio dos formulrios. possvel adicionar um nome ou identicador personalizado ao boto ou utilizar um dos identicadores predenidos: Enviar ou Redenir.
Inserir boto
insere uma caixa de seleo em um formulrio. As caixas de seleo permitem mltiplas respostas em um nico grupo de opes. O usurio poder selecionar quantas opes forem aplicveis.
Inserir caixa de seleo Inserir boto de opo insere um boto de opo em um formulrio. Os botes de opo representam opes exclusivas. A seleo de um dos botes do grupo cancela a seleo de todos os outros. Por exemplo: o usurio poder selecionar a opo Sim ou a opo No. Inserir lista/menus permite criar opes do usurio em uma lista. A opo Lista exibir os valores de opo em uma lista de rolagem e permitir aos usurios selecionar diversas opes na lista. A opo Menu exibir os valores de opo em uma lista suspensa e permitir aos usurios selecionar apenas uma nica opo. Inserir campo de arquivos
insere um campo de texto em branco e um boto Procurar em um documento. Os campos de arquivos permitem que o usurio procure os arquivos nos discos rgidos, efetuando o seu upload como dados do formulrio.
permite inserir uma imagem em um formulrio. Os campos de imagens podem ser utilizados em vez dos botes Enviar, para criar botes com aparncia grca.
Inserir campo de imagens
insere um campo oculto no documento, no qual possvel armazenar dados do usurio. Os campos ocultos permitem armazenar informaes que tiverem sido digitadas pelo usurio (como um nome, endereo de correio eletrnico ou preferncia de compra) e, em seguida, utiliz-las quando o usurio visitar o site na prxima vez.
Inserir campo oculto
insere uma lista de navegao ou menu pop-up. Os menus de salto permitem inserir um menu no qual cada opo se vincula a um documento ou arquivo. Consulte Como criar menus de salto na pgina 401.
Inserir menu de salto
521
Como criar um formulrio

Um formulrio contm propriedades que no so visveis ao usurio. As propriedades especicam como o formulrio ser processado Um formulrio consiste de trs partes bsicas:
tags form, que incluem a URL do script CGI que processar o formulrio e o
mtodo atravs do qual os dados sero enviados a um servidor
os campos do formulrio, que incluem campos de texto, menus, caixas de

seleo e botes de opo
boto Enviar, que envia os dados ao script CGI do servidor

Nota: Se voc tentar inserir um objeto de formulrio sem criar o formulrio, ser exibida a seguinte mensagem do Dreamweaver: Deseja adicionar tags de formulrio?. Escolha Sim, para que o Dreamweaver crie tags "form" para o objeto. Para adicionar um formulrio a um documento:
No documento, coloque o ponto de insero onde deseja que o formulrio aparea e, em seguida, siga um dos procedimentos abaixo: formulrio.
Na categoria Formulrios do painel Objetos, selecione o cone de Inserir Escolha Inserir > Formulrio.
Quando um formulrio for criado, aparecer um contorno pontilhado vermelho na janela do documento. Se este contorno no aparecer, verique se a opo Exibir > Auxlios visuais > Elementos invisveis est selecionada.
522
Captulo 20
No documento, clique no contorno correspondente ao formulrio, para selecion-lo, se j no estiver. No campo Nome do formulrio, no inspetor de propriedades, digite um nome exclusivo para identicar o formulrio. O ato de nomear um formulrio possibilita fazer referncias a ele ou control-lo com uma linguagem de criao de scripts, como JavaScript ou VBScript.
No campo Ao, especique o caminho at a URL onde reside o script ou aplicativo de processamento que processar as informaes do formulrio, seguindo um dos procedimentos abaixo:
Clique no cone de pasta e navegue at a pasta relevante. Digite o caminho completo at a pasta.
Se estiver especicando um caminho at um script CGI, o caminho at a URL ter uma aparncia semelhante a:
http://www.meu_site.com/cgi-bin/process.cgi 5
No menu pop-up Mtodo, escolha o mtodo atravs do qual sero processados os dados do formulrio.
Escolha POST, para enviar os valores do formulrio no corpo de uma mensagem. Escolha GET, para enviar as informaes ao servidor e anexar URL os valores
do formulrio que tiverem sido enviados.
Nota: No utilize o mtodo GET com formulrios extensos. As URLs se limitam a 8192 caracteres. Se a quantidade de dados enviados for grande demais, os dados se tornaro truncados, o que poder levar a resultados de processamento inesperados. Tambm no utilize o mtodo GET ao lidar com nmeros de cartes de crdito ou outras informaes confidenciais, pois este mtodo de transmisso de informaes no seguro.
Escolha Padro, para utilizar a denio padro do navegador do usurio para

envio de dados de formulrios que, em geral, o mtodo GET.
523
Sobre os campos de formulrio

Depois que os tags form tiverem sido adicionados ao documento, possvel adicionar objetos de formulrio. Utilize os objetos de formulrio para solicitar informaes aos visitantes do site. Utilize os campos de formulrio quando desejar congurar um formulrio no qual os visitantes possam digitar suas respostas (nome e endereo, por exemplo). Existem trs tipos de campos que podem ser inseridos em um formulrio: campos de texto (nos quais o usurio digita uma resposta), campos de arquivos (nos quais o usurio digita o caminho at um arquivo do qual dever ser feito o upload para o servidor, e os campos ocultos (que armazenam informaes digitadas pelo usurio em outro campo). Quando estiver adicionando um campo a um formulrio, voc poder denir a sua extenso, nmero de linhas, nmero de caracteres que podem ser digitados pelo usurio e se o campo ser destinado a uma senha. Como criar campos de texto Um campo de texto um objeto de formulrio no qual os usurios podem digitar uma resposta. H trs tipos de campo de texto:
Campos de texto de linha nica normalmente, so utilizados para fornecer uma resposta com uma nica palavra ou frase breve, como um nome ou endereo. Campos de texto de linhas mltiplas fornecem ao visitante uma rea maior, na qual podero digitar uma resposta. fcil determinar o nmero de caracteres ou de linhas que estaro disponveis ao visitante para escrever o texto. Campos de senha
so um tipo especial de campo de texto, no qual o texto digitado pelo usurio se torna oculto ou substitudo por asteriscos ou marcadores, que obscurecem o texto.
Nota: As senhas que forem enviadas a um servidor atravs deste mtodo no estaro criptografadas. Por conseguinte, a transferncia de dados no segura.
524
Captulo 20
Para criar um campo de texto de linha nica ou de senha:
Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo:
Escolha Inserir > Objeto de formulrio > Campo de texto. Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
de texto. Aparecer um campo de texto no documento.
2
No campo Campo de texto, no inspetor de propriedades, digite um nome exclusivo para o campo. Certique-se de que o nome seja exclusivo. No possvel duplicar o nome de um campo de texto em um formulrio. No deixe espaos em branco. Em vez disso, utilize um sinal de sublinhado para separar as palavras. Por exemplo: digite ltimo_nome, em vez de ltimo nome.
No campo Larg. do caractere, siga um dos procedimentos abaixo: aproximadamente 24 caracteres.
Aceite a denio padro, que estabelece a extenso do campo de texto em Digite um nmero, para especicar a extenso do campo de texto.
4
No campo N mx. de caract., siga um dos procedimentos abaixo: extenso que desejarem. Se a entrada do usurio exceder a largura (extenso) do caractere do campo de texto, o texto rolar.
Deixe o campo em branco, o que permitir aos usurios digitar o texto na Digite um nmero para denir o nmero mximo de caracteres que podero
ser digitados pelo usurio no campo. Por exemplo: recomendvel limitar um campo de idade a trs dgitos e um campo de senha a oito caracteres. Se o usurio ultrapassar o nmero mximo de caracteres, o formulrio produzir um alerta sonoro.
5
Em Tipo, selecione o tipo de campo de texto a ser criado, seguindo um dos procedimentos abaixo:
Selecione Linha simples, para criar um campo de texto de linha nica. Selecione Senha, para criar um campo de senha.
6
Se desejar denir o texto padro de um campo de texto, digite o texto no campo Valor inicial do inspetor de propriedades Este texto ser exibido no campo de texto quando o formulrio for carregado pela primeira vez no navegador do usurio.
525
Se desejar, digite um identicador ou texto descritivo ao lado do objeto. possvel aplicar formatao de texto aos identicadores dos objetos do formulrio. Para obter mais informaes, consulte Como denir e alterar as fontes e estilos na pgina 257.
Para criar uma rea de texto de linhas mltiplas:
Escolha Inserir > Objeto de formulrio > Campo de texto. Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
de texto. Aparecer um campo de texto no documento.
2
No campo Campo de texto, no inspetor de propriedades, digite um nome para o objeto do campo de texto. Certique-se de que o nome seja exclusivo. No possvel duplicar o nome de um campo de texto em um formulrio. No deixe espaos em branco. Em vez disso, utilize um sinal de sublinhado para separar as palavras. Por exemplo: digite comentrios_do_usurio, em vez de comentrios do usurio.
3 4
Em Tipo, selecione Multi-linha. No campo Largura do caractere, siga um dos procedimentos abaixo: caracteres.
Aceite a denio padro, que estabelece a extenso da rea de texto em 20 Digite um nmero, para especicar a extenso da rea de texto.
5
No campo Nmero de linhas, siga um dos procedimentos abaixo:
Aceite a denio padro, que estabelece um campo de texto com duas linhas. Digite um nmero para especicar o nmero de linhas da rea de texto.
526
Captulo 20
No menu pop-up Quebra autom. de linha, selecione uma denio para estabelecer como a entrada do usurio ser exibida quando esta exceder a rea de texto. automaticamente linha seguinte. Quando a entrada do usurio exceder a margem direita da rea de texto, este ser quebrado para a esquerda. O usurio dever pressionar a tecla Return, para mover o ponto de insero para a linha seguinte na rea de texto.
Selecione Desativada ou Padro, se desejar que o texto no passe
Selecione a opo Virtual, para denir a quebra de linha na rea de texto.

Quando a entrada do usurio exceder a margem direita da rea de texto, este ser quebrado para a linha seguinte. Contudo, quando os dados forem enviados para processamento, a quebra automtica de linha no se aplicar aos dados; estes sero enviados como uma seqncia de caracteres.
Selecione a opo Fsica, para denir a quebra de linha na rea de texto assim
como nos dados, quando estes forem enviados para processamento.
7
Se desejar denir o texto padro de um campo de texto, digite o texto no campo Valor inicial do inspetor de propriedades. Este texto ser exibido no campo de texto quando o formulrio for carregado pela primeira vez no navegador do usurio.
Se desejar, digite um identicador ou texto descritivo ao lado do objeto. possvel aplicar formatao de texto aos identicadores dos objetos do formulrio. Para obter mais informaes, consulte Como denir e alterar as fontes e estilos na pgina 257.
Como permitir que os visitantes faam o upload de um arquivo para o seu servidor Em alguns casos, possvel que as informaes solicitadas aos visitantes do seu site sejam complicadas demais para responder em um campo de texto. Voc poder requerer que os visitantes enviem um arquivo inteiro para o servidor (um currculo com formatao sosticada, um arquivo de imagens grcas ou outro tipo de documento, por exemplo). possvel congurar um campo de arquivos de forma a cumprir esta tarefa. Um campo de arquivos se parece com outros campos de texto, exceto pela presena de um boto Procurar. O usurio poder digitar o caminho at o arquivo que est enviando ou utilizar o boto Procurar, para localizar e selecionar o documento em questo.
527
Para poder utilizar um campo de arquivos, o mtodo de formulrios dever estar denido como POST. Os visitantes enviaro um arquivo para o endereo congurado no campo Ao do formulrio.
Nota: Antes de utilizar o campo de arquivos, confirme com o administrador do servidor se o upload annimo de arquivos permitido. Se inserir um campo de arquivos com o Dreamweaver, voc dever inserir manualmente ENCTYPE="multipart/form-data" no tag form, para garantir que o arquivo estar adequadamente codificado. Para criar um campo de arquivos em um formulrio:
Clique no contorno do formulrio para selecion-lo e, em seguida, no inspetor de propriedades, dena o mtodo de formulrios como sendo POST. Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo:
Escolha Inserir > Objeto de formulrio > Campo de arquivos. Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
de arquivos. Aparecer um campo de arquivos no documento.
3
No campo Nome do campo de arquivos, no inspetor de propriedades, digite o nome do objeto campo de arquivos. No campo Larg. do caractere, digite o valor correspondente ao nmero mximo de caracteres a serem exibidos no campo. No campo N mx. de caracteres, digite o valor correspondente ao nmero mximo de caracteres que o campo comportar.
Como criar um campo oculto Os campos ocultos no se encontram visveis aos visitantes do seu site. Eles so elementos invisveis que so colocados nos documentos para coletar ou enviar informaes. As informaes contidas nos campos ocultos sero repassadas ao servidor quando o formulrio for enviado, utilizando o par nome/valor que tiver sido denido na congurao do campo oculto. Quando voc inserir um campo oculto, o Dreamweaver adicionar um marcador no documento. Se voc inserir um campo oculto e no vir um marcador, escolha Exibir > Auxlios visuais > Elementos invisveis, para revelar o marcador.
528
Captulo 20
Para criar um campo oculto:
Escolha Inserir > Objeto de formulrio > Campo oculto. Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
oculto. Aparecer um marcador no documento.
2
No campo Campo oculto, no inspetor de propriedades, digite um nome exclusivo para o campo. No campo Valor, digite o valor que deseja atribuir ao campo.
Como inserir caixas de seleo e botes de opo

Utilize os objetos de formulrio caixa de seleo e boto de opo para congurar objetos de seleo predenidos. O usurio clica numa caixa de seleo ou boto de opo para fazer uma escolha. A diferena entre as caixas de seleo e os botes de opo est na maneira como eles funcionam. Nas caixas de seleo, o usurio alterna cada resposta para inativa ou ativa. As opes das caixas de seleo funcionam independentemente. O usurio poder selecionar mais de uma opo em um grupo de caixas de seleo.
529
Os botes de opo funcionam como um grupo e fornecem valores de seleo mutuamente exclusivos. possvel selecionar apenas uma opo em um grupo de botes de opo.
Como inserir uma caixa de seleo As caixas de seleo permitem ao usurio selecionar mais de uma opo em um grupo de opes. Cada objeto de formulrio caixa de seleo um elemento individual, devendo ter um nome exclusivo no campo Nome.
Para inserir uma caixa de seleo:
Escolha Inserir > Objeto de formulrio > Caixa de seleo. Na categoria Formulrios do painel Objetos, clique no cone de Inserir caixa de
seleo.
2
No campo Nome da caixa de seleo, no inspetor de propriedades, digite um nome descritivo para a caixa de seleo.
Nota: Todas as caixas de seleo que forem adicionadas a um formulrio devem contar com um nome exclusivo.
530
Captulo 20
No campo Valor selecionado, digite o valor da caixa de seleo. Por exemplo: em uma pesquisa, possvel associar o valor 4 opinio "concordo plenamente", e o valor 1 opinio "discordo totalmente".
Na opo Estado inicial, clique em Selecionado, se desejar que uma opo aparea selecionada quando o formulrio for carregado pela primeira vez no navegador.
Como inserir um boto de opo Utilize os botes de opo quando o usurio tiver que selecionar apenas uma opo em um grupo de opes. Normalmente, os botes de opo so utilizados em grupos. Todos os botes de opo de um grupo devem ter o mesmo nome e conter diferentes valores de campo.
Para inserir botes de opo:
Escolha Inserir > Objeto de formulrio > Boto de opo. Na categoria Formulrios do painel Objetos, clique no cone de Inserir boto
de opo.
2
No campo Nome do boto de opo, no inspetor de propriedades, digite um nome descritivo para o grupo de opes.
Nota: Se voc criar diversas interaes com botes de opo em um formulrio, certifique-se de que cada conjunto de botes de opo tenha um nome exclusivo.
No campo Valor selecionado, digite o valor que deseja enviar para o aplicativo do servidor ou script de processamento quando o usurio selecionar este boto de opo. Por exemplo: digite futebol, no campo Valor selecionado, para indicar que o usurio escolheu futebol. Na opo Estado inicial, clique em Selecionado, se desejar que uma opo aparea selecionada quando o formulrio for carregado pela primeira vez no navegador.
Sugesto: Para adicionar outros botes de opo ao grupo, selecione o boto de opo original e, em seguida, enquanto mantm a tecla Control pressionada (no Windows), ou a tecla Option pressionada (no Macintosh), arraste-o e altere o campo Valor selecionado de cada novo boto.
531
Sobre as listas e menus

Quando desejar apresentar diversas opes ao usurio em um espao limitado, utilize uma lista de opes ou menu. Embora as listas e menus de formulrios sejam criados no mesmo inspetor de propriedades, estes componentes fornecem ao usurio recursos de funcionalidade diferentes. Utilize uma lista quando desejar controlar o nmero de opes exibidas. possvel denir a altura da linha da lista. Quando o nmero de opes da lista ultrapassar a altura da linha, aparecer uma barra de rolagem, que permitir ao usurio visualizar todas as opes. Tambm possvel permitir que os usurios selecionem diversos itens de uma lista. Utilize os menus quando o espao for muito limitado. Os menus exibem uma entrada de linha nica e incluem uma seta abaixo, na qual o usurio poder clicar, para revelar as outras opes do menu. O usurio poder escolher apenas um item de menu de cada vez. Como criar uma lista de rolagem As listas de rolagem permitem congurar diversas opes em um espao limitado. possvel denir a altura da linha da lista, a m de permitir que o usurio faa mltiplas selees na lista.
Para criar uma lista de rolagem:
Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo: menu.
Na categoria Formulrios do painel Objetos, clique no cone de Inserir lista/ Escolha Inserir > Objeto de formulrio > Lista/menu e selecione o elemento
resultante, se necessrio.
2
No campo Lista/menu, no inspetor de propriedades, digite um nome exclusivo para a lista. Em Tipo, selecione a opo Lista.
532
Captulo 20
No campo Altura, digite um nmero para especicar o nmero de linhas a serem exibidas pela lista. A altura padro da linha est denida como 4. As barras de rolagem aparecero quando o nmero especicado for menor do que o nmero de opes contidas na lista.
Se desejar permitir ao usurio selecionar mais de uma opo na lista, selecione Permitir mltiplas (ao lado da opo Selees). Clique em Valores da lista, para adicionar as opes. Aparecer a caixa de dilogo Valores da lista. Com o ponto de insero no campo Identicador do item, digite o texto que deseja incluir na lista. No campo Valor, digite o texto ou dados que deseja enviar ao servidor quando o usurio selecionar este item. Para adicionar um outro item lista de opes, clique no boto com o sinal de adio (+) e, em seguida, repita as etapas 7 e 8. Quando terminar de adicionar os itens lista, clique em OK, para fechar a caixa de dilogo Valores da lista. O inspetor de propriedades aparecer. As opes estaro visveis no campo Selecionados inicialmente.
10
11
Selecione um dos itens da lista, para que ele seja selecionado quando a lista aparecer pela primeira vez.
Como criar um menu pop-up Os menus pop-up permitem congurar diversas opes em um espao limitado. Quando o formulrio for carregado em um navegador, apenas uma opo estar visvel.
O usurio poder clicar na seta abaixo, para exibir todas as opes em um menu.
533
Para criar um menu pop-up:
Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo: menu.
Na categoria Formulrios do painel Objetos, clique no cone de Inserir lista/ Escolha Inserir > Objeto de formulrio > Lista/menu.
2
No campo Lista/menu, no inspetor de propriedades, digite um nome exclusivo para o menu. Em Tipo, selecione a opo Menu. Clique em Valores da lista, para adicionar as opes. Aparecer a caixa de dilogo Valores da lista. Com o ponto de insero no campo Identicador do item, digite o texto que deseja incluir na lista. No campo Valor, digite o texto ou dados que deseja enviar ao servidor quando o usurio selecionar este item. Para adicionar um outro item lista de opes, clique no boto com o sinal de adio (+) e, em seguida, repita as etapas 6 e 7. Quando terminar de adicionar os itens lista, clique em OK, para fechar a caixa de dilogo Valores da lista. O inspetor de propriedades aparecer. As opes estaro visveis no campo Selecionados inicialmente.
3 4
Sobre os botes de formulrio

Os botes de formulrio controlam as operaes relacionadas aos formulrios. possvel utilizar um boto de formulrio para enviar os dados que o usurio tiver digitado, para processamento pelo servidor, ou para redenir um formulrio, o que permitir ao usurio corrigir as informaes antes de enviar os dados. Tambm possvel utilizar um boto para efetuar outras tarefas de processamento que tiverem sido denidas em um script de processamento. Por exemplo: o boto do formulrio poder calcular um pedido de compra, com base nos valores de campos especicados.
534
Captulo 20
Como criar botes de texto de formulrio Os botes de texto de formulrio so botes padro no estilo dos navegadores, que contm o texto que voc desejar exibir, como Enviar, Redenir, ou Calcular o pedido, por exemplo.
Para criar um boto de texto:
Escolha Inserir > Objeto de formulrio > Boto. Na categoria Formulrios do painel Objetos, clique no cone de Inserir boto.
2
No campo Boto, no inspetor de propriedades, digite um nome para o boto.

Nota: Existem dois nomes reservados: Enviar, que envia os dados do formulrio para processamento, e Redefinir, que redefine todos os campos do formulrio aos seus valores originais.
No campo Denominao, no inspetor de propriedades, digite o texto que deseja que aparea no boto. No campo Ao, siga um dos procedimentos abaixo: processamento quando o boto for clicado.
Selecione a opo Enviar o formulrio, para enviar o formulrio para Selecione a opo Redenir o formulrio, para redenir o formulrio quando o
boto for clicado.
Selecione a opo Nenhuma, para ativar outra ao relacionada ao script de

processamento quando o boto for clicado (para calcular um total, por exemplo). Como criar um boto grfico Enviar possvel criar um boto Enviar mais atraente, utilizando o comando Inserir campo de imagens, para inserir uma imagem em um formulrio. Tambm possvel utilizar botes com aparncia grca para efetuar outras operaes do formulrio, como a sua redenio ou a execuo de um som. A utilizao de uma imagem para efetuar tarefas diferentes do envio de dados requer a anexao de um comportamento ao objeto de formulrio. No painel Comportamentos do Dreamweaver, possvel anexar um comportamento ou afetar o formulrio, utilizando cdigo JavaScript. Para examinar como se deve anexar um comportamento a um objeto, consulte Como anexar um comportamento na pgina 473.
535
Para criar um boto grfico Enviar:
No documento, coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo:
Escolha Inserir > Objeto de formulrio > Campo de imagens. Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
de imagens.
2
No inspetor de propriedades, altere o texto do campo Campo de imagens, para Enviar. No campo Orig, clique no cone de pasta e navegue at a imagem que deseja inserir na pgina. No campo Alt, digite o texto que deseja que aparea no lugar da imagem (nos navegadores somente de texto ou naqueles nos quais o download de imagens feito manualmente).
Sobre a criao de formulrios

possvel utilizar quebras de linha, pargrafo, texto pr-formatado ou tabelas para formatar os formulrios. No possvel inserir um formulrio em outro formulrio (ou seja, no possvel sobrepor os tags), embora seja possvel incluir mais de um formulrio em uma pgina. Quando estiver criando um formulrio, lembre-se de identicar os campos com texto descritivo, para permitir ao usurio identicar o ttulo da pergunta. Por exemplo: Digite o seu nome, para solicitar o nome do usurio. Como adicionar diversos objetos a um formulrio possvel congurar diversos formulrios em um nico documento ou pgina da Web. Certique-se apenas de que os tags do formulrio no se sobreponham.
Para adicionar diversos objetos a um formulrio:
Escolha um objeto no menu Inserir > Objeto de formulrio. Na categoria Formulrios, no painel Objetos, clique no cone correspondente
ao objeto que deseja inserir no formulrio.
2
Especique as propriedades do objeto no inspetor de propriedades (escolha Janela > Propriedades, para exibir o inspetor de propriedades, se este j no estiver aberto).
536
Captulo 20
Como inserir tabelas em formulrios possvel criar formulrios mais atraentes atravs da insero de tabelas. Utilize as tabelas para fornecer uma estrutura para os objetos de formulrio e os identicadores dos campos. As tabelas facilitam o alinhamento das opes, tanto vertical quanto horizontalmente. Ao utilizar as tabelas em formulrios, certiquese de que todos os tags table estejam delimitados por tags form.
Como processar os formulrios

Os formulrios so processados pelo script ou aplicativo especicado no atributo action do tag form. Selecione um formulrio e examine a ao a ele associada no inspetor de propriedades. Os formulrios mais simples utilizam JavaScript ou VBScript para efetuar todo o processamento dos formulrios no cliente (o que evita a necessidade de enviar os dados do formulrio ao servidor para o processamento). Por exemplo: imagine que voc esteja lidando com um pequeno formulrio, situado na parte inferior de uma pgina que contm apenas dois botes de opo, identicados por Sim e No, alm de um boto Enviar. possvel que a ao do formulrio seja uma funo JavaScript, denida na seo head do documento, que exibir um alerta se o usurio selecionar Sim, e outro alerta, se o usurio selecionar No:
funo processForm(){ if (document.forms[0].elements[0].checked){ alert('Sim'); }else{ alert('No'); } }
537
Para poder utilizar uma funo JavaScript do cliente como ao do formulrio:
1 2
Em um formulrio, selecione um boto Enviar. Anexe o comportamento Chamar o JavaScript ao boto. Consulte Chamar o JavaScript na pgina 480. Na caixa de texto JavaScript que aparecer durante a anexao do comportamento, digite processForm(). Adicione uma funo JavaScript processForm() (como a mostrada acima) seo head do documento.
possvel lidar com muitas tarefas de processamento de formulrios utilizando os recursos de criao de scripts do cliente, porm no possvel salvar os dados digitados pelo usurio ou envi-los a terceiros. Para esta nalidade, necessrio utilizar um aplicativo do servidor, como o script Common Gateway Interface (CGI), por exemplo. Os scripts CGI podem ser escritos em Perl, C, Java ou outra linguagem de programao. H diversos sites na Web que oferecem scripts CGI gratuitos para a sua utilizao (consulte Recursos de tecnologias da Web e HTML na pgina 25). possvel modicar estes scripts de acordo com as suas necessidades. Tambm possvel perguntar ao provedor de servios da Internet ou equipe da Web se h qualquer script CGI disponvel que j esteja congurado para a execuo no seu servidor. Para examinar uma introduo criao de scripts CGI, consulte os recursos CGI listados em Recursos de tecnologias da Web e HTML na pgina 25.
Como utilizar os comportamentos com formulrios

possvel anexar comportamentos aos formulrios e objetos de formulrios utilizando qualquer um dos comportamentos que aparecerem no painel Comportamentos quando o formulrio ou objeto de formulrios for selecionado. Os comportamentos Validar o formulrio e Denir o texto do campo de texto estaro disponveis apenas se tiver sido inserido um campo de texto no documento. Ao anexar o comportamento Validar o formulrio a um objeto de formulrio, necessrio especicar o campo de texto que dever ser validado. Por exemplo: se anexar o comportamento Validar o formulrio ao boto Enviar, voc poder especicar um campo de texto criado para Nome, para vericar se o usurio digitou texto no campo Nome. Ao aplicar comportamentos, necessrio se assegurar que todos os objetos do formulrio no documento tenham um nome exclusivo. Se for utilizado o mesmo nome para dois objetos diferentes, possvel que os comportamentos no funcionem adequadamente mesmo se os objetos estiverem em formulrios diferentes.
538
Captulo 20
Os dois comportamentos especcos aos formulrios so explicados abaixo. Para obter informaes sobre outros comportamentos, consulte Como utilizar os comportamentos na pgina 469.
Validar o formulrio
verica o contedo de determinados campos de texto, a m de garantir que o usurio tenha digitado o tipo correto de dados. Consulte Validar o formulrio na pgina 506.
Definir o texto do campo de texto substitui o contedo de um campo de texto pelo
contedo especicado. Consulte Denir o texto do campo de texto na pgina 500.
539
540
Captulo 20
21
CAPTULO 21
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como testar e publicar um site
Antes de carregar o site em um servidor e declar-lo pronto para a exibio, recomendvel test-lo localmente. De fato, recomendvel testar e reparar o site com freqncia durante a sua construo. Desta forma, possvel descobrir problemas logo e evitar que eles se repitam. Certique-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 reparar o site inteiro atravs da execuo de um relatrio de site, antes de public-lo. As seguintes diretrizes o auxiliaro a criar uma experincia agradvel aos visitantes do seu site:
Certique-se de que as pginas funcionem conforme o esperado nos

navegadores de destino e de que elas no apresentem muitos problemas nos outros navegadores. As pginas devero ser legveis e funcionais nos navegadores que no oferecerem suporte aos estilos, camadas, plug-ins ou ao JavaScript. Consulte Como vericar a compatibilidade com o navegador na pgina 542. No caso das pginas que funcionarem muito mal nos navegadores mais antigos, considere a possibilidade de utilizar o comportamento Vericar o navegador, para redirecionar os visitantes automaticamente at uma outra pgina. Consulte Vericar o navegador na pgina 482.
Visualize as pginas no maior nmero possvel de navegadores e plataformas

diferentes. Este procedimento possibilitar a observao de diferenas no layout, cores, tamanhos de fonte e tamanho padro de janelas do navegador, que no podem ser previstos em uma vericao de navegador de destino. Consulte Como visualizar nos navegadores na pgina 544.
541
Verique o site quanto a possveis links rompidos (e ajuste-os). Como os outros

sites tambm sofrem reformas e reorganizaes, a pgina qual est vinculando o seu site pode ter sido transferida ou excluda. Para obter uma lista simples de links a sites externos, possvel executar uma vericao de links. Uma outra alternativa executar um relatrio no site inteiro, que verica os links externos incorretos e produz um relatrio sobre eles. Consulte Como vericar links numa pgina ou site na pgina 546, Como abrir documentos vinculados no Dreamweaver na pgina 549 ou Como criar relatrios na pgina 550.
Monitore o tamanho das pginas e o tempo do seu download. Lembre-se que as

pginas que consistem de uma tabela grande sero visualizadas pelos visitantes somente aps o trmino da descarga da tabela inteira. Leve em considerao a possibilidade de desmembrar tabelas grandes; se isto no for possvel, considere, ento, colocar um contedo pequeno como uma mensagem de boas-vindas ou uma faixa de propaganda fora da tabela, no alto da pgina, para que os visitantes possam visualizar esse material enquanto for feito o download da tabela. Consulte Como vericar o tempo e o tamanho do download na pgina 549. Para obter mais informaes sobre a utilizao de comportamentos de camadas para cobrir a tela enquanto uma pgina for carregada, consulte Mostrar/ocultar as camadas na pgina 501.
Execute alguns relatrios de site para testar e reparar o site inteiro. possvel
vericar o seu site inteiro quanto a problemas, como, por exemplo, documentos sem ttulos, tags vazios e tags redundantes aninhados. A execuo destes relatrios antes da publicao do site garantir o surgimento de menos problemas mais tarde. Consulte Como criar relatrios na pgina 550.
A publicao do site, lanando-o e tornando-o ativo, pode ser alcanada de

vrias maneiras e um processo contnuo. Depois que a maior parte do site tiver sido publicado, voc e a sua equipe continuaro a atualiz-lo e mant-lo. A denio e implementao de um sistema de controle de verso um processo importante, tanto com as ferramentas do Dreamweaver quanto com um aplicativo externo de controle de verso.
Utilize os fruns de discusso do Macromedia Dreamweaver, que se encontram

no site da Macromedia na Web. Eles so um recurso muito til na obteno de informaes sobre diversos navegadores, plataformas e assim por diante.
Como verificar a compatibilidade com o navegador

O Dreamweaver permite a construo de pginas da Web com elementos que contam com o suporte de todos os navegadores (imagens e texto de pargrafo, por exemplo), assim como elementos que contam apenas com o suporte dos navegadores mais modernos (estilos e camadas, por exemplo).
542
Captulo 21
O recurso Vericar os navegadores de destino testa o HTML nos documentos, a m de vericar se algum tag ou atributo no conta com o suporte dos navegadores de destino. A vericao no altera qualquer aspecto do documento. O recurso Vericar os navegadores de destino utiliza arquivos de texto, denominados pers de navegadores, a m de determinar os tags aceitos por navegadores especcos. O Dreamweaver inclui pers predenidos para as verses 2.0, 3.0 e 4.0 do Netscape Navigator e para as verses 2.0, 3.0, 4.0 e 5.0 do Internet Explorer. Para modicar os pers existentes ou criar novos pers, consulte Como criar e editar os pers de navegadores na pgina 573. possvel executar uma vericao de navegador de destino em um documento, diretrio ou no site inteiro. Observe que esse procedimento no verica os scripts no site.
Para executar uma verificao de navegador de destino:
Escolha dentre as seguintes opes: realizada na ltima verso salva do arquivo e inclui apenas as alteraes que tiverem sido salvas.
Para executar a vericao no documento, salve o arquivo. A vericao Para executar a vericao em um diretrio ou site, escolha Janela > Arquivos
do site, para abrir a janela FTP do site; em seguida, selecione uma pasta no diretrio local. A vericao do navegador de destino ser efetuada em todos os arquivos HTML contidos nessa pasta e em suas subpastas. As vericaes do navegador de destino podem ser efetuadas apenas nos arquivos locais.
2
Escolha Arquivo > Vericar os navegadores de destino. Se ainda no tiver selecionado um navegador primrio, voc ser solicitado a faz-lo.
Na lista de navegadores, selecione o navegador de destino com que deseja vericar o site. Clique em Efetuar a vericao. O relatrio do navegador de destino ser aberto no navegador primrio (que ser iniciado, se j no estiver aberto).
Para salvar o relatrio para referncia futura, escolha Arquivo > Salvar, no navegador.
Nota: Como o relatrio do navegador de destino um arquivo temporrio, ele ser perdido se no for salvo antes da visita a outro site.
543
Como utilizar os comportamentos para detectar os navegadores e plug-ins

Os comportamentos podem ser utilizados para determinar qual navegador os visitantes do site esto utilizando e se dispem de um plug-in instalado. Para obter mais informaes sobre os comportamentos, consulte Como utilizar os comportamentos na pgina 469.
Verificar o navegador envia os visitantes a outras pginas, dependendo da marca e verso do 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 (IE) ou por mant-los na mesma pgina, caso estiverem utilizando qualquer outro navegador. Consulte Vericar o navegador na pgina 482. Verificar o plug-in envia 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 Macromedia Shockwave, ou para outra pgina, se no o tiverem. Consulte Vericar o plug-in na pgina 483.
Como visualizar nos navegadores

recomendvel testar as pginas visualizando-as freqentemente em navegadores durante o projeto e o processo de criao da Web. Utilizando esta estratgia, possvel encontrar erros mais cedo, no copiando-os ou repetindo-os. possvel visualizar documentos nos navegadores de destino a qualquer momento. No necessrio ter salvo o documento. Todas as funes relacionadas aos navegadores estaro funcionando, inclusive os comportamentos JavaScript, links relativos a documentos e absolutos, controles ActiveX e plug-ins da Netscape, contanto que os plug-ins ou controles ActiveX necessrios estejam instalados. Os contedos vinculados aos caminhos relativos raiz no aparecero quando os documentos forem visualizados em um navegador local. Isso ocorre porque os navegadores no reconhecem as razes dos sites, mas os servidores o fazem. Para visualizar o contedo vinculado aos caminhos relativos raiz, coloque o arquivo em um servidor remoto e exiba-o nesse local. Para obter mais informaes, consulte Caminhos relativos raiz na pgina 388. possvel denir at 20 navegadores para a visualizao. Todos os navegadores denidos aparecero no menu Visualizar no navegador. recomendvel visualizar nos seguintes navegadores: IE 3.0 ou 4.0; Netscape 3.0 e 4.0, e pelo menos um navegador somente texto, como o Lynx.
544
Captulo 21
Para visualizar o documento num navegador, siga um dos procedimentos abaixo:
Escolha Arquivo > Visualizar no navegador e, em seguida, escolha um dos

navegadores listados.
1
Se ainda no tiver selecionado um navegador, escolha Editar > Preferncias > Visualizar no navegador, para selecionar um navegador.
Pressione a tecla F12, para exibir o documento no navegador primrio. Pressione as teclas Control e F12 (no Windows), ou Command e F12 (no
Macintosh), para exibir o documento no navegador secundrio.
Para alterar o navegador primrio ou definir um navegador secundrio:
Escolha Arquivo > Visualizar no navegador > Editar a lista de navegadores, ou Editar > Preferncias e selecione a guia Visualizar no navegador. Dena as preferncias de visualizao como preferir.
Como definir as preferncias de visualizao no navegador As preferncias de visualizao no navegador exibem os navegadores primrio e secundrio que estiverem denidos. Para abrir as preferncias de visualizao no navegador, escolha Editar > Preferncias, e selecione Visualizar no navegador, ou Arquivo > Visualizar no navegador > Editar a lista de navegadores.
Visualizar utilizando o servidor local (apenas no Windows) permite escolher se ser
utilizado um servidor local ao visualizar uma pgina em um navegador. Para que esta opo funcione, necessrio que haja um software de servidor em execuo no computador local. Quando esta opo for selecionada, o Dreamweaver fornecer a pgina para a visualizao por um servidor local, como uma URL iniciada por http://localhost/. Quando esta opo estiver desativada, o Dreamweaver abrir o documento em um navegador com um caminho de arquivo iniciado por le://. Em alguns casos, os links especicados como caminhos relativos raiz no funcionaro adequadamente quando abertos em um navegador com o caminho do tipo le://. Isto tambm acontece quando se executa uma vericao de navegador de destino. Consulte Como visualizar nos navegadores na pgina 544.
O boto de adio (+) adiciona
um navegador lista. da lista o navegador selecionado.
O boto de subtrao () exclui Editar altera
as denies do navegador selecionado.
Navegador primrio e Navegador secundrio especicam
se o o navegador selecionado o navegador primrio ou o secundrio. A tecla F12 abre o navegador primrio. As teclas Control e F12 (no Windows), ou Command e F12 (no Macintosh), abrem o navegador secundrio.
545
Como testar os links atravs da visualizao em um navegador Como os links no esto ativos na janela do documento, necessrio veric-los e test-los atravs da visualizao das pginas no navegador. Por exemplo: verique os links s imagens, arquivos de udio e vdeo e assim por diante.
Para testar os links em um navegador:
1 2
Escolha Arquivo > Visualizar no navegador, ou pressione a tecla F12. Clique nos links ativos, para vericar se o link est funcionando corretamente.
Como verificar links numa pgina ou site

A correo dos links rompidos (aqueles que no mais seguem um caminho vlido ou indicam arquivos inexistentes) em um site grande pode ser um problema entediante e consumir muito tempo. Isto se deve ao fato de um grande site poder conter centenas de links a documentos internos e externos e de que os links podem ser alterados ao longo do tempo. Os arquivos rfos (arquivos que ainda existem no site, mas no esto mais vinculados a qualquer arquivo no site) podem ser um problema, tambm, pois eles podem ocupar espao em disco e confundir outros membros da equipe que estiverem trabalhando no site. Utilize o recurso Vericar os links, para procurar links que tenham sido rompidos e arquivos sem referncias em um arquivo aberto, em uma parte do site ou no site local inteiro. O Dreamweaver vericar apenas os links e referncias aos documentos dentro do site e compilar uma lista de links externos que aparecem no documento ou documentos selecionados, porm no os vericar. Quando o Dreamweaver terminar de vericar os links nos arquivos especicados, ele abrir a caixa de dilogo Vericador de links. Essa caixa de dilogo exibir uma lista de links rompidos, links externos (impossveis de serem vericados pelo Dreamweaver, por estarem fora do site) e arquivos rfos. Para obter mais informaes, consulte Como abrir documentos vinculados no Dreamweaver na pgina 549.
Para verificar os links no documento:
1 2
Salve o arquivo em uma parte de um site local. Escolha Arquivo > Vericar os links.
Para verificar os links em uma parte de um site local:
1 2
Escolha Janela > Arquivos do site, para abrir a janela do site. Escolha um site no menu pop-up Sites.
546
Captulo 21
Na visualizao da pasta local, selecione os arquivos ou pastas a serem vericados. Inicie a vericao, utilizando um dos seguintes mtodos: tecla Control pressionada (no Macintosh) e, no menu contextual, escolha Vericar os links > Arquivos/pastas selecionadas.
Clique com o boto direito do mouse (no Windows), ou clique mantendo a Escolha Arquivo > Vericar os links.
5
Selecione um determinado relatrio de link no menu pop-up Mostrar. As suas escolhas so Links rompidos, Links externos e Arquivos rfos. S possvel vericar Arquivos rfos, quando se verica os links no site completo.
Uma lista de arquivos que se adequam ao tipo de relatrio selecionado aparecer na caixa de dilogo Vericador de links.
Para verificar os links no site inteiro:
Escolha Site > Vericar os links no site inteiro. Aparecer a caixa de dilogo Vericador de links. Selecione um determinado relatrio de link no menu pop-up Mostrar. As suas escolhas so Links rompidos, Links externos e Arquivos rfos. Uma lista de arquivos que se adequam ao tipo de relatrio selecionado aparecer na caixa de dilogo Vericador de links.
Nota: Se selecionar Arquivos rfos como tipo de relatrio, possvel exclui-los diretamente da caixa de dilogo Verificador de links, selecionando um arquivo da lista e pressionando a tecla Delete. Para salvar o relatrio inteiro como um arquivo de texto delimitado por tabulaes:
Clique em Salvar. Como ajustar os links rompidos Quando voc vericar os links no Dreamweaver, ser exibida a caixa de dilogo Vericador de links, que apresentar um relatrio de links rompidos, externos e quando selecionado, vericar o site inteiro quanto a arquivos rfos. possvel ajustar os links e referncias a imagens que tiverem sido rompidos diretamente na caixa de dilogo Vericador de links, ou abrir os arquivos da lista e ajustar os links no inspetor de propriedades.
547
Para ajustar os links na caixa de dilogo Verificador de links:
Selecione o link rompido na coluna Links rompidos da caixa de dilogo Vericador de links. Aparecer um cone de pasta ao lado do link rompido. Clique no cone correspondente pasta, para procurar o arquivo, ou digite o caminho correto e o nome do arquivo. Pressione a tecla de tabulao ou Enter. 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 Sim, para que o Dreamweaver atualize todos os documentos da lista que zerem referncia a este arquivo. Clique em No, para que o Dreamweaver atualize apenas a referncia atual.
Nota: Se a opo 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 advertncia e manter inalteradas as referncias rompidas. Consulte Como utilizar as opes de devoluo e retirada de arquivos na pgina 139. Para ajustar os links no inspetor de propriedades:
Clique duas vezes em uma entrada da coluna Arquivo, na caixa de dilogo Vericador de links. O Dreamweaver abrir o documento, selecionar a imagem ou link com problema, e realar o caminho e o nome do arquivo no inspetor de propriedades. Caso o inspetor de propriedades no esteja visvel, escolha Janela > Propriedades, para abri-lo.
Sobrescreva o texto realado, a m de criar um novo caminho e nome de arquivo, ou clique no cone correspondente pasta, para procurar o arquivo. Se estiver atualizando a referncia de uma imagem e a nova imagem aparecer com o tamanho incorreto, clique nos identicadores L e U, no inspetor de propriedades, ou clique no boto Atualizar, para redenir os valores relativos altura e largura. Os identicadores L e U passaro, de negrito, ao tipo normal.
Salve o arquivo.
medida que os links forem ajustados, suas entradas desaparecero da lista Links rompidos. A permanncia de uma entrada na lista aps a digitao do novo caminho e nome de arquivo no Vericador de links (ou aps o salvamento das alteraes feitas no inspetor de propriedades) indica que o Dreamweaver no conseguiu localizar o novo arquivo. O link ainda ser considerado como rompido.
548
Captulo 21
Como abrir documentos vinculados no Dreamweaver Os links no esto ativos dentro do 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 Modicar > Abrir a pgina vinculada. Pressione a tecla Control (no Windows), ou Command (no Macintosh), e
clique duas vezes no link.
Nota: necessrio que o documento vinculado resida no disco local.
Como verificar o tempo e o tamanho do download

O tamanho da pgina atual e o tempo estimado do download da mesma aparecero na parte inferior da janela do documento. O Dreamweaver calcular o tamanho com base no contedo da pgina toda, o que inclui todos os objetos vinculados, como imagens e plug-ins. O Dreamweaver estimar o tempo de download com base na velocidade de conexo digitada nas preferncias da barra de status. O tempo do download varivel e depende das condies gerais da Internet. Uma boa diretriz a ser seguida na vericao 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 2
Escolha Editar > Preferncias e, em seguida, clique em Barra de status. Escolha uma velocidade de conexo com a qual deseja calcular o tempo do download. A velocidade mdia de conexo nos Estados Unidos 28,8. Se o seu projeto destinar-se a uma intranet, considere a escolha de 1500 (velocidade T1).
549
Como utilizar os relatrios para testar um site

Ao testar o site, possvel compilar e gerar relatrios relativos a vrios atributos HTML, utilizando o comando Relatrios. Este comando permite vericar os links externos, tags combinveis de fontes aninhadas, texto alternativo ausente, tags aninhados redundantes, tags vazios removveis e documentos sem ttulo. possvel testar e reparar documentos selecionados ou um site inteiro para estes problemas de HTML antes de publicar o site. Depois que um relatrio for compilado, possvel salv-lo como um arquivo XML e import-lo para um arquivo existente de modelo. possvel importar ento o arquivo de modelo para um banco de dados ou planilha, e imprimi-lo ou exibi-lo no site da Web. possvel adicionar tambm diversos tipos de relatrios ao Dreamweaver, atravs do site de intercmbio da Macromedia na Web. Consulte Como adicionar extenses ao Dreamweaver na pgina 98. Para utilizar o comando Relatrios para trabalhar com o sistema de devolues e retiradas e com as Design Notes, consulte Como utilizar os relatrios para melhorar o uxo de trabalho na pgina 149. Como criar relatrios possvel executar vrios tipos de relatrios em documentos, pastas e sites, organizar os resultados e obter detalhes adicionais sobre os resultados selecionados.
Para criar um relatrio:
Escolha Site > Relatrios. Aparecer a caixa de dilogo Relatrios.
550
Captulo 21
Escolha uma categoria de relatrio no menu pop-up Relatrio. As opes de relatrio so: Documento atual, Todo o site local, Arquivos selecionados do site e Pasta. No possvel executar um relatrio Arquivos selecionados do site, exceto se j tiver selecionado os arquivos na janela do site.
Selecione um tipo de relatrio, clicando na caixa apropriada. possvel selecionar um relatrio ou selecionar vrios para serem executados simultaneamente.
Os tags combinveis de fontes aninhadas criam um relatrio que lista todos os

tags de fontes aninhadas que podem ser combinados para limpar o cdigo. Por exemplo: ser relatado <font color="#FF0000"><font size="4">STOP!</font></ font>.
Texto alternativo ausente cria um relatrio que lista todos os tags
img que no possuem texto alternativo. Texto alternativo aparece no lugar da imagem para os navegadores somente de texto ou para os navegadores que tiverem sido denidos para o download manual de imagens.
Tags aninhados redundantes cria um relatrio que detalha os tags aninhados

que devem ser limpos. Por exemplo: a frase <i> rei de Roma</i> seria relatada.
O rato <i> roeu</i> a roupa do
Tags vazios removveis cria um relatrio que detalha todos os tags vazios que
podem ser removveis, para limpar o cdigo HTML. Por exemplo: possvel que um item ou imagem na visualizao de cdigo tenha sido excludo, mas os tags que se aplicam a ele ou ela, no.
Documentos sem ttulo cria um relatrio que lista todos os documentos sem
ttulo encontrados dentro dos parmetros selecionados. Sero relacionados os documentos com ttulos padro, ttulos duplicados ou tags de ttulos ausentes.
4
Clique em Executar, para criar o relatrio. Dependendo do que escolher para relatar, voc precisar salvar o arquivo, denir o site ou selecionar uma pasta (se ainda no o tiver feito).
Ser exibida uma lista de resultados na janela de resultados. Para organizar os resultados, clique no cabealho da coluna de acordo com a qual deseja ordenar. possvel ordenar pelo nome do arquivo, nmero da linha ou descrio. Tambm possvel executar vrios relatrios diferentes e manter as diversas janelas de resultados abertas.
6 7
Selecione um resultado especco, para examinar uma descrio detalhada. Clique em Abrir o arquivo, para ir at o item selecionado na janela do documento. Tambm possvel clicar duas vezes em um resultado, para abrir o arquivo na janela do documento.
551
Clique em Salvar o relatrio, para salvar o relatrio como um arquivo XML. Os relatrios so salvos como arquivos XML e podem ser importados para arquivos existentes de modelo. possvel importar, ento, o arquivo para um banco de dados ou planilha, e imprimi-lo ou exibi-lo em um site da Web.
Sugesto: Depois de executar os relatrios HTML, utilize o comando Limpar o HTML, para corrigir quaisquer erros de HTML que tiverem sido listados pelos relatrios.
552
Captulo 21
22
CAPTULO 22
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como personalizar o Dreamweaver
O Macromedia Dreamweaver pode ser personalizado de vrios modos, permitindo que voc trabalhe da maneira que lhe for mais familiar, confortvel e eciente. O texto seguinte abrange alguns modos de personalizar o Dreamweaver:
Dena as preferncias para todos os itens, desde os esquemas de cores e realce s

conguraes do site e navegadores. Consulte Como denir as preferncias na pgina 92.
Altere os atalhos de teclado. Para alterar os atalhos utilizando uma interface

grca no Dreamweaver, consulte Como utilizar o editor de atalhos de teclado na pgina 95. Se preferir editar um arquivo de texto para alterar os atalhos de teclado, consulte Como alterar os atalhos de teclado na pgina 561.
Adicione extenses de outros fabricantes. Consulte Como adicionar extenses

ao Dreamweaver na pgina 98.
Reorganize os objetos no painel Objetos, para que aqueles utilizados com mais
freqncia estejam sempre visveis, crie novas categorias para reorganizar os objetos ou adicionar novos. Consulte Como modicar o painel Objetos na pgina 555.
Modique os nomes dos itens de menu, adicione novos comandos e remova os

j existentes dos menus. Consulte Sobre a personalizao dos menus do Dreamweaver na pgina 557.
Edite o perl de formatao de origem, para obter um controle mais preciso

sobre o HTML criado pelo Dreamweaver. O arquivo SourceFormat.txt inclui todas as denies das preferncias de formato HTML e muitas outras informaes. Consulte Como alterar a formatao HTML padro na pgina 569.
553
Altere a maneira como os tags de outros fabricantes (como ASP e ColdFusion)

aparecem na visualizao do projeto da janela do documento. Consulte Como personalizar a interpretao dos tags de outros fabricantes na pgina 576.
Crie os seus comandos e painis utuantes usando JavaScript. Consulte Como

estender os recursos do Dreamweaver: Princpios bsicos na pgina 575.
Como alterar o tipo de arquivo padro

Como padro, o Dreamweaver mostra todos os tipos de arquivos que reconhece na caixa de dilogo Arquivo > Abrir. Pode ser utilizado um menu pop-up na caixa de dilogo, para limitar a exibio a determinados tipos de arquivos. Se a maior parte do trabalho envolver um tipo de arquivo especco (como os arquivos ASP), a exibio padro poder ser alterada. Qualquer tipo de arquivo que esteja na primeira linha do arquivo Extensions.txt do Dreamweaver ser tornado o padro.
Nota: Para ver todos os tipos de arquivo na caixa de dilogo Arquivo > Abrir, at mesmo aqueles que o Dreamweaver no pode abrir, selecione Todos os arquivos (*.*). Esta opo diferente de Todos os documentos, que mostra apenas os arquivos que o Dreamweaver pode abrir. Para alterar o tipo de arquivo padro do Dreamweaver, aberto segundo a opo Arquivo > Abrir:
1 2 3
Faa uma cpia de segurana do arquivo Extensions.txt na pasta Conguration. Abra o arquivo Extensions.txt no Dreamweaver ou em um editor de texto. Recorte a linha correspondente ao novo padro e cole-a no incio do arquivo, para que seja a primeira linha. Salve o arquivo, saia do Dreamweaver e reinicie-o. Para ver o novo padro, selecione Arquivo > Abrir e veja o menu pop-up de tipos de arquivos.
Para adicionar novos tipos de arquivos ao menu na caixa de dilogo Arquivo > Abrir:
1 2 3
Faa uma cpia de segurana do arquivo Extensions.txt na pasta Conguration. Abra o arquivo Extensions.txt no Dreamweaver ou em um editor de texto. Adicione uma linha para cada novo tipo de arquivo. Em caixa alta, digite as extenses de nome de arquivo que o novo tipo de arquivo pode ter, separadas por vrgulas; em seguida, adicione dois pontos e uma frase descritiva curta para ser mostrada na caixa de dilogo Arquivo > Abrir. Por exemplo: para os arquivos JPEG, digite
Arquivos de imagem JPG,JPEG,JFIF:JPEG
554
Captulo 22
Salve o arquivo, saia do Dreamweaver e reinicie-o. Para ver as alteraes, selecione Arquivo > Abrir e clique no menu pop-up de tipos de arquivos.
Como modificar o painel Objetos

Como padro, o painel Objetos dividido em vrias categorias: Caracteres, Comuns, Formulrios, Molduras, Cabealhos, Invisveis e Especial. Para obter informaes sobre os objetos nessas categorias, consulte Como utilizar o painel Objetos na pgina 82. As categorias correspondem s pastas contidas na pasta Conguration/Objects, dentro da pasta do aplicativo do Dreamweaver. Voc pode mover objetos de uma categoria para outra, renomear painis e remover objetos de um painel. Para que as alteraes apaream no painel Objetos, saia do Dreamweaver e reinicie-o, ou recarregue as extenses. Para cada objeto em uma categoria no painel Objetos, h dois ou trs arquivos na pasta correspondente:
Um arquivo GIF que contm um cone correspondente ao objeto Um arquivo HTML que contm o HTML a ser inserido no seu arquivo ou um
formulrio HTML que permite especicar os dados a serem includos (por exemplo: o texto de um comentrio)
Um arquivo JavaScript (opcional) que gera o HTML a ser includo no

seu arquivo
Para mover um objeto de uma categoria no painel Objetos para outra:
Mova todos os arquivos do objeto (os arquivos GIF, HTML e JavaScript, se houver algum) de uma pasta para outra, dentro da pasta Conguration/Objects.
Para renomear uma categoria no painel Objetos:
Renomeie a pasta correspondente, contida em Conguration/Objects.

Para remover um objeto do painel Objetos:
Mova os arquivos HTML, GIF e JavaScript correspondentes ao objeto para fora da pasta Conguration/Objects. possvel excluir totalmente esses arquivos, se tiver certeza de que deseja remover o objeto, mas conveniente manter uma cpia de segurana para o caso de precisar restaurar o objeto posteriormente.
Para recarregar as extenses:
Pressione a tecla Control e clique (no Windows), ou pressione a tecla Option e clique (no Macintosh) no menu pop-up de categorias, no alto do painel Objetos. Escolha Recarregar as extenses.
555
Como criar um objeto simples

O usurio pode criar objetos para adicion-los ao painel Objetos. Muitos objetos simples no necessitam de JavaScript, eles contm apenas o cdigo-fonte HTML que ser includo no documento. (Para obter informaes bsicas sobre a criao de objetos mais complexos utilizando a linguagem JavaScript, consulte Como estender os recursos do Dreamweaver: Princpios bsicos na pgina 575. Aps a criao de um objeto, ele pode ser transformado em um pacote e distribudo no site de intercmbio da Macromedia, se voc quiser que outros usurios do Dreamweaver o utilizem. Para obter mais informaes, consulte o site de intercmbio da Macromedia para o Dreamweaver. Para transformar uma extenso em pacote, necessrio primeiramente efetuar o download do instalador Package Manager naquele site e, em seguida, instalar o aplicativo com a opo de programador.
Para criar um objeto simples:
Crie um novo documento em branco em um editor de texto (por exemplo: BBEdit ou HomeSite).
Nota: O novo documento em branco, criado no Dreamweaver, contm vrios tags HTML padro (html, head e body, por exemplo). Se desejar utilizar um dos editores de cdigo do Dreamweaver (a visualizao de cdigo da janela do documento ou o inspetor de cdigo) como editor de texto para criar um objeto simples, necessrio primeiramente excluir todos os tags padro que aparecerem no editor de cdigo quando o documento for criado.
Adicione os tags que este objeto deve inserir nos documentos. Por exemplo, digite:
<p> © 2000 Z Productions, Inc.<BR> Todos os direitos reservados </p>
Salve o arquivo. Para que o novo objeto aparea em uma das categorias existentes no painel Objetos, salve-o em uma das subpastas da pasta Objects. Para criar uma nova categoria, crie uma subpasta na pasta Conguration/Objects e salve o arquivo nesse local. As pastas adicionais contidas em qualquer subpasta de categoria (como as pastas criadas na subpasta Caracteres) sero ignoradas.
Em um programa grco ou de edio de imagens (como o Macromedia Fireworks), crie uma imagem GIF com 18 x 18 pixels, que corresponder ao cone do objeto no painel Objetos. Se a imagem criada for maior, o Dreamweaver a redimensionar automaticamente para 18 x 18 pixels. Caso no seja criado um cone para o objeto, o Dreamweaver inserir um cone de objeto genrico no painel Objetos.
556
Captulo 22
D ao cone o mesmo nome de arquivo que o do arquivo do objeto, mas utilize a extenso .gif, e salve-o no diretrio em que estiver o arquivo do objeto. Por exemplo: se o objeto se chamar Copyright_Z.htm e tiver sido salvo no diretrio Comum, denomine o cone Copyright_Z.gif e salve esse arquivo no mesmo diretrio.
Reinicie o Dreamweaver ou recarregue as extenses, para utilizar o novo objeto. O objeto aparecer na parte inferior do menu Inserir e tambm no painel Objetos. Para obter informaes sobre recarga de extenses, consulte Como modicar o painel Objetos na pgina 555.
Sobre a personalizao dos menus do Dreamweaver

O Dreamweaver cria todos os menus com a estrutura denida em um arquivo XML, denominado menus.xml e situado na subpasta Conguration/Menus, dentro da pasta do aplicativo do Dreamweaver. A edio desse arquivo modicar os menus do Dreamweaver na prxima vez que o programa for iniciado. Para obter informaes bsicas sobre o XML, consulte Sobre o XML na pgina 427. Ao editar o arquivo menus.xml, possvel adicionar, alterar e remover atalhos de teclado para os itens de menu , embora em muitos casos seja mais fcil fazer isso utilizando o editor de atalhos de teclado. Consulte Como utilizar o editor de atalhos de teclado na pgina 95. Os itens de menu tambm podem ser reordenados, renomeados e removidos. Se o menus.xml for aberto em um editor de XML, podero ser mostradas mensagens de erro relativas aos e comerciais (&), contidos nesse arquivo. melhor editar o arquivo menus.xml em um editor de texto comum. No o edite no Dreamweaver.
Nota: Sempre faa uma cpia de segurana do arquivo menus.xml em uso ou de qualquer arquivo de configurao do Dreamweaver, antes de modific-lo. fcil cometer erros ao editar o arquivo de configurao de menus e, no Dreamweaver, no h qualquer modo de reverter ao conjunto anterior de menus, que no seja a substituio do arquivo menus.xml. Caso voc esquea de fazer uma cpia de segurana, a pasta Configuration contm uma cpia do arquivo menus.xml padro, denominada menus.bak. Para reverter ao conjunto de menus padro, substitua o menus.xml por uma cpia do menus.bak.
557
Como modificar o menu Comandos Determinados tipos de comandos podem ser adicionados ao menu Comandos, alterando os seus nomes, sem editar o arquivo menus.xml.
Nota: O termo comando tem dois significados no Dreamweaver. No sentido estrito, um comando um determinado tipo de extenso. Contudo, em determinados contextos, a palavra comando utilizada como sinnimo de item de menu significando qualquer item que aparea em um menu do Dreamweaver, sem levar em conta a sua funo ou como implementado.
Para criar novos comandos que so colocados automaticamente no menu Comandos, utilize o painel Histrico (consulte Como criar novos comandos a partir das etapas do histrico na pgina 173). Pode-se usar tambm o Package Manager para instalar as novas extenses, inclusive os comandos; consulte Como adicionar extenses ao Dreamweaver na pgina 98. Para reordenar os itens no menu Comandos, ou para mover os comandos entre os menus, o arquivo menus.xml deve ser editado.
Para renomear um comando que voc criou:
Escolha Comandos > Editar a lista de comandos. Aparece uma caixa de dilogo com uma lista de todos os comandos cujos nomes podem ser alterados. Os comandos que esto no menu Comandos padro no aparecero nessa lista e no podero ser editados atravs desse procedimento.
2 3 4
Selecione um comando a ser renomeado. Digite um novo nome. Clique em Fechar. O comando aparecer renomeado no menu Comandos.
Para excluir um comando que voc criou:
Escolha Comandos > Editar a lista de comandos. Aparece uma caixa de dilogo com uma lista de todos os comandos que podem ser excludos. Os comandos que esto no menu Comandos padro no aparecero nessa lista e no podero ser excludos atravs desse procedimento.
Selecione um comando a ser excludo.
558
Captulo 22
Clique em Excluir, em seguida, conrme a remoo do comando. O comando ser excludo. Observe que tambm foi excludo o arquivo que contm o cdigo para o comando; a excluso de um comando no remove apenas um item do menu. Certique-se de que deseja realmente excluir o comando, antes de utilizar esse procedimento. Se voc quiser remover um item do menu Comandos sem excluir o arquivo, procure o arquivo em Conguration/Commands e mova-o para outra pasta.
Clique em Fechar.
Como reorganizar os menus e os itens de menus Ao editar o arquivo menus.xml, possvel mover os itens em um menu ou de um menu para outro, adicionar ou remover separadores dos menus, bem como mover menus em uma barra de menus ou at mesmo de uma barra para outra. Observe que os itens podem ser inseridos ou removidos dos menus contextuais, utilizando o mesmo procedimento empregado para outros menus. Para obter informaes sobre a sintaxe do arquivo menus.xml, consulte Sobre a sintaxe dos tags do menus.xml na pgina 562.
Para mover um item de menu:
1 2 3
Saia do Dreamweaver. Faa uma cpia de segurana do arquivo menus.xml. Abra o arquivo menus.xml em um editor de texto (BBEdit, HomeSite ou Wordpad, por exemplo). No o abra no Dreamweaver. Recorte um tag menuitem inteiro, de <menuitem, no incio, at /> , no nal. Coloque o ponto de insero no novo local para o item de menu. Verique se ele est entre um tag <menu> e seu correspondente </menu>. Cole o item de menu nesse novo local.
4 5
Para criar um submenu ao mover um item de menu:
Coloque o ponto de insero dentro de um menu (em alguma posio entre um tag<menu> e seu correspondente </menu>). Insira um novo par <menu></menu> no menu. Adicione novos itens de menu a este submenu.
2 3
Para inserir um separador entre dois itens de menu:
Digite <separator / entre os dois tags menuitem>.
559
Para remover um separador existente:
Exclua a linha <separator

Para mover um menu:
/>
correspondente.
1 2 3
Saia do Dreamweaver. Faa uma cpia de segurana do arquivo menus.xml. Abra o arquivo menus.xml em um editor de texto (BBEdit, HomeSite ou Wordpad, por exemplo). No o abra no Dreamweaver. Recorte o menu inteiro e seu contedo, a partir do tag de abertura <menu> at o de nalizao </menu>. Coloque o ponto de insero no novo local para o menu. Verique se ele est entre um tag <menubar> e seu correspondente </menubar>. Cole o menu nessa nova posio.
Como alterar o nome do menu ou de um item de menu O nome do menu ou de um item de menu pode ser facilmente alterado, editando o arquivo menus.xml. Para obter informaes sobre a sintaxe do arquivo menus.xml, consulte Sobre a sintaxe dos tags do menus.xml na pgina 562.
Para alterar o nome do menu ou de um item de menu:
1 2 3
Saia do Dreamweaver. Faa uma cpia de segurana do arquivo menus.xml. Abra o arquivo menus.xml em um editor de texto, como HomeSite, BBEdit ou Wordpad (no o abra no Dreamweaver). Se for modicado um item de menu, localize o tag menuitem adequado e altere o valor do atributo name correspondente. Se for modicado um menu, localize o tag menu adequado e altere o valor do atributo name correspondente.
Nota: Em ambos os casos, no altere o atributo id.
Salve e feche o menus.xml, em seguida, reinicie o Dreamweaver para ver as suas alteraes.
560
Captulo 22
Como alterar os atalhos de teclado Se os atalhos de teclado padro no forem convenientes, voc poder alterar ou remover os j existentes, ou adicionar novos. O modo mais fcil de fazer isso utilizar o editor de atalhos de teclado (consulte Como utilizar o editor de atalhos de teclado na pgina 95). Contudo, se preferir, poder tambm modicar os atalhos de teclado diretamente no arquivo menus.xml, embora seja muito mais fcil cometer erros ao digitar atalhos no menus.xml do que no editor de atalhos de teclado. Para obter informaes sobre a sintaxe do arquivo menus.xml, consulte Sobre a sintaxe dos tags do menus.xml na pgina 562.
Para alterar um atalho de teclado:
1 2 3
Saia do Dreamweaver. Faa uma cpia de segurana do arquivo menus.xml. Abra o arquivo menus.xml em um editor de texto (BBEdit, HomeSite ou Wordpad, por exemplo). No o abra no Dreamweaver. Examine a Matriz de atalhos de teclado na pgina 598 e localize um atalho que no esteja sendo utilizado ou algum ao qual ser dada uma nova atribuio. Se um atalho de teclado for designado novamente, risque-o em uma cpia impressa da matriz, para referncia futura.
Se um atalho de teclado receber uma nova atribuio, procure o item de menu ao qual o atalho foi designado e remova o atributo key="shortcut" desse item de menu. Localize o item de menu para o qual ser designado ou redesignado o atalho de teclado. Se o item de menu j tiver um atalho de teclado, procure o atributo key nesta linha. Caso contrrio, adicione key="" em qualquer posio entre os atributos dentro do tag menuitem. Entre as aspas do atributo key, digite o novo atalho de teclado. Utilize um sinal de adio (+) entre as teclas em uma combinao de teclas. Para obter mais informaes sobre os modicadores, veja a descrio do tagmenuitem na <menuitem> na pgina 564. Se o atalho de teclado estiver em uso em outro local e caso no tenha sido removida a outra utilizao, o atalho ser aplicado apenas ao primeiro item de menu ao qual foi atribudo no menus.xml.
Nota: O mesmo atalho de teclado pode ser utilizado para um item de menu apenas do Macintosh e para outro apenas do Windows.
Grave o novo atalho no local apropriado da Matriz de Atalhos de Teclado.
561
Sobre a sintaxe dos tags do menus.xml O arquivo menus.xml contm uma lista estruturada de menus, barras de menus, itens de menu, separadores e listas de atalhos. Esses itens so descritos pelos tags XML, que podem ser editados em um editor de texto.
Nota: Tenha cuidado ao modificar os menus. O Dreamweaver ignora qualquer menu ou item de menu que contenha um erro de sintaxe XML.
Uma barra de menus (marcada com tags de abertura e fechamento menubar) um menu individual ou um conjunto de menus por exemplo: h uma barra de menus principal, uma barra de menus da janela do site separada (que aparece apenas no Windows e no no Macintosh) e uma barra de menus para cada menu contextual. Cada barra de menu contm um ou mais menus; um menu est contido em um tag menu. Cada menu contm um ou mais itens de menu, e cada um deles descrito por um tag menuitem e seus atributos. Um menu tambm composto por separadores (descritos pelo tag separator tags) e submenus. Alm dos atalhos de teclado associados ao itens de menu, o Dreamweaver fornece vrios outros atalhos de teclado, incluindo atalhos alternativos e aqueles que esto disponveis apenas em determinados contextos. Por exemplo: Control+Y (no Windows) ou Command+Y (no Macintosh) o atalho para Refazer, porm Control+Shift+Z ou Command+Shift+Z um atalho alternativo para Refazer. Essas alternativas e outros atalhos que no podem ser representados nos tags para os itens de menu so denidos nas listas de atalhos no arquivo menus.xml. Cada lista de atalhos (descrita por um tag shortcutlist) contm um ou mais atalhos, cada um deles descrito por um tag shortcut. As sees abaixo descrevem a sintaxe dos tags do menus.xml. Os atributos opcionais esto marcados com chaves ({}) nas listas de atributos; todos os atributos no marcados com chaves so obrigatrios. <menubar>
Descrio
Contm informaes sobre uma barra de menus na estrutura de menus do Dreamweaver.

Atributos
name, {app}, id, {platform} name
o nome da barra de menus. Embora name seja um atributo necessrio, poder ser representado pelo valor "". o nome do aplicativo no qual a barra de menus est disponvel. Os valores vlidos so "dreamweaver" e "ultradev". O padro que a barra de menus esteja disponvel no Dreamweaver e no UltraDev.
app
a identicao do menu para a barra de menus. Cada identicao de menu no arquivo menus.xml deve ser nica.
id
562
Captulo 22
platform
indica que a barra de menus deve aparecer apenas em uma determinada plataforma. Os valores vlidos so "win" e "mac".
Contedo
Esse tag deve conter um ou mais tags menu.

Continer
Nenhum
Exemplo
A barra de menus principal (janela do documento) utiliza o seguinte tag menubar:

<menubar name="Main Window" id="DWMainWindow">  </menubar>
<menu>
Descrio
Contm informaes sobre um menu ou submenu que aparecer na estrutura de menus do Dreamweaver.
Atributos
name, {app}, id, {platform} name
o nome do menu na forma em que aparecer na barra de menus. Para denir a tecla de acesso ao menu (mnemnico) no Windows, utilize um sinal de sublinhado (_) antes da letra de acesso. O sinal de sublinhado ser automaticamente removido no Macintosh.
app o nome do aplicativo no qual o menu est disponvel. Os valores vlidos so "dreamweaver" e "ultradev". O padro que o menu esteja disponvel no
Dreamweaver e no UltraDev.
id
a identicao para o menu. Cada identicao no arquivo deve ser nica.
indica que o menu deve aparecer apenas em uma determinada plataforma. Os valores vlidos so "win" e "mac".
platform
Contedo
Esse tag contm um ou mais tags menuitem e separator. Pode conter tambm outros tags menu (para criar submenus) e tags de comentrio em HTML padro.
Continer
Esse tag deve estar contido em um tag menubar.

Exemplo
<menu name="_File" id="DWMenu_File">  </menu>
563
<menuitem>
Descrio
Dene um item para um menu do Dreamweaver.

Atributos
name, id, {app}, {key}, {platform}, {enabled}, {arguments}, {command}, {file}, {checked}, {dynamic} name O nome do item que aparece no menu. Um sinal de sublinhado indica que a letra seguinte a tecla de acesso ao comando (mnemnico), apenas no Windows.
utilizado pelo Dreamweaver para identicar o item. Essa identicao deve ser nica em toda a estrutura do menu. Se forem adicionados novos itens de menu ao arquivo menus.xml, utilize o nome de sua empresa ou uma outra seqncia de caracteres nica como prexo para cada identicao de item, a m de assegurar a exclusividade.
id
o nome do aplicativo no qual o item de menu est disponvel. Os valores vlidos so "dreamweaver" e "ultradev". O padro que o item de menu esteja disponvel no Dreamweaver e no UltraDev.
app key o atalho de teclado para o comando, se houver algum. Utilize estas seqncias para especicar as teclas modicadoras:
Cmd Alt
especica a tecla Control (no Windows) ou Command (no Macintosh).
e Opt respectivamente especicam a tecla Alt (no Windows) ou Option (no Macintosh).
Shift especica a tecla Shift em ambas as plataformas. Ctrl especica a tecla Control em ambas as plataformas. Um sinal de adio (+) separa as teclas modicadoras, se um atalho utilizar mais
de um modicador. Por exemplo: Cmd+Opt+5 no atributo key signica que o item de menu executado pressionando as teclas Control, Alt e 5 (no Windows) ou Command, Option e 5 (no Macintosh).
As teclas especiais so indicadas pelo nome: F1 a F12, PgDn, PgUp, Home, End, Ins,
Del, Tabulao, Esc, Retrocesso e Espao. As teclas modicadoras tambm podem ser aplicadas s teclas especiais.
indica em qual plataforma o item aparece. Os valores vlidos so "win", signicando apenas Windows, ou "mac", indicando apenas Macintosh. Se o atributo platform no for especicado, o item de menu aparecer em ambas as plataformas. Para que um item de menu se comporte de modo diferente em plataformas distintas, fornea dois itens de menu com o mesmo nome (mas com identicaes diferentes): um com platform="win" e o outro com platform="mac".
platform
564
Captulo 22
enabled
fornece o cdigo JavaScript (normalmente, uma chamada de funo JavaScript) que determina se o item de menu est ativado. Se a funo retornar false, o item de menu estar desativado. O valor padro "true", porm melhor especicar sempre um valor por motivo de clareza, mesmo que ele seja "true". fornece argumentos para que o Dreamweaver os passe ao cdigo no arquivo JavaScript, especicado no atributo file. Envolva os argumentos em aspas simples ('), dentro das aspas duplas utilizadas para delimitar o valor de um atributo.
arguments
especica uma expresso JavaScript que ser executada quando o usurio selecionar esse item no menu. Nos cdigos JavaScript complexos, utilize um arquivo JavaScript (especicado no atributo file). Deve ser especicado file ou command para cada item de menu.
command
o nome do arquivo HTML que contm o JavaScript que controla o item de menu. Especica um caminho de arquivo relativo pasta Conguration. Por exemplo: o item de menu Bem-vindo > Ajuda representado por file="Commands/Welcome.htm". Observe que o atributo file anula os atributos command, enabled e checked. Deve ser especicado file ou command para cada item de menu. Para obter informaes sobre a criao de um arquivo de comando utilizando o painel Histrico, consulte Como criar novos comandos a partir das etapas do histrico na pgina 173. Consulte Como estender os recursos do Dreamweaver, para obter informaes sobre a maneira de escrever os seus comandos JavaScript a partir do zero.
file
uma expresso JavaScript que indica se o item de menu tem uma marca de seleo ao seu lado, no menu; se a expresso for avaliada como true, o item ser exibido com uma marca.
checked
se estiver presente, indica que um item de menu deve ser determinado dinamicamente por um arquivo HTML, que contenha cdigo JavaScript para denir o texto e o estado do item de menu. Se um tag for especicado como dynamic, o atributo file tambm dever ser denido.
dynamic
indica se as visualizaes do projeto e de cdigo devem ser sincronizadas antes da execuo do cdigo para esse item de menu. Os valores vlidos so "true" (o padro) e "false". Se esse atributo for denido para "false", isto signica que as alteraes no arquivo feitas por esse item de menu no utilizam o DOM (Document Object Model) do Dreamweaver. Para obter informaes sobre o DOM, consulte Como estender os recursos do Dreamweaver.
isdomrequired
Contedo
Nenhum (tag vazio).

Continer
Esse tag deve estar contido em um tag menu.

Exemplo
<menuitem name="_New" key="Cmd+N" enabled="true" command="dw.createDocument()" id="DWMenu_File_New" />
565
<separator>
Descrio
Indica que um separador deve ser exibido no local correspondente no menu.

Atributos
{app} app o nome do aplicativo no qual o separador mostrado. Os valores vlidos so "dreamweaver" e "ultradev". O padro que o separador seja mostrado no
Dreamweaver e no UltraDev.
Contedo
Nenhum (tag vazio).

Continer
Esse tag deve estar contido em um tag menu.

Exemplo
<separator />
<shortcutlist>
Descrio
Especica uma lista de atalhos no arquivo menus.xml.

Atributos
{app}, id, {platform}
o nome do aplicativo no qual a lista de atalhos est disponvel. Os valores vlidos so "dreamweaver" e "ultradev". O padro que a lista de atalhos esteja disponvel no Dreamweaver e no UltraDev.
app
a identicao da lista de atalhos. Ela deve ser a mesma que a identicao do menu para a barra de menus (ou menu contextual) no Dreamweaver ao qual os atalhos esto associados. Os valores vlidos so "DWMainWindow", "DWMainSite", "DWTimelineContext" e "DWHTMLContext".
id
indica que a lista de atalhos deve aparecer apenas em uma determinada plataforma. Os valores vlidos so "win" e "mac".
platform
Contedo
Esse tag deve conter um ou mais tags shortcut. Pode acomodar tambm um ou mais tags de comentrio (que utilizem a mesma sintaxe que os tags de comentrio em HTML).
Continer
Nenhum
Exemplo
<shortcutlist id="DWMainWindow">  </shortcutlist>
566
Captulo 22
<shortcut>
Descrio
Especica uma lista de atalhos de teclado no arquivo menus.xml.

Atributos
key, {app}, {platform}, {file}, {arguments}, {command}, id, {name} key
a combinao de teclas que ativa o atalho de teclado. Para obter mais detalhes sobre a sintaxe, consulte <menuitem> na pgina 564.
app o nome do aplicativo no qual o atalho est disponvel. Os valores vlidos so "dreamweaver" e "ultradev". O padro que o atalho esteja disponvel no
Dreamweaver e no UltraDev. especica que o atalho funciona apenas na plataforma indicada. Os valores vlidos so "win" e "mac". Se esse atributo no for especicado, o atalho funcionar em ambas as plataformas.
platform file o caminho de um arquivo que contm o cdigo JavaScript que o Dreamweaver executar quando o atalho de teclado for acionado. O atributo file anula o atributo command. Deve ser especicado file ou command para cada atalho.
fornece argumentos para que o Dreamweaver os passe ao cdigo no arquivo JavaScript, especicado no atributo file. Envolva os argumentos em aspas simples ('), dentro das aspas duplas utilizadas para delimitar o valor de um atributo.
arguments command
o cdigo JavaScript que o Dreamweaver executar quando o atalho de teclado for acionado. Deve ser especicado file ou command para cada atalho. um identicador nico para um atalho.
id
name um nome para o comando executado pelo atalho de teclado, com o mesmo estilo de um nome de item de menu. Por exemplo: o atributo name para o atalho F12 "Visualizar no navegador primrio".
Contedo
Nenhum (tag vazio).

Continer
Esse tag deve estar contido em um tag shortcutlist.

Exemplo
<shortcut key="Cmd+Shift+Z" file="Menus/MM/Edit_Clipboard.htm" arguments="'redo'" id="DWShortcuts_Edit_Redo" />
567
Como personalizar a aparncia das caixas de dilogo

Os layouts das caixas de dilogo para objetos, comandos e comportamentos so especicados como formulrios HTML, eles residem em arquivos HTML na pasta Conguration, no diretrio do aplicativo do Dreamweaver. Esses formulrios so editados como qualquer outro do Dreamweaver. Consulte Como criar formulrios na pgina 519.
Para alterar a aparncia de uma caixa de dilogo:
Localize o arquivo .htm adequado em Conguration/Objects, Conguration/ Commands ou Conguration/Behaviors. Faa uma cpia do arquivo, em um local diferente da pasta Conguration. Abra a cpia no Dreamweaver, edite o formulrio e salve a cpia. Saia do Dreamweaver. Transra essa cpia modicada de volta para a pasta Conguration, substituindo a original. conveniente fazer primeiro uma cpia de segurana da original, para que possa ser restaurada posteriormente, se for necessrio. Reinicie o Dreamweaver, para examinar as alteraes.
2 3 4 5
Apenas a aparncia da caixa de dilogo deve ser modicada, mas no o seu funcionamento; ela dever conter ainda os mesmos tipos e nomes dos elementos de formulrio, a m de que as informaes obtidas pelo Dreamweaver na caixa de dilogo possam ser utilizadas da mesma forma. Por exemplo: o objeto comentrio obtm a entrada de texto em uma rea de texto, numa caixa de dilogo, em seguida utiliza uma funo JavaScript simples para transform-la em um comentrio em HTML, que ser inserido no documento. O formulrio que descreve a caixa de dilogo est em Conguration/Objects/ Invisibles/Comment.htm. possvel abrir e alterar o tamanho e outros atributos da rea do texto, mas se for removido o tag textarea inteiro, ou alterado o valor do seu atributo name, o objeto comentrio deixar de funcionar corretamente.
568
Captulo 22
Como alterar a formatao HTML padro

O perl de formatao da fonte de HTML determina como o Dreamweaver formata o cdigo-fonte HTML de um documento. O perl inclui as preferncias de formato de cdigo (que podem ser facilmente denidas com Editar > Preferncias; consulte Preferncias de formato de cdigo na pgina 375 para obter mais detalhes) e as preferncias de formatao adicionais para tags individuais e grupos de tags. A nica maneira de alterar as preferncias de formatao, que no so mostradas nas preferncias de formato de cdigo, editar o arquivo SourceFormat.txt em um editor de texto. Esse arquivo est na pasta Conguration, dentro da pasta do aplicativo do Dreamweaver. As preferncias de formato de cdigo, denidas com o comando Editar > Preferncias, so salvas no SourceFormat.txt, quando o Dreamweaver fechado. necessrio sair do aplicativo, antes de editar o perl, caso contrrio, as alteraes podero ser anuladas quando o Dreamweaver for fechado. O perl de formatao da origem de HTML segue um formato especco, que descrito no arquivo. Leia as seguintes convenes:
Cada seo do perl comea com um tag no formato <?keyword> (por exemplo:
<?options>, <?elements>
ou <?attributes>).
Os parmetros de cada seo so denidos nos comentrios em HTML

() no podem ser listados como tags nos pers de navegadores porque interferem na anlise. O Dreamweaver no relata um erro para os comentrios porque eles contam com suporte de todos os navegadores.
A sintaxe de uma entrada de tag

<!ELEMENT htmlTag NAME="tagName" > <!ATTLIST htmlTag unsupportedAttribute1!Error !msg="O atributo unsupportedAttribute1 do tag htmlTag no recebe suporte. Experimente utilizar supportedAttribute1 para obter um efeito semelhante." supportedAttribute1 supportedAttribute2( validValue1 | validValue2 | validValue3 ) unsupportedAttribute2!Error !htmlmsg="<b>Nunca utilize o atributounsupportedAttribute2 do tag htmlTag tag!</b>" >
Os elementos mostrados na sintaxe acima so denidos da seguinte maneira:

htmlTag
o tag na forma em que aparece em um documento HTML.
tagName um nome descritivo para o tag (por exemplo: o nome do tag HR Rgua horizontal). O atributo NAME opcional. Se for especicado, tagName ser utilizado nas mensagens de erro; caso um nome no seja fornecido, htmlTag ser utilizado nas mensagens de erro. unsupportedAttribute um atributo que no conta com suporte. Considera-se que
os tags e atributos que no foram explicitamente mencionados no contam com suporte. Especique os tags ou atributos sem suporte apenas quando desejar criar uma mensagem de erro personalizada.
supportedAttribute um atributo ao qual o htmlTag oferece suporte. Considera-se que apenas os tags presentes na lista sem uma designao !Error contam com suporte do navegador.
572
Captulo 22
validValue
um valor que conta com suporte do atributo.
O exemplo abaixo mostra uma entrada para o tag APPLET , que seria exato para o Navigator 3.0:
<!ELEMENT APPLET Name="Java Applet" > <!ATTLIST APPLET Alinhar ( no alto | no meio | embaixo | esquerda | direita | no meio absoluto | o mais abaixo | linha de base | alto do texto ) Alt Archive Class !Warning !htmlmsg="Este navegador ignora o atributo <CODE>CLASS</ CODE> do tag <CODE>APPLET</CODE>.". Code Codebase Height HSpace Class !Warning !htmlmsg="Este navegador ignora o atributo <CODE>ID</CODE> do tag <CODE>APPLET</CODE>". Utilize em seu lugar <CODE>NAME</CODE>". Name Style !Warning !htmlmsg="Este navegador ignora o atributo <CODE>STYLE</ CODE> do tag <CODE>APPLET</CODE>". VSpace Width >
Como criar e editar os perfis de navegadores Um perl de navegador pode ser criado atravs da modicao de um perl existente. Por exemplo: para criar um perl para uma verso mais avanada do Microsoft Internet Explorer, abra o perl da verso mais recente do Internet Explorer, que contenha um perl, adicione os novos tags e atributos da nova verso e salve-o como um perl para essa verso mais avanada.
Nota: Antes de criar um perfil para uma nova verso de navegador, visite o site de intercmbio da Macromedia para o Dreamweaver, a fim de verificar se a Macromedia forneceu um perfil de navegador que possa ser obtido por download e instalado usando o Package Manager. Para criar ou editar um perfil de navegador:
Utilizando um editor de texto, abra um perl existente. Se voc estiver criando um novo perl, abra o perl que mais se assemelhe ao que ser criado, em seguida, salve o arquivo com um novo nome.
Ao criar um novo perl, altere o nome que aparece na primeira linha de texto do arquivo. Dois pers no podem ter o mesmo nome.
573
Adicione novos tags ou atributos que contam com suporte do navegador, utilizando a sintaxe mostrada em Sobre a formatao dos pers de navegadores na pgina 571. Se no desejar receber mensagens de erro sobre um determinado tag que no conte com suporte, adicione-o lista de tags aceitos. Caso isto seja feito, salve o perl em um arquivo separado com um novo nome (limitado a Nomedonavegador x.x , por exemplo). O novo nome do perl serve para preservar o perl original apenas com os tags que contam com suporte.
Exclua os tags ou atributos que no contam com suporte do navegador. Essa etapa desnecessria quando for criado um perl para a prxima verso do Netscape Navigator ou Microsoft Internet Explorer, porque, raramente, os navegadores deixam de oferecer suporte aos tags.
Adicione as mensagens de erro personalizadas, de acordo com a sintaxe mostrada em Sobre a formatao dos pers de navegadores na pgina 571. Os pers que acompanham o Dreamweaver listam todos os tags que recebem suporte dos navegadores especicados. Para adicionar uma mensagem de erro personalizada a um tag, inclua !msg "message" ou !htmlmsg "<tag>message</tag>" depois de !Error. Por exemplo: esta informao aparece no perl do Netscape Navigator 3.0 (juntamente com outros atributos no mostrados aqui):
<!ELEMENT HR name="Rgua horizontal" > <!ATTLIST HR COLOR !Error >
Para adicionar uma mensagem de erro personalizada, digite !msg: e, em seguida, a mensagem de erro, entre aspas:
<!ELEMENT HR name="Rgua horizontal" > <!ATTLIST HR COLOR !Error !msg "O Internet Explorer 3.0 oferece suporte ao tag COLOR nas rguas horizontais, mas no o Netscape Navigator 3.0." > 6 !Error
pode ser utilizado para todas as situaes de erro, ou use !Warning, para indicar que o tag ser ignorado mas no causar um erro.
574
Captulo 22
Como estender os recursos do Dreamweaver: Princpios bsicos

O Dreamweaver foi projetado para ser extensvel. O programa inclui um intrprete de JavaScript, para que voc possa ler e executar o cdigo JavaScript, e fornece uma interface de programao de aplicativos (API), um amplo conjunto de funes JavaScript que permite aos programadores estender os recursos do Dreamweaver. O Dreamweaver tambm oferece o Document Object Model (DOM), que permite s extenses examinar e modicar a estrutura e o contedo de um documento. Com a API de JavaScript, possvel criar objetos, aes de comportamento, comandos, inspetores de propriedades, painis utuantes e conversores de dados (todos denominados coletivamente como extenses). Voc pode criar tambm novos objetos e comandos simples sem conhecer programao; consulte Como criar um objeto simples na pgina 556 e Como criar novos comandos a partir das etapas do histrico na pgina 173, para obter mais detalhes. Porm, se o objetivo for mais avanado, para adicionar recursos ao Dreamweaver preciso gravar extenses, nas linguagens JavaScript ou C. Para obter mais informaes sobre DOM e API, consulte Como estender os recursos do Dreamweaver. Aps a criao de uma extenso do Dreamweaver, ela pode ser transformada em pacote e distribuda no site de intercmbio da Macromedia, se voc quiser que outros usurios do programa a utilizem. Para obter mais informaes, consulte o site de intercmbio da Macromedia para o Dreamweaver. Para transformar uma extenso em pacote, necessrio primeiramente efetuar o download do instalador Package Manager naquele site, em seguida, instale o aplicativo com a opo de programador. Sobre o JavaScript JavaScript uma linguagem de programao interpretada. Para saber mais sobre JavaScript, leia um bom livro sobre o assunto, como JavaScript Bible de Danny Goodman (IDG) ou JavaScript: The Definitive Guide, de David Flanagan (OReilly). Para obter mais informaes sobre a extensibilidade do Dreamweaver utilizando o JavaScript, consulte Como estender os recursos do Dreamweaver.
Nota: Apesar da semelhana entre os dois nomes, JavaScript no est relacionado de modo algum a Java.
575
Como editar os comandos do Dreamweaver Todos os comandos nos menus do Dreamweaver, inclusive aqueles criados e salvos utilizando o painel Histrico (consulte Como criar novos comandos a partir das etapas do histrico na pgina 173), so implementados em JavaScript. O cdigo JavaScript geralmente consiste, em sua maior parte, de chamadas de funes fornecidas pela API de extensibilidade do Dreamweaver. Caso voc conhea o JavaScript e compreenda a API de extensibilidade do Dreamweaver, poder editar o JavaScript, a m de alterar o funcionamento dos comandos do programa.
Nota: No tente alterar cdigos JavaScript, a menos que saiba exatamente o que est fazendo. Mesmo nesse caso, faa uma cpia de segurana do arquivo que contm o cdigo, antes de modific-lo.
Para renomear um comando, mova-o para um outro menu ou adicione a ele um atalho de teclado. Consulte Sobre a personalizao dos menus do Dreamweaver na pgina 557.
Como personalizar a interpretao dos tags de outros fabricantes

A tecnologias de processamento de servidor, como ASP, ColdFusion, JSP e PHP utilizam um cdigo especial diferente de HTML nos arquivos HTML; os servidores criam e trabalham com o contedo HTML baseando-se nesse cdigo. Ao encontrar os tags diferentes de HTML, o Dreamweaver os compara com as informaes nos arquivos de tags de outros fabricantes, que denem como o programa l e exibe os tags diferentes de HTML. Por exemplo: os arquivos ASP contm alm do HTML comum cdigo ASP para ser interpretado pelo servidor. O cdigo ASP parece um tag, porm marcado com um par de delimitadores: esse cdigo inicia com <% e termina com %>. A pasta Conguration/ThirdPartyTags do Dreamweaver contm um arquivo chamado ASP.xml, que descreve o formato do cdigo ASP e dene como o Dreamweaver o exibir. Devido maneira como o cdigo ASP especicado no arquivo ASP.xml, o Dreamweaver no tenta interpretar o que estiver entre os delimitadores, em vez disso, o programa exibe apenas um cone indicando um cdigo ASP, na visualizao do projeto da janela do documento. Voc pode congurar os seus prprios tags e criar arquivos de banco de dados de tags, que denem como o Dreamweaver os l e exibe. A criao dos arquivos de banco de dados de tags so particularmente teis, quando for usado um sistema de markup de servidor diferente de ASP, JSP, ColdFusion ou PHP; crie um novo arquivo de banco de dados de tags para cada um desses sistemas de markup, a m de informar ao Dreamweaver como exibir os tags. No h um arquivo de banco de dados de tags JSP separado; o cdigo JSP utiliza os mesmos delimitadores do ASP, por isso o Dreamweaver utiliza o arquivo de banco de dados de tags do cdigo ASP para o JSP.
576
Captulo 22
Nota: Esta seo explica como definir o modo de exibio de um tag personalizado no Dreamweaver, mas no como editar o seu contedo ou propriedades. Para obter informaes sobre a criao de um inspetor de propriedades para verificar e alterar as propriedades de um tag personalizado, consulte Inspetores de propriedades, em Como estender os recursos do Dreamweaver.
Cada arquivo de banco de dados de tags dene o nome, tipo, modelo do contedo, esquema de interpretao e cone para um ou mais tags personalizados. Pode ser criado qualquer nmero de arquivos de banco de dados de tags, mas todos devem residir na pasta Conguration/ThirdPartyTags, para que sejam lidos e processados pelo Dreamweaver. Os arquivos de banco de dados de tags tm a extenso .xml.
Sugesto: Se voc estiver trabalhando simultaneamente em diversos sites diferentes e sem relao (por exemplo: como um programador independente), coloque todas as especificaes de tags relativos a um determinado site em um nico arquivo. Em seguida, basta incluir esse arquivo de banco de dados de tags nos cones personalizados e inspetores de propriedades, que sero enviados para a equipe que far a manuteno do site.
Uma especicao de tag denida com um tag XML denominado tagspec. Por exemplo: o cdigo abaixo descreve a especicao para o tag happy:
<tagspec tag_name="happy" tag_type="nonempty" render_contents="false" content_model="marker_model" icon="happy.gif" icon_width="18" icon_height="18"></tagspec>
Dois tipos diferentes de tags podem ser especicados com o tagspec: tags em estilo HTML normal e tags delimitadas por seqncias de caracteres. Os tags delimitados por seqncias de caracteres iniciam com uma seqncia e terminam com outra; eles so semelhantes a tags HTML vazios (por exemplo: img) pois no envolvem o contedo e nem contm tags de nalizao. O tag happy, mostrado acima, um tag em estilo HTML normal; ele inicia com um tag de abertura <happy>, contm dados entre os tags de abertura e fechamento, e termina com um tag </happy> de nalizao. Se o tag fosse delimitado por uma seqncia de caracteres, sua especicao incluiria os atributos start_string e end_string. Um tag ASP do tipo delimitado por uma seqncia de caracteres; ele inicia com a seqncia <% e termina com a seqncia %>, e no contm um tag de nalizao. As informaes abaixo descrevem os atributos e valores vlidos para o tag tagspec. Os atributos marcados com um asterisco (*) so ignorados pelos tags delimitados por uma seqncia de caracteres. <tagspec>
Descrio
Contm informaes sobre um tag de outro fabricante.

Atributos
tag_name, tag_type, render_contents, content_model, start_string, end_string, detect_in_attribute, parse_attributes, icon, icon_width, icon_height
577
tag_name
o nome do tag personalizado. (Nos tags delimitados por seqncias de caracteres, tag_name utilizado apenas para determinar se um inspetor de propriedades especco pode ser utilizado para o tag. Se a primeira linha do inspetor de propriedades contiver o nome do tag com um asterisco de cada lado, o inspetor poder ser utilizado para esses tipos de tags. Por exemplo: o nome do tag para o cdigo ASP ASP; os inspetores de propriedades que podem examinar o cdigo ASP devem conter *ASP* na primeira linha. Para obter informaes sobre a API de inspetor de propriedades, consulte Inspetores de propriedades em Como estender os recursos do Dreamweaver).
tag_type*
determina se o tag est vazio (como em img) ou se ele contm algo entre os tags de abertura e fechamento (como em code). Esse atributo necessrio para tags normais (no delimitados por seqncias de caracteres). Ele ignorado nos tags delimitados por seqncias de caracteres, pois esto sempre vazios. Os valores vlidos so "empty" e "nonempty".
render_contents*
determina se o contedo do tag deve aparecer na visualizao do projeto da janela do documento, ou se um cone ser mostrado. Esse atributo necessrio para os tags no-vazios (nonempty) e ignorado nos tags vazios (empty). Os tags vazios no tm contedo. Esse atributo destina-se apenas aos tags que aparecem fora de atributos; o contedo dos tags que esto dentro dos valores de atributos de outros tags no so interpretados. Os valores vlidos so "true" ou "false".
content_model*
descreve quais tipos de contedo o tag pode acomodar e onde o tag pode aparecer em um arquivo HTML. Os valores vlidos so "block_model", "head_model", "marker_model" e "script_model":
especica que o tag pode conter elementos em nvel de bloco, e que o tag pode aparecer apenas na seo body ou dentro de outros tags de contedo de corpo do texto, como div, layer ou td.
block_model como div e p, head_model
especica que o tag pode acomodar contedo de texto e aparecer apenas na seo head.
marker_model especica que o tag pode conter qualquer cdigo HTML vlido e aparecer em qualquer posio num arquivo HTML. No Dreamweaver, o validador de HTML ignora os tags que so especicados como marker_model. Contudo, o validador no ignora o contedo desse tag; por isso, embora o tag possa aparecer em qualquer lugar, o contedo deste pode resultar em um HTML invlido em alguns locais. Por exemplo: um texto simples no pode aparecer (fora de um elemento head) na seo head de um documento, por isso, no possvel colocar um tag marker_model que contenha texto simples na seo head. Para colocar um tag personalizado contendo texto simples na seo head, especique o modelo de contedo do tag como head_model em vez de marker_model. Utilize marker_model nos tags que precisam ser exibidos linearmente (dentro de um elemento em nvel de bloco, como p ou div) por exemplo: em um pargrafo). Se o tag deve ser exibido como um pargrafo individual, com quebras de linhas antes e depois dele, no utilize esse modelo.
578
Captulo 22
script_model permite que o tag seja colocado em qualquer posio entre os tags HTML de abertura e fechamento de um documento. Quando o Dreamweaver encontrar um tag com esse modelo, todo o contedo do tag ser ignorado. Utilizado para markups de outros fabricantes (como determinados tags ColdFusion), que o Dreamweaver no deve analisar.
especica um delimitador que marca o incio de um tag delimitado por seqncias de caracteres. Os tags delimitados por seqncias de caracteres podem aparecer em qualquer posio no documento, onde pode haver um comentrio. O Dreamweaver no analisa tags, nem decodica entidades ou URLs entre start_string e end_string. Esse atributo necessrio se for especicado end_string.
start_string
especica um delimitador que marca o nal de um tag delimitado por seqncias de caracteres. Esse atributo necessrio se for especicado start_string.
end_string detect_in_attribute indica se deve ser ignorado tudo que estiver entre start_string e end_string (ou entre os tags de abertura e fechamento, se estas
seqncias no forem denidas), mesmo quando estas seqncias aparecerem dentro de nomes ou valores de atributos. Geralmente, esse atributo deve ser denido como "true", no caso de tags delimitados por seqncias de caracteres; o padro "false". Por exemplo: os tags ASP aparecem s vezes dentro de valores de atributos e podem conter aspas ("); como essa especicao de tag ASP dene detect_in_attribute="true", o Dreamweaver ignora esses tags, inclusive as aspas internas, quando aparecerem dentro de valores de atributos.
parse_attributes* indica se os atributos do tag sero analisados. Se for denido como "true" (o padro), o Dreamweaver analisar os atributos; se for denido como "false", o Dreamweaver ir ignorar tudo at o prximo sinal de maior que aparecer fora das aspas. Por exemplo: esse atributo deve ser denido como "false" para um tag cfif (como em <cfif a is 1>, que o Dreamweaver no poderia analisar como um conjunto de pares nome/valor de atributos). icon especica o caminho e o nome do arquivo do cone associado ao tag. Esse atributo necessrio para os tags vazios e no-vazios, cujo contedo no seja exibido na visualizao do projeto da janela do documento. icon_width icon_height
Contedo
especica a largura do cone em pixels. especica a altura do cone em pixels.
Nenhum (tag vazio).

Continer
Nenhum
Exemplo
<tagspec tag_name="happy" tag_type="nonempty" render_contents="false" content_model="marker_model" icon="happy.gif" icon_width="18" icon_height="18"></tagspec>
579
Como os tags personalizados aparecem na visualizao do projeto A aparncia dos tags, na visualizao do projeto da janela do documento, depende dos valores dos atributos tag_type e render_contents do tag tagspec. Se o valor de tag_type for "empty", o cone especicado no atributo icon aparecer. Se o valor de tag_type for "nonempty", mas o valor de render_contents for "false", o cone aparecer da mesma forma que em um tag vazio. Por exemplo: o tag happy, denido acima, dever aparecer no HTML da seguinte maneira
<p>This is a paragraph that includes an instance of the <code>happy</code> tag (<happy>Joe</happy>).</p>
O pargrafo deve aparecer na visualizao do projeto, como a seguir:
Observe que, quando render_contents denido como "false" na especicao do tag, o contedo do tag happy (a palavra Joe) no ser interpretado; em vez disso, os tags de abertura e fechamento, bem como seu contedo, sero exibidos como um nico cone. No caso dos tags no-vazios que tm um valor de render_contents denido como "true", o cone no aparece na visualizao do projeto, em vez disso, ser mostrado o contedo entre os tags de abertura e fechamento (por exemplo: o texto entre os tags em <mytag>Este o contedo entre os tags de abertura e fechamento</ mytag>). Se a opo Exibir > Elementos invisveis estiver ativada, o contedo ser realado utilizando a cor para os tags de outros fabricantes especicada nas preferncias de realce. Observe que o realce se aplica apenas aos tags denidos nos arquivos de banco de dados de tags.
Para alterar a cor de realce dos tags de outros fabricantes:
1 2
Escolha Editar > Preferncias e, em seguida, selecione a categoria Realce. Clique na caixa de cores Tags de outros fabricantes, para exibir o seletor de cores. Escolha uma cor e, em seguida clique em OK, para fechar a caixa de dilogo Preferncias. Para obter mais informaes sobre a escolha de uma cor, consulte Como trabalhar com as cores na pgina 91.
580
Captulo 22
Sobre as ASP As ASP (Active Server Pages) da Microsoft constituem uma maneira de combinar HTML, scripts gravados em JavaScript ou VBScript, e controles ActiveX, a m de trabalhar dinamicamente com HTML. Quando um navegador solicita uma pgina ASP ao Microsoft Web Server, o servidor interpreta o cdigo ASP e envia o HTML resultante ao navegador. O navegador receber apenas o HTML, mas no o cdigo ASP. Para obter mais informaes sobre as ASP, consulte as pginas de viso geral das ASP da Microsoft, conforme a descrio em Recursos de tecnologias da Web e HTML na pgina 25. Um bloco de cdigo ASP inicia com <% e termina com %>. Se Exibir > Elementos invisveis estiver selecionado, e Tags de markup do servidor for escolhido nas preferncias de elementos invisveis, o Dreamweaver exibir um cone de ASP na visualizao do projeto da janela do documento, para marcar o local do cdigo ASP. Caso contrrio, o Dreamweaver no exibir nada para marcar a posio do cdigo. Para obter mais informaes sobre os elementos invisveis, consulte Sobre os elementos invisveis na pgina 164. Sobre as JSP As JSP (JavaServer Pages) da Sun fornecem um modo com base em Java para trabalhar dinamicamente com um contedo HTML ou um outro da Web. Quando um navegador solicita uma pgina JSP de um servidor habilitado para JSP, este interpreta o cdigo JSP e envia o HTML resultante para o navegador. O navegador receber apenas o HTML, mas no o cdigo JSP. Para obter mais informaes sobre JSP, consulte a Pgina JSP da Sun, conforme a descrio em Recursos de tecnologias da Web e HTML na pgina 25. Um bloco de cdigo JSP inicia com <% e termina com %>. Como o JSP utiliza os mesmos delimitadores que o ASP, o Dreamweaver exibe um cone de ASP para o cdigo JSP. Sobre o PHP PHP (que signica Hypertext Preprocessor) uma linguagem de criao de scripts de servidor. Quando um navegador solicita uma pgina PHP de um servidor habilitado para PHP, este interpreta o cdigo PHP e envia o HTML resultante para o navegador. O navegador receber apenas o HTML, mas no o cdigo PHP. Para obter mais informaes sobre PHP, consulte as Pginas PHP, conforme a descrio em Recursos de tecnologias da Web e HTML na pgina 25. Um bloco de cdigo PHP inicia com <? e termina com ?>. Se a opo Exibir > Elementos invisveis estiver selecionada, e a opo Tags de markup do servidor for escolhida nas preferncias de elementos invisveis, o Dreamweaver exibir um cone de PHP na visualizao do projeto da janela do documento, para marcar o local do cdigo PHP. Caso contrrio, o cdigo no aparecer na visualizao do projeto. Para obter mais informaes sobre os elementos invisveis, consulte Sobre os elementos invisveis na pgina 164.
581
Sobre a ColdFusion A ColdFusion da Allaire uma outra maneira de tratar as pginas dinamicamente. Quando um navegador solicita uma pgina ColdFusion de um servidor, este passa-a ao software ColdFusion Server, que interpreta os scripts na pgina e envia o HTML resultante para o navegador. O navegador receber apenas o HTML, mas no o cdigo ColdFusion. Para obter mais informaes sobre a ColdFusion, consulte a Pgina do produto ColdFusion, conforme a descrio em Recursos de tecnologias da Web e HTML na pgina 25. O Dreamweaver reconhece aproximadamente 50 tags ColdFusion; consulte o arquivo ColdFusion.xml, na pasta Conguration/ThirdPartyTags, para obter mais detalhes. Se a opo Exibir > Elementos invisveis estiver selecionada, e a opo Tags de markup do servidor for escolhida nas preferncias de elementos invisveis, o Dreamweaver exibir um cone de ColdFusion na visualizao do projeto da janela do documento, para marcar o local dos tags ColdFusion para os quais render_contents foi denido como "false" (no ColdFusion.xml). Caso contrrio, o Dreamweaver no exibir nada para marcar a posio do cdigo. Para obter mais informaes sobre os elementos invisveis, consulte Sobre os elementos invisveis na pgina 164. Como impedir a regravao de tags de outros fabricantes O Dreamweaver corrige determinados tipos de erros em HTML (para obter mais detalhes, consulte Preferncias de regravao de cdigo na pgina 377). Como padro, o Dreamweaver no altera o HTML nos arquivos com determinadas extenses de nome de arquivo, inclusive .asp (ASP), .cfm (ColdFusion), jsp (JSP) e .php (PHP). Esse padro denido para que o Dreamweaver no modique acidentalmente o cdigo contido nos tags de outros fabricantes. O comportamento de regravao padro do Dreamweaver pode ser alterado, para que o programa regrave o HTML quando esses arquivos forem abertos; podem ser adicionados outros tipos de arquivos lista daqueles que o Dreamweaver no regravar. Observe tambm que o Dreamweaver codica determinados caracteres especiais (substituindo-os por valores numricos) quando estes so digitados no inspetor de propriedades. Normalmente, melhor deixar que o Dreamweaver execute essa codicao, porque assim mais provvel que os que os caracteres especiais sejam exibidos de modo correto em todas as plataformas e navegadores. Contudo, devido possibilidade de interferncia dessa codicao em tags de outros fabricantes, talvez seja conveniente alterar o comportamento de codicao do Dreamweaver, quando voc estiver trabalhando com arquivos que contm tags de terceiros.
582
Captulo 22
Para permitir que o Dreamweaver regrave o HTML em mais tipos de arquivos:
1 2
Escolha Editar > Preferncias, e selecione Regravao de cdigo. Siga um dos procedimentos abaixo:
Exclua uma ou mais extenses da lista de extenses. Cancele a seleo da opo Nunca regravar o cdigo: Em arquivos com as
extenses. O cancelamento da seleo dessa opo permite que o Dreamweaver regrave o HTML em todos os tipos de arquivos.
Para adicionar tipos de arquivos que o Dreamweaver no deve regravar:
1 2
Escolha Editar > Preferncias, e selecione Regravao de cdigo. Certique-se de que a opo Nunca regravar o HTML: Em arquivos com as extenses esteja selecionada e adicione as novas extenses de arquivos lista no campo de texto. Se o novo tipo de arquivo no aparecer no menu pop-up de tipos de arquivos, na caixa de dilogo Arquivo > Abrir, talvez seja conveniente adicion-lo ao arquivo Conguration/Extensions.txt. Para obter mais detalhes, consulte Como alterar o tipo de arquivo padro na pgina 554.
Para desativar as opes de codificao do Dreamweaver:
1 2
Escolha Editar > Preferncias, e selecione Regravao de cdigo. Cancele uma ou ambas as opes de Caracteres especiais.
Para obter informaes sobre as outras preferncias de regravao de cdigo, consulte Preferncias de regravao de cdigo na pgina 377.
583
584
Captulo 22
APNDICE A
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Atalhos de teclado
possvel obter uma lista imprimvel com os atalhos de teclado, no Centro de suporte do Dreamweaver en (www.macromedia.com/support/dreamweaver/ documentation.html).
Menu Arquivo
Ao Novo documento Abrir um arquivo HTML No Windows Control+N Control+O, ou arraste o arquivo da janela do Explorer ou do site para a janela do documento Control+Shift+O Control+W Control+S Control+Shift+S Shift + F8 Control+Q No Macintosh Command+N Command+O
Abrir na moldura Fechar Salvar Salvar como Marcar os links Sair
Command+Shift+O Command+W Command+S Command+Shift+S Command+F8 Command+Q
585
Menu Editar
Ao Desfazer Refazer Recortar No Windows Control+Z Control+Y ou Control+Shift+Z Control+X ou Shift+Del Control+C ou Control+Ins Control+V ou Shift+Ins Delete Control+A Control+Shift+< Control+Shift+> Control+F F3 Control+Shift+8 Control+Shift+9 Control+ Control+E Control+U No Macintosh Command+Z Command+Y ou Command+Shift+Z Command+X ou Shift+Del Command+C ou Command+Ins Command+V ou Shift+Ins Delete Command+A Command+Shift+< Command+Shift+> Command+F Command+G Command+Shift+8 Control+Shift+9 Command+ Command+E Command+U
Copiar
Colar
Limpar Selecionar tudo Selecionar o tag-pai Selecionar o filho Localizar e substituir Localizar o prximo Recuar o cdigo Remover o recuo do cdigo Ajustar as chaves Iniciar o editor externo Preferncias
Visualizaes de pgina
Para alternar a exibio de Visualizao padro Visualizao de layout Barra de ferramentas No Windows Control+Shift+F6 Control+F6 Control+Shift+T No Macintosh Command+Shift+F6 Command+F6 Command+Shift+T
586
Apndice A
Como visualizar os elementos da pgina

Para alternar a exibio de Auxlios visuais Rguas Mostrar a grade Encaixar na grade Contedo do cabealho Propriedades da pgina No Windows Control+Shift+I Control+Alt+R Control+Alt+G Control+Alt+Shift+G Control+Shift+W Control+Shift+J No Macintosh Command+Shift+I Command+Option+R Command+Option+G Command+Option+Shift+G Command+Shift+W Command+Shift+J
Edio do cdigo
Ao Alternar para a visualizao do projeto Abrir o Quick Tag Editor Selecionar o tag-pai Ajustar as chaves Selecionar tudo Copiar Localizar e substituir Localizar o prximo Substituir Colar Recortar Refazer Desfazer Alternar o ponto de interrupo Selecionar a linha acima Selecionar a linha abaixo Selecionar o caractere da esquerda No Windows Control+tecla de tabulao Control+T Control+Shift+< Control+ Control+A Control+C Control+F F3 Control+H Control+V Control+X Control+Y Control+Z Control+Alt+B Shift+seta acima Shift+seta abaixo Shift+seta esquerda No Macintosh Option+tecla de tabulao Command+T Command+Shift+< Command+ Command+A Command+C Command+F Command+G Command+H Command+V Command+X Command+Y Command+Z Command+Option+B Shift+seta acima Shift+seta abaixo Shift+seta esquerda
Atalhos de teclado
587
Ao Selecionar o caractere da direita Ir para a pgina acima Ir para a pgina abaixo Selecionar a pgina acima Selecionar a pgina abaixo Selecionar a palavra esquerda Selecionar a palavra direita Ir para o incio da linha Ir para o fim da linha Ir para o incio do cdigo Ir para o fim do cdigo Selecionar at o incio do cdigo Selecionar at o fim do cdigo
No Windows Shift+seta direita Page Up Page Down Shift+Page Up Shift+Page Down
No Macintosh Shift+seta direita Page Up Page Down Shift+Page Up Shift+Page Down
Control+Shift+seta esquerda Command+Shift+seta esquerda Control+Shift+seta direita Home End Control+Home Control+End Control+Shift+Home Control+Shift+End Command+Shift+seta direita Home End Command+Home Command+End Command+Shift+Home Command+Shift+End
Como editar o texto

Ao Criar um novo pargrafo Inserir uma quebra de linha <BR> Inserir um espao no-separvel Mover o texto ou objeto para um outro local na pgina Copiar o texto ou objeto para um outro local na pgina No Windows Enter Shift+Enter Control+Shift+barra de espao Arraste o item selecionado para o novo local Enquanto mantm a tecla Control pressionada, arraste o item selecionado at o novo local Clique duas vezes Control+Shift+B No Macintosh Return Shift+Return Option+barra de espao Arraste o item selecionado para o novo local Enquanto mantm a tecla Option pressionada, arraste o item selecionado at o novo local Clique duas vezes Command+Shift+B Option+tecla de tabulao
Selecionar uma palavra Adicionar os itens selecionados biblioteca
Alternar entre a visualizao do projeto e Control+tecla de tabulao os editores de cdigo
588
Apndice A
Ao
No Windows
No Macintosh Command+Shift+J Shift+F7
Abrir e fechar o inspetor de propriedades Control+Shift+J Verificar a ortografia Shift+F7
Como formatar o texto

Ao Recuo Remover o recuo Formato > Nenhum Formato do pargrafo Aplicar os cabealhos 1 a 6 a um pargrafo Alinhamento > esquerda Alinhamento > No centro Alinhamento > direita Tornar negrito o texto selecionado Tornar itlico o texto selecionado Editar a folha de estilos No Windows Control+9 Control+8 Control+0 (zero) Control+Shift+P Control+1 a 6 Control+Shift+Alt+L Control+Shift+Alt+C Control+Shift+Alt+R Control+B Control+I Control+Shift+E No Macintosh Command+9 Command+8 Command+0 (zero) Command+Shift+P Command+1 a 6 Command+Shift+Option+L Command+Shift+Option+C Command+Shift+Option+R Command+B Command+I Command+Shift+E
Nota: Alguns atalhos de formatao de texto no provocam qualquer efeito durante o trabalho nos editores de cdigo.
Atalhos de teclado
589
Como localizar e substituir o texto

Ao Localizar Localizar o prximo/Localizar novamente Substituir No Windows Control+F F3 Control+H No Macintosh Command+F Command+G Command+H
Como trabalhar com tabelas

Ao No Windows No Macintosh Command+A Tecla de tabulao Shift+tecla de tabulao Command+M Tecla de tabulao na ltima clula Command+Shift+M Command+Shift+A Command+Shift+ - (hfen) Command+Option+M Command+Option+S Command+barra de espao
Selecione a tabela (com o cursor dentro Control+A da mesma) Mover at a prxima clula Mover at a clula anterior Inserir uma linha (antes da linha atual) Adicionar uma linha ao final da tabela Excluir a linha atual Inserir uma coluna Excluir uma coluna Mesclar as clulas selecionadas da tabela Dividir as clulas da tabela Atualizar o layout da tabela (forar um redesenho, se estiver no modo edio mais rpida de tabelas) Tecla de tabulao Shift+tecla de tabulao Control+M Tecla de tabulao na ltima clula Control+Shift+M Control+Shift+A Control+Shift+ - (hfen) Control+Alt+M Control+Alt+S Control+barra de espao
Nota: Alguns atalhos de tabelas no funcionam na visualizao de layout.
590
Apndice A
Como trabalhar com as molduras

Ao Selecionar uma moldura No Windows Enquanto mantm a tecla Alt pressionada, clique na moldura Alt+Seta direita Alt+Seta esquerda Alt+Seta acima Alt+Seta abaixo No Macintosh Clique na moldura mantendo pressionadas a teclas Shift e Option Command+Seta direita Command+Seta esquerda Command+Seta acima Command+Seta abaixo Enquanto mantm a tecla Option pressionada, arraste a borda da moldura Enquanto mantm as teclas Command e Option pressionadas, arraste a borda da moldura
Selecionar a prxima moldura ou conjunto de molduras Selecionar a moldura ou conjunto de molduras anterior Selecionar o conjunto-pai de molduras Selecionar a primeira moldura-filha ou conjunto-filho de molduras
Adicionar uma nova moldura ao conjunto Enquanto mantm a tecla Alt de molduras pressionada, arraste a borda da moldura Adicionar uma nova moldura ao conjunto Enquanto mantm as teclas de molduras utilizando o mtodo de Alt e Control pressionadas, empurramento arraste a borda da moldura
Atalhos de teclado
591
Como trabalhar com as camadas

Ao Selecionar uma camada Selecionar e mover uma camada Adicionar ou remover a camada da seleo Mover a camada selecionada um determinado nmero de pixels Mover a camada selecionada um incremento de encaixe Redimensionar a camada selecionada um determinado nmero de pixels Redimensionar a camada selecionada um incremento de encaixe Alinhar as camadas selecionadas parte inferior/superior/esquerda/direita da ltima camada selecionada Tornar igual a largura das camadas selecionadas Tornar igual a altura das camadas selecionadas Alternar a preferncia de aninhamento ao criar uma camada Alternar a exibio da grade Encaixar na grade No Windows Control+Shift-clique Shift+Control-arraste Enquanto mantm a tecla Shift pressionada, clique na camada Teclas de seta Shift+teclas de seta Control+teclas de seta Control+Shift+teclas de seta Control+seta acima/abaixo/ esquerda/ direita Control+Shift+9 Control+Shift+8 Control-arraste Control+Shift+Alt+G Control+Alt+G No Macintosh Command+Shift-clique Command+Shift-arraste Enquanto mantm a tecla Shift pressionada, clique na camada Teclas de seta Shift+teclas de seta Option+teclas de seta Option+Shift+teclas de seta Command+seta acima/ abaixo/ esquerda/ direita Command+Shift+9 Command+Shift+8 Command-arraste Command+Shift+ Option+G Command+Option+G
Como trabalhar com as linhas de tempo

Ao Adicionar objeto linha de tempo No Windows Control+Alt+Shift+T No Macintosh Command+Option+ Shift+T Shift+F9 Delete
Adicionar um quadro primrio Remover um quadro primrio
Shift+F9 Delete
592
Apndice A
Como trabalhar com as imagens

Ao Alterar o atributo de origem da imagem Editar a imagem em um editor externo No Windows No Macintosh
Clique duas vezes na imagem Clique duas vezes na imagem Controlclique duas vezes na imagem Mantenha a tecla Command pressionada enquanto clica duas vezes na imagem
Como gerenciar os hyperlinks

Ao Criar hyperlink (selecionar o texto) Remover o hyperlink No Windows Control+L Control+Shift+L No Macintosh Command+L Command+Shift+L Selecione o texto, imagem ou objeto e, em seguida, mantendo a tecla Shift pressionada, arraste a seleo at um arquivo na janela do site Selecione o texto, imagem ou objeto e, em seguida, arraste o cone do indicador de arquivos do inspetor de propriedades at um arquivo na janela do site. Command clique duas vezes no link Shift+F8 Command+F8
Arrastar e soltar para criar um hyperlink a Selecione o texto, imagem ou partir de um documento objeto e, em seguida, mantendo a tecla Shift pressionada, arraste a seleo at um arquivo na janela do site Arrastar e soltar para criar um hyperlink utilizando o inspetor de propriedades Selecione o texto, imagem ou objeto e, em seguida, arraste o cone do indicador de arquivos do inspetor de propriedades at um arquivo na janela do site. Clique duas vezes no link enquanto mantm pressionada a tecla Control Shift+F8 Control+F8
Abrir o documento contendo o link no Dreamweaver Verificar os links selecionados Verificar os links no site inteiro
Atalhos de teclado
593
Como designar e visualizar nos navegadores

Ao Visualizar no navegador primrio Visualizar no navegador secundrio No Windows F12 Control+F12 No Macintosh F12 Command+F12
Como depurar nos navegadores

Ao Depurar no navegador primrio Depurar no navegador secundrio No Windows Alt+F12 Control+Alt+F12 No Macintosh Option+F12 Command+Option+F12
Gerenciamento de sites e FTPs

Ao Criar um novo arquivo Criar uma nova pasta Abrir a seleo Obter os arquivos ou pastas selecionadas do site remoto de FTP No Windows Control+Shift+N Control+Shift+Alt+N Control+Shift+Alt+O Control+Shift+D ou arraste os arquivos do painel Remoto para o painel Local, na janela do site Control+Shift+U ou arraste os arquivos do painel Local para o painel Remoto, na janela do site Control+Shift+Alt+D Control+Shift+Alt+U Control+F5 Alt+F5 No Macintosh Command+Shift+N Command+Shift+ Option+N Command+Shift+ Option+O Command+Shift+D ou arraste os arquivos do painel Remoto para o painel Local, na janela do site Command+Shift+U ou arraste os arquivos do painel Local para o painel Remoto, na janela do site Command+Shift+ Option+D Command+Shift+ Option+U Command+F5 Option+F5
Colocar os arquivos ou pastas selecionadas no site remoto de FTP
Retirar Devolver Visualizar o mapa do site Atualizar o site remoto
594
Apndice A
Mapa do site
Ao Visualizar os arquivos do site Atualizar o painel Local Tornar raiz Vincular a um arquivo existente Alterar o link Remover o link Mostrar/ocultar o link Mostrar os ttulos das pginas Renomear o arquivo Aumentar o zoom do mapa do site Reduzir o zoom do mapa do site No Windows F5 Shift+F5 Control+Shift+R Control+Shift+K Control+L Delete Control+Shift+Y Control+Shift+T F2 Control++ (sinal de adio) Control+ - (hfen) No Macintosh F5 Shift+F5 Command+Shift+R Command+Shift+K Command+L Delete Command+Shift+Y Command+Shift+T no disponvel Command++ (sinal de adio) Command+ - (hfen)
Como executar os plug-ins

Ao Executar o plug-in Parar o plug-in Executar todos os plug-ins Parar todos os plug-ins No Windows Control+Alt+P Control+Alt+X Control+Shift+Alt+P Control+Shift+Alt+X No Macintosh Command+Option+P Command+Option+X Command+Shift+ Option+P Command+Shift+ Option+X
Como trabalhar com os modelos

Ao Criar uma nova regio editvel No Windows Control+Alt+V No Macintosh Command+Option+V
Atalhos de teclado
595
Como inserir objetos

Para inserir Qualquer objeto (imagem, filme Shockwave e assim por diante) No Windows No Macintosh
Arraste o arquivo da janela do Arraste o arquivo do Explorer ou do site para a Localizador ou da janela do janela do documento. site para a janela do documento Control+Alt+I Control+Alt+T Control+Alt+F Control+Alt+D Control+Alt+A Command+Option+I Command+Option+T Command+Option+F Command+Option+D Command+Option+A
Imagem Tabela Filme Flash Filme Shockwave Director ncora com nome
Painel Histrico
Ao Abrir a paleta de histrico Iniciar/parar o comando de gravao Executar o comando gravado No Windows F9 Control+Shift+X Control+P No Macintosh F9 Command+Shift+X Command+P
596
Apndice A
Como abrir e fechar os painis

Para alternar a exibio de Objetos Propriedades Arquivos do site Mapa do site Propriedades Estilos CSS Estilos HTML Comportamentos Histrico Linhas de tempo Inspetor de cdigo Molduras Camadas Referncia Mostrar/ocultar os painis flutuantes Minimizar todas as janelas Restaurar todas as janelas No Windows Control+F2 Control+F3 F5 Control+F5 F11 Shift+F11 Control+F11 Shift+F3 Shift+F10 Shift+F9 F10 Shift+F2 F2 Control+Shift+F1 F4 Shift+F4 Alt+Shift+F4 No Macintosh Command+F2 Command+F3 F5 Command+F5 F11 Shift+F11 Command+F11 Shift+F3 Shift+F10 Shift+F9 F10 Shift+F2 F2 Command+Shift+F1 F4 * *
Como obter ajuda

Ao Tpicos da Ajuda de Como utilizar o Dreamweaver Referncia Centro de suporte do Dreamweaver No Windows F1 Shift+F1 Control+F1 No Macintosh F1 Shift+F1 Command+F1
Atalhos de teclado
597
Matriz de atalhos de teclado

Nota: Um asterisco (*) indica uma combinao de teclas no utilizada. O texto em itlico indica comandos ao nvel do sistema.
Caractere do teclado Control (no Windows) ou Command (no Macintosh) Control+Shift (no Windows) ou Command+Shift (no Macintosh) Control+Alt (no Windows) ou Command+ Option (no Macintosh) Inserir ncora com nome Control+Shift+Alt (no Windows) ou Command+ Shift+Option (no Macintosh) *
Selecionar tudo, Selecionar a

tabela Negrito (alternar)
Inserir coluna na tabela
B C D E F G
Adicionar biblioteca * * Obter os arquivos ou pastas selecionados Editar a folha de estilos * *
* Justificar no centro
Copiar
Duplicar Iniciar o editor externo Localizar
Inserir filme Shockwave Retirar os arquivos ou Director pastas selecionadas * Inserir filme Flash Mostrar/ocultar as grades * Inserir a imagem * * * Encaixar na grade (alternar) * * *
Localizar novamente * (apenas no Macintosh) Substituir Itlico (alternar) Propriedades da pgina * Criar link * Mostrar invisveis (alternar) Inspetor de propriedades (alternar) * Remover o link
H I J
K L M N
* * Mesclar as clulas selecionadas da tabela
* Justificar esquerda * Nova pasta do site
Inserir linha na tabela Excluir a linha da tabela
Nova janela (no Nova pgina (apenas * Windows) no Windows) Nova pgina (no Macintosh) Abrir
Abrir na moldura *
O P Q
Abrir o arquivo selecionado do site Executar todos os plugins *
Executar o comando Formato do pargrafo Executar o plug-in gravado
Sair
598
Apndice A
Caractere do teclado
Control (no Windows) ou Command (no Macintosh)
Control+Shift (no Windows) ou Command+Shift (no Macintosh)
Control+Alt (no Windows) ou Command+ Option (no Macintosh) Mostrar/ocultar as rguas
Control+Shift+Alt (no Windows) ou Command+ Shift+Option (no Macintosh) Justificar direita
R S T
Tornar raiz Salvar tudo
Salvar
Quick Tag Editor
Dividir a clula da tabela * Adicionar objeto linha de tempo Devolver os arquivos ou pastas selecionadas * * Parar todos os plug-ins * * *
Mostrar os ttulos das Inserir tabela pginas no mapa do site Colocar os arquivos ou pastas selecionadas * Exibir o contedo do cabealho Iniciar o comando de gravao Mostrar/ocultar o link Refazer * *
Preferncias
V W X Y Z 0 (zero)
Colar Fechar Recortar

Refazer
Criar uma nova regio editvel * Parar o plug-in * * *
Desfazer
Definir o formato do pargrafo como Nenhum
1 2 3 4 5 6 7 8 9
Aplicar o Cabealho 1 * ao pargrafo Aplicar o Cabealho 2 ao pargrafo Aplicar o Cabealho 3 ao pargrafo Aplicar o Cabealho 4 ao pargrafo Aplicar o Cabealho 5 ao pargrafo Aplicar o Cabealho 6 ao pargrafo * * * * * * * * * * *
* * * * * * * * *
* * * * * * * * *
Atalhos de teclado
599
Caractere do teclado
Control+Shift (no Windows) ou Command+Shift (no Macintosh)
Control+Alt (no Windows) ou Command+ Option (no Macintosh) *
Control+Shift+Alt (no Windows) ou Command+ Shift+Option (no Macintosh) *
- (sinal de subtrao) e _ (sublinhado) =e+ [e{
Reduzir o zoom do mapa do site Ajustar janela Remover o recuo (Mover para trs) Recuo (Avanar)
Excluir a coluna da tabela Aumentar o zoom do mapa do site
* *
Tornar as larguras das * camadas iguais (Camadas) Tornar as alturas das camadas iguais (Camadas) *
]e}
> < ?e/ ;e: e e~ \e|
* * * * * * *
Selecionar o tag-filho * Selecionar o tag-pai * * * * * Inserir um espao no-separvel (no Windows) (Option+ barra de espao no Macintosh) * * * * * * *
* * * * * * * *
Barra de espao Atualizar o layout da tabela
600
Apndice A
Tecla de funo
Nenhum modificador
Shift
Alt (no Windows) ou Option (no Macintosh)
Control+ Shift (no Windows) ou Command + Shift (no Macintosh)
Control+ Alt (no Windows) ou Command+ Option (no Macintosh) *
Control+ Shift+Alt (no Windows) ou Command+ Shift+ Option (no Macintosh) *
F1
Ajuda de Como Referncia utilizar o Dreamweaver Camadas Localizar novamente (apenas no Windows) Ocultar/ mostrar os painis flutuantes Arquivos do site * Molduras
Centro de suporte do Dreamweaver Painel Objeto Inspetor de propriedades
Painel Referncia * *
F2 F3
* *
* *
Painel * Comportament os Minimizar Fechar as todas as janelas janelas (apenas no Windows) Atualizar o painel Local *
F4
Fechar a janela (apenas no Macintosh)
F5 F6
Atualizar o Mapa do site painel Remoto *
* *
Alternar para a Alternar para a * Visualizao de visualizao layout padro * * * *
F7 F8
* *
Verificar a ortografia Verificar os links selecionados
* *
* *
Verificar os links * No site inteiro
F9
Linha de tempo e Adicionar quadro primrio
F10 F11 F12
Inspetor de cdigo Propriedades Visualizar no navegador primrio
Painel Histrico Estilos CSS *
* * Depurar no navegador primrio
* Estilos HTML Visualizar no navegador secundrio
* * *
* * Depurar no navegador secundrio
* * *
Atalhos de teclado
601
602
Apndice A
NDICE REMISSIVO
A ao Abrir a janela do navegador 492 ao Alterar a propriedade 481 ao Arrastar a camada 486 ao Chamar o JavaScript 480 ao Controlar o Shockwave ou Flash 485 ao Denir a imagem da barra de navegao 496 ao Denir a mensagem de status 499 ao Denir o texto da camada 498 ao Denir o texto da moldura 497 ao Denir o texto do campo de texto 500 ao Executar a linha de tempo 505 ao Executar o som 494 ao Ir do menu de salto 491 ao Ir para a URL 490 ao Ir para o quadro da linha de tempo 504 ao Mensagem pop-up 494 ao Menu de salto 491 ao Mostrar/ocultar as camadas 501 ao Parar a linha de tempo 505 ao Permutar a imagem 503 ao Pr-carregar as imagens 495 ao Restaurar a imagem permutada 504 ao Validar o formulrio 506 ao Vericar o navegador 482 ao Vericar o plug-in 483 aes 469 como alterar em comportamentos 476 como controlar as linhas de tempo 468 como criar 477 como escolher no painel Comportamentos 473 compatibilidade com os navegadores 478 denidas 469 includas com o Dreamweaver 478, 478507 Consulte tambm aes individuais pelo nome Active Server Pages (ASP) 581 como editar 383 sobre 581 adicionar links 242
Ajuda 14 atalhos 597 Centro de suporte do Dreamweaver 16 Grupo de discusso do Dreamweaver 16 lbuns de fotograas na Web, criar 322 alinhamento direita (inspetor de propriedades da imagem) 294 alinhamento esquerda (inspetor de propriedades da imagem) 294 alinhamento Alto do texto (inspetor de propriedades da imagem) 294 alinhamento da linha de base (inspetor de propriedades da imagem) 294 alinhamento Embaixo (inspetor de propriedades da imagem) 294 alinhamento No alto (inspetor de propriedades da imagem) 294 alinhamento No meio (inspetor de propriedades da imagem) 294 alinhamento No meio absoluto (inspetor de propriedades da imagem) 294 alinhamento O mais abaixo (inspetor de propriedades da imagem) 294 alinhamento padro do navegador (inspetor de propriedades da imagem) 294 alongamento automtico (visualizao de layout) 189 amostras, cor 91 ncoras com nome como criar 394 ncoras, com nome 394 animao editar animaes do Fireworks 320 animaes ao longo de um caminho complexo 462 como aplicar a objetos 466 como copiar e colar 465 como criar 461 como melhorar 467 linhas de tempo 458 viso geral 19
603
aplicativos, outros, como utilizar com o Dreamweaver 94 rea de trabalho 74 arquivo de registro de correes de HTML 380 arquivo menus.xml sintaxe 562 arquivo SourceFormat.txt 374 arquivos como colocar 152 como efetuar o download 151 como efetuar o upload 152 como exibir na janela do site 121 como gerenciar 114 como obter do site remoto 151 como procurar 280 como sincronizar os sites local e remoto 154 como transferir com FTP 132 texto 158 tipos, padro 554 arquivos de correio eletrnico 158 arquivos de texto como abrir 158 arquivos dependentes como colocar 153 como mostrar e ocultar 128 como obter 152 arquivos do Microsoft Excel, como importar 198 arquivos HTML como importar 159 arquivos ocultos, como mostrar e ocultar 128 arquivos rfos 546 (ASP) tags, como personalizar anlise e aparncia 576 ASP. Consulte Active Server Pages atalhos de teclado 585, 585600 como editar 95 como editar, no arquivo menus.xml 561 atalhos, teclado. Consulte atalhos de teclado atributo class 272 atributo usemap 296 atributos buscas 282 em pers de navegadores 571 Consulte tambm tags udio. Consulte som
B barra de ferramentas ttulos dos documentos, como alterar 160 barra de navegao como adicionar imagens 405 como criar 404 como exibir horizontalmente na pgina 406 como exibir verticalmente na pgina 406 como inserir em uma tabela 406 como modicar os elementos 407 estados da imagem 404 barra de status como denir o texto (comportamento) 499 menu pop-up Tamanho da janela 76 preferncias 79 viso geral 77 bibliotecas do Dreamweaver, exportar do Fireworks 311 borda da tabela cores 204 largura 204 bordas como adicionar a uma tabela 203 em uma moldura 232 tabelas, como remover 197 boto Carregar a consulta 285 boto Cor padro 91 boto Cores do sistema 91 boto Editar (inspetor de propriedades da imagem) 293 boto Executar novamente 170 boto Ir, como associar a um menu de salto 491 boto Riscado (cor padro) 91 boto Roda de cores (cor do sistema) 91 boto Salvar a consulta 285 botes botes Enviar, grcos 536 botes Ir 491 como criar botes de formulrio 534 botes de opo 529 botes Enviar 536 C cabeote de execuo 459 caixa de dilogo Boto Flash 329 caixa de dilogo Denir o estilo HTML 264 caixa de dilogo Inserir a barra de navegao 405 caixa de dilogo Inserir ncora com nome 394
604
ndice remissivo
caixa de dilogo Inserir link de correio eletrnico 396 caixa de dilogo Inserir o menu de salto 402 caixa de dilogo Parmetros 348 caixa de dilogo Texto Flash 332 caixa de dilogo Vericador de links 547 caixa de dilogo Vincular a folha de estilos externa 270 caixas de dilogo, como personalizar 568 caixas de seleo 529 camadas 439, 439468 arrastveis 488 atalhos 592 como alinhar 447 como alterar a ordem de empilhamento 453 como alterar a visibilidade com o painel Camadas 454 como alterar a visibilidade com os comportamentos 501 como aninhar 443 como ativar 449 como converter em tabelas 455 como converter para navegadores 3.0 457 como criar 441 como desenhar diversas 441 como encaixar na grade 448 como evitar sobreposies 456 como inserir 441 como manipular 445 como mover 447 como posicionar 449 como redimensionar 446 como selecionar 445 como selecionar mltiplas 452 marcadores, como exibir 441 na criao de tabelas 455 pontos de ancoragem 164 preferncias 444 propriedades 449 propriedades de mltiplas 452 viso geral 439 visibilidade 454 camadas CSS exportar do Fireworks 310 caminhos absolutos 386 relativos a documento 387 relativos raiz 388
Caminhos absolutos 386 caminhos relativos a documento como denir 391 sobre 387 caminhos relativos raiz como denir 391 preferncia Visualizar utilizando o servidor local 389 sobre 388 caminhos relativos raiz do site Consulte caminhos relativos raiz campo de texto Imagem cambivel 300 campo Diretrio do host 134 campo Endereo HTTP 109, 110 campo Host do FTP 133 campo Nome do site 109, 110 campo Pasta raiz local 109, 110 campos campos de arquivos 528 como criar campos de texto 524 como criar campos ocultos 528 como efetuar o upload de arquivos para um servidor 528 sobre campos de formulrio 524 campos de texto, como denir o texto com comportamentos 500 canal de comportamentos nas linhas de tempo 459 caracteres especiais como inserir 254 viso geral 254 caracteres, especiais 254 categorias preferncias 92 propriedades 238 clula do cabealho, como formatar 205 clulas Consulte clulas de layout, clulas da tabela clulas da tabela clulas do cabealho, como designar 205 como copiar e colar 212 como dividir 210 como formatar 204 como mesclar 210 cor de fundo, como adicionar 205 imagem de fundo, como adicionar 205 Consulte tambm clulas de layout, tabelas
ndice remissivo 605
clulas de layout 178 alinhamento 187 como desenhar 179 como formatar 187 como limpar as alturas 184 como mover 185 como redimensionar 185 como selecionar 185 cor de fundo 187 preferncias 194 realce 194 sem quebra autom. de linha 187 Centro de suporte do Dreamweaver 16 (CFML) tags, como personalizar anlise e aparncia 576 CFML como editar os tags CFML 383 CFML. Consulte ColdFusion Markup Language (CGI) Common Gateway Interface scripts 538 CGI material de referncia 25 chaves, como ajustar 367 codicaes 93 cdigo como editar com o BBEdit 382 preferncias de formatao 374 cdigo-fonte HTML buscas de tags 282 como copiar e colar, geral 255 como editar com o BBEdit 382 como formatar nos documentos existentes 379 como gravar e editar 365 como limpar 378 como limpar o HTML do MS Word 379 como procurar 280, 282 como selecionar na janela do documento 162 como visualizar com o inspetor de cdigo 90 converso de atributos CSS 278 editores ext. 381 estilos de tags 267 estrutura 352 material de referncia 25 opes 364 perl de formatao 569 preferncias de cores de tags 374 preferncias de formatao, como denir 375
preferncias de regravao 377 referncia 358 tags, como remover 373 viso geral 351 viso geral das preferncias de formatao 374 ColdFusion Markup Language (CFML) e o Dreamweaver 360 viso geral 582 colunas de visualizao de arquivos como acessar 146 como adicionar uma coluna 147 como alterar a ordem 147 como excluir 148 como utilizar com as Design Notes 146 colunas, linhas e clulas como adicionar e remover 208 como formatar 204 cor de fundo, como adicionar 205 comando Atualizar HTML 321 Criar lbum de fotograas na Web 322 Otimizar imagem no Fireworks 317 comando Abrir 159 comando Abrir a pgina vinculada 549 comando Abrir o modelo anexado 425 comando Adicionar objeto biblioteca 430 comando Adicionar objeto linha de tempo 461 comando Adicionar quadro 461 comando Adicionar/remover o ajuste de redimensionamento da Netscape 444 comando Ajustar a posio 166 comando Alinhar com a seleo 167 comando Alterar o link no site inteiro 400 comando ncora com nome 394 comando Aplicar a formatao de origem 379 comando Aplicar o modelo pgina 422 comando Atualizar a pgina atual 425, 432 comando Atualizar as pginas 425 comando Colar como texto 252 comando Colocar 152 comando Converter as camadas em tabela 455 comando Converter tabelas em camadas 457 comando Cor 258 comando Denir como home page 128 comando Denir o esquema de cores 162 comando Desanexar do modelo 424 comando Desmarcar a regio editvel 421
606
ndice remissivo
comando Dividir as clulas 211 comando Editar a folha de estilos 271 comando Editar a lista de fontes 260 comando Editar o contedo NoFrames 234 comando Evitar sobreposies de camadas 456 comando Exportar a tabela 215 comando Formatar a tabela 206 comando Gravar o caminho da camada 462 comando Importar o HTML do Word 159, 380 comando Importar os dados da tabela 198 comando Inserir campo de imagens 535 comando Inserir dados tabulares 198 comando Limpar o HTML 378 comando Limpar o HTML do Word 379 comando Link a um arquivo existente 127 comando Link a um novo arquivo 127 comando Mesclar as clulas 210 comando Novo 158 comando Novo a partir de modelo 159, 422 comando Obter 151 comando Obter mais comportamentos 478 comando Redenir a origem 165 comando Redenir a posio 166 comando Remover a linha de tempo 465 comando Remover o quadro 461 comando Salvar 160 comando Salvar a moldura 226 comando Salvar a moldura como 226 comando Salvar como modelo 411 comando Salvar o conjunto de molduras 226 comando Salvar o conjunto de molduras como 226 comando Salvar todas as molduras 226 comando Selecionar um local mais novo 154 comando Selecionar um remoto mais novo 154 comando Vericar a ortograa 279 comando Vericar os links no site inteiro 547 comando Vericar os navegadores de destino 542 comando Visualizar no navegador 545 comando Visualizar utilizando o servidor local 389 comandos como acessar nos menus contextuais 80, 82 como criar, a partir das etapas do histrico 173 como gravar 175 como renomear 560 comandos Dividir a moldura 219 comentrios, como inserir 357 Common Gateway Interface (CGI). Consulte CGI 538
como abrir arquivos de texto 158 documentos 158 tipos de arquivos diferentes de HTML como padro 554 como abrir arquivos HTML do Word 159 Como abrir documentos vinculados 549 como abrir os arquivos no-HTML 368 preferncias 368 como adicionar extenses ao Dreamweaver 98 objeto a uma linha de tempo 461 quadros a uma linha de tempo 463 como ajustar as chaves 367 como alinhar 294 camadas 447 elementos da pgina 294 imagens de rastreamento 167 opes 294 texto 259 como analisar o cdigo 515 como aninhar 444 camadas 443 molduras 222 como aplicar as cores ao texto 242 como atualizar lista Site (painel Propriedades) 240 como atualizar os links 398 como automatizar as tarefas 168 como colar as etapas do histrico 172 como colocar arquivos em um servidor remoto 152 como combinar os painis utuantes 86 como copiar as etapas do histrico 172 como criar modelos 411 Como criar botes de opo 531 como criar cores e URLs 248 como criar novos modelos de boto Flash 335 como criar relatrios 550 como denir as propriedades do documento 160 como denir os pontos de interrupo 513 como desenhar camadas 441 clulas e tabelas de layout 179 como designar links como abrir documentos em uma nova janela 392 em documentos 391
ndice remissivo
607
como designar molduras para _blank 234 _parent 234 _self 234 _top 234 como designar os navegadores de destino atalhos 594 como converter um arquivo para se tornar compatvel com o navegador 3.0 457 pers de navegadores 571 como detectar os navegadores e plug-ins 544 como devolver e retirar arquivos 139142 como desfazer uma retirada 142 viso geral 139 como editar atalhos de teclado 95 modelos 411 objetos de boto Flash 331 propriedades 244 como editar o cdigo (visualizao de cdigo ou inspetor de cdigo) 365 como efetuar a integrao com o SourceSafe 135 como efetuar a integrao com o WebDAV 135 como efetuar o download tamanho, estimativas de tempo 549 como efetuar o upload de arquivos 152 Como estabelecer a conexo com sites remotos utilizando sistemas de controle de origem 135 como executar os objetos Flash 331 como exibir camadas 454 como organizar as visualizaes 363 contedo do head 167 elementos invisveis 164 HTML de regies editveis e bloqueadas de modelos 419 imagens de rastreamento 166 regies editveis e bloqueadas nos modelos 418 sites 119 visualizao de cdigo e visualizao do projeto 362 como exibir os elementos invisveis 164 como exportar XML, notaes de tag para 428 como exportar os estilos 274 como fazer o download comportamentos 478
como formatar o cdigo-fonte HTML como personalizar 569 preferncias 374 como gerenciar as propriedades. Consulte propriedades como gerenciar os links 398 como gravar comandos 175 como gravar o cdigo (visualizao de cdigo ou inspetor de cdigo) 365 como importar arquivos HTML do Word 159 como incorporar udio 341 como iniciar 20 como inserir caracteres especiais 254 controles ActiveX 344 datas 253 elementos de mdia 325 lmes Flash 335 lmes Shockwave 338 imagens 291 imagens cambiveis 300 miniaplicativos Java 346 objetos de boto Flash 329 objetos de texto Flash 332 objetos Generator 337 propriedades 241 server-side includes 438 como inserir propriedades. Consulte propriedades como instalar o Dreamweaver 12 como integrar o Dreamweaver com outros aplicativos 94 como localizar e substituir. Consulte como procurar como modicar propriedades da pgina 160 como obter arquivos de um servidor remoto 151 como ocultar os elementos invisveis 164 como organizar as visualizaes 363 como personalizar o Dreamweaver 553, 553583 barra do Iniciador e Iniciador 80 caixas de dilogo 568 menus 557 painel Objetos 555 princpios bsicos 94 tags, de outros fabricantes 576 como processar os formulrios 537
608
ndice remissivo
como procurar Ajuda do Dreamweaver 15 arquivos 280 atalhos 590 como salvar os padres de busca 285 expresses regulares 286 tags e atributos HTML 282 texto entre tags especcos 284 texto na fonte de HTML 282 texto nos arquivos 280 como recarregar as extenses 555 como recuar o texto 260 como redimensionar alas 295 camadas 446 clulas da tabela 207 clulas/tabelas de layout 185 elementos da pgina 295 molduras 231 como remover quadros de uma linha de tempo 463 como repetir as etapas 168 como repetir as linhas de tempo continuamente 463 como reutilizar buscas 285 itens de biblioteca 431 modelos 422 como salvar arquivos em molduras e conjuntos de molduras 225 buscas 285 documentos 160 como selecionar camadas 445 molduras e conjuntos de molduras 223 objetos na janela do documento 162 como sincronizar os sites local e remoto 154 como transferir arquivos, resoluo de problemas 152 Como utilizar o Dreamweaver com o Visual SourceSafe 136 Como utilizar os relatrios para testar um site 550 como vericar os links 546
como vincular a ncoras com nome usando o cone do indicador de arquivos 395 a documentos usando o cone do indicador de arquivos 392 a uma folha de estilos CSS externa 270 ncoras 394 documentos 391 como visualizar em navegadores atalhos 594 como visualizar nos navegadores viso geral 544 compatibilidade da camada com o Netscape 4 444 comportamentos 469, 469507 aes, como criar 477 como alterar 476 como anexar 473 como desencadear 473 como excluir 476 compatibilidade com os navegadores 478 de outros fabricantes 478 denidos 469 e formulrios 538 e imagens 304 e itens de biblioteca 434 e linhas de tempo 476 e links 407 e mdia 349 e modelos 421 conjuntos de molduras 219232 aninhadas 222 bordas 232 como designar links em 391 como nomear 227 como salvar 225 como selecionar 223 predenidos, como inserir 220 propriedades 229 Consulte tambm molduras conta-gotas 91 contedo Flash viso geral 328 contedo NOFRAMES 234 contedo, como adicionar a tabelas 197
ndice remissivo 609
controles ActiveX como inserir 344 como redimensionar 295 propriedades 345 viso geral 344 controles deslizantes, como criar 486 convenes 22 convenes tipogrcas 22 copiar e colar, HTML do Fireworks 309 cores aceitas pela Web 92 amostras 91 como criar propriedades de cores 248 como escolher 91 como propriedades. Consulte propriedades conta-gotas, como utilizar 91 contraste 162 fundo da moldura 233 fundo da pgina 161 padro do texto da pgina 162 texto, como alterar 242, 258 D dados tabulares, como importar 198 daltonismo 162 datas como inserir 253 depurador. Consulte depurador JavaScript depurador JavaScript 509 caixa de advertncia 510 como denir os pontos de interrupo 513 como examinar as variveis 516 como executar 509 depurao total, depurao circular, depurao parcial 515 erros de sintaxe 511 erros lgicos 512 janela 512 lista de variveis 516 depurador JS. Consulte depurador JavaScript desenho da Web, nveis de experincia no 20
Design Notes como adicionar opes de status 145 como congurar 143 como desativar 145 como executar um relatrio 150 como salvar as informaes sobre o arquivo 143 para documentos e objetos 143 para objetos de mdia 328 para os arquivos do Fireworks 148 relatrios 149 viso geral 142 dicionrio pessoal de ortograa 279 Director, como criar lmes Shockwave com o 338 documentos como abrir 158 como criar 158 como criar, com base em modelos 422 como denir as propriedades 160 como procurar 280 como salvar 160 como vericar os links 546 como visualizar nos navegadores 544 Design Notes, como utilizar em 142 modelos, como desanexar de 424 novo 158 tamanho do download, tempo 549 texto, como adicionar 252 ttulo da pgina 160 documentos HTML. Consulte documentos 158 Documentos sem ttulo 551 documentos vinculados, como abrir 549 E Editor de atalhos de teclado 95 editores Consulte editores externos editores de texto arquivos criados por 158 editores de texto. Consulte editores externos editores de texto HTML Consulte editores externos editores ext. HTML, viso geral 381 texto 381
610
ndice remissivo
editores externos BBEdit (no Macintosh), integrao com 382 Fireworks. Consulte Integrao entre Dreamweaver e Fireworks HomeSite (no Windows) 361 imagens 301 mdia 326 preferncia 312 elementos como alinhar 294 como visualizar os invisveis 587 elementos de mdia como inserir 325 parmetros 348 elementos invisveis comentrios 357 como mostrar e ocultar 164 como selecionar 162 preferncias 164 scripts 365 endereo de correio eletrnico como utilizar com o sistema de devolues e retiradas 140 entidades 254 erros de sintaxe 511 erros lgicos no cdigo JavaScript 512 erros no cdigo JavaScript 512 estilos 267 como aplicar os estilos personalizados 273 como converter em HTML 277 como criar 272 conitantes 275 em modelos 421 HTML 262 tabela de converso de CSS em markup de HTML 278 Consulte tambm folhas de estilos estilos CSS atributo class 272 atributos, como converter em HTML 278 como aplicar os personalizados 273 como criar 272 como exportar 274 seletores 272
estilos HTML como aplicar 264 como criar 265, 265266 como editar 266 como excluir 264 como exibir 264 como limpar 264 como modicar 266 como remover do painel 264 como utilizar em outros sites 266 cone de Novo estilo 266 estilos person. Consulte folhas de estilos estrutura de diretrios, site. Consulte sites evento onBlur 506 eventos como alterar em comportamentos 476 como desencadear aes 473 denidos 469 disponveis para diversos navegadores e objetos 470 Excel. Consulte arquivos Microsoft Excel, como importar exportar arquivos Fireworks para o Dreamweaver 310 Camadas CSS do Fireworks 310 itens de biblioteca do Fireworks 311 expresses regulares 286 extensibilidade comportamentos de outros fabricantes 478 JavaScript 575 viso geral 575 extenses 98 como recarregar 555 F lmes como inserir 325 lmes Flash como controlar 485 como inserir 335 como propriedades. Consulte propriedades como redimensionar 295 propriedades 336 viso geral 328 lmes MPEG como propriedades. Consulte propriedades
ndice remissivo
611
lmes QuickTime como inserir 341 como propriedades. Consulte propriedades lmes Shockwave como controlar 485 como inserir 338 como propriedades. Consulte propriedades como redimensionar 295 propriedades 338 viso geral 338 rewalls como denir o host e a porta 118 opes 133 Fireworks Design Notes no 148 folhas de estilos como editar as folhas de estilos externas 271 externas 269 viso geral 267 Consulte estilos folhas de estilos externas como criar 269 como editar 271 como vincular 269 fontes codicaes, como denir fontes para 93 como alterar as caractersticas 257 como alterar as combinaes 260 formatos de arquivos, imagem 289 formulrios botes Enviar 536 campo de senha 524 campos, como validar 506 como adicionar a um documento 522 como adicionar diversos objetos 536 como criar 522 como criar campos de arquivos 528 como inserir tabelas 537 como processar 537 comportamentos, como utilizar com 538 criao de scripts do servidor 538 criao de scripts pelo cliente 537 menus de salto, como criar 402 objetos, como adicionar 524 viso geral 519 fotograas 289
FTP como determinar um diretrio do host 134 como estabelecer a conexo a um servidor da Web 132 como transferir arquivos com 132 registro 152 resoluo de problemas 138 fundo imagem e cor da pgina 161 transparncia no 161 G grade como encaixar as camadas na 448 como guia 165 como mostrar 183, 448 encaixar na 183 espaamento 183 grcos Consulte imagens Grupo de discusso do Dreamweaver 16 guia Informaes bsicas (Design Notes) 144 guia Todas as informaes (Design Notes) 144 guias visuais imagens de rastreamento 166 rguas 165 viso geral 165 H home page, como denir 128 HomeSite (no Windows) 361 hr (rgua horizontal), como inserir 261 HTML atualizar HTML do Fireworks colocado no Dreamweaver 321 copiar e colar do Fireworks para o Dreamweaver 309 inserir do Fireworks no Dreamweaver 308 HTML do Microsoft Word como importar 379 como limpar 379 HTML do Word. Consulte HTML do Microsoft Word
612
ndice remissivo
I cone de Abrir a folha de estilos 270 imagem espaadora 194 imagens atalhos 593 como alinhar 259 como alterar o arquivo de origem com as linhas de tempo 464 como aplicar comportamentos a 304 como editar 301 como inserir 291 como inserir na visualizao de layout 183 como permutar (comportamento) 503 como pr-carregar (comportamento) 495 como propriedades. Consulte propriedades como redimensionar visualmente 295 como restaurar as permutadas (comportamento) 504 editores de imagens externos 301 em tabelas 198 formatos, com suporte 289 mapas de imagens 296 propriedades 292 redimensionamento 295 imagens cambiveis 299 como criar 300 como criar um link 300 como testar 300 imagens de rastreamento 166 imagens espaadoras 192 preferncias 192 imagens GIF como imagem de rastreamento 166 utilizaes de 289 imagens JPEG como imagem de rastreamento 166 utilizaes de 289 imagens PNG como imagem de rastreamento 166 utilizaes de 289 ndice, Ajuda 15 informaes do servidor da Web 132 Iniciador barra do Iniciador 79 Iniciador e barra do Iniciador botes padro 77 como personalizar 80
Iniciar e editar, preferncias 314 iniciar o Fireworks a partir do Dreamweaver. Consulte Integrao entre Dreamweaver e Fireworks inserir HTML do Fireworks no Dreamweaver 308 imagens do Fireworks no Dreamweaver 308 inspetor de cdigo como abrir 363 janela do documento, como alternar para 363 inspetor de imagens 296 inspetor de propriedades como ajustar os links rompidos 548 como exibir 85 como expandir 85 imagens 292 pontos ativos 297 propriedades dos controles ActiveX 345 propriedades dos lmes Flash 336 propriedades dos lmes Shockwave 338 propriedades dos itens de biblioteca 436 propriedades dos miniaplicativos Java 347 propriedades dos plug-ins do Netscape Navigator 342 inspetores atalhos 597 como abrir/fechar com a barra do Iniciador 79 inspetor de imagens 296 inspetor de propriedades 85 Consulte tambm painis integrao com o BBEdit (no Macintosh) 382 integrao com o SourceSafe 135 integrao com o WebDAV 135 integrao entre Dreamweaver e Fireworks atualizar HTML do Fireworks 321 comando Otimizar imagem no Fireworks 317 criar lbuns de fotograas na Web 322 editar animaes do Fireworks 320 exportar Camadas CSS 310 exportar itens de biblioteca Dreamweaver 311 iniciar e editar imagens do Fireworks 315 iniciar e editar tabelas do Fireworks 316 iniciar e otimizar imagens do Fireworks 317 inserir arquivos do Fireworks 307 Notas de Design 313 preferncia de editor externo 312 preferncias Iniciar e editar 314 redimensionar imagens do Fireworks 319
ndice remissivo
613
integrao entre Fireworks e Dreamweaver. Consulte Integrao entre Dreamweaver e Fireworks interatividade 19 introduo ao Dreamweaver 20 itlico 257 itens de biblioteca 429436 como adicionar s pginas 431 como alterar a cor de realce 430 como criar 429 como editar 431 como editar os comportamentos em 434 como excluir 433 como propriedades. Consulte propriedades como tornar editveis os itens de documentos 434 preferncias 430 propriedades 436 viso geral 429 itens de biblioteca, exportar do Fireworks 311 J janela do documento barra de ttulo 76 barra do Iniciador 77 como abrir documentos 158 como executar os plug-ins do Navigator 343 como procurar texto 280 como redimensionar 77 como selecionar os elementos 162 inspetor de cdigo, como alternar para 363 menu pop-up Tamanho da janela 76 molduras na 225 princpios bsicos 76 seletor de tags 76 tamanho da pgina e tempo de download 76 janela do site comando Colocar 152 comando Obter 151 como alterar a exibio 120 como exibir os sites locais 119 como procurar arquivos 130 como procurar texto 280 mapas de sites 120 opes da barra de ferramentas 115 princpios bsicos 119 viso geral 114 visualizao do mapa do site 115 visualizao dos arquivos do site 115
janelas atalhos 597 Consulte tambm inspetores, painis JavaScript aes 470 alertas 494 arquivos 158 como estender os recursos do Dreamweaver 575 como executar 480 como inserir os scripts 365 JavaServer Pages (JSP) 581 JSP (JavaServer Pages) 581 L layout de pgina Consulte visual. de layout, modelos layout, planejamento 106 Consulte visual. de layout, modelos linhas de tempo atalhos 592 cabeote de execuo 459 caminhos complexos 462 como adicionar e remover quadros 463 como adicionar objetos s 461 como alterar as propriedades das camadas 464 como alterar o arquivo de origem da imagem 464 como anexar um comportamento 476 como controlar com os comportamentos 468 como criar 461 como executar automaticamente 463 como executar e parar utilizando os comportamentos 505 como modicar 463 como repetir continuamente 463 dicas de animao 467 em modelos 421 mltiplas 465 quadros primrios 461
614
ndice remissivo
links a ncoras 394 a folhas de estilos 269 a um documento 390 arquivo de cache 398 atalhos 593 como abrir a origem 399 como ajustar 547 como alterar as molduras com 233 como alterar no site inteiro 400 como aplicar seleo 242 como atualizar 398 como designar 390 como remover 399 como testar 546 como vericar 546 mapa do site 399 relativos a documento 391 relativos raiz do site 391 links de correio eletrnico como alterar 400 como criar 396, 397 links de scripts como alterar 400 como criar 397 links externos 546 links nulos como alterar 400 como criar 397 links rompidos 546 lista de variveis 516 lista Favoritos (painel Propriedades). Consulte propriedades 241 lista Site como atualizar 240 listas como criar 256 listas de rolagem 532 listas no-ordenadas, como criar 256 M Macromedia Director, como criar lmes Shockwave com o 338 macros (como criar comandos) 173 manipuladores de eventos. Consulte eventos
Manual Como utilizar o Dreamweaver 14 mapa de percurso (onde iniciar) 20 mapas de bits, como redimensionar 295 Consulte tambm imagens mapas de imagens como criar para o cliente 296 como selecionar vrios pontos ativos 298 pontos ativos 296 viso geral 296 mapas de imagens do servidor 296 mapas de sites atalhos 595 comando Atualizar o local 128 comando Denir como home page 128 comando Link a um arquivo existente 127 comando Link a um novo arquivo 127 como adicionar arquivos ao site 127 como alterar os links nos 399 como atualizar aps as alteraes 128 como editar as pginas 126 como exibir 120 como exibir uma ramicao dos 129 como expandir uma ramicao 130 como marcar os arquivos como ocultos 129 como mostrar os arquivos dependentes nos 129 como reduzir uma ramicao 130 como remover os links nos 399 como renomear as pginas nos 127 como salvar como um arquivo de imagem 130 como selecionar vrias pginas nos 126 links 399 mostrar os arquivos ocultos 129 opo Exibir os arquivos dependentes 129 opo Mostrar os ttulos das pginas 127 marcadores de elementos invisveis 164 material de referncia 25 menu cabealho da coluna 191 menu Comandos, como editar 558 menu pop-up como criar 533 menu pop-up Tamanho da janela 76 menus contextuais 80, 82 como personalizar 559 menus de atalhos. Consulte menus contextuais
ndice remissivo
615
menus de salto 401 botes Ir 491 botes Ir, como adicionar automaticamente 402 como adicionar os itens de menus 402 como alterar os itens de menu 403 como criar um aviso de seleo para 402 como editar 491 menus, como personalizar 557 Microsoft Word arquivos, como abrir 159 miniaplicativos. Consulte miniaplicativos de Java miniaplicativos Java como inserir 325, 346 como redimensionar 295 propriedades 347 viso geral 346 Mini-iniciador. Consulte Iniciador e barra do Iniciador 77 modelos 409428 atalhos 595 como alterar as cores de realce 417 como aplicar a um documento j existente 422 como aplicar ao documento 242 como clicar em regies bloqueadas 419 como criar 411 como criar modelos de boto Flash 335 como criar novos documentos com 159, 422 como denir as regies editveis 416 como desanexar um documento de 424 como editar 411, 412 como exibir as regies 418 como localizar as regies editveis 424 como modicar 424 como propriedades. Consulte propriedades como renomear 412 como tornar uma regio no-editvel 421 como utilizar as linhas de tempo 421 como utilizar os comportamentos 421 como utilizar os estilos 421 documentos com base em, como criar 422 pasta Templates 411 preferncias 417 propriedades da pgina 413 regies editveis e bloqueadas 415 viso geral 409 XML 426
molduras 217, 217235 aninhadas 222 atalhos 591 bordas 232 como alterar a cor do fundo 233 como alterar o contedo 233 como criar 219, 221 como designar 233 como excluir 221 como redimensionar 231 como salvar 225 como selecionar 223 como utilizar os links 233 compatibilidade com os navegadores 234 comportamentos, como utilizar com 235 etapas para criar 219 painel 223 propriedades 227 viso geral 217 Mostrar as guias da tabela de layout 178 Mostrar os ttulos das pginas no mapa do site 127 multimdia. Consulte mdia N navegador primrio 545 navegador secundrio 545 navegadores arquivos compatveis com a verso 3.0 457 como designar 542 como detectar 544 como visualizar nos 544 compatibilidade, como planejar 103 compatibilidade, como testar 542 cores, aceitas 92 e estilos CSS 277 pers, como criar 573 pers, como editar 571 primrio, como denir 545 secundrio, denir 545 verses, como vericar 482 Notas de Design, para integrao entre Dreamweaver e Fireworks 313 novos recursos no Dreamweaver 22
616
ndice remissivo
O objeto ncora (painel Objetos) 394 objetos atalhos 596 caixas de seleo e botes de opo 529 como adicionar a formulrios 524 como adicionar Design Notes 144 como criar 556 como inserir 252 como inserir com o painel Objetos 82 de fatia, editar fatias de tabelas do Fireworks a partir do Dreamweaver 316 objetos de boto Flash 329, 335 como modicar 331 como visualizar 331 propriedades 333 objetos de texto Flash como inserir 332 como visualizar 331 propriedades 333 objetos Generator, viso geral 337 opo Advertir quando resolver ou remover tags (preferncias de regravao de cdigo) 377 opo Ajustar os tags abertos e aninhados incorretamente (preferncias de regravao de cdigo) 377 opo Ajustar os tags aninhados incorretamente (Limpar o HTML do Word) 380 opo Aninhar sempre quando criada dentro de uma camada existente 444 opo Aplicao automtica (painel Estilos HTML) 264 opo Aplicar a formatao de origem (comando Limpar o HTML do Word) 381 opo Arquivos locais 120 opo Arquivos remotos 120 opo Ativar a devoluo e retirada de arquivos 140 opo Atualizar a lista de arquivos locais automaticamente 109, 110 Opo cache (caixa de dilogo Denio de site) 110 Opo cache (caixa de dilogo Denio do site) 109 opo caixa de cores 91 opo Caixa dos atributos (preferncias de formato de cdigo) 376 opo Caixa dos tags (preferncias de formato de cdigo) 376
opo Centralizao (preferncias de formato de cdigo) 377 opo Cdigo-fonte de HTML 282 opo Coincidir maisc./minsc. 281 opo Colocar os arquivos mais novos no remoto 155 opo colunas (Inserir tabela) 196 opo Combinar os tags aninhados sempre que possvel 379 opo Comentrios (preferncias de cores de cdigo) 375 opo Cor do link (Propriedades da pgina) 162 opo Cor do texto (Propriedades da pgina) 162 opo Cor dos links ativos (Propriedades da pgina) 162 opo Cor dos links visitados (Propriedades da pgina) 162 opo Denir a cor do fundo (Limpar o HTML do Word) 380 opo Desanexar do original 434 opo Espaamento da clula (Inserir tabela) 196 opo Especco ao tag (preferncias de cores de cdigo) 375 opo Execuo automtica 459 opo Execuo automtica (painel Linhas de tempo) 460 opo FTP 132 opo Fundo (preferncias de cores de cdigo) 374 opo Ignorar a caixa de (preferncias de formato de cdigo) 377 opo Ignorar os diferentes espaos em branco 281 opo ndice Z (para camadas) como alterar a ordem de empilhamento 453 opo Limpar as CSS 380 opo Limpar o estilo da seleo 264 opo Limpar o estilo do pargrafo 264 opo Limpar os tags <font> 380 opo linhas (Inserir tabela) 196 opo Linhas e colunas da tabela (preferncias de formato de cdigo) 376 opo Local/Rede 132 opo Loop 459 opo Molduras e conjuntos de molduras (preferncias de formato de cdigo) 376 opo Mostrar o iniciador na barra de status 79 opo Mostrar o registro quando concluir 379 opo nenhum 132
ndice remissivo
617
opo Nunca regravar o HTML em arquivos com as extenses (preferncias de regravao de cdigo) 377 opo Obter e colocar os arquivos mais novos 155 opo Obter os arquivos mais novos do remoto 155 opo Outras palavras-chave (preferncias de cores de cdigo) 375 opo Padro do tag (preferncias de cores de cdigo) 375 opo Palavras-chave reservadas (preferncias de cores de cdigo) 375 opo Preenchimento da clula (Inserir tabela) 196 opo Quebra automtica de linha (preferncias de formato de cdigo) 376 opo Quebras de linha (preferncias de formato de cdigo) 376 opo Recuo (preferncias de formato de cdigo) 376 opo Redenir o tag HTML 272 opo Remover os comentrios de HTML no pertencentes ao Dreamweaver 378 opo Remover os comentrios de HTML pertencentes ao Dreamweaver 378 opo Remover os tags adicionais de nalizao (preferncias de regravao de cdigo) 377 opo Remover os tags aninhados redundantes 378 opo Remover os tags vazios 378 opo Remover tag(s) especco(s) 378 opo Remover todo o markup especco ao Word 380 opo Retirar os arquivos na abertura 140 opo Seqncias de caracteres (preferncias de cores de cdigo) 375 opo Tamanho da tabulao 376 opo Tamanho do recuo (preferncias de formato de cdigo) 376 opo Texto (preferncias de cores de cdigo) 374 opo Utilizar (preferncias de formato de cdigo) 376 opo Utilizar a rewall 133 opo Utilizar expresses regulares 281 opo Utilizar FTP passivo 133 opo Velocidade de conexo 79 opes de acesso ao servidor 132 opes de Caracteres especiais (preferncias de regravao de cdigo) 378
opes de devoluo/retirada 140 como digitar um endereo de correio eletrnico 140 como digitar um nome de retirada 140 opes de exibio fontes 93 painis utuantes 87 opes de Localizar em 280 opes de Procurar 281 ordem de empilhamento camadas 453 como alterar com as linhas de tempo 464 ortograa como vericar 279 dicionrios, como editar 279 otimizar imagens do Fireworks a partir do Dreamweaver 317 P Package Manager 98 pginas como alterar o ttulo 160 como visualizar nos navegadores 544 cor 161 cores padro do texto 162 Design Notes, como utilizar em 142 imagem de fundo 161 projeto 106 propriedades e modelos 413 tamanho 549 tempo de download, estimativa 549 Pginas da Ajuda do Dreamweaver 14 Pginas da Ajuda e manual Como estender os recursos do Dreamweaver 16 painis atalhos 597 barra do Iniciador 79 como abrir/fechar com a barra do Iniciador 79 como denir as preferncias de paletas utuantes 87 de encaixe 86 inspetor de cdigo 90 painel Comportamentos 470 painel Histrico 87 painel Objetos 82
618
ndice remissivo
painis utuantes Consulte painis painis utuantes de encaixe 86 painel Camadas 442 painel Comportamentos 470 painel Estilos CSS 275 painel Histrico comandos, como criar a partir das etapas do histrico 173 como automatizar as tarefas com 168 como limpar a lista de histrico 89 etapas, como aplicar a outros objetos 170 etapas, como copiar e colar 172 etapas, como repetir 169 nmero mximo de etapas, como denir 89 viso geral 87 painel Linhas de tempo 459 painel Molduras 223 painel Objetos categorias 83 como personalizar 555 como recarregar 555 de encaixe 86 preferncias 84 viso geral 82 painel Referncia 358 paleta de cores Cubos de cor 91 paleta de cores Mac OS 91 paleta de cores Passar cor aceita pela Web. 91 paleta de cores Tom contnuo 91 paleta de cores Tons de cinza 91 paleta de cores Windows 91 paletas, cor 91 pasta Conguration arquivo Extensions.txt 554 arquivo menus.xml 557 arquivo SourceFormat.txt 569 subpasta Behaviors 568 subpasta BrowserProles 571 subpasta Commands 568 subpasta Objects 555 subpasta ThirdPartyTags 576
pasta raiz local 108 remoto 134 pasta raiz local 108 pastas como procurar 280 raiz 108 pastas Favoritos 248 pastas, Favoritos 248 perl de formatao da origem 569 pers formato da fonte de HTML 569 navegadores 571 PHP Hypertext Preprocessor 581 pixels transparentes no fundo 161 pixels, transparentes, no fundo 161 planejamento projeto 106 planejamento da navegao de um site 106 planejamento de sites 101 estrutura 104 objetivos 101 propriedades 107 pblico 101 plug-ins como detectar 544 como executar na janela do documento 343 como executar os atalhos 595 como redimensionar 295 como vericar 483 Netscape Navigator 342 resoluo de problemas 344 plug-ins do Netscape Navigator como executar na janela do documento 343 propriedades 342 resoluo de problemas 344 pontos ativos como aplicar comportamentos a 304 como redimensionar 299 como selecionar vrios em um mapa de imagens 298 em mapas de imagens 296 propriedades 297 pontos de interrupo no depurador Javascript 513
ndice remissivo
619
preferncias Barra de status 79 bibliotecas 430 Camadas 444 como atualizar os links 398 Cores de cdigo 374 dicionrio para vericao ortogrca 279 editores externos 326 elementos invisveis 164 fontes/codicao 93 Formato de cdigo 375 gerais 93 Iniciar e editar 314 modelo 417 Painis 87 painis utuantes 87 painel Objetos 84 Quick Tag Editor 373 regravao de cdigo 377 Site 117 Tipos de arquivos / editores 327 viso geral 92 visualizao de layout 194 Visualizar no navegador 545 Visualizar utilizando o servidor local (links relativos raiz) 389 preferncias de fontes/codicao 93 preferncias de visualizao no navegador 545 Preferncias do site 117 Preferncias dos tipos de arquivos / editores 327 preferncias gerais 93 princpios bsicos do Dreamweaver 20 processadores de texto, arquivos criados por 158 projeto das pginas 106 proporo, como manter 295 propriedade de alinhamento da imagem 292 propriedade de alternativa da imagem 293 propriedade de atualizao da imagem 293 propriedade de borda da imagem 293 propriedade de campo de nome do mapa 293 propriedade de imagem de destino 293 propriedade de linguagem do script 367 propriedade de link da imagem 292 propriedade de nome (inspetor de propriedades da imagem) 292
propriedade de origem baixa da imagem 293 propriedade de origem da imagem 292 propriedade do script de origem 367 propriedades 237, 237249 camada 449 camadas mltiplas 452 categorias 238 clulas de layout 187 colunas, linhas e clulas 204 como abrir o painel Propriedades 239 como adicionar lista Favoritos 241 como alterar com comportamentos 481 como aplicar as cores ao texto 242 como atualizar a lista Site 240 como editar 244 como exibir 85 como inserir 241 como selecionar mltiplas 243 conjunto de molduras 229 controles ActiveX 345 cores, como criar 248 documento, como denir 160 lmes Flash 336 lmes Shockwave 338 imagem 292 listas Favoritos 246 miniaplicativos Java 347 moldura 227 pastas Favoritos 248 planejamento 107 pontos ativos 297 tabela 203 tabelas de layout 188 URLs, como criar 248 viso geral 237 propriedades da pgina ttulo, como alterar 160 propriedades dos objetos Flash 333 propriedades Espao V e Espao H da imagem 293 propriedades L e U da imagem 292
620
ndice remissivo
Q qps (quadros por segundo) 459 quadros por segundo (qps) 459 quadros primrios como criar 461 viso geral 459 Quick Tag Editor como abrir 369 menu de sugestes de atributos 372 preferncias 373 viso geral 369 R ramicaes, como expandir e reduzir no mapa do site 130 recursos para informaes sobre as tecnologias da Web 25 recursos, novos no Dreamweaver 22 redimensionar imagens do Fireworks a partir do Dreamweaver 319 regies bloqueadas como clicar em 419 regies, bloqueadas como clicar em 419 rguas 165 rguas horizontais, como inserir e modicar 261 Relatrios Retirado por 149 relatrios 149 como criar 550 como testar um site com 550 uxo de trabalho 149 relatrios de devolues e retiradas 149 relatrios de uxo de trabalho 149 relatrios de site 149 requisitos do sistema No Macintosh 12 No Windows 12 resoluo de problemas como clicar em regies bloqueadas 419 como transferir arquivos 152 plug-ins do Navigator 344 Roundtrip HTML 360
S scripts chaves ajustadas 367 como editar 366 como editar externos 365 como exibir as funes 368 como inserir 365 como mostrar no documento 164 como propriedades. Consulte propriedades seo head, como editar o contedo na 167 selecionar clulas/tabelas de layout 185 seletor de cores Dreamweaver 91 sistema 91 seletor de cores do sistema 91 server-side includes 436 como editar 438 como inserir 438 viso geral 436 servidores AppleTalk 132 como denir sites remotos 132 como resolver problemas de congurao 138 NFS 132 opes de acesso 132 servidores AppleTalk 132 servidores da Web. Consulte servidores servidores NFS 132 sintaxe do menus.xml 562 sites atalhos 594 cache 398 como adicionar arquivos e pastas 121 como ajustar os links rompidos 547 como alterar a exibio 120 como alterar os links no site inteiro 400 como devolver e retirar arquivos 139 como editar o remoto 111 como exibir 119 como planejar a navegao 106 como procurar os arquivos nos 280 como remover da lista de sites 112 como selecionar os arquivos atualizados 121 como vericar os links 546 como visualizar nos navegadores 544 compatibilidade com os navegadores 103, 542
ndice remissivo
621
criar novo 108 Design Notes, como utilizar em 142 editar os existentes 110 estrutura e navegao 113 grandes, propriedades em 246 locais e remotos 101 locais, como criar 108 locais, como exibir 119 local, como associar a um servidor remoto com 132 local, como localizar arquivos no 130 local, pasta raiz 108 material de referncia 25 relatrios, como executar 149 remoto, como congurar 131 remoto, como denir 132 remoto, como localizar arquivos no 131 remoto, como resolver problemas de congurao 138 remoto, pasta raiz 134 remotos, opes de acesso 132 sites locais. Consulte sites 108 som 339, 339341 adicionar pgina 339 como executar 494 sublinhado 257 submenu Estilo 257 Sumrio, Ajuda 15 T tabelas 537 atalhos 590 clulas, como dividir 211 colunas, linhas e clulas 204 como adicionar bordas a 203 como adicionar cor de fundo a 204 como adicionar e remover linhas e colunas 208 como adicionar imagens de fundo a 204 como adicionar o contedo a 197 como ajustar as linhas e colunas 207 como alinhar 205 como alterar a largura das colunas 207 como aninhar 209
como converter a partir de camadas 455 como criar 196 como formatar 201 como importar 198 como limpar a largura e altura das clulas 208 como mesclar as clulas 211 como ordenar 214 como redimensionar 207 como selecionar os elementos 200 Consulte tabelas de layout Consulte tambm visualizao de layout formatos predenidos de 206 opo Sem quebra 205 propriedades 203 tags HTML 202 viso geral 195 Consulte tambm colunas, linhas e clulas tabelas de layout 178 alinhamento 188 aninhadas 182 como desenhar 179 como formatar 188 como limpar as alturas 188 como mover 185 como redimensionar 185 como selecionar 185 contorno 194 cor de fundo 188 espa. da clula 188 fundo 194 preench. da clula 188 preferncias 194 Remover o aninhamento 188 Remover todos os espaadores 188 Tornar consistentes as larguras 188 tag blockquote 260 tag body 167 tag map 296 tag ol 260 tag ul 260
622
ndice remissivo
tags ASP 383 blockquote 260 body 167, 353 buscas 282 CFML 383 como aplicar 258 como editar 369 como envolver com 369 como remover 373 como selecionar 162 como sobrepor 360 de outros fabricantes, como personalizar 576 em pers de navegadores 571 especicaes 577 formatao de texto 357 head 353 HTML 352 invlidos 360 ol 260 sintaxe do menus.xml 562 tabela 202 tagspec 577 ul 260 XML 360 Tags aninhados redundantes 551 Tags combinveis de fontes aninhadas 551 tags de cabealho 258 tags de outros fabricantes como impedir a regravao 582 como personalizar 576 tags de pargrafo 258 tags HTML. Consulte tags 352 tags invlidos como exibir 360 tags sobrepostos 360 Tags vazios removveis 551 tamanho da pgina, como redimensionar para que caiba no monitor 77 tamanho do monitor, como redimensionar as pginas para que caibam 77 tempo de download 76
texto alinhamento 259 atalhos de formatao 589 como adicionar a documentos 252 como alterar a cor 242, 259 como alterar as combinaes de fontes 260 como editar os atalhos 588 como formatar com os estilos HTML 262 como formatar os tags 357 como procurar nos documentos 280 como recuar 260 cor padro nas pginas 162 cor, como alterar 258 editores externos. Consulte editores externos formatao 251 Texto alternativo ausente 551 texto em negrito 257 tipo de arquivo padro, como alterar 554 tipos de arquivos arquivos Flash 328 ttulo como alterar 160 U upload annimo de arquivos 528 URLs como aplicar seleo 242 como criar propriedades de URLs 248 como propriedades. Consulte propriedades URLs. Consulte caminhos V VBScript 365 viso geral das lies 13 viso geral do Dreamweaver 11 Viso geral do Tour guiado 13 visual. de layout atributos Limpar a altura 188 como alternar para 177 como formatar tabelas de layout 188 contorno da tabela 194 espaadores de insero autom. 194 espaamento da clula 188 fundo 194 mover clulas/tabelas de layout 185 preench. da clula 188
ndice remissivo 623
realce da clula 194 redimensionar clulas/tabelas de layout 185 Remover o aninhamento 188 Remover todos os espa. 188 selecionar clulas/tabelas de layout 185 sobre clulas e tabelas de layout 178 Tornar consistentes as larg. 188 viso geral 177 Visual SourceSafe integrao com o Dreamweaver 136 visualizao de cdigo como abrir 362 como abrir os arquivos no-HTML 368 como gravar e editar o cdigo 365 como organizar as visualizaes 363 opes 364 Visualizao de layout 177194 visualizao de layout 177 alongamento automtico 189 como adicionar o contedo a 183 como denir a largura 189 como desenhar clulas e tabelas de layout 179 como formatar as clulas de layout 187 como limpar as alturas das clulas 184 grade 183 imagens espaadoras 192 largura xa 189 menu cabealho da coluna 191 preferncias 194 preferncias de imagem espaadora 192 tabelas de layout aninhadas 182 visualizao do projeto como exibir utilizando a visualizao de cdigo 362 como organizar as visualizaes 363 visualizao dos arquivos do site 121 X XML 427 arquivo menus.xml 562 em modelos 426 notaes de tags para a exportao 428 tag tagspec 577 tags 360 viso geral 427
624
ndice remissivo

Dream Weaver

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Dream Weaver

Diunggah oleh

Hak Cipta:

Format Tersedia

Usando o Dreamweaver

Um processador Pentium da Intel ou equivalente, de 166 MHz ou mais rpido,

A verso 4.0 ou mais avanada do Netscape Navigator ou do Microsoft Internet

32 MB de memria de acesso aleatrio (RAM) e 110 MB de espao disponvel

Como instalar o Dreamweaver

Siga as instrues na tela. Se for solicitado, reinicie o computador.

A Ajuda do Dreamweaver inclui os seguintes componentes:

Para procurar uma frase, basta digit-la no campo de texto.

A ajuda contextual fornece

Barra de navegao da Ajuda do Dreamweaver fornece botes nos quais o usurio

Fluxo de trabalho de desenvolvimento da Web

Determine a estratgia a ser adotada e as questes que envolvem o usurio que

Utilize o mapa do site do Dreamweaver para denir a estrutura organizacional

Congurao de sistemas que evitaro que os membros de uma equipe

Utilize as Design Notes para se comunicar com os membros de uma equipe da

Criar documentos HTML no Dreamweaver, adicionando facilmente o ttulo

A visualizao de layout do Dreamweaver e as ferramentas de layout permitem

Utilize o painel Objetos do Dreamweaver para projetar e adicionar rapidamente

O painel Propriedades permite organizar facilmente as propriedades em um

Digite diretamente num documento do Dreamweaver ou importe o texto de

Insira imagens, incluindo imagens cambiveis, mapas de imagens e imagens

Adicione o contedo no editor de cdigo do Dreamweaver: Utilize a

Com o Dreamweaver, possvel criar links HTML padro, incluindo links de

Os modelos e arquivos de biblioteca do Dreamweaver permitem aplicar

Utilize as linhas de tempo para criar animaes que dispensam plug-ins,

Utilize os comportamentos para realizar tarefas em resposta a determinados

Depure o cdigo JavaScript personalizado. Consulte Como depurar o cdigo

Utilize o Depurador Javascript para ajudar a corrigir erros de JavaScript no seu

Execute vericaes de navegador e plug-in, teste e corrija links em seus

Na janela do site do Dreamweaver, voc obter vrias ferramentas para ajudar a

Para os designers da Web experientes, familiarizados com o Dreamweaver 3:

Fonte do cdigo em itlico

indica os itens substituveis (s vezes denominados

Texto romano em negrito indica o texto a ser digitado exatamente conforme a

Editores de cdigo integrados a

Projetos de pgina mais fceis

Como dinamizar o fluxo de trabalho

Interface comum do usurio

Recursos de tecnologias da Web e HTML

author/dhtml/reference/events.asp#om40_event) contm informaes sobre os eventos no Microsoft Internet Explorer.

sobre as JavaServer Pages (JSP).

contm informaes sobre o PHP: pr-

ColdFusion/) contm informaes sobre ColdFusion.

Faa um tour guiado no Dreamweaver

A rea de trabalho do Dreamweaver

Se ainda no tiver iniciado o Dreamweaver, clique duas vezes no cone do

barra do Iniciador inspetor de propriedades

O Dreamweaver fornece muitos painis utuantes, como o painel Estilos

A barra do Iniciador contm botes para abrir e fechar os inspetores e os painis

O inspetor de propriedades exibe as propriedades do objeto ou texto

Configurar a estrutura do site do tutorial

Se ainda no conhecer o Dreamweaver, recomendvel denir o site local do

Se j estiver familiarizado com a denio de sites utilizando o Dreamweaver,

Definir um site local

Clique no cone de pasta, situado direita do campo Pasta raiz local.

Em Cache, siga um dos procedimentos abaixo: site.

Clique em OK, para fechar a caixa de dilogo.

Criar a home page do site

Desenhar uma pgina na visualizao de layout

No painel Objetos, clique no cone de Visualizao de layout, se ainda no estiver selecionado.

Revise as opes e, em seguida, clique em OK, para fechar a caixa de dilogo.

No inspetor de propriedades da clula de layout, digite 510 no campo Fixo,

No lado direito da clula de layout, arraste a ala de redimensionamento

Solte o mouse, para ver as clulas agrupadas em uma nova tabela.