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>Este pargrafo est controlado pelo estilo personalizado .Blue e pelo estilo h1 de tag HTML.Exceto pelo fato de esta sentena ser controlada pelo estilo .Red. Agora, estamos de volta ao estilo .Blue.</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 co 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 tenta
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 ou . 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 e 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.> 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 Cabealho 1, 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 ou . 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 est no meio da frase; basta mover 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 no HTML informa ao navegador que o texto subseqente deve estar em itlico. A colocao de 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> Welcome to my page The p is a paragraph tag, which tells the browser that this is all one paragraph. </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> I am a two-year-old part Siamese cat who lives in San Francisco with my two owners. <img src="cat.gif" width="400" height="250 align=center> I like to eat all kinds of food, especially cheese. </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:
 I am a two-year-old Siamese cat who lives in San Francisco with my two owners. I like to eat all kinds of food, especially cheese. 
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:
This text will appear bold in the Web page. This text will appear italic in the Web page. This text will display with the Verdana font face and will be larger than the other text.
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>text</MyNewTag>.
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 algum texto, 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: text ser regravado como text. 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:
 e so considerados tags vazios, mas no o tag em algum texto.
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,
redundantes de um tag. Por exemplo: no cdigo Isto exatamente 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 aninhados sempre que possvel consolida dois ou mais
tags font, quando eles controlarem a mesma faixa de texto. Por exemplo: grande e vermelho seria alterado para grande e vermelho.
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 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

Idioma

Bem-vindo(a) ao Scribd!

Dream Weaver

Enviado por

Dados do documento

Data de envio

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Descrição:

Direitos autorais:

Formatos disponíveis

Dream Weaver

Enviado por

Descrição:

Direitos autorais:

Formatos disponíveis

Títulos relacionados

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