Escolar Documentos
Profissional Documentos
Cultura Documentos
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 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
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
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
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 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
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
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
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.
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
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.
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.
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.
metassmbolos) no cdigo.
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
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.
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
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.
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.
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/
contm informaes
processador de hipertexto.
A pgina de produtos ColdFusion da Allaire (http://www.allaire.com/Products/
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
No Dreamweaver, escolha Ajuda > Tour guiado. Clique no ttulo de um lme. Quando tiver terminado, feche o lme.
Barra de ferramentas
janela do documento
painel Objetos
painel flutuante
seletor de tags
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.
30
Captulo 1
Tutorial do Dreamweaver
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
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
Tutorial do Dreamweaver
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.
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
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.
Tutorial do Dreamweaver
35
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.
Tutorial do Dreamweaver
37
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
Aparecer a caixa de dilogo Guia de introduo para a visualizao do layout, que descreve as opes desta visualizao.
2
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.
Tutorial do Dreamweaver
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.
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.
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.
Tutorial do Dreamweaver
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
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.
Tutorial do Dreamweaver
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.
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:
Tutorial do Dreamweaver
45
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.
Tutorial do Dreamweaver
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
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.
Tutorial do Dreamweaver
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.
Tutorial do Dreamweaver
51
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.
Tutorial do Dreamweaver
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.
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.
Tutorial do Dreamweaver
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.
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
Tutorial do Dreamweaver
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.
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
Escolha Janela > Propriedades. Clique no cone de Mostrar a propriedade, na barra do Iniciador.
Aparecer o painel 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.
Tutorial do Dreamweaver
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.
Tutorial do Dreamweaver
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
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.
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.
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.
No campo Texto, digite Destino principal. No campo Salvar como, digite myText.swf.
4
Tutorial do Dreamweaver
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.
Tutorial do Dreamweaver
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
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.
Tutorial do Dreamweaver
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.
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
Tutorial do Dreamweaver
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.
Tutorial do Dreamweaver
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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
Barra de ferramentas
painel Objetos
menu contextual
janela do documento
seletor de tags
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.
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
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
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.
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.
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.
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
Visualizar no navegador
Navegao do cdigo
80
Captulo 2
Para exibir o menu pop-up Status do arquivo, clique no boto do menu Status
do arquivo.
Para navegar pelo cdigo, clique no boto Navegao do cdigo. Para obter
mais informaes, consulte Como depurar o cdigo JavaScript na pgina 509.
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 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
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.
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:
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.
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
Clique em uma caixa de cores, em qualquer caixa de dilogo ou no inspetor de propriedades. O seletor de cores aparecer.
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 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
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
Para obter informaes sobre a incluso de animao no seu site com os lmes
Flash, consulte Sobre o contedo Flash na pgina 328.
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
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
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
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.
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
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.
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
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.
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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.
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
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
Sobre_a_empresa
Sobre_a_empresa
Catlogo
Propriedades
Catlogo
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
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
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.
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
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.
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.
pblico_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
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.
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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.
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:
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
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
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
Escolha Janela > Mapa do site. Se anteriormente, apenas o mapa tivesse sido
exibido, sem os arquivos do site, esta janela exibir apenas o mapa.
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.
120
Captulo 4
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
Escolha Janela > Arquivos do site, para abrir a janela do site na visualizao dos
arquivos do 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.
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.
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
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).
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.
123
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
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.
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.
Clique duas vezes no arquivo. Selecione o arquivo e escolha Arquivo > Abrir a seleo (no Windows) ou Site >
Abrir (no Macintosh).
126
Captulo 4
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
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
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.
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
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
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
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.
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).
132
Captulo 4
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:
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
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
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
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
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
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
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.
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.
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.
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.
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.
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
Clique em OK.
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
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.
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.
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:
Na coluna Notas da janela do site, clique duas vezes no cone amarelo das
Design Notes.
144
Captulo 4
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.
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.
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
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:
146
Captulo 4
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.
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.
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
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.
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 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
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).
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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
158
Captulo 5
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
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
160
Captulo 5
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).
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:
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
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 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
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.
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.
Escolha Exibir > Imagem de rastreamento > Ajustar a posio. Siga, ento, um dos procedimentos abaixo:
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
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.
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
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.
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
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
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.
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.
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.
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
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.
Selecione um objeto ao qual deseja aplicar o comando ou coloque o ponto de insero no local desejado. Escolha o comando 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.
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):
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).
Escolha Comandos > Executar o comando gravado, ou pressione as teclas Control e P (no Windows), ou Command e P (no Macintosh).
175
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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
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.
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.
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
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
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.
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.
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.
Clique na clula de layout em que deseja inserir o texto e siga um dos procedimentos abaixo:
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
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
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.
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
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.
187
Como formatar as tabelas de layout possvel denir a largura e altura, o preenchimento e o espaamento, entre outros, no inspetor de propriedades.
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.
188
Captulo 6
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
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.
192
Captulo 6
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
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
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
194
Captulo 6
CAPTULO 7
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.
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
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
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.
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.
197
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.
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.
Clique em OK.
199
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.
200
Captulo 7
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.
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.
203
Para definir o preenchimento e espaamento da clula, escolha uma das seguintes opes:
Utilize o campo Brdr Color (Cor da borda), para selecionar uma cor de borda
para a tabela inteira.
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).
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.
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.
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.
206
Captulo 7
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.
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.
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
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
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
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
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.
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
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.
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 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.
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
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).
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
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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.
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.
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.
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:
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
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
Escolha Janela > Molduras. Pressione as teclas Control e F10 (no Windows), ou Command e F10 (no
Macintosh).
223
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:
224
Captulo 8
225
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.
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:
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.
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.
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
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:
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.
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).
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.
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
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.
_top abre o link no conjunto de molduras mais externa do documento, substituindo todas as molduras.
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.
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
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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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.
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.
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
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.
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 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
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.
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
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
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 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:
246
Captulo 9
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 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.
248
Captulo 9
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.
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.
249
250
Captulo 9
10
CAPTULO 10
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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.
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:
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
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
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
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).
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.
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
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).
257
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.
258
Captulo 10
1 2
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.
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.
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
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
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 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
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
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).
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
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
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
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.
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.
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
267
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.
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
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.
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
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.
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.
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
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.
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:
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
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
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
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 da palavra no-reconhecida pelo texto digitado na caixa Alterar para, ou pela seleo na lista Sugestes.
Alterar todas substitui
279
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.
280
Captulo 10
Utilize a opo Procurar, para especicar o tipo de busca a ser efetuada. no cdigo-fonte HTML. Consulte Sobre as buscas de cdigo-fonte HTML na pgina 282.
A escolha de Cdigo-fonte permite procurar determinadas seqncias de texto A escolha de Texto permite procurar determinadas seqncias de texto na janela
do documento. Uma busca de texto ignora qualquer HTML que interrompa a seqncia. Por exemplo: uma busca de o co preto coincidiria com o co preto e o <i>co</i> preto..
Utilize uma das seguintes opes para expandir ou limitar a busca: exatamente com a caixa do texto a ser localizado. Por exemplo: se voc tentar localizar o chapu marrom, no encontrar O chapu marrom.
Nota: A opo Ignorar os diferentes espaos em branco trata qualquer espao em branco como espao simples, com o intuito de coincidir com a busca. Por exemplo: com esta opo selecionada, este texto coincidiria com este texto, porm no com estetexto. Esta opo no estar disponvel quando Utilizar expresses regulares estiver selecionada; neste caso, ser necessrio escrever textualmente a expresso normal, a fim de ignorar qualquer espao em branco Observe que os tags <p> e <br> no so considerados espao em branco.
281
Nota: Se voc estiver trabalhando na visualizao de cdigo, fizer alteraes no seu documento e tentar localizar e substituir qualquer item que no seja cdigo-fonte, aparecer uma caixa de dilogo informando que o Dreamweaver est sincronizando as duas visualizaes antes de efetuar a busca. Para obter mais informaes sobre a sincronizao de visualizaes, consulte Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) na pgina 361.
Sobre as buscas de cdigo-fonte HTML Utilize a opo Cdigo-fonte HTML, na caixa de dilogo Localizar e substituir, para procurar seqncias especcas de texto no cdigo-fonte HTML. Por exemplo: uma busca de co preto no seguinte cdigo coincidiria com duas instncias (no atributo alt e na primeira frase):
<img src="barnaby.gif" width="100" height="100" alt=Barnab, um co preto.><br> Ontem, vimos vrios ces pretos no parque. O co <a href=barnab.html>preto</a> de que mais gostamos se chama Barnab.
A frase co preto tambm aparece na segunda orao, porm ela no coincide com a busca, pois interrompida por um link. Consulte Como procurar e substituir texto, tags e atributos na pgina 280 para obter instrues passo a passo que explicam como iniciar uma busca. Como procurar os tags e atributos HTML Utilize a opo Tag especco, na caixa de dilogo Localizar e substituir, para procurar tags, atributos e valores de atributos especcos. Por exemplo: possvel procurar todos os tags img sem o atributo alt. Consulte Como procurar e substituir texto, tags e atributos na pgina 280 para obter informaes sobre os vrios tipos de buscas.
Para realizar uma busca de tag:
Escolha Editar > Localizar e substituir, e especique em quais arquivos dever ser feita a busca, conforme a explicao em Como procurar e substituir texto, tags e atributos na pgina 280. Escolha Tag especco, no menu pop-up Procurar. Escolha um tag especco no menu pop-up ao lado do menu pop-up Procurar, ou selecione [qualquer tag]. Se desejar apenas procurar todas as ocorrncias do tag especicado, pressione o boto com o sinal de subtrao (-) e passe etapa 6. Caso contrrio, prossiga na etapa 4.
2 3
282
Captulo 10
Limite a busca, utilizando um dos seguintes modicadores de tags: que este coincida com o critrio de busca. possvel especicar um determinado valor deste atributo ou escolher [qualquer valor].
Escolha Com atributo, para selecionar um atributo que deva estar no tag, para Escolha Sem atributo, para selecionar um atributo que no deva estar no tag,
para que este coincida com o critrio de busca. Por exemplo: escolha esta opo para procurar todos os tags IMGsem o atributo ALT.
Escolha Contendo, para especicar um texto ou tag que deve estar contido
no tag original para que haja coincidncia. Por exemplo: no cdigo <b><font face="Arial">Cabealho 1</font></b>, o tag font est contido no tag b.
Escolha 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.
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.
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.
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.
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}
{n,m}
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 ([^a-f] equivale a [^abcdef], por exemplo]). Um limite de palavra (como um espao ou retorno de carro).
[^abc]
\b
\B
\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.
\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
\t \w
287
Caractere \W
Control e Enter ou Shift e Enter (no Windows), ou Control e Return, Shift e Return ou Command e Return (no Macintosh)
Caractere de retorno. Verifique se a opo Ignorar os diferentes espaos em branco est desmarcada ao efetuar essa busca, quando no forem utilizadas as expresses regulares. Observe que esse procedimento coincidir com um determinado caractere, mas no a noo geral de quebra de pgina; por exemplo: no coincidir com um tag <br> ou <p>. Os caracteres de retorno aparecem como espaos na janela do documento e no como quebras de linha.
Utilize parnteses para denir grupos nas expresses regulares que sero mencionadas posteriormente; utilize $1, $2, $3, etc. (utilize ($) no campo Localizar e (\) no campo Substituir para referir-se ao primeiro, segundo, terceiro, etc. grupos de parnteses. Por exemplo: a busca de (\d+)\/(\d+)\/(\d+) e sua substituio por $2/$1/$3 troca o dia e o ms em uma data separada por barras inclinadas (na converso entre o formato de datas americanas e europias).
288
Captulo 10
11
CAPTULO 11
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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
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).
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
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
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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 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
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.
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.
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
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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
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
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
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.
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.
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.
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
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.)
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.
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.
320
Captulo 12
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.
321
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 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
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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.
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.
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.
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.
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.
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.
327
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.
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.
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.
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.
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
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.
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.
conveniente visualizar o documento no navegador, para examinar a aparncia exata do boto Flash.
331
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.
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.
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
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.
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.
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
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
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 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
carregada.
Loop repete
Redefinir o tamanho
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.
337
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
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
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 lme.
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.
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.
341
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
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.
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:
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.
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
o parmetro opcional ID do ActiveX. Este parmetro utilizado mais freqentemente para passar informaes entre os controles ActiveX.
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
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.
347
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.
348
Captulo 13
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.
349
350
Captulo 13
14
CAPTULO 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Embora o Macromedia Dreamweaver permita criar e editar visualmente as pginas da Web, sem a necessidade de o usurio preocupar-se com o cdigo-fonte HTML, s vezes necessrio acessar o HMTL subjacente da pgina. A possibilidade de editar o HTML pode lhe proporcionar mais controle ao modicar e solucionar problemas na pgina da Web. Por exemplo: suponha que voc selecionou um texto no seu documento e aplicou uma nova fonte, mas esta apareceu apenas na metade da frase. Ao examinar o cdigo HTML na visualizao de cdigo do Dreamweaver (ou no inspetor de cdigo), voc descobre que o tag de nalizao </font> est no meio da frase; basta mover </font> para o nal da frase e o problema ser corrigido. Uma boa maneira de aprender como funciona o HTML utilizar os recursos de edio visual, juntamente com a visualizao de cdigo (ou inspetor de cdigo) do Dreamweaver. possvel comparar o cdigo HTML exibio visual para examinar como correspondem. O Dreamweaver fornece acesso ao cdigo HTML atravs da visualizao de cdigo, do inspetor de cdigo e do Quick Tag Editor. Para obter ajuda na compreenso e gravao do cdigo HTML, utilize o painel Referncia do Dreamweaver. O Dreamweaver tambm permite abrir os arquivos HTML gravados em outro local, sem a preocupao com o comprometimento do cdigo. O Dreamweaver utiliza o Roundtrip HTML para garantir que o contedo e a estrutura do HTML no seja alterada durante a alternncia entre o Dreamweaver e um editor de HTML externo. Alm disso, o Dreamweaver pode ser utilizado para limpar os arquivos HTML que contm cdigo ilegvel ou confuso.
351
352
Captulo 14
Tags do cabealho A seo head (envolta por tags head) contm apenas o ttulo da pgina (envolto pelos tags title ) e os scripts de programao. Por exemplo: cdigo JavaScript que implementa um cmbio de imagens usando o mouse na pgina. O texto colocado entre <title> e </title> aparecer no alto da barra de ttulo da janela do navegador. Mas no ser mostrado na pgina. Por exemplo: o HTML seguinte resulta na pgina mostrada abaixo:
<html> <head> <title>Purcy the cat</title> </head>
353
Tags de corpo do texto O corpo do texto do documento acomoda o contedo da pgina. Todo o texto, imagens, tabelas e qualquer outro contedo devem ser colocados entre <body> e </ body>.
<html> <head> <title>Purcy the cat</title> </head> <body> <center> <h2> Welcome to my home page. </h2> <p> I am a two-year-old part Siamese cat who lives in San Francisco with my two owners. </p> <br> <img src="cat.gif" width="400" height="250 align=center> <br> <p> I like to eat all kinds of food, especially cheese. </p> </center> </body> </html>
Todos os tags na seo body do exemplo podem ser utilizados para formatar o contedo.
354
Captulo 14
Os tags de cabealho ou seja, h1 a h6 marcam o texto como cabealho. Normalmente, os cabealhos so exibidos na pgina da Web com texto maior ou mais escuro do que o corpo do texto comum; h1 o tamanho maior e h6 o menor. necessrio colocar sempre o tag de abertura antes do contedo, seguido de um tag de nalizao, no nal do contedo, como no exemplo abaixo:
<h1>Este um cabealho 1</h1>
separam o texto em pargrafos. Como os navegadores da Web quebram automaticamente as linhas e ignoram os retornos de carro, os tags p devem ser utilizados para evitar que os navegadores exibam o texto inteiro sem nenhuma separao. O tag p adiciona espao em branco extra entre as linhas. necessrio colocar sempre o tag de abertura antes do contedo do pargrafo, seguido do tag de nalizao no nal do contedo, como neste exemplo:
<p> I am a two-year-old Siamese cat who lives in San Francisco with my two owners. </p> <p> I like to eat all kinds of food, especially cheese. </p>
Tags de quebra de linha (br) foram as quebras de linha na pgina, em vez de adicionar espao em branco extra, como o tag de pargrafo. Como o tag br insere uma nica quebra de linha, no necessrio incluir um tag de nalizao.
355
aspas. Os tags de imagem tambm contam com atributos que podem acompanhlos. Por exemplo: width, height, border, align e valign. Os atributos width e height especicam o tamanho da imagem a ser interpretado pelo navegador; a largura da borda pode ser denida como 0 ou um nmero maior (como padro, as imagem contm uma borda quando so utilizadas como links). Os atributos align e valign denem o alinhamento da imagem: align (para alinhamento horizontal) pode ser denido como left, right ou center, e valign (alinhamento vertical) como top, bottom ou middle. O exemplo a seguir mostra um tag de imagem completo:
<img src="cat.gif" width="400" height="250 align=center>
356
Captulo 14
Tags de formatao de texto O cdigo-fonte HTML pode ser utilizado para formatar o texto em uma pgina da Web. possvel especicar negrito ou itlico para o texto, e exibi-lo com uma determinada fonte. Por exemplo:
<b>This text will appear bold in the Web page</b>. <i>This text will appear italic in the Web page</i>. <font face=verdana size=2>This text will display with the Verdana font face and will be larger than the other text.</font>
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.
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
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
360
Captulo 14
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 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 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.
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.
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.
365
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.
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
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.
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:
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).
368
Captulo 14
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.
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
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.
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
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.
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:
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:
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 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
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:
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
a cor de fundo da visualizao de cdigo (ou do inspetor de cdigo). Essa cor aparecer apenas quando o usurio clicar ou digitar na visualizao de cdigo ou no inspetor de cdigo.
Texto especica
a cor do texto que aparece entre os tags. Por exemplo: no cdigo <b>algum texto</b>, a palavra texto aparece na cor especicada para o texto, mas no os tags. Para anular a cor do texto de um tag especco, selecione a opo Incluir o contedo.
374
Captulo 14
Comentrios especica
-->)
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
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
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.
o tipo de servidor remoto (Windows, Macintosh ou UNIX) que serve de host para o site remoto. A escolha do tipo adequado dos caracteres de quebra de linha assegura que o cdigo-fonte HTML aparecer corretamente quando exibido no servidor remoto. Observe que, para o FTP, essa denio aplica-se apenas ao modo de transferncia binria; o modo de transferncia ASCII do Dreamweaver ignora esse parmetro. Quando efetuado o download dos arquivos no modo ASCII, o Dreamweaver dene as quebras de linha com base no sistema operacional do computador; se for efetuado upload dos arquivos no modo ASCII, todas as quebras de linha sero denidas para CR LF. Essa denio tambm til quando se est trabalhando com um editor de texto externo que reconhece apenas determinados tipos de quebras de linha. Por exemplo: utilize CR LF (no Windows), se o Bloco de Notas for o editor externo e, no Macintosh, utilize CR, no caso do SimpleText.
Caixa dos tags e Caixa dos atributos controlam
a caixa alta ou baixa dos nomes de tags e atributos. Estas opes so aplicadas a tags e atributos inseridos ou editados na janela do documento, mas no aos inseridos diretamente na visualizao de cdigo (ou no inspetor de cdigo), ou queles inseridos em um documento quando este for aberto (a menos que uma ou ambas as opes em Ignorar a caixa de estejam selecionadas).
376
Captulo 14
Ignorar a caixa de: Tags e Atributos especica se as opes de caixa denidas sero implementadas sempre, inclusive quando for aberto um documento HTML existente. Quando uma destas opes for selecionada, todos os tags ou atributos nos documentos abertos sero imediatamente convertidos para a caixa especicada, bem como todos os tags ou atributos abertos daqui em diante (at que seja cancelada novamente esta opo). Os tags ou atributos digitados na visualizao de cdigo (ou no inspetor de cdigo) e no Quick Tag Editor tambm sero convertidos para a caixa especicada, da mesma forma que os tags e atributos inseridos utilizando o painel Objetos. Por exemplo: se desejar que os nomes de tags sejam convertidos sempre em letras minsculas, especique minsculas, em Caixa do tag e, em seguida, selecione a opo Ignorar a caixa de: Tags. Em seguida, quando for aberto um documento que contenha nomes de tags em maisculas, o Dreamweaver os converter em minsculas.
se os elementos devem ser centralizados utilizando div ou center. Ambos fazem parte da especicao HTML 4.0 Transitional, mas center conta com suporte de um nmero maior de navegadores.
align="center"
Centralizao especica
Preferncias de regravao de cdigo As preferncias de regravao de HTML determinam as aes do Dreamweaver quando abre os documentos HTML ou de script. Essas preferncias no tm efeito quando o HTML ou os scripts so editados na visualizao de cdigo ou no inspetor de cdigo. Se estas opes forem desativadas, o Dreamweaver exibir itens de markup invlidos na janela do documento para o HTML que seria regravado. Se um documento HTML for importado do Microsoft Word, poder ser utilizado o comando Limpar o HTML do Word, para remover os cdigos HTML desnecessrios. Para obter mais informaes, consulte Como limpar o HTML do Microsoft Word na pgina 379.
Ajustar os tags abertos e aninhados incorretamente regrava
os tags sobrepostos. Por exemplo: <b><i>text</b></i> ser regravado como <b><i>text</i></b>. Esta opo tambm inserir aspas e colchetes de nalizao, se estiverem faltando.
Remover os tags adicionais de finalizao exclui
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.
1 2
Abra um documento existente e escolha Comandos > Limpar o HTML. Na caixa de dilogo que aparecer, escolha dentre as seguintes opes:
<b></b> e <font color="FF0000"></font> so considerados tags vazios, mas no o tag <b> em <b>algum texto</b>.
Remover os tags vazios remove os tags sem contedo entre eles. Por exemplo: Remover os tags aninhados redundantes remove todas as ocorrncias
o que gostaria de dizer</b>,
redundantes de um tag. Por exemplo: no cdigo <b>Isto <b>exatamente </b> os tags b em volta da palavra exatamente so redundantes e seriam removidos. todos os comentrios que no tiverem sido inseridos pelo Dreamweaver. Por exemplo: <!--begin body text--> seria removido, mas no <!-- #BeginEditable "doctitle" --> (porque um comentrio do Dreamweaver que marca o incio de uma regio editvel em um modelo).
378
Captulo 14
Combinar os tags <font> aninhados sempre que possvel consolida dois ou mais
tags font, quando eles controlarem a mesma faixa de texto. Por exemplo: <font size="7"><font color="#FF0000">grande e vermelho</font></font> seria alterado para <font size="7" COLOR="#FF0000">grande e vermelho</font>.
Mostrar o registro quando concluir exibe uma caixa de alerta com os detalhes
sobre as alteraes feitas no documento logo que a limpeza terminar.
3
Clique em OK. Dependendo do tamanho do documento e do nmero de opes selecionadas, a limpeza poder demorar alguns segundos.
Como formatar o cdigo-fonte HTML nos documentos existentes As opes de formatao da origem de HTML especicadas nas preferncias de formato HTML e no arquivo SourceFormat.txt sero aplicadas apenas aos novos documentos criados com o Dreamweaver subseqentemente. Para aplicar as opes de formatao nos documentos HTML existentes, utilize o comando Aplicar a formatao de origem..
Para aplicar as opes de formatao da origem de HTML a um documento j existente:
Escolha Arquivo > Abrir, para abrir um arquivo HTML existente na janela do documento. Escolha Comandos > Aplicar a formatao de origem.
379
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.
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.
380
Captulo 14
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.
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.
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.
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.
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:
383
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
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.
suporte
contedo.html
horas.html
recursos
dicas.html
produtos
catlogo.html
Links e navegao
387
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.
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
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 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.
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.
390
Captulo 15
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:
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.
Como arrastar o cone do indicador de arquivos do inspetor de propriedades at um arquivo na janela do site.
392
Captulo 15
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).
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
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.
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
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:
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.
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.
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).
Links e navegao
399
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.
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 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
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:
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.
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.
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.
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
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:
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
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.
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.
411
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.
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.
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
1 2
Selecione o modelo no painel Propriedades. Clique no boto Excluir e conrme que deseja excluir o modelo. Tenha cuidado, pois aps excluir um arquivo de modelo, no ser possvel recuper-lo. O arquivo de modelo ser excludo do site. Os documentos que se baseavam neste modelo no sero desanexados do modelo. Eles conservaro a estrutura e as regies editveis que o arquivo de modelo possua antes de ser excludo. Para transformar tal documento em um arquivo HTML normal sem regies editveis ou bloqueadas, utilize Modicar> Modelos > Desanexar do modelo. Para obter mais informaes, consulte Como desanexar um documento de um modelo na pgina 424.
Como definir as propriedades da pgina do modelo Os documentos criados a partir de um modelo herdaro as propriedades da pgina do mesmo, com exceo do ttulo da pgina. Se um documento se basear num modelo, possvel alterar o seu ttulo, porm quaisquer alteraes feitas s suas outras propriedades da pgina sero ignoradas. Se aplicar um modelo a um documento e, em seguida, necessitar modicar as propriedades da pgina do documento, voc dever modicar as propriedades da pgina do modelo e atualizar as pginas que o utilizarem. O que signica que as propriedades da pgina de todos os documentos que se basearem naquele modelo sero modicadas.
Para modificar as propriedades da pgina do modelo:
1 2 3
Abra o arquivo do modelo e escolha Modicar > Propriedades da pgina. Especique as opes desejadas para a pgina e clique em OK. Atualize as pginas que se basearem no modelo, se houver alguma. Para obter mais informaes, consulte Como atualizar as pginas com base em um modelo na pgina 424.
Para obter mais informaes sobre as propriedades da pgina, consulte Como denir as propriedades do documento na pgina 160.
413
Sobre links em modelos Para criar um link em um arquivo de modelo, utilize o cone de pasta ou o cone do indicador de arquivos, no inspetor de propriedades. No digite o nome do arquivo a ser vinculado. Se digitar o nome, o link no funcionar como esperado. As seguintes informaes explicam porque este problema ocorre e oferecem um exemplo de situao na qual isso pode ocorrer. Quando voc criar um arquivo de modelo abrindo uma pgina existente e salvando a pgina como um modelo, o Dreamweaver garantir que todos os links na pgina continuaro a indicar os mesmos arquivos que indicavam anteriormente. Como os modelos so salvos em uma pasta Templates especial, isto signica que o caminho exibido de um link relativo ao documento se alterar quando voc salvar a pgina como um modelo. No se preocupe com esta alterao. Quando criar um documento com base em modelo e, em seguida, salvlo, todos os links relativos ao documento sero atualizados para continuar a indicar os arquivos corretos, como era de se esperar. Ao adicionar um link relativo a documento em um arquivo de modelo, mesmo se digitar o caminho na caixa de de texto do link, no inspetor de propriedades, fcil digitar um caminho incorreto por engano. O caminho correto o caminho da pasta Templates ao documento que voc estiver vinculando, e no o caminho da pasta do documento. Para evitar este problema, utilize o cone de pasta ou o cone do indicador de arquivos para selecionar os arquivos aos quais deseja vincular. Para obter mais informaes sobre como vincular usando o cone do indicador de arquivos, consulte Como vincular documentos utilizando o inspetor de propriedades e o cone do indicador de arquivos na pgina 391. O seguinte exemplo demonstra o problema. Suponha que voc possui um site no qual algumas pginas de catlogo (denominadas aparelhos.html, apetrechos.html e adicionais.html) se baseiam em um arquivo de modelo denominado Pginas_de_catlogo.dwt. A estrutura da pasta do site ter a seguinte aparncia:
414
Captulo 16
Suponha que voc deseje que cada pgina se baseie em um modelo, para conter um link que indique um arquivo home.html. Abra o modelo Pginas_de_catlogo, para adicionar o link e selecione a imagem que gostaria de anexar ao link. Mas, se digitar home.html na caixa de texto do link no inspetor de propriedades, voc se deparar com o problema do link relativo a documento: ao salvar o modelo editado, os documentos que se baseiam no modelo iro indicar o local incorreto porque o link no arquivo de modelo ser interpretado como relativo pasta Templates, em vez de ser relativo pasta Catalog. Isso signica que o link home.html no arquivo de modelo indicar a home.html na pasta Templates, ao invs de ../Catalog/home.html. Ao atualizar os documentos com base no modelo, o Dreamweaver modicar os links relativos ao documento nos documentos. Nos documentos da pasta Catalog, um link no arquivo de modelo que indicar ../Catalog/home.html ser convertido em home.html, mas um link no arquivo de modelo que indicar home.html ser convertido em ../Templates/ home.html. Se voc selecionar o arquivo home.html, utilizando o cone de pasta ou o cone do indicador de arquivos em vez de digitar manualmente o nome do arquivo, o Dreamweaver atualizar automaticamente todos os documentos com base no modelo, para utilizar os caminhos relativos corretos para home.html.
Nota: Em alguns casos (como, por exemplo, caminhos de arquivos em manipuladores de eventos nos modelos) voc no poder utilizar o cone de pasta ou o cone do indicador de arquivos. Assegure-se de digitar manualmente o caminho correto.
415
No arquivo do modelo, selecione o texto ou contedo que deseja tornar uma regio editvel. Siga um dos procedimentos abaixo:
Escolha Modicar > Modelos > Nova regio editvel. Clique com o boto direito do mouse (no Windows), ou pressione a tecla
Control e clique no texto selecionado (no Macintosh) e, no menu contextual, escolha Nova regio editvel.
3
Na caixa de dilogo Nova regio editvel, digite um nome exclusivo para a regio. Em um determinado modelo, no possvel utilizar o mesmo nome para mais de uma regio editvel. A regio editvel delimitada por um contorno retangular realado no modelo, utilizando o conjunto de cores de realce em Preferncias. Uma guia no canto superior esquerdo da regio exibir o nome da mesma. possvel marcar como editvel uma tabela inteira ou uma clula de tabela; no entanto, no possvel marcar vrias clulas de tabela como uma nica regio editvel. Observe que o Dreamweaver no distinguir entre marcar uma clula de tabela como editvel e marcar o contedo da clula como editvel. As camadas e o seu contedo so elementos separados; quando uma camada for transformada em editvel, a sua posio, assim como o seu contedo, podero ser alterados; enquanto que a transformao do contedo em editvel permitir alterar somente o contedo da camada, e no a sua posio. Para selecionar o contedo da camada, clique na mesma e escolha Editar > Selecionar tudo. Para selecionar a camada, certique-se que os elementos invisveis estejam sendo exibidos e, em seguida, clique no cone que representa a localizao da camada. Para obter mais informaes sobre as camadas, consulte Como utilizar as camadas na pgina 439.
Nota: Se o contedo da camada tiver sido transformado em editvel e, posteriormente, voc desejar tornar editvel a posio do mesmo, remova a regio editvel ao redor do contedo antes de marcar a camada como editvel. Consulte Como bloquear uma regio editvel na pgina 421.
No modelo, coloque o ponto de insero onde deseja incluir uma regio editvel. Escolha Modicar > Modelos > Nova regio editvel.
416
Captulo 16
Na caixa de dilogo Nova regio editvel, digite o nome da regio. O nome da regio, entre chaves ({}), ser inserido no modelo como um alocador de espao, delimitado por um contorno retangular realado com a cor de realce apropriada. Quando o modelo for aplicado a um documento, as chaves e o nome da regio podero ser selecionados e substitudos por texto, imagens ou qualquer outro contedo.
Como definir as preferncias de modelo possvel utilizar as preferncias de realce do Dreamweaver para personalizar as cores de realce dos contornos em volta das regies editveis e bloqueadas de um modelo. A cor da regio editvel aparecer no modelo, bem como nos documentos que se basearem no mesmo. A cor da regio bloqueada aparecer somente nos documentos que se basearem no modelo.
Para alterar as cores de realce do modelo:
1 2
Escolha Editar > Preferncias e, em seguida, selecione a categoria Realce. Clique na caixa de cor Regies editveis e selecione a cor de realce, utilizando o seletor de cores, ou digite o valor hexadecimal correspondente cor de realce na caixa de texto. Faa o mesmo para as regies bloqueadas. Para obter informaes sobre como utilizar o seletor de cores, consulte Como trabalhar com as cores na pgina 91. Clique na opo Mostrar, para ativar ou desativar a exibio dessas cores na janela do documento. Clique em OK.
Escolha Exibir > Auxlios visuais> Elementos invisveis. As cores de realce aparecero na janela do documento apenas quando a opo Exibir > Auxlios visuais > Elementos invisveis estiver ativa e as opes apropriadas estiverem ativas nas preferncias de realce.
Nota: Se os elementos invisveis forem exibidos mas as cores de realce no, escolha Editar > Preferncias e certifique-se de que a opo Mostrar, ao lado da cor de realce apropriada tenha sido selecionada. Assegure-se, tambm, de que a cor escolhida esteja visvel em relao a cor de fundo da pgina. Caso seja daltnico, talvez tenha que alterar a cor de realce, do padro para uma cor mais viva.
417
Como exibir as regies editveis e bloqueadas Em arquivos de modelos e documentos com base nos modelos, as regies editveis aparecero na visualizao do projeto da janela do documento entre contornos retangulares, na cor de realce apropriada. Uma pequena guia aparecer no canto superior esquerdo de cada regio editvel, exibindo o nome da mesma. Nos arquivos de modelos, apenas as regies editveis estaro marcadas com contornos realados. O contedo das regies editveis e bloqueadas pode ser alterado.
418
Captulo 16
Nos documentos com base em modelos, alm dos contornos de regies editveis, a pgina inteira estar circundada por um contorno de cor diferente, com uma guia no canto superior direito, mostrando o nome do modelo no qual o documento se baseia. Este retngulo realado est presente para lembrar que o documento se baseia em um modelo e que nada poder ser modicado fora das regies editveis.
Nota: Se tentar editar uma regio bloqueada em um documento com base em modelo quando o realce estiver desativado, o ponteiro do mouse se modificar, indicando que no possvel clicar na regio.
Como visualizar o cdigo-fonte HTML de regies editveis e bloqueadas O contedo editvel marcado no HTML pelos comentrios do Dreamweaver #BeginEditable e #EndEditable. Tudo entre estes comentrios editvel. O cdigofonte HTML de uma regio editvel, denominado Edit_Region ter a seguinte aparncia:
<!-- #BeginEditable "Edit_Region" --> {Edit_Region} <!-- #EndEditable -->
419
Nos arquivos de modelo, as regies editveis no so realadas na visualizao de cdigo da janela do documento (ou no inspetor de cdigo). possvel fazer alteraes no cdigo-fonte HTML correspondente tanto s regies editveis quanto s bloqueadas. Nos documentos com base em modelos, se a sinalizao da sintaxe por cores estiver ativa, as regies bloqueadas estaro realadas nos editores de cdigo. Para obter mais informaes sobre a sinalizao da sintaxe por cores, consulte Como denir as opes da visualizao de cdigo (ou do inspetor de cdigo) na pgina 364. Apenas o cdigo-fonte HTML correspondente s regies editveis (no-realadas) poder ser alterado.
420
Captulo 16
Nota: O Dreamweaver no impede que se digite em regies bloqueadas no inspetor de cdigo ou na visualizao de cdigo da janela do documento. No entanto, o Dreamweaver descarta todas as alteraes feitas nas regies bloqueadas. Portanto, seja cuidadoso, digitando somente em regies editveis.
Como bloquear uma regio editvel Caso tenha marcado uma regio do arquivo de modelo como editvel e, subseqentemente, desejar bloque-la (torn-la no-editvel) novamente, utilize o comando Remover a regio editvel.
Nota: No possvel bloquear uma regio em um arquivo com baseado em modelo. S possvel bloquear uma regio em um arquivo de modelo. Para bloquear uma regio (torn-la no-editvel) em um arquivo de modelo:
1 2
Escolha Modicar > Modelos > Remover a regio editvel. Selecione o nome da regio na lista e clique em OK. A regio ser bloqueada. Ela deixar de ter um nome, j que somente as regies editveis possuem nome.
Como utilizar os estilos, linhas de tempo, comportamentos e tags do cabealho nos modelos Nos documentos com base em modelos, os estilos CSS, as linhas de tempo, os comportamentos e os tags da seo head (cabealho) no contam com o suporte. Todos estes elementos inserem informaes na seo head de um documento. Como a seo head de um documento que se basear em modelo estar bloqueada (com exceo do ttulo do documento), o Dreamweaver no poder inserir uma folha de estilos ou cdigo JavaScript em tal documento. Para utilizar estes itens num documento com base em modelo, necessrio adicion-los ao arquivo de modelo no qual o documento se baseia. Para permitir que uma folha de estilos de um arquivo de modelo seja editvel, sem ter que atualizar as pginas a cada vez que alterar a folha de estilos, utilize uma folha de estilos externa. Se no for possvel adicionar estes elementos ao arquivo de modelo, possvel desanexar o documento do modelo, o que tornar editvel a seo head. No entanto, aps desanexar o documento do modelo, o documento deixar de ser atualizado quando o modelo for alterado. Consulte Como desanexar um documento de um modelo na pgina 424. Para obter mais informaes sobre estes elementos, consulte Como utilizar as folhas de estilos CSS na pgina 267, Como animar as camadas na pgina 458 e Como utilizar os comportamentos na pgina 469.
421
Escolha Arquivo > Novo a partir de modelo. Na caixa de dilogo que aparecer,
escolha um modelo. Se no desejar que o novo documento seja atualizado quando o modelo for alterado, cancele a seleo Atualizar a pgina quando o modelo for alterado. Em seguida, clique em Selecionar.
Escolha Arquivo > Novo, para criar um novo documento e, em seguida, aplique
nele um modelo, selecionando um modelo na categoria Modelos do painel Propriedades e clique no boto Aplicar. De forma alternativa, possvel arrastar um modelo do painel Propriedades para o documento.
Para aplicar um novo modelo a um documento j existente do Dreamweaver:
422
Captulo 16
Quando voc aplicar um modelo a um documento existente que ainda no se baseia em um modelo, o Dreamweaver transformar o documento em uma cpia do arquivo de modelo, colocando o material da seo existente body (corpo) do documento em uma nica regio editvel de sua escolha.
Nota: Os comportamentos e outros scripts no documento existente que estiverem associados ao contedo do body, permanecem na seo head do documento, aps a aplicao do modelo. Outros itens da seo head do documento existente, como os tags meta, sero descartados quando o modelo for aplicado.
Quando voc aplicar um novo modelo a um documento existente, que se baseia em um outro modelo, o Dreamweaver transformar o documento em uma cpia do novo modelo, colocando o material das regies editveis do documento existente nas regies editveis correspondentes do novo modelo, sempre que possvel. O Dreamweaver efetua esta operao comparando os nomes das regies editveis no documento com os nomes das regies editveis no novo modelo. Para cada nome de regio que coincidir, o Dreamweaver colocar o contedo existente de tal regio na nova regio com o mesmo nome. Por exemplo: suponha que voc deseje experimentar uma nova aparncia para o site, mas ainda no esteja pronto para alterar todas as pginas. possvel criar um novo modelo com layout e desenho novos, dando s regies editveis no novo modelo os mesmos nomes que as do modelo antigo. A seguir, quando aplicar o novo modelo a uma das pginas, o material das regies editveis da pgina ser colocado nas regies editveis correspondentes do novo layout. Se houver regies editveis no modelo antigo que no correspondem s regies no novo modelo, a caixa de dilogo Escolher a regio editvel para o contedo rfo indagar qual ser a nova regio editvel de destino do contedo rfo. Escolha um nome de regio editvel. Todo o contedo das regies editveis sem correspondncia ser anexado regio escolhida. Todo o contedo rfo do documento existente dever ser inserido em uma nica regio editvel. Se selecionar o item Nenhum, em vez do nome da regio, o contedo das regies sem correspondncia no documento existente ser descartado. Se voc acreditar que as regies editveis do documento correspondem s regies editveis do novo modelo que estiver aplicando mas, mesmo assim, a caixa de dilogo do contedo rfo aparecer, clique em Cancelar, e o novo modelo no ser aplicado ao documento. Em seguida, possvel examinar as regies editveis do documento e as regies editveis do modelo, para descobrir quais regies do documento no aparecem no novo modelo. possvel, ento, adicionar novas regies com aqueles nomes ao novo arquivo de modelo. Todas as novas regies editveis que se encontrarem no novo modelo, mas no no modelo antigo, sero adicionadas ao documento. As novas regies contm o texto do alocador de espao padro existente no novo arquivo de modelo. Aps aplicar um modelo a um documento, se os resultados no alcanarem as suas expectativas, voc poder utilizar a opo Editar >Desfazer a aplicao do modelo, para reverter ao estado do documento antes da aplicao do modelo.
423
Como localizar as regies editveis do documento Todas as regies editveis no corpo de um modelo so mostradas em uma lista, na parte inferior do submenu Modicar > Modelos. Utilize essa lista para selecionar e editar as regies.
Para localizar uma regio editvel e selecion-la no documento:
Escolha Modicar > Modelos, e selecione o nome da regio na lista, na parte inferior do submenu. A regio ser selecionada no documento. possvel digitar texto novo na regio ou clicar nela, para editar o contedo. Como desanexar um documento de um modelo Para alterar as regies editveis e bloqueadas de uma pgina que utiliza um modelo, necessrio desanexar primeiramente a pgina do modelo. Quando a pgina estiver desanexada, ela se transformar em um documento normal, sem regies editveis ou bloqueadas, e perder a conexo a qualquer arquivo de modelo. Observe que, com isso, a pgina no ser mais atualizada com o modelo.
Para desanexar um documento de um modelo:
1 2
Abra o documento a ser desanexado. Escolha Modicar > Modelos > Desanexar do modelo. A pgina ser desanexada do modelo e todas as regies se tornaro editveis.
424
Captulo 16
1 2
Escolha Modicar > Modelos > Abrir o modelo anexado. Modique o contedo do modelo como desejar. Para modicar as propriedades da pgina do modelo, escolha Modicar > Propriedades da pgina. Os documentos que se basearem em modelos herdaro as propriedades da pgina dos mesmos, com exceo do ttulo da pgina.
Para atualizar o documento atual, para que utilize a verso mais recente de um modelo:
Escolha Modicar > Modelos > Atualizar as pginas. Aparecer a caixa de dilogo Atualizar as pginas. No menu pop-up Procurar em, siga um dos procedimentos abaixo: adjacente. Esse procedimento atualizar todas as pginas no site escolhido em relao ao modelo.
Escolha Site inteiro e, em seguida, escolha o nome do site no menu pop-up Escolha Arquivos que utilizam e, em seguida, escolha o nome do modelo no
menu pop-up adjacente. Este procedimento atualizar todas as pginas no site atual s quais tiver sido aplicado o modelo selecionado.
3
Verique se a opo Modelos est selecionada na opo Atualizar. Para atualizar os itens de biblioteca simultaneamente, assegure-se de que a opo Itens de biblioteca esteja selecionada. Consulte Como criar, gerenciar e editar os itens de biblioteca na pgina 429, para obter mais informaes. Clique em Iniciar. O Dreamweaver atualizar os arquivos conforme indicado. Caso voc tenha selecionado a opo Mostrar o registro, o Dreamweaver fornecer informaes sobre os arquivos que tentar atualizar, incluindo informaes sobre o xito em sua atualizao.
425
Escolha Arquivo > Abrir, e abra um documento com base em modelo (que contenha regies editveis). Escolha Arquivo > Exportar > Exportar as regies editveis como XML. Na caixa de dilogo XML, escolha uma notao de tag e clique em OK. Consulte Como utilizar as notaes de tags XML na pgina 428, para obter mais detalhes.
2 3
Na caixa de dilogo que aparecer, digite o nome do arquivo XML e clique em Salvar. O Dreamweaver gerar um arquivo XML contendo o material das regies editveis do documento. O arquivo XML inclui o nome do modelo no qual o documento se baseia, assim como o nome e o contedo de cada regio editvel.
Nota: O material nas regies bloqueadas no ser exportado para o arquivo XML.
1 2
Escolha Arquivo > Importar >Importar XML para o modelo. Selecione o arquivo XML e clique em Abrir.
O Dreamweaver criar um novo documento a partir do modelo especicado no arquivo XML. A seguir, ele preencher o contedo de cada regio editvel do documento utilizando os dados do arquivo XML. O documento resultante ser aberto na janela do documento. Se o modelo especicado no for localizado, o Dreamweaver solicitar a escolha de outro modelo a ser utilizado.
426
Captulo 16
Observe que se o arquivo XML no estiver denido exatamente como o Dreamweaver espera, talvez no seja possvel importar os dados. Uma soluo para este problema exportar um arquivo XML ctcio do Dreamweaver, para que exista um arquivo XML com a estrutura correta. Em seguida, copie os dados do arquivo original XML para o arquivo XML exportado. O resultado um arquivo XML com a estrutura correta que contm os dados apropriados, todos prontos para serem importados. Sobre o XML XML signica Extensible Markup Language, uma linguagem de markup para documentos estruturados. Ele se assemelha a uma generalizao de HTML, que permite criar os seus prprios tags. XML deriva-se de SGML, a linguagem padro de markup generalizado; assim como SGML, XML uma linguagem para denir conjuntos de tags e as relaes entre os mesmos. Os tags XML se assemelham aos tags HTML: eles consistem de um nome e de atributos opcionais, delimitados por sinais de maior e menor. Assim como em HTML, so utilizados um tag de abertura e outro de nalizao (nos quais o nome do tag precedido por uma barra inclinada) para marcar o contedo entre os tags. Uma diferena entre as sintaxes que, em XML, um tag vazio (que utiliza um tag nico, como <img>, ao invs de um tag de abertura e um de nalizao, contendo texto ou outro material) dever terminar com uma barra inclinada logo antes do sinal de maior. Por exemplo: um tag <img> em XML poder ter a seguinte aparncia:
<img src="test.png" />
Realmente, a sintaxe do XML mais rigorosa e estrita do que a do HMTL. Os arquivos que no estiverem em conformidade rigorosa com a sintaxe do XML sero rejeitados pelos analisadores XML. O XML oferece uma maneira de marcar seqncias de caracteres literais, que podem incluir tags que dispensam a anlise. um elemento denominado seo CDATA, que inclui uma seqncia de caracteres literal entre colchetes. Qualquer elemento contido pelos colchetes no ser analisado pelo analisador XML. O XML exportado pelo Dreamweaver faz uso extensivo das sees CDATA. Uma introduo completa ao XML no faz parte do escopo deste manual. Para obter mais informaes sobre o XML, consulte Recursos de tecnologias da Web e HTML na pgina 25.
427
Como utilizar as notaes de tags XML O Dreamweaver permite exportar contedos XML utilizando uma das duas notaes de tags: tags de nomes das regies editveis ou tags XML padro do Dreamweaver. Escolha a notao que mais se adapte maneira como o contedo XML ser incorporado ao site da Web. A maneira mais fcil de examinar as diferenas entre as duas notaes de tags, se voc compreender a sintaxe XML, confrontar os exemplos. O seguinte cdigo XML foi exportado de um documento que se baseou em um modelo denominado newstemplate. O documento contm uma regio editvel denida, conhecida como News_Story e uma regio editvel padro (doctitle), que contm o tag title).
Os tags dos nomes de regies editveis utilizam os nomes das regies editveis
do seu documento como tags XML. O contedo de cada regio editvel est includo como uma seo CDATA. Neste exemplo, o tag doctitle identica o ttulo do documento, enquanto o tag News_Story refere-se regio editvel.
<?xml version="1.0"?> <newstemplate template="/Templates/newstemplate.dwt"> <doctitle> <![CDATA[<ttulo>Matria ttulo de hoje</ttulo>]]> </doctitle> <News_Story> <![CDATA[<p>Aqui onde a matria deve ser includa.</p>]]> </News_Story> </newstemplate>
428
Captulo 16
429
Os itens de biblioteca tambm podem conter comportamentos, porm h requisitos especiais para a edio dos comportamentos nesses itens; consulte Como editar um comportamento em um item de biblioteca na pgina 434. Os itens de biblioteca no podem conter linhas de tempo ou folhas de estilos, porque o cdigo correspondente a esses elementos integra a seo head (cabealho).
Nota: Em geral, seja cuidadoso quanto mistura de itens de biblioteca e modelos na mesma pgina. Os resultados podem se tornar confusos. Para criar um item de biblioteca:
Selecione uma parte de um documento, para salv-la como um item de biblioteca. Siga um dos procedimentos abaixo: painel Propriedades.
Escolha Janela > Biblioteca, e arraste a seleo para a categoria Biblioteca, no Na parte inferior do painel Propriedades (na categoria Biblioteca), clique no
boto Novo item de biblioteca.
Digite um nome para o novo item de biblioteca. Cada item de biblioteca ser salvo como um arquivo separado (com extenso .lbi) na pasta Library da pasta raiz local do site.
Como definir as preferncias de biblioteca A cor de realce dos itens de biblioteca pode ser personalizada, mostrada ou ocultada, de acordo com a denio nas preferncias de realce.
Para alterar a cor de realce de itens de biblioteca:
1 2
Escolha Editar > Preferncias e, em seguida, selecione a categoria Realce. Clique na caixa de cor dos itens de biblioteca e selecione a cor de realce utilizando o seletor de cores ou digite o valor hexadecimal correspondente cor de realce na caixa de texto. Para obter informaes sobre como utilizar o seletor de cores, consulte Como trabalhar com as cores na pgina 91. Selecione Mostrar, para alternar a exibio da cor de realce da biblioteca. Clique na opo Mostrar, para ativar ou desativar a exibio da cor de realce dos itens de biblioteca na janela do documento. Clique em OK, para fechar a caixa de dilogo Preferncias.
3 4
430
Captulo 16
Escolha Exibir > Auxlios visuais > Elementos invisveis. As cores de realce aparecero na janela do documento, apenas quando a opo Exibir > Auxlios visuais > Elementos invisveis estiver ativa e as opes apropriadas estiverem ativas nas preferncias de realce. Como inserir um item de biblioteca em um documento Quando um item de biblioteca for adicionado a uma pgina, o contedo atual ser inserido no documento juntamente com uma referncia ao item de biblioteca.
Para inserir um item de biblioteca em um documento:
1 2
Coloque o ponto de insero na janela do documento. Escolha Janela > Biblioteca. O painel Propriedades aparecer, exibindo a categoria Biblioteca. Arraste um item de biblioteca do painel Propriedades at a janela do documento, ou selecione um item e clique no boto Inserir. Para inserir o contedo de um item de biblioteca sem criar uma referncia deste no documento, pressione a tecla Control (no Windows) ou Option (no Macintosh) enquanto arrasta um item para fora da categoria Biblioteca, no painel Propriedades. Se inserir um item desta forma, voc poder edit-lo no documento, mas o documento no ser atualizado quando atualizar as pginas que utilizam o item de biblioteca.
Como alterar um item de biblioteca Ao alterar um item de biblioteca, voc poder optar por atualizar todos os documentos que o utilizam. Se preferir no atualizar, os documentos permanecero associados ao item de biblioteca. possvel atualiz-los mais tarde, escolhendo Modicar > Biblioteca > Atualizar as pginas. Outros tipos de alteraes aos itens de biblioteca incluem a sua renomeao, para romper a sua conexo com os documentos e modelos, a sua excluso da biblioteca do site e a recriao de um item de biblioteca perdido.
Nota: Os painis de estilos CSS, de linhas de tempo e de comportamentos no estaro disponveis durante a edio de um item de biblioteca porque esses itens podem conter apenas os elementos body. O cdigo das linhas de tempo e das folhas de estilos CSS integra a seo head, enquanto que o painel Comportamentos no estar disponvel porque ele insere cdigo nas sees head e body. Para obter instrues sobre a edio de comportamentos, consulte Como editar um comportamento em um item de biblioteca na pgina 434. A caixa de dilogo Propriedades de pgina tambm no estar disponvel, porque um item de biblioteca no pode incluir um tag body ou seus atributos.
431
Escolha Janela > Biblioteca. Aparecer a categoria Biblioteca, no painel Propriedades. Selecione um item de biblioteca. Aparecer uma visualizao do item de biblioteca no alto do painel Propriedades. No possvel editar qualquer elemento na visualizao.
Na parte inferior do painel Propriedades, clique no boto Editar. De maneira alternativa, clique duas vezes no item de biblioteca. O Dreamweaver abrir uma nova janela para a edio do item de biblioteca. Esta janela semelhante a uma janela de documento, mas a sua visualizao do projeto possui um fundo cinza, indicando a edio do item de biblioteca, ao invs do documento.
4 5
Edite o item de biblioteca e, em seguida, salve as alteraes. Na caixa de dilogo que aparecer, escolha se deseja atualizar os documentos no site local que utilizam o item de biblioteca editado: de bilioteca editado.
Escolha Atualizar, para atualizar todos os documentos no site local com o item Escolha No atualizar, para evitar que os documentos sejam alterados at que
voc utilize Modicar > Biblioteca > Atualizar a pgina atual, ou Atualizar as pginas.
Para atualizar o documento atual, para que utilize a verso mais recente de todos os itens de biblioteca:
Escolha Modicar > Biblioteca > Atualizar as pginas. Aparecer a caixa de dilogo Atualizar as pginas. No menu pop-up Procurar em, siga um dos procedimentos abaixo: adjacente. Este procedimento atualizar todas as pginas no site selecionado, para que utilizem a verso atual de todos os itens de biblioteca.
Escolha Site inteiro e, em seguida, escolha o nome do site no menu pop-up Escolha Arquivos que utilizam e, em seguida, escolha um item de biblioteca no
menu pop-up adjacente. Este procedimento atualizar todas as pginas no site atual que utilizarem o item de biblioteca selecionado.
432
Captulo 16
Verique se a opo Itens de biblioteca est selecionada na opo Atualizar. Para atualizar os modelos simultaneamente, assegure-se de que a opo Modelos esteja selecionada. Consulte Como atualizar as pginas com base em um modelo na pgina 424, para obter mais informaes. Clique em Iniciar. O Dreamweaver atualizar os arquivos conforme indicado. Caso voc tenha selecionado a opo Mostrar o registro, o Dreamweaver fornecer informaes sobre os arquivos que tentar atualizar, incluindo informaes sobre o xito em sua atualizao.
1 2 3
Clique no nome do item de biblioteca uma vez, para selecion-lo. Aps uma pequena pausa, clique novamente. Quando o nome se tornar editvel, digite um novo nome.
Nota: Este mtodo funciona da mesma forma que a renomeao de um arquivo no Windows Explorer (no Windows) ou no Localizador (no Macintosh). Assim como no Windows Explorer e no Localizador, assegure-se de fazer uma pequena pausa entre os cliques. No clique duas vezes no nome; desta forma, o item de biblioteca ser aberto para edio.
Clique em outro local ou pressione a tecla Enter (no Windows) ou Return (no Macintosh). O Dreamweaver indagar se voc deseja atualizar os documentos que utilizam este item. Atualizar.
Para atualizar todos os documentos no site que utilizarem este item, clique em Para evitar a atualizao de qualquer documento que utilizar este item, clique
em No atualizar.
Para excluir um item de uma biblioteca:
1 2
Selecione o item na categoria Biblioteca, no painel Propriedades. Clique no boto Excluir e conrme que deseja excluir o item. Tenha cuidado, pois aps excluir um item de biblioteca, no ser possvel utilizar o comando Refazer para recuper-lo. No entanto, talvez voc possa recri-lo, como descrito no prximo procedimento. A excluso de um item remove-o da biblioteca, mas no altera o contedo de qualquer um dos documentos que utilizam o item.
433
1 2
Selecione uma instncia do item em um documento. Clique no boto Recriar, no inspetor de propriedades.
Como tornar editveis os itens de biblioteca de um documento Se tiver adicionado um item de biblioteca ao documento e desejar edit-lo especicamente em uma pgina, ser necessrio romper o link entre o item do documento e a biblioteca. Quando a ocorrncia do item de biblioteca tornar-se editvel, essa instncia no poder ser atualizada quando o item de biblioteca tiver sido modicado.
Para tornar editvel um item de biblioteca:
1 2
Selecione um item de biblioteca no documento atual. Clique em Desanexar do original, no inspetor de propriedades. A ocorrncia selecionada do item de biblioteca perder a cor de realce (se esta estiver visvel) e no poder mais ser atualizada quando o item de biblioteca original for alterado.
Como editar um comportamento em um item de biblioteca Quando for criado um item de biblioteca que contm um elemento com um anexo de comportamento, o Dreamweaver copiar o elemento e o seu manipulador de evento o atributo que especica o evento que disparar a ao (como onClick, onLoad ou onMouseOver) e que ao dever ser chamada quando ocorrer o evento para o arquivo do item de biblioteca. O programa no copiar para o item de biblioteca as funes JavaScript associadas. Em vez disso, quando voc inserir o item de biblioteca no documento, o Dreamweaver inserir automaticamente as funes JavaScript apropriadas na seo head do documento (se elas ainda no estiverem l).
Nota: Se codificar manualmente o JavaScript (se cri-lo sem utilizar os comportamentos do Dreamweaver), voc poder integr-lo a um item de biblioteca, se utilizar o comportamento Chamar o JavaScript para executar o cdigo. Se voc no utilizar um comportamento do Dreamweaver para executar o cdigo, este no ser mantido como parte do item de biblioteca.
434
Captulo 16
As funes JavaScript no sero armazenadas com o item de biblioteca porque so elementos da seo head do documento, enquanto os itens de biblioteca podero conter apenas elementos do body. Por isso, o painel Comportamentos no estar disponvel durante a edio de um item de biblioteca, pois apenas parte do cdigo do comportamento (o manipulador de evento) ser includo no item de biblioteca. preciso inicialmente inserir o item de biblioteca em um documento, para poder editar o comportamento na biblioteca e, em seguida, tornar editvel o item no documento. Depois de fazer as alteraes desejadas, possvel recriar o item de biblioteca, substituindo o item na biblioteca pelo item editado do documento. Para obter mais informaes sobre os comportamentos, consulte Como utilizar os comportamentos na pgina 469.
Para editar um comportamento em um item de biblioteca:
Abra um documento que contenha o item de biblioteca. Anote o nome do item, bem como os tags que ele contm. Essas informaes sero necessrias nas etapas 8 e 9.
Selecione o item de biblioteca e clique em Desanexar do original, no inspetor de propriedades. Selecione o elemento que contm o comportamento anexado. Escolha Janela > Comportamentos, para abrir o painel Comportamentos. No painel Comportamentos, clique duas vezes na ao que deseja alterar. Na caixa de dilogo que aparecer, faa as alteraes necessrias e clique em OK. Escolha Janela > Biblioteca, para abrir a categoria Biblioteca, no painel Propriedades. Assegure-se de ter gravado o nome exato do item de biblioteca original. Em seguida, selecione o item de biblioteca original e exclua-o, clicando no boto Excluir, no painel Propriedades. Na janela do documento, selecione todos elementos que compem o item de biblioteca. Selecione com cuidado exatamente os mesmos elementos contidos no item de biblioteca original.
3 4
5 6
No painel Propriedades, clique no boto Novo item de biblioteca e denomine o novo item com o mesmo nome do que foi excludo na etapa 7. Certique-se de utilizar exatamente a mesma graa e caixa alta ou baixa. Para atualizar o item de biblioteca nos outros documentos do site, escolha Modicar > Biblioteca > Atualizar as pginas. Na caixa de dilogo Atualizar as pginas, no menu pop-up Procurar em, selecione Arquivos que utilizam.
10
11
435
12
Escolha o nome do item de biblioteca recm-criado no menu pop-up adjacente. Na opo Atualizar, certique-se de que os itens de biblioteca tenham sido selecionados e, em seguida, clique em Iniciar. Quando tiver concludo as atualizaes, clique em Fechar, para sair da caixa de dilogo Atualizar as pginas.
13
14
Como definir as propriedades dos itens de biblioteca Utilize as propriedades dos itens de biblioteca para especicar o arquivo de origem de um item, torn-lo editvel, ou recriar um item de biblioteca original aps a edio de uma ocorrncia dele no documento. Selecione um item de biblioteca no documento, para abrir o inspetor de propriedades.
Orig. exibe Abrir abre
o nome e a localizao do arquivo de origem do item de biblioteca. No possvel editar estas informaes. o arquivo de origem do item de biblioteca para edio. Isto equivale a selecionar o item no painel Propriedades e cliquar no boto Editar.
Desanexar do original rompe
o link entre o item de biblioteca selecionado e o seu arquivo de origem. Quando um item for desanexado, ele poder ser editado em um documento, mas ele no mais um item de biblioteca e no poder ser atualizado quando o item de biblioteca original for alterado.
Recriar substitui
o item de biblioteca original pela seleo atual. Utilize esta opo para recriar itens de biblioteca, se o item de biblioteca original estiver faltando ou tiver sido excludo acidentalmente.
436
Captulo 16
Com o Dreamweaver, no entanto, possvel visualizar os documentos exatamente como eles aparecero depois de sua colocao no servidor, tanto na visualizao do projeto quanto na visualizao no navegador. Para poder exibir os arquivos includos, o Dreamweaver utiliza um conversor que reete a maneira que o servidor utilizaria para processar as instrues contidas nas includes. A colocao de uma server-side include em um documento inserir uma referncia a um arquivo externo. O contedo do arquivo especicado no ser inserido no documento. O Dreamweaver exibir o contedo do arquivo externo na janela do documento, facilitando assim a criao das pginas, porm o arquivo includo no poder ser editado diretamente em um documento. Para poder editar o contedo de uma server-side include, voc dever editar diretamente o arquivo a ser includo. Todas as alteraes feitas no arquivo externo sero automaticamente transpostas para os documentos que o inclurem. H dois tipos de server-side includes: Virtual e Arquivo. Escolha qual delas deseja utilizar, dependendo do tipo de servidor da Web que estiver utilizando:
Para outros tipos de servidores, ou caso voc desconhea o tipo de servidor que
estiver utilizando, pergunte ao administrador do sistema qual opo dever ser utilizada. Alguns servidores so congurados para examinar todos os arquivos, vericando a ocorrncia de server-side includes. Outros servidores so congurados para examinar somente os arquivos com uma extenso especca como, por exemplo, .shtml, .shtm ou .inc. Se uma server-side include no estiver funcionando, pergunte ao administrador do sistema se necessrio utilizar uma extenso especial no nome do arquivo que utiliza a include. Por exemplo: se o arquivo se chama canoa.html, talvez no seja possvel renome-lo como canoa.shtml. Se desejar que os seus arquivos permaneam com as extenses .html ou .htm, pea ao administrador do sistema para congurar o servidor para examinar todos os arquivos (no apenas os arquivos com uma certa extenso) quanto ocorrncia de server-side includes. Entretanto, a anlise de um arquivo quanto ocorrncia de server-side includes consome mais tempo. Portanto, as pginas que o servidor analisar sero veiculadas um pouco mais lentamente do que as outras pginas. Em funo disso, alguns administradores de sistema no proporcionaro a opo de anlise de todos os arquivos.
437
Escolha Inserir > Server-side include, ou clique no boto SSI, na categoria Comuns, do painel Objetos. Na caixa de dilogo que aparecer, procure e selecione um arquivo.
1 2 3
Selecione a server-side include na janela do documento. Abra o inspetor de propriedades. Siga um dos procedimentos abaixo: para incluir.
Clique no cone correspondente pasta, procure e selecione um novo arquivo Na caixa de texto, digite o caminho e o nome do novo arquivo para incluir.
Como editar o contedo de uma server-side include Assim como os itens de biblioteca, as server-side includes so selecionadas como uma unidade na janela do documento. Diferentemente dos itens de biblioteca, o cdigo-fonte HTML das server-side includes contido no arquivo includo no aparecer no inspetor de cdigo ou na visualizao de cdigo da janela do documento. Em vez disso, ser mostrada a instruo do servidor, cuja aparncia se assemelha do exemplo abaixo:
<!--#include virtual=/uber/html/footer.html -->
Para poder editar o contedo associado a este arquivo includo, abra o arquivo.
Nota: As server-side includes no podem conter tags head ou body. Para editar uma server-side include:
Selecione a server-side include na janela do documento ou no inspetor de cdigo e, em seguida, clique em Editar, no inspetor de propriedades. O arquivo includo ser aberto na janela do documento. Edite o arquivo e salve-o. As alteraes sero transpostas imediatamente para o documento atual e em qualquer documento subseqente que for aberto e incluir esse arquivo.
438
Captulo 16
17
CAPTULO 17
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Uma camada um recipiente das pginas da Web que contm elementos de pgina em HTML. Ao utilizar camadas na pgina, voc obtm mais controle e exibilidade, tornando a pgina dinmica. As camadas foram criadas para serem utilizadas no desenho da Web, proporcionando aos designers o mesmo tipo de controle e exibilidade que eles possuem no design de impresso tradicional. possvel empilhar uma camada em cima da outra, ocultar algumas enquanto exibe outras, ou mover uma camada pela tela com uma linha de tempo. Por exemplo: possvel empilhar uma camada contendo texto sobre uma camada que apresente uma imagem de fundo. possvel provocar o aparecimento de imagens na pgina para, subseqentemente, desvanecerem. Tudo isso pode ser feito utilizando as camadas no Dreamweaver, sem ter que codicar nada em JavaScript ou HTML. Uma desvantagem de se utilizar as camadas nas pginas da Web que elas no so completamente visveis nos navegadores da Web mais antigos. Somente o Internet Explorer 4.0 e o Netscape 4.0, alm dos navegadores acima, exibem as camadas, mas nem sempre de forma consistente. Para que todos possam visualizar a sua pgina da Web, utilize as camadas juntamente com as tabelas. possvel projetar o layout da pgina utilizando camadas e, depois, converter as camadas em tabelas. Para obter mais informaes, consulte Como utilizar as tabelas e camadas para o layout na pgina 455.
Nota: recomendvel utilizar a visualizao de layout para visualizar o layout de pgina (consulte Como projetar o layout de pgina na pgina 177). A visualizao de layout uma maneira fcil de implementar a pgina de layout com tabelas como estrutura subjacente.
439
A seguir uma amostra de cdigo HTML para uma camada aninhada (com a aparncia que teria no Dreamweaver):
<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px; height:158px; z-index:1;"> Contedo da camada-me. <div id="Nested" style="position:absolute; left:97px; top:114px; width:54px; height:69px; z-index:1;"> Contedo da camada aninhada. </div> </div>
possvel denir as propriedades para posicionar as camadas na pgina. Estas propriedades incluem esquerda e No alto (coordenadas x e y, respectivamente), ndice z (tambm denominado ordem de empilhamento) e Visibilidade. Para obter mais informaes, consulte Como denir as propriedades de camada na pgina 449.
440
Captulo 17
Para arrastar e soltar uma camada, arraste o boto Desenhar camada, do painel
Objetos at a janela do documento. Para desenhar mais de uma camada ao mesmo tempo, clique no boto Desenhar camada, no painel Objetos, e mantenha pressionada a tecla Control (no Windows), ou Command (no Macintosh), enquanto desenha todas as camadas. Voc poder continuar a desenhar novas camadas, contanto que no solte a tecla Control. Se a opo Elementos invisveis estiver ativada, aparecer um marcador de camada na janela do documento a cada vez que for desenhada uma camada na pgina. Se os marcadores de camadas no estiverem visveis e desejar v-los, escolha Exibir > Auxlios visuais> Elementos invisveis. Para obter mais informaes, consulte Como denir as preferncias de elementos invisveis na pgina 164.
441
Nota: Se a opo Elementos invisveis estiver ativa, os elementos na pgina podero parecer deslocados. Os elementos invisveis podem ser exibidos apenas na janela do documento. Portanto, quando a pgina for visualizada em um navegador, os outros elementos aparecero em suas posies corretas.
Sobre o painel Camadas O painel Camadas constitui um meio de gerenciar as camadas dos documentos. Escolha Janela > Camadas, ou pressione a tecla F11, para abrir o painel Camadas. As camadas so exibidas como uma lista empilhada de nomes; a primeira camada criada est na parte inferior da lista, enquanto que a camada criada mais recentemente est no alto da lista. As camadas aninhadas so exibidas como nomes conectados s camadas-me. Clique na seta de expanso, para mostrar ou ocultar as camadas aninhadas.
Utilize o painel Camadas para evitar sobreposies, alterar a visibilidade das camadas, aninhar ou empilhar camadas e selecionar uma ou mais camadas.
442
Captulo 17
Como aninhar as camadas As camadas aninhadas foram criadas dentro de uma outra camada. Utilize o painel Camadas ou as tcnicas de insero, arrastar e soltar ou de desenho para criar camadas aninhadas. O aninhamento utilizado regularmente para agrupar as camadas. Uma camada aninhada se move com a sua camada-me e pode ser denida para herdar a visibilidade da me.
Se deseja forar o aninhamento automtico das camadas, dena as preferncias das camadas enquanto as desenha na pgina. Escolha Editar > Preferncias, selecione Camadas e clique na caixa de seleo Aninhamento. Todas as camadas que forem desenhadas dentro de outras camadas sero automaticamente aninhadas. Para obter mais informaes, consulte Preferncias de camada na pgina 444.
Nota: Utilize o ajuste de redimensionamento da Netscape quando estiver utilizando camadas aninhadas na pgina (Comandos > Adicionar/Remover o ajuste de redimensionamento da Netscape). De outra forma, as camadas perdero a sua posio na verso 4.0 da Netscape. Para criar uma camada aninhada, siga um dos procedimentos abaixo:
Para arrastar e soltar uma camada aninhada, arraste o boto Desenhar camada,
no painel Objetos e, em seguida, solte-o dentro de uma camada existente.
443
Escolha Janela > Camadas, ou pressione a tecla F11, para abrir o painel Camadas. Selecione uma camada no painel Camadas e, em seguida, mantenha pressionada a tecla Control (no Windows), ou Command (no Macintosh) e arraste a camada at a camada de destino no painel Camadas. Solte o boto do mouse quando aparecer uma caixa ao redor do nome da camada de destino.
Preferncias de camada Utilize as preferncias de camada para ajustar as denies padro das novas camadas criadas. Escolha Editar > Preferncias e, em seguida, clique em Camadas, para alterar as preferncias de camada.
Tag dene
o tag HTML padro a ser utilizado na criao de camadas. As opes so DIV (padro), span, layer ou ilayer. div ou span so recomendadas para assegurar que as camadas funcionaro em todos os navegadores das verses 4.0 e mais recentes. layer e ilayer funcionam apenas nos navegadores Netscape 4.x.
Visibilidade determina Largura
e altura denem a largura e altura padro das camadas criadas pelo comando Inserir > Camada.
Cor de fundo determina
uma imagem de fundo padro. Clique em Procurar, para localizar o arquivo no computador, ou digite o caminho at o arquivo de imagem na caixa de texto.
Aninhamento torna
aninhada uma camada desenhada dentro dos limites de outra j existente. Mantenha pressionada a tecla Alt (no Windows), ou Option (no Macintosh), para alterar essa denio temporariamente enquanto desenha a camada. insere JavaScript no contedo head de um documento e corrige um problema conhecido nos navegadores Netscape 4.x, que acarreta a perda das coordenadas de posicionamento das camadas quando um usurio redimensionar a janela do navegador. JavaScript fora a pgina a ser recarregada a cada vez que a janela do navegador for redimensionada, atribuindo a posio correta s camadas. O JavaScript tambm pode ser adicionado ou removido, atravs da escolha de Comandos > Adicionar/remover o ajuste de redimensionamento da Netscape.
Compatibilidade do Netscape 4
444
Captulo 17
Clique no nome da camada, no painel Camadas. Clique na ala de seleo da camada. Se a ala no estiver visvel, clique em
qualquer ponto dentro da camada para torn-la visvel.
Clique na borda de uma camada. Se nenhuma camada estiver ativa ou selecionada, mantenha pressionada a tecla
Shift enquanto clica dentro de uma camada.
445
Pressione a tecla Shift enquanto clica nos nomes de duas ou mais camadas, no
painel Camadas.
446
Captulo 17
1 2
Na janela do documento, selecione duas ou mais camadas. Siga um dos procedimentos abaixo: > Tornar as alturas iguais. As primeiras camadas selecionadas assumiro a largura ou altura da ltima camada selecionada (realada em preto).
Escolha Modicar > Alinhar > Tornar as larguras iguais, ou Modicar > Alinhar
Para mover um pixel por vez, selecione as camadas e utilize as teclas de seta.
Pressione a tecla Shift e uma das teclas de seta, para mover a camada de acordo com o incremento de encaixe na grade. Para obter informaes sobre a denio de incrementos de encaixe na grade, consulte Como encaixar as camadas na grade na pgina 448. Como alinhar as camadas Utilize os comandos de alinhamento de camadas, para alinhar uma ou mais camadas com uma borda da ltima camada selecionada. Durante o alinhamento de camadas, quando uma camada-me for selecionada e movida, possvel que as camadas-lhas que no estiverem selecionadas se movam. Para evitar esse tipo de problema, no utilize camadas aninhadas.
447
1 2
Selecione as camadas. Escolha Modicar > Alinhar e selecione uma opo de alinhamento.
Por exemplo: se voc selecionar No alto, todas as camadas se movero, de maneira que as suas bordas superiores assumiro a mesma posio vertical que a borda superior da ltima camada selecionada (realada em preto). Como encaixar as camadas na grade Utilize a grade como um guia visual para posicionar ou redimensionar as camadas na janela do documento. possvel ativar esta grade para utiliz-la como um guia enquanto estiver desenhando as camadas. possvel encaixar as camadas automaticamente na grade e alter-la ou controlar o comportamento de encaixe, atravs da especicao das denies de grade. O encaixe funcionar independentemente da visibilidade da grade.
Para exibir a grade, siga um dos procedimentos abaixo:
Escolha Exibir > Grade > Mostrar a grade. Escolha Exibir > Grade > Editar a grade, e selecione a opo Mostrar a grade.
Para encaixar uma camada:
1 2
Escolha Exibir > Grade > Encaixar na grade, para ativar (ou desativar) o encaixe. Selecione a camada e arraste-a. A camada saltar para a posio de encaixe mais prxima.
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.
Clique em Aplicar, para visualizar as alteraes e, em seguida, em OK, para fechar a caixa de dilogo.
448
Captulo 17
Como tornar ativas as camadas Antes de colocar objetos numa camada, esta deve ser ativada. A ativao de uma camada coloca o ponto de insero em seu interior, reala a sua borda e exibe a ala de seleo, mas no seleciona a camada.
Para ativar uma camada:
um nome que identicar a camada no painel Camadas e como referncia de scripts. Digite um nome na caixa sem ttulo, no lado esquerdo do inspetor de propriedades. Utilize apenas caracteres alfanumricos padro no nome de uma camada. No utilize caracteres especiais, como espaos, hfens, barras ou pontos. Cada camada deve possuir seu prprio nome exclusivo.
E e A (esquerda
e alto) especicam a posio da camada em relao ao canto superior esquerdo da pgina ou camada-me (se aninhada).
L e U especicam
a largura e altura da camada. Esses valores sero ignorados se o contedo da camada exceder o tamanho especicado. Se div ou span forem denidos como tag padro, os valores padro para local e tamanho sero expressos em pixels (px). Tambm possvel especicar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milmetros), cm (centmetros) ou % (percentagem do valor da camada-me). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm. A denio Estouro controla como as camadas reagiro quando o contedo exceder o tamanho da camada.
449
ndice Z determina o ndice Z (ou ordem de empilhamento) da camada. As camadas com nmeros mais elevados aparecero acima das camadas com nmeros menores. Os valores podem ser positivos ou negativos. mais fcil alterar a ordem de empilhamento das camadas utilizando o painel Camadas do que digitando valores especcos ao ndice z. Consulte Como alterar a ordem de empilhamento de camadas na pgina 453.
As camadas da Netscape (que contm os tags layer ou ilayer) tambm podem ser empilhadas em relao a outras camadas na pgina. Quando voc selecionar uma camada da Netscape, aparecero duas outras opes no canto inferior direito do inspetor de propriedades. Utilize a opo A/B para selecionar uma posio de empilhamento relativa e, em seguida, escolha o nome de outra camada no menu pop-up direita. A especica uma camada acima da atual; B especica uma camada abaixo da atual.
Vis determina
a condio inicial de exibio da camada (visvel ou no). Utilize uma linguagem de criao de scripts, como JavaScript, para controlar a propriedade de visibilidade e exibir dinamicamente o contedo das camadas. Escolha dentre as seguintes opes:
Inherit (Herdar) utiliza a propriedade de visibilidade da camada-me. Visible (Visvel) exibe o contedo da camada, independentemente do valor da
camada-me.
a imagem de fundo da camada. Clique no cone correspondente pasta, para procurar e selecionar um arquivo de imagem, ou digite o caminho da imagem no campo de texto.
Cor de fundo especica Tag determina
a cor de fundo da camada. Deixe esta opo em branco para especicar um fundo transparente.
ilayer
o tag HTML a ser usado. span e div so recomendados. layer e criam camadas no Netscape Navigator que, no entanto, s sero visveis nos navegadores Netscape Navigator 4.
450
Captulo 17
Estouro determina
o que ocorrer se o contedo exceder o tamanho da camada. Escolha dentre as seguintes opes:
Visible (Visvel) aumenta o tamanho da camada, para que todo o seu contedo
esteja visvel. A camada se expandir para baixo e para a direita.
a rea visvel de uma camada e pode ser utilizada para retirar contedo das margens da camada. Especique os valores que representam a distncia, em pixels, dos limites da camadas. As denies A (alto) e E (esquerda) so relativas camada, e no pgina.
As opes esquerda, no alto e Pg. X, Pg. Y (apenas
com layer e ilayer) permitem posicionar uma camada em relao sua camada-me. A opo esquerda, no alto posiciona a camada em relao ao canto superior esquerdo da camada-me. A opo Pg. X, Pg. Y posiciona a camada em um local absoluto em relao ao canto superior esquerdo da pgina, independente da posio da camada-me.
Orig (apenas com layer e ilayer) permite exibir um outro documento HTML na camada. Clique no cone correspondente pasta, para procurar e selecionar o documento, ou digite o caminho at o documento. Observe que o Dreamweaver no exibir essa propriedade na janela do documento. A/B (apenas
com layer e ilayer) especica a camada acima (A) ou abaixo (B) da camada atual, na ordem de empilhamento (ndice z). Somente as camadas denidas previamente no documento aparecero na lista de nomes de camadas, situada direita do menu A/B.
451
Como definir as propriedades de camadas mltiplas Quando duas ou mais camadas forem selecionadas, o inspetor de propriedades de camadas exibir as propriedades de texto e um subconjunto das propriedades comuns das camadas, que permitiro modicar vrias camadas simultaneamente. Para selecionar camadas mltiplas, pressione a tecla Shift enquanto seleciona as camadas. Consulte Como manipular as camadas na pgina 445.
E e A especicam L e U especicam
a posio das camadas em relao ao canto superior esquerdo da pgina ou camada-me. a largura e altura das camadas. Esses valores sero ignorados se o contedo da camada exceder o tamanho especicado. Se div ou span forem denidos como tag padro, os valores padro para local e tamanho sero expressos em pixels (px). Tambm possvel especicar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milmetros), cm (centmetros) ou % (percentagem do valor da camada-me). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm.
Vis determina
Inherit (Herdar) utiliza a propriedade de visibilidade da camada-me. Visible (Visvel) exibe o contedo da camada, independentemente do valor da
camada-me.
a imagem de fundo de uma camada. Clique no cone correspondente pasta, para procurar e selecionar um arquivo de imagem, ou digite o caminho da imagem no campo de texto.
Cor de fundo especica
a cor de fundo de uma camada. Deixe esta opo em branco para especicar um fundo transparente.
452
Captulo 17
Escolha Janela > Camadas, para abrir o painel Camadas. Siga um dos procedimentos abaixo:
Selecione e arraste uma camada para cima ou para baixo, de acordo com a
ordem de empilhamento desejada. Aparecer uma linha medida que a camada for movida. Solte o boto do mouse quando a linha de colocao aparecer na ordem de empilhamento desejada.
Escolha Janela > Camadas, para abrir o painel Camadas e examinar a ordem de empilhamento atual. Selecione uma camada no painel ou na janela do documento. No inspetor de propriedades da camada, digite um nmero no campo ndice Z. ordem de empilhamento.
2 3
Digite um nmero mais alto, para mover a camada at uma posio superior na Digite um nmero mais baixo, para mover a camada at uma posio inferior
na ordem de empilhamento.
453
1 2
Escolha Janela > Camadas, para abrir o painel Camadas. Na linha da camada que estiver sendo alterada, clique na coluna do cone representando um olho, para denir a visibilidade desejada.
Um olho aberto signica que a camada est visvel. Um olho fechado signica que a camada est invisvel. Se no houver um cone representando um olho, a camada herdar as
denies de visibilidade da camada-me. Quando as camadas no estiverem aninhadas, a camada-me ser o corpo do documento, que est sempre visvel.
1 2
Escolha Janela > Camadas, para abrir o painel Camadas. Clique no cone representando um olho, no alto da coluna do cabealho.
454
Captulo 17
1 2
Escolha Modicar > Converter > Camadas em tabela. Na caixa de dilogo que aparecer, selecione as opes de layout desejadas. Mais preciso cria uma clula correspondente a cada camada, alm de quaisquer outras clulas que forem necessrias manuteno do espao entre as camadas. Menor: fechar as clulas vazias especica que as margens das camadas devero se alinhar se forem posicionadas, de acordo com o nmero especicado de pixels. Se selecionar esta opo, a tabela resultante ter poucas linhas e colunas vazias, mas poder no coincidir com o layout estipulado de forma precisa. Utilizar GIFs transparentes preenche a ltima linha da tabela com GIFs transparentes. Esse procedimento garante que a tabela ser exibida com as mesmas larguras de coluna em todos os tipos de navegadores. Quando esta opo estiver ativa, no ser possvel editar a tabela resultante arrastando as suas colunas. Quando estiver desativada, a tabela resultante no apresentar GIFs transparentes, porm a sua aparncia poder variar, de acordo com o tipo de navegador utilizado. Centralizar na pgina centraliza a tabela resultante na pgina. Se esta opo estiver desativada, a tabela ser alinhada esquerda. Selecione as ferramentas de layout e opes de grade desejadas e clique em OK.
455
1 2
Escolha Modicar > Converter > Tabelas em camadas. Na caixa de dilogo que aparecer, selecione as opes desejadas. lo a posicionar as camadas. Consulte Como encaixar as camadas na grade na pgina 448.
Mostrar a grade e Encaixar na grade permitem utilizar uma grade para auxili Evitar sobreposies de camadas restringe a posio das camadas ao serem
criadas, movidas e redimensionadas, para que no se sobreponham. Consulte Como evitar as sobreposies de camadas na pgina 456.
Clique em OK.
As tabelas sero convertidas em camadas. As clulas vazias no sero convertidas em camadas, a no ser que elas tenham uma cor de fundo.
Nota: Os elementos de pgina que tiverem sido colocados fora das tabelas na pgina tambm sero colocados em camadas.
Como evitar as sobreposies de camadas Como as clulas de tabelas no podem se sobrepor, o Dreamweaver no poder criar uma tabela a partir de camadas sobrepostas. Se estiver planejando converter as camadas de um documento em tabelas para garantir a compatibilidade com os navegadores da verso 3.0, utilize a opo Evitar sobreposies, que restringir o movimento e posicionamento das camadas, de maneira que no haja sobreposio.
Para evitar que as camadas se sobreponham:
Escolha Modicar > Organizar > Evitar sobreposies de camadas, ou ative a opo Evitar sobreposies, no painel Camadas.
456
Captulo 17
Quando esta opo estiver ativada, uma camada no poder ser criada na frente de, movida ou redimensionada sobre ou aninhada dentro de uma camada existente. Se esta opo for ativada depois da criao de camadas sobrepostas, arraste a camada sobreposta e afaste-a da outra camada. O Dreamweaver no corrigir as camadas sobrepostas automaticamente na pgina quando a opo Evitar sobreposies de camadas for ativada. Quando essa opo e o encaixe estiverem ativos, a camada no se encaixar na grade, se isto acarretar a sobreposio de duas camadas. Em vez disso, ela se encaixar na margem da camada mais prxima.
Nota: Certas aes permitem que as camadas se sobreponham, mesmo quando a opo Evitar sobreposies estiver ativada. Se inserir uma camada a partir do menu, digite nmeros no inspetor de propriedades ou reposicione as camadas editando o cdigo-fonte HTML, no inspetor de HTML. possvel provocar a sobreposio ou o aninhamento de camadas enquanto a opo estiver ativada. Se isto ocorrer, arraste as camadas sobrepostas at a janela do documento, a fim de separ-las.
Como converter para obter compatibilidade com a verso 3.0 Utilize a opo Converter, no menu Arquivo, para criar uma verso de pgina compatvel com navegador 3.0, que utiliza camadas. O Dreamweaver criar um outro documento convertido, preservando o original. Em geral, estas converses devero ser efetuadas apenas quando voc estiver inteiramente satisfeito com o arquivo original, j que seria necessrio repetir a converso a cada vez que esse arquivo for alterado.
Para converter um arquivo a ser utilizado com os navegadores da verso 3.0:
1 2
Escolha Arquivo > Converter > Compatvel com navegador 3.0. Na clula de dilogo que aparecer, escolha se deseja converter camadas em tabelas, estilos CSS em markup de HTML (estilos de caracteres), ou ambos. Clique em OK.
O Dreamweaver abrir o arquivo convertido em uma nova janela sem ttulo. Quando a opo Converter camadas em tabelas ou Ambos for selecionada, todas as camadas sero substitudas por uma nica tabela, que manter o posicionamento original.
Nota: No possvel converter as camadas sobrepostas ou fora da pgina, esquerda ou no alto.
Se a opo Converter estilos CSS em markup de HTML ou Ambos for selecionada, o markup de CSS ser substitudo, onde for possvel, por estilos de caracteres HTML. Qualquer markup de CSS que no puder ser convertido em HTML ser removido. Consulte a Tabela de converso de CSS em markup de HTML na pgina 278 para obter mais informaes sobre os estilos que so convertidos e os que so removidos.
457
O cdigo de linhas de tempo que anima as camadas ser removido. O cdigo de linhas de tempo que no estiver relacionado s camadas (comportamentos ou alteraes origem da imagem, por exemplo) ser executado conforme especicado. A linha de tempo ser automaticamente rebobinada at o quadro 1. Para obter mais informaes sobre as linhas de tempo, consulte Como criar uma animao de linha de tempo na pgina 461.
458
Captulo 17
Painel Linhas de tempo O painel Linhas de tempo representa a alterao das propriedades das camadas e imagens ao longo do tempo. Escolha Janela > Linhas de tempo, para abrir o painel Linhas de tempo. Clique no painel Linhas de tempo com o boto direito do mouse (no Windows), ou enquanto mantm pressionada a tecla Control (no Macintosh), para abrir um menu contextual contendo todos os comandos relevantes.
Menu pop-up Linha de tempo Cabeote de execuo Nmeros de quadros
Canal de comportamentos
Canais de animao
na pgina.
Menu pop-up Linha de tempo especica Canais de animao exibem
quais linhas de tempo do documento esto exibidas no painel Linhas de tempo. barras para animar as camadas e imagens.
Barras de animao mostram a durao de cada animao de objeto. Uma nica linha pode incluir vrias barras, que representam diversos objetos. Barras diferentes no podem controlar o mesmo objeto no mesmo quadro. Quadros primrios so
quadros situados em uma barra na qual voc havia especicado algumas propriedades (como a posio) do objeto. O Dreamweaver calcula os valores intermedirios dos quadros situados entre os quadros primrios. Os quadros primrios so indicados por pequenos crculos.
Canal de comportamentos o canal contendo os comportamentos que devero ser
459
o nmero seqencial de quadros. O nmero entre os botes Voltar e Executar representa o quadro atual. Controle a durao da animao ao denir o nmero total de quadros e o nmero de quadros por segundo (qps). A denio padro de 15 quadros por segundo constitui uma boa taxa mdia, a ser utilizada na maior parte dos navegadores executados nos sistemas mais comuns do Windows e Macintosh. possvel que as taxas mais rpidas no melhorem o desempenho. Os navegadores sempre executam cada quadro da animao, mesmo se no puderem atingir a taxa de quadros especicada no sistema do usurio. A taxa de quadros ser ignorada se for mais alta do que o navegador pode gerenciar. Opes de execuo Abaixo, est uma lista das opes de execuo para exibir a animao.
o cabeote de execuo um quadro esquerda. Clique em Voltar e mantenha pressionado o boto do mouse, para executar a linha de tempo de trs para diante.
Executar move
o cabeote de execuo um quadro direita. Clique em Executar e mantenha pressionado o boto do mouse, para executar a linha de tempo continuamente.
Execuo automtica inicia a execuo automtica de uma linha de tempo quando a pgina tiver sido carregada em um navegador. A execuo automtica anexa um comportamento ao tag body da pgina, que executa a ao Executar a linha de tempo quando a pgina for carregada. Loop provoca
a repetio indenida da linha de tempo quando a pgina estiver aberta em um navegador. A opo Loop insere o comportamento Ir para o quadro da linha de tempo, no canal de comportamentos, aps o ltimo quadro da animao. Clique duas vezes no marcador deste quadro, para editar os parmetros do comportamento e alterar o nmero de repeties.
460
Captulo 17
Como criar uma animao de linha de tempo As linhas de tempo criam animaes alterando a posio, tamanho, visibilidade e ordem de empilhamento das camadas. As linhas de tempo podem alterar tambm os arquivos de origem de imagens. Assim, possvel criar uma apresentao de slides de imagem com linhas de tempo. As linhas de tempo podem mover apenas as camadas. Para mover imagens ou texto, crie uma camada utilizando o boto Desenhar camada, no painel Objetos e, em seguida, insira imagens, texto ou qualquer outro tipo de contedo na camada. Consulte Como criar camadas na pgina na pgina 441.
Para criar uma animao de linha de tempo:
1 2 3
Se desejar animar uma camada, mova-a at o ponto inicial da animao. Escolha Janela > Linhas de tempo. Selecione a camada a ser animada. Certique-se de ter selecionado o elemento desejado. Para selecionar uma camada, clique no marcador ou na ala de seleo da camada, ou utilize o painel Camadas. Consulte tambm Como manipular as camadas na pgina 445. Quando a camada estiver selecionada, aparecero alas ao seu redor, como mostra a seguinte ilustrao.
Clique no marcador da camada para selecion-la
Ao clicar na camada, surgir um ponto de insero piscando dentro da mesma, porm isto no indica que ela esteja selecionada.
461
Escolha Modicar > Linha de tempo >Adicionar objeto linha de tempo, ou simplesmente arraste o objeto selecionado at o painel Linhas de tempo. Aparecer uma barra no primeiro canal da linha de tempo. O nome da camada aparecer na barra.
5 6
Clique no marcador do quadro primrio, no nal da barra. Mova a camada na pgina para onde dever estar ao nal da animao. Uma linha aparecer exibindo o caminho da animao na janela do documento. Se desejar que a camada se mova em uma curva, selecione a respectiva barra de animao e clique mantendo pressionada a tecla Control (no Windows) , ou a tecla Command (no Macintosh) e clique num quadro no meio da barra de animao, para adicionar um quadro primrio na posio do cursor, ou clique em um quadro no meio da barra de animao e, no menu de atalhos, escolha Adicionar quadro primrio. Repita essa etapa para denir outros quadros primrios. Mantenha pressionado o boto Executar, para visualizar a animao na pgina. Repita o procedimento para adicionar outras camadas e imagens linha de tempo, e criar uma animao mais complexa.
Como criar uma linha de tempo arrastando um caminho Se desejar criar uma animao com um caminho complexo, a gravao do caminho medida que arrasta a camada poder ser mais eciente do que a criao de quadros primrios individuais.
Para criar uma linha de tempo arrastando um caminho:
1 2
Selecione uma camada. Mova a camada at o ponto inicial da animao. Certique-se de ter selecionado o elemento correto. Clique no marcador da camada, na ala de seleo da camada ou utilize o painel Camadas para selecionar uma camada. Consulte tambm Como manipular as camadas na pgina 445.
3 4 5
Escolha Modicar > Linha do tempo > Gravar o caminho da camada. Arraste a camada pela pgina para criar um caminho. Solte o mouse no ponto em que a animao dever parar. O Dreamweaver adicionar uma barra de animao linha de tempo com o nmero apropriado de quadros primrios.
No painel Linhas de tempo, clique no boto Rebobinar; em seguida, mantenha pressionado o boto Executar, para visualizar a animao.
462
Captulo 17
Como modificar as linhas de tempo Aps ter denido os componentes bsicos de uma linha de tempo, faa alteraes, como adicionar e remover quadros, alterar o incio da animao, etc.
Para modificar uma linha de tempo, siga um dos procedimentos abaixo:
Para tornar a animao mais longa, arraste o marcador do quadro nal para a
direita. Todos os quadros primrios da animao sero acomodados no novo espao, mantendo constantes as suas posies relativas. Pressione a tecla Alt (no Windows), ou Option (no Macintosh) enquanto arrasta o marcador do quadro nal, para impedir que os outros quadros primrios se movam.
Para que a linha de tempo seja executada automaticamente quando a pgina for
aberta em um navegador, clique em Execuo automtica. Esta opo anexar um comportamento pgina, que executar a ao Executar a linha de tempo quando a pgina for carregada.
Para que a linha de tempo seja repetida continuamente, clique em Loop. Esta
opo inserir a ao Ir para o quadro da linha de tempo no canal de comportamentos, aps o ltimo quadro da animao. possvel editar os parmetros relacionados a esse comportamento, para denir o nmero de repeties.
463
Como alterar as propriedades das imagens e camadas com as linhas de tempo Alm de mover as camadas com as linhas de tempo, possvel alterar o arquivo de origem de uma imagem e a visibilidade, tamanho e ordem de empilhamento de uma camada.
Para alterar as propriedades de imagens e camadas com uma linha de tempo:
No painel Linhas de tempo, siga um dos procedimentos abaixo: quadros inicial e nal so sempre primrios.
Selecione um quadro primrio na barra que controla o objeto a ser alterado. Os Para criar um novo quadro primrio, clique em um quadro no meio da barra de
animao e escolha Modicar > Linha de tempo > Adicionar quadro primrio, ou clique em um quadro da barra de animao enquanto mantm pressionada a tecla Control (no Windows) ou Command (no Macintosh).
2
Dena as novas propriedades do objeto, escolhendo uma das seguintes opes: correspondente pasta, ao lado da caixa Orig, no inspetor de propriedades, para procurar e selecionar uma nova imagem.
Para alterar o arquivo de origem de uma imagem, clique no cone Para alterar a visibilidade de uma camada, escolha default (padro), inherit
(herdar), visible (visvel) ou hidden (oculta), no menu pop-up Vis, no inspetor de propriedades. Ou utilize os cones representando um olho, no painel Camadas. Consulte Como alterar a visibilidade das camadas na pgina 454.
464
Captulo 17
Como utilizar mltiplas linhas de tempo Em vez de tentar controlar todas as aes em uma pgina com uma linha de tempo, mais fcil trabalhar com linhas de tempo individuais que controlam partes distintas da pgina. Por exemplo: a pgina poder incluir elementos interativos que acionam diversas linhas de tempo.
Para gerenciar vrias linhas de tempo, utilize as seguintes opes:
Para criar uma nova linha de tempo, escolha Modicar > Linha de tempo >
Adicionar linha de tempo.
Para exibir uma outra linha de tempo no painel Linhas de tempo, escolha uma
nova linha de tempo no menu pop-up Linha de tempo, no painel Linhas de tempo. Como copiar e colar as animaes Quando a seqncia de animao o satiszer, copie e cole-a em outra rea da linha de tempo, em outra linha de tempo do mesmo documento ou em uma linha de tempo de outro documento. Tambm possvel copiar e colar vrias seqncias simultaneamente.
Para recortar ou copiar e colar seqncias de animao:
Clique em uma barra de animao para selecionar uma seqncia. Para selecionar diversas seqncias, pressione a tecla Shift enquanto clica, ou pressione a teclas Control e A (no Windows), ou Command e A (no Macintosh), para selecionar todas as seqncias. Copie ou recorte a seleo. Siga um dos procedimentos abaixo:
2 3
Mova o cabeote de execuo para um outro ponto da linha de tempo. Selecione uma outra linha de tempo, no menu pop-up Linha de tempo. Abra outro documento ou crie um novo e, em seguida, clique no inspetor de
linhas de tempo.
465
Cole a seleo na linha de tempo. As barras de animao de um mesmo objeto no podem se sobrepor porque uma camada no pode ocupar dois lugares simultaneamente (nem uma imagem pode ter duas origens diferentes ao mesmo tempo). Se a barra de animao a ser colada se sobrepuser a uma outra do mesmo objeto, o Dreamweaver acomodar automaticamente a seleo at o primeiro quadro sem sobreposio.
H dois princpios a serem levados em conta quando forem coladas seqncias de animao em um outro documento:
1 2
No painel Linhas de tempo, selecione a seqncia de animao e copie-a. Clique em qualquer quadro do painel Linhas de tempo e cole a seqncia no quadro. Clique com o boto direito do mouse (no Windows), ou pressione a tecla Control e clique (no Macintosh) na seqncia de animao colada e escolha Alterar o objeto, no menu contextual. Na caixa de dilogo que aparecer, escolha outro objeto no menu pop-up e clique em OK. Repita as etapas 2 a 4 para quaisquer outros objetos aos quais ser associada a mesma seqncia de animao.
Depois de criada a seqncia de animao, ainda possvel mudar de opinio sobre as camadas que devero ser animadas; basta seguir as etapas 3 e 4, acima, (no necessrio copiar ou colar).
466
Captulo 17
Dicas de animao para as linhas de tempo As seguintes sugestes podem melhorar o desempenho das animaes e facilitar a sua criao:
Crie animaes simples. No crie animaes que exijam mais recursos do que
os navegadores atuais podem oferecer. Os navegadores sempre executam cada quadro de uma animao de linha de tempo, mesmo quando o desempenho do sistema ou da Internet diminuir.
467
468
Captulo 17
18
CAPTULO 18
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Os comportamentos permitem ao visitante interagir com pginas da Web de diversas maneiras ou determinar a execuo de certas tarefas. Um comportamento uma combinao entre um evento e uma ao por ele disparada. No painel Comportamentos, possvel adicionar um comportamento a uma pgina ao especicar uma ao e, subseqentemente, o evento que a ir disparar. Na realidade, os eventos so mensagens geradas por navegadores, que indicam algum tipo de interao do visitante com a sua pgina. Por exemplo: quando um visitante mover o ponteiro sobre um link, o navegador gerar um evento onMouseOver correspondente ao link; em seguida, o navegador vericar se existe algum cdigo JavaScript a ser chamado quando o evento for gerado. Diferentes eventos so denidos para diferentes elementos de pgina. Por exemplo: na maior parte dos navegadores, onMouseOver e onClick so eventos associados a links, enquanto que onLoad um evento associado a imagens e seo body do documento. Uma ao consiste de cdigo previamente escrito em JavaScript, que realiza uma tarefa especca, como a abertura de uma janela do navegador, a exibio ou ocultamento de uma camada, a execuo de um som ou a interrupo de um lme Shockwave. As aes que so fornecidas com o Dreamweaver so cuidadosamente escritas pelos programadores do Dreamweaver, para proporcionar o mximo de compatibilidade entre os diferentes navegadores. Depois de anexar um comportamento a um elemento da pgina, sempre que o evento especicado ocorrer para o elemento, o navegador chamar a ao (o cdigo JavaScript) a ele associado. Os eventos que podem ser utilizados para disparar uma determinada ao variam de acordo com o navegador utilizado. Por exemplo: se voc anexar a ao Mensagem pop-up a um link e especicar que ela ser disparada pelo evento onMouseOver, sempre que algum indicar o link com o ponteiro do mouse no navegador, a mensagem ser exibida em uma caixa de dilogo.
469
Um nico evento pode disparar diversas aes e possvel especicar a ordem na qual estas aes ocorrero. O Macromedia Dreamweaver proporciona cerca de 24 aes de comportamentos. possvel ter acesso a outras aes no site de intercmbio da Macromedia na Web, assim como nos sites de outros programadores. Consulte Como fazer o download de e instalar os comportamentos de outros fabricantes na pgina 478. Se souber utilizar os recursos JavaScript, voc poder gravar as suas prprias aes relacionadas a comportamentos. Para obter mais informaes sobre a gravao de aes de comportamentos, consulte Extenso dos recursos do Dreamweaver.
Nota: Os termos comportamento e ao se relacionam ao Dreamweaver, e no ao HTML. Do ponto de vista do navegador, uma ao se assemelha a qualquer outro tipo de cdigo JavaScript.
O painel Comportamentos
Utilize o painel Comportamentos para anexar comportamentos a elementos de pgina (mais especicamente, aos tags) e para modicar os parmetros de comportamentos anexados anteriormente. Para abrir o painel Comportamentos, escolha Janela > Comportamentos. O tag que estiver selecionado na janela do documento aparecer na barra de ttulo do painel Comportamentos. Os comportamentos que j tiverem sido anexados ao elemento selecionado da pgina aparecero na lista de comportamentos (a rea principal do painel), em ordem alfabtica, conforme o evento. Se houver diversas aes para o mesmo evento, estas aparecero na ordem na qual sero executadas. Se no houver qualquer comportamento na lista de comportamentos, o elemento selecionado no apresenta qualquer comportamento a ele anexado. Para obter informaes detalhadas sobre as opes do painel Comportamentos, consulte a Ajuda do Dreamweaver.
Sobre os eventos
A lista a seguir descreve os eventos que podem ser associados s aes listadas no menu pop-up Aes (+) do painel Comportamentos. Quando um visitante de sua pgina da Web interagir com ela clicando em uma imagem, por exemplo o navegador gerar eventos, que podem ser utilizados para chamar as funes JavaScript responsveis pela ocorrncia da ao. Os eventos tambm podem ser gerados sem a interao com o usurio, como no caso da denio de atualizao automtica de uma pgina a cada 10 segundos. O Dreamweaver possui muitas aes comuns que podem ser disparadas atravs da utilizao destes eventos.
470
Captulo 18
A lista tambm especica o navegador que pode gerar cada evento. NS3 corresponde ao Netscape Navigator 3.0; NS4 corresponde ao Netscape Navigator 4.0; IE3 corresponde ao Internet Explorer 3.0; IE4 corresponde ao Internet Explorer 4.0. Para obter mais informaes sobre os eventos no Internet Explorer, consulte a pgina de eventos de HTML dinmico da Microsoft (disponvel em Recursos de tecnologias da Web e HTML na pgina 25). Observe que a maior parte dos eventos s poder ser utilizada com certos elementos de pgina. Para determinar os eventos correspondentes a um determinado elemento de pgina que recebem o suporte de um determinado navegador, insira o elemento de pgina no documento e anexe um comportamento a ele. Em seguida, consulte o menu pop-up Eventos, no painel Comportamentos. Para obter uma consulta bem detalhada dos tags que podero ser utilizados em associao a um evento e navegador determinados, procure o evento em um dos arquivos da pasta Dreamweaver/Conguration/Behaviors/ Events.
onAbort (NS3,
NS4, IE4, IE5) gerado quando o visitante interromper a transferncia de uma imagem no navegador (por exemplo: quando clicar no boto Parar do navegador enquanto a imagem estiver sendo transferida). IE5) gerado quando um elemento de dados ligados na pgina tiver terminado a atualizao da origem dos dados.
onAfterUpdate (IE4,
onBeforeUpdate (IE4,
IE5) gerado quando um elemento de dados ligados na pgina tiver sido alterado e prestes a perder o foco (e, portanto, prestes a atualizar a origem dos dados).
onBlur (NS3,
NS4, IE3, IE4, IE5) o oposto de onFocus. O evento onBlur gerado quando o elemento especicado deixar de ser o foco da interao com o visitante. Por exemplo: quando um visitante clicar fora de um campo de texto depois de ter clicado nele, o navegador gerar um evento onBlur para o campo de texto.
onBounce (IE4,
IE5) gerado quando o contedo de um elemento do letreiro tiver alcanado os limites deste.
onChange (NS3,
NS4, IE3, IE4, IE5) gerado quando o visitante alterar um valor na pgina, como na escolha de um item de um menu, ou quando alterar o valor de um campo de texto e, em seguida, clicar em outro local da pgina.
onClick (NS3, NS4, IE3, IE4, IE5) gerado quando o visitante clicar no elemento
especicado, como um link, boto ou mapa de imagens. O clique no ser efetuado at que o visitante solte o boto do mouse; utilize o evento onMouseDown para provocar uma ao assim que o boto for pressionado.
onDblClick (NS4,
IE4, IE5) gerado quando o visitante clicar duas vezes no elemento especicado. Clicar duas vezes denido como a ao de pressionar rapidamente e soltar o boto do mouse enquanto se indica um elemento.
onError (NS3,
NS4, IE4, IE5) gerado quando ocorrer um erro do navegador enquanto uma pgina ou imagem estiver sendo transferida.
471
onFinish (IE4,
NS4, IE3, IE4, IE5) gerado quando o elemento especicado se tornar o foco da interao com o visitante. Por exemplo: a ao de clicar em um campo de texto de um formulrio gera um evento onFocus.
onHelp (IE4, IE5) gerado quando o visitante clicar no boto Ajuda do navegador
IE4, IE5) gerado assim que o visitante pressionar qualquer tecla. No necessrio que o visitante solte a tecla para que este evento seja gerado. O navegador no poder detectar a tecla que foi pressionada.
onKeyPress (NS4,
IE4, IE5) gerado assim que o visitante pressionar e soltar qualquer tecla; este evento equivale combinao dos eventos onKeyDown e onKeyUp. O navegador no poder detectar a tecla que foi pressionada.
onKeyUp (NS4, onLoad (NS3,
IE4, IE5) gerado assim que o visitante soltar uma tecla aps tla pressionado. O navegador no poder detectar a tecla que foi pressionada. NS4, IE3, IE4, IE5) gerado quando uma imagem ou pgina tiver terminado de ser transferida.
onMouseDown (NS4, IE4, IE5) gerado quando o visitante pressionar o boto do
mouse. No necessrio que o visitante solte o boto do mouse para que este evento seja gerado.
onMouseMove (IE3,
IE4, IE5) gerado quando o visitante mover o mouse enquanto indica o elemento especicado. Ou seja, o ponteiro permanece dentro dos limites do elemento.
onMouseOut (NS3,
NS4, IE4, IE5) gerado quando o ponteiro se afastar do elemento especicado. Em geral, o elemento especicado uma imagem ou um link anexado a uma imagem. Em geral, este evento utilizado com o comportamento Restaurar a imagem permutada, para retornar uma imagem ao seu estado original quando o visitante deixar de indic-la.
onMouseOver (NS3,
NS4, IE3, IE4, IE5) gerado quando o mouse for inicialmente movido para indicar o elemento especicado (ou seja, quando o ponteiro passar a indicar o elemento). Em geral, o elemento especicado para este evento um link.
onMouseUp (NS4, onMove (NS4)
onReadyStateChange (IE4,
IE5) gerado quando o estado do elemento especicado for alterado. Os estados do elemento podem ser no inicializado, carregando e concludo.
onReset (NS3,
NS4, IE3, IE4, IE5) gerado quando um formulrio for redenido aos seus valores padro.
472
Captulo 18
onResize (NS4,
IE4, IE5) gerado quando o visitante redimensionar a janela do navegador ou uma moldura.
onRowEnter (IE4,
IE5) gerado quando o ponteiro de registro da origem dos dados ligados tiver sido alterado.
onRowExit (IE4, IE5) gerado quando o ponteiro de registro da origem dos dados
pgina.
onSelect (NS3,
NS4, IE3, IE4, IE5) gerado quando o visitante selecionar texto em um campo de texto.
onStart (IE4, IE5) gerado quando o contedo de um elemento do letreiro iniciar
um loop.
onSubmit (NS3,
NS4, IE3, IE4, IE5) gerado quando o visitante enviar um NS4, IE3, IE4, IE5) gerado quando o visitante deixar a pgina.
formulrio.
onUnload (NS3,
possvel especicar mais de uma ao por evento. As aes ocorrem na ordem em que aparecem na lista da coluna Aes do painel Comportamentos. Para obter mais informaes sobre como alterar a ordem das aes, consulte Como alterar um comportamento na pgina 476.
Para anexar um comportamento:
Selecione um elemento na pgina, como uma imagem ou link, por exemplo. Para anexar um comportamento pgina inteira, clique no tag <body>, no seletor de tags situado no canto inferior esquerdo da janela do documento.
Escolha Janela > Comportamentos, para abrir o painel Comportamentos. O tag HTML do objeto selecionado aparecer na barra de ttulo do painel Comportamentos.
473
Clique no boto com o sinal de adio (+) e escolha uma ao no menu pop-up Aes. As aes que estiverem esmaecidas no menu no podero ser escolhidas. possvel que elas estejam esmaecidas porque o documento no apresenta um objeto necessrio. Por exemplo: a ao Executar a linha de tempo estar esmaecida se o documento no possuir linhas de tempo, enquanto que a ao Controlar o Shockwave ou Flash estar esmaecida se o documento no contiver lmes Shockwave ou Flash. Se no houver qualquer evento disponvel para o objeto selecionado, todas as aes estaro esmaecidas. A escolha de uma ao acarretar o aparecimento de uma caixa de dilogo, que exibir os parmetros e instrues correspondentes ao.
Digite os parmetros relativos ao e clique em OK. Todas as aes enviadas com o Dreamweaver funcionam com os navegadores das verses 4.0 e posteriores. Algumas aes no funcionam nos navegadores mais antigos. Consulte Como utilizar as aes de comportamentos enviadas com o Dreamweaver na pgina 478.
O evento padro que desencadeia a ao aparecer na coluna Eventos. Se este no for o evento de desencadeamento desejado, escolha outro evento no menu pop-up Eventos. Para abrir o menu pop-up Eventos, selecione um evento ou ao no painel Comportamentos e clique na seta preta para baixo que aparecer entre o nome do evento e o da ao. Os eventos que aparecero no menu pop-up Eventos dependero do objeto selecionado e dos navegadores especicados no submenu Mostrar os eventos de. possvel que alguns eventos estejam esmaecidos, se os objetos relevantes ainda no existirem na pgina ou se o objeto selecionado no puder receber eventos. Se os eventos esperados no aparecerem, certique-se de que o objeto correto esteja selecionado ou altere os navegadores de destino no menu pop-up Mostrar os eventos de. Se voc estiver anexando um comportamento a uma imagem, alguns eventos (como onMouseOver) aparecero entre parnteses. Estes eventos estaro disponveis apenas para os links. Se voc escolher um deles, o Dreamweaver colocar um tag a em volta da imagem, a m de denir um link nulo. Na caixa Link do inspetor de propriedades, o link nulo representado por javascript:;. possvel alterar o valor do link se desejar torn-lo um link real a outra pgina, porm, se o link JavaScript for excludo e no for substitudo por outro link, o comportamento ser removido.
474
Captulo 18
No inspetor de propriedades, digite javascript:; no campo Link. Assegure-se de ter includo os sinais de dois pontos e ponto-e-vrgula.
Nota: Ao invs destes, possvel utilizar o sinal # no campo Link, se preferir. O problema em utilizar o sinal # que quando um visitante clicar no link, o navegador saltar at o alto da pgina correspondente. O ato de clicar no link nulo de JavaScript no provocar qualquer efeito sobre a pgina, sendo, portanto, geralmente prefervel.
Mantendo o texto selecionado, abra o painel Comportamentos (Janela > Comportamentos). No menu pop-up Aes, escolha uma ao, digite os parmetros a ela correspondentes e escolha um evento para dispar-la. Para obter mais detalhes, consulte Como anexar um comportamento na pgina 473.
Abra o inspetor de cdigo (Janela > Inspetor de cdigo) ou a visualizao de cdigo da janela do documento. Localize o link. No tag a href do link, insira o seguinte atributo: style="text-decoration:none; color:black". Esta denio de atributo desativa o sublinhado e torna preta a cor do texto. Obviamente, se o texto circundante tiver outra cor, utilize-a em vez da cor preta. Para alterar a aparncia de texto com links em toda a pgina ou em todo o site, utilize os estilos CSS para criar um estilo novo para os links. Para obter mais detalhes, consulte Como inserir e formatar texto na pgina 251.
2 3
475
Clique em um quadro do canal de comportamentos, no painel Linhas de tempo. Utilize o painel Comportamentos para escolher uma ao a ser executada no quadro. A ao aparecer no painel Comportamentos, e um evento indicar o nmero do quadro no qual ela ser disparada. Aparecer um sinal de subtrao () no canal de comportamentos do quadro da linha de tempo.
1 2
Selecione um objeto que possua um comportamento a ele anexado. Escolha Janela > Comportamentos, para abrir o painel Comportamentos. Os comportamentos aparecero no painel, em ordem alfabtica, segundo o evento. Se houver diversas aes para o mesmo evento, estas aparecero na ordem na qual sero executadas.
476
Captulo 18
Escolha dentre as seguintes opes: comportamento ou selecione-o e pressione a tecla Enter (no Windows), ou Return (no Macintosh). Em seguida, altere os parmetros na caixa de dilogo e clique em OK.
1 2 3 4
Selecione um elemento ao qual tiver sido anexado o comportamento. Abra o painel Comportamentos. Clique duas vezes no comportamento. Clique em OK na caixa de dilogo do comportamento.
477
Abra o painel Comportamentos e, no menu pop-up Aes (+), escolha Obter mais comportamentos. O navegador primrio ser aberto e o site de intercmbio aparecer. necessrio estar conectado Web para poder efetuar o download de comportamentos.
2 3
Procure os pacotes. Efetue o download e instale o pacote de extenso desejado. Para obter mais detalhes, consulte Como adicionar extenses ao Dreamweaver na pgina 98.
Embora as aes do Dreamweaver tenham sido escritas visando a maximizar a compatibilidade entre os diferentes navegadores, algumas aes no funcionam nas verses mais antigas de alguns navegadores. Alm disso, alguns navegadores no oferecem qualquer suporte ao JavaScript e muitos usurios que consultam a Web mantm o JavaScript desativado em seus navegadores. Para obter os melhores resultados de compatibilidade entre diversas plataformas, fornea interfaces alternativas delimitadas por tags noscript, de maneira que os usurios que no contarem com o JavaScript possam utilizar o seu site.
478
Captulo 18
Consulte a tabela abaixo para obter detalhes sobre como funcionam as aes em determinadas verses anteriores 4.0 do Netscape Navigator e do Internet Explorer. Para obter uma explicao sobre como cada ao funciona e como escolher as opes associadas a ela, consulte os tpicos listados aps a tabela .
No Macintosh Ao Netscape Navigator 3.0 OK OK OK Internet Explorer 3.0x Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros No Windows Netscape Navigator 3.0 OK OK OK OK OK Internet Explorer 3.01 OK OK OK OK Falha sem provocar erros Falha sem provocar erros OK Falha sem provocar erros Falha sem provocar erros OK Falha sem provocar erros OK Falha sem provocar erros Falha sem provocar erros OK Falha sem provocar erros
Verificar o plug-in OK Controlar o Shockwave ou Flash Arrastar a camada Ir para a URL Menu de salto Opo Ir do menu de salto Abrir a janela do navegador Executar o som OK
Definir a imagem OK da barra de navegao Definir o texto da OK moldura Definir o texto da Falha sem camada provocar erros
479
No Macintosh Ao Netscape Navigator 3.0 OK Internet Explorer 3.0x Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros
Definir o texto do OK campo de texto Mostrar/ocultar as camadas Permutar a imagem Restaurar a imagem permutada Falha sem provocar erros OK OK
OK Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros
Ir para o quadro A animao da Falha sem da linha de tempo origem da provocar erros imagem e a chamada do Executar a linha comportamento de tempo e Parar funcionam, a linha de tempo porm a animao da camada falha sem provocar erros. Validar o formulrio OK Falha sem provocar erros
A animao da Falha sem origem da provocar erros imagem e a chamada do comportamento funcionam, porm a animao da camada falha sem provocar erros. OK OK
Chamar o JavaScript A ao Chamar o JavaScript permite utilizar o painel Comportamentos para especicar a execuo de uma funo ou linha de cdigo personalizada de JavaScript quando ocorrer um evento. possvel escrever o JavaScript ou utilizar o cdigo disponvel gratuitamente em diversas bibliotecas de JavaScript na Web.
Para poder utilizar a ao Chamar o JavaScript:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Chamar o JavaScript, no menu pop-up Aes. Digite o JavaScript a ser executado ou o nome de uma funo. Por exemplo: para criar um boto Voltar, digite if (history.length > 0){history.back()}. Se tiver encapsulado o cdigo em uma funo, digite apenas o nome da funo (goBack() , por exemplo).
480
Captulo 18
4 5
Clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.
Alterar a propriedade Utilize a ao Alterar a propriedade, para alterar o valor de uma das propriedades de um objeto (a cor de fundo de uma camada ou a ao relacionada a um formulrio, por exemplo). As propriedades que podem ser afetadas so determinadas pelo navegador; um nmero maior de propriedades poder ser alterado por este comportamento no Microsoft Internet Explorer (IE) 4.0 do que no IE 3.0 ou nas verses 3.0 e 4.0 do Netscape Navigator. Por exemplo: possvel denir dinamicamente a cor de fundo de uma camada .
Nota: Utilize esta ao apenas se j estiver muito familiarizado com HTML e JavaScript. Para poder utilizar a ao Alterar a propriedade:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Alterar a propriedade, no menu pop-up Aes. No menu pop-up Tipo de objeto, escolha o tipo de objeto cuja propriedade deseja alterar. O menu pop-up Objeto com nome passar a listar todos os objetos com nome do tipo selecionado.
4 5
Escolha um objeto no menu pop-up Objeto com nome. Escolha uma propriedade no menu pop-up Propriedade, ou digite o nome da propriedade no campo de texto. Para poder examinar as propriedades que podem ser alteradas em cada navegador, escolha navegadores diferentes ou verses de navegadores diferentes, no menu pop-up de navegadores. Se estiver digitando o nome de uma propriedade, certique-se de utilizar o nome correto da propriedade JavaScript (e lembre-se de que as propriedades JavaScript so sensveis a maisculas/ minsculas).
481
Verique se o evento padro corresponde ao desejado. Quando o evento ocorrer, a ao ser executada e a propriedade alterada. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.
Verificar o navegador Utilize a ao Vericar o navegador, para enviar os visitantes a outras pginas, dependendo da marca e verso do seu navegador. Por exemplo: possvel optar por enviar os usurios para uma pgina, se eles estiverem utilizando a verso 4.0 ou mais avanada do Netscape Navigator; para outra pgina, se utilizarem a verso 4.0 ou mais avanada do Microsoft Internet Explorer 4.0, ou por mant-los na mesma pgina, caso estiverem utilizando qualquer outro navegador. til anexar este comportamento ao tag body de uma pgina que seja compatvel com praticamente qualquer navegador (e que no utilize outro JavaScript); desta maneira, mesmo os visitantes que chegarem pgina com o JavaScript desativado podero ver algo. Uma outra opo seria anexar este comportamento a um link nulo (<um href="javascript:;">, por exemplo), de forma que a ao determinasse o destino do link, com base na marca e verso do navegador do visitante.
Para poder utilizar a ao Verificar o navegador:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Vericar o navegador, no menu pop-up Aes. Determine como gostaria de separar os visitantes: por marca de navegador, por verso de navegador ou por ambos. Por exemplo: voc prefere que todos os visitantes com um navegador da verso 4.0 vejam uma pgina, enquanto os visitantes com outras verses vejam uma pgina diferente? Ou, talvez, que os usurios do Netscape Navigator visualizem uma pgina e os usurios do Microsoft Internet Explorer (IE) visualizem uma pgina diferente?
4 5
Especique uma verso do Netscape Navigator. Nos menus pop-up adjacentes, escolha as opes que indicam as aes a serem tomadas se a verso do navegador corresponder ou for mais avanada do que a verso do Netscape Navigator especicada e como proceder no caso contrrio. As opes so Ir para a URL, Ir para a URL Alt. e Continuar nesta pgina. Especique uma verso do Microsoft Internet Explorer.
482
Captulo 18
Nos menus pop-up adjacentes, escolha as opes que indicam as aes a serem tomadas se a verso do navegador corresponder ou for mais avanada do que a verso do Internet Explorer especicada e como proceder no caso contrrio. As opes so Ir para a URL, Ir para a URL Alt. e Continuar nesta pgina. No menu pop-up Outros navegadores, escolha uma opo, para especicar as aes a serem tomadas se o navegador no for o Netscape Navigator ou o Microsoft Internet Explorer. Por exemplo: possvel que o visitante esteja utilizando um navegador com base em texto, como o Lynx. Continuar nesta pgina a melhor opo para os navegadores diferentes do Navigator e IE porque a maioria no oferece suporte ao JavaScript e, se no puderem ler este comportamento, eles permanecero na pgina de qualquer maneira.
Digite os caminhos e nomes de arquivos da URL e da URL alternativa nos campos de texto situados na parte inferior da caixa de dilogo. Se digitar uma URL remota, digite tambm o prexo http://, alm do endereo www. Clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de. Lembre-se de que o objetivo deste comportamento o de vericar as diversas verses de navegadores, portanto recomendvel escolher um evento que funcione tanto na verso 3.0 quanto nas posteriores dos navegadores.
10 11
Verificar o plug-in Utilize a ao Vericar o plug-in, para enviar os visitantes a outras pginas, dependendo da ocorrncia de um determinado plug-in instalado. Por exemplo: possvel optar por enviar os usurios para uma pgina se eles possurem o Shockwave, ou para outra pgina, se no contarem com ele.
Nota: No possvel detectar determinados plug-ins no Microsoft Internet Explorer (IE) utilizando o JavaScript. Contudo, a seleo de Flash ou Director adicionar o cdigo VBScript apropriado pgina, a fim de detectar os plug-ins no IE do Windows. A deteco de plug-ins no possvel no IE que estiver sendo executado no Macintosh. Para poder utilizar a ao Verificar o plug-in:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Vericar o plug-in, no menu pop-up Aes.
483
No menu pop-up Plug-in, escolha um plug-in, ou clique na tecla Enter e digite o nome exato do plug-in no campo adjacente. Utilize o nome exato do plug-in, conforme o especicado em negrito na pgina Sobre os plug-ins, no Netscape Navigator. No Windows, escolha Ajuda do Navigator > comando Sobre os plug-ins; no Macintosh, escolha Sobre os plugins, no menu Apple.
No campo Se for localizado, ir para a URL, especique uma URL para os visitantes que contam com o plug-in. Se especicar uma URL remota, digite tambm o prexo http:// no endereo. Para garantir que os visitantes com o plug-in permanecero na mesma pgina, deixe este campo em branco.
No campo Caso contrrio, ir para a URL, especique uma URL alternativa para os visitantes que no contam com o plug-in. Para garantir que os visitantes sem o plug-in permanecero na mesma pgina, deixe este campo em branco.
A deteco de plug-ins no possvel no Internet Explorer que estiver sendo executado no Macintosh, e a maioria dos plug-ins no pode ser detectada no Internet Explorer que estiver sendo executado no Windows. Como padro, quando a deteco for impossvel, o visitante ser enviado para a URL listada no campo Caso contrrio. Para, em vez disso, enviar o visitante para a primeira URL (Se for localizado), selecione a opo Ir sempre para a primeira URL se a deteco no for possvel. Quando esta opo estiver selecionada, ela implicar em aceitar que o visitante dispe do plug-in, exceto se o navegador indicar explicitamente que o plug-in no est presente. Em geral, se o contedo do plug-in for parte integral da pgina, selecione a opo Ir sempre para a primeira URL se a deteco no for possvel; os visitantes que no dispuserem do plug-in recebero uma noticao do navegador para que efetuem o download do plug-in. Se o contedo do plug-in no for uma parte essencial da pgina, no selecione essa opo. Esta opo se aplica apenas ao Internet Explorer; o Netscape Navigator sempre capaz de detectar os plug-ins.
7 8
Clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.
484
Captulo 18
Controlar o Shockwave ou Flash Utilize a ao Controlar o Shockwave ou Flash para executar, parar, rebobinar ou ir para um quadro de um lme Shockwave ou Flash.
Para poder utilizar a ao Controlar o Shockwave ou Flash:
Escolha Inserir > Mdia > Shockwave, ou Inserir > Mdia > Flash, para inserir um lme Shockwave ou Flash, respectivamente. Escolha Janela > Propriedades, e digite o nome de um lme, no campo de texto no alto mais esquerda (ao lado do cone de Shockwave ou Flash). necessrio dar um nome ao lme, para poder control-lo com a ao Controlar o Shockwave ou Flash. Selecione os itens a serem utilizados no controle do lme Shockwave ou Flash. Por exemplo: se houver uma imagem de um boto Executar a ser utilizada na reproduo do lme, selecione-a. Abra o painel Comportamentos (Janela > Comportamentos). Clique no boto com o sinal de adio (+) e escolha Controlar o Shockwave ou Flash, no menu pop-up Aes. Aparecer uma caixa de dilogo com os parmetros. No menu pop-up Filme, escolha um lme. O Dreamweaver automaticamente listar os nomes de todos os lmes Shockwave e Flash do documento. Mais especicamente, o Dreamweaver apresentar uma lista com os lmes cujos nomes de arquivos terminem com .dcr, .dir, .swf ou .spl e que estiverem em tags object ou embed.
4 5
Escolha uma das aes para executar, parar, rebobinar ou ir para um quadro do lme. A opo Executar executa o lme a partir do quadro no qual ocorre a ao. Clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no submenu Mostrar os eventos de, no menu pop-up Eventos.
8 9
485
Arrastar a camada A ao Arrastar a camada permite ao visitante arrastar uma camada. Utilize esta ao para criar quebra-cabeas, controles deslizantes e outros elementos mveis de interface. possvel especicar, entre outros aspectos, em qual direo o visitante poder arrastar a camada (horizontal, verticalmente ou em qualquer uma das direes), um destino at o qual a camada dever ser arrastada, se a camada se encaixar no destino, se esta estiver distante um certo nmero de pixels, e o que dever ser feito quando a camada alcanar o destino. Como a ao Arrastar a camada deve ser chamada antes que a camada possa ser arrastada pelo visitante, certique-se de que o evento que disparar a ao ocorrer antes que o visitante tente arrastar a camada. melhor anexar a ao Arrastar a camada ao objeto body (com o evento onLoad), embora ela tambm possa ser anexada a um link que preencha toda a camada (ao redor de uma imagem, por exemplo) e que utilize o evento onMouseOver.
Para poder utilizar a ao Arrastar a camada:
Escolha Inserir > Camada, ou clique no boto Camada, no painel Objetos, e desenhe uma camada na visualizao do projeto da janela do documento. Selecione o tag body, clicando em <body>, no seletor de tags, situado na parte inferior da janela do documento. Abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Arrastar a camada, no menu pop-up Aes. Se a opo Arrastar a camada no estiver disponvel, provvel que j haja uma camada selecionada. Como as camadas no aceitam eventos em ambos os navegadores da verso 4.0, selecione um outro objeto como o tag body ou um link (um tag) ou, no menu pop-up Mostrar os eventos de, altere o navegador de destino para IE 4.0.
3 4
5 6
No menu pop-up Camada, selecione a camada que deseja tornar arrastvel. No menu pop-up Movimento, escolha Restrito ou No restrito. O movimento no restrito adequado aos quebra-cabeas e outros jogos que envolvem o arraste e soltura de elementos. No caso dos controles deslizantes e cenrios mveis, como gavetas de arquivos, cortinas e mini-persianas, opte pelo movimento restrito.
486
Captulo 18
Digite os valores do movimento restrito (expressos em pixels) nos campos Acima, Abaixo, esquerda e direita. Os valores se relacionam posio inicial da camada. Para restringir o movimento a uma regio retangular, digite valores positivos nos quatro campos. Para permitir apenas o movimento vertical, digite valores positivos em Acima e Abaixo, e zero em esquerda e direita. Para permitir apenas o movimento horizontal, digite valores positivos em esquerda e direita, e zero em Acima e Abaixo.
Digite os valores do destino de soltura (em pixels) nos campos esquerda e Acima. O destino de soltura o ponto at o qual voc deseja que o visitante arraste a camada. A camada ter alcanado o destino de soltura quando as suas coordenadas esquerda e do alto coincidirem com os valores digitados nos campos esquerda e Acima. Os valores se relacionam ao canto superior esquerdo da janela do navegador. Clique em Obter a posio atual, para preencher automaticamente os campos com a posio da camada.
Digite um valor (em pixels) no campo Encaixar, se distante, a m de determinar a distncia mnima do destino de soltura da qual o visitante dever se aproximar para a camada se encaixar no destino. Quanto maior o valor, mais fcil ser para o visitante detectar o destino de soltura.
10
No caso de quebra-cabeas simples e manipulaes de cenrios, no h necessidade de ultrapassar este ponto. Para denir a ala de arraste da camada, controlar o movimento da camada enquanto estiver sendo arrastada e disparar uma ao quando a camada for solta, clique na guia Avanado. Para especicar se o visitante dever clicar em uma determinada rea da camada para que esta seja arrastada, escolha rea dentro da camada, no menu pop-up Ala de arraste; em seguida, digite as coordenadas da esquerda e do alto, assim como a largura e altura da ala de arraste. Esta opo til quando a imagem dentro da camada possuir um elemento que sugere o arraste, como uma barra de ttulo ou ala de desenho, por exemplo. No selecione esta opo se preferir permitir ao visitante clicar em qualquer ponto da camada para poder arrast-la.
11
487
12
Escolha qualquer opo Enquanto arrasta que desejar utilizar: para a frente da ordem de empilhamento enquanto for arrastada. Se selecionar esta opo, utilize o menu pop-up para optar por deixar a camada na frente ou restaur-la sua posio original na ordem de empilhamento.
Selecione Trazer a camada para frente, se preferir que a camada seja transferida
Digite um cdigo JavaScript ou um nome de funo (evaluateLayerPos(), por exemplo) no segundo campo Chamar o JavaScript, a m de executar o cdigo ou funo quando a camada for solta. Selecione Apenas se estiver encaixada, nos casos em que o JavaScript for executado apenas se a camada tiver alcanado o destino de soltura. Clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de. Lembre-se de que as camadas no contam com o suporte dos navegadores da verso 3.0.
14 15
Nota: No possvel anexar a ao Arrastar a camada a um objeto associado aos eventos onMouseDown ou onClick.
Como reunir informaes sobre a camada arrastvel Quando voc anexar a ao Arrastar a camada a um objeto, o Dreamweaver inserir a funo MM_dragLayer() na seo head do documento. Alm de registrar a camada como arrastvel, esta funo denir trs propriedades de cada camada arrastvel MM_LEFTRIGHT, MM_UPDOWN e MM_SNAPPED que voc poder utilizar nas suas prprias funes JavaScript, a m de determinar as posies relativas horizontal e vertical da camada e se a camada atingiu o destino de soltura.
Nota: As informaes fornecidas aqui se destinam ao uso apenas de programadores de JavaScript que j contem com experincia.
488
Captulo 18
Por exemplo: a funo a seguir exibe o valor da propriedade MM_UPDOWN (a posio vertical da camada) em um campo de formulrio denominado curPosField. Por serem dinmicos, os campos de formulrio so teis para exibir informaes atualizadas continuamente, ou seja, possvel alterar o seu contedo depois que a pgina tiver sido carregada, tanto no Netscape Navigator quanto no Microsoft Internet Explorer.
funo getPos(layername){ var layerRef = MM_findObj(layername); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; }
Em vez de exibir o valor de MM_UPDOWN ou MM_LEFTRIGHT em um campo de formulrio, grave uma funo que exiba uma mensagem no campo de formulrio, dependendo de quo prximo o valor estiver da zona de soltura, ou chame outra funo que mostre ou oculte uma camada, dependendo do valor. Os limites de sua imaginao e a sua habilidade de lidar com os recursos JavaScript ditaro como voc reagir aos valores de MM_UPDOWN ou MM_LEFTRIGHT. especialmente til ler a propriedade MM_SNAPPED quando houver vrias camadas na mesma pgina. Todas estas camadas devero alcanar os seus destinos para que o visitante possa avanar at a prxima pgina ou tarefa. Por exemplo: grave uma funo que conte quantas camadas possuem um valor de MM_SNAPPED correspondente a true e chame-a sempre que uma camada for solta. Quando a contagem de camadas encaixadas atingir o nmero desejado, envie o visitante para a prxima pgina ou exiba uma mensagem parabenizando-o. Se voc tiver utilizado o evento onMouseOver para anexar a ao Arrastar a camada a links localizados em diversas camadas, ser necessrio efetuar uma pequena alterao funo MM_dragLayer(), para evitar que a propriedade MM_SNAPPED de uma camada encaixada seja redenida como false se o ponteiro do mouse for passado sobre a prpria. Isto poder ocorrer quando tiver utilizado Arrastar a camada para criar um quebra-cabea, j que provvel que o visitante passe o ponteiro do mouse sobre as peas j encaixadas enquanto posiciona outras. A funo MM_dragLayer() no capaz de evitar este comportamento porque algumas vezes ele prefervel (por exemplo: se desejar denir diversos destinos de soltura para uma nica camada).
Para evitar o novo registro de camadas j encaixadas:
Faa uma cpia de segurana do documento antes de alterar o cdigo. possvel faz-lo na janela do site do Dreamweaver, no Windows Explorer (no Windows) ou no Localizador (no Macintosh).) Escolha Editar > Localizar. No menu pop-up Localizar, escolha Origem de HTML. Digite (!curDrag) no campo de texto adjacente.
2 3 4
489
Clique em Localizar o prximo. Se o Dreamweaver indagar se voc deseja continuar a procurar desde o incio do documento, clique em Sim. O Dreamweaver se deparar com a seguinte instruo:
if (!curDrag) return false;
Feche a caixa de dilogo Localizar e modique a instruo na visualizao de cdigo da janela do documento ou no inspetor de cdigo, para que corresponda a:
if (!curDrag || curDrag.MM_SNAPPED != null) return false;
Os dois pipes (||) signicam "ou", enquanto que curDrag uma varivel que representa a camada que est sendo registrada como arrastvel. O signicado aproximado da instruo Se curDrag no for um objeto ou se j tiver um valor MM_SNAPPED, no ser necessrio executar o restante da funo. Ir para a URL A ao Ir para a URL abre uma nova pgina na janela ou na moldura especicada. Esta ao particularmente til para alterar o contedo de duas ou mais molduras com um clique. Ela tambm pode ser chamada em uma linha de tempo, para que salte at uma nova pgina depois de um determinado intervalo de tempo.
Para poder utilizar a ao Ir para a URL:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Ir para a URL, no menu pop-up Aes. Na lista de seleo Abrir em, escolha um destino para a URL. A lista Abrir em automaticamente listar os nomes de todas as molduras no conjunto de molduras, assim como na janela principal. Se no houver molduras, a janela principal ser a nica opo.
Nota: Esta ao poder provocar resultados inesperados se houver qualquer moldura com os nomes top, blank, self ou parent. Algumas vezes, os navegadores confundem estes nomes com os dos destinos reservados.
Clique em Procurar, para selecionar um documento a ser aberto, ou digite o caminho e nome do documento no campo URL. Repita as etapas 3 e 4, para abrir outros documentos em outras molduras. Clique em OK. Verique se o evento padro corresponde ao desejado.
5 6 7
490
Captulo 18
Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu pop-up Mostrar os eventos de. Menu de salto Quando for criado um menu de salto utilizando Inserir > Objetos de formulrio > Menu de salto, o Dreamweaver criar um objeto de menu e lhe anexar o comportamento Menu de salto (ou Ir do menu de salto). Em geral, no necessrio anexar manualmente a ao Menu de salto a um objeto. Para obter mais informaes sobre os menus de salto e a sua criao, consulte Como inserir um menu de salto na pgina 402. possvel editar um menu de salto j existente de duas maneiras distintas:
1 2 3 4
Crie um objeto de menu de salto, se j no houver algum no documento. Selecione o objeto de menu de salto e abra o painel Comportamentos. Na coluna Aes, clique duas vezes em Menu de salto. Faa as alteraes desejadas na caixa de dilogo Menu de salto e, em seguida, clique em OK.
Ao Ir do menu de salto A ao Ir do menu de salto est intimamente associada ao Menu de salto; Ir do menu de salto permite associar um boto Ir a um menu de salto. Para poder utilizar esta ao, necessria a existncia de um menu de salto no documento. A ao de clicar no boto Ir abrir o link que estiver selecionado no menu de salto. Normalmente, os menus de salto no exigem a ocorrncia de um boto Ir; em geral, a escolha de um item em um menu de salto acarreta a carga de uma URL, sem qualquer interveno por parte do usurio. Porm, se o visitante escolher o mesmo item que j estiver escolhido no menu de salto, este no ocorrer. Em geral, isto no far diferena, porm, se o menu de salto aparecer em uma moldura e os itens deste menu se vincularem a pginas em outras molduras, o boto Ir poder ser til, permitindo aos visitantes escolher novamente um item que j tenha sido selecionado no menu de salto.
491
Selecione um objeto a ser utilizado como boto Ir (geralmente uma imagem de boto) e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Ir do menu de salto, no menu pop-up Aes. No menu pop-up Escolher o menu de salto, selecione um menu a ser ativado pelo boto Ir. Clique em OK.
Abrir a janela do navegador Utilize a ao Abrir a janela do navegador, para abrir uma URL em uma nova janela. possvel especicar as propriedades da nova janela, inclusive o seu tamanho, nome e atributos (se ela ser redimensionvel, possuir uma barra de menus e assim por diante). Por exemplo: possvel utilizar este comportamento para abrir uma imagem maior em outra janela quando o visitante clicar em uma imagem em miniatura; com este comportamento, possvel adequar o tamanho da nova janela ao da imagem. Se voc no especicar qualquer atributo da janela, ela ser aberta no tamanho e com os atributos da janela que a tiver iniciado. A especicao de qualquer atributo da janela automaticamente desativar todos os outros atributos que no estiverem explicitamente ativos. Por exemplo: se voc no denir qualquer atributo para a janela, ela poder ser aberta com 640 por 480 pixels e possuir uma barra de navegao, barra de ferramentas de localizao, barra de status e barra de menus. Se voc denir a largura explicitamente como sendo 640 e a altura como sendo 480 pixels e no denir outros atributos, a janela ser aberta com 640 por 480 pixels e no possuir barras de navegao, de ferramentas de localizao, de status ou de menus, qualquer ala de redimensionamento ou barras de rolagem.
Para poder utilizar a ao Abrir a janela do navegador:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Abrir a janela do navegador, no menu pop-up Aes. Clique em Procurar, para selecionar um arquivo ou digite a URL a ser exibida.
492
Captulo 18
a linha de botes do navegador que inclui Voltar, Avanar, Pgina inicial e Atualizar.
Barra de ferramentas de navegao Barra de ferramentas de localizao
a rea da janela do navegador (no Windows), ou da rea de trabalho (no Macintosh), onde aparecem os menus Arquivo, Editar, Exibir, Ir e Ajuda. Dena explicitamente esta opo, se desejar que os visitantes possam navegar a partir da nova janela. Se voc no denir esta opo, o usurio poder apenas fechar ou minimizar a janela (no Windows), ou fechar a janela ou sair do aplicativo (no Macintosh) a partir da nova janela.
Barra de menus
especica que as barras de rolagem aparecero se o contedo ultrapassar a rea visvel. Se voc no denir esta opo explicitamente, as barras de rolagem no aparecero. Se a opo Alas de redimensionamento tambm estiver desativada, o visitante no poder exibir o contedo que ultrapassar o tamanho original da janela (apesar de poder rolar a janela ao arrastar a margem da mesma).
Barras de rolagem, se necessrias
especica que o usurio poder redimensionar a janela, arrastando o canto inferior direito da mesma ou clicando no boto de maximizao (no Windows), ou na caixa de dimensionamento (no Macintosh), situada no canto superior direito. Se esta opo no estiver denida explicitamente, os controles de redimensionamento no estaro disponveis e o canto inferior direito da janela no poder ser arrastado.
Alas de redimensionamento
o nome da nova janela. D um nome nova janela, se desejar atribuir links a ela ou control-la com o JavaScript. Este nome no pode conter espaos ou caracteres especiais.
Nome da janela
5 6
Clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.
493
Executar o som Utilize a ao Executar o som, para executar um som. Por exemplo: possvel executar um efeito sonoro sempre que o ponteiro do mouse for passado sobre um link ou executar um clipe de msica quando a pgina for carregada.
Nota: possvel que os navegadores exijam algum tipo de suporte adicional de udio (como um plug-in de udio) para que possam executar sons. Por conseguinte, diferentes navegadores dotados de diferentes plug-ins muitas vezes executam os sons de maneiras diferentes. difcil prever com exatido como sero executados os sons que voc programou aos visitantes do seu site. Para poder utilizar a ao Executar o som:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Executar o som, no menu pop-up Aes. Clique em Procurar, para selecionar um arquivo de som, ou digite o caminho e nome do arquivo no campo Executar o som. Clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.
4 5
Mensagem pop-up A ao Mensagem pop-up exibe um alerta em JavaScript com a mensagem por voc especicada. Como os alertas em JavaScript possuem apenas um boto (OK), utilize esta ao para fornecer informaes ao usurio, em vez de apresentar-lhe uma opo. possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade, varivel global ou outra expresso no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o por uma barra invertida (\{).
Exemplo
494
Captulo 18
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Mensagem pop-up, no menu pop-up Aes. Digite a mensagem no campo Mensagem. Clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.
3 4 5
Pr-carregar as imagens A ao Pr-carregar as imagens carrega no cache do navegador as imagens que no aparecem na pgina imediatamente (como aquelas que sero permutadas com as linhas de tempo, comportamentos ou JavaScript, por exemplo). Este processo evita os atrasos causados pelo download quando as imagens tiverem que ser exibidas.
Nota: Quando a opo Pr-carregar as imagens, na caixa de dilogo Permutar a imagem, for selecionada, a ao Permutar a imagem pr-carregar automaticamente todas as imagens de realce, dispensando a necessidade de adicionar manualmente a opo Prcarregar as imagens quando estiver utilizando Permutar a imagem. Para poder utilizar a ao Pr-carregar as imagens:
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Pr-carregar as imagens, no menu pop-up Aes. Clique em Procurar, para selecionar o arquivo de imagem a ser pr-carregado, ou digite o caminho e nome do arquivo de imagem no campo Arquivo de origem da imagem. Clique no boto com o sinal de adio (+), situado no alto da caixa de dilogo, para adicionar a imagem lista Pr-carregar as imagens.
Nota: Se voc no clicar no boto com o sinal de adio antes de digitar a prxima imagem, a imagem escolhida na lista ser substituda pela prxima imagem escolhida.
495
Para remover uma imagem da lista Pr-carregar as imagens, selecione a imagem na lista e clique no boto com o sinal de subtrao (). Clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.
7 8
Definir a imagem da barra de navegao Utilize a ao Denir a imagem da barra de navegao para transformar uma imagem em uma imagem de barra de navegao ou para alterar a exibio e aes relacionadas s imagens de uma barra de navegao. Para obter mais informaes, consulte Como inserir uma barra de navegao na pgina 405. Utilize a guia Bsico da caixa de dilogo Denir a imagem da barra de navegao, para criar ou atualizar uma imagem ou conjunto de imagens da barra de navegao, para alterar a URL exibida quando um boto da barra de navegao for clicado e para selecionar uma janela diferente na qual deseja exibir a URL. Utilize a guia Avanado da caixa de dilogo Denir a imagem da barra de navegao, para alterar o estado de outras imagens em um documento com base no estado do boto. Como padro, a ao de clicar em um elemento da barra de navegao automaticamente retornar todos os outros elementos desta barra ao seu estado Ativo; utilize a guia Avanado se desejar denir um outro estado para uma imagem quando este for Inativo ou Sobreposto.
Para editar uma ao Definir a imagem da barra de navegao:
Selecione a imagem da barra de navegao a ser editada e abra o painel Comportamentos. Na coluna Aes do painel Comportamentos, clique duas vezes na ao Denir a imagem da barra de navegao associada ao evento que estiver alterando. Na guia Bsico da caixa de dilogo Denir a imagem da barra de navegao, selecione as opes de edio de imagens.
Selecione a imagem da barra de navegao a ser editada e abra o painel Comportamentos. Na coluna Aes do painel Comportamentos, clique duas vezes na ao Denir a imagem da barra de navegao associada ao evento que estiver alterando. Clique na guia Avanado da caixa de dilogo Denir a imagem da barra de navegao.
496
Captulo 18
No menu pop-up Quando o elemento estiver sendo exibido, escolha um estado para a imagem. Para obter informaes sobre os estados das imagens, consulte Como criar as barras de navegao na pgina 404. depois que um usurio tiver clicado na imagem selecionada.
Escolha Imagem inativa, se desejar alterar a exibio de uma outra imagem Escolha Imagem sobreposta ou Imagem sobreposta enquanto inativa, se desejar
alterar a exibio de uma outra imagem quando o ponteiro estiver sobre a imagem selecionada.
5
Na lista Denir tambm a imagem, selecione uma outra imagem a ser denida na pgina. Clique em Procurar, para selecionar o arquivo de imagem a ser exibido, ou digite o caminho e nome do arquivo de imagem no campo Para o arquivo de imagem. Se tiver selecionado Imagem sobreposta ou Imagem sobreposta enquanto inativa na etapa 4, ainda h uma opo adicional. Clique em Procurar, no campo de texto Se inativa, o arquivo de imagem, para selecionar o arquivo de imagem, ou digite o caminho e nome do arquivo de imagem a ser exibido.
Definir o texto da moldura A ao Denir o texto da moldura permite denir dinamicamente o texto de uma moldura, substituindo o contedo e a formatao da moldura pelo contedo especicado. O contedo pode incluir qualquer HTML vlido. Utilize esta ao para exibir informaes dinamicamente. Embora ao Denir o texto da moldura substitua a formatao de uma moldura, possvel selecionar a opo Preservar a cor de fundo, para preservar os atributos das cores do fundo da pgina e do texto. possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade, varivel global ou outra expresso no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o por uma barra invertida (\{).
Exemplo
Escolha Modicar > Conjunto de molduras > Dividir a moldura para a esquerda, para a direita, para cima ou para baixo. Para obter mais informaes, consulte Como criar molduras na pgina 219.
497
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e, no menu pop-up Aes, escolha Denir o texto > Denir o texto da moldura. Na caixa de dilogo Denir o texto da moldura, escolha a moldura de destino no menu pop-up Moldura. Clique no boto Obter o HTML atual, para copiar o contedo da seo body da moldura de destino. Digite uma mensagem no campo Novo HTML e, em seguida, clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se no forem exibidos os eventos desejados, altere o navegador de destino, no menu pop-up Mostrar os eventos de.
5 6
Definir o texto da camada A ao Denir o texto da camada substitui o contedo e a formatao de uma camada j existente em uma pgina pelo contedo especicado. O contedo pode incluir qualquer cdigo-fonte HTML vlido. A ao Denir o texto da camada substitui o contedo e a formatao de uma camada, mas mantm os atributos da mesma, inclusive a cor. Formate o contedo, inclusive os tags HTML no campo Novo HTML, na caixa de dilogo Denir o texto da camada. possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade, varivel global ou outra expresso no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o por uma barra invertida (\{).
Exemplo
Escolha Inserir > Camada. Para obter mais informaes, consulte Como criar camadas na pgina na pgina 441.
498
Captulo 18
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Denir o texto > Denir o texto da camada, no menu pop-up Aes. Na caixa de dilogo Denir o texto da camada, utilize o menu pop-up Camada, para escolher a camada de destino. Digite uma mensagem no campo Novo HTML e, em seguida, clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se no forem exibidos os eventos desejados, altere o navegador de destino, no menu pop-up Mostrar os eventos de.
4 5
Definir a mensagem de status A ao Denir a mensagem de status mostra uma mensagem na barra de status, na parte inferior esquerda da janela do navegador. Por exemplo: possvel utilizar esta ao para descrever o destino de um link na barra de status, em vez de mostrar a URL a ele associada. Para examinar um exemplo de mensagem de status, passe o mouse sobre qualquer um dos botes de navegao na Ajuda do Dreamweaver. Observe, contudo, que os visitantes geralmente ignoram as mensagens na barra de status; se a mensagem for importante, pense na possibilidade de exibi-la como uma mensagem pop-up ou texto de uma camada. possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade, varivel global ou outra expresso no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o por uma barra invertida (\{).
Exemplo
1 2
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Denir o texto > Denir a mensagem de status, no menu pop-up Aes. Na a caixa de dilogo Denir a mensagem de status, digite a mensagem no campo Mensagem. A mensagem dever ser concisa. Se a mensagem no couber na barra de status, o navegador a truncar.
Clique em OK.
499
Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.
Definir o texto do campo de texto A ao Denir o texto do campo de texto substitui o contedo de um campo de texto de um formulrio pelo contedo especicado. possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade, varivel global ou outra expresso no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o por uma barra invertida (\{).
Exemplo
Escolha Inserir > Objetos de formulrio > Campo de texto. Se o Dreamweaver solicitar a adio de um tag de formulrio, clique em Sim. Para obter mais informaes, consulte Como criar formulrios na pgina 519.
No inspetor de propriedades, digite um nome para o campo de texto. Certique-se de que o nome seja exclusivo pgina (no utilize o mesmo nome para diversos elementos na mesma pgina, mesmo se estiverem em formulrios diferentes).
1 2
Selecione um campo de texto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Denir o texto > Denir o texto do campo de texto, no menu pop-up Aes. Na caixa de dilogo Denir o texto do campo de texto, escolha o campo de texto de destino no menu pop-up Campo de texto. Digite o texto no campo Novo texto e, em seguida, clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se no forem exibidos os eventos desejados, altere o navegador de destino, no menu pop-up Mostrar os eventos de.
4 5
500
Captulo 18
Mostrar/ocultar as camadas A ao Mostrar/ocultar as camadas mostra, oculta ou restaura a visibilidade padro de uma ou mais camadas. Esta ao til para mostrar informaes medida que o usurio interage com a pgina. Por exemplo: medida que o usurio passar o ponteiro do mouse sobre a imagem de uma planta, uma camada poder ser disparada, mostrando detalhes sobre a poca e regio de crescimento da planta, a quantidade de sol necessria, o tamanho que a planta pode atingir e assim por diante. A ao Mostrar/ocultar as camadas tambm til para criar uma camada de prcarga ou seja, uma camada grande que obscurece o contedo da pgina inicialmente, desaparecendo em seguida, quando todos os componentes da pgina tiverem sido carregados.
Para poder utilizar a ao Mostrar/ocultar as camadas:
Escolha Inserir > Camada, ou clique no boto Camada, situado no painel Objetos, e desenhe uma camada na janela do documento. Repita esta etapa para criar outras camadas. Clique na janela do documento para desmarcar a camada e, em seguida, abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Mostrar/ocultar as camadas, no menu pop-up Aes. Se a opo Mostrar/ocultar as camadas no estiver disponvel, provvel que j haja uma camada selecionada. Como as camadas no aceitam eventos em ambos os navegadores da verso 4.0, selecione um outro objeto como o tag body ou um link (um tag) ou, no menu pop-up Mostrar os eventos de, altere o navegador de destino para IE 4.0.
No menu pop-up Camadas com nome, selecione a camada cuja visibilidade deseja alterar. Clique em Mostrar, para mostrar a camada, Ocultar, para ocult-la, ou Padro, para restaurar a visibilidade padro da mesma. Repita as etapas 4 e 5 para todas as camadas cuja visibilidade ainda deseja alterar. possvel alterar a visibilidade de diversas camadas com um nico comportamento. Clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.
7 8
501
Quando forem exibidas em uma janela do Netscape Navigator, possvel que as camadas sejam reduzidas, para acomodar todo o contedo. A m de impedir que isso ocorra, adicione texto ou imagens s camadas ou dena valores de corte das mesmas.
Para criar uma camada de pr-carga:
Clique no boto Desenhar a camada, na categoria Comuns do painel Objetos, e desenhe uma camada grande na visualizao do projeto da janela do documento. Certique-se de que a camada cubra todo o contedo da pgina. No painel Camadas, arraste o nome da camada at o alto da lista de camadas, para especicar que esta camada dever aparecer na frente da ordem de empilhamento. Selecione a camada, se ainda no tiver sido selecionada, e d-lhe o nome loading, utilizando o campo mais esquerda do inspetor de propriedades de camadas. Mantendo a camada selecionada, dena, no inspetor de propriedades, a cor de fundo da camada como sendo a mesma cor que o fundo da pgina.
Clique dentro da camada (que dever estar obscurecendo o restante do contedo da pgina) e, se desejar, digite uma mensagem. Por exemplo: as mensagens Aguarde at que a pgina seja carregada ou Carregando... mantm o visitante informado sobre o que est ocorrendo, para que ele no pense que a pgina no possui um contedo.
502
Captulo 18
Clique no tag <body> no seletor de tags, situado no canto inferior esquerdo da janela do documento. No menu pop-up Aes do painel Comportamentos, escolha Mostrar/ocultar as camadas. Na lista Camadas com nome, selecione a camada denominada carregando Clique em Ocultar. Clique em OK. Certique-se de que o evento listado ao lado da ao Mostrar/ocultar as camadas, na lista de comportamentos seja onLoad. Se no for, selecione o evento e clique no tringulo para baixo, situado entre o evento e a ao. Na lista de eventos do menu pop-up, escolha onLoad.
8 9 10 11
Permutar a imagem A ao Permutar a imagem permuta uma imagem por outra, ao alterar o atributo src do tag img. Utilize esta ao para criar botes cambiveis e outros efeitos em imagens (inclusive a permuta simultnea de mais de uma imagem).
Nota: Como apenas o atributo src afetado por essa ao, a nova imagem a ser empregada dever ter as mesmas dimenses (altura e largura) que a original. Caso contrrio, a nova imagem aparecer compactada ou expandida, para se ajustar s dimenses da imagem original. Para poder utilizar a ao Permutar a imagem:
Escolha Inserir > Imagem, ou clique no boto Imagem, situado no painel Objetos, para inserir uma imagem. Nomeie a imagem no campo de texto mais esquerda, no inspetor de propriedades. A ao Permutar a imagem funcionar mesmo que voc no nomeie as imagens; esta ao nomeia automaticamente as imagens sem nome quando o comportamento for anexado a um objeto. Contudo, mais fcil distinguir as imagens na caixa de dilogo Permutar a imagem se todas tiverem sido nomeadas previamente.
3 4
Repita as etapas 1 e 2 para inserir outras imagens. Selecione um objeto (geralmente a imagem a ser permutada) e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Permutar a imagem, no menu pop-up Aes. Na lista Imagens, selecione a imagem cuja origem deseja alterar.
503
Clique em Procurar, para selecionar o arquivo da nova imagem, ou digite o caminho e nome do arquivo da nova imagem no campo Denir a origem como. Repita as etapas 6 e 7 para quaisquer outras imagens a serem alteradas. Utilize a mesma a ao de permuta de imagens simultaneamente em todas as imagens a serem modicadas; caso contrrio, a ao Restaurar a imagem permutada a ela correspondente no ir restaurar todas as imagens. Quando a pgina tiver sido carregada, selecione a opo Pr-carregar as imagens, para carregar as novas imagens no cache do navegador. Este procedimento evita os atrasos causados pelo download quando as imagens tiverem que ser exibidas.
10 11
Clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.
Restaurar a imagem permutada A ao Restaurar a imagem permutada restaura o ltimo conjunto de imagens permutadas aos seus arquivos de origem anteriores. Esta ao adicionada automaticamente, sempre que voc anexar a ao Permutar a imagem a um objeto; no ser necessrio selecion-la manualmente se tiver deixado selecionada a opo Restaurar durante a anexao de Permutar a imagem. Ir para o quadro da linha de tempo A ao Ir para o quadro da linha de tempo move o cabeote de execuo at o quadro especicado. possvel utilizar esta ao no canal Comportamento, no painel Linhas de tempo, para que certas partes da linha de tempo sejam repetidas o nmero de vezes especicado, para criar um link ou boto Rebobinar ou para permitir que o usurio salte at partes diversas da animao.
Para poder utilizar a ao Ir para o quadro da linha de tempo:
Escolha Janela > Linha de tempo, para abrir o painel Linhas de tempo e se certicar que o documento contm uma linha de tempo. Se no houver barras de animao roxas no painel Linhas de tempo, o documento no contm uma linha de tempo. Consulte Como criar uma animao de linha de tempo na pgina 461.
Selecione um objeto ao qual deseja anexar o comportamento. Para anexar o comportamento a um quadro da linha de tempo, clique no canal Comportamento no quadro desejado.
504
Captulo 18
3 4
Abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Linha de tempo > Ir para o quadro da linha de tempo, no menu pop-up Aes. Se esta ao estiver esmaecida, o documento no contm uma linha de tempo. Selecione uma linha de tempo, no menu pop-up Linha de tempo. Digite um nmero de quadro no campo Ir para o quadro. Se voc estiver adicionando esta ao no canal Comportamento de uma linha de tempo e desejar repetir um segmento desta, digite o nmero de repeties no campo Loop. Deixe este campo em branco se no estiver anexando Ir para o quadro da linha de tempo a um quadro.
5 6 7
8 9
Clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.
Executar a linha de tempo e Parar a linha de tempo Utilize as aes Executar a linha de tempo e Parar a linha de tempo, para permitir que o visitante inicie ou pare uma linha de tempo ao clicar em um link ou boto ou inicie ou pare uma linha de tempo automaticamente ao passar o cursor sobre um link, imagem ou outro objeto. A ao Executar a linha de tempo ser automaticamente anexada ao tag body com o evento onLoad quando for selecionada a opo Execuo automtica, no painel Linhas de tempo.
Para poder utilizar as aes Executar a linha de tempo e Parar a linha de tempo:
Escolha Janela > Linha de tempo, para abrir o painel Linhas de tempo e se certicar que o documento contm uma linha de tempo. Se no houver barras de animao roxas no painel Linhas de tempo, o documento no contm uma linha de tempo. Consulte Como criar uma animao de linha de tempo na pgina 461.
2 3
Selecione um objeto e abra o painel Comportamentos. Clique no boto com o sinal de adio (+) e escolha Executar a linha de tempo ou Parar a linha de tempo, no menu pop-up Aes. Selecione a linha de tempo a ser executada ou parada, ou opte por parar todas linhas de tempo, no menu pop-up. Clique em OK.
505
Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.
Validar o formulrio A ao Validar o formulrio verica o contedo de determinados campos de texto, a m de garantir que o usurio tenha digitado o tipo correto de dados. Anexe esta ao a certos campos de texto com o evento onBlur, a m de validar os campos medida que o usurio estiver preenchendo o formulrio, ou anexe-a ao formulrio com o evento onSubmit, a m de avaliar diversos campos de texto simultaneamente quando o usurio clicar no boto Enviar. A anexao desta ao a um formulrio evita que este seja enviado ao servidor se algum dos campos contiver dados incorretos.
Para poder utilizar a ao Validar o formulrio:
Escolha Inserir > Formulrio, ou clique no boto Formulrio, situado no painel Objetos, para inserir um formulrio. Escolha Inserir > Objetos de formulrio > Campo de texto, ou clique no boto Campo de texto, situado no painel Objetos, para inserir um campo de texto. Repita esta etapa para inserir outros campos de texto. Siga um dos procedimentos abaixo: o formulrio, selecione um campo de texto e escolha Janela > Comportamentos.
Para validar determinados campos medida que o usurio estiver preenchendo Para validar vrios campos quando o usurio enviar o formulrio, clique no tag
<form> no seletor de tags, situado no canto inferior esquerdo da janela do documento, e escolha Janela > Comportamentos. 4 5
No menu pop-up Aes, escolha Validar o formulrio. Siga um dos procedimentos abaixo: selecionado na janela do documento, na lista Campos com nome.
Se estiver validando determinados campos, selecione o mesmo campo que tiver Se estiver validando vrios campos, selecione um campo de texto na
lista Campos com nome.
6
506
Captulo 18
Escolha uma dentre as seguintes opes Aceitar: conter qualquer tipo especco de dados. Esta opo no ter signicado (ela equivale ausncia, no campo, da ao Validar o formulrio) se a opo Necessrio no estiver selecionada.
Se estiver validando vrios campos, repita as etapas 6 e 7 para quaisquer outros campos a serem validados. Clique em OK. Se estiver validando vrios campos quando o usurio enviar o formulrio, o evento onSubmit aparecer automaticamente no menu pop-up Eventos.
10
Se estiver validando um determinado campo, certique-se de que o evento padro seja onBlur ou onChange. Se no for, selecione onBlur ou onChange no menu pop-up. Ambos os eventos disparam a ao Validar o formulrio, assim que o usurio mover o cursor para fora do campo. A diferena entre estes eventos est na ocorrncia invarivel de onBlur, se o usurio tiver digitado no campo ou no, enquanto que onChange ocorrer apenas se o usurio tiver alterado o contedo do campo. O evento onBlur prefervel quando voc tiver especicado que o campo necessrio.
507
508
Captulo 18
19
CAPTULO 19
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
O depurador Javascript do Macromedia Dreamweaver permite revelar erros no cdigo JavaScript do cliente. possvel escrever o cdigo utilizando a visualizao de cdigo (ou o inspetor de cdigo) do Dreamweaver e, em seguida, executar o depurador, para vericar o cdigo quanto sintaxe e erros lgicos. Os erros de sintaxe provocam a exibio de uma mensagem de erro pelo navegador; os erros lgicos acarretam o funcionamento incorreto da pgina, porm no so relatados pelo navegador. O depurador funciona com o Microsoft Internet Explorer e com o Netscape Navigator na plataforma Windows, e com o Netscape Navigator na plataforma Macintosh. Para obter mais informaes sobre a criao de scripts, consulte Como inserir os scripts na pgina 365. Inicialmente, o depurador verica o cdigo quanto a erros de sintaxe e, em seguida, executado juntamente com o navegador, para auxili-lo na vericao dos erros lgicos. Se forem detectados erros lgicos, a janela do depurador JavaScript o auxiliar a isol-los no cdigo JavaScript, permitindo o exame de variveis e propriedades de documento enquanto o programa estiver sendo executado. possvel denir pontos de interrupo (semelhantes s instrues de alerta) no cdigo, a m de parar a execuo do programa e exibir os valores dos objetos e propriedades JavaScript em uma lista de variveis. Tambm possvel avanar at a instruo seguinte ou at uma chamada de funo, para examinar a mudana dos valores da varivel. O depurador JavaScript pode reduzir signicativamente o tempo envolvido na localizao e isolamento de erros no cdigo.
509
Escolha Arquivo > Depurar no navegador e, em seguida, selecione o navegador na lista. Como alternativa, clique no boto Visualizar/depurar no navegador, na barra de ferramentas (Exibir > Barra de ferramentas), e selecione a opo Depurar no Internet Explorer ou Depurar no Netscape Communicator.
Se o depurador localizar algum erro de sintaxe, ele parar e apresentar uma lista de erros na janela Erros de sintaxe JavaScript. Consulte Como localizar erros de sintaxe na pgina 511.
2
Se estiver utilizando o Netscape Navigator, clique em OK, na caixa de advertncia do depurador que aparecer e, em seguida, clique em Conceder, na caixa de dilogo Segurana Java.
Nota: Se voc j tiver aceitado um certificado de segurana da Macromedia, possvel que a caixa de dilogo Segurana Java no aparea.
Se estiver utilizando o Internet Explorer (apenas no Windows), clique em Sim, na caixa de dilogo Segurana Java e, em seguida, em OK, na caixa de advertncia do depurador que aparecer.
O depurador se conectar com o navegador, porm no efetuar uma conexo de rede ou com qualquer servidor da Internet. O navegador aparecer com a janela do depurador Javascript, que ser interrompida automaticamente na primeira linha de cdigo. A janela do depurador Javascript aparecer com a janela do navegador. O depurador parar automaticamente na primeira linha de cdigo.
Para executar o depurador:
Clique no boto Parar a depurao, na janela do depurador Javascript. O depurador ser fechado.
510
Captulo 19
Como localizar erros de sintaxe Se o depurador localizar algum erro de sintaxe, ele parar e apresentar uma lista de erros na janela Erros de sintaxe JavaScript.
Para visualizar a descrio do erro:
Selecione um erro na janela Erros de sintaxe JavaScript. Aparecer uma descrio do erro na rea Descrio detalhada.
Para ter acesso ao erro selecionado no cdigo, siga um dos procedimentos abaixo:
511
Depois que o depurador tiver parado em um ponto de interrupo, possvel analisar o cdigo (executar uma instruo por vez). Este procedimento permite vericar se o programa executado como deveria. O depurador pode analisar at mesmo cdigo vinculado. Por exemplo: se o cdigo contiver um link a um arquivo de origem, o depurador analisar este arquivo e o exibir na janela do depurador JavaScript. medida que avana na anlise do cdigo, voc poder acompanhar as modicaes nos valores das variveis no programa.
Definir/remover o ponto de interrupo Executar Parar a depurao Depurao parcial Depurao total Depurao circular Remover todos os pontos de interrupo
512
Captulo 19
Como definir os pontos de interrupo Um ponto de interrupo indica um ponto do cdigo no qual voc deseja interromper a execuo do programa. Na denio de um ponto de interrupo, ele ser marcado com um pequeno ponto vermelho na margem esquerda da janela do depurador Javascript. Quando a execuo do programa for parada no ponto de interrupo, aparecer uma pequena seta sobre o ponto e se tornar possvel examinar os objetos e propriedades existentes neste ponto. Isso permitir identicar rapidamente a origem do problema no cdigo JavaScript. Os pontos de interrupo podero ser denidos apenas no cdigo JavaScript (entre os tags script) ou em uma linha com um manipulador de evento. Se voc denir um ponto de interrupo em outro ponto, o Dreamweaver automaticamente o denir na prxima linha vlida de cdigo (ou colocar o ponto de insero nesta linha, se ela j contar com um ponto de interrupo denido). Se no houver linhas vlidas nas quais o ponto de interrupo possa ser denido, ser emitido um alerta sonoro.
Para definir um ponto de interrupo, siga um dos procedimentos abaixo:
513
514
Captulo 19
Como analisar o cdigo possvel analisar o cdigo e executar uma instruo por vez, para monitorar os seus efeitos sobre o programa. Por exemplo: possvel analisar uma condio if, para vericar se o programa ir parar na primeira linha da instruo condicional ou na linha executvel seguinte instruo if. Quando o depurador parar em uma instruo com uma chamada a uma funo, voc poder vericar a funo, para se certicar de que ela ser executada corretamente. Se a funo estiver correta, voc poder determinar a depurao circular da mesma pelo depurador, at o retorno da funo. O programa ir parar novamente na prxima instruo aps o local da chamada funo. Se voc tentar depurar uma instruo que contenha uma funo JavaScript no padronizada, o comportamento equivaler depurao parcial.
Clique no boto Depurao parcial, situado na parte superior da janela do depurador Javascript. Quando o programa parar em qualquer instruo (inclusive naquelas com uma chamada a uma funo), voc poder efetuar a depurao parcial da instruo, continuar e interromper o processo antes da instruo seguinte.
Para depurar uma funo totalmente:
Clique no boto Depurao total, situado na parte superior da janela do depurador Javascript.
Para depurar uma funo circularmente:
Clique no boto Depurao circular. Tambm possvel utilizar a opo Depurao circular quando o depurador estiver dentro de uma funo denida pelo usurio. A depurao circular acarreta a execuo das instrues restantes na denio da funo. O depurador ir parar na instruo seguinte.
515
Como examinar e editar os valores das variveis Para vericar os valores das variveis medida que examina o cdigo, utilize a lista de variveis do Dreamweaver, localizada no painel inferior da janela do depurador Javascript. Os nomes das variveis so digitados na coluna da esquerda; a coluna da direita apresenta uma lista dos valores atuais de cada varivel quando o programa parar a execuo em um ponto de interrupo ou aps a depurao total do cdigo.
Para adicionar uma varivel lista de variveis, siga um dos procedimentos abaixo:
Clique no boto com o sinal de adio (+), digite o nome da varivel que deseja
examinar e pressione a tecla Enter. medida que voc examinar o cdigo, os valores aparecero do lado de cada varivel. Se a varivel for um objeto com propriedades, ser possvel expandi-la (mostrar as suas propriedades e valores), clicando no boto com o sinal de adio (+) (no Windows), ou no boto com um tringulo (no Macintosh), ao seu lado na lista. A varivel expandida ser automaticamente reduzida cada vez que o cdigo for examinado.
516
Captulo 19
1 2
Selecione o item da lista de variveis. Clique no boto com o sinal de subtrao (-).
1 2 3
Selecione o item da lista de variveis. Clique no valor da lista de variveis. Edite o valor, digitando na caixa de texto que aparecer.
517
518
Captulo 19
20
CAPTULO 20
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Os formulrios permitem interagir com ou reunir informaes dos visitantes ao seu site. Por exemplo: possvel indagar o nome e endereo eletrnico de um usurio, pedir que o visitante participe de uma pesquisa, assine um livro de convidados ou fornea comentrios a respeito do seu site. Os formulrios se dividem em duas partes: O cdigo-fonte HTML que descreve o formulrio (por exemplo: os campos, identicadores e botes que o usurio ver na pgina) e um script ou aplicativo que processa as informaes enviadas (um script CGI, por exemplo). No possvel coletar os dados de um formulrio sem utilizar um script de processamento.
1. O visitante preenche o formulrio e o envia a um servidor da Web para processamento 2. O script de CGI processa o formulrio
CGI-bin
Utilize o Macromedia Dreamweaver para criar diversos objetos de formulrio, como campos de texto, de senha, botes de opo, caixas de seleo, menus popup e imagens clicveis (como um boto Enviar). Tambm possvel utilizar o comportamento Validar o formulrio do Dreamweaver para vericar as informaes fornecidas por um visitante; por exemplo: possvel vericar se um endereo do correio eletrnico contm um smbolo de arroba (@) ou se um campo essencial contm uma entrada.
519
520
Captulo 20
insere um boto de texto em um formulrio. Os botes realizam tarefas quando forem clicados, como o envio e redenio dos formulrios. possvel adicionar um nome ou identicador personalizado ao boto ou utilizar um dos identicadores predenidos: Enviar ou Redenir.
Inserir boto
insere uma caixa de seleo em um formulrio. As caixas de seleo permitem mltiplas respostas em um nico grupo de opes. O usurio poder selecionar quantas opes forem aplicveis.
Inserir caixa de seleo Inserir boto de opo insere um boto de opo em um formulrio. Os botes de opo representam opes exclusivas. A seleo de um dos botes do grupo cancela a seleo de todos os outros. Por exemplo: o usurio poder selecionar a opo Sim ou a opo No. Inserir lista/menus permite criar opes do usurio em uma lista. A opo Lista exibir os valores de opo em uma lista de rolagem e permitir aos usurios selecionar diversas opes na lista. A opo Menu exibir os valores de opo em uma lista suspensa e permitir aos usurios selecionar apenas uma nica opo. Inserir campo de arquivos
insere um campo de texto em branco e um boto Procurar em um documento. Os campos de arquivos permitem que o usurio procure os arquivos nos discos rgidos, efetuando o seu upload como dados do formulrio.
permite inserir uma imagem em um formulrio. Os campos de imagens podem ser utilizados em vez dos botes Enviar, para criar botes com aparncia grca.
Inserir campo de imagens
insere um campo oculto no documento, no qual possvel armazenar dados do usurio. Os campos ocultos permitem armazenar informaes que tiverem sido digitadas pelo usurio (como um nome, endereo de correio eletrnico ou preferncia de compra) e, em seguida, utiliz-las quando o usurio visitar o site na prxima vez.
Inserir campo oculto
insere uma lista de navegao ou menu pop-up. Os menus de salto permitem inserir um menu no qual cada opo se vincula a um documento ou arquivo. Consulte Como criar menus de salto na pgina 401.
Inserir menu de salto
521
tags form, que incluem a URL do script CGI que processar o formulrio e o
mtodo atravs do qual os dados sero enviados a um servidor
No documento, coloque o ponto de insero onde deseja que o formulrio aparea e, em seguida, siga um dos procedimentos abaixo: formulrio.
Na categoria Formulrios do painel Objetos, selecione o cone de Inserir Escolha Inserir > Formulrio.
Quando um formulrio for criado, aparecer um contorno pontilhado vermelho na janela do documento. Se este contorno no aparecer, verique se a opo Exibir > Auxlios visuais > Elementos invisveis est selecionada.
522
Captulo 20
No documento, clique no contorno correspondente ao formulrio, para selecion-lo, se j no estiver. No campo Nome do formulrio, no inspetor de propriedades, digite um nome exclusivo para identicar o formulrio. O ato de nomear um formulrio possibilita fazer referncias a ele ou control-lo com uma linguagem de criao de scripts, como JavaScript ou VBScript.
No campo Ao, especique o caminho at a URL onde reside o script ou aplicativo de processamento que processar as informaes do formulrio, seguindo um dos procedimentos abaixo:
Clique no cone de pasta e navegue at a pasta relevante. Digite o caminho completo at a pasta.
Se estiver especicando um caminho at um script CGI, o caminho at a URL ter uma aparncia semelhante a:
http://www.meu_site.com/cgi-bin/process.cgi 5
No menu pop-up Mtodo, escolha o mtodo atravs do qual sero processados os dados do formulrio.
Escolha POST, para enviar os valores do formulrio no corpo de uma mensagem. Escolha GET, para enviar as informaes ao servidor e anexar URL os valores
do formulrio que tiverem sido enviados.
Nota: No utilize o mtodo GET com formulrios extensos. As URLs se limitam a 8192 caracteres. Se a quantidade de dados enviados for grande demais, os dados se tornaro truncados, o que poder levar a resultados de processamento inesperados. Tambm no utilize o mtodo GET ao lidar com nmeros de cartes de crdito ou outras informaes confidenciais, pois este mtodo de transmisso de informaes no seguro.
523
so um tipo especial de campo de texto, no qual o texto digitado pelo usurio se torna oculto ou substitudo por asteriscos ou marcadores, que obscurecem o texto.
Nota: As senhas que forem enviadas a um servidor atravs deste mtodo no estaro criptografadas. Por conseguinte, a transferncia de dados no segura.
524
Captulo 20
Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo:
Escolha Inserir > Objeto de formulrio > Campo de texto. Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
de texto. Aparecer um campo de texto no documento.
2
No campo Campo de texto, no inspetor de propriedades, digite um nome exclusivo para o campo. Certique-se de que o nome seja exclusivo. No possvel duplicar o nome de um campo de texto em um formulrio. No deixe espaos em branco. Em vez disso, utilize um sinal de sublinhado para separar as palavras. Por exemplo: digite ltimo_nome, em vez de ltimo nome.
Aceite a denio padro, que estabelece a extenso do campo de texto em Digite um nmero, para especicar a extenso do campo de texto.
4
No campo N mx. de caract., siga um dos procedimentos abaixo: extenso que desejarem. Se a entrada do usurio exceder a largura (extenso) do caractere do campo de texto, o texto rolar.
Deixe o campo em branco, o que permitir aos usurios digitar o texto na Digite um nmero para denir o nmero mximo de caracteres que podero
ser digitados pelo usurio no campo. Por exemplo: recomendvel limitar um campo de idade a trs dgitos e um campo de senha a oito caracteres. Se o usurio ultrapassar o nmero mximo de caracteres, o formulrio produzir um alerta sonoro.
5
Em Tipo, selecione o tipo de campo de texto a ser criado, seguindo um dos procedimentos abaixo:
Selecione Linha simples, para criar um campo de texto de linha nica. Selecione Senha, para criar um campo de senha.
6
Se desejar denir o texto padro de um campo de texto, digite o texto no campo Valor inicial do inspetor de propriedades Este texto ser exibido no campo de texto quando o formulrio for carregado pela primeira vez no navegador do usurio.
525
Se desejar, digite um identicador ou texto descritivo ao lado do objeto. possvel aplicar formatao de texto aos identicadores dos objetos do formulrio. Para obter mais informaes, consulte Como denir e alterar as fontes e estilos na pgina 257.
Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo:
Escolha Inserir > Objeto de formulrio > Campo de texto. Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
de texto. Aparecer um campo de texto no documento.
2
No campo Campo de texto, no inspetor de propriedades, digite um nome para o objeto do campo de texto. Certique-se de que o nome seja exclusivo. No possvel duplicar o nome de um campo de texto em um formulrio. No deixe espaos em branco. Em vez disso, utilize um sinal de sublinhado para separar as palavras. Por exemplo: digite comentrios_do_usurio, em vez de comentrios do usurio.
3 4
Em Tipo, selecione Multi-linha. No campo Largura do caractere, siga um dos procedimentos abaixo: caracteres.
Aceite a denio padro, que estabelece a extenso da rea de texto em 20 Digite um nmero, para especicar a extenso da rea de texto.
5
Aceite a denio padro, que estabelece um campo de texto com duas linhas. Digite um nmero para especicar o nmero de linhas da rea de texto.
526
Captulo 20
No menu pop-up Quebra autom. de linha, selecione uma denio para estabelecer como a entrada do usurio ser exibida quando esta exceder a rea de texto. automaticamente linha seguinte. Quando a entrada do usurio exceder a margem direita da rea de texto, este ser quebrado para a esquerda. O usurio dever pressionar a tecla Return, para mover o ponto de insero para a linha seguinte na rea de texto.
Selecione a opo Fsica, para denir a quebra de linha na rea de texto assim
como nos dados, quando estes forem enviados para processamento.
7
Se desejar denir o texto padro de um campo de texto, digite o texto no campo Valor inicial do inspetor de propriedades. Este texto ser exibido no campo de texto quando o formulrio for carregado pela primeira vez no navegador do usurio.
Se desejar, digite um identicador ou texto descritivo ao lado do objeto. possvel aplicar formatao de texto aos identicadores dos objetos do formulrio. Para obter mais informaes, consulte Como denir e alterar as fontes e estilos na pgina 257.
Como permitir que os visitantes faam o upload de um arquivo para o seu servidor Em alguns casos, possvel que as informaes solicitadas aos visitantes do seu site sejam complicadas demais para responder em um campo de texto. Voc poder requerer que os visitantes enviem um arquivo inteiro para o servidor (um currculo com formatao sosticada, um arquivo de imagens grcas ou outro tipo de documento, por exemplo). possvel congurar um campo de arquivos de forma a cumprir esta tarefa. Um campo de arquivos se parece com outros campos de texto, exceto pela presena de um boto Procurar. O usurio poder digitar o caminho at o arquivo que est enviando ou utilizar o boto Procurar, para localizar e selecionar o documento em questo.
527
Para poder utilizar um campo de arquivos, o mtodo de formulrios dever estar denido como POST. Os visitantes enviaro um arquivo para o endereo congurado no campo Ao do formulrio.
Nota: Antes de utilizar o campo de arquivos, confirme com o administrador do servidor se o upload annimo de arquivos permitido. Se inserir um campo de arquivos com o Dreamweaver, voc dever inserir manualmente ENCTYPE="multipart/form-data" no tag form, para garantir que o arquivo estar adequadamente codificado. Para criar um campo de arquivos em um formulrio:
Clique no contorno do formulrio para selecion-lo e, em seguida, no inspetor de propriedades, dena o mtodo de formulrios como sendo POST. Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo:
Escolha Inserir > Objeto de formulrio > Campo de arquivos. Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
de arquivos. Aparecer um campo de arquivos no documento.
3
No campo Nome do campo de arquivos, no inspetor de propriedades, digite o nome do objeto campo de arquivos. No campo Larg. do caractere, digite o valor correspondente ao nmero mximo de caracteres a serem exibidos no campo. No campo N mx. de caracteres, digite o valor correspondente ao nmero mximo de caracteres que o campo comportar.
Como criar um campo oculto Os campos ocultos no se encontram visveis aos visitantes do seu site. Eles so elementos invisveis que so colocados nos documentos para coletar ou enviar informaes. As informaes contidas nos campos ocultos sero repassadas ao servidor quando o formulrio for enviado, utilizando o par nome/valor que tiver sido denido na congurao do campo oculto. Quando voc inserir um campo oculto, o Dreamweaver adicionar um marcador no documento. Se voc inserir um campo oculto e no vir um marcador, escolha Exibir > Auxlios visuais > Elementos invisveis, para revelar o marcador.
528
Captulo 20
Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo:
Escolha Inserir > Objeto de formulrio > Campo oculto. Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
oculto. Aparecer um marcador no documento.
2
No campo Campo oculto, no inspetor de propriedades, digite um nome exclusivo para o campo. No campo Valor, digite o valor que deseja atribuir ao campo.
529
Os botes de opo funcionam como um grupo e fornecem valores de seleo mutuamente exclusivos. possvel selecionar apenas uma opo em um grupo de botes de opo.
Como inserir uma caixa de seleo As caixas de seleo permitem ao usurio selecionar mais de uma opo em um grupo de opes. Cada objeto de formulrio caixa de seleo um elemento individual, devendo ter um nome exclusivo no campo Nome.
Para inserir uma caixa de seleo:
Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo:
Escolha Inserir > Objeto de formulrio > Caixa de seleo. Na categoria Formulrios do painel Objetos, clique no cone de Inserir caixa de
seleo.
2
No campo Nome da caixa de seleo, no inspetor de propriedades, digite um nome descritivo para a caixa de seleo.
Nota: Todas as caixas de seleo que forem adicionadas a um formulrio devem contar com um nome exclusivo.
530
Captulo 20
No campo Valor selecionado, digite o valor da caixa de seleo. Por exemplo: em uma pesquisa, possvel associar o valor 4 opinio "concordo plenamente", e o valor 1 opinio "discordo totalmente".
Na opo Estado inicial, clique em Selecionado, se desejar que uma opo aparea selecionada quando o formulrio for carregado pela primeira vez no navegador.
Como inserir um boto de opo Utilize os botes de opo quando o usurio tiver que selecionar apenas uma opo em um grupo de opes. Normalmente, os botes de opo so utilizados em grupos. Todos os botes de opo de um grupo devem ter o mesmo nome e conter diferentes valores de campo.
Para inserir botes de opo:
Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo:
Escolha Inserir > Objeto de formulrio > Boto de opo. Na categoria Formulrios do painel Objetos, clique no cone de Inserir boto
de opo.
2
No campo Nome do boto de opo, no inspetor de propriedades, digite um nome descritivo para o grupo de opes.
Nota: Se voc criar diversas interaes com botes de opo em um formulrio, certifique-se de que cada conjunto de botes de opo tenha um nome exclusivo.
No campo Valor selecionado, digite o valor que deseja enviar para o aplicativo do servidor ou script de processamento quando o usurio selecionar este boto de opo. Por exemplo: digite futebol, no campo Valor selecionado, para indicar que o usurio escolheu futebol. Na opo Estado inicial, clique em Selecionado, se desejar que uma opo aparea selecionada quando o formulrio for carregado pela primeira vez no navegador.
Sugesto: Para adicionar outros botes de opo ao grupo, selecione o boto de opo original e, em seguida, enquanto mantm a tecla Control pressionada (no Windows), ou a tecla Option pressionada (no Macintosh), arraste-o e altere o campo Valor selecionado de cada novo boto.
531
Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo: menu.
Na categoria Formulrios do painel Objetos, clique no cone de Inserir lista/ Escolha Inserir > Objeto de formulrio > Lista/menu e selecione o elemento
resultante, se necessrio.
2
No campo Lista/menu, no inspetor de propriedades, digite um nome exclusivo para a lista. Em Tipo, selecione a opo Lista.
532
Captulo 20
No campo Altura, digite um nmero para especicar o nmero de linhas a serem exibidas pela lista. A altura padro da linha est denida como 4. As barras de rolagem aparecero quando o nmero especicado for menor do que o nmero de opes contidas na lista.
Se desejar permitir ao usurio selecionar mais de uma opo na lista, selecione Permitir mltiplas (ao lado da opo Selees). Clique em Valores da lista, para adicionar as opes. Aparecer a caixa de dilogo Valores da lista. Com o ponto de insero no campo Identicador do item, digite o texto que deseja incluir na lista. No campo Valor, digite o texto ou dados que deseja enviar ao servidor quando o usurio selecionar este item. Para adicionar um outro item lista de opes, clique no boto com o sinal de adio (+) e, em seguida, repita as etapas 7 e 8. Quando terminar de adicionar os itens lista, clique em OK, para fechar a caixa de dilogo Valores da lista. O inspetor de propriedades aparecer. As opes estaro visveis no campo Selecionados inicialmente.
10
11
Selecione um dos itens da lista, para que ele seja selecionado quando a lista aparecer pela primeira vez.
Como criar um menu pop-up Os menus pop-up permitem congurar diversas opes em um espao limitado. Quando o formulrio for carregado em um navegador, apenas uma opo estar visvel.
O usurio poder clicar na seta abaixo, para exibir todas as opes em um menu.
533
Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo: menu.
Na categoria Formulrios do painel Objetos, clique no cone de Inserir lista/ Escolha Inserir > Objeto de formulrio > Lista/menu.
2
No campo Lista/menu, no inspetor de propriedades, digite um nome exclusivo para o menu. Em Tipo, selecione a opo Menu. Clique em Valores da lista, para adicionar as opes. Aparecer a caixa de dilogo Valores da lista. Com o ponto de insero no campo Identicador do item, digite o texto que deseja incluir na lista. No campo Valor, digite o texto ou dados que deseja enviar ao servidor quando o usurio selecionar este item. Para adicionar um outro item lista de opes, clique no boto com o sinal de adio (+) e, em seguida, repita as etapas 6 e 7. Quando terminar de adicionar os itens lista, clique em OK, para fechar a caixa de dilogo Valores da lista. O inspetor de propriedades aparecer. As opes estaro visveis no campo Selecionados inicialmente.
3 4
534
Captulo 20
Como criar botes de texto de formulrio Os botes de texto de formulrio so botes padro no estilo dos navegadores, que contm o texto que voc desejar exibir, como Enviar, Redenir, ou Calcular o pedido, por exemplo.
Para criar um boto de texto:
Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo:
Escolha Inserir > Objeto de formulrio > Boto. Na categoria Formulrios do painel Objetos, clique no cone de Inserir boto.
2
No campo Denominao, no inspetor de propriedades, digite o texto que deseja que aparea no boto. No campo Ao, siga um dos procedimentos abaixo: processamento quando o boto for clicado.
Selecione a opo Enviar o formulrio, para enviar o formulrio para Selecione a opo Redenir o formulrio, para redenir o formulrio quando o
boto for clicado.
535
No documento, coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo:
Escolha Inserir > Objeto de formulrio > Campo de imagens. Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
de imagens.
2
No inspetor de propriedades, altere o texto do campo Campo de imagens, para Enviar. No campo Orig, clique no cone de pasta e navegue at a imagem que deseja inserir na pgina. No campo Alt, digite o texto que deseja que aparea no lugar da imagem (nos navegadores somente de texto ou naqueles nos quais o download de imagens feito manualmente).
Coloque o ponto de insero dentro do contorno do formulrio e, em seguida, siga um dos procedimentos abaixo:
Escolha um objeto no menu Inserir > Objeto de formulrio. Na categoria Formulrios, no painel Objetos, clique no cone correspondente
ao objeto que deseja inserir no formulrio.
2
Especique as propriedades do objeto no inspetor de propriedades (escolha Janela > Propriedades, para exibir o inspetor de propriedades, se este j no estiver aberto).
536
Captulo 20
Como inserir tabelas em formulrios possvel criar formulrios mais atraentes atravs da insero de tabelas. Utilize as tabelas para fornecer uma estrutura para os objetos de formulrio e os identicadores dos campos. As tabelas facilitam o alinhamento das opes, tanto vertical quanto horizontalmente. Ao utilizar as tabelas em formulrios, certiquese de que todos os tags table estejam delimitados por tags form.
537
1 2
Em um formulrio, selecione um boto Enviar. Anexe o comportamento Chamar o JavaScript ao boto. Consulte Chamar o JavaScript na pgina 480. Na caixa de texto JavaScript que aparecer durante a anexao do comportamento, digite processForm(). Adicione uma funo JavaScript processForm() (como a mostrada acima) seo head do documento.
possvel lidar com muitas tarefas de processamento de formulrios utilizando os recursos de criao de scripts do cliente, porm no possvel salvar os dados digitados pelo usurio ou envi-los a terceiros. Para esta nalidade, necessrio utilizar um aplicativo do servidor, como o script Common Gateway Interface (CGI), por exemplo. Os scripts CGI podem ser escritos em Perl, C, Java ou outra linguagem de programao. H diversos sites na Web que oferecem scripts CGI gratuitos para a sua utilizao (consulte Recursos de tecnologias da Web e HTML na pgina 25). possvel modicar estes scripts de acordo com as suas necessidades. Tambm possvel perguntar ao provedor de servios da Internet ou equipe da Web se h qualquer script CGI disponvel que j esteja congurado para a execuo no seu servidor. Para examinar uma introduo criao de scripts CGI, consulte os recursos CGI listados em Recursos de tecnologias da Web e HTML na pgina 25.
538
Captulo 20
Os dois comportamentos especcos aos formulrios so explicados abaixo. Para obter informaes sobre outros comportamentos, consulte Como utilizar os comportamentos na pgina 469.
Validar o formulrio
verica o contedo de determinados campos de texto, a m de garantir que o usurio tenha digitado o tipo correto de dados. Consulte Validar o formulrio na pgina 506.
539
540
Captulo 20
21
CAPTULO 21
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Antes de carregar o site em um servidor e declar-lo pronto para a exibio, recomendvel test-lo localmente. De fato, recomendvel testar e reparar o site com freqncia durante a sua construo. Desta forma, possvel descobrir problemas logo e evitar que eles se repitam. Certique-se de que a aparncia e o funcionamento das pginas nos navegadores de destino estejam de acordo com o esperado, que no haja links rompidos e que o download das pginas no demore demais. Tambm possvel testar e reparar o site inteiro atravs da execuo de um relatrio de site, antes de public-lo. As seguintes diretrizes o auxiliaro a criar uma experincia agradvel aos visitantes do seu site:
541
Execute alguns relatrios de site para testar e reparar o site inteiro. possvel
vericar o seu site inteiro quanto a problemas, como, por exemplo, documentos sem ttulos, tags vazios e tags redundantes aninhados. A execuo destes relatrios antes da publicao do site garantir o surgimento de menos problemas mais tarde. Consulte Como criar relatrios na pgina 550.
542
Captulo 21
O recurso Vericar os navegadores de destino testa o HTML nos documentos, a m de vericar se algum tag ou atributo no conta com o suporte dos navegadores de destino. A vericao no altera qualquer aspecto do documento. O recurso Vericar os navegadores de destino utiliza arquivos de texto, denominados pers de navegadores, a m de determinar os tags aceitos por navegadores especcos. O Dreamweaver inclui pers predenidos para as verses 2.0, 3.0 e 4.0 do Netscape Navigator e para as verses 2.0, 3.0, 4.0 e 5.0 do Internet Explorer. Para modicar os pers existentes ou criar novos pers, consulte Como criar e editar os pers de navegadores na pgina 573. possvel executar uma vericao de navegador de destino em um documento, diretrio ou no site inteiro. Observe que esse procedimento no verica os scripts no site.
Para executar uma verificao de navegador de destino:
Escolha dentre as seguintes opes: realizada na ltima verso salva do arquivo e inclui apenas as alteraes que tiverem sido salvas.
Para executar a vericao no documento, salve o arquivo. A vericao Para executar a vericao em um diretrio ou site, escolha Janela > Arquivos
do site, para abrir a janela FTP do site; em seguida, selecione uma pasta no diretrio local. A vericao do navegador de destino ser efetuada em todos os arquivos HTML contidos nessa pasta e em suas subpastas. As vericaes do navegador de destino podem ser efetuadas apenas nos arquivos locais.
2
Escolha Arquivo > Vericar os navegadores de destino. Se ainda no tiver selecionado um navegador primrio, voc ser solicitado a faz-lo.
Na lista de navegadores, selecione o navegador de destino com que deseja vericar o site. Clique em Efetuar a vericao. O relatrio do navegador de destino ser aberto no navegador primrio (que ser iniciado, se j no estiver aberto).
Para salvar o relatrio para referncia futura, escolha Arquivo > Salvar, no navegador.
Nota: Como o relatrio do navegador de destino um arquivo temporrio, ele ser perdido se no for salvo antes da visita a outro site.
543
544
Captulo 21
Se ainda no tiver selecionado um navegador, escolha Editar > Preferncias > Visualizar no navegador, para selecionar um navegador.
Pressione a tecla F12, para exibir o documento no navegador primrio. Pressione as teclas Control e F12 (no Windows), ou Command e F12 (no
Macintosh), para exibir o documento no navegador secundrio.
Para alterar o navegador primrio ou definir um navegador secundrio:
Escolha Arquivo > Visualizar no navegador > Editar a lista de navegadores, ou Editar > Preferncias e selecione a guia Visualizar no navegador. Dena as preferncias de visualizao como preferir.
Como definir as preferncias de visualizao no navegador As preferncias de visualizao no navegador exibem os navegadores primrio e secundrio que estiverem denidos. Para abrir as preferncias de visualizao no navegador, escolha Editar > Preferncias, e selecione Visualizar no navegador, ou Arquivo > Visualizar no navegador > Editar a lista de navegadores.
Visualizar utilizando o servidor local (apenas no Windows) permite escolher se ser
utilizado um servidor local ao visualizar uma pgina em um navegador. Para que esta opo funcione, necessrio que haja um software de servidor em execuo no computador local. Quando esta opo for selecionada, o Dreamweaver fornecer a pgina para a visualizao por um servidor local, como uma URL iniciada por http://localhost/. Quando esta opo estiver desativada, o Dreamweaver abrir o documento em um navegador com um caminho de arquivo iniciado por le://. Em alguns casos, os links especicados como caminhos relativos raiz no funcionaro adequadamente quando abertos em um navegador com o caminho do tipo le://. Isto tambm acontece quando se executa uma vericao de navegador de destino. Consulte Como visualizar nos navegadores na pgina 544.
O boto de adio (+) adiciona
se o o navegador selecionado o navegador primrio ou o secundrio. A tecla F12 abre o navegador primrio. As teclas Control e F12 (no Windows), ou Command e F12 (no Macintosh), abrem o navegador secundrio.
545
Como testar os links atravs da visualizao em um navegador Como os links no esto ativos na janela do documento, necessrio veric-los e test-los atravs da visualizao das pginas no navegador. Por exemplo: verique os links s imagens, arquivos de udio e vdeo e assim por diante.
Para testar os links em um navegador:
1 2
Escolha Arquivo > Visualizar no navegador, ou pressione a tecla F12. Clique nos links ativos, para vericar se o link est funcionando corretamente.
1 2
Salve o arquivo em uma parte de um site local. Escolha Arquivo > Vericar os links.
1 2
Escolha Janela > Arquivos do site, para abrir a janela do site. Escolha um site no menu pop-up Sites.
546
Captulo 21
Na visualizao da pasta local, selecione os arquivos ou pastas a serem vericados. Inicie a vericao, utilizando um dos seguintes mtodos: tecla Control pressionada (no Macintosh) e, no menu contextual, escolha Vericar os links > Arquivos/pastas selecionadas.
Clique com o boto direito do mouse (no Windows), ou clique mantendo a Escolha Arquivo > Vericar os links.
5
Selecione um determinado relatrio de link no menu pop-up Mostrar. As suas escolhas so Links rompidos, Links externos e Arquivos rfos. S possvel vericar Arquivos rfos, quando se verica os links no site completo.
Uma lista de arquivos que se adequam ao tipo de relatrio selecionado aparecer na caixa de dilogo Vericador de links.
Escolha Site > Vericar os links no site inteiro. Aparecer a caixa de dilogo Vericador de links. Selecione um determinado relatrio de link no menu pop-up Mostrar. As suas escolhas so Links rompidos, Links externos e Arquivos rfos. Uma lista de arquivos que se adequam ao tipo de relatrio selecionado aparecer na caixa de dilogo Vericador de links.
Nota: Se selecionar Arquivos rfos como tipo de relatrio, possvel exclui-los diretamente da caixa de dilogo Verificador de links, selecionando um arquivo da lista e pressionando a tecla Delete. Para salvar o relatrio inteiro como um arquivo de texto delimitado por tabulaes:
Clique em Salvar. Como ajustar os links rompidos Quando voc vericar os links no Dreamweaver, ser exibida a caixa de dilogo Vericador de links, que apresentar um relatrio de links rompidos, externos e quando selecionado, vericar o site inteiro quanto a arquivos rfos. possvel ajustar os links e referncias a imagens que tiverem sido rompidos diretamente na caixa de dilogo Vericador de links, ou abrir os arquivos da lista e ajustar os links no inspetor de propriedades.
547
Selecione o link rompido na coluna Links rompidos da caixa de dilogo Vericador de links. Aparecer um cone de pasta ao lado do link rompido. Clique no cone correspondente pasta, para procurar o arquivo, ou digite o caminho correto e o nome do arquivo. Pressione a tecla de tabulao ou Enter. Se houver outras referncias rompidas a este mesmo arquivo, aparecer uma caixa de dilogo que o solicitar a ajustar as referncias tambm nos outros arquivos. Clique em Sim, para que o Dreamweaver atualize todos os documentos da lista que zerem referncia a este arquivo. Clique em No, para que o Dreamweaver atualize apenas a referncia atual.
Nota: Se a opo Ativar a devoluo e retirada de arquivos estiver ativada neste site, o Dreamweaver tentar retirar os arquivos que precisarem ser alterados. Se no conseguir retirar um arquivo, o Dreamweaver exibir uma caixa de dilogo de advertncia e manter inalteradas as referncias rompidas. Consulte Como utilizar as opes de devoluo e retirada de arquivos na pgina 139. Para ajustar os links no inspetor de propriedades:
Clique duas vezes em uma entrada da coluna Arquivo, na caixa de dilogo Vericador de links. O Dreamweaver abrir o documento, selecionar a imagem ou link com problema, e realar o caminho e o nome do arquivo no inspetor de propriedades. Caso o inspetor de propriedades no esteja visvel, escolha Janela > Propriedades, para abri-lo.
Sobrescreva o texto realado, a m de criar um novo caminho e nome de arquivo, ou clique no cone correspondente pasta, para procurar o arquivo. Se estiver atualizando a referncia de uma imagem e a nova imagem aparecer com o tamanho incorreto, clique nos identicadores L e U, no inspetor de propriedades, ou clique no boto Atualizar, para redenir os valores relativos altura e largura. Os identicadores L e U passaro, de negrito, ao tipo normal.
Salve o arquivo.
medida que os links forem ajustados, suas entradas desaparecero da lista Links rompidos. A permanncia de uma entrada na lista aps a digitao do novo caminho e nome de arquivo no Vericador de links (ou aps o salvamento das alteraes feitas no inspetor de propriedades) indica que o Dreamweaver no conseguiu localizar o novo arquivo. O link ainda ser considerado como rompido.
548
Captulo 21
Como abrir documentos vinculados no Dreamweaver Os links no esto ativos dentro do Dreamweaver, ou seja, no possvel abrir um documento vinculado clicando no link, na janela do documento.
Para abrir documentos vinculados no Dreamweaver, siga um dos procedimentos abaixo:
Selecione o link e escolha Modicar > Abrir a pgina vinculada. Pressione a tecla Control (no Windows), ou Command (no Macintosh), e
clique duas vezes no link.
Nota: necessrio que o documento vinculado resida no disco local.
1 2
Escolha Editar > Preferncias e, em seguida, clique em Barra de status. Escolha uma velocidade de conexo com a qual deseja calcular o tempo do download. A velocidade mdia de conexo nos Estados Unidos 28,8. Se o seu projeto destinar-se a uma intranet, considere a escolha de 1500 (velocidade T1).
549
550
Captulo 21
Escolha uma categoria de relatrio no menu pop-up Relatrio. As opes de relatrio so: Documento atual, Todo o site local, Arquivos selecionados do site e Pasta. No possvel executar um relatrio Arquivos selecionados do site, exceto se j tiver selecionado os arquivos na janela do site.
Selecione um tipo de relatrio, clicando na caixa apropriada. possvel selecionar um relatrio ou selecionar vrios para serem executados simultaneamente.
img que no possuem texto alternativo. Texto alternativo aparece no lugar da imagem para os navegadores somente de texto ou para os navegadores que tiverem sido denidos para o download manual de imagens.
Tags vazios removveis cria um relatrio que detalha todos os tags vazios que
podem ser removveis, para limpar o cdigo HTML. Por exemplo: possvel que um item ou imagem na visualizao de cdigo tenha sido excludo, mas os tags que se aplicam a ele ou ela, no.
Documentos sem ttulo cria um relatrio que lista todos os documentos sem
ttulo encontrados dentro dos parmetros selecionados. Sero relacionados os documentos com ttulos padro, ttulos duplicados ou tags de ttulos ausentes.
4
Clique em Executar, para criar o relatrio. Dependendo do que escolher para relatar, voc precisar salvar o arquivo, denir o site ou selecionar uma pasta (se ainda no o tiver feito).
Ser exibida uma lista de resultados na janela de resultados. Para organizar os resultados, clique no cabealho da coluna de acordo com a qual deseja ordenar. possvel ordenar pelo nome do arquivo, nmero da linha ou descrio. Tambm possvel executar vrios relatrios diferentes e manter as diversas janelas de resultados abertas.
6 7
Selecione um resultado especco, para examinar uma descrio detalhada. Clique em Abrir o arquivo, para ir at o item selecionado na janela do documento. Tambm possvel clicar duas vezes em um resultado, para abrir o arquivo na janela do documento.
551
Clique em Salvar o relatrio, para salvar o relatrio como um arquivo XML. Os relatrios so salvos como arquivos XML e podem ser importados para arquivos existentes de modelo. possvel importar, ento, o arquivo para um banco de dados ou planilha, e imprimi-lo ou exibi-lo em um site da Web.
Sugesto: Depois de executar os relatrios HTML, utilize o comando Limpar o HTML, para corrigir quaisquer erros de HTML que tiverem sido listados pelos relatrios.
552
Captulo 21
22
CAPTULO 22
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
O Macromedia Dreamweaver pode ser personalizado de vrios modos, permitindo que voc trabalhe da maneira que lhe for mais familiar, confortvel e eciente. O texto seguinte abrange alguns modos de personalizar o Dreamweaver:
Reorganize os objetos no painel Objetos, para que aqueles utilizados com mais
freqncia estejam sempre visveis, crie novas categorias para reorganizar os objetos ou adicionar novos. Consulte Como modicar o painel Objetos na pgina 555.
553
1 2 3
Faa uma cpia de segurana do arquivo Extensions.txt na pasta Conguration. Abra o arquivo Extensions.txt no Dreamweaver ou em um editor de texto. Recorte a linha correspondente ao novo padro e cole-a no incio do arquivo, para que seja a primeira linha. Salve o arquivo, saia do Dreamweaver e reinicie-o. Para ver o novo padro, selecione Arquivo > Abrir e veja o menu pop-up de tipos de arquivos.
Para adicionar novos tipos de arquivos ao menu na caixa de dilogo Arquivo > Abrir:
1 2 3
Faa uma cpia de segurana do arquivo Extensions.txt na pasta Conguration. Abra o arquivo Extensions.txt no Dreamweaver ou em um editor de texto. Adicione uma linha para cada novo tipo de arquivo. Em caixa alta, digite as extenses de nome de arquivo que o novo tipo de arquivo pode ter, separadas por vrgulas; em seguida, adicione dois pontos e uma frase descritiva curta para ser mostrada na caixa de dilogo Arquivo > Abrir. Por exemplo: para os arquivos JPEG, digite
Arquivos de imagem JPG,JPEG,JFIF:JPEG
554
Captulo 22
Salve o arquivo, saia do Dreamweaver e reinicie-o. Para ver as alteraes, selecione Arquivo > Abrir e clique no menu pop-up de tipos de arquivos.
Um arquivo GIF que contm um cone correspondente ao objeto Um arquivo HTML que contm o HTML a ser inserido no seu arquivo ou um
formulrio HTML que permite especicar os dados a serem includos (por exemplo: o texto de um comentrio)
Mova todos os arquivos do objeto (os arquivos GIF, HTML e JavaScript, se houver algum) de uma pasta para outra, dentro da pasta Conguration/Objects.
Para renomear uma categoria no painel Objetos:
Mova os arquivos HTML, GIF e JavaScript correspondentes ao objeto para fora da pasta Conguration/Objects. possvel excluir totalmente esses arquivos, se tiver certeza de que deseja remover o objeto, mas conveniente manter uma cpia de segurana para o caso de precisar restaurar o objeto posteriormente.
Para recarregar as extenses:
Pressione a tecla Control e clique (no Windows), ou pressione a tecla Option e clique (no Macintosh) no menu pop-up de categorias, no alto do painel Objetos. Escolha Recarregar as extenses.
555
Crie um novo documento em branco em um editor de texto (por exemplo: BBEdit ou HomeSite).
Nota: O novo documento em branco, criado no Dreamweaver, contm vrios tags HTML padro (html, head e body, por exemplo). Se desejar utilizar um dos editores de cdigo do Dreamweaver (a visualizao de cdigo da janela do documento ou o inspetor de cdigo) como editor de texto para criar um objeto simples, necessrio primeiramente excluir todos os tags padro que aparecerem no editor de cdigo quando o documento for criado.
Adicione os tags que este objeto deve inserir nos documentos. Por exemplo, digite:
<p> © 2000 Z Productions, Inc.<BR> Todos os direitos reservados </p>
Salve o arquivo. Para que o novo objeto aparea em uma das categorias existentes no painel Objetos, salve-o em uma das subpastas da pasta Objects. Para criar uma nova categoria, crie uma subpasta na pasta Conguration/Objects e salve o arquivo nesse local. As pastas adicionais contidas em qualquer subpasta de categoria (como as pastas criadas na subpasta Caracteres) sero ignoradas.
Em um programa grco ou de edio de imagens (como o Macromedia Fireworks), crie uma imagem GIF com 18 x 18 pixels, que corresponder ao cone do objeto no painel Objetos. Se a imagem criada for maior, o Dreamweaver a redimensionar automaticamente para 18 x 18 pixels. Caso no seja criado um cone para o objeto, o Dreamweaver inserir um cone de objeto genrico no painel Objetos.
556
Captulo 22
D ao cone o mesmo nome de arquivo que o do arquivo do objeto, mas utilize a extenso .gif, e salve-o no diretrio em que estiver o arquivo do objeto. Por exemplo: se o objeto se chamar Copyright_Z.htm e tiver sido salvo no diretrio Comum, denomine o cone Copyright_Z.gif e salve esse arquivo no mesmo diretrio.
Reinicie o Dreamweaver ou recarregue as extenses, para utilizar o novo objeto. O objeto aparecer na parte inferior do menu Inserir e tambm no painel Objetos. Para obter informaes sobre recarga de extenses, consulte Como modicar o painel Objetos na pgina 555.
557
Como modificar o menu Comandos Determinados tipos de comandos podem ser adicionados ao menu Comandos, alterando os seus nomes, sem editar o arquivo menus.xml.
Nota: O termo comando tem dois significados no Dreamweaver. No sentido estrito, um comando um determinado tipo de extenso. Contudo, em determinados contextos, a palavra comando utilizada como sinnimo de item de menu significando qualquer item que aparea em um menu do Dreamweaver, sem levar em conta a sua funo ou como implementado.
Para criar novos comandos que so colocados automaticamente no menu Comandos, utilize o painel Histrico (consulte Como criar novos comandos a partir das etapas do histrico na pgina 173). Pode-se usar tambm o Package Manager para instalar as novas extenses, inclusive os comandos; consulte Como adicionar extenses ao Dreamweaver na pgina 98. Para reordenar os itens no menu Comandos, ou para mover os comandos entre os menus, o arquivo menus.xml deve ser editado.
Para renomear um comando que voc criou:
Escolha Comandos > Editar a lista de comandos. Aparece uma caixa de dilogo com uma lista de todos os comandos cujos nomes podem ser alterados. Os comandos que esto no menu Comandos padro no aparecero nessa lista e no podero ser editados atravs desse procedimento.
2 3 4
Selecione um comando a ser renomeado. Digite um novo nome. Clique em Fechar. O comando aparecer renomeado no menu Comandos.
Escolha Comandos > Editar a lista de comandos. Aparece uma caixa de dilogo com uma lista de todos os comandos que podem ser excludos. Os comandos que esto no menu Comandos padro no aparecero nessa lista e no podero ser excludos atravs desse procedimento.
558
Captulo 22
Clique em Excluir, em seguida, conrme a remoo do comando. O comando ser excludo. Observe que tambm foi excludo o arquivo que contm o cdigo para o comando; a excluso de um comando no remove apenas um item do menu. Certique-se de que deseja realmente excluir o comando, antes de utilizar esse procedimento. Se voc quiser remover um item do menu Comandos sem excluir o arquivo, procure o arquivo em Conguration/Commands e mova-o para outra pasta.
Clique em Fechar.
Como reorganizar os menus e os itens de menus Ao editar o arquivo menus.xml, possvel mover os itens em um menu ou de um menu para outro, adicionar ou remover separadores dos menus, bem como mover menus em uma barra de menus ou at mesmo de uma barra para outra. Observe que os itens podem ser inseridos ou removidos dos menus contextuais, utilizando o mesmo procedimento empregado para outros menus. Para obter informaes sobre a sintaxe do arquivo menus.xml, consulte Sobre a sintaxe dos tags do menus.xml na pgina 562.
Para mover um item de menu:
1 2 3
Saia do Dreamweaver. Faa uma cpia de segurana do arquivo menus.xml. Abra o arquivo menus.xml em um editor de texto (BBEdit, HomeSite ou Wordpad, por exemplo). No o abra no Dreamweaver. Recorte um tag menuitem inteiro, de <menuitem, no incio, at /> , no nal. Coloque o ponto de insero no novo local para o item de menu. Verique se ele est entre um tag <menu> e seu correspondente </menu>. Cole o item de menu nesse novo local.
4 5
Coloque o ponto de insero dentro de um menu (em alguma posio entre um tag<menu> e seu correspondente </menu>). Insira um novo par <menu></menu> no menu. Adicione novos itens de menu a este submenu.
2 3
559
/>
correspondente.
1 2 3
Saia do Dreamweaver. Faa uma cpia de segurana do arquivo menus.xml. Abra o arquivo menus.xml em um editor de texto (BBEdit, HomeSite ou Wordpad, por exemplo). No o abra no Dreamweaver. Recorte o menu inteiro e seu contedo, a partir do tag de abertura <menu> at o de nalizao </menu>. Coloque o ponto de insero no novo local para o menu. Verique se ele est entre um tag <menubar> e seu correspondente </menubar>. Cole o menu nessa nova posio.
Como alterar o nome do menu ou de um item de menu O nome do menu ou de um item de menu pode ser facilmente alterado, editando o arquivo menus.xml. Para obter informaes sobre a sintaxe do arquivo menus.xml, consulte Sobre a sintaxe dos tags do menus.xml na pgina 562.
Para alterar o nome do menu ou de um item de menu:
1 2 3
Saia do Dreamweaver. Faa uma cpia de segurana do arquivo menus.xml. Abra o arquivo menus.xml em um editor de texto, como HomeSite, BBEdit ou Wordpad (no o abra no Dreamweaver). Se for modicado um item de menu, localize o tag menuitem adequado e altere o valor do atributo name correspondente. Se for modicado um menu, localize o tag menu adequado e altere o valor do atributo name correspondente.
Nota: Em ambos os casos, no altere o atributo id.
Salve e feche o menus.xml, em seguida, reinicie o Dreamweaver para ver as suas alteraes.
560
Captulo 22
Como alterar os atalhos de teclado Se os atalhos de teclado padro no forem convenientes, voc poder alterar ou remover os j existentes, ou adicionar novos. O modo mais fcil de fazer isso utilizar o editor de atalhos de teclado (consulte Como utilizar o editor de atalhos de teclado na pgina 95). Contudo, se preferir, poder tambm modicar os atalhos de teclado diretamente no arquivo menus.xml, embora seja muito mais fcil cometer erros ao digitar atalhos no menus.xml do que no editor de atalhos de teclado. Para obter informaes sobre a sintaxe do arquivo menus.xml, consulte Sobre a sintaxe dos tags do menus.xml na pgina 562.
Para alterar um atalho de teclado:
1 2 3
Saia do Dreamweaver. Faa uma cpia de segurana do arquivo menus.xml. Abra o arquivo menus.xml em um editor de texto (BBEdit, HomeSite ou Wordpad, por exemplo). No o abra no Dreamweaver. Examine a Matriz de atalhos de teclado na pgina 598 e localize um atalho que no esteja sendo utilizado ou algum ao qual ser dada uma nova atribuio. Se um atalho de teclado for designado novamente, risque-o em uma cpia impressa da matriz, para referncia futura.
Se um atalho de teclado receber uma nova atribuio, procure o item de menu ao qual o atalho foi designado e remova o atributo key="shortcut" desse item de menu. Localize o item de menu para o qual ser designado ou redesignado o atalho de teclado. Se o item de menu j tiver um atalho de teclado, procure o atributo key nesta linha. Caso contrrio, adicione key="" em qualquer posio entre os atributos dentro do tag menuitem. Entre as aspas do atributo key, digite o novo atalho de teclado. Utilize um sinal de adio (+) entre as teclas em uma combinao de teclas. Para obter mais informaes sobre os modicadores, veja a descrio do tagmenuitem na <menuitem> na pgina 564. Se o atalho de teclado estiver em uso em outro local e caso no tenha sido removida a outra utilizao, o atalho ser aplicado apenas ao primeiro item de menu ao qual foi atribudo no menus.xml.
Nota: O mesmo atalho de teclado pode ser utilizado para um item de menu apenas do Macintosh e para outro apenas do Windows.
561
Sobre a sintaxe dos tags do menus.xml O arquivo menus.xml contm uma lista estruturada de menus, barras de menus, itens de menu, separadores e listas de atalhos. Esses itens so descritos pelos tags XML, que podem ser editados em um editor de texto.
Nota: Tenha cuidado ao modificar os menus. O Dreamweaver ignora qualquer menu ou item de menu que contenha um erro de sintaxe XML.
Uma barra de menus (marcada com tags de abertura e fechamento menubar) um menu individual ou um conjunto de menus por exemplo: h uma barra de menus principal, uma barra de menus da janela do site separada (que aparece apenas no Windows e no no Macintosh) e uma barra de menus para cada menu contextual. Cada barra de menu contm um ou mais menus; um menu est contido em um tag menu. Cada menu contm um ou mais itens de menu, e cada um deles descrito por um tag menuitem e seus atributos. Um menu tambm composto por separadores (descritos pelo tag separator tags) e submenus. Alm dos atalhos de teclado associados ao itens de menu, o Dreamweaver fornece vrios outros atalhos de teclado, incluindo atalhos alternativos e aqueles que esto disponveis apenas em determinados contextos. Por exemplo: Control+Y (no Windows) ou Command+Y (no Macintosh) o atalho para Refazer, porm Control+Shift+Z ou Command+Shift+Z um atalho alternativo para Refazer. Essas alternativas e outros atalhos que no podem ser representados nos tags para os itens de menu so denidos nas listas de atalhos no arquivo menus.xml. Cada lista de atalhos (descrita por um tag shortcutlist) contm um ou mais atalhos, cada um deles descrito por um tag shortcut. As sees abaixo descrevem a sintaxe dos tags do menus.xml. Os atributos opcionais esto marcados com chaves ({}) nas listas de atributos; todos os atributos no marcados com chaves so obrigatrios. <menubar>
Descrio
o nome da barra de menus. Embora name seja um atributo necessrio, poder ser representado pelo valor "". o nome do aplicativo no qual a barra de menus est disponvel. Os valores vlidos so "dreamweaver" e "ultradev". O padro que a barra de menus esteja disponvel no Dreamweaver e no UltraDev.
app
a identicao do menu para a barra de menus. Cada identicao de menu no arquivo menus.xml deve ser nica.
id
562
Captulo 22
platform
indica que a barra de menus deve aparecer apenas em uma determinada plataforma. Os valores vlidos so "win" e "mac".
Contedo
Nenhum
Exemplo
<menu>
Descrio
Contm informaes sobre um menu ou submenu que aparecer na estrutura de menus do Dreamweaver.
Atributos
o nome do menu na forma em que aparecer na barra de menus. Para denir a tecla de acesso ao menu (mnemnico) no Windows, utilize um sinal de sublinhado (_) antes da letra de acesso. O sinal de sublinhado ser automaticamente removido no Macintosh.
app o nome do aplicativo no qual o menu est disponvel. Os valores vlidos so "dreamweaver" e "ultradev". O padro que o menu esteja disponvel no
Dreamweaver e no UltraDev.
id
indica que o menu deve aparecer apenas em uma determinada plataforma. Os valores vlidos so "win" e "mac".
platform
Contedo
Esse tag contm um ou mais tags menuitem e separator. Pode conter tambm outros tags menu (para criar submenus) e tags de comentrio em HTML padro.
Continer
<menu name="_File" id="DWMenu_File"> <!-- menuitem, separator, menu, and comment tags here --> </menu>
563
<menuitem>
Descrio
name, id, {app}, {key}, {platform}, {enabled}, {arguments}, {command}, {file}, {checked}, {dynamic} name O nome do item que aparece no menu. Um sinal de sublinhado indica que a letra seguinte a tecla de acesso ao comando (mnemnico), apenas no Windows.
utilizado pelo Dreamweaver para identicar o item. Essa identicao deve ser nica em toda a estrutura do menu. Se forem adicionados novos itens de menu ao arquivo menus.xml, utilize o nome de sua empresa ou uma outra seqncia de caracteres nica como prexo para cada identicao de item, a m de assegurar a exclusividade.
id
o nome do aplicativo no qual o item de menu est disponvel. Os valores vlidos so "dreamweaver" e "ultradev". O padro que o item de menu esteja disponvel no Dreamweaver e no UltraDev.
app key o atalho de teclado para o comando, se houver algum. Utilize estas seqncias para especicar as teclas modicadoras:
Cmd Alt
e Opt respectivamente especicam a tecla Alt (no Windows) ou Option (no Macintosh).
Shift especica a tecla Shift em ambas as plataformas. Ctrl especica a tecla Control em ambas as plataformas. Um sinal de adio (+) separa as teclas modicadoras, se um atalho utilizar mais
de um modicador. Por exemplo: Cmd+Opt+5 no atributo key signica que o item de menu executado pressionando as teclas Control, Alt e 5 (no Windows) ou Command, Option e 5 (no Macintosh).
As teclas especiais so indicadas pelo nome: F1 a F12, PgDn, PgUp, Home, End, Ins,
Del, Tabulao, Esc, Retrocesso e Espao. As teclas modicadoras tambm podem ser aplicadas s teclas especiais.
indica em qual plataforma o item aparece. Os valores vlidos so "win", signicando apenas Windows, ou "mac", indicando apenas Macintosh. Se o atributo platform no for especicado, o item de menu aparecer em ambas as plataformas. Para que um item de menu se comporte de modo diferente em plataformas distintas, fornea dois itens de menu com o mesmo nome (mas com identicaes diferentes): um com platform="win" e o outro com platform="mac".
platform
564
Captulo 22
enabled
fornece o cdigo JavaScript (normalmente, uma chamada de funo JavaScript) que determina se o item de menu est ativado. Se a funo retornar false, o item de menu estar desativado. O valor padro "true", porm melhor especicar sempre um valor por motivo de clareza, mesmo que ele seja "true". fornece argumentos para que o Dreamweaver os passe ao cdigo no arquivo JavaScript, especicado no atributo file. Envolva os argumentos em aspas simples ('), dentro das aspas duplas utilizadas para delimitar o valor de um atributo.
arguments
especica uma expresso JavaScript que ser executada quando o usurio selecionar esse item no menu. Nos cdigos JavaScript complexos, utilize um arquivo JavaScript (especicado no atributo file). Deve ser especicado file ou command para cada item de menu.
command
o nome do arquivo HTML que contm o JavaScript que controla o item de menu. Especica um caminho de arquivo relativo pasta Conguration. Por exemplo: o item de menu Bem-vindo > Ajuda representado por file="Commands/Welcome.htm". Observe que o atributo file anula os atributos command, enabled e checked. Deve ser especicado file ou command para cada item de menu. Para obter informaes sobre a criao de um arquivo de comando utilizando o painel Histrico, consulte Como criar novos comandos a partir das etapas do histrico na pgina 173. Consulte Como estender os recursos do Dreamweaver, para obter informaes sobre a maneira de escrever os seus comandos JavaScript a partir do zero.
file
uma expresso JavaScript que indica se o item de menu tem uma marca de seleo ao seu lado, no menu; se a expresso for avaliada como true, o item ser exibido com uma marca.
checked
se estiver presente, indica que um item de menu deve ser determinado dinamicamente por um arquivo HTML, que contenha cdigo JavaScript para denir o texto e o estado do item de menu. Se um tag for especicado como dynamic, o atributo file tambm dever ser denido.
dynamic
indica se as visualizaes do projeto e de cdigo devem ser sincronizadas antes da execuo do cdigo para esse item de menu. Os valores vlidos so "true" (o padro) e "false". Se esse atributo for denido para "false", isto signica que as alteraes no arquivo feitas por esse item de menu no utilizam o DOM (Document Object Model) do Dreamweaver. Para obter informaes sobre o DOM, consulte Como estender os recursos do Dreamweaver.
isdomrequired
Contedo
565
<separator>
Descrio
{app} app o nome do aplicativo no qual o separador mostrado. Os valores vlidos so "dreamweaver" e "ultradev". O padro que o separador seja mostrado no
Dreamweaver e no UltraDev.
Contedo
<separator />
<shortcutlist>
Descrio
o nome do aplicativo no qual a lista de atalhos est disponvel. Os valores vlidos so "dreamweaver" e "ultradev". O padro que a lista de atalhos esteja disponvel no Dreamweaver e no UltraDev.
app
a identicao da lista de atalhos. Ela deve ser a mesma que a identicao do menu para a barra de menus (ou menu contextual) no Dreamweaver ao qual os atalhos esto associados. Os valores vlidos so "DWMainWindow", "DWMainSite", "DWTimelineContext" e "DWHTMLContext".
id
indica que a lista de atalhos deve aparecer apenas em uma determinada plataforma. Os valores vlidos so "win" e "mac".
platform
Contedo
Esse tag deve conter um ou mais tags shortcut. Pode acomodar tambm um ou mais tags de comentrio (que utilizem a mesma sintaxe que os tags de comentrio em HTML).
Continer
Nenhum
Exemplo
<shortcutlist id="DWMainWindow"> <!-- shortcut and comment tags here --> </shortcutlist>
566
Captulo 22
<shortcut>
Descrio
a combinao de teclas que ativa o atalho de teclado. Para obter mais detalhes sobre a sintaxe, consulte <menuitem> na pgina 564.
app o nome do aplicativo no qual o atalho est disponvel. Os valores vlidos so "dreamweaver" e "ultradev". O padro que o atalho esteja disponvel no
Dreamweaver e no UltraDev. especica que o atalho funciona apenas na plataforma indicada. Os valores vlidos so "win" e "mac". Se esse atributo no for especicado, o atalho funcionar em ambas as plataformas.
platform file o caminho de um arquivo que contm o cdigo JavaScript que o Dreamweaver executar quando o atalho de teclado for acionado. O atributo file anula o atributo command. Deve ser especicado file ou command para cada atalho.
fornece argumentos para que o Dreamweaver os passe ao cdigo no arquivo JavaScript, especicado no atributo file. Envolva os argumentos em aspas simples ('), dentro das aspas duplas utilizadas para delimitar o valor de um atributo.
arguments command
o cdigo JavaScript que o Dreamweaver executar quando o atalho de teclado for acionado. Deve ser especicado file ou command para cada atalho. um identicador nico para um atalho.
id
name um nome para o comando executado pelo atalho de teclado, com o mesmo estilo de um nome de item de menu. Por exemplo: o atributo name para o atalho F12 "Visualizar no navegador primrio".
Contedo
567
Localize o arquivo .htm adequado em Conguration/Objects, Conguration/ Commands ou Conguration/Behaviors. Faa uma cpia do arquivo, em um local diferente da pasta Conguration. Abra a cpia no Dreamweaver, edite o formulrio e salve a cpia. Saia do Dreamweaver. Transra essa cpia modicada de volta para a pasta Conguration, substituindo a original. conveniente fazer primeiro uma cpia de segurana da original, para que possa ser restaurada posteriormente, se for necessrio. Reinicie o Dreamweaver, para examinar as alteraes.
2 3 4 5
Apenas a aparncia da caixa de dilogo deve ser modicada, mas no o seu funcionamento; ela dever conter ainda os mesmos tipos e nomes dos elementos de formulrio, a m de que as informaes obtidas pelo Dreamweaver na caixa de dilogo possam ser utilizadas da mesma forma. Por exemplo: o objeto comentrio obtm a entrada de texto em uma rea de texto, numa caixa de dilogo, em seguida utiliza uma funo JavaScript simples para transform-la em um comentrio em HTML, que ser inserido no documento. O formulrio que descreve a caixa de dilogo est em Conguration/Objects/ Invisibles/Comment.htm. possvel abrir e alterar o tamanho e outros atributos da rea do texto, mas se for removido o tag textarea inteiro, ou alterado o valor do seu atributo name, o objeto comentrio deixar de funcionar corretamente.
568
Captulo 22
Cada seo do perl comea com um tag no formato <?keyword> (por exemplo:
<?options>, <?elements>
ou <?attributes>).
569
Por exemplo: as denies padro do tag p no SourceFormat.txt so <p break="1,0,0,1" indent>, e produzem a seguinte formatao:
<p> um pargrafo de texto recuado na margem esquerda (aps a primeira linha) e que contm uma quebra de linha antes do tag p de abertura e depois do do tag p de finalizao, porm nenhuma quebra de linha aps o p de abertura e nenhuma antes do p de finalizao.</p> <p>Prximo pargrafo.</p>
Se as denies forem alteradas para <p break="1,1,1,2">, a visualizao de cdigo e o inspetor de cdigo exibiro os pargrafos de texto da seguinte maneira:
<p> um pargrafo de texto que no recuado na margem esquerda e tem uma quebra de linha antes e depois do tag p de abertura, uma quebra de linha antes do tag p de finalizao e duas quebras de linha aps o tag p de finalizao. </p> <p> Prximo pargrafo. </p>
Observe que o nmero de quebras de linha aps o tag de nalizao e antes do tag de abertura seguinte o maior dos dois nmeros especicados se voc denir duas quebras de linha antes de um tag e trs depois, isto resultar em trs quebras de linha entre o tag de nalizao e o prximo tag de abertura. Algumas denies de tags e atributos incluem o termo namecase, que especica que o tag ou atributo deve ser escrito em caixa alta, exatamente como foi denido no valor do atributo namecase. Por exemplo: onClick especicado no arquivo SourceFormat.txt como <onClick namecase="onClick">, contudo, onClick sempre exibido com uma combinao exclusiva de maisculas e minsculas, independentemente das preferncias de caixa alta ou baixa do usurio. Outro termo utilizado para especicar a caixa alta ou baixa samecase, que especica que o valor de um atributo deve ser escrito em caixa alta ou baixa da mesma maneira que o nome do atributo. Por exemplo: <align samecase> indica que o Dreamweaver gera um atributo align; o valor do atributo aparecer com a mesma caixa alta ou baixa que o nome do atributo. Isto se aplica tambm aos nomes de atributos que no tm valores, por isso, no remova samecase das especicaes de formatao de atributo onde quer que apaream.
570
Captulo 22
O termo noformat associado a um tag indica que as quebras de linhas, o recuo e o uso de caixa alta ou baixa de uma instncia de um tag existente nunca sero modicados de acordo com o formato especicado no arquivo SourceFormat.txt. No caso de um tag marcado com noformat, o formato especicado no SourceFormat.txt utilizado apenas quando uma nova instncia do tag for criada com o Dreamweaver. Por exemplo: <pre break="1,0,0,1" noformat> signica que, se for criado um novo tag pre com as ferramentas do Dreamweaver, o programa utilizar a especicao de quebra de linha "1,0,0,1"; mas se j houver um tag pre criado manualmente pelo usurio, cujas quebras de linhas no coincidem com essa especicao e esse tag for editado na visualizao do projeto, as quebras de linha no sero alteradas. Qualquer atributo no especicado no arquivo SourceFormat.txt utilizar as denies de formatao padro indicadas na categoria das preferncias de formato HTML.
571
Dois hfens (--) no incio de uma linha indicam um comentrio (isto , a linha
ser ignorada durante o processo de vericao do destino). Um comentrio deve comear no incio de uma linha dois hfens no podem ser colocados no meio de uma linha.
Deve ser includo um ponto de exclamao, sem um espao, antes de cada uma
das seguintes palavras: ELEMENT, ATTLIST, Error, msg e htmlmsg (!ELEMENT, !ATTLIST, !Error, !msg, !htmlmsg).
possvel incluir !Error e !Warning na rea !ELEMENT ou !ATTLIST. As mensagens !msg podem conter apenas texto simples. As mensagens !htmlmsg
podem conter qualquer HTML vlido, inclusive hiperlinks.
-->) no podem ser listados como tags nos pers de navegadores porque interferem na anlise. O Dreamweaver no relata um erro para os comentrios porque eles contam com suporte de todos os navegadores.
tagName um nome descritivo para o tag (por exemplo: o nome do tag HR Rgua horizontal). O atributo NAME opcional. Se for especicado, tagName ser utilizado nas mensagens de erro; caso um nome no seja fornecido, htmlTag ser utilizado nas mensagens de erro. unsupportedAttribute um atributo que no conta com suporte. Considera-se que
os tags e atributos que no foram explicitamente mencionados no contam com suporte. Especique os tags ou atributos sem suporte apenas quando desejar criar uma mensagem de erro personalizada.
supportedAttribute um atributo ao qual o htmlTag oferece suporte. Considera-se que apenas os tags presentes na lista sem uma designao !Error contam com suporte do navegador.
572
Captulo 22
validValue
O exemplo abaixo mostra uma entrada para o tag APPLET , que seria exato para o Navigator 3.0:
<!ELEMENT APPLET Name="Java Applet" > <!ATTLIST APPLET Alinhar ( no alto | no meio | embaixo | esquerda | direita | no meio absoluto | o mais abaixo | linha de base | alto do texto ) Alt Archive Class !Warning !htmlmsg="Este navegador ignora o atributo <CODE>CLASS</ CODE> do tag <CODE>APPLET</CODE>.". Code Codebase Height HSpace Class !Warning !htmlmsg="Este navegador ignora o atributo <CODE>ID</CODE> do tag <CODE>APPLET</CODE>". Utilize em seu lugar <CODE>NAME</CODE>". Name Style !Warning !htmlmsg="Este navegador ignora o atributo <CODE>STYLE</ CODE> do tag <CODE>APPLET</CODE>". VSpace Width >
Como criar e editar os perfis de navegadores Um perl de navegador pode ser criado atravs da modicao de um perl existente. Por exemplo: para criar um perl para uma verso mais avanada do Microsoft Internet Explorer, abra o perl da verso mais recente do Internet Explorer, que contenha um perl, adicione os novos tags e atributos da nova verso e salve-o como um perl para essa verso mais avanada.
Nota: Antes de criar um perfil para uma nova verso de navegador, visite o site de intercmbio da Macromedia para o Dreamweaver, a fim de verificar se a Macromedia forneceu um perfil de navegador que possa ser obtido por download e instalado usando o Package Manager. Para criar ou editar um perfil de navegador:
Utilizando um editor de texto, abra um perl existente. Se voc estiver criando um novo perl, abra o perl que mais se assemelhe ao que ser criado, em seguida, salve o arquivo com um novo nome.
Ao criar um novo perl, altere o nome que aparece na primeira linha de texto do arquivo. Dois pers no podem ter o mesmo nome.
573
Adicione novos tags ou atributos que contam com suporte do navegador, utilizando a sintaxe mostrada em Sobre a formatao dos pers de navegadores na pgina 571. Se no desejar receber mensagens de erro sobre um determinado tag que no conte com suporte, adicione-o lista de tags aceitos. Caso isto seja feito, salve o perl em um arquivo separado com um novo nome (limitado a Nomedonavegador x.x , por exemplo). O novo nome do perl serve para preservar o perl original apenas com os tags que contam com suporte.
Exclua os tags ou atributos que no contam com suporte do navegador. Essa etapa desnecessria quando for criado um perl para a prxima verso do Netscape Navigator ou Microsoft Internet Explorer, porque, raramente, os navegadores deixam de oferecer suporte aos tags.
Adicione as mensagens de erro personalizadas, de acordo com a sintaxe mostrada em Sobre a formatao dos pers de navegadores na pgina 571. Os pers que acompanham o Dreamweaver listam todos os tags que recebem suporte dos navegadores especicados. Para adicionar uma mensagem de erro personalizada a um tag, inclua !msg "message" ou !htmlmsg "<tag>message</tag>" depois de !Error. Por exemplo: esta informao aparece no perl do Netscape Navigator 3.0 (juntamente com outros atributos no mostrados aqui):
<!ELEMENT HR name="Rgua horizontal" > <!ATTLIST HR COLOR !Error >
Para adicionar uma mensagem de erro personalizada, digite !msg: e, em seguida, a mensagem de erro, entre aspas:
<!ELEMENT HR name="Rgua horizontal" > <!ATTLIST HR COLOR !Error !msg "O Internet Explorer 3.0 oferece suporte ao tag COLOR nas rguas horizontais, mas no o Netscape Navigator 3.0." > 6 !Error
pode ser utilizado para todas as situaes de erro, ou use !Warning, para indicar que o tag ser ignorado mas no causar um erro.
574
Captulo 22
575
Como editar os comandos do Dreamweaver Todos os comandos nos menus do Dreamweaver, inclusive aqueles criados e salvos utilizando o painel Histrico (consulte Como criar novos comandos a partir das etapas do histrico na pgina 173), so implementados em JavaScript. O cdigo JavaScript geralmente consiste, em sua maior parte, de chamadas de funes fornecidas pela API de extensibilidade do Dreamweaver. Caso voc conhea o JavaScript e compreenda a API de extensibilidade do Dreamweaver, poder editar o JavaScript, a m de alterar o funcionamento dos comandos do programa.
Nota: No tente alterar cdigos JavaScript, a menos que saiba exatamente o que est fazendo. Mesmo nesse caso, faa uma cpia de segurana do arquivo que contm o cdigo, antes de modific-lo.
Para renomear um comando, mova-o para um outro menu ou adicione a ele um atalho de teclado. Consulte Sobre a personalizao dos menus do Dreamweaver na pgina 557.
576
Captulo 22
Nota: Esta seo explica como definir o modo de exibio de um tag personalizado no Dreamweaver, mas no como editar o seu contedo ou propriedades. Para obter informaes sobre a criao de um inspetor de propriedades para verificar e alterar as propriedades de um tag personalizado, consulte Inspetores de propriedades, em Como estender os recursos do Dreamweaver.
Cada arquivo de banco de dados de tags dene o nome, tipo, modelo do contedo, esquema de interpretao e cone para um ou mais tags personalizados. Pode ser criado qualquer nmero de arquivos de banco de dados de tags, mas todos devem residir na pasta Conguration/ThirdPartyTags, para que sejam lidos e processados pelo Dreamweaver. Os arquivos de banco de dados de tags tm a extenso .xml.
Sugesto: Se voc estiver trabalhando simultaneamente em diversos sites diferentes e sem relao (por exemplo: como um programador independente), coloque todas as especificaes de tags relativos a um determinado site em um nico arquivo. Em seguida, basta incluir esse arquivo de banco de dados de tags nos cones personalizados e inspetores de propriedades, que sero enviados para a equipe que far a manuteno do site.
Uma especicao de tag denida com um tag XML denominado tagspec. Por exemplo: o cdigo abaixo descreve a especicao para o tag happy:
<tagspec tag_name="happy" tag_type="nonempty" render_contents="false" content_model="marker_model" icon="happy.gif" icon_width="18" icon_height="18"></tagspec>
Dois tipos diferentes de tags podem ser especicados com o tagspec: tags em estilo HTML normal e tags delimitadas por seqncias de caracteres. Os tags delimitados por seqncias de caracteres iniciam com uma seqncia e terminam com outra; eles so semelhantes a tags HTML vazios (por exemplo: img) pois no envolvem o contedo e nem contm tags de nalizao. O tag happy, mostrado acima, um tag em estilo HTML normal; ele inicia com um tag de abertura <happy>, contm dados entre os tags de abertura e fechamento, e termina com um tag </happy> de nalizao. Se o tag fosse delimitado por uma seqncia de caracteres, sua especicao incluiria os atributos start_string e end_string. Um tag ASP do tipo delimitado por uma seqncia de caracteres; ele inicia com a seqncia <% e termina com a seqncia %>, e no contm um tag de nalizao. As informaes abaixo descrevem os atributos e valores vlidos para o tag tagspec. Os atributos marcados com um asterisco (*) so ignorados pelos tags delimitados por uma seqncia de caracteres. <tagspec>
Descrio
tag_name, tag_type, render_contents, content_model, start_string, end_string, detect_in_attribute, parse_attributes, icon, icon_width, icon_height
577
tag_name
o nome do tag personalizado. (Nos tags delimitados por seqncias de caracteres, tag_name utilizado apenas para determinar se um inspetor de propriedades especco pode ser utilizado para o tag. Se a primeira linha do inspetor de propriedades contiver o nome do tag com um asterisco de cada lado, o inspetor poder ser utilizado para esses tipos de tags. Por exemplo: o nome do tag para o cdigo ASP ASP; os inspetores de propriedades que podem examinar o cdigo ASP devem conter *ASP* na primeira linha. Para obter informaes sobre a API de inspetor de propriedades, consulte Inspetores de propriedades em Como estender os recursos do Dreamweaver).
tag_type*
determina se o tag est vazio (como em img) ou se ele contm algo entre os tags de abertura e fechamento (como em code). Esse atributo necessrio para tags normais (no delimitados por seqncias de caracteres). Ele ignorado nos tags delimitados por seqncias de caracteres, pois esto sempre vazios. Os valores vlidos so "empty" e "nonempty".
render_contents*
determina se o contedo do tag deve aparecer na visualizao do projeto da janela do documento, ou se um cone ser mostrado. Esse atributo necessrio para os tags no-vazios (nonempty) e ignorado nos tags vazios (empty). Os tags vazios no tm contedo. Esse atributo destina-se apenas aos tags que aparecem fora de atributos; o contedo dos tags que esto dentro dos valores de atributos de outros tags no so interpretados. Os valores vlidos so "true" ou "false".
content_model*
descreve quais tipos de contedo o tag pode acomodar e onde o tag pode aparecer em um arquivo HTML. Os valores vlidos so "block_model", "head_model", "marker_model" e "script_model":
especica que o tag pode conter elementos em nvel de bloco, e que o tag pode aparecer apenas na seo body ou dentro de outros tags de contedo de corpo do texto, como div, layer ou td.
block_model como div e p, head_model
especica que o tag pode acomodar contedo de texto e aparecer apenas na seo head.
marker_model especica que o tag pode conter qualquer cdigo HTML vlido e aparecer em qualquer posio num arquivo HTML. No Dreamweaver, o validador de HTML ignora os tags que so especicados como marker_model. Contudo, o validador no ignora o contedo desse tag; por isso, embora o tag possa aparecer em qualquer lugar, o contedo deste pode resultar em um HTML invlido em alguns locais. Por exemplo: um texto simples no pode aparecer (fora de um elemento head) na seo head de um documento, por isso, no possvel colocar um tag marker_model que contenha texto simples na seo head. Para colocar um tag personalizado contendo texto simples na seo head, especique o modelo de contedo do tag como head_model em vez de marker_model. Utilize marker_model nos tags que precisam ser exibidos linearmente (dentro de um elemento em nvel de bloco, como p ou div) por exemplo: em um pargrafo). Se o tag deve ser exibido como um pargrafo individual, com quebras de linhas antes e depois dele, no utilize esse modelo.
578
Captulo 22
script_model permite que o tag seja colocado em qualquer posio entre os tags HTML de abertura e fechamento de um documento. Quando o Dreamweaver encontrar um tag com esse modelo, todo o contedo do tag ser ignorado. Utilizado para markups de outros fabricantes (como determinados tags ColdFusion), que o Dreamweaver no deve analisar.
especica um delimitador que marca o incio de um tag delimitado por seqncias de caracteres. Os tags delimitados por seqncias de caracteres podem aparecer em qualquer posio no documento, onde pode haver um comentrio. O Dreamweaver no analisa tags, nem decodica entidades ou URLs entre start_string e end_string. Esse atributo necessrio se for especicado end_string.
start_string
especica um delimitador que marca o nal de um tag delimitado por seqncias de caracteres. Esse atributo necessrio se for especicado start_string.
end_string detect_in_attribute indica se deve ser ignorado tudo que estiver entre start_string e end_string (ou entre os tags de abertura e fechamento, se estas
seqncias no forem denidas), mesmo quando estas seqncias aparecerem dentro de nomes ou valores de atributos. Geralmente, esse atributo deve ser denido como "true", no caso de tags delimitados por seqncias de caracteres; o padro "false". Por exemplo: os tags ASP aparecem s vezes dentro de valores de atributos e podem conter aspas ("); como essa especicao de tag ASP dene detect_in_attribute="true", o Dreamweaver ignora esses tags, inclusive as aspas internas, quando aparecerem dentro de valores de atributos.
parse_attributes* indica se os atributos do tag sero analisados. Se for denido como "true" (o padro), o Dreamweaver analisar os atributos; se for denido como "false", o Dreamweaver ir ignorar tudo at o prximo sinal de maior que aparecer fora das aspas. Por exemplo: esse atributo deve ser denido como "false" para um tag cfif (como em <cfif a is 1>, que o Dreamweaver no poderia analisar como um conjunto de pares nome/valor de atributos). icon especica o caminho e o nome do arquivo do cone associado ao tag. Esse atributo necessrio para os tags vazios e no-vazios, cujo contedo no seja exibido na visualizao do projeto da janela do documento. icon_width icon_height
Contedo
Nenhum
Exemplo
579
Como os tags personalizados aparecem na visualizao do projeto A aparncia dos tags, na visualizao do projeto da janela do documento, depende dos valores dos atributos tag_type e render_contents do tag tagspec. Se o valor de tag_type for "empty", o cone especicado no atributo icon aparecer. Se o valor de tag_type for "nonempty", mas o valor de render_contents for "false", o cone aparecer da mesma forma que em um tag vazio. Por exemplo: o tag happy, denido acima, dever aparecer no HTML da seguinte maneira
<p>This is a paragraph that includes an instance of the <code>happy</code> tag (<happy>Joe</happy>).</p>
Observe que, quando render_contents denido como "false" na especicao do tag, o contedo do tag happy (a palavra Joe) no ser interpretado; em vez disso, os tags de abertura e fechamento, bem como seu contedo, sero exibidos como um nico cone. No caso dos tags no-vazios que tm um valor de render_contents denido como "true", o cone no aparece na visualizao do projeto, em vez disso, ser mostrado o contedo entre os tags de abertura e fechamento (por exemplo: o texto entre os tags em <mytag>Este o contedo entre os tags de abertura e fechamento</ mytag>). Se a opo Exibir > Elementos invisveis estiver ativada, o contedo ser realado utilizando a cor para os tags de outros fabricantes especicada nas preferncias de realce. Observe que o realce se aplica apenas aos tags denidos nos arquivos de banco de dados de tags.
Para alterar a cor de realce dos tags de outros fabricantes:
1 2
Escolha Editar > Preferncias e, em seguida, selecione a categoria Realce. Clique na caixa de cores Tags de outros fabricantes, para exibir o seletor de cores. Escolha uma cor e, em seguida clique em OK, para fechar a caixa de dilogo Preferncias. Para obter mais informaes sobre a escolha de uma cor, consulte Como trabalhar com as cores na pgina 91.
580
Captulo 22
Sobre as ASP As ASP (Active Server Pages) da Microsoft constituem uma maneira de combinar HTML, scripts gravados em JavaScript ou VBScript, e controles ActiveX, a m de trabalhar dinamicamente com HTML. Quando um navegador solicita uma pgina ASP ao Microsoft Web Server, o servidor interpreta o cdigo ASP e envia o HTML resultante ao navegador. O navegador receber apenas o HTML, mas no o cdigo ASP. Para obter mais informaes sobre as ASP, consulte as pginas de viso geral das ASP da Microsoft, conforme a descrio em Recursos de tecnologias da Web e HTML na pgina 25. Um bloco de cdigo ASP inicia com <% e termina com %>. Se Exibir > Elementos invisveis estiver selecionado, e Tags de markup do servidor for escolhido nas preferncias de elementos invisveis, o Dreamweaver exibir um cone de ASP na visualizao do projeto da janela do documento, para marcar o local do cdigo ASP. Caso contrrio, o Dreamweaver no exibir nada para marcar a posio do cdigo. Para obter mais informaes sobre os elementos invisveis, consulte Sobre os elementos invisveis na pgina 164. Sobre as JSP As JSP (JavaServer Pages) da Sun fornecem um modo com base em Java para trabalhar dinamicamente com um contedo HTML ou um outro da Web. Quando um navegador solicita uma pgina JSP de um servidor habilitado para JSP, este interpreta o cdigo JSP e envia o HTML resultante para o navegador. O navegador receber apenas o HTML, mas no o cdigo JSP. Para obter mais informaes sobre JSP, consulte a Pgina JSP da Sun, conforme a descrio em Recursos de tecnologias da Web e HTML na pgina 25. Um bloco de cdigo JSP inicia com <% e termina com %>. Como o JSP utiliza os mesmos delimitadores que o ASP, o Dreamweaver exibe um cone de ASP para o cdigo JSP. Sobre o PHP PHP (que signica Hypertext Preprocessor) uma linguagem de criao de scripts de servidor. Quando um navegador solicita uma pgina PHP de um servidor habilitado para PHP, este interpreta o cdigo PHP e envia o HTML resultante para o navegador. O navegador receber apenas o HTML, mas no o cdigo PHP. Para obter mais informaes sobre PHP, consulte as Pginas PHP, conforme a descrio em Recursos de tecnologias da Web e HTML na pgina 25. Um bloco de cdigo PHP inicia com <? e termina com ?>. Se a opo Exibir > Elementos invisveis estiver selecionada, e a opo Tags de markup do servidor for escolhida nas preferncias de elementos invisveis, o Dreamweaver exibir um cone de PHP na visualizao do projeto da janela do documento, para marcar o local do cdigo PHP. Caso contrrio, o cdigo no aparecer na visualizao do projeto. Para obter mais informaes sobre os elementos invisveis, consulte Sobre os elementos invisveis na pgina 164.
581
Sobre a ColdFusion A ColdFusion da Allaire uma outra maneira de tratar as pginas dinamicamente. Quando um navegador solicita uma pgina ColdFusion de um servidor, este passa-a ao software ColdFusion Server, que interpreta os scripts na pgina e envia o HTML resultante para o navegador. O navegador receber apenas o HTML, mas no o cdigo ColdFusion. Para obter mais informaes sobre a ColdFusion, consulte a Pgina do produto ColdFusion, conforme a descrio em Recursos de tecnologias da Web e HTML na pgina 25. O Dreamweaver reconhece aproximadamente 50 tags ColdFusion; consulte o arquivo ColdFusion.xml, na pasta Conguration/ThirdPartyTags, para obter mais detalhes. Se a opo Exibir > Elementos invisveis estiver selecionada, e a opo Tags de markup do servidor for escolhida nas preferncias de elementos invisveis, o Dreamweaver exibir um cone de ColdFusion na visualizao do projeto da janela do documento, para marcar o local dos tags ColdFusion para os quais render_contents foi denido como "false" (no ColdFusion.xml). Caso contrrio, o Dreamweaver no exibir nada para marcar a posio do cdigo. Para obter mais informaes sobre os elementos invisveis, consulte Sobre os elementos invisveis na pgina 164. Como impedir a regravao de tags de outros fabricantes O Dreamweaver corrige determinados tipos de erros em HTML (para obter mais detalhes, consulte Preferncias de regravao de cdigo na pgina 377). Como padro, o Dreamweaver no altera o HTML nos arquivos com determinadas extenses de nome de arquivo, inclusive .asp (ASP), .cfm (ColdFusion), jsp (JSP) e .php (PHP). Esse padro denido para que o Dreamweaver no modique acidentalmente o cdigo contido nos tags de outros fabricantes. O comportamento de regravao padro do Dreamweaver pode ser alterado, para que o programa regrave o HTML quando esses arquivos forem abertos; podem ser adicionados outros tipos de arquivos lista daqueles que o Dreamweaver no regravar. Observe tambm que o Dreamweaver codica determinados caracteres especiais (substituindo-os por valores numricos) quando estes so digitados no inspetor de propriedades. Normalmente, melhor deixar que o Dreamweaver execute essa codicao, porque assim mais provvel que os que os caracteres especiais sejam exibidos de modo correto em todas as plataformas e navegadores. Contudo, devido possibilidade de interferncia dessa codicao em tags de outros fabricantes, talvez seja conveniente alterar o comportamento de codicao do Dreamweaver, quando voc estiver trabalhando com arquivos que contm tags de terceiros.
582
Captulo 22
1 2
Escolha Editar > Preferncias, e selecione Regravao de cdigo. Siga um dos procedimentos abaixo:
Exclua uma ou mais extenses da lista de extenses. Cancele a seleo da opo Nunca regravar o cdigo: Em arquivos com as
extenses. O cancelamento da seleo dessa opo permite que o Dreamweaver regrave o HTML em todos os tipos de arquivos.
Para adicionar tipos de arquivos que o Dreamweaver no deve regravar:
1 2
Escolha Editar > Preferncias, e selecione Regravao de cdigo. Certique-se de que a opo Nunca regravar o HTML: Em arquivos com as extenses esteja selecionada e adicione as novas extenses de arquivos lista no campo de texto. Se o novo tipo de arquivo no aparecer no menu pop-up de tipos de arquivos, na caixa de dilogo Arquivo > Abrir, talvez seja conveniente adicion-lo ao arquivo Conguration/Extensions.txt. Para obter mais detalhes, consulte Como alterar o tipo de arquivo padro na pgina 554.
1 2
Escolha Editar > Preferncias, e selecione Regravao de cdigo. Cancele uma ou ambas as opes de Caracteres especiais.
Para obter informaes sobre as outras preferncias de regravao de cdigo, consulte Preferncias de regravao de cdigo na pgina 377.
583
584
Captulo 22
APNDICE A
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Atalhos de teclado
possvel obter uma lista imprimvel com os atalhos de teclado, no Centro de suporte do Dreamweaver en (www.macromedia.com/support/dreamweaver/ documentation.html).
Menu Arquivo
Ao Novo documento Abrir um arquivo HTML No Windows Control+N Control+O, ou arraste o arquivo da janela do Explorer ou do site para a janela do documento Control+Shift+O Control+W Control+S Control+Shift+S Shift + F8 Control+Q No Macintosh Command+N Command+O
585
Menu Editar
Ao Desfazer Refazer Recortar No Windows Control+Z Control+Y ou Control+Shift+Z Control+X ou Shift+Del Control+C ou Control+Ins Control+V ou Shift+Ins Delete Control+A Control+Shift+< Control+Shift+> Control+F F3 Control+Shift+8 Control+Shift+9 Control+ Control+E Control+U No Macintosh Command+Z Command+Y ou Command+Shift+Z Command+X ou Shift+Del Command+C ou Command+Ins Command+V ou Shift+Ins Delete Command+A Command+Shift+< Command+Shift+> Command+F Command+G Command+Shift+8 Control+Shift+9 Command+ Command+E Command+U
Copiar
Colar
Limpar Selecionar tudo Selecionar o tag-pai Selecionar o filho Localizar e substituir Localizar o prximo Recuar o cdigo Remover o recuo do cdigo Ajustar as chaves Iniciar o editor externo Preferncias
Visualizaes de pgina
Para alternar a exibio de Visualizao padro Visualizao de layout Barra de ferramentas No Windows Control+Shift+F6 Control+F6 Control+Shift+T No Macintosh Command+Shift+F6 Command+F6 Command+Shift+T
586
Apndice A
Edio do cdigo
Ao Alternar para a visualizao do projeto Abrir o Quick Tag Editor Selecionar o tag-pai Ajustar as chaves Selecionar tudo Copiar Localizar e substituir Localizar o prximo Substituir Colar Recortar Refazer Desfazer Alternar o ponto de interrupo Selecionar a linha acima Selecionar a linha abaixo Selecionar o caractere da esquerda No Windows Control+tecla de tabulao Control+T Control+Shift+< Control+ Control+A Control+C Control+F F3 Control+H Control+V Control+X Control+Y Control+Z Control+Alt+B Shift+seta acima Shift+seta abaixo Shift+seta esquerda No Macintosh Option+tecla de tabulao Command+T Command+Shift+< Command+ Command+A Command+C Command+F Command+G Command+H Command+V Command+X Command+Y Command+Z Command+Option+B Shift+seta acima Shift+seta abaixo Shift+seta esquerda
Atalhos de teclado
587
Ao Selecionar o caractere da direita Ir para a pgina acima Ir para a pgina abaixo Selecionar a pgina acima Selecionar a pgina abaixo Selecionar a palavra esquerda Selecionar a palavra direita Ir para o incio da linha Ir para o fim da linha Ir para o incio do cdigo Ir para o fim do cdigo Selecionar at o incio do cdigo Selecionar at o fim do cdigo
Control+Shift+seta esquerda Command+Shift+seta esquerda Control+Shift+seta direita Home End Control+Home Control+End Control+Shift+Home Control+Shift+End Command+Shift+seta direita Home End Command+Home Command+End Command+Shift+Home Command+Shift+End
588
Apndice A
Ao
No Windows
Nota: Alguns atalhos de formatao de texto no provocam qualquer efeito durante o trabalho nos editores de cdigo.
Atalhos de teclado
589
Selecione a tabela (com o cursor dentro Control+A da mesma) Mover at a prxima clula Mover at a clula anterior Inserir uma linha (antes da linha atual) Adicionar uma linha ao final da tabela Excluir a linha atual Inserir uma coluna Excluir uma coluna Mesclar as clulas selecionadas da tabela Dividir as clulas da tabela Atualizar o layout da tabela (forar um redesenho, se estiver no modo edio mais rpida de tabelas) Tecla de tabulao Shift+tecla de tabulao Control+M Tecla de tabulao na ltima clula Control+Shift+M Control+Shift+A Control+Shift+ - (hfen) Control+Alt+M Control+Alt+S Control+barra de espao
590
Apndice A
Selecionar a prxima moldura ou conjunto de molduras Selecionar a moldura ou conjunto de molduras anterior Selecionar o conjunto-pai de molduras Selecionar a primeira moldura-filha ou conjunto-filho de molduras
Adicionar uma nova moldura ao conjunto Enquanto mantm a tecla Alt de molduras pressionada, arraste a borda da moldura Adicionar uma nova moldura ao conjunto Enquanto mantm as teclas de molduras utilizando o mtodo de Alt e Control pressionadas, empurramento arraste a borda da moldura
Atalhos de teclado
591
Shift+F9 Delete
592
Apndice A
Clique duas vezes na imagem Clique duas vezes na imagem Controlclique duas vezes na imagem Mantenha a tecla Command pressionada enquanto clica duas vezes na imagem
Arrastar e soltar para criar um hyperlink a Selecione o texto, imagem ou partir de um documento objeto e, em seguida, mantendo a tecla Shift pressionada, arraste a seleo at um arquivo na janela do site Arrastar e soltar para criar um hyperlink utilizando o inspetor de propriedades Selecione o texto, imagem ou objeto e, em seguida, arraste o cone do indicador de arquivos do inspetor de propriedades at um arquivo na janela do site. Clique duas vezes no link enquanto mantm pressionada a tecla Control Shift+F8 Control+F8
Abrir o documento contendo o link no Dreamweaver Verificar os links selecionados Verificar os links no site inteiro
Atalhos de teclado
593
594
Apndice A
Mapa do site
Ao Visualizar os arquivos do site Atualizar o painel Local Tornar raiz Vincular a um arquivo existente Alterar o link Remover o link Mostrar/ocultar o link Mostrar os ttulos das pginas Renomear o arquivo Aumentar o zoom do mapa do site Reduzir o zoom do mapa do site No Windows F5 Shift+F5 Control+Shift+R Control+Shift+K Control+L Delete Control+Shift+Y Control+Shift+T F2 Control++ (sinal de adio) Control+ - (hfen) No Macintosh F5 Shift+F5 Command+Shift+R Command+Shift+K Command+L Delete Command+Shift+Y Command+Shift+T no disponvel Command++ (sinal de adio) Command+ - (hfen)
Atalhos de teclado
595
Arraste o arquivo da janela do Arraste o arquivo do Explorer ou do site para a Localizador ou da janela do janela do documento. site para a janela do documento Control+Alt+I Control+Alt+T Control+Alt+F Control+Alt+D Control+Alt+A Command+Option+I Command+Option+T Command+Option+F Command+Option+D Command+Option+A
Imagem Tabela Filme Flash Filme Shockwave Director ncora com nome
Painel Histrico
Ao Abrir a paleta de histrico Iniciar/parar o comando de gravao Executar o comando gravado No Windows F9 Control+Shift+X Control+P No Macintosh F9 Command+Shift+X Command+P
596
Apndice A
Atalhos de teclado
597
B C D E F G
* Justificar no centro
Copiar
Duplicar Iniciar o editor externo Localizar
Inserir filme Shockwave Retirar os arquivos ou Director pastas selecionadas * Inserir filme Flash Mostrar/ocultar as grades * Inserir a imagem * * * Encaixar na grade (alternar) * * *
Localizar novamente * (apenas no Macintosh) Substituir Itlico (alternar) Propriedades da pgina * Criar link * Mostrar invisveis (alternar) Inspetor de propriedades (alternar) * Remover o link
H I J
K L M N
Nova janela (no Nova pgina (apenas * Windows) no Windows) Nova pgina (no Macintosh) Abrir
Abrir na moldura *
O P Q
Sair
598
Apndice A
Caractere do teclado
R S T
Salvar
Quick Tag Editor
Dividir a clula da tabela * Adicionar objeto linha de tempo Devolver os arquivos ou pastas selecionadas * * Parar todos os plug-ins * * *
Mostrar os ttulos das Inserir tabela pginas no mapa do site Colocar os arquivos ou pastas selecionadas * Exibir o contedo do cabealho Iniciar o comando de gravao Mostrar/ocultar o link Refazer * *
Preferncias
V W X Y Z 0 (zero)
Desfazer
Definir o formato do pargrafo como Nenhum
1 2 3 4 5 6 7 8 9
Aplicar o Cabealho 1 * ao pargrafo Aplicar o Cabealho 2 ao pargrafo Aplicar o Cabealho 3 ao pargrafo Aplicar o Cabealho 4 ao pargrafo Aplicar o Cabealho 5 ao pargrafo Aplicar o Cabealho 6 ao pargrafo * * * * * * * * * * *
* * * * * * * * *
* * * * * * * * *
Atalhos de teclado
599
Caractere do teclado
Reduzir o zoom do mapa do site Ajustar janela Remover o recuo (Mover para trs) Recuo (Avanar)
* *
Tornar as larguras das * camadas iguais (Camadas) Tornar as alturas das camadas iguais (Camadas) *
]e}
* * * * * * *
Selecionar o tag-filho * Selecionar o tag-pai * * * * * Inserir um espao no-separvel (no Windows) (Option+ barra de espao no Macintosh) * * * * * * *
* * * * * * * *
600
Apndice A
Tecla de funo
Nenhum modificador
Shift
F1
Ajuda de Como Referncia utilizar o Dreamweaver Camadas Localizar novamente (apenas no Windows) Ocultar/ mostrar os painis flutuantes Arquivos do site * Molduras
Painel Referncia * *
F2 F3
* *
* *
Painel * Comportament os Minimizar Fechar as todas as janelas janelas (apenas no Windows) Atualizar o painel Local *
F4
F5 F6
* *
F7 F8
* *
* *
* *
F9
* * *
* * *
Atalhos de teclado
601
602
Apndice A
NDICE REMISSIVO
A ao Abrir a janela do navegador 492 ao Alterar a propriedade 481 ao Arrastar a camada 486 ao Chamar o JavaScript 480 ao Controlar o Shockwave ou Flash 485 ao Denir a imagem da barra de navegao 496 ao Denir a mensagem de status 499 ao Denir o texto da camada 498 ao Denir o texto da moldura 497 ao Denir o texto do campo de texto 500 ao Executar a linha de tempo 505 ao Executar o som 494 ao Ir do menu de salto 491 ao Ir para a URL 490 ao Ir para o quadro da linha de tempo 504 ao Mensagem pop-up 494 ao Menu de salto 491 ao Mostrar/ocultar as camadas 501 ao Parar a linha de tempo 505 ao Permutar a imagem 503 ao Pr-carregar as imagens 495 ao Restaurar a imagem permutada 504 ao Validar o formulrio 506 ao Vericar o navegador 482 ao Vericar o plug-in 483 aes 469 como alterar em comportamentos 476 como controlar as linhas de tempo 468 como criar 477 como escolher no painel Comportamentos 473 compatibilidade com os navegadores 478 denidas 469 includas com o Dreamweaver 478, 478507 Consulte tambm aes individuais pelo nome Active Server Pages (ASP) 581 como editar 383 sobre 581 adicionar links 242
Ajuda 14 atalhos 597 Centro de suporte do Dreamweaver 16 Grupo de discusso do Dreamweaver 16 lbuns de fotograas na Web, criar 322 alinhamento direita (inspetor de propriedades da imagem) 294 alinhamento esquerda (inspetor de propriedades da imagem) 294 alinhamento Alto do texto (inspetor de propriedades da imagem) 294 alinhamento da linha de base (inspetor de propriedades da imagem) 294 alinhamento Embaixo (inspetor de propriedades da imagem) 294 alinhamento No alto (inspetor de propriedades da imagem) 294 alinhamento No meio (inspetor de propriedades da imagem) 294 alinhamento No meio absoluto (inspetor de propriedades da imagem) 294 alinhamento O mais abaixo (inspetor de propriedades da imagem) 294 alinhamento padro do navegador (inspetor de propriedades da imagem) 294 alongamento automtico (visualizao de layout) 189 amostras, cor 91 ncoras com nome como criar 394 ncoras, com nome 394 animao editar animaes do Fireworks 320 animaes ao longo de um caminho complexo 462 como aplicar a objetos 466 como copiar e colar 465 como criar 461 como melhorar 467 linhas de tempo 458 viso geral 19
603
aplicativos, outros, como utilizar com o Dreamweaver 94 rea de trabalho 74 arquivo de registro de correes de HTML 380 arquivo menus.xml sintaxe 562 arquivo SourceFormat.txt 374 arquivos como colocar 152 como efetuar o download 151 como efetuar o upload 152 como exibir na janela do site 121 como gerenciar 114 como obter do site remoto 151 como procurar 280 como sincronizar os sites local e remoto 154 como transferir com FTP 132 texto 158 tipos, padro 554 arquivos de correio eletrnico 158 arquivos de texto como abrir 158 arquivos dependentes como colocar 153 como mostrar e ocultar 128 como obter 152 arquivos do Microsoft Excel, como importar 198 arquivos HTML como importar 159 arquivos ocultos, como mostrar e ocultar 128 arquivos rfos 546 (ASP) tags, como personalizar anlise e aparncia 576 ASP. Consulte Active Server Pages atalhos de teclado 585, 585600 como editar 95 como editar, no arquivo menus.xml 561 atalhos, teclado. Consulte atalhos de teclado atributo class 272 atributo usemap 296 atributos buscas 282 em pers de navegadores 571 Consulte tambm tags udio. Consulte som
B barra de ferramentas ttulos dos documentos, como alterar 160 barra de navegao como adicionar imagens 405 como criar 404 como exibir horizontalmente na pgina 406 como exibir verticalmente na pgina 406 como inserir em uma tabela 406 como modicar os elementos 407 estados da imagem 404 barra de status como denir o texto (comportamento) 499 menu pop-up Tamanho da janela 76 preferncias 79 viso geral 77 bibliotecas do Dreamweaver, exportar do Fireworks 311 borda da tabela cores 204 largura 204 bordas como adicionar a uma tabela 203 em uma moldura 232 tabelas, como remover 197 boto Carregar a consulta 285 boto Cor padro 91 boto Cores do sistema 91 boto Editar (inspetor de propriedades da imagem) 293 boto Executar novamente 170 boto Ir, como associar a um menu de salto 491 boto Riscado (cor padro) 91 boto Roda de cores (cor do sistema) 91 boto Salvar a consulta 285 botes botes Enviar, grcos 536 botes Ir 491 como criar botes de formulrio 534 botes de opo 529 botes Enviar 536 C cabeote de execuo 459 caixa de dilogo Boto Flash 329 caixa de dilogo Denir o estilo HTML 264 caixa de dilogo Inserir a barra de navegao 405 caixa de dilogo Inserir ncora com nome 394
604
ndice remissivo
caixa de dilogo Inserir link de correio eletrnico 396 caixa de dilogo Inserir o menu de salto 402 caixa de dilogo Parmetros 348 caixa de dilogo Texto Flash 332 caixa de dilogo Vericador de links 547 caixa de dilogo Vincular a folha de estilos externa 270 caixas de dilogo, como personalizar 568 caixas de seleo 529 camadas 439, 439468 arrastveis 488 atalhos 592 como alinhar 447 como alterar a ordem de empilhamento 453 como alterar a visibilidade com o painel Camadas 454 como alterar a visibilidade com os comportamentos 501 como aninhar 443 como ativar 449 como converter em tabelas 455 como converter para navegadores 3.0 457 como criar 441 como desenhar diversas 441 como encaixar na grade 448 como evitar sobreposies 456 como inserir 441 como manipular 445 como mover 447 como posicionar 449 como redimensionar 446 como selecionar 445 como selecionar mltiplas 452 marcadores, como exibir 441 na criao de tabelas 455 pontos de ancoragem 164 preferncias 444 propriedades 449 propriedades de mltiplas 452 viso geral 439 visibilidade 454 camadas CSS exportar do Fireworks 310 caminhos absolutos 386 relativos a documento 387 relativos raiz 388
Caminhos absolutos 386 caminhos relativos a documento como denir 391 sobre 387 caminhos relativos raiz como denir 391 preferncia Visualizar utilizando o servidor local 389 sobre 388 caminhos relativos raiz do site Consulte caminhos relativos raiz campo de texto Imagem cambivel 300 campo Diretrio do host 134 campo Endereo HTTP 109, 110 campo Host do FTP 133 campo Nome do site 109, 110 campo Pasta raiz local 109, 110 campos campos de arquivos 528 como criar campos de texto 524 como criar campos ocultos 528 como efetuar o upload de arquivos para um servidor 528 sobre campos de formulrio 524 campos de texto, como denir o texto com comportamentos 500 canal de comportamentos nas linhas de tempo 459 caracteres especiais como inserir 254 viso geral 254 caracteres, especiais 254 categorias preferncias 92 propriedades 238 clula do cabealho, como formatar 205 clulas Consulte clulas de layout, clulas da tabela clulas da tabela clulas do cabealho, como designar 205 como copiar e colar 212 como dividir 210 como formatar 204 como mesclar 210 cor de fundo, como adicionar 205 imagem de fundo, como adicionar 205 Consulte tambm clulas de layout, tabelas
clulas de layout 178 alinhamento 187 como desenhar 179 como formatar 187 como limpar as alturas 184 como mover 185 como redimensionar 185 como selecionar 185 cor de fundo 187 preferncias 194 realce 194 sem quebra autom. de linha 187 Centro de suporte do Dreamweaver 16 (CFML) tags, como personalizar anlise e aparncia 576 CFML como editar os tags CFML 383 CFML. Consulte ColdFusion Markup Language (CGI) Common Gateway Interface scripts 538 CGI material de referncia 25 chaves, como ajustar 367 codicaes 93 cdigo como editar com o BBEdit 382 preferncias de formatao 374 cdigo-fonte HTML buscas de tags 282 como copiar e colar, geral 255 como editar com o BBEdit 382 como formatar nos documentos existentes 379 como gravar e editar 365 como limpar 378 como limpar o HTML do MS Word 379 como procurar 280, 282 como selecionar na janela do documento 162 como visualizar com o inspetor de cdigo 90 converso de atributos CSS 278 editores ext. 381 estilos de tags 267 estrutura 352 material de referncia 25 opes 364 perl de formatao 569 preferncias de cores de tags 374 preferncias de formatao, como denir 375
preferncias de regravao 377 referncia 358 tags, como remover 373 viso geral 351 viso geral das preferncias de formatao 374 ColdFusion Markup Language (CFML) e o Dreamweaver 360 viso geral 582 colunas de visualizao de arquivos como acessar 146 como adicionar uma coluna 147 como alterar a ordem 147 como excluir 148 como utilizar com as Design Notes 146 colunas, linhas e clulas como adicionar e remover 208 como formatar 204 cor de fundo, como adicionar 205 comando Atualizar HTML 321 Criar lbum de fotograas na Web 322 Otimizar imagem no Fireworks 317 comando Abrir 159 comando Abrir a pgina vinculada 549 comando Abrir o modelo anexado 425 comando Adicionar objeto biblioteca 430 comando Adicionar objeto linha de tempo 461 comando Adicionar quadro 461 comando Adicionar/remover o ajuste de redimensionamento da Netscape 444 comando Ajustar a posio 166 comando Alinhar com a seleo 167 comando Alterar o link no site inteiro 400 comando ncora com nome 394 comando Aplicar a formatao de origem 379 comando Aplicar o modelo pgina 422 comando Atualizar a pgina atual 425, 432 comando Atualizar as pginas 425 comando Colar como texto 252 comando Colocar 152 comando Converter as camadas em tabela 455 comando Converter tabelas em camadas 457 comando Cor 258 comando Denir como home page 128 comando Denir o esquema de cores 162 comando Desanexar do modelo 424 comando Desmarcar a regio editvel 421
606
ndice remissivo
comando Dividir as clulas 211 comando Editar a folha de estilos 271 comando Editar a lista de fontes 260 comando Editar o contedo NoFrames 234 comando Evitar sobreposies de camadas 456 comando Exportar a tabela 215 comando Formatar a tabela 206 comando Gravar o caminho da camada 462 comando Importar o HTML do Word 159, 380 comando Importar os dados da tabela 198 comando Inserir campo de imagens 535 comando Inserir dados tabulares 198 comando Limpar o HTML 378 comando Limpar o HTML do Word 379 comando Link a um arquivo existente 127 comando Link a um novo arquivo 127 comando Mesclar as clulas 210 comando Novo 158 comando Novo a partir de modelo 159, 422 comando Obter 151 comando Obter mais comportamentos 478 comando Redenir a origem 165 comando Redenir a posio 166 comando Remover a linha de tempo 465 comando Remover o quadro 461 comando Salvar 160 comando Salvar a moldura 226 comando Salvar a moldura como 226 comando Salvar como modelo 411 comando Salvar o conjunto de molduras 226 comando Salvar o conjunto de molduras como 226 comando Salvar todas as molduras 226 comando Selecionar um local mais novo 154 comando Selecionar um remoto mais novo 154 comando Vericar a ortograa 279 comando Vericar os links no site inteiro 547 comando Vericar os navegadores de destino 542 comando Visualizar no navegador 545 comando Visualizar utilizando o servidor local 389 comandos como acessar nos menus contextuais 80, 82 como criar, a partir das etapas do histrico 173 como gravar 175 como renomear 560 comandos Dividir a moldura 219 comentrios, como inserir 357 Common Gateway Interface (CGI). Consulte CGI 538
como abrir arquivos de texto 158 documentos 158 tipos de arquivos diferentes de HTML como padro 554 como abrir arquivos HTML do Word 159 Como abrir documentos vinculados 549 como abrir os arquivos no-HTML 368 preferncias 368 como adicionar extenses ao Dreamweaver 98 objeto a uma linha de tempo 461 quadros a uma linha de tempo 463 como ajustar as chaves 367 como alinhar 294 camadas 447 elementos da pgina 294 imagens de rastreamento 167 opes 294 texto 259 como analisar o cdigo 515 como aninhar 444 camadas 443 molduras 222 como aplicar as cores ao texto 242 como atualizar lista Site (painel Propriedades) 240 como atualizar os links 398 como automatizar as tarefas 168 como colar as etapas do histrico 172 como colocar arquivos em um servidor remoto 152 como combinar os painis utuantes 86 como copiar as etapas do histrico 172 como criar modelos 411 Como criar botes de opo 531 como criar cores e URLs 248 como criar novos modelos de boto Flash 335 como criar relatrios 550 como denir as propriedades do documento 160 como denir os pontos de interrupo 513 como desenhar camadas 441 clulas e tabelas de layout 179 como designar links como abrir documentos em uma nova janela 392 em documentos 391
ndice remissivo
607
como designar molduras para _blank 234 _parent 234 _self 234 _top 234 como designar os navegadores de destino atalhos 594 como converter um arquivo para se tornar compatvel com o navegador 3.0 457 pers de navegadores 571 como detectar os navegadores e plug-ins 544 como devolver e retirar arquivos 139142 como desfazer uma retirada 142 viso geral 139 como editar atalhos de teclado 95 modelos 411 objetos de boto Flash 331 propriedades 244 como editar o cdigo (visualizao de cdigo ou inspetor de cdigo) 365 como efetuar a integrao com o SourceSafe 135 como efetuar a integrao com o WebDAV 135 como efetuar o download tamanho, estimativas de tempo 549 como efetuar o upload de arquivos 152 Como estabelecer a conexo com sites remotos utilizando sistemas de controle de origem 135 como executar os objetos Flash 331 como exibir camadas 454 como organizar as visualizaes 363 contedo do head 167 elementos invisveis 164 HTML de regies editveis e bloqueadas de modelos 419 imagens de rastreamento 166 regies editveis e bloqueadas nos modelos 418 sites 119 visualizao de cdigo e visualizao do projeto 362 como exibir os elementos invisveis 164 como exportar XML, notaes de tag para 428 como exportar os estilos 274 como fazer o download comportamentos 478
como formatar o cdigo-fonte HTML como personalizar 569 preferncias 374 como gerenciar as propriedades. Consulte propriedades como gerenciar os links 398 como gravar comandos 175 como gravar o cdigo (visualizao de cdigo ou inspetor de cdigo) 365 como importar arquivos HTML do Word 159 como incorporar udio 341 como iniciar 20 como inserir caracteres especiais 254 controles ActiveX 344 datas 253 elementos de mdia 325 lmes Flash 335 lmes Shockwave 338 imagens 291 imagens cambiveis 300 miniaplicativos Java 346 objetos de boto Flash 329 objetos de texto Flash 332 objetos Generator 337 propriedades 241 server-side includes 438 como inserir propriedades. Consulte propriedades como instalar o Dreamweaver 12 como integrar o Dreamweaver com outros aplicativos 94 como localizar e substituir. Consulte como procurar como modicar propriedades da pgina 160 como obter arquivos de um servidor remoto 151 como ocultar os elementos invisveis 164 como organizar as visualizaes 363 como personalizar o Dreamweaver 553, 553583 barra do Iniciador e Iniciador 80 caixas de dilogo 568 menus 557 painel Objetos 555 princpios bsicos 94 tags, de outros fabricantes 576 como processar os formulrios 537
608
ndice remissivo
como procurar Ajuda do Dreamweaver 15 arquivos 280 atalhos 590 como salvar os padres de busca 285 expresses regulares 286 tags e atributos HTML 282 texto entre tags especcos 284 texto na fonte de HTML 282 texto nos arquivos 280 como recarregar as extenses 555 como recuar o texto 260 como redimensionar alas 295 camadas 446 clulas da tabela 207 clulas/tabelas de layout 185 elementos da pgina 295 molduras 231 como remover quadros de uma linha de tempo 463 como repetir as etapas 168 como repetir as linhas de tempo continuamente 463 como reutilizar buscas 285 itens de biblioteca 431 modelos 422 como salvar arquivos em molduras e conjuntos de molduras 225 buscas 285 documentos 160 como selecionar camadas 445 molduras e conjuntos de molduras 223 objetos na janela do documento 162 como sincronizar os sites local e remoto 154 como transferir arquivos, resoluo de problemas 152 Como utilizar o Dreamweaver com o Visual SourceSafe 136 Como utilizar os relatrios para testar um site 550 como vericar os links 546
como vincular a ncoras com nome usando o cone do indicador de arquivos 395 a documentos usando o cone do indicador de arquivos 392 a uma folha de estilos CSS externa 270 ncoras 394 documentos 391 como visualizar em navegadores atalhos 594 como visualizar nos navegadores viso geral 544 compatibilidade da camada com o Netscape 4 444 comportamentos 469, 469507 aes, como criar 477 como alterar 476 como anexar 473 como desencadear 473 como excluir 476 compatibilidade com os navegadores 478 de outros fabricantes 478 denidos 469 e formulrios 538 e imagens 304 e itens de biblioteca 434 e linhas de tempo 476 e links 407 e mdia 349 e modelos 421 conjuntos de molduras 219232 aninhadas 222 bordas 232 como designar links em 391 como nomear 227 como salvar 225 como selecionar 223 predenidos, como inserir 220 propriedades 229 Consulte tambm molduras conta-gotas 91 contedo Flash viso geral 328 contedo NOFRAMES 234 contedo, como adicionar a tabelas 197
controles ActiveX como inserir 344 como redimensionar 295 propriedades 345 viso geral 344 controles deslizantes, como criar 486 convenes 22 convenes tipogrcas 22 copiar e colar, HTML do Fireworks 309 cores aceitas pela Web 92 amostras 91 como criar propriedades de cores 248 como escolher 91 como propriedades. Consulte propriedades conta-gotas, como utilizar 91 contraste 162 fundo da moldura 233 fundo da pgina 161 padro do texto da pgina 162 texto, como alterar 242, 258 D dados tabulares, como importar 198 daltonismo 162 datas como inserir 253 depurador. Consulte depurador JavaScript depurador JavaScript 509 caixa de advertncia 510 como denir os pontos de interrupo 513 como examinar as variveis 516 como executar 509 depurao total, depurao circular, depurao parcial 515 erros de sintaxe 511 erros lgicos 512 janela 512 lista de variveis 516 depurador JS. Consulte depurador JavaScript desenho da Web, nveis de experincia no 20
Design Notes como adicionar opes de status 145 como congurar 143 como desativar 145 como executar um relatrio 150 como salvar as informaes sobre o arquivo 143 para documentos e objetos 143 para objetos de mdia 328 para os arquivos do Fireworks 148 relatrios 149 viso geral 142 dicionrio pessoal de ortograa 279 Director, como criar lmes Shockwave com o 338 documentos como abrir 158 como criar 158 como criar, com base em modelos 422 como denir as propriedades 160 como procurar 280 como salvar 160 como vericar os links 546 como visualizar nos navegadores 544 Design Notes, como utilizar em 142 modelos, como desanexar de 424 novo 158 tamanho do download, tempo 549 texto, como adicionar 252 ttulo da pgina 160 documentos HTML. Consulte documentos 158 Documentos sem ttulo 551 documentos vinculados, como abrir 549 E Editor de atalhos de teclado 95 editores Consulte editores externos editores de texto arquivos criados por 158 editores de texto. Consulte editores externos editores de texto HTML Consulte editores externos editores ext. HTML, viso geral 381 texto 381
610
ndice remissivo
editores externos BBEdit (no Macintosh), integrao com 382 Fireworks. Consulte Integrao entre Dreamweaver e Fireworks HomeSite (no Windows) 361 imagens 301 mdia 326 preferncia 312 elementos como alinhar 294 como visualizar os invisveis 587 elementos de mdia como inserir 325 parmetros 348 elementos invisveis comentrios 357 como mostrar e ocultar 164 como selecionar 162 preferncias 164 scripts 365 endereo de correio eletrnico como utilizar com o sistema de devolues e retiradas 140 entidades 254 erros de sintaxe 511 erros lgicos no cdigo JavaScript 512 erros no cdigo JavaScript 512 estilos 267 como aplicar os estilos personalizados 273 como converter em HTML 277 como criar 272 conitantes 275 em modelos 421 HTML 262 tabela de converso de CSS em markup de HTML 278 Consulte tambm folhas de estilos estilos CSS atributo class 272 atributos, como converter em HTML 278 como aplicar os personalizados 273 como criar 272 como exportar 274 seletores 272
estilos HTML como aplicar 264 como criar 265, 265266 como editar 266 como excluir 264 como exibir 264 como limpar 264 como modicar 266 como remover do painel 264 como utilizar em outros sites 266 cone de Novo estilo 266 estilos person. Consulte folhas de estilos estrutura de diretrios, site. Consulte sites evento onBlur 506 eventos como alterar em comportamentos 476 como desencadear aes 473 denidos 469 disponveis para diversos navegadores e objetos 470 Excel. Consulte arquivos Microsoft Excel, como importar exportar arquivos Fireworks para o Dreamweaver 310 Camadas CSS do Fireworks 310 itens de biblioteca do Fireworks 311 expresses regulares 286 extensibilidade comportamentos de outros fabricantes 478 JavaScript 575 viso geral 575 extenses 98 como recarregar 555 F lmes como inserir 325 lmes Flash como controlar 485 como inserir 335 como propriedades. Consulte propriedades como redimensionar 295 propriedades 336 viso geral 328 lmes MPEG como propriedades. Consulte propriedades
ndice remissivo
611
lmes QuickTime como inserir 341 como propriedades. Consulte propriedades lmes Shockwave como controlar 485 como inserir 338 como propriedades. Consulte propriedades como redimensionar 295 propriedades 338 viso geral 338 rewalls como denir o host e a porta 118 opes 133 Fireworks Design Notes no 148 folhas de estilos como editar as folhas de estilos externas 271 externas 269 viso geral 267 Consulte estilos folhas de estilos externas como criar 269 como editar 271 como vincular 269 fontes codicaes, como denir fontes para 93 como alterar as caractersticas 257 como alterar as combinaes 260 formatos de arquivos, imagem 289 formulrios botes Enviar 536 campo de senha 524 campos, como validar 506 como adicionar a um documento 522 como adicionar diversos objetos 536 como criar 522 como criar campos de arquivos 528 como inserir tabelas 537 como processar 537 comportamentos, como utilizar com 538 criao de scripts do servidor 538 criao de scripts pelo cliente 537 menus de salto, como criar 402 objetos, como adicionar 524 viso geral 519 fotograas 289
FTP como determinar um diretrio do host 134 como estabelecer a conexo a um servidor da Web 132 como transferir arquivos com 132 registro 152 resoluo de problemas 138 fundo imagem e cor da pgina 161 transparncia no 161 G grade como encaixar as camadas na 448 como guia 165 como mostrar 183, 448 encaixar na 183 espaamento 183 grcos Consulte imagens Grupo de discusso do Dreamweaver 16 guia Informaes bsicas (Design Notes) 144 guia Todas as informaes (Design Notes) 144 guias visuais imagens de rastreamento 166 rguas 165 viso geral 165 H home page, como denir 128 HomeSite (no Windows) 361 hr (rgua horizontal), como inserir 261 HTML atualizar HTML do Fireworks colocado no Dreamweaver 321 copiar e colar do Fireworks para o Dreamweaver 309 inserir do Fireworks no Dreamweaver 308 HTML do Microsoft Word como importar 379 como limpar 379 HTML do Word. Consulte HTML do Microsoft Word
612
ndice remissivo
I cone de Abrir a folha de estilos 270 imagem espaadora 194 imagens atalhos 593 como alinhar 259 como alterar o arquivo de origem com as linhas de tempo 464 como aplicar comportamentos a 304 como editar 301 como inserir 291 como inserir na visualizao de layout 183 como permutar (comportamento) 503 como pr-carregar (comportamento) 495 como propriedades. Consulte propriedades como redimensionar visualmente 295 como restaurar as permutadas (comportamento) 504 editores de imagens externos 301 em tabelas 198 formatos, com suporte 289 mapas de imagens 296 propriedades 292 redimensionamento 295 imagens cambiveis 299 como criar 300 como criar um link 300 como testar 300 imagens de rastreamento 166 imagens espaadoras 192 preferncias 192 imagens GIF como imagem de rastreamento 166 utilizaes de 289 imagens JPEG como imagem de rastreamento 166 utilizaes de 289 imagens PNG como imagem de rastreamento 166 utilizaes de 289 ndice, Ajuda 15 informaes do servidor da Web 132 Iniciador barra do Iniciador 79 Iniciador e barra do Iniciador botes padro 77 como personalizar 80
Iniciar e editar, preferncias 314 iniciar o Fireworks a partir do Dreamweaver. Consulte Integrao entre Dreamweaver e Fireworks inserir HTML do Fireworks no Dreamweaver 308 imagens do Fireworks no Dreamweaver 308 inspetor de cdigo como abrir 363 janela do documento, como alternar para 363 inspetor de imagens 296 inspetor de propriedades como ajustar os links rompidos 548 como exibir 85 como expandir 85 imagens 292 pontos ativos 297 propriedades dos controles ActiveX 345 propriedades dos lmes Flash 336 propriedades dos lmes Shockwave 338 propriedades dos itens de biblioteca 436 propriedades dos miniaplicativos Java 347 propriedades dos plug-ins do Netscape Navigator 342 inspetores atalhos 597 como abrir/fechar com a barra do Iniciador 79 inspetor de imagens 296 inspetor de propriedades 85 Consulte tambm painis integrao com o BBEdit (no Macintosh) 382 integrao com o SourceSafe 135 integrao com o WebDAV 135 integrao entre Dreamweaver e Fireworks atualizar HTML do Fireworks 321 comando Otimizar imagem no Fireworks 317 criar lbuns de fotograas na Web 322 editar animaes do Fireworks 320 exportar Camadas CSS 310 exportar itens de biblioteca Dreamweaver 311 iniciar e editar imagens do Fireworks 315 iniciar e editar tabelas do Fireworks 316 iniciar e otimizar imagens do Fireworks 317 inserir arquivos do Fireworks 307 Notas de Design 313 preferncia de editor externo 312 preferncias Iniciar e editar 314 redimensionar imagens do Fireworks 319
ndice remissivo
613
integrao entre Fireworks e Dreamweaver. Consulte Integrao entre Dreamweaver e Fireworks interatividade 19 introduo ao Dreamweaver 20 itlico 257 itens de biblioteca 429436 como adicionar s pginas 431 como alterar a cor de realce 430 como criar 429 como editar 431 como editar os comportamentos em 434 como excluir 433 como propriedades. Consulte propriedades como tornar editveis os itens de documentos 434 preferncias 430 propriedades 436 viso geral 429 itens de biblioteca, exportar do Fireworks 311 J janela do documento barra de ttulo 76 barra do Iniciador 77 como abrir documentos 158 como executar os plug-ins do Navigator 343 como procurar texto 280 como redimensionar 77 como selecionar os elementos 162 inspetor de cdigo, como alternar para 363 menu pop-up Tamanho da janela 76 molduras na 225 princpios bsicos 76 seletor de tags 76 tamanho da pgina e tempo de download 76 janela do site comando Colocar 152 comando Obter 151 como alterar a exibio 120 como exibir os sites locais 119 como procurar arquivos 130 como procurar texto 280 mapas de sites 120 opes da barra de ferramentas 115 princpios bsicos 119 viso geral 114 visualizao do mapa do site 115 visualizao dos arquivos do site 115
janelas atalhos 597 Consulte tambm inspetores, painis JavaScript aes 470 alertas 494 arquivos 158 como estender os recursos do Dreamweaver 575 como executar 480 como inserir os scripts 365 JavaServer Pages (JSP) 581 JSP (JavaServer Pages) 581 L layout de pgina Consulte visual. de layout, modelos layout, planejamento 106 Consulte visual. de layout, modelos linhas de tempo atalhos 592 cabeote de execuo 459 caminhos complexos 462 como adicionar e remover quadros 463 como adicionar objetos s 461 como alterar as propriedades das camadas 464 como alterar o arquivo de origem da imagem 464 como anexar um comportamento 476 como controlar com os comportamentos 468 como criar 461 como executar automaticamente 463 como executar e parar utilizando os comportamentos 505 como modicar 463 como repetir continuamente 463 dicas de animao 467 em modelos 421 mltiplas 465 quadros primrios 461
614
ndice remissivo
links a ncoras 394 a folhas de estilos 269 a um documento 390 arquivo de cache 398 atalhos 593 como abrir a origem 399 como ajustar 547 como alterar as molduras com 233 como alterar no site inteiro 400 como aplicar seleo 242 como atualizar 398 como designar 390 como remover 399 como testar 546 como vericar 546 mapa do site 399 relativos a documento 391 relativos raiz do site 391 links de correio eletrnico como alterar 400 como criar 396, 397 links de scripts como alterar 400 como criar 397 links externos 546 links nulos como alterar 400 como criar 397 links rompidos 546 lista de variveis 516 lista Favoritos (painel Propriedades). Consulte propriedades 241 lista Site como atualizar 240 listas como criar 256 listas de rolagem 532 listas no-ordenadas, como criar 256 M Macromedia Director, como criar lmes Shockwave com o 338 macros (como criar comandos) 173 manipuladores de eventos. Consulte eventos
Manual Como utilizar o Dreamweaver 14 mapa de percurso (onde iniciar) 20 mapas de bits, como redimensionar 295 Consulte tambm imagens mapas de imagens como criar para o cliente 296 como selecionar vrios pontos ativos 298 pontos ativos 296 viso geral 296 mapas de imagens do servidor 296 mapas de sites atalhos 595 comando Atualizar o local 128 comando Denir como home page 128 comando Link a um arquivo existente 127 comando Link a um novo arquivo 127 como adicionar arquivos ao site 127 como alterar os links nos 399 como atualizar aps as alteraes 128 como editar as pginas 126 como exibir 120 como exibir uma ramicao dos 129 como expandir uma ramicao 130 como marcar os arquivos como ocultos 129 como mostrar os arquivos dependentes nos 129 como reduzir uma ramicao 130 como remover os links nos 399 como renomear as pginas nos 127 como salvar como um arquivo de imagem 130 como selecionar vrias pginas nos 126 links 399 mostrar os arquivos ocultos 129 opo Exibir os arquivos dependentes 129 opo Mostrar os ttulos das pginas 127 marcadores de elementos invisveis 164 material de referncia 25 menu cabealho da coluna 191 menu Comandos, como editar 558 menu pop-up como criar 533 menu pop-up Tamanho da janela 76 menus contextuais 80, 82 como personalizar 559 menus de atalhos. Consulte menus contextuais
ndice remissivo
615
menus de salto 401 botes Ir 491 botes Ir, como adicionar automaticamente 402 como adicionar os itens de menus 402 como alterar os itens de menu 403 como criar um aviso de seleo para 402 como editar 491 menus, como personalizar 557 Microsoft Word arquivos, como abrir 159 miniaplicativos. Consulte miniaplicativos de Java miniaplicativos Java como inserir 325, 346 como redimensionar 295 propriedades 347 viso geral 346 Mini-iniciador. Consulte Iniciador e barra do Iniciador 77 modelos 409428 atalhos 595 como alterar as cores de realce 417 como aplicar a um documento j existente 422 como aplicar ao documento 242 como clicar em regies bloqueadas 419 como criar 411 como criar modelos de boto Flash 335 como criar novos documentos com 159, 422 como denir as regies editveis 416 como desanexar um documento de 424 como editar 411, 412 como exibir as regies 418 como localizar as regies editveis 424 como modicar 424 como propriedades. Consulte propriedades como renomear 412 como tornar uma regio no-editvel 421 como utilizar as linhas de tempo 421 como utilizar os comportamentos 421 como utilizar os estilos 421 documentos com base em, como criar 422 pasta Templates 411 preferncias 417 propriedades da pgina 413 regies editveis e bloqueadas 415 viso geral 409 XML 426
molduras 217, 217235 aninhadas 222 atalhos 591 bordas 232 como alterar a cor do fundo 233 como alterar o contedo 233 como criar 219, 221 como designar 233 como excluir 221 como redimensionar 231 como salvar 225 como selecionar 223 como utilizar os links 233 compatibilidade com os navegadores 234 comportamentos, como utilizar com 235 etapas para criar 219 painel 223 propriedades 227 viso geral 217 Mostrar as guias da tabela de layout 178 Mostrar os ttulos das pginas no mapa do site 127 multimdia. Consulte mdia N navegador primrio 545 navegador secundrio 545 navegadores arquivos compatveis com a verso 3.0 457 como designar 542 como detectar 544 como visualizar nos 544 compatibilidade, como planejar 103 compatibilidade, como testar 542 cores, aceitas 92 e estilos CSS 277 pers, como criar 573 pers, como editar 571 primrio, como denir 545 secundrio, denir 545 verses, como vericar 482 Notas de Design, para integrao entre Dreamweaver e Fireworks 313 novos recursos no Dreamweaver 22
616
ndice remissivo
O objeto ncora (painel Objetos) 394 objetos atalhos 596 caixas de seleo e botes de opo 529 como adicionar a formulrios 524 como adicionar Design Notes 144 como criar 556 como inserir 252 como inserir com o painel Objetos 82 de fatia, editar fatias de tabelas do Fireworks a partir do Dreamweaver 316 objetos de boto Flash 329, 335 como modicar 331 como visualizar 331 propriedades 333 objetos de texto Flash como inserir 332 como visualizar 331 propriedades 333 objetos Generator, viso geral 337 opo Advertir quando resolver ou remover tags (preferncias de regravao de cdigo) 377 opo Ajustar os tags abertos e aninhados incorretamente (preferncias de regravao de cdigo) 377 opo Ajustar os tags aninhados incorretamente (Limpar o HTML do Word) 380 opo Aninhar sempre quando criada dentro de uma camada existente 444 opo Aplicao automtica (painel Estilos HTML) 264 opo Aplicar a formatao de origem (comando Limpar o HTML do Word) 381 opo Arquivos locais 120 opo Arquivos remotos 120 opo Ativar a devoluo e retirada de arquivos 140 opo Atualizar a lista de arquivos locais automaticamente 109, 110 Opo cache (caixa de dilogo Denio de site) 110 Opo cache (caixa de dilogo Denio do site) 109 opo caixa de cores 91 opo Caixa dos atributos (preferncias de formato de cdigo) 376 opo Caixa dos tags (preferncias de formato de cdigo) 376
opo Centralizao (preferncias de formato de cdigo) 377 opo Cdigo-fonte de HTML 282 opo Coincidir maisc./minsc. 281 opo Colocar os arquivos mais novos no remoto 155 opo colunas (Inserir tabela) 196 opo Combinar os tags aninhados sempre que possvel 379 opo Comentrios (preferncias de cores de cdigo) 375 opo Cor do link (Propriedades da pgina) 162 opo Cor do texto (Propriedades da pgina) 162 opo Cor dos links ativos (Propriedades da pgina) 162 opo Cor dos links visitados (Propriedades da pgina) 162 opo Denir a cor do fundo (Limpar o HTML do Word) 380 opo Desanexar do original 434 opo Espaamento da clula (Inserir tabela) 196 opo Especco ao tag (preferncias de cores de cdigo) 375 opo Execuo automtica 459 opo Execuo automtica (painel Linhas de tempo) 460 opo FTP 132 opo Fundo (preferncias de cores de cdigo) 374 opo Ignorar a caixa de (preferncias de formato de cdigo) 377 opo Ignorar os diferentes espaos em branco 281 opo ndice Z (para camadas) como alterar a ordem de empilhamento 453 opo Limpar as CSS 380 opo Limpar o estilo da seleo 264 opo Limpar o estilo do pargrafo 264 opo Limpar os tags <font> 380 opo linhas (Inserir tabela) 196 opo Linhas e colunas da tabela (preferncias de formato de cdigo) 376 opo Local/Rede 132 opo Loop 459 opo Molduras e conjuntos de molduras (preferncias de formato de cdigo) 376 opo Mostrar o iniciador na barra de status 79 opo Mostrar o registro quando concluir 379 opo nenhum 132
ndice remissivo
617
opo Nunca regravar o HTML em arquivos com as extenses (preferncias de regravao de cdigo) 377 opo Obter e colocar os arquivos mais novos 155 opo Obter os arquivos mais novos do remoto 155 opo Outras palavras-chave (preferncias de cores de cdigo) 375 opo Padro do tag (preferncias de cores de cdigo) 375 opo Palavras-chave reservadas (preferncias de cores de cdigo) 375 opo Preenchimento da clula (Inserir tabela) 196 opo Quebra automtica de linha (preferncias de formato de cdigo) 376 opo Quebras de linha (preferncias de formato de cdigo) 376 opo Recuo (preferncias de formato de cdigo) 376 opo Redenir o tag HTML 272 opo Remover os comentrios de HTML no pertencentes ao Dreamweaver 378 opo Remover os comentrios de HTML pertencentes ao Dreamweaver 378 opo Remover os tags adicionais de nalizao (preferncias de regravao de cdigo) 377 opo Remover os tags aninhados redundantes 378 opo Remover os tags vazios 378 opo Remover tag(s) especco(s) 378 opo Remover todo o markup especco ao Word 380 opo Retirar os arquivos na abertura 140 opo Seqncias de caracteres (preferncias de cores de cdigo) 375 opo Tamanho da tabulao 376 opo Tamanho do recuo (preferncias de formato de cdigo) 376 opo Texto (preferncias de cores de cdigo) 374 opo Utilizar (preferncias de formato de cdigo) 376 opo Utilizar a rewall 133 opo Utilizar expresses regulares 281 opo Utilizar FTP passivo 133 opo Velocidade de conexo 79 opes de acesso ao servidor 132 opes de Caracteres especiais (preferncias de regravao de cdigo) 378
opes de devoluo/retirada 140 como digitar um endereo de correio eletrnico 140 como digitar um nome de retirada 140 opes de exibio fontes 93 painis utuantes 87 opes de Localizar em 280 opes de Procurar 281 ordem de empilhamento camadas 453 como alterar com as linhas de tempo 464 ortograa como vericar 279 dicionrios, como editar 279 otimizar imagens do Fireworks a partir do Dreamweaver 317 P Package Manager 98 pginas como alterar o ttulo 160 como visualizar nos navegadores 544 cor 161 cores padro do texto 162 Design Notes, como utilizar em 142 imagem de fundo 161 projeto 106 propriedades e modelos 413 tamanho 549 tempo de download, estimativa 549 Pginas da Ajuda do Dreamweaver 14 Pginas da Ajuda e manual Como estender os recursos do Dreamweaver 16 painis atalhos 597 barra do Iniciador 79 como abrir/fechar com a barra do Iniciador 79 como denir as preferncias de paletas utuantes 87 de encaixe 86 inspetor de cdigo 90 painel Comportamentos 470 painel Histrico 87 painel Objetos 82
618
ndice remissivo
painis utuantes Consulte painis painis utuantes de encaixe 86 painel Camadas 442 painel Comportamentos 470 painel Estilos CSS 275 painel Histrico comandos, como criar a partir das etapas do histrico 173 como automatizar as tarefas com 168 como limpar a lista de histrico 89 etapas, como aplicar a outros objetos 170 etapas, como copiar e colar 172 etapas, como repetir 169 nmero mximo de etapas, como denir 89 viso geral 87 painel Linhas de tempo 459 painel Molduras 223 painel Objetos categorias 83 como personalizar 555 como recarregar 555 de encaixe 86 preferncias 84 viso geral 82 painel Referncia 358 paleta de cores Cubos de cor 91 paleta de cores Mac OS 91 paleta de cores Passar cor aceita pela Web. 91 paleta de cores Tom contnuo 91 paleta de cores Tons de cinza 91 paleta de cores Windows 91 paletas, cor 91 pasta Conguration arquivo Extensions.txt 554 arquivo menus.xml 557 arquivo SourceFormat.txt 569 subpasta Behaviors 568 subpasta BrowserProles 571 subpasta Commands 568 subpasta Objects 555 subpasta ThirdPartyTags 576
pasta raiz local 108 remoto 134 pasta raiz local 108 pastas como procurar 280 raiz 108 pastas Favoritos 248 pastas, Favoritos 248 perl de formatao da origem 569 pers formato da fonte de HTML 569 navegadores 571 PHP Hypertext Preprocessor 581 pixels transparentes no fundo 161 pixels, transparentes, no fundo 161 planejamento projeto 106 planejamento da navegao de um site 106 planejamento de sites 101 estrutura 104 objetivos 101 propriedades 107 pblico 101 plug-ins como detectar 544 como executar na janela do documento 343 como executar os atalhos 595 como redimensionar 295 como vericar 483 Netscape Navigator 342 resoluo de problemas 344 plug-ins do Netscape Navigator como executar na janela do documento 343 propriedades 342 resoluo de problemas 344 pontos ativos como aplicar comportamentos a 304 como redimensionar 299 como selecionar vrios em um mapa de imagens 298 em mapas de imagens 296 propriedades 297 pontos de interrupo no depurador Javascript 513
ndice remissivo
619
preferncias Barra de status 79 bibliotecas 430 Camadas 444 como atualizar os links 398 Cores de cdigo 374 dicionrio para vericao ortogrca 279 editores externos 326 elementos invisveis 164 fontes/codicao 93 Formato de cdigo 375 gerais 93 Iniciar e editar 314 modelo 417 Painis 87 painis utuantes 87 painel Objetos 84 Quick Tag Editor 373 regravao de cdigo 377 Site 117 Tipos de arquivos / editores 327 viso geral 92 visualizao de layout 194 Visualizar no navegador 545 Visualizar utilizando o servidor local (links relativos raiz) 389 preferncias de fontes/codicao 93 preferncias de visualizao no navegador 545 Preferncias do site 117 Preferncias dos tipos de arquivos / editores 327 preferncias gerais 93 princpios bsicos do Dreamweaver 20 processadores de texto, arquivos criados por 158 projeto das pginas 106 proporo, como manter 295 propriedade de alinhamento da imagem 292 propriedade de alternativa da imagem 293 propriedade de atualizao da imagem 293 propriedade de borda da imagem 293 propriedade de campo de nome do mapa 293 propriedade de imagem de destino 293 propriedade de linguagem do script 367 propriedade de link da imagem 292 propriedade de nome (inspetor de propriedades da imagem) 292
propriedade de origem baixa da imagem 293 propriedade de origem da imagem 292 propriedade do script de origem 367 propriedades 237, 237249 camada 449 camadas mltiplas 452 categorias 238 clulas de layout 187 colunas, linhas e clulas 204 como abrir o painel Propriedades 239 como adicionar lista Favoritos 241 como alterar com comportamentos 481 como aplicar as cores ao texto 242 como atualizar a lista Site 240 como editar 244 como exibir 85 como inserir 241 como selecionar mltiplas 243 conjunto de molduras 229 controles ActiveX 345 cores, como criar 248 documento, como denir 160 lmes Flash 336 lmes Shockwave 338 imagem 292 listas Favoritos 246 miniaplicativos Java 347 moldura 227 pastas Favoritos 248 planejamento 107 pontos ativos 297 tabela 203 tabelas de layout 188 URLs, como criar 248 viso geral 237 propriedades da pgina ttulo, como alterar 160 propriedades dos objetos Flash 333 propriedades Espao V e Espao H da imagem 293 propriedades L e U da imagem 292
620
ndice remissivo
Q qps (quadros por segundo) 459 quadros por segundo (qps) 459 quadros primrios como criar 461 viso geral 459 Quick Tag Editor como abrir 369 menu de sugestes de atributos 372 preferncias 373 viso geral 369 R ramicaes, como expandir e reduzir no mapa do site 130 recursos para informaes sobre as tecnologias da Web 25 recursos, novos no Dreamweaver 22 redimensionar imagens do Fireworks a partir do Dreamweaver 319 regies bloqueadas como clicar em 419 regies, bloqueadas como clicar em 419 rguas 165 rguas horizontais, como inserir e modicar 261 Relatrios Retirado por 149 relatrios 149 como criar 550 como testar um site com 550 uxo de trabalho 149 relatrios de devolues e retiradas 149 relatrios de uxo de trabalho 149 relatrios de site 149 requisitos do sistema No Macintosh 12 No Windows 12 resoluo de problemas como clicar em regies bloqueadas 419 como transferir arquivos 152 plug-ins do Navigator 344 Roundtrip HTML 360
S scripts chaves ajustadas 367 como editar 366 como editar externos 365 como exibir as funes 368 como inserir 365 como mostrar no documento 164 como propriedades. Consulte propriedades seo head, como editar o contedo na 167 selecionar clulas/tabelas de layout 185 seletor de cores Dreamweaver 91 sistema 91 seletor de cores do sistema 91 server-side includes 436 como editar 438 como inserir 438 viso geral 436 servidores AppleTalk 132 como denir sites remotos 132 como resolver problemas de congurao 138 NFS 132 opes de acesso 132 servidores AppleTalk 132 servidores da Web. Consulte servidores servidores NFS 132 sintaxe do menus.xml 562 sites atalhos 594 cache 398 como adicionar arquivos e pastas 121 como ajustar os links rompidos 547 como alterar a exibio 120 como alterar os links no site inteiro 400 como devolver e retirar arquivos 139 como editar o remoto 111 como exibir 119 como planejar a navegao 106 como procurar os arquivos nos 280 como remover da lista de sites 112 como selecionar os arquivos atualizados 121 como vericar os links 546 como visualizar nos navegadores 544 compatibilidade com os navegadores 103, 542
ndice remissivo
621
criar novo 108 Design Notes, como utilizar em 142 editar os existentes 110 estrutura e navegao 113 grandes, propriedades em 246 locais e remotos 101 locais, como criar 108 locais, como exibir 119 local, como associar a um servidor remoto com 132 local, como localizar arquivos no 130 local, pasta raiz 108 material de referncia 25 relatrios, como executar 149 remoto, como congurar 131 remoto, como denir 132 remoto, como localizar arquivos no 131 remoto, como resolver problemas de congurao 138 remoto, pasta raiz 134 remotos, opes de acesso 132 sites locais. Consulte sites 108 som 339, 339341 adicionar pgina 339 como executar 494 sublinhado 257 submenu Estilo 257 Sumrio, Ajuda 15 T tabelas 537 atalhos 590 clulas, como dividir 211 colunas, linhas e clulas 204 como adicionar bordas a 203 como adicionar cor de fundo a 204 como adicionar e remover linhas e colunas 208 como adicionar imagens de fundo a 204 como adicionar o contedo a 197 como ajustar as linhas e colunas 207 como alinhar 205 como alterar a largura das colunas 207 como aninhar 209
como converter a partir de camadas 455 como criar 196 como formatar 201 como importar 198 como limpar a largura e altura das clulas 208 como mesclar as clulas 211 como ordenar 214 como redimensionar 207 como selecionar os elementos 200 Consulte tabelas de layout Consulte tambm visualizao de layout formatos predenidos de 206 opo Sem quebra 205 propriedades 203 tags HTML 202 viso geral 195 Consulte tambm colunas, linhas e clulas tabelas de layout 178 alinhamento 188 aninhadas 182 como desenhar 179 como formatar 188 como limpar as alturas 188 como mover 185 como redimensionar 185 como selecionar 185 contorno 194 cor de fundo 188 espa. da clula 188 fundo 194 preench. da clula 188 preferncias 194 Remover o aninhamento 188 Remover todos os espaadores 188 Tornar consistentes as larguras 188 tag blockquote 260 tag body 167 tag map 296 tag ol 260 tag ul 260
622
ndice remissivo
tags ASP 383 blockquote 260 body 167, 353 buscas 282 CFML 383 como aplicar 258 como editar 369 como envolver com 369 como remover 373 como selecionar 162 como sobrepor 360 de outros fabricantes, como personalizar 576 em pers de navegadores 571 especicaes 577 formatao de texto 357 head 353 HTML 352 invlidos 360 ol 260 sintaxe do menus.xml 562 tabela 202 tagspec 577 ul 260 XML 360 Tags aninhados redundantes 551 Tags combinveis de fontes aninhadas 551 tags de cabealho 258 tags de outros fabricantes como impedir a regravao 582 como personalizar 576 tags de pargrafo 258 tags HTML. Consulte tags 352 tags invlidos como exibir 360 tags sobrepostos 360 Tags vazios removveis 551 tamanho da pgina, como redimensionar para que caiba no monitor 77 tamanho do monitor, como redimensionar as pginas para que caibam 77 tempo de download 76
texto alinhamento 259 atalhos de formatao 589 como adicionar a documentos 252 como alterar a cor 242, 259 como alterar as combinaes de fontes 260 como editar os atalhos 588 como formatar com os estilos HTML 262 como formatar os tags 357 como procurar nos documentos 280 como recuar 260 cor padro nas pginas 162 cor, como alterar 258 editores externos. Consulte editores externos formatao 251 Texto alternativo ausente 551 texto em negrito 257 tipo de arquivo padro, como alterar 554 tipos de arquivos arquivos Flash 328 ttulo como alterar 160 U upload annimo de arquivos 528 URLs como aplicar seleo 242 como criar propriedades de URLs 248 como propriedades. Consulte propriedades URLs. Consulte caminhos V VBScript 365 viso geral das lies 13 viso geral do Dreamweaver 11 Viso geral do Tour guiado 13 visual. de layout atributos Limpar a altura 188 como alternar para 177 como formatar tabelas de layout 188 contorno da tabela 194 espaadores de insero autom. 194 espaamento da clula 188 fundo 194 mover clulas/tabelas de layout 185 preench. da clula 188
realce da clula 194 redimensionar clulas/tabelas de layout 185 Remover o aninhamento 188 Remover todos os espa. 188 selecionar clulas/tabelas de layout 185 sobre clulas e tabelas de layout 178 Tornar consistentes as larg. 188 viso geral 177 Visual SourceSafe integrao com o Dreamweaver 136 visualizao de cdigo como abrir 362 como abrir os arquivos no-HTML 368 como gravar e editar o cdigo 365 como organizar as visualizaes 363 opes 364 Visualizao de layout 177194 visualizao de layout 177 alongamento automtico 189 como adicionar o contedo a 183 como denir a largura 189 como desenhar clulas e tabelas de layout 179 como formatar as clulas de layout 187 como limpar as alturas das clulas 184 grade 183 imagens espaadoras 192 largura xa 189 menu cabealho da coluna 191 preferncias 194 preferncias de imagem espaadora 192 tabelas de layout aninhadas 182 visualizao do projeto como exibir utilizando a visualizao de cdigo 362 como organizar as visualizaes 363 visualizao dos arquivos do site 121 X XML 427 arquivo menus.xml 562 em modelos 426 notaes de tags para a exportao 428 tag tagspec 577 tags 360 viso geral 427
624
ndice remissivo