Cuso Completo de Dreamweaver

macromedia
DREAMWEAVER 3
Usando o Dreamweaver
macromedia
Marcas comerciais Macromedia, o logotipo Macromedia, o logotipo Made With Macromedia, Authorware, Backstage, Director, Extreme 3D e Fontographer so marcas comerciais registradas, e Afterburner, AppletAce, Authorware Interactive Studio, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, DECK II, Director Multimedia Studio, Doc Around the Clock, Extreme 3D, Flash, FreeHand, FreeHand Graphics Studio, Lingo, Macromedia xRes, MAGIC, Power Applets, Priority Access, SoundEdit, Shockwave, Showcase, Tools to Power Your Ideas e Xtra so marcas comerciais registradas da Macromedia, Inc. 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. 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 1999 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 ZDW30M100PO Agradecimentos Gerncia do projeto: Sheila McGinn Texto: Kim Diezel, Jed Hartman, Lori Hylan e Marcelle Taylor Design e produo de multimdia: John Zippy Lehnus e Noah Zilberberg Engenharia da Ajuda: Lori Hylan Edio: Anne Szabla e Rosana Francescato Desenho e produo da impresso e da Ajuda: Chris Basmajian e Noah Zilberberg Traduo: Kristin Conradi Agradecimentos especiais a Jaime Austin, Heidi Bauer, Kristin Conradi, Margaret Dumas, Mark Erickson, Jean Fitzgerald, Stephanie Goss, Zena Harvill, Noah Hoffman, nj, Missy Keadle, Paul Madar, Ben Rinzler (Melnick, em solteira), Charles Nadeau, Ken Sundermeyer, Mike Sundermeyer, Vernon Viehe, Scott Richards, Peter von dem Hagen, Raymond Lim, Daniel Di Gallo, Yoko Vogt, Megy Nascimento, Lyris Wiedemann, Richard Verdoni, Victor Grigorieff, Linda Page, Rubric Inc., e s equipes de engenharia e garantia de qualidade do Dreamweaver.
Primeira edio: dezembro de 1999 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103
NDICE
INTRODUO Guia de introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Requisitos do sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9 Como instalar o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10 Introduo ao Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10 Onde iniciar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14 Convenes tipogrcas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 Novidades do Dreamweaver 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16 Recursos de tecnologias de Web e HTML . . . . . . . . . . . . . . . . . . . . . . .19 CAPTULO 1 Tutorial do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . 21 Congurar a estrutura do site do tutorial. . . . . . . . . . . . . . . . . . . . . . . .24 Denir um site local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25 Criar a home page do site da Scaal. . . . . . . . . . . . . . . . . . . . . . . . . . . . .27 Criar um layout de pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28 Criar imagens cambiveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38 Importar um documento em HTML do Word . . . . . . . . . . . . . . . . . . .42 Formatar o texto utilizando os estilos HTML . . . . . . . . . . . . . . . . . . . .44 Criar um mapa visual do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 Criar vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48 Criar um modelo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .51 Criar um menu de salto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .58 Vericar o site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60 CAPTULO 2 Princpios bsicos do Dreamweaver . . . . . . . . . . . . . 61 Como denir as preferncias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71 Usando o Dreamweaver com outros aplicativos . . . . . . . . . . . . . . . . . . .72
CAPTULO 3 Como criar sites e documentos. . . . . . . . . . . . . . . . . . 73 Sobre o planejamento de sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74 Como criar um site local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77 Como editar e atualizar um site j existente. . . . . . . . . . . . . . . . . . . . . .78 Como exibir e abrir os arquivos na janela do site . . . . . . . . . . . . . . . . . .79 Como remover um site da lista de sites . . . . . . . . . . . . . . . . . . . . . . . . .84 Como criar e editar os documentos HTML . . . . . . . . . . . . . . . . . . . . .84 Como adicionar texto e inserir objetos . . . . . . . . . . . . . . . . . . . . . . . . .86 Como selecionar os elementos na janela do documento. . . . . . . . . . . . .89 Como escolher as cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90 Sobre as cores aceitas pela Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92 Como denir as propriedades do documento . . . . . . . . . . . . . . . . . . . .93 Sobre a paleta de histrico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95 Como desfazer as alteraes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96 Como automatizar as tarefas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .97 Como utilizar as guias visuais no processo de desenho. . . . . . . . . . . . .103 Sobre a interatividade e animao . . . . . . . . . . . . . . . . . . . . . . . . . . . .105 Como exibir e editar o contedo do HEAD . . . . . . . . . . . . . . . . . . . .106 CAPTULO 4 Vnculos e navegao . . . . . . . . . . . . . . . . . . . . . . . . . 109 Como criar os vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 Como criar menus de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122 Como criar as barras de navegao . . . . . . . . . . . . . . . . . . . . . . . . . . .124 Como exibir a estrutura do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127 Como gerenciar os vnculos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .134 Como anexar comportamentos a vnculos . . . . . . . . . . . . . . . . . . . . . .137 CAPTULO 5 Gerenciamento de sites . . . . . . . . . . . . . . . . . . . . . . . 139 Como congurar um site remoto . . . . . . . . . . . . . . . . . . . . . . . . . . . .140 Sobre a janela do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144 Como utilizar o sistema de devolues e retiradas . . . . . . . . . . . . . . . .148 Como obter e colocar os arquivos . . . . . . . . . . . . . . . . . . . . . . . . . . . .151 Como sincronizar os arquivos nos sites local e remoto . . . . . . . . . . . . .154 Como buscar e substituir. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156 Como criar sites para vrios navegadores . . . . . . . . . . . . . . . . . . . . . . .164 Como utilizar os comportamentos para detectar os navegadores e plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165 Como testar o site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166 Sobre as Design Notes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172
ndice
CAPTULO 6 Como formatar o texto. . . . . . . . . . . . . . . . . . . . . . . . . 177 Como formatar o texto com os rtulos HTML . . . . . . . . . . . . . . . . . .178 Como criar listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183 Como formatar o texto com os estilos HTML. . . . . . . . . . . . . . . . . . .184 Como formatar o texto com as folhas de estilos CSS . . . . . . . . . . . . . .188 Como converter os estilos CSS em markup HTML . . . . . . . . . . . . . .196 Como vericar a ortograa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198 CAPTULO 7 Como inserir imagens . . . . . . . . . . . . . . . . . . . . . . . . . 199 Como inserir uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .200 Como denir as propriedades da imagem . . . . . . . . . . . . . . . . . . . . . .201 Como utilizar um editor de imagens externo. . . . . . . . . . . . . . . . . . . .205 Como criar uma imagem cambivel . . . . . . . . . . . . . . . . . . . . . . . . . .208 Como trabalhar com os arquivos HTML do Fireworks . . . . . . . . . . . .209 Como criar os mapas de imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . .211 Como aplicar comportamentos a imagens . . . . . . . . . . . . . . . . . . . . . .214 CAPTULO 8 Como criar tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Como inserir uma tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216 Como selecionar os elementos da tabela . . . . . . . . . . . . . . . . . . . . . . .219 Como formatar as tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .221 Como copiar e colar clulas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226 Como redimensionar as tabelas e clulas . . . . . . . . . . . . . . . . . . . . . . .228 Como adicionar e remover as linhas e colunas . . . . . . . . . . . . . . . . . . .229 Como ordenar as tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233 Como exportar os dados da tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . .234 CAPTULO 9 Como utilizar as camadas . . . . . . . . . . . . . . . . . . . . . 235 Como criar as camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .236 Como manipular as camadas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243 Como alterar a ordem de empilhamento de camadas. . . . . . . . . . . . . .248 Como alterar a visibilidade de uma camada. . . . . . . . . . . . . . . . . . . . .249 Sobre as camadas e tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .249 Sobre as linhas de tempo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .253 Aes de comportamentos para controlar as linhas de tempo. . . . . . . .263
ndice
CAPTULO 10 Como utilizar as molduras. . . . . . . . . . . . . . . . . . . . . 265 Como criar as molduras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .266 Como selecionar uma moldura ou conjunto de molduras . . . . . . . . . .268 Como salvar os arquivos de molduras e de conjuntos de molduras . . .271 Sobre as propriedades das molduras e conjuntos de molduras . . . . . . .272 Como controlar o contedo de molduras com os vnculos . . . . . . . . .279 Como criar um contedo NOFRAMES . . . . . . . . . . . . . . . . . . . . . . .280 Como utilizar os comportamentos com molduras . . . . . . . . . . . . . . . .281 CAPTULO 11 Como inserir mdia . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 Como iniciar um editor externo de mdia . . . . . . . . . . . . . . . . . . . . . .284 Como utilizar as Design Notes com objetos de mdia . . . . . . . . . . . . .285 Como inserir lmes Shockwave. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .286 Propriedades do Shockwave. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .287 Como inserir lmes Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .288 Propriedades dos lmes Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .288 Como inserir e editar os objetos Aftershock. . . . . . . . . . . . . . . . . . . . .290 Como inserir objetos do Generator . . . . . . . . . . . . . . . . . . . . . . . . . . .291 Como inserir o contedo de plug-ins do Netscape Navigator . . . . . . .292 Propriedades dos plug-ins do Netscape Navigator . . . . . . . . . . . . . . . .292 Como executar os plug-ins na janela do documento . . . . . . . . . . . . . .293 Resoluo de problemas relacionados aos plug-ins do Navigator . . . . .294 Como inserir um controle ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . .294 Propriedades do ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295 Como inserir um applet de Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296 Propriedades dos applets de Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296 Sobre os parmetros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297 Como utilizar os comportamentos para controlar mdia . . . . . . . . . . .298 CAPTULO 12 Como utilizar os comportamentos . . . . . . . . . . . . . 299 Como utilizar o inspetor de comportamentos . . . . . . . . . . . . . . . . . . .300 Sobre os eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301 Como anexar um comportamento. . . . . . . . . . . . . . . . . . . . . . . . . . . .303 Como anexar um comportamento a uma linha de tempo . . . . . . . . . .305 Como alterar um comportamento. . . . . . . . . . . . . . . . . . . . . . . . . . . .305 Como criar novas aes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .306 Como descarregar e instalar os comportamentos de outros fabricantes . . .306 Como utilizar as aes de comportamentos enviadas com o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307 Como atualizar um comportamento . . . . . . . . . . . . . . . . . . . . . . . . . .336
ndice
CAPTULO 13 Como editar o HTML. . . . . . . . . . . . . . . . . . . . . . . . . 337 Sobre o Roundtrip HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .338 Como utilizar o inspetor de origem de HTML . . . . . . . . . . . . . . . . . .339 Como editar um rtulo HTML na janela do documento . . . . . . . . . .340 Como denir as preferncias de formato HTML. . . . . . . . . . . . . . . . .346 Limpar o HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .350 Limpar o HTML do Microsoft Word . . . . . . . . . . . . . . . . . . . . . . . . .352 Como corrigir os markups incorretos . . . . . . . . . . . . . . . . . . . . . . . . .354 Como utilizar os editores de HTML externos . . . . . . . . . . . . . . . . . . .354 Como inserir roteiros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .357 Como inserir comentrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .358 CAPTULO 14 Modelos e bibliotecas . . . . . . . . . . . . . . . . . . . . . . . . 359 Como criar os modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .361 Como denir as regies editveis de um modelo . . . . . . . . . . . . . . . . .362 Como criar documentos com base em modelos . . . . . . . . . . . . . . . . . .368 Como modicar os modelos e atualizar o site . . . . . . . . . . . . . . . . . . .369 Como importar e exportar o contedo XML. . . . . . . . . . . . . . . . . . . .370 Sobre os itens de biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .372 Como utilizar as server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . .379 CAPTULO 15 Como criar formulrios . . . . . . . . . . . . . . . . . . . . . . . . 381 Como criar um formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .382 Como adicionar um objeto a um formulrio . . . . . . . . . . . . . . . . . . . .383 Como processar os formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .384 Como utilizar os comportamentos com formulrios . . . . . . . . . . . . . .385 CAPTULO 16 Como personalizar o Dreamweaver . . . . . . . . . . . .387 Como alterar a paleta de objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . .388 Como criar um objeto simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .389 Como alterar o tipo de arquivo padro . . . . . . . . . . . . . . . . . . . . . . . .390 Como personalizar os menus do Dreamweaver . . . . . . . . . . . . . . . . . .391 Como personalizar a aparncia das caixas de dilogo . . . . . . . . . . . . . .395 Como editar o perl de formatao da origem de HTML . . . . . . . . . .396 Sobre os pers de navegadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .398 Extenso dos recursos do Dreamweaver: Princpios bsicos . . . . . . . . .401 Como personalizar a interpretao e a aparncia dos rtulos de outros fabricantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .402
ndice
APNDICE A Atalhos de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 menu Arquivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .409 menu Editar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .410 Quick Tag Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .410 Paleta de histrico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .411 Como editar o texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .411 Como formatar o texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .412 Como localizar e substituir o texto . . . . . . . . . . . . . . . . . . . . . . . . . . .412 Como trabalhar com tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .413 Como trabalhar com as molduras . . . . . . . . . . . . . . . . . . . . . . . . . . . .413 Como trabalhar com as camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . .414 Como trabalhar com as linhas de tempo . . . . . . . . . . . . . . . . . . . . . . .415 Como trabalhar com as imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . .415 Como gerenciar os hipervnculos. . . . . . . . . . . . . . . . . . . . . . . . . . . . .415 Como designar e visualizar nos navegadores . . . . . . . . . . . . . . . . . . . .416 Gerenciamento de sites e FTPs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .416 Mapa do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .417 Como executar os plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .417 Como exibir os elementos da pgina . . . . . . . . . . . . . . . . . . . . . . . . . .418 Como trabalhar com os modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . .418 Como inserir objetos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .418 Como abrir e fechar as paletas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .419 Como obter ajuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .419 Matriz de atalhos de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .420 NDICE REMISSIVO . . . . . . . . . . . . . . . . . . . . . . . . 425
ndice
INTRODUO
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Guia de introduo
O Dreamweaver um editor visual prossional que cria e gerencia sites e pginas da Web. Com esse programa, fcil criar e editar pginas compatveis com diversos navegadores e plataformas. O Dreamweaver oferece ferramentas avanadas de desenho e layout, bem como facilita a utilizao dos recursos do HTML dinmico, como os comportamentos e camadas animadas, sem gravar uma linha de cdigo. A vericao do navegador de destino detecta os problemas potenciais que seu trabalho possa apresentar em todas as plataformas e navegadores. 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. O Dreamweaver pode ser totalmente personalizado. Voc pode criar os seus prprios objetos e comandos, modicar os menus e atalhos de teclado, alm de gravar cdigo JavaScript para estender os recursos do Dreamweaver com novos comportamentos e inspetores de propriedades.
Requisitos do sistema
Os seguintes hardware e software so necessrios para executar o Dreamweaver.
Para o Microsoft Windows:
Um processador Pentium da Intel ou equivalente, de 120 MHz ou mais rpido, executando o Windows 95, Windows 98 ou Windows NT verso 4.0 ou mais avanada 32 MB de memria de acesso aleatrio (RAM) mais 20 MB de espao disponvel em disco Um monitor colorido com resoluo de 800 x 600 pixels Uma unidade de CD-ROM
Para o Macintosh:
Um Power Macintosh, executando o Mac OS 8.1 ou mais avanado 32 MB de memria de acesso aleatrio (RAM) mais 20 MB de espao disponvel em disco Um monitor colorido com resoluo de 800 x 600 pixels Uma unidade de CD-ROM
Como instalar o Dreamweaver

Siga estas etapas para instalar o Dreamweaver em um computador com o sistema Windows ou Macintosh .
Para instalar o Dreamweaver: 1 2
Insira o CD do Dreamweaver na unidade de CD-ROM do computador. Escolha uma dentre as seguintes opes: No Windows, escolha Iniciar > Executar. Clique em Procurar e escolha o arquivo Setup.exe no CD do Dreamweaver. Clique em OK na caixa de dilogo Executar, para iniciar a instalao. No Macintosh, clique duas vezes no cone do Instalador do Dreamweaver. Siga as instrues na tela. Se for solicitado, reinicie o computador.
3 4
Introduo ao Dreamweaver
O pacote do 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. Esses recursos incluem pginas de ajuda on-line em HTML, que aparecem no navegador; lmes Show Me, um tutorial e um manual impresso. Alm disso, o site do Dreamweaver na Web atualizado regularmente.
10
Introduo
Tour guiado e filmes Show Me Os lmes Show Me, na Ajuda do Dreamweaver, apresentam uma introduo animada a alguns dos principais recursos do Dreamweaver. O Tour guiado inclui uma seqncia de todos os lmes Show Me. Os lmes Show Me tambm podem ser vistos nas respectivas sees de viso geral. No sumrio da Ajuda, o seguinte cone indica que um tpico contm um lme Show Me:
Os lmes Show Me necessitam do plug-in Shockwave, includo no CD do Dreamweaver. Se a sua cpia do Dreamweaver tiver sido adquirida eletronicamente, voc poder descarregar o plug-in Shockwave mais recente no site da Macromedia na Web, em http://www.macromedia.com/shockwave/ download/. Ajuda do Dreamweaver As pginas da Ajuda em HTML do Dreamweaver contm informaes completas sobre todos os recursos do Dreamweaver. Estes navegadores so os mais recomendados para visualizar a Ajuda do Dreamweaver: No Windows: Netscape Navigator 4.0 ou Microsoft Internet Explorer 4.0 e suas respectivas verses mais avanadas No Macintosh: Internet Navigator 4.0 e mais avanado (o Internet Explorer para Macintosh no recomendado porque no pode executar os lmes Show Me) Caso seja utilizado um navegador 3.0, todo o contedo ainda estar acessvel, mas alguns recursos (como a Busca) no funcionaro. 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 ativado. A Ajuda do Dreamweaver inclui os seguintes componentes: Permite ver todas as informaes organizadas por assunto. Clique nas entradas de nvel superior para exibir os subtpicos.
Sumrio
como um ndice tradicional impresso, pode ser utilizado para localizar termos importantes e ir para os tpicos relacionados.
ndice
Guia de introduo
11
permite localizar qualquer seqncia de caracteres no texto inteiro do tpico. A busca requer um navegador 4.0 com Java ativado.
Busca Nota: Depois que o usurio clicar em Busca, a janela de segurana do Java pode aparecer, solicitando permisso para ler os arquivos no seu disco rgido. Esta permisso deve ser concedida para que a busca funcione. O applet no gravar nada no disco rgido, nem ler os arquivos que no estiverem nas Pginas da Ajuda em HTML.
Para procurar uma frase, basta digit-la na caixa de texto.
Para fazer uma busca nos arquivos de duas palavras-chave (camadas e estilos, por exemplo), separe os termos da busca com um sinal de adio (+).
fornece um boto Ajuda, em qualquer caixa de dilogo, ou um cone de ponto de interrogao, nos inspetores, janelas e paletas que abre um tpico relevante da ajuda.
Ajuda contextual Clique aqui para abrir a Ajuda
fornece botes nos quais o usurio pode clicar para mover-se entre os tpicos. Os botes Anterior e Prximo levamno ao prximo tpico ou ao anterior em uma seo (seguindo a ordem dos tpicos no sumrio).
Barra de navegao da Ajuda do Dreamweaver
12
Introduo
Tutorial do Dreamweaver O Tutorial do Dreamweaver o melhor local para iniciar, caso a pessoa no tenha muita experincia em desenvolvimento de sites da Web. Ao trabalhar ajudado pelo tutorial, voc aprender a editar 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 Usando o Dreamweaver. Guia do usurio do Dreamweaver (manual impresso) O manual Usando o Dreamweaver uma alternativa impressa Ajuda do Dreamweaver. Alguns tpicos de referncia sobre opes do programa no esto includos no manual impresso; consulte as pginas da Ajuda para obter informaes sobre esses tpicos. Manual Extenso dos recursos do Dreamweaver O manual e as pginas da Ajuda de Extenso dos recursos do Dreamweaver contm informaes para os programadores de JavaScript e C no Modelo de objeto de documento do Dreamweaver e nas APIs (interfaces de programao de aplicativos) que permitem 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, informaes sobre os tpicos avanados, exemplos, dicas e atualizaes. 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/.
Guia de introduo
13
Onde iniciar
Este guia da Ajuda do 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: 1 2 3
Inicie visualizando o Tour guiado. Em seguida, trabalhe utilizando o Tutorial do Dreamweaver. Prossiga Princpios bsicos do Dreamweaver, na pgina 61, Como criar sites e documentos, na pgina 73, Vnculos e navegao, na pgina 109 e Gerenciamento de sites, na pgina 139. Para aprender a formatar o texto e incluir as imagens nas pginas, leia Como formatar o texto, na pgina 177 e Como inserir imagens, na pgina 199.
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, prossiga no restante dos do manualseguindo a ordem dos captulos. Talvez voc queira saltar o captulo Como personalizar o Dreamweaver, pelo menos no incio.
Para os designers da Web experientes, que ainda no utilizaram o Dreamweaver: 1
Comece a trabalhar atravs do Tutorial do Dreamweaver, a m de aprender os princpios bsicos da utilizao do Dreamweaver. Leia Princpios bsicos do Dreamweaver, na pgina 61, para obter uma viso geral mais completa da interface do usurio do Dreamweaver. Embora a maior parte do material em Como criar sites e documentos, na pgina 73, e Vnculos e navegao, na pgina 109, lhe seja provavelmente familiar, examine esses captulos, para ver como os conceitos j conhecidos so implementados no Dreamweaver; preste particular ateno em Como criar um site local, na pgina 77. Em seguida, leia Gerenciamento de sites, na pgina 139 . Como formatar o texto, na pgina 177 e Como inserir imagens, na pgina 199 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.
14
Introduo
Para os designers da Web experientes, familiarizados com o Dreamweaver: 1
Inicie lendo Novidades do Dreamweaver 3, na pgina 16. Siga as referncias cruzadas nesta seo para as outras que abrangem os novos recursos do Dreamweaver. No deixe de ler estas sees sobre os novos recursos importantes: Sobre a paleta de histrico, na pgina 95 Como editar um rtulo HTML na janela do documento, na pgina 340 Como formatar o texto com os estilos HTML, na pgina 184 Como sincronizar os arquivos nos sites local e remoto, na pgina 154 Sobre as Design Notes, na pgina 172 Limpar o HTML do Microsoft Word, na pgina 352 Talvez voc queira examinar Princpios bsicos do Dreamweaver, na pgina 61 , para aprender os novos aspectos da interface do usurio do Dreamweaver. Alm disso, se estiver interessado em personalizar e estender os recursos do Dreamweaver, leia Como personalizar o Dreamweaver, na pgina 387.
Convenes tipogrficas
As seguintes convenes tipogrcas so utilizadas neste guia da :
Fonte do cdigo
indica os nomes de rtulos e atributos HTML, bem como o texto utilizado nos exemplos.
Fonte do cdigo em itlico indica os itens substituveis (s vezes chamados de metassmbolos) no cdigo.
Texto romano em negrito indica o texto a ser expandido.
Guia de introduo
15
Novidades do Dreamweaver 3
Os novos recursos no Dreamweaver 3 aprimoram a edio do HTML e o gerenciamento do site, permitem adicionar elementos, como caracteres especiais, barras de navegao e mapas de imagens; dinamizam o uxo de trabalho e permitem personalizar e estender os recursos do programa. Como editar o HTML permite modicar, adicionar ou remover rapidamente um rtulo HTML sem sair da janela do documento. Consulte Como editar um rtulo HTML na janela do documento, na pgina 340.
O Quick Tag Editor
permite denir os estilos utilizando markup de caracteres HTML padro aceitos por muitos navegadores (como os rtulos B e FONT) em vez de folhas de estilo em cascata (Cascading Style Sheets - CSS). (A paleta de estilos do Dreamweaver 2.0 agora chama-se paleta de estilos CSS). Consulte Como formatar o texto com os estilos HTML, na pgina 184.
Estilos HTML Inspetor de origem de HTML aprimorado
permite ativar os nmeros de linhas, selecionar linhas inteiras do cdigo a partir da margem, e arrastar e soltar selees de HTML. O inspetor de origem de HTML tambm pode ser acoplado a outras paletas utuantes. Consulte Como utilizar o inspetor de origem de HTML, na pgina 339. permite especicar se o Dreamweaver dever ignorar o contedo de determinados tipos de rtulos de outros fabricantes, como os rtulos Active Server Pages (ASP) e ColdFusion da Microsoft. possvel incluir facilmente suporte para os rtulos de outros fabricantes. Alm disso, as novas opes de regravao do HTML permitem controlar se o Dreamweaver codicar caracteres especcos em determinados contextos. Consulte Como denir as preferncias de regravao de HTML, na pgina 346 e Como impedir a regravao de rtulos de outros fabricantes, na pgina 407.
Modelo aprimorado de rtulo de outros fabricantes
permite adicionar automaticamente o JavaScript para corrigir problemas nas camadas CSS, ao redimensionar uma janela de navegador. Consulte Como denir as preferncias de camadas, na pgina 239.
Adicionar/remover o ajuste do redimensionamento da Netscape
16
Introduo
Como gerenciar os sites permite sincronizar rapidamente as cpias local e do servidor de um site, garantindo que a verso mais recente de cada arquivo estar nos sites local e remoto. Este recurso tambm pode ser denido para excluir arquivos indesejados. Consulte Como sincronizar os arquivos nos sites local e remoto, na pgina 154.
Sincronizar os arquivos
permite obter, colocar, devolver e retirar arquivos diretamente em qualquer janela de documento. Consulte Como utilizar o sistema de devolues e retiradas, na pgina 148.
Acesso fcil ao sistema de devoluo/retirada Salvar os arquivos antes de coloc-los
solicita o salvamento de um arquivo, antes de transferi-lo para o servidor remoto. Consulte Como denir as preferncias de FTP do site, na pgina 146. podem ser agora editadas no Dreamweaver; o mapa do site exibe todos os vnculos nos arquivos Flash e o vericador de vnculos pode analis-los.
URLs em arquivos de filmes Flash
Como criar e editar os objetos e elementos da pgina fornece uma coleo de caracteres especiais comumente utilizados (, e , por exemplo), que podem ser acessados facilmente na paleta de objetos. Consulte Como utilizar a paleta de objetos, na pgina 68.
Objetos de caracteres
permite criar de modo rpido e fcil conjuntos de molduras predenidos. Consulte Para inserir um conjunto de molduras predenido, na pgina 267.
Objetos de moldura Outros objetos permite adicionar facilmente barras de navegao, menus de salto, vnculos de correio eletrnico, datas e novos objetos de mdia (por exemplo: lmes Flash 4 e Shockwave 7, e objetos do Generator) aos documentos. Consulte Como utilizar a paleta de objetos, na pgina 68, Vnculos e navegao, na pgina 109 e Como inserir mdia, na pgina 283.
permitem adicionar e redimensionar pontos ativos, alterar vnculos e destinos, e aplicar comportamentos, sem sair da janela do documento para executar todas estas aes. Consulte Como criar os mapas de imagens, na pgina 211.
Mapas de imagens em linha
Guia de introduo
17
Como dinamizar o fluxo de trabalho: Integrao e comunicao

Design Notes permite anexar notas a um arquivo para que seja possvel controlar as
alteraes nele feitas e comunicar-se sobre as questes de desenvolvimento com os outros membros da equipe. As Design Notes podem ser adicionadas a imagens no Fireworks e serem lidas e editadas no Dreamweaver. Consulte Sobre as Design Notes, na pgina 172.
Importar e limpar o HTML do Word
permite importar os arquivos HTML gerados pelo Microsoft Word; o recurso de limpeza remove os estilos e o cdigo XML irrelevantes e tambm os rtulos do fabricante, corrige os HTMLs invlidos e formata o cdigo de acordo com as suas preferncias. Consulte Limpar o HTML do Microsoft Word, na pgina 352. controla cada ao realizada pelo usurio. Permite desfazer, repetir e copiar etapas na rea de transferncia e depois col-las para repetir aes em outros documentos. Pode-se at mesmo salvar as etapas como um comando que aparece automaticamente no menu Comandos. Consulte Sobre a paleta de histrico, na pgina 95. Como repetir as etapas, na pgina 97.
A paleta de histrico
Repetir fornece um modo rpido de executar tarefas simples e repetitivas. Consulte
permite criar automaticamente as tabelas a partir de dados exportados para arquivos delimitados de aplicativos como Microsoft Excel ou Microsoft Access. Consulte Como importar os dados da tabela, na pgina 218.
Importar os dados da tabela Inserir o HTML do Fireworks
importa o cdigo de origem de HTML e as imagens resultantes da diviso de uma imagem utilizando o Fireworks. O Macromedia Fireworks pode ser iniciado a partir do Dreamweaver para editar uma imagem PNG de origem. Consulte Como trabalhar com os arquivos HTML do Fireworks, na pgina 209. cada tipo de arquivo aberto em um editor externo adequado clicando duas vezes em qualquer imagem ou arquivo de mdia na janela do site. Consulte Como utilizar um editor de imagens externo, na pgina 205.
Iniciar e editar a mdia
possibilita uma melhor experincia do usurio com o Macintosh. O Dreamweaver oferece agora suporte aos Servios de navegao, interpreta imagens utilizando o QuickTime e fornece vrios outros aprimoramentos.
Compatibilidade aprimorada com Macintosh
18
Introduo
Como personalizar e estender os recursos do Dreamweaver

Menus e atalhos personalizveis permitem editar, personalizar e expandir os menus e atalhos de teclado do Dreamweaver. Consulte Como personalizar os menus do Dreamweaver, na pgina 391.
fornece 300 novas funes de API que permitem ao usurio criar suas extenses em JavaScript para o Dreamweaver, inclusive paletas utuantes personalizadas e conversores de atributos. Consulte o manual Extenso dos recursos do Dreamweaver.
Extensibilidade do Dreamweaver
Recursos de tecnologias de Web e HTML

Abaixo esto alguns recursos teis disponveis na Web:
A especificao HTML 4.0 (http://www.w3.org/TR/REC-html40/) a norma ocial para o HTML do World Wide Web Consortium. A especificao para o nvel 1 Cascading Style Sheets (CSS1)
(http://www.w3.org/ TR/REC-CSS1) a especicao ocial para as folhas de estilo do World Wide Web Consortium. (http://www.blooberry.com/indexdot/html/) uma lista completa de rtulos, atributos e valores HTML, bem como sua compatibilidade com os diversos navegadores.
ndice DOT Html
(http://Webreview.com/guides/style/) um guia que explica o que so os estilos e em quais navegadores funcionam.

Style Sheets Reference Guide da Web Review
(http://www.hotwired.com/Webmonkey/99/26/ index4a.html?tw=programming) um artigo do site Hotwired Webmonkey sobre a incluso de roteiros CGI (Common Gateway Interface) j prontos nas pginas.
CGI Scripts for Fun and Profit ndice de recursos CGI
(http://www.cgi-resources.com/) um instrumento de pesquisa de todas as questes relativas a CGI, incluindo roteiros prontos, documentao, livros e at mesmo programadores que oferecem seus servios. (http://hoohoo.ncsa.uiuc.edu/cgi/) inclui uma
Site Common Gateway Interface
introduo CGI. (http://www.bbsinc.com/iso8859.html) lista os nomes de entidades utilizados no ISO 8859-1 (Latin-1).
Tabela de entidades
(http://msdn.microsoft.com/workshop/ author/dhtml/reference/events.asp#om40_event) contm informaes sobre os eventos no Microsoft Internet Explorer.

Pgina de eventos de HTML dinmico Pginas da Viso geral das ASP da Microsoft (http://msdn.microsoft.com/
workshop/server/asp/ASPover.asp) contm informaes sobre as Active Server Pages (ASP).
Guia de introduo
19
Pgina JSP da Sun
(http://java.sun.com/products/jsp/) contm informaes sobre as JavaServer Pages (JSP). (http://www.php.net/) contm informaes sobre o PHP: Hypertext Preprocessor (PHP).
Pginas PHP
(http://www.coldfusion.com/Products/ ColdFusion/) contm informaes sobre ColdFusion.

Pgina do produto ColdFusion da Allaire Site XML.com
(http://www.xml.com) contm informaes sobre XML.
20
Introduo
CAPTULO 1
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tutorial do Dreamweaver
Este tutorial mostra como utilizar o Dreamweaver para denir um site local e como criar e editar documentos destinados Web. Utilize este tutorial para aprender a lidar com os recursos bsicos necessrios ao desenvolvimento de um site da Web e para entrar em contato com alguns dos novos recursos do Dreamweaver 3. Neste tutorial, voc criar um site da Web de uma empresa ctcia, Scaal Coffee, dedicada a produtos nos de caf. Ao visitar o site da Scaal na Web, os clientes podero ler sobre a empresa, examinar as ofertas especiais da semana e consultar as pginas de produtos do catlogo online da empresa.
21
Durante a visita ao site, voc aprender como realizar as seguintes tarefas: Denir um site local Criar um documento Utilizar as camadas para organizar uma pgina Converter as camadas em tabelas Anexar um comportamento a uma imagem Importar um documento em HTML do Microsoft Word Formatar o texto utilizando os estilos HTML Criar um mapa do site Criar vnculos Aplicar um modelo Criar um menu de salto
Nota: Este tutorial demonstra alguns recursos aos quais oferecido suporte apenas nos navegadores 4.0 ou posteriores.
Faa um tour guiado no Dreamweaver Antes de iniciar, assista aos lmes do Tour guiado na Ajuda do Dreamweaver para familiarizar-se com os recursos do programa.
1 2
No Dreamweaver, escolha Ajuda > Usando o Dreamweaver. Na lista de Contedo, situada na moldura da esquerda, clique em Introduo e, em seguida, clique em Introduo ao Dreamweaver. Clique no ttulo de um lme. Quando tiver terminado, feche o navegador.
3 4
22
Captulo 1
Visualizar o site da Web concludo Em seguida, visualize o site da Web concludo para ter uma idia do objetivo do seu trabalho.
1 2
Inicie o Dreamweaver. No Dreamweaver, escolha Arquivo > Abrir. Na caixa de dilogo de procura de arquivos, navegue at a pasta do aplicativo do Dreamweaver, abra a pasta do Tutorial e, em seguida, a pasta Scaal_site. Na pasta Scaal_site, selecione scaal_home.html e, em seguida, clique em Abrir, para abrir a home page da Scaal na janela do documento. No edite esta pgina. Ser criada a sua prpria verso desta pgina. Escolha Arquivo > Visualizar no navegador e, em seguida, selecione um navegador com o qual deseja exibir a home page da Scaal. Utilize um navegador 4.0 para exibir este site.
Mova o ponteiro sobre os trs itens no lado esquerdo da pgina (Our Story, Products e This Week) e observe que estes sero realados para indicar que so vnculos ativos. Clique nos vnculos, para poder explorar o site. Para retornar home page, clique no logotipo da Scaal, que est localizado na parte superior de cada pgina.
6 7
Feche o navegador quando terminar de examinar o site. Feche o Dreamweaver.
23
Como esto organizados os arquivos do tutorial Tanto os arquivos de HTML concludos quanto os parcialmente concludos que foram utilizados neste tutorial esto localizados na pasta Scaal_site, na pasta Tutorial. As imagens e os outros arquivos associados ao site esto nas subpastas de Scaal_site. O caminho completo para a pasta Scaal_site ir variar, dependendo de onde o Dreamweaver 3.0 for instalado. Cada arquivo tem um nome signicativo por exemplo: o arquivo HTML para a pgina concluda dos produtos Scaal chama-se products_index.html. Os arquivos parcialmente concludos, nos quais voc ir trabalhar, tm denominaes semelhantes s de seus correspondentes no site concludo, porm iniciam com DW3_. A verso parcialmente concluda de products_index.html, por exemplo, chamada de DW3_products_index.html.
Configurar a estrutura do site do tutorial

Antes de iniciar o tutorial, crie uma nova pasta, para a qual sero transferidos os arquivos do site da Scaal do tutorial. Posteriormente, voc poder utilizar a estrutura da pasta Sites para armazenar outros sites que criar.
1
Na raiz do seu disco local, crie uma nova pasta e denomine-a Sites por exemplo: C:\Sites (no Windows) ou Unidade de disco rgido:Sites (no Macintosh). Na pasta Dreamweaver/Tutorial, copie a pasta concluda Scaal_site para a pasta Sites.
24
Captulo 1
Definir um site local

Inicie o desenvolvimento do seu site denindo um site local para os arquivos contidos em Scaal_site. Um site o local de armazenamento de todos os documentos e arquivos pertencentes a um determinado site da Web. A denio de um site local delineia a estrutura do site que estiver sendo criado e informa ao Dreamweaver onde se planeja armazenar todos os arquivos do site. Dena um site local para cada site da Web criado atravs da utilizao do Dreamweaver. Para esse tutorial, a pasta Scaal_site ser especicada como pasta do site local.
1
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 de categorias. No campo Nome do site, digite my_tutorial. O nome do site permite identicar e selecionar com facilidade um site em uma lista de sites previamente denidos.
2 3
Clique no cone correspondente pasta, situado direita do campo Pasta raiz local, navegue at a pasta Sites/Scaal_site e clique em Abrir. Em seguida, clique em Selecionar (no Windows) ou Escolher (no Macintosh). O campo Pasta raiz local ser atualizado, exibindo o caminho at o site local.
Nota: O caminho completo para a pasta Scaal_site poder variar, dependendo de onde voc tiver criado a pasta Sites. 6
Clique em OK.
25
Clique em Criar quando for solicitado, caso prera criar um arquivo de cache para o site. Se o contedo da pasta Scaal_site for colocado em um cache, ser criado um registro dos arquivos existentes para que o Dreamweaver possa atualizar rapidamente os vnculos quando um arquivo for movido, renomeado ou excludo. A janela do site exibe agora uma lista de todas as pastas e arquivos do site local, my_tutorial. Essa lista tambm atua como um gerenciador de arquivos, permitindo copiar, colar, excluir, mover e abrir arquivos, da mesma forma que no localizador de arquivos ou no explorador em seu computador.
8 9
Deixe a janela do site aberta. Clique na janela do documento, para torn-la ativa.
26
Captulo 1
Criar a home page do site da Scaal

Agora que j conta com a estrutura onde ser armazenado o site da Scaal, voc criar uma home page para o site. medida que construir este documento, voc ir adicionar o ttulo da pgina, camadas, imagens, texto e vnculos a ele; o documento conter os mesmos componentes de desenho que a home page concluda da Scaal. Abra os seguintes componentes do espao de trabalho, se ainda no tiverem sido abertos: A paleta de objetos (escolha Janela > Objetos), que ser utilizada para adicionar objetos ao documento O inspetor de propriedades (escolha Janela > Propriedades), que ser utilizado para denir as propriedades ou atributos dos objetos contidos no documento Salve o documento Salve o documento em branco criado quando voc iniciou o Dreamweaver.
1 2
Escolha Arquivo > Salvar. Na caixa de dilogo Salvar como, selecione a pasta Sites/Scaal_site, onde ser salvo o arquivo. No campo Nome do aquivo, digite my_scaal_home.html. Clique em Salvar.
3 4
27
Definir o ttulo da pgina A denio do ttulo da pgina de um documento HTML auxilia os usurios a identicar e controlar a pgina onde estiverem navegando. Quando a pgina for exibida em um navegador, o seu ttulo aparecer na barra de ttulo deste. Quando a pgina for marcada, o seu ttulo aparecer na lista de marcadores. Se um documento for criado sem um ttulo de pgina, ele aparecer no navegador com o ttulo Documento sem ttulo.
1
Com a janela do documento ativa, escolha Modicar > Propriedades da pgina, para exibir as opes correspondentes. No campo Ttulo da caixa de dilogo Propriedades da pgina, digite Scaal Gourmet Coffee.
Clique em OK. O ttulo aparecer na barra de ttulo da janela do documento do Dreamweaver.
Criar um layout de pgina

Inicialmente, abra a verso concluda da home page da Scaal em um navegador, para servir de referncia durante o trabalho.
1
Escolha Arquivo > Abrir, navegue at a pasta Sites/Scaal_site, selecione scaal_home.html e, em seguida, clique em Abrir.
28
Captulo 1
Pressione F12, para visualizar a pgina em um navegador. A home page aparecer no navegador.
Mantenha a janela do navegador aberta no fundo para consult-la, se for necessrio.

3
Clique na janela do documento de scaal_home.html e, em seguida, escolha Arquivo > Fechar, para fechar o documento.
Adicionar camadas As camadas so ideais para criar layouts complexos de pginas, pois os elementos da pgina que foram colocados nas camadas podem ser facilmente reposicionados, bastando serem arrastados. A estrutura da home page criada atravs da utilizao de camadas e, em seguida, da converso do layout em layout de tabela, para que a pgina seja exibida com preciso nos navegadores tanto da verso 3.0 quanto da verso 4.0. No possvel converter as camadas em tabelas se o documento a ser convertido contiver camadas aninhadas ou sobrepostas.
1 2 3 4
Escolha Janela > Camadas, para abrir a paleta de camadas. Certique-se de que a caixa Evitar sobreposies esteja selecionada. Clique na janela do documento my_scaal_home, a m de torn-lo ativo. Escolha Inserir > Camada. Ser adicionada uma camada ao documento.
29
No painel Comuns da paleta de objetos, clique no boto Desenhar a camada.
Mova o ponteiro para a janela do documento; o ponteiro se transformar em uma ferramenta de desenho. No espao abaixo da primeira camada, arraste o ponteiro para desenhar uma nova camada. Repita as aes nas etapas 5 e 6 para desenhar uma outar camada. A sua pgina dever se assemelhar tela abaixo.
30
Captulo 1
Selecionar e manipular uma camada possvel alterar o posicionamento ou forma das camadas do documento.
1
Clique na borda da mesma. Aparecero alas em volta da camada selecionada:
Para redimensionar uma camada, clique na ala da mesma e arraste-a at que atinja o tamanho desejado. Para mover uma camada, siga um dos procedimentos abaixo: Utilize as teclas de seta. Mantenha pressionada a tecla Shift e utilize as teclas de seta para mover a camada cinco pixels na direo da seta. Clique na guia no canto superior esquerdo da camada e arraste-a at a posio desejada.
Adicionar uma imagem Agora, voc vai inserir a imagem do logotipo da Scaal no documento.
1
Clique em qualquer ponto da camada mais acima. A ao de clicar em uma camada coloca o ponto de insero dentro da mesma, sem selecion-la. Uma camada ativa contendo um ponto de insero tem esta aparncia:
Escolha Inserir > Imagem.
31
Na caixa de dilogo Selecionar a origem da imagem, localize a pasta Sites/ Scaal_site/Images, navegue at logo_scaal.gif e clique em Selecionar (no Windows) ou Escolher (no Macintosh). A imagem aparecer na camada.
Adicionar as imagens de navegao Agora, voc adicionar as imagens correspondentes aos botes de navegao. Depois de ter adicionado as imagens dos botes, adicione espao entre as mesmas: adicione um retorno de pargrafo depois de ter inserido as imagens.
1
Coloque o ponto de insero na camada de navegao (situada na parte inferior esquerda). No painel Comuns da paleta de objetos, clique no boto Inserir a imagem. Aparecer a caixa de dilogo Selecionar a origem da imagem. Na pasta Imagens do Scaal_site, navegue at btn_ourstory_up.gif e, em seguida, clique em Selecionar (no Windows) ou Escolher (no Macintosh), para inserir a imagem. A imagem Our Story (A nossa estria) aparecer na camada.
32
Captulo 1
Posicione o ponto de insero aps a imagem, na camada, e pressione a tecla Enter (no Windows) ou Return (no Macintosh), para adicionar espao entre esta imagem e a prxima a ser inserida.
Na paleta de objetos, clique no boto Inserir a imagem e, na caixa de dilogo que aparecer, selecione btn_products_up.gif e, em seguida, clique em Selecionar (no Windows) ou Escolher (no Macintosh). Posicione o ponto de insero aps a imagem, na camada, e pressione a tecla Enter (no Windows) ou Return (no Macintosh). Na paleta de objetos, clique no boto Inserir a imagem e, na caixa de dilogo que aparecer, selecione btn_thisweek_up.gif e, em seguida, clique em Selecionar (no Windows) ou Escolher (no Macintosh). O layout do seu documento dever ter uma aparncia semelhante a esta.
33
Nomear as imagens Nomeie todos os elementos nos seus documentos. Posteriormente, quando precisar selecionar ou criar uma referncia a uma determinada imagem, camada ou outro elemento do documento, ser fcil identic-lo. Como as referncias a estas imagens sero criadas mais abaixo no tutorial, nomeie-as desde j.
1 2
Na janela do documento, clique na imagem Our Story, para selecion-la. No campo Imagem, no inspetor de propriedades, digite ourstory:
Repita estas etapas, selecionando e nomeando as duas outras imagens do documento. Nomeie a segunda imagem products, e a terceira, thisweek.
Adicionar texto a uma camada Agora, voc adicionar texto ltima camada. No Dreamweaver, possvel digitar contedo diretamente em uma camada ou recort-lo de um outro documento e col-lo na camada. Nesse tutorial, voc adicionar texto camada copiando e colando o contedo de um arquivo de texto j existente.
1
Escolha Arquivo > Abrir; em seguida, na pasta Scaal_site, abra DW3_copy.txt. O documento DW3_copy.txt ser aberto em uma nova janela do documento no Dreamweaver. DW3_copy.txt o arquivo do qual voc copiar o texto.
2 3 4 5
Escolha Editar > Selecionar tudo, para selecionar o texto do documento. Escolha Editar > Copiar, para copiar o texto. Feche o documento DW3_copy.txt. No documento my_scaal_home, posicione o ponto de insero na camada inferior direita. Escolha Editar > Colar, para colar o texto na camada.
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 a fonte e o tamanho do texto.
34
Captulo 1
Antes de formatar o texto, crie alguns pargrafos. Adicione um retorno de pargrafo depois da primeira frase e depois da segunda frase.
1
Se o inspetor de propriedades ainda estiver fechado, escolha Janela > Propriedades. Com o ponto de insero em qualquer ponto da camada, pressione as teclas Control+A (no Windows) ou Command+A (no Macintosh), a m de selecionar todo o texto da camada. No segundo menu pop-up Formato do inspetor de propriedades, que apresenta a opo Fonte padro, selecione Arial, Helvetica, sans-serif. No menu pop-up Tamanho, selecione 3. O texto do documento ser automaticamente atualizado, reetindo as alteraes.
Adicionar uma cor de fundo a uma camada Tambm possvel utilizar o inspetor de propriedades para denir a cor do fundo de uma camada. A seleo da cor pode ser feita atravs do seletor de cores ou da digitao do cdigo hexadecimal da cor.
1
Clique na borda da camada que contm o texto para selecion-la. Quando a camada for selecionada, aparecero alas ao seu redor. No inspetor de propriedades, clique na caixa Cor do fundo. Aparecero a paleta de cores e o cone de conta-gotas. possvel utilizar o conta-gotas para escolher qualquer cor na rea de trabalho visvel, alm das cores da paleta de cores.
Mova o cone correspondente ao seletor de cores at o logotipo da Scaal e clique na cor dourada que circunda a letra S. A cor do fundo da camada ser atualizada.
35
Posicionar as camadas Agora que o desenho da pgina foi concludo tendo a organizado com camadas , voc converter as camadas em um layout de tabela, para que a pgina possa ser exibida para os usurios com navegadores da verso 3.0. Quando as camadas forem convertidas em uma tabela, o Dreamweaver criar colunas, linhas e clulas da tabela, a m de acomodar as camadas pgina. Para reduzir o nmero de colunas, linhas e clulas da tabela resultantes da converso do layout do documento, alinhe os elementos das camadas antes de converter o documento. Utilize o inspetor de propriedades para posicionar as camadas em um documento. Inicialmente, voc redimensionar e mover as camadas medida que dispe a pgina; em seguida, voc denir a posio das duas camadas inferiores, para que se alinhem no alto.
1
Redimensione a camada superior arrastando as suas alas para dentro, at que elas estejam em volta do logotipo da Scaal e do texto a seguir. Redimensione a camada de navegao (a camada inferior esquerda), arrastando as suas alas, at que elas estejam em volta das imagens. Mova a camada de texto, posicionando-a ao lado da camada de navegao. Selecione a camada e, em seguida, utilize as teclas de seta ou arraste a camada pela sua guia. As camadas no se sobreporo porque a opo Evitar sobreposies est selecionada na paleta de camadas.
36
Captulo 1
Se nem todos os campos das propriedades das camadas estiverem visveis no inspetor de propriedades, clique na seta de expanso, no canto inferior direito do inspetor de propriedades. Selecione a camada que contm as imagens de navegao. Mantenha pressionada a tecla Shift e selecione a camada que contm o texto. Ambas as camadas foram selecionadas. No campo T do inspetor de propriedades, digite 100px. Este procedimento posicionar com preciso ambas as camadas a 100 pixels do alto do documento.
Clique em qualquer ponto do documento para cancelar a seleo das camadas e para examinar o alinhamento das mesmas. Converter as camadas em uma tabela Como voc j disps a pgina, converta as camadas em uma tabela, para que a pgina seja exibida com preciso nos navegadores 3.0 e de verses mais avanadas.
1
Escolha Modicar > Modo de layout > Converter as camadas em tabela. Aparecer a caixa de dilogo Converter as camadas em tabela.
Na caixa de dilogo Converter as camadas em tabela, verique se, abaixo de Layout da tabela, as opes O menor: Fechar as clulas vazias e Utilizar GIFs transparentes esto selecionadas. Abaixo de Ferramentas de layout, verique se a opo Evitar sobreposies de camadas est selecionada.
37
Clique em OK. As camadas foram convertidas em uma tabela.
Nota: O Dreamweaver dene o espao entre as colunas e linhas das tabelas utilizando GIFs transparentes. Depois de ter convertido as camadas em uma tabela, voc ver o arquivo tranparent.gif na raiz da pasta do site. No mova este arquivo para a pasta Images; se o zer, os cones de imagens aparecero recortados na pgina exibida no navegador. 5 6
Feche a paleta de camadas. Salve o arquivo.
Criar imagens cambiveis

Uma imagem cambivel aquela cuja exibio alterada quando o ponteiro for movido sobre ela. Crie uma imagem cambivel anexando um comportamento a uma imagem. Um comportamento uma combinao entre um evento e uma ao. Os eventos so situaes que desencadeiam aes. Por exemplo: um evento chamado onClick pode ocorrer quando o usurio clicar em um boto, ou um evento chamado onMouseOver ser produzido quando o ponteiro do mouse passar sobre um objeto. As aes so parte do cdigo JavaScript previamento gravado, que executam tarefas especcas, como a abertura de uma janela do navegador, a reproduo de um som ou a interrupo de um lme Shockwave. Quando um comportamento for anexado a um elemento da pgina, ser especicada uma ao e o evento que a desencadeia. O Dreamweaver oferece diversas aes predenidas que podem ser anexadas aos elementos das pginas.
38
Captulo 1
Nesta parte do tutorial, voc aplicar aes de permuta de imagens s imagens Our Story, Products e This Week, de maneira que estas sejam realadas quando o mouse passar sobre elas (ou seja, quando o evento onMouseOver ocorrer). Por exemplo: quando a imagem Our Story aparecer na pgina, normalmente, ter esta aparncia:
Depois que um comportamento que inclua a ao de permuta de imagens for denido durante o evento onMouseOver, a imagem Our Story ter esta aparncia (a mesma imagem com uma cor de fundo diferente) quando o mouse for deslizado sobre ela:
Continue a trabalhar no arquivo da home page para anexar comportamentos s imagens de navegao da pgina. Em seguida, voc visualizar a pgina em um navegador, a m de testar os comportamentos.
1 2
Na janela do documento, clique na imagem Our Story para selecion-la. Escolha Janela > Comportamentos ou pressione F8 para abrir o inspetor de comportamentos, que contm uma lista de todos os comportamentos denidos para o elemento selecionado.
No menu pop-up Eventos de, a opo Navegadores 3.0 e mais avanados j dever estar sendo exibida. Se no estiver, selecione-a.
39
Adicione uma nova ao lista, clicando no boto de adio (+), e escolha a opo Permutar a imagem, no menu pop-up. Aparecer a caixa de dilogo Permutar a imagem. A lista Imagens apresenta todas as imagens da pgina, com a imagem Our Story selecionada. Esta a imagem original que ser substituda por outra realada quando o ponteiro do mouse passar sobre ela.
Clique em Procurar, para ir at a pasta Scaal_site/Images, selecione btn_ourstory_over.gif e, em seguida, clique em Selecionar (no Windows) ou Escolher (no Macintosh), para selecionar a imagem. Essa imagem substituir a original durante o evento onMouseOver.
Aceite as denies padro de pr-carga e restaurao de imagens. A opo Pr-carregar as imagens carrega a imagem permutada no cache do navegador durante o carregamento da pgina, a m de que no seja notada nenhuma pausa antes que aparea a imagem realada, quando o usurio mover pela primeira vez o ponteiro do mouse sobre a imagem Our Story. A opo Restaurar as imagens onMouseOut designa automaticamente a ao Restaurar a imagem permutada para o evento onMouseOut referente a essa imagem. Este procedimento retornar a imagem ao seu estado original quando o usurio mover o ponteiro do mouse para fora dela.
40
Captulo 1
Clique em OK, para fechar a caixa de dilogo Permutar a imagem e aplicar as alteraes feitas. O inspetor de comportamentos inclui agora os eventos e as aes que voc acabou de denir para a imagem. O evento onMouseOver aparecer com a ao Permutar a imagem; acima deste est o evento onMouseOut, com a ao Restaurar a imagem permutada. Este comportamento foi denido quando voc aceitou as opes padro da caixa de dilogo Permutar a imagem.
Repita as etapas 4 a 7 para anexar as aes de permuta de imagens e os eventos onMouseOver s imagens Products e This Week: Selecione a imagem Products. Na caixa de dilogo Permutar a imagem, dena a origem da imagem permutada Products como sendo btn_products_over.gif. Selecione a imagem This Week. Na caixa de dilogo Permutar a imagem, dena a origem da imagem permutada This Week como sendo btn_thisweek_over.gif.
9 10
Feche o inspetor de comportamentos. Pressione F12 para examinar o documento no seu navegador padro da Web. No necessrio salvar um documento para poder visualiz-lo. Todas as funes relativas ao navegador funcionaro durante a exibio de um documento.
11
Mova o ponteiro do mouse sobre as imagens Our Story, Products e This Week , para examinar como elas se alteram. Ao terminar de visualizar o arquivo, feche a janela do navegador. Retorne ao Dreamweaver e escolha Arquivo > Salvar, para salvar as alteraes feitas na home page.
12 13
Agora, voc passar a criar os arquivos que estaro vinculados sua home page.
41
Importar um documento em HTML do Word

O arquivo do tutorial correspondente pgina Our Story contm um documento criado no Microsoft Word e salvo como um documento em HTML. Importe este documento para o Dreamweaver e, em seguida, limpe os cdigos HTML do documento que no forem padronizados, utilizando um novo recurso do Dreamweaver denominado Limpar o HTML do Word. O recurso Limpar o HTML do Word proporciona opes para a limpeza ou correo dos rtulos HTML, denio de elementos CSS (Cascading Style Sheets - Folhas de estilos em cascata), denio de uma cor de fundo da pgina, remoo dos rtulos de markup especcos ao Word e converso dos tamanhos de fontes e cabealhos do Word em atributos de tamanho de HTML.
1
Com a pgina my_scaal_home ainda aberta, escolha Arquivo > Novo, para abrir um novo arquivo. Escolha Arquivo > Importar > Importar HTML do Word, para importar um documento em HTML do Word. Na caixa de dilogo Selecionar o arquivo em HTML do Word a ser importado, navegue at DW3_ourstory_word.html e, em seguida, clique em Selecionar (no Windows) ou Escolher (no Macintosh), para selecionar o arquivo em HTML do Word. Voc ser solicitado a salvar o documento.
42
Captulo 1
Clique em OK. O documento Our Story ser aberto atrs e a caixa de dilogo Limpar o HTML do Word aparecer na frente do documento.
Dentro dos objetivos deste tutorial, voc aceitar as denies padro da caixa de dilogo Limpar o HTML do Word. Estas opes denem a cor do fundo do documento como sendo branca, mantm uma parte considervel da formatao e limpam o cdigo HTML do arquivo.
5
Na caixa de dilogo Limpar o HTML do Word, todas as opes da guia Bsico devero estar selecionadas como padro. Verique se elas esto todas selecionadas e clique em OK. Aparecer o registro Limpar o HTML do Word, apresentando os resultados detalhados da limpeza.
Clique em OK. Voc ver um documento em branco. Este o novo documento criado antes da importao do documento em HTML do Word. O documento importado est atrs do documento em branco.
7 8 9
Feche o documento em branco. Clique no documento Our Story, para torn-lo a janela ativa. Escolha Arquivo > Salvar como, para salvar o documento Our Story; nomeie-o como my_ourstory.
Observe que o documento Our Story mantm a formatao de tabelas e os atributos de fontes do arquivo original em HTML do Word.
43
Formatar o texto utilizando os estilos HTML

Agora que j importou o documento Our Story, voc far alteraes na formatao do texto. A utilizao dos estilos HTML constitui uma maneira fcil de aplicar formatao a um documento. Um estilo HTML consiste de um ou mais rtulos HTML e pode incluir cores, fontes, tamanho e assim por diante. Os estilos HTML podem ser criados e aplicados a um pargrafo inteiro ou a um texto selecionado. Depois de criar um estilo HTML, voc poder aplic-lo a qualquer pgina do site. Ao contrrio dos estilos CSS (que aderem especicao Cascading Style Sheets), a formatao dos estilos HTML afetar apenas o texto ao qual aplicado ou que houver sido criado atravs da utilizao de um estilo HTML selecionado. Se for alterada a formatao de um estilo HTML criado por voc, o texto originalmente formatado com esse estilo no ser atualizado. Aplicar os estilos HTML Nesse tutorial, voc utilizar um estilo HTML para formatar o texto do documento Our Story.
1
Escolha Janela > Estilos HTML. Aparecer a paleta de estilos HTML.
Observe que os estilos na paleta se referem ao site my_tutorial. A paleta possui trs itens: Os dois primeiros itens so comandos do Dreamweaver: Limpar o estilo da seleo e Limpar o estilo do pargrafo. Utilize esses comandos para limpar os estilos existentes no texto selecionado no documento. O outro item um estilo HTML para pargrafos, denominado body, que foi criado para ser utilizado neste tutorial.
2
Certique-se de que a opo Aplicar esteja selecionada, no canto inferior esquerdo da paleta de estilos HTML. No documento my_ourstory, posicione o ponto de insero no primeiro pargrafo. possvel posicionar o ponto de insero em qualquer ponto de um pargrafo para aplicar um estilo a ele.
44
Captulo 1
Na paleta de estilos HTML, clique no estilo body. O texto no primeiro pargrafo ser reformatado de acordo com o novo estilo. Aplique o estilo body aos outros pargrafos do documento.
Criar os estilos HTML Em seguida, voc criar um estilo HTML para adicionar nfase palavra Scaal no documento.
1
Clique no cone de Novo estilo, na parte inferior da paleta de estilos HTML.
cone de Novo estilo
Aparecer a caixa de dilogo Denir o estilo HTML.
2 3
No campo Nome, digite scaal. Em Aplicar a, selecione Seleo Este procedimento aplicar o estilo faixa selecionada de texto, em vez do pargrafo inteiro.
In Ao aplicar, mantenha inalterada a denio padro (Limpar o estilo existente), que limpa qualquer estilo que houver sido aplicado ao texto selecionado ao aplicar o novo estilo.
45
Em Atributos da fonte, selecione os atributos desejados. Eis algumas sugestes: Fonte: Arial, Helvetica, sans-serif Tamanho: 3 Cor: #CC9933 (ou utilize o seletor de cores, para selecionar uma cor dourada) Estilo: clique em Outro e, em seguida, selecione nfase Clique em OK. O novo estilo ser adicionado paleta de estilos HTML. Observe o a que precede o estilo Scaal: este cone identica um estilo como sendo de uma seleo, ao invs de um pargrafo.
Ao aplicar um estilo a uma seleo, necessrio selecionar a faixa de texto a ser reformatado.
7 8
Na janela do documento, selecione a palavra Scaal, no primeiro pargrafo. Selecione o estilo scaal, na paleta de estilos HTML. O texto do documento exibir o novo estilo.
Aplique o estilo scaal a outras selees e, em seguida, feche a paleta de estilos HTML. Escolha Arquivo > Salvar, para salvar as alteraes feitas ao documento my_ourstory. Escolha Arquivo> Fechar, para fechar o documento.
10
11
46
Captulo 1
Criar um mapa visual do site

Utilize a opo Mapa do site do Dreamweaver para fornecer uma representao visual de alto nvel da estrutura de um site local. A exibio de Mapa do site tambm pode ser utilizada para incluir novos arquivos no site; adicionar, remover e alterar os vnculos, alm de criar um arquivo de imagem do site, que pode ser exportada e impressa a partir de um aplicativo de edio de imagens. Na janela Mapa do site, a home page de um site sempre aparecer acima do mapa do site; abaixo dela, possvel ver a quais arquivos a home page estar vinculada. Voc denir DW3_scaal_home.html como sendo a home page de my_tutorial site. Esta pgina semelhante home page que voc criou. Ela , em essncia, idntica ao documento my_scaal_home, porm a formatao das imagens e do texto j foram adicionadas. Existem diversas maneiras de se denir a home page de um site. A maneira mais fcil de se denir uma home page atravs da utilizao do menu contextual.
1
Clique na barra de ttulo da janela do site, se esta estiver visvel, ou escolha Janela > Arquivos do site. Na lista Pasta local, na janela do site, localize o arquivo DW3_scaal_home.html. Clique com o boto direito do mouse no cone (no Windows) ou pressione a tecla Control e clique no cone (no Macintosh) correspondente ao arquivo DW3_scaal_home.html. No menu contextual, escolha Denir como home page. Clique no cone correspondente ao Mapa do site, na rea superior esquerda da janela do site.
3 4
47
A janela do site aparecer e contar agora com duas exibies do site local: o mapa do site, esquerda, representa gracamente a estrutura atual do site da Scaal (com a pgina DW3_scaal_home.html como home page), enquanto que a lista direita apresenta o contedo da pasta local.
A pgina DW3_scaal_home no possui vnculos. Voc adicionar vnculos 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 vnculos so includos na home page.
Criar vnculos
As imagens esquerda da home page da Scaal guiam os visitantes para determinadas pginas do site da Scaal. Voc adicionar vnculos a partir das imagens Our Story, Products e This Week s pginas correspondentes. Voc perceber que h diversas maneiras de criar vnculos utilizando o Dreamweaver. Inicialmente, adicione um vnculo da imagem Our Story para a pgina Our Story, utilizando o inspetor de propriedades.
1
Em qualquer um dos dois painis da janela do site, clique duas vezes no cone correspondente ao arquivo DW3_scaal_home.html. O arquivo DW3_scaal_home.html ser aberto. Na janela do documento, clique na imagem Our Story para selecion-la. No clique duas vezes na imagem, seno o Dreamweaver abrir a caixa de dilogo Selecionar a origem da imagem.
48
Captulo 1
Escolha Janela > Propriedades, para abrir o inspetor de propriedades, caso ainda esteja fechado. O inspetor de propriedades exibe as informaes sobre a imagem selecionada.
Nota: O campo Vnculo contm um sinal de nmero (#), criado quando voc anexou imagem o comportamento Permutar a imagem. No remova o sinal de nmero, que ser substitudo pelo nome do arquivo do documento ao qual est sendo criado o vnculo. 4
No inspetor de propriedades, clique no cone correspondente pasta, direita do campo Vnculo. Na caixa de dilogo Selecionar o arquivo, procure my_ourstory.html e clique em Selecionar (no Windows) ou Escolher (no Macintosh), para selecionar o arquivo. O nome do arquivo aparecer no campo Vnculo, no inspetor de propriedades. Agora, voc ir adicionar um vnculo imagem Products 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.
49
7 8
Na janela do documento, clique na imagem Products para selecion-la. No inspetor de propriedades, arraste o cone indicador de arquivos (localizado ao lado do campo Vnculo) at a janela do site e indique o arquivo DW3_products_index.html. O nome do arquivo aparecer no campo Vnculo, no inspetor de propriedades da imagem Products.
Clique no cone de Mapa do site, na janela do site. O mapa do site ser atualizado, reetindo a adio do vnculo.
Um sinal de adio (+) ao lado de um arquivo no mapa do site indica que o arquivo possui vnculos a outros documentos. Clique no sinal de adio para exibir os arquivos associados; clique no sinal de subtrao () para reduzir a exibio do mapa do site. Agora, voc alterar um vnculo utilizando o menu contextual:
50
Captulo 1
Na janela do documento, clique com o boto direito do mouse (no Windows), ou pressione a tecla Control e clique na imagem This Week. Esta imagem est vinculada a um comportamento que permuta a imagem que estiver sendo exibida quando o usurio passar o ponteiro sobre a mesma. Vo alterar o vnculo, para que um arquivo seja aberto quando o usurio clicar na imagem.
10
Na caixa de dilogo Selecionar o arquivo, procure o arquivo DW3_thisweek.html e clique em Selecionar (no Windows) ou Escolher (no Macintosh), para selecionar o arquivo a ser aberto. Observe que o campo Vnculo do inspetor de propriedades atualizado, mostrando o nome do arquivo vinculado. Agora, voc criar um vnculo de texto.
11 12
Na janela do Dreamweaver, selecione a palavra products, no segundo pargrafo. Clique com o boto direito do mouse (no Windows) ou pressione a tecla Control e clique (no Macintosh) e, no menu contextual, escolha Criar vnculo. Na caixa de dilogo Selecionar o arquivo, procure o arquivo DW3_products_index.html e clique em Selecionar (no Windows) ou Escolher (no Macintosh), para selecionar o arquivo. Escolha Arquivo > Salvar, para que todas as alteraes feitas na home page sejam salvas. Escolha Arquivo> Fechar, para que a pgina seja fechada.
13
14
15
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 editadas 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 utilizam. A pgina de produtos da Scaal se vincula a diversas pginas que descrevem os produtos venda pela Scaal. Para criar um modelo, voc utilizar uma pgina de produto existente. A utilizao de um modelo garante que as pginas dos produtos tero um layout e formato idnticos. Nesta seo, voc criar um modelo a partir de uma pgina de produto j existente e o utilizar para criar novas pginas de produtos.
51
Exibir uma pgina de produto Inicie exibindo a pgina de produto do CD da Scaal em um navegador.
1
Na lista Pasta local, na janela do site, localize o cone correspondente ao arquivo product_cd.html e, em seguida, clique duas vezes nele, para abrir o arquivo no Dreamweaver. Pressione F12, para visualizar a pgina em uma janela de navegador.
3 4
Feche o navegador ao concluir a exibio da pgina. Feche o arquivo products_cd.html.
52
Captulo 1
Criar o modelo Voc criar um modelo a partir da verso do tutorial da pgina de produtos do CD da Scaal. Em seguida, voc utilizar este modelo para criar pginas adicionais de produtos.
1
Na lista Pasta local, na janela do site, clique duas vezes no cone correspondente ao arquivo DW3_products_cd.html, para abri-lo. Escolha Arquivo > Salvar como modelo. Aparecer a caixa de dilogo Salvar como modelo.
O modelo existente (product_page) foi criado e aplicado s pginas de produtos do site completo da Scaal. Ser criada a sua prpria verso deste modelo.
3
No campo Salvar como, altere o nome do modelo: digite my_product_page e, em seguida, clique em Salvar. Aparecer um novo documento na janela do documento. Note o identicador de modelo, assim como a extenso de arquivo .dwt.
53
Modificar o modelo A esta altura, o seu novo modelo idntico pgina a partir da qual foi salvo. necessrio que o layout de certas reas da pgina sejam idnticas em todas as pginas de produtos: a fotograa, nome, descrio e preo do produto. Voc ver como denir estas reas no modelo. Cada modelo contm regies bloqueadas e editveis. As regies bloqueadas podem ser editadas apenas no modelo; elas aparecem em uma cor realada em todas as pginas s quais o modelo for aplicado. As regies editveis so alocadores de espao para o contedo exclusivo de cada pgina que utiliza esse modelo. As regies editveis esto realadas em um modelo que tenha sido aplicado.
1
No modelo my_product_page.dwt, na janela do documento, selecione e exclua a imagem do CD; em seguida, digite Insert image here (Inserir a imagem aqui) na clula da tabela. Selecione o texto digitado.
Escolha Modicar > Modelos > Nova regio editvel. Aparecer a caixa de dilogo Nova regio editvel.
54
Captulo 1
No campo Nome, digite Image como nome desta regio do modelo.
Clique em OK. Note que o texto passou a car realado, o que indica que esta uma regio editvel do modelo.
Na janela do documento, selecione Scaal Sound 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 Name e, em seguida, clique em OK. Na janela do documento, a regio passar a ser realada e identicvel pelo nome que voc deu.
Na janela do documento, selecione o texto de descrio do produto e, em seguida, escolha Modicar > Modelos > Nova regio editvel, para tornar editvel esta seo do modelo. No campo Nome da caixa de dilogo Nova regio editvel, digite Description e, em seguida, clique em OK. Na janela do documento, a regio passar a ser realada e identicvel pelo nome que voc deu.
10
Escolha Arquivo > Salvar, para que o modelo seja salvo. Aparecer a caixa de dilogo Atualizar as pginas, perguntando se deseja atualizar todos os documentos no site local. A seleo da opo Sim atualizar as pginas no site completo da Scaal, que voc no deseja atualizar.
11
Clique em No e, em seguida, em Fechar, para fechar a caixa de dilogo Atualizar as pginas. Feche o modelo.
12
55
Aplicar o modelo Agora, voc utilizar o modelo para criar uma nova pgina de produto.
1
Escolha Arquivo > Novo a partir de modelo. Aparecer a caixa de dilogo Selecionar o modelo.
Na lista de modelos, selecione my_product_page como modelo a ser aplicado e, em seguida, clique em Selecionar. Aparecer um documento novo e sem ttulo.
As regies mais escuras do documento so editveis; todas as outras regies do documento esto bloqueadas, no podendo ser editadas.
3
Salve o documento e nomeie o arquivo my_products_mug.html.
56
Captulo 1
Editar o documento Com as regies editveis denidas, a atualizao das pginas se torna fcil. Voc substituir o texto alocador de espao por uma imagem e adicionar texto para criar a pgina de produtos Commuter Mug da Scaal.
1 2
Coloque o ponto de insero na regio Imagem. Escolha Inserir > Imagem. Na caixa de dilogo que aparecer, selecione mug.jpg e, em seguida, clique em Selecionar (no Windows) ou Escolher (no Macintosh), para selecionar a imagem. Exclua o texto alocador de espao da imagem Insert image here. Na regio Nome da janela do documento, digite um nome para o produto, como Commuter Mug e exclua o texto alocador de espao. Na regio Descrio da janela do documento, digite um texto descritivo sobre a caneca e exclua o texto alocador de espao. Salve o documento Feche o documento.
3 4
6 7
Na prxima seo do tutorial, voc ir vincular documentos de pginas de produtos pgina principal de produtos da Scaal. As pginas de produtos que voc vincular foram criadas com um modelo semelhante.
57
Criar um menu de salto

Um menu de salto um menu pop-up de opes que se vinculam e abrem arquivos em uma janela de um navegador. Voc criar um menu de salto que permitir ao cliente saltar rapidamente da pgina do ndice de produtos para as pginas especcas aos produtos do site da Scaal. Antes de criar o menu de salto, visualize a pgina concluda.
1
Na janela do site, clique duas vezes no cone correspondente ao arquivo products_index.html, para abri-lo. Pressione F12, para visualizar a pgina no navegador.
Clique na seta situada direita do menu pop-up Selecionar um produto, para exibir o menu de seleo do mesmo. Selecione um produto a ser exibido. Ao terminar de examinar os arquivos, feche a janela do navegador. Feche o arquivo products_index.
4 5
58
Captulo 1
Inserir um menu de salto O menu de salto que voc criar ir conter um aviso de seleo, a m de informar as opes aos visitantes. Voc tambm criar dois comandos de menu, a serem vinculados a pginas de produtos.
1
Na janela do site, clique duas vezes no cone correspondente ao arquivo DW3_products_index.html, para abri-lo. Selecione e exclua o texto insert jump menu here (Inserir o menu de salto aqui). Mantendo o ponto de insero na clula da tabela, escolha Inserir > Objeto de formulrio > Menu de salto. Aparecer a caixa de dilogo Menu de salto.
No campo Texto, digite Select a product (Selecione um produto). Este texto solicitar uma ao por parte do usurio. Em Opes, selecione a opo Selecionar o primeiro item aps alterar a URL. Este procedimento denir a primeira entrada de um menu como sendo o item ao qual o menu retornar depois que o usurio selecionar uma opo no menu de salto.
6 7 8
Clique no boto de adio (+) para adicionar um outro item de menu de salto. No campo Texto, digite Compact disc. No campo Aps selecionar, v para a URL, clique em Procurar, para ir at o arquivo DW3_products_cd.html. Clique em Selecionar (no Windows) ou Escolher (no Macintosh), para selecionar o arquivo a ser aberto quando o item for selecionado. Clique no boto de adio (+) para adicionar um outro item de menu de salto.
59
10
No campo Texto, digite Coffee mug (Caneca de caf). Em seguida, clique em Procurar, para ir at o arquivo DW3_products_mug.html. Clique em Selecionar (no Windows) ou Escolher (no Macintosh), para selecionar o arquivo a ser aberto quando o item for selecionado. A caixa de dilogo Inserir menu de salto que voc criou dever se assemelhar tela abaixo.
11 12
Clique em OK, para fechar a caixa de dilogo. Salve o documento O menu de salto no funciona na janela do documento. necessrio visualizlo em um navegador, a m de testar os vnculos.
Verificar o site
Como j foram realizadas todas as edies necessrias aos arquivos incompletos, visualize o site inteiro em um navegador para saber qual ser a sua aparncia.
1
Com a pgina DW3_scaal_home aberta, pressione F12 para abri-la em um navegador. Clique nas imagens Our Story, Products e This Week, a m de exibir as outras pginas editadas do site. Tente selecionar os itens do menu de salto na pgina Products. Quando terminar de vericar o site que voc criou, feche a janela do navegador e, em seguida retorne ao Dreamweaver e escolha Arquivo > Fechar, para que a home page seja fechada.
60
Captulo 1
CAPTULO 2
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Princpios bsicos do Dreamweaver
O trabalho inicial com o Dreamweaver to fcil quanto abrir ou criar um novo documento HTML. Porm, para experimentar amplamente o Dreamweaver, voc dever compreender os conceitos bsicos subjacentes rea de trabalho do programa e saber escolher as opes mais adequadas ao seu estilo de trabalho. Sobre a rea de trabalho do Dreamweaver A rea de trabalho do Dreamweaver exvel, adaptando-se a diversos estilos de trabalho e nveis de experincia. Ela possui alguns componentes que sero utilizados constantemente: A janela do documento exibe o documento atual medida que criado e editado. O Iniciador contm botes para abrir e fechar os inspetores e as paletas utilizadas com maior freqncia. Os cones no Iniciador esto repetidos no Mini-iniciador, na parte inferior da janela do documento, para facilitar o acesso quando o Iniciador estiver fechado. possvel denir quais cones aparecero no Iniciador utilizando o painel de paletas utuantes da caixa de dilogo Preferncias. A paleta de objetos contm botes para criar vrios tipos de objetos, como imagens, tabelas, camadas, etc. O inspetor de propriedades exibe as propriedades do objeto ou texto selecionado e permite modic-las. Os menus contextuais facilitam o acesso rpido a comandos teis relacionados seleo ou rea atual.
61
As paletas utuantes de encaixe permitem combinar as janelas, inspetores e paletas utuantes em uma ou mais janelas com guias.
Iniciador
Paleta de objetos
Menu contextual Janela do documento
Mini-iniciador Inspetor de propriedades
Como utilizar o menu Janela O menu janela proporciona acesso fcil a todas as janelas, inspetores e paletas do Dreamweaver. Uma marca de seleo prxima a um item no menu Janela indica que o item com nome est aberto. possvel, no entanto, que ele esteja obscurecido por outras janelas. Para exibir um item que no apresenta uma marca de seleo prxima ao seu nome, selecione-o no menu. Em geral, se voc no tiver certeza sobre onde procurar um recurso do Dreamweaver, tente o menu Janela. Como utilizar as paletas flutuantes de encaixe A maioria das paletas e inspetores do Dreamweaver podem ser encaixados ou combinados em uma nica paleta utuate com guias. Este recurso facilita o acesso s informaes necessrias sem desordenar o seu espao de trabalho. O Iniciador, o inspetor de propriedades e a janela do site do site no podem ser encaixados.
62
Captulo 2
Para combinar duas ou mais paletas a fim de criar uma paleta com guias: 1
Arraste a guia (no a barra de ttulos) de uma paleta utuante sobre outra paleta utuante. Quando aparecer uma borda realada ao redor da paleta de destino, solte o boto do mouse. Clique em qualquer guia na janela para trazer a paleta correspondente para a frente.
Como a paleta de objetos no possui uma guia, ela no pode ser encaixada com outras paletas mediante o arraste; no entanto, possvel combinar outras paletas com a paleta de objetos, arrastando as guias daquelas sobre esta.
Para remover uma paleta da paleta com guias:
Arraste a sua guia para fora da janela.

Para mover uma paleta de uma paleta com guias para outra:
Arraste a sua guia para a outra paleta com guias. Quando aparecer uma borda realada ao redor da paleta de destino, solte o boto do mouse. Como definir as preferncias das paletas flutuantes Utilize as preferncias de paletas utuantes para especicar quais paletas e inspetores devero aparecer sempre na frente da janela do documento, e quais podero ser obscurecidos pela janela do documento. Utilize tambm este painel de preferncias para especicar as paletas e inspetores que aparecero no Iniciador. Todos os itens que aparecem no Iniciador aparecero tambm no Mini-iniciador.
Para especificar o local em que cada paleta aparecer em relao janela do documento: 1
Escolha Editar > Preferncias e, em seguida, selecione Paletas utuantes, na lista de categorias. Como padro, todas as janelas, paletas e inspetores so selecionados de maneira a aparecerem na frente da janela do documento.
Cancele a seleo das janelas, paletas e inspetores que devero aparecer na parte de trs da janela do documento. Por exemplo: se desejar que a janela do documento obscurea o inspetor de origem de HTML, cancele a seleo da opo HTML. A partir de agora, o inspetor de origem de HTML aparecer na frente da janela do documento somente quando for ativado. Da mesma forma, se preferir que a janela do documento obscurea quaisquer paletas utuantes que tiver adicionado ao personalizar o Dreamweaver, cancele a seleo de Todos os outros utuadores.
63
Sobre a janela do documento A janela do documento exibe o documento atual aproximadamente com a mesma aparncia como ser visualizado em um navegador da Web. A barra de ttulo na janela do documento exibe o ttulo da pgina e, entre parnteses, o nome do arquivo e um asterisco, caso o arquivo contenha alteraes no salvas. Os rtulos que controlam o texto ou objeto selecionado aparecem no seletor de rtulos, na parte inferior esquerda da janela do documento. Clique em um destes rtulos para realar o seu contedo na janela do documento. Clique em <body>, para selecionar o contedo do corpo inteiro do documento. O conjunto de botes na parte inferior direita da janela do documento denominado Mini-iniciador, que uma verso menor do Iniciador. Os botes que aparecem como padro no Mini-iniciador so idnticos aos que aparecem no Iniciador: eles abrem a janela do site, paleta de bibliotecas, paleta de estilos HTML, paleta de estilos CSS, inspetor de comportamentos, paleta de histrico e o inspetor de origem de HTML. A estimativa de tamanho do documento, o tempo de descarga da pgina, incluindo todos os elemntos dependentes, como as imagens e os lmes Shockwave, aparecero esquerda do Mini-iniciador. Consulte Como vericar o tempo e o tamanho da descarga, na pgina 172. 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 65.
Tamanho do documento e tempo de descarga
Seletor de rtulos
O menu pop-up Tamanho da janela
Mini-iniciador
64
Captulo 2
Como redimensionar a janela do documento As dimenses atuais da janela do documento (em pixels) aparecero na barra de status da mesma. A ao de clicar no tamanho da janela exibe o menu pop-up Tamanho da janela, que permite denir o tamanho da janela, de modo a caber nos diversos tamanhos comuns de monitores. Para ajud-lo a desenhar uma pgina com boa aparncia em um tamanho especco (ou em diversos tamanhos), a janela do documento poder ser ajustada a qualquer um dos tamanhos listados no menu pop-up.
Nota: O tamanho da janela fornecido como as dimenses internas da janela do navegador sem bordas, enquanto que o tamanho do monitor est listado entre parnteses. Assim, por exemplo: a opo 536 x 196 (640 x 480, padro) o tamanho da janela a ser utilizado se for provvel que os visitantes estejam utilizando o Internet Explorer ou o Netscape Navigator em suas conguraes padro em um monitor de 640 x 480. 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.
Para alterar os valores na lista do menu pop-up Tamanho da janela: 1 2
Escolha Editar os tamanhos, no menu pop-up Tamanho da janela. Clique em qualquer dos valores de Largura e Altura na lista Tamanhos de janela, e digite um novo valor. Para que a janela do documento se ajuste a uma largura especca (mantendo a altura inalterada), selecione um valor de Altura e exclua-o.
Clique no campo Descrio, para inserir um texto descritivo sobre um tamanho especco.
Para adicionar um novo tamanho ao menu pop-up Tamanho da janela: 1 2 3 4
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. Clique no campo Descrio, para inserir um texto descritivo sobre o tamanho adicionado. 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.
65
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 65. Velocidade da conexo
determina a velocidade da conexo (em quilobits por segundo) utilizada no clculo do tamanho de descarga. O tamanho da descarga da pgina exibido na barra de status. O tamanho da descarga de imagens exibido no inspetor de propriedades, quando uma imagem for selecionada.
faz com que o Dreamweaver exiba o Mini-iniciador na parte inferior da janela do documento. Os botes no Miniiniciador abrem janelas, paletas e inspetores.
Mostrar o Mini-iniciador na barra de status
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 origem de HTML. Para mostrar ou ocultar o inspetor de propriedades, escolha Janela > Propriedades.
A maioria das alteraes feitas s propriedades ser imediatamente aplicada janela do documento. Para algumas propriedades, necessrio clicar fora de seus campos de texto para a edio de propriedades ou pressionar a tecla Tab, para alternar para outra propriedade e aplicar a alterao. O tipo de elemento selecionado determinar as propriedades que aparecero no inspetor de propriedades. Para obter informaes sobre as opes especcas, 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 casos, possvel que certas propriedades pouco conhecidas no apaream mesmo no inspetor de propriedades expandido.
66
Captulo 2
Como utilizar o Iniciador O Iniciador contm botes para abrir e fechar vrias paletas, janelas e inspetores. Para mostrar ou ocultar o Iniciador, escolha Janela > Iniciador.
Para alternar a orientao do Iniciador de horizontal para vertical, clique no cone de orientao, situado no canto inferior direito. Para obter mais informaes sobre os botes padro do Iniciador, consulte Sobre a janela do site, na pgina 144, Como utilizar a paleta de bibliotecas, na pgina 378, Como formatar o texto com os estilos HTML, na pgina 184, Como utilizar a paleta de estilos CSS, na pgina 195, Como utilizar o inspetor de comportamentos, na pgina 300, Sobre a paleta de histrico, na pgina 95 ou Como utilizar o inspetor de origem de HTML, na pgina 339. Como personalizar o Iniciador Utilize as preferncias das paletas utuantes para determinar os itens que aparecero no Iniciador e no Mini-iniciador, situados na parte inferior da janela do documento.
Para especificar as paletas flutuantes que aparecero no Iniciador e no Miniiniciador: 1
Escolha Editar > Preferncias e, em seguida, selecione Paletas utuantes, na lista de categorias. Os itens selecionados para a exibio no Iniciador e no Mini-iniciador esto listados na caixa Mostrar no Iniciador. Como padro, h sete itens listados.
Para adicionar um item ao Iniciador e ao Mini-iniciador, clique no boto com o sinal de adio (+). Para remover um item do Iniciador e do Mini-iniciador, realce-o e clique no boto com o sinal de subtrao (-). Para mover um item para cima ou para baixo na lista, o que corresponde a mov-lo respectivamente para a esquerda ou direita no Iniciador e no Miniiniciador, selecione o item e, em seguida, clique nas teclas de seta. Clique em OK. O Iniciador e o Mini-iniciador sero alterados, exibindo os itens especicados.
67
Como utilizar a paleta de objetos A paleta de objetos contm botes para inserir objetos, como tabelas, camadas e imagens. Para mostrar ou ocultar a paleta de objetos, escolha Janela > Objetos. Para inserir um objeto, clique no boto correspondente da paleta de objetos ou arraste o cone do boto at a janela do documento. Mantenha pressionada a tecla Control (no Windows) ou Option (no Macintosh) enquanto insere um objeto, a m de ignorar a caixa de dilogo de insero de objetos e inserir um objeto vazio alocador de espao do tipo especicado. 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. Como padro, a paleta de objetos contm seis painis: Caracteres, Comuns, Formulrios, Molduras, Cabealho e Invisveis. Utilize o menu pop-up situado no alto da paleta para alternar entre os painis. Voc pode modicar qualquer objeto da paleta ou criar novos; consulte Como alterar a paleta de objetos, na pgina 388. Para obter informaes sobre as opes de cada painel, consulte os tpicos relacionados na Ajuda do Dreamweaver.
A paleta de objetos contm os seguintes painis: O painel Comuns contm os objetos mais comumente utilizados, como Imagem, Tabela e Camada. O painel Caracteres contm caracteres especiais, como os smbolos de copyright e marca registrada, alm de aspas curvas. Observe que possvel que estes smbolos no sejam exibidos corretamente nos navegadores diferentes das verses 3 e 4 do Navigator e das verses 3 e 4 do Internet Explorer. O painel Formulrios contm botes para criar os formulrios e seus elementos. O painel Molduras contm estruturas comuns dos conjuntos de molduras.
68
Captulo 2
O painel Cabealho contm botes para adicionar diversos elementos HEAD, como os rtulos META, KEYWORDS e BASE. O painel Invisveis contm botes para criar objetos que no so visveis na janela do documento, como as ncoras com nome. Escolha Exibir > Elementos invisveis, para mostrar os cones que marcam a posio desses objetos. Clique nos cones dos elementos invisveis na janela do documento, a m de selecionar os objetos e alterar as suas propriedades. Consulte Sobre os elementos invisveis, na pgina 90. Algumas conguraes das preferncias gerais afetam a paleta de objetos. Para modic-las, escolha Editar > Preferncias e, em seguida selecione Geral. Ao inserir objetos, como os imagens, tabelas, roteiros e elementos HEAD, uma caixa de dilogo solicitar informaes adicionais. Essas caixas de dilogo podem ser suprimidas, ao se desativar a opo Mostrar a caixa de dilogo quando inserir objetos. 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. As preferncias da paleta de objetos permitem exibir o contedo da paleta como Apenas texto, Apenas cones ou Texto e cones. Como utilizar a paleta de histrico A paleta de histrico mantm um registro de cada etapa do seu trabalho no Dreamweaver. Para exibir a paleta de histrico, escolha Janela > Histrico.
possvel utilizar a paleta de histrico para desfazer diversas etapas simultaneamente, para execut-las novamente e para automatizar as etapas ao criar novos comandos. Para obter mais detalhes, consulte Sobre a paleta de histrico, na pgina 95.
69
Como utilizar os menus contextuais O Dreamweaver utiliza amplamente os menus contextuais, que se constituem em um mtodo para acessar rapidamente os comandos e propriedades mais teis, relativos ao objeto ou janela que est sendo trabalhada. Os menus contextuais contm apenas a lista dos comandos que pertencem seleo atual.
Para poder utilizar os menus contextuais: 1
Abra o menu contextual, clicando com o boto direito do mouse (no Windows) ou pressionando a tecla Control e clicando no objeto ou janela (no Macintosh). Selecione o comando no menu contextual e solte o boto do mouse.
70
Captulo 2
Como utilizar o inspetor de origem de HTML O inspetor de origem de HTML exibe o cdigo utilizado pelos navegadores para exibir o documento como uma pgina da Web. Para mostrar ou ocultar o inspetor de origem de HTML, escolha Janela > Origem de HTML. As modicaes feitas na janela do documento sero transpostas imediatamente para o inspetor de origem de HTML. Quando voc digitar HTML no inspetor de origem de HTML e clicar fora do mesmo, as alteraes correspondentes aparecero na janela do documento. Para obter mais informaes, consulte Como utilizar o inspetor de origem de HTML, na pgina 339. Para a edio secundria dos rtulos HTML, possvel utilizar o Quick Tag Editor, em vez de exibir o inspetor de origem de HTML. 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 rtulo HTML na janela do documento, na pgina 340.
Como definir as preferncias

O Dreamweaver oferece denies de preferncias que controlam a aparncia geral da interface do usurio do programa, bem como as opes relativas a recursos especcos, como as camadas, folhas de estilos, HTML, editores externos e visualizao de pginas nos navegadores. Este guia do usurio do oferece informaes sobre determinadas opes das preferncias, juntamente com o recurso ou tpico associado. Este guia descreve apenas as opes mais comuns das preferncias. Para obter informaes sobre uma determinada opo das preferncias, consulte o tpico correspondente na Ajuda do Dreamweaver. 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. 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.
71
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: 1
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.
Usando o Dreamweaver com outros aplicativos

O Dreamweaver adapta o seu desenho da Web e o processo de desenvolvimento facilitando, assim, o trabalho com outros aplicativos. Para obter informaes sobre o trabalho com outros aplicativos, como navegadores, editores de HTML e de imagens, e ferramentas de animao, consulte os seguintes tpicos: Para obter informaes sobre a utilizao do Dreamweaver com outros editores de HTML, como HomeSite ou BBEdit, consulte Como utilizar os editores de HTML externos, na pgina 354. Podem ser especicados os navegadores preferidos para visualizar o site. Consulte Como visualizar em navegadores, na pgina 170. O editor de imagens externo, como Macromedia Fireworks, pode ser iniciado no Dreamweaver. Consulte Como utilizar um editor de imagens externo, na pgina 205. possvel congurar o Dreamweaver para que inicie um editor diferente, de acordo com o tipo de arquivo. Consulte Como iniciar um editor externo de mdia, na pgina 284. Para obter informaes sobre a incluso de animao no seu site com os lmes Flash, consulte Como inserir lmes Flash, na pgina 288. Para saber como tornar o site interativo utilizando os lmes Shockwave, consulte Como inserir lmes Shockwave, na pgina 286.
72
Captulo 2
CAPTULO 3
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como criar sites e documentos
Um site da Web um conjunto de documentos vinculados com atributos compartilhados, como tpicos relacionados, projeto semelhante ou uma nalidade compartilhada. possvel criar documentos personalizados com o Dreamweaver. Porm, a maioria dos criadores para a Web criam sites coerentes, e no apenas simples conjuntos de documentos da Web no-relacionados. O Dreamweaver constitui uma ferramenta para a criao e gerenciamento de sites, assim como para a criao e edio de documentos. A criao de um site a partir de um conjunto irregular de documentos j existentes muito mais difcil do que a criao de novos documentos a partir do projeto de um site em comum. Para obter os melhores resultados, projete e planeje o seu site antes de criar qualquer pgina que o integrar.
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 e editar os documentos HTML, na pgina 84. Mas no tente criar os documentos denitivos antes de congurar o site.
A primeira etapa para criar um site da Web o planejamento. Consulte Sobre o planejamento de sites, na pgina 74. A etapa seguinte envolve a congurao da estrutura bsica do site; consulte Como criar um site local, na pgina 77. Se voc j tiver um site em um servidor da Web e desejar utilizar o Dreamweaver para edit-lo, consulte Como editar e atualizar um site j existente, na pgina 78. Uma vez criado o site local, voc poder preench-lo com documentos. Os documentos so as pginas vistas pelos usurios quando visitam um site da Web. Podem conter texto e imagens, bem como um contedo mais sosticado, como som, animao e vnculos a outros documentos. Durante a criao e o trabalho com os documentos, o Dreamweaver gera automaticamente o HTML subjacente. Utilize o inspetor de origem de HTML para examinar ou editar o cdigo de origem de HTML.
73
possvel criar documentos no Dreamweaver a partir de pginas HTML em branco ou modelos. Os documentos HTML criados em outros aplicativos tambm podem ser abertos e modicados. Consulte Como criar e editar os documentos HTML, na pgina 84. Utilize a caixa de dilogo Propriedades da pgina para congurar um documento e denir os elementos bsicos da pgina. O ttulo da pgina identica o documento para o usurio. As imagens e a cor do fundo, as cores do texto e dos vnculos personalizam a pgina e distinguem o texto comum do hipertexto. Consulte Como denir as propriedades do documento, na pgina 93. Adicione texto aos documentos atravs de digitao na janela do documento ou da colagem do texto a partir de outras origens. Adicione imagens, rguas horizontais e outros objetos utilizando a paleta de objetos ou os comandos do menu Inserir. Consulte Como adicionar texto e inserir objetos, na pgina 86. 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. Consulte Como selecionar os elementos na janela do documento, na pgina 89. Para auxili-lo a gerenciar o seu site, o Dreamweaver exibe os arquivos do site como uma lista de arquivos ou como um mapa do site. possvel utilizar o mapa do site para criar e exibir rapidamente os prottipos de seus sites da Web. Consulte Como trabalhar com os arquivos do site, na pgina 82 e Como exibir a estrutura do site, na pgina 127. Quando j houver alguns documentos no site, possvel criar vnculos para conect-los a outros documentos do site ou de sites remotos, a endereos eletrnicos ou roteiros. Consulte Como criar os vnculos, na pgina 113. Por ltimo, dena um site remoto que corresponda ao site local, e carregue para ele os arquivos locais, a m de tornar as pginas visveis aos visitantes. Consulte Como congurar um site remoto, na pgina 140.
Sobre o planejamento de sites

No Dreamweaver, o termo site pode se referir a um site da Web ou a um local de armazenamento de documentos pertencentes a um site da Web. A maneira usual de se congurar um site envolve a criao de uma pasta no disco local, que contm todos os arquivos do site, e a criao e edio de documentos contidos nesta pasta. Estes arquivos so, ento, periodicamente copiados para um servidor da Web, que permite a exibio do site por outras pessoas. Esta abordagem melhor do que criar e editar arquivos no prprio site ativo da Web, pois ela permite testar as alteraes no site local antes de torn-las publicamente visualizveis e, em seguida, efetuar uma srie de alteraes simultneas ao site.
74
Captulo 3
Como planejar a estrutura do site O cuidado na organizao do site desde o incio pode, posteriormente, 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 difcil de ser acessada e com demasiados arquivos, ou que os arquivos relacionados estejam espalhados em pastas com nomes semelhantes. Coloque pginas relacionadas na mesma pasta; 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.
Classifique o seu site em categorias. Decida onde colocar itens como imagens e arquivos de som. Por exemplo: conveniente colocar todas as imagens em um nico local, para facilitar a localizao das mesmas quando forem inseridas em uma pgina. Algumas vezes, os criadores colocam todos os itens a serem utilizados em um site e que no forem HTML em uma pasta denominada Assets. possvel que esta pasta contenha outras pastas por exemplo: para imagens, lmes Shockwave e arquivos de som. Alternativamente, possvel que haja uma pasta Assets para cada grupo de pginas relacionadas no site, se os diversos grupos no compartilharem muitos recursos.
Site 1 Site 2
my_site1 (root folder)
my_site2 (root folder)
About_the_Company
About_the_Company
Catalog
Assets
Assets (for whole site)
Catalog
index.html (home page)
Assets
Idealmente, 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, carregar tudo para o site remoto, o Dreamweaver se encarregar de duplicar com exatido a estrutura local no site remoto.
Utilize a mesma estrutura para os sites locais e remotos.
75
Como planejar a navegao no site 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. necessrio que os visitantes possam saber em que local do seu site eles esto a qualquer momento e como retornar pgina de nvel superior.
Voc est aqui.
necessrio que os visitantes localizem qualquer informao que desejarem com facilidade.
Como buscar e ndices. Comentrios. Fornea uma maneira atravs da qual os visitantes possam 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. Utilize as ferramentas de navegao do Dreamweaver para auxili-lo a criar o site. Consulte Vnculos e navegao, na pgina 109 para obter mais informaes. Como planejar a utilizao de modelos e bibliotecas Os modelos e bibliotecas do Dreamweaver permitem a reutilizao de layouts e elementos de pgina em vrios tipos de documentos. Contudo, mais difcil aplicar layout e elementos reutilizveis a um conjunto de pginas j existentes do que criar novas pginas utilizando estes elementos desde o incio. Se muitas pginas forem utilizar o mesmo layout, planeje e desenhe um modelo para este layout. Em seguida, voc poder criar novas pginas com base neste modelo, e se decidir alterar o layout de todas estas pginas, basta alterar o modelo.
Utilizar os modelos. Nota: Existem algumas restries quanto s alteraes que podem ser feitas nos 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 exibilidade de uso fora dos ambientes de colaborao.
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 aparecer em todas as pginas que os utilizarem.
Utilizar os itens de biblioteca.
Para obter mais informaes sobre como reutilizar os layouts e elementos de uma pgina, consulte Modelos e bibliotecas, na pgina 359 .
76
Captulo 3
Como criar um site local

Um site local a rea local de armazenamento dos arquivos do seu site na Web requer um nome e uma pasta raiz local onde voc planeja armazenar todos os arquivos do site. Crie um site local para cada site da Web a ser utilizado. A pasta raiz local do site dever ser uma pasta congurada especicamente para ele. No utilize o seu disco ou a pasta do aplicativo do Dreamweaver como raiz do site. Uma boa abordagem organizacional consiste na criao de uma pasta denominada Sites e na criao de pastas raiz locais dentro desta, uma para cada site a ser utilizado.
Para criar um site local: 1
Escolha Site > Novo site. Na caixa de dilogo que aparecer, intitulada Denio do site, a categoria Informaes locais estar selecionada.
Digite uma das seguintes opes: No campo Nome do site, digite o nome do site. O nome do site aparecer na janela Site e no submenu Site > Abrir o site. Use a sua imaginao para escolher o nome. 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 vnculos relativos raiz levando em conta esta pasta. Consulte Sobre os caminhos relativos raiz, na pgina 112. 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. Observe que, se voc estiver utilizando um Macintosh sem os Servios de navegao instalados, pode no ser possvel criar uma pasta nesta caixa de dilogo. Na opo Atualizar a lista de arquivos locais automaticamente, indique se deseja atualizar automaticamente a lista de arquivos locais cada vez que copiar arquivos para o site local. O cancelamento desta opo aumentar a velocidade com que o Dreamweaver copia estes arquivos, porm quando esta opo no estiver selecionada, o painel Local da janela do site deixar de ser automaticamente atualizado. Para atualizar manualmente a janela do site, clique no boto Atualizar, situado nesta janela. Para atualizar manualmente o painel Local apenas, escolha Exibir > Atualizar o local na janela do site (no Windows), ou Site > Exibir os arquivos do site > Atualizar o local (no Macintosh).
77
No campo Endereo HTTP, digite a URL que o site da Web concludo utilizar, para que o Dreamweaver possa vericar os vnculos no site que utilizam URLs absolutas. Consulte Como vericar os vnculos entre os documentos, na pgina 168. Por exemplo: o endereo HTTP do site da Macromedia na Web http://www.macromedia.com. Na opo Cache, indique se deseja criar um cache local, para melhorar a velocidade das tarefas de vinculao e gerenciamento do site. Se voc no selecionar esta opo, o Dreamweaver o noticar novamente, sugerindo a criao de um cache antes que ele crie o site.
3
Clique em OK.
Posteriormente, quando o site estiver pronto para ser publicado em um servidor remoto, voc dever incluir informaes adicionais relacionadas ao site. Para obter mais informaes sobre os sites remotos, consulte Como congurar um site remoto, na pgina 140.
Como editar e atualizar um site j existente

possvel utilizar o Dreamweaver para copiar um site remoto j existente (ou um ramo deste) para o disco local e edit-lo a, mesmo se o site original no tiver sido criado com o Dreamweaver. Observe que, mesmo se pretender editar apenas uma parte do site remoto, a m de evitar quaisquer problemas, duplique localmente a estrutura do ramo do site remoto, desde a raiz do mesmo at os arquivos a serem editados. Por exemplo: se a pasta raiz do site remoto (denominada public_html) contiver duas pastas (Projeto1 e Projeto2) e se voc desejar trabalhar apenas com os arquivos HTML no Projeto1, no haver necessidade de descarregar os arquivos do Projeto2, porm ser necessrio mapear a pasta raiz local para public_html, em vez de Projeto1.
Remote site Local site
public_html
local root folder (map this to public_html, not to Project1 or Project1/HTML) Project1 (must be present on local site; corresponds to Project1 on remote site) HTML (must be present on local site; corresponds to Project1/HTML on remote site)
Project1
Assets
HTML
Project2
Assets
HTML
78
Captulo 3
Para editar um site da Web j existente: 1
Dena um site local para o qual deseja copiar o site remoto. Ou seja, crie uma pasta local que abrigar o site e dena-a como sendo a pasta raiz local (consulte Como criar um site local, na pgina 77). Dena um site remoto utilizando as informaes sobre o site j existente. Consulte Como congurar um site remoto, na pgina 140. 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: Se desejar trabalhar com o site inteiro, selecione a pasta raiz do site remoto e clique em Obter, para descarregar o site inteiro no disco local. 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 descarreg-lo no disco local. O Dreamweaver automaticamente duplica o quanto for possvel a estrutura do site, posicionando o arquivo descarregado na poro direita da hierarquia do site. Ao editar apenas uma parte de um site, opte preferencialmente por descarregar os arquivos dependentes.
3 4
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.
Como exibir e abrir os arquivos na janela do site

Utilize a janela do site para exibir os sites locais e remotos, adicionar ou remover documentos do site ou para estabelecer a estrutura navegacional do site segundo um mapa do site. Para obter mais informaes, consulte Sobre a janela do site, na pgina 144. possvel denir cada um dos dois painis da janela do site, para que mostrem o site local, o site remoto ou um mapa grco do site local. Por exemplo: possvel exibir o site local em um painel e o site remoto em outro; ou o site local em exibio de arquivos em um painel e em exibio de mapa no outro painel. Para obter mais informaes sobre a exibio de mapas de sites, consulte Como exibir a estrutura do site, na pgina 127.
79
Como exibir os sites locais A janela do site pode exibir o contedo tanto dos sites locais quanto dos remotos. Os sites locais so exibidos como uma lista de arquivos, um mapa visual ou ambos. Os sites remotos so exibidos apenas como uma lista de arquivos. Para poder exibir um site remoto, necessrio congur-lo; consulte Como congurar um site remoto, na pgina 140.
Para exbir os arquivos do site local, siga um dos procedimentos abaixo:
Escolha Janela > Arquivos do site. Na janela do site, se o mapa do site estiver sendo exibido, clique no boto Arquivos do site.
O painel que exibe os arquivos do site local identicado por Pasta local, enquanto que o painel que exibe os arquivos do site remoto identicado por Site remoto.
Nota: Se voc estiver exibindo um site local que no possui um site remoto correspondente, o painel Site remoto estar vazio. Para exibir o mapa e os arquivos do site, siga um dos procedimentos abaixo:
Escolha Janela > Mapa do site. Se anteriormente, apenas o mapa fosse exibido, sem os arquivos do site, esta janela exibir apenas o mapa. Na janela do site, clique no boto Mapa do site, ou mantenha pressionado o boto do mouse com o ponteiro sobre o boto Mapa do site e, no menu popup, selecione Mapa e arquivos.
O painel que exibe o site local como um mapa identicado por Navegao no site; o outro painel exibe os arquivos do site local (identicado por Pasta local) ou os arquivos do site remoto (identicado por Site remoto), dependendo das preferncias Mostrar sempre que tiverem sido denidas.
80
Captulo 3
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. Como alterar as exibies de sites Como padro, o site remoto (ou o mapa do site local) aparecer no painel esquerdo da janela do site, enquanto que o site local aparecer no painel direito. possvel alternar entre estas exibies.
Para definir em quais painis aparecero os sites local e remoto: 1 2
Escolha Editar > Preferncias e selecione a categoria de FTP do site. Siga um dos procedimentos abaixo: No menu Mostrar sempre, selecione Arquivos locais e, em seguida, escolha se deseja exibir os arquivos locais no painel direito ou esquerdo da janela do site. O site local aparecer no painel selecionado e o site remoto (ou o mapa do site) aparecer no painel oposto. Quando esta opo for escolhida, os arquivos do site local sero sempre mostrados na janela do site, mesmo quando a janela for reduzida a um painel. No menu Mostrar sempre, selecione Arquivos remotos e, em seguida, escolha se deseja exibir os arquivos remotos no painel direito ou esquerdo da janela do site. O site remoto aparecer no painel selecionado e o site local (ou o mapa do site, sempre local) aparecer no painel oposto. Quando esta opo for escolhida, os arquivos do site remoto sero sempre mostrados na janela do site, mesmo quando esta for reduzida a um painel.
Clique em OK, para fechar a caixa de dilogo Preferncias e aplicar as alteraes.
Para alterar a rea de exibio:
Na janela do site, siga um dos procedimentos abaixo: Arraste a barra de diviso que separa os painis para aumentar ou diminuir a rea de exibio do painel direito ou esquerdo da janela. Utilize as barras de rolagem situadas na parte inferior dos painis para paginar o contedo dos mesmos. No mapa do site, arraste a seta acima de um arquivo para alterar o espao entre os arquivos.
81
Para reduzir a janela do site a um painel:
Clique no boto com um pequeno tringulo no canto inferior esquerdo da janela do site.
Nota: O painel que continuar visvel corresponde sua escolha de Mostrar sempre na caixa de dilogo Preferncias de FTP do site.
Para obter mais informaes sobre as preferncias relativas ao site, consulte Como denir as preferncias de FTP do site, na pgina 146. Como trabalhar com os arquivos do site Utilize a exibio dos arquivos do site para exibir os sites locais e remotos como listas de arquivos, abrir arquivos, adicionar novas pastas ou arquivos a um site ou renovar a exibio do site depois de concluir as alteraes. Tambm possvel utilizar a exibio 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.
Para exibir os arquivos do site:
Siga um dos procedimentos abaixo: Escolha Janela > Arquivos do site, a m de abrir a janela do site na exibio Arquivos do site. Na janela do site, clique no boto Arquivos do site.
Para abrir um arquivo a partir da exibio Arquivos do site:
Clique duas vezes no cone do arquivo.

Para adicionar uma nova pasta ao site: 1
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). Digite um nome para a nova pasta.
82
Captulo 3
Para adicionar um novo arquivo ao site: 1
Certique-se de que um arquivo ou pasta esteja 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). Digite um nome para o novo arquivo.
Para atualizar a exibio Arquivos do site depois de concluir as alteraes fora do Dreamweaver:
Siga um dos procedimentos abaixo: Escolha Exibir > Atualizar o local na janela do site (no Windows), ou Site > Exibir os arquivos do site > Atualizar o local (no Macintosh). Escolha Exibir > Atualizar o remoto na janela do site (no Windows), ou Site > Exibir os arquivos do site > Atualizar o remoto (no Macintosh). Para atualizar ambos os painis, clique no boto Atualizar, situado na janela do site.
Para localizar e selecionar os arquivos 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 o sistema de devolues e retiradas, na pgina 148.
83
Como remover um site da lista de sites

Se no desejar mais trabalhar com um site no Dreamweaver, voc poder removlo da lista de sites. Os arquivos do site no sero removidos.
Nota: Quando um site for removido da lista, todas as informaes de congurao sobre o site sero perdidas em carter permanente. Para remover um site da lista de sites: 1 2 3
Escolha Site > Denir os sites. Selecione o nome do site. Clique em Remover. Aparecer uma caixa de dilogo solicitando a conrmao da remoo. Clique em Sim, para remover o site da lista.
Como criar e editar os documentos HTML

Agora que j conta com um site denido, voc poder passar a criar os documentos (pginas) que o constituiro. Se ainda no tiver denido um site, consulte Como criar um site local, na pgina 77. possvel criar novos documentos HTML em branco no Dreamweaver ou abrir um documento HTML j existente,independentemente de como tenha sido criado. Tambm possvel criar um novo documento com base em um modelo.
Nota: Quando salvar os documentos, sempre que possvel, evite utilizar espaos e caracteres especiais nos nomes de arquivos e pastas. Para criar um documento HTML em branco em uma nova janela do documento:
Escolha Arquivo > Novo, a partir de uma janela do documento j existente (no Windows) ou a partir da barra de menus principal (no Macintosh). Se o inspetor de origem de HTML for aberto (escolha Janela > Origem de HTML), voc poder notar que, na realidade, no se trata de um documento em branco ele contm os rtulos HTML, HEAD (CABEALHO) e BODY (CORPO) para adiantar o trabalho. Durante a digitao na janela do documento ou na insero de objetos, como tabelas e imagens, o inspetor de origem de HTML pode ser mantido aberto para que seja observada a criao do cdigo de origem de HTML. Para obter mais informaes sobre o inspetor de origem de HTML, consulte Como utilizar o inspetor de origem de HTML, na pgina 339.
84
Captulo 3
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 estes caracteres durante a carga, o que provocar a ruptura dos vnculos entre os arquivos. Para abrir um arquivo HTML j existente, siga um dos procedimentos abaixo:
Escolha Arquivo > Abrir. Se o arquivo tiver sido criado com o Microsoft Word, escolha Arquivo > Importar > Importar HTML do Word. O Dreamweaver abrir o arquivo e remover cdigos HTML estranhos ou desnecessrios que tiverem sido gerados pelo Word. O Microsoft Word 97 e as verses mais avanadas contam com o recurso Salvar como HTML, que adiciona cdigo HTML medida que converte o documento em HTML. Para obter mais informaes, consulte Limpar o HTML do Microsoft Word, na pgina 352.
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 import-lo para o Dreamweaver. Para criar um novo documento a partir de um modelo: 1
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 361. Quando for criado um documento com base em um modelo, algumas partes do documento sero bloqueadas para que no sejam alteradas. O arquivo do modelo determinar quais regies sero editveis. Este procedimento assegura a consistncia quando o modelo for utilizado para diversos documentos em um site.
Selecione um modelo e clique em Selecionar. Para modicar as partes editveis de um modelo, selecione o contedo do alocador de espao e digite sobre o mesmo. As partes no-editveis do modelo so identicadas por uma cor realada. Para personalizar as cores realadas, consulte Como denir as preferncias dos modelos, na pgina 363.
Para saber mais sobre a maneira de criar e trabalhar com modelos, consulte Modelos e bibliotecas, na pgina 359 .
85
Como adicionar texto e inserir objetos

A incluso do contudo das pginas feita atravs da digitao ou colagem de texto, e da insero de objetos, como imagens, tabelas e camadas.
Para adicionar texto ao documento, siga um dos procedimentos abaixo:
Digite o texto diretamente na janela do documento. Copie o texto de outro aplicativo, passe ao Dreamweaver, posicione o ponto de insero na janela do documento e escolha Editar > Colar como texto. O Dreamweaver no conservar a formatao aplicada no outro aplicativo, porm conservar as quebras de linha. Para obter mais informaes sobre a formatao de texto, consulte Como formatar o texto, na pgina 177.
Para inserir tabelas, imagens e outros objetos no documento, escolha uma das seguintes opes:
Utilize os comandos no menu Inserir para adicionar os objetos especicados no documento, na posio do ponto de insero. Escolha Janela > Objetos, para abrir a paleta de objetos. Localize o tipo de objeto desejado e clique nele ou arraste-o para inserir o objeto na janela do documento. Para a maioria dos objetos, aparecer uma caixa de dilogo que solicita a escolha da opo ou do arquivo desejado. Para ocultar a caixa de dilogo, escolha Editar > Preferncias, selecione Geral e desmarque a opo Mostrar a caixa de dilogo quando inserir objetos.
Nota: Para inserir diversos espaos consecutivos, utilize Inserir > Espao no-separvel. Porm, se desejar alinhar os itens em colunas, utilize uma tabela.
86
Captulo 3
Como inserir datas O Dreamweaver conta com um objeto Data, conveniente insero da data atual, em qualquer formato de sua preferncia, e conta com a opo de atualizao desta data sempre que o arquivo for salvo.
Para inserir a data atual em um documento: 1
Na janela do documento, coloque o ponto de insero onde deseja inserir a data. Siga um dos procedimentos abaixo: Escolha Inserir > Data. Abra a paleta de objetos escolhendo Janela > Objetos e, em seguida, abra o painel Comuns e clique no boto Data.
Na caixa de dilogo resultante, selecione o formato do nome do dia da semana, da data e da hora. Se desejar que a data inserida seja atualizada a cada vez que o documento for salvo, selecione Atualizar automaticamente no salvamento. Se desejar que a data se torne um texto simples quando for inserida, sem atualizaes automticas, cancele a seleo desta opo. Clique em OK para inserir a data.
Sobre os caracteres especiais Certos caracteres especiais so representados em HTML por um nome ou nmero, denominado entidade. O HTML inclui nomes de entidades de caracteres como o smbolo de direitos autorais (©) o smbolo de E comercial (&) e o smbolo de marca comercial registrada (®). Cada entidade possui um nome (como —) e um equivalente numrico (como ). Infelizmente, muitos navegadores (especialmente os mais antigos e os diferentes do Navigator e do Internet Explorer) no exibem muitas das entidades com nomes. A maior parte dos navegadores exibe a maioria das entidades numricas comumente utilizadas, porm mais difcil se lembrar do nmero de uma entidade do que de seu nome. Para obter uma lista de nomes e nmeros de entidades, consulte a URL com a tabela de entidades apresentada em Recursos de tecnologias de Web e HTML, na pgina 19.
87
Como inserir caracteres especiais possvel inserir diversos caracteres especiais (no formato de entidades HTML) utilizando o painel Caracteres da paleta de objetos.
Para inserir um caractere especial em um documento: 1
Na janela do documento, coloque o ponto de insero onde deseja inserir o caractere especial. Siga um dos procedimentos abaixo: Escolha o nome do caractere no submenu Inserir > Caracteres. Abra a paleta de objetos (escolhendo Janela > Objetos), selecione o painel Caracteres e escolha um caractere na lista.
Existem muitos outros caracteres especiais disponveis; para poder selecion-los, escolha Inserir > Caracteres > Mais, selecione um caractere e clique em OK. Como utilizar as rguas horizontais As rguas horizontais (linhas) so teis para organizar as informaes. Em uma pgina, possvel separar visualmente o texto e os objetos com uma ou mais rguas.
Para criar uma rgua horizontal: 1
Na janela do documento, coloque o ponto de insero onde deseja inserir a rgua horizontal. Siga um dos procedimentos abaixo: Escolha Inserir > Rgua horizontal. Escolha Janela > Objetos, para abrir a paleta de objetos e, em seguida, clique no boto Rgua horizontal.
Para modificar uma rgua horizontal: 1 2
Na janela do documento, selecione a rgua horizontal. Escolha Janela > Propriedades, para abrir o inspetor de propriedades e modicar as propriedades conforme o desejado.
88
Captulo 3
Como selecionar os elementos na janela do documento

Normalmente, voc clica em um elemento para selecion-lo. Se um elemento estiver invisvel, talvez seja preciso torn-lo visvel antes de escolh-lo. Utilize as tcnicas abaixo para selecionar os elementos: Para selecionar um elemento visvel na janela do documento, arraste o mouse sobre o elemento ou clique nele. Para selecionar um elemento invisvel, escolha Exibir > Elementos invisveis (se esta opo j no estiver selecionada) e, em seguida, clique no marcador do elemento. Consulte Sobre os elementos invisveis, na pgina 90. Alguns objetos aparecem na pgina em um lugar diferente de onde est inserido o seu cdigo. Por exemplo: uma camada pode estar em qualquer posio na pgina, mas o cdigo que a dene est em uma posio xa. O Dreamweaver exibe os marcadores na janela do documento para mostrar a localizao do cdigo dos elementos invisveis. Para selecionar um rtulo completo (inclusive o seu contedo, se houver), clique em um rtulo do seletor de rtulos, situado na parte inferior esquerda da janela do documento. O seletor sempre mostra os rtulos que circundam a seleo atual ou a posio do ponto de insero.
Seletor de rtulos
Por exemplo: se tiver sido denido um vnculo para uma imagem, o cdigo HTML no inspetor de origem HTML ter a seguinte aparncia:
<a href="http://www.macromedia.com"><img src="agraphic.gif"></a>
A ao de clicar na imagem que estiver dentro da janela do documento selecionar o rtulo <img> no seletor de rtulos, que corresponde seleo de <img src="agraphic.gif"> no inspetor de origem de HTML. Para selecionar o vnculo, clique na imagem que estiver dentro da janela do documento e, em seguida, clique em <a> que aparece no seletor de rtulos, esquerda de <img>. Para ver o cdigo HTML associado ao texto ou objeto selecionado, escolha Janela > Origem de HTML, para abrir o inspetor de origem de HTML. As selees feitas no inspetor de origem de HTML se reetiro na janela do documento.
89
Sobre os elementos invisveis Escolha Exibir > Elementos invisveis, para mostrar ou ocultar os marcadores na janela do documento que representam os elementos invisveis, como formulrios, ncoras com nome, comentrios e roteiros. A possibilidade de visualizar os elementos invisveis permite selecionar e exibi-los, e tambm alterar as suas propriedades no inspetor de propriedades. Os marcadores de elementos que aparecem quando a opo Exibir > Elementos invisveis for escolhida dependem das denies no painel Elementos invisveis, na caixa de dilogo Preferncias. Por exemplo: possvel especicar que as ncoras com nome devero estar visveis, mas no as quebras de linha. Consulte Como denir as preferncias de elementos invisveis, na pgina 90. possvel criar certos elementos invisveis (como comentrios, ncoras com nome e roteiros) utilizando os botes no painel Invisveis da paleta de objetos. possvel modicar estes elementos utilizando o inspetor de propriedades. Consulte Como utilizar a paleta de objetos, na pgina 68. Como definir as preferncias de elementos invisveis Utilize as preferncias de Elementos invisveis para selecionar os tipos de elementos que estaro visveis quando for selecionada a opo Exibir > Elementos invisveis. Os elementos invisveis, como roteiros, comentrios e ncoras com nome so representados por marcadores na janela do documento. A possibilidade de visualizar os elementos invisveis permite selecionar estes marcadores, para que as suas propriedades possam ser alteradas no inspetor de propriedades.
Para alterar as preferncias dos 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 > Elementos invisveis for selecionada.
Para obter uma explicao de cada preferncia dos elementos invisveis, consulte a Ajuda do Dreamweaver.
Como escolher as cores

No Dreamweaver, muitas caixas de dilogo, assim como o inspetor de propriedades de muitos elementos de pginas, contm uma caixa de cores, que abre uma paleta de cores. Utilize essa paleta para escolher a cor de um elemento.
90
Captulo 3
Para escolher uma cor no Dreamweaver: 1
Escolha uma caixa de cores em qualqualquer caixa de dilogo ou no inspetor de propriedades.

Caixa de cores
Paleta Conta-gotas aceito pela Web Apagador 2
Siga um dos procedimentos abaixo: Utilize o conta-gotas, para selecionar uma amostra de cor na paleta. Todas as cores na paleta so aceitas pela Web. Utilize o conta-gotas para selecionar uma cor de qualquer lugar do monitor do computador, 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. Para limitar a seleo de cores aceitas pela Web, certique-se de que o boto Conta-gotas aceito pela Web esteja ativado. Quando esta opo estiver ativada, a cor selecionada se transformar na cor mais prxima aceita pela Web. Clique no boto para desativar esta opo.
Clique no boto Apagador, para remover a cor atual sem escolher outra diferente. Clique no boto Paleta, para abrir o seletor de cores do sistema. As cores escolhidas com o seletor de cores do sistema no se transformaro na cor mais prxima aceita pela Web, mesmo se o conta-gotas aceito pela Web estiver ativo.
91
Sobre as cores aceitas pela Web

Em HTML, as cores so expressas como valores hexadecimais (#FF0000, por exemplo) ou como nomes (vermelho). As cores comuns ao Netscape Navigator e ao Microsoft Internet Explorer nos sistemas Windows e Macintosh, quando so executadas no modo de 256 cores, so chamadas de cores aceitas pela Web. Na prtica, diz-se que h 216 cores comuns e que qualquer valor hexadecimal que combine os pares 00, 33, 66, 99, CC ou FF (valores RGB 0, 51, 102, 153, 204 e 255, respectivamente) representa uma cor aceita pela Web. Contudo, os testes revelam que h somente 212 cores aceitas pela Web. O Internet Explorer no Windows no renderiza corretamente as cores #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) e #33FF00 (51,255,0). Todos os seletores de cores no Dreamweaver utilizam a paleta de 212 cores aceitas pela Web; a escolha de uma cor exibir o seu valor hexadecimal. Enquanto as quatro cores mencionadas anteriormente no esto na paleta aceita pela Web do Dreamweaver, o valor hexadecimal de cada cor pode ser editado manualmente em qualquer campo de cor, caso seja conveniente utiliz-la. Para escolher uma cor fora do intervalo aceito pela Web, clique no boto Paleta, no canto inferior direito do seletor de cores do Dreamweaver, para abrir o seletor de cores do sistema. O seletor de cores do sistema no se limita s cores aceitas pela Web. As verses para UNIX do Netscape Navigator utilizam uma paleta de cores diferente daquela das verses para Windows e Macintosh. Se a programao for exclusiva para as mquinas com o UNIX instalado (ou se o pblico-alvo for composto por usurios do Windows ou Macintosh com monitores de 24 bits e usurios do UNIX com monitores de 8 bits), considere a possibilidade de utilizar os valores hexadecimais que combinam os pares 00, 40, 80, BF ou FF, que produzem as cores aceitas pela Web no SunOS.
92
Captulo 3
Como definir as propriedades do documento

Os ttulos de pginas, as cores e imagens de fundo, alm das cores do texto e dos vnculos so propriedades bsicas dos documentos HTML. Os ttulos das pginas identicam e denominam os documentos. As cores e imagens de fundo denem a aparncia geral do documento. As cores do texto ajudam os usurios a distinguir entre texto comum e hipertexto, e tambm a examinar quais vnculos foram ou no visitados. Como alterar o ttulo de uma pgina O ttulo de uma pgina HTML ajuda os usurios a controlar o que esto exibindo enquanto navegam; ele serve tambm para identicar a pgina nas listas de histrico e marcadores. Se uma pgina no for intitulada, ela aparecer na janela do navegador e nessas listas como um Documento sem ttulo. Observe que o ato de salvar um documento e lhe dar um nome no corresponde ao ato de dar um ttulo a uma pgina.
Para alterar o ttulo de uma pgina: 1
Siga um dos procedimentos abaixo: Escolha Modicar > Propriedades da pgina. No menu contextual, escolha Propriedades da pgina, clicando com o boto direito do mouse (no Windows) ou pressionando a tecla Control e clicando na janela do documento (no Macintosh). Escolha Exibir > Contedo do cabealho e, quando aparecer, clique no boto Ttulo. Abra o inspetor de propriedades para editar o ttulo.
2 3
Digite o ttulo da pgina na caixa Ttulo. Se estiver utilizando a caixa de dilogo Propriedades da pgina em vez do inspetor de propriedades, clique em OK. O ttulo aparecer na barra de ttulo da janela do documento. O nome do arquivo da pgina e a pasta na qual o arquivo ser salvo aparecero entre parnteses, ao lado do ttulo.
93
Como definir uma imagem de fundo ou a cor da pgina Utilize a caixa de dilogo Propriedades da pgina para denir uma imagem ou a cor do fundo da pgina. Se forem utilizadas uma imagem e uma cor de fundo, a cor aparecer enquanto a imagem for descarregada. Se a imagem de fundo contiver algum pixel transparente, a cor de fundo transparecer.
Para definir uma imagem ou cor do fundo: 1
Escolha Modicar > Propriedades da pgina ou selecione Propriedades da pgina, no menu contextual. Dena uma imagem de fundo e/ou uma cor de fundo: Clique no boto Procurar (no Windows) ou no boto Escolher (no Macintosh), para procurar e selecionar a imagem, ou digite o caminho at a imagem de fundo na caixa Imagem do fundo. O Dreamweaver colocar lado a lado (repetir) a imagem de fundo, se esta no preencher inteiramente a janela, exatamente como fazem os navegadores. Escolha uma cor para o fundo na caixa Cor do fundo. Consulte Como escolher as cores, na pgina 90.
Como definir as cores padro do texto Dena as cores padro para um texto comum, vnculos visitados ou no, e os vnculos 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. Para obter mais informaes, consulte Como escolher as cores, na pgina 90.
Nota: A cor dos vnculos ativos a cor assumida por um vnculo quando este for clicado. Para definir as cores padro do texto, siga um dos procedimentos abaixo:
Escolha Modicar > Propriedades da pgina e, em seguida, escolha as cores para as opes Cor do texto, Cor do vnculo, Vnculos visitados e Vnculos ativos. Escolha Comandos > Denir o esquema de cores e, em seguida, escolha uma Cor do fundo e um conjunto de cores para o Texto e os Vnculos. A caixa de amostras exibe a aparncia do esquema de cores no navegador.
94
Captulo 3
Sobre a paleta de histrico

A paleta de histrico mostra uma lista com todas as etapas do seu trabalho no documento ativo, desde a criao ou abertura do mesmo. A paleta de 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
Polegar (deslizante) Boto Executar novamente Boto Copiar as etapas Boto de comando Salvar como
O boto deslizante (polegar) da paleta de histrico indica inicialmente a ltima etapa efetuada.
Nota: No possvel reorganizar a ordem das etapas na paleta de histrico. No encare a paleta de histrico como um conjunto arbitrrio de comandos, mas como uma maneira de exibir as etapas, na ordem em que foram efetuadas. Para definir o nmero de etapas que a paleta de 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 da paleta de histrico. Se o nmero mximo de etapas denido na paleta de histrico for excedido, as primeiras etapas sero descartadas.
Para apagar a lista da paleta de histrico do documento atual:
No menu contextual da paleta de histrico, escolha Limpar o histrico. Este comando tambm limpa todas as informaes relacionadas aos comandos Desfazer no documento atual; 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.
95
Como desfazer as alteraes

Para 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. Para desfazer mais de uma etapa simultaneamente, utilize a paleta de histrico.
Para abrir a paleta de histrico:
Escolha Janela > Histrico.

Para desfazer a ltima etapa:
Arraste o polegar da paleta de 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 polegar, at que indique uma etapa. Clique esquerda da etapa; o polegar ser automaticamente colocado junto etapa.
Nota: Para paginar 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 da paleta de histrico. A paleta de histrico tambm permite repetir as etapas que aparecem no histrico de etapas e automatizar as tarefas que se basearem nas etapas efetuadas.
96
Captulo 3
Como automatizar as tarefas

Para repetir uma srie de etapas apenas algumas vezes, execute-as novamente diretamente a partir da paleta de histrico. Para automatizar uma tarefa realizada com freqncia, crie um novo comando que realiza a tarefa automaticamente. 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 na paleta de histrico (embora a linha no esteja bvia, at que uma outra ao seja efetuada). Para evitar isso, utilize as teclas de seta em vez do movimento do mouse para mover o ponto de insero na janela do documento. 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 na paleta de histrico. Ao se executarem as etapas novamente, estas coincidiro exatamente com as etapas efetuadas anteriormente; no ser possvel modicar as etapas quando forem executadas novamente. 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 etapa de denio de cor do fundo for aplicada a uma nova imagem. Como repetir as etapas Para repetir a ltima etapa efetuada, utilize o comando Editar > Repetir. O nome deste comando do menu Editar ser 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 a paleta de histrico.
Para repetir uma etapa:
Na paleta de histrico, selecione a etapa e clique no boto Executar novamente. A etapa ser executada novamente e uma cpia da mesma aparecer na paleta de histrico.
97
Para repetir uma srie de etapas adjacentes: 1
Selecione as etapas na paleta de histrico seguindo um dos procedimentos abaixo: Arraste de uma etapa para outra. Selecione uma etapa e, em seguida, pressionando a tecla Shift, clique na ltima etapa da srie de etapas.
Clique em Executar novamente. As etapas sero executadas novamente na ordem e uma nova etapa, denominada Executar novamente as etapas, aparecer na paleta de histrico.
Para repetir etapas que no sejam adjacentes: 1
Selecione uma etapa e, em seguida, clique nas outras etapas mantendo a tecla Control pressionada (no Windows) ou a tecla Command pressionada (no Macintosh). Clique em Executar novamente. As etapas sero executadas novamente na ordem e uma nova etapa, denominada Executar novamente as etapas, aparecer na paleta de histrico.
Observe que as etapas executadas novamente sero aquelas que tiverem sido selecionadas e no necessariamente a etapa indicada pelo polegar. Como aplicar etapas a outros objetos possvel aplicar um conjunto de etapas da paleta de histrico a qualquer objeto na janela do documento.
Para aplicar as etapas da paleta de histrico a um novo objeto: 1 2
Selecione o objeto. Selecione a etapa ou etapas relevantes na paleta de histrico e, em seguida, clique em Executar novamente.
Se forem selecionados diversos objetos em um documento aos quais se aplicaro as etapas da paleta de histrico, os objetos sero tratados como uma nica seleo. No possvel selecionar cinco imagens, por exemplo, e aplicar a mesma alterao de tamanho a todas elas simultaneamente. Para aplicar uma srie de etapas a cada objeto em um conjunto de objetos, certique-se de que a ltima eteapa da srie selecionar o prximo objeto do conjunto. O procedimento abaixo um exemplo de denio de espaamento vertical e horizontal de uma srie de imagens:
98
Captulo 3
Para definir o espaamento vertical e horizontal de uma srie de imagens: 1
Inicie com um documento no qual cada linha consiste de uma pequena imagem (como um marcador grco) seguida de texto. O objetivo manter as imagens afastadas do texto e de outras imagens acima e abaixo. 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 nos campos 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 da mesma) para retornar o foco do teclado a esta janela. 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 as etapas novamente.
2 3
Selecione as etapas da paleta de histrico que correspondem alterao do espaamento da imagem e seleo da prxima imagem. Clique no boto Executar novamente para executar estas etapas novamente. O espaamento da imagem atual ser alterado e a prxima imagem ser selecionada.
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 Copiar as etapas; consulte Como copiar e colar as etapas entre documentos, na pgina 100.
99
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.
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 na paleta de histrico. Clique no boto Copiar as etapas, na paleta de histrico, para copiar as etapas. Abra o outro documento. Posicione 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 na paleta de histrico do documento. A paleta de histrico as mostrar como apenas uma etapa, denominada Colar as etapas.
Nota: O comando Copiar as etapas difere do comando Copiar. No possvel utilizar o comando Copiar do menu Editar para copiar as etapas, embora elas sejam coladas com o comando Editar > Colar.
O fechamento de um documento limpar o seu histrico. Se voc 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 de etapas do histrico, na pgina 101) 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; a tentativa de colar estas etapas poder acarretar um comportamento inesperado. No possvel colar etapas que inclurem um comando Colar mas no inclurem um comando anterior Copiar. Se voc colar as etapas em um editor de texto ou em um inspetor de origem de HTML, elas aparecero como cdigo JavaScript. Este procedimento poder ser til para aprender como gravar os seus prprios roteiros. Para obter mais informaes sobre como utilizar o JavaScript no Dreamweaver, consulte Extenso dos recursos do Dreamweaver: Princpios bsicos, na pgina 401.
100
Captulo 3
Como criar novos comandos a partir de 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 so mantidos em carter permanente (a no ser que sejam excludos), enquanto que os comandos gravados e as seqncias copiadas de etapas no so. possvel editar os nomes de comandos colocados no menu Comandos e tambm exclui-los, utilizando Editar a lista de comandos. Observe que mais complicado editar e excluir comandos includos no menu Comandos (ou seja, os comandos que no foram adicionados por voc); consulte Como personalizar os menus do Dreamweaver, na pgina 391.
Para criar um comando: 1 2
Selecione a etapa ou conjunto de etapas na paleta de histrico. Clique no boto Salvar como comando, ou escolha Salvar como comando no menu contextual da paleta de histrico. Digite o nome do comando e clique em OK. O comando aparecer no menu Comandos.
Nota: O comando ser salvo como um arquivo de JavaScript na pasta Dreamweaver/ Conguration/Commands.
Para poder utilizar um comando salvo: 1
Selecione um objeto ao qual deseja aplicar o comando ou posicione o ponto de insero no local desejado. Escolha o comando no menu Comandos.
Para editar os nomes de comandos no menu Comandos: 1 2 3
Escolha Comandos > Editar a lista de comandos. Selecione o comando a ser renomeado e digite o seu novo nome. Clique em Fechar.
Para excluir um nome do menu Comandos: 1 2 3
Escolha Comandos > Editar a lista de comandos. Selecione um comando. Clique em Excluir e, em seguida, em Fechar.
101
Como gravar os 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 a partir da paleta de histrico (consulte Como repetir as etapas, na pgina 97): As etapas so gravadas medida que forem efetuadas, dispensando a necessidade de selecion-las na paleta de histrico. Durante a gravao, o Dreamweaver impede que sejam efetuados movimentos do mouse no-relacionados gravao (como o clique para selecionar um elemento em uma janela ou arrast-lo para um novo local). Se voc alternar para um outro documento durante a gravao, o Dreamweaver no gravar as alteraes feitas no outro documento. Olhe para o ponteiro, para determinar se a gravao est se processando. O Dreamweaver mantm apenas um comando gravado por vez; assim que for iniciada a gravao de um novo comando, o antigo se perder. Para salvar um novo comando sem perder um comando j gravado, salve o comando na paleta de histrico; consulte Como criar novos comandos a partir de etapas do histrico, na pgina 101. Uma vez gravado o comando, possvel salv-lo (se desejar) utilizando a paleta de histrico.
Para gravar temporariamente uma srie de etapas utilizadas com freqncia: 1
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). O ponteiro voltar ao normal.
Para executar um comando gravado:
Escolha Comandos > Executar o comando gravado, ou pressione as teclas Control e P (no Windows) ou Command e P (no Macintosh).
102
Captulo 3
Para salvar um comando gravado: 1
Escolha Comandos > Executar o comando gravado, para executar o comando. Aparecer uma etapa, denominada Executar o comando, na lista de etapas da paleta de 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.
Como utilizar as guias visuais no processo de desenho

O Dreamweaver contm muitos recursos que o ajudam a desenhar os documentos e prever que aparncia tero nos navegadores. Siga o procedimento abaixo: Encaixe instantaneamente a janela do documento no tamanho desejado, para ver como os elementos se ajustam pgina. Consulte Como redimensionar a janela do documento, na pgina 65. Utilize as rguas para que sirvam como um guia visual ao posicionar e redimensionar as camadas ou tabelas. Utilize uma imagem de rastreamento como fundo da pgina, para ajud-lo a duplicar um desenho criado em um aplicativo de edio de imagens ou ilustraes. Utilize a grade para posicionar e redimensionar as camadas com preciso. As marcas da grade na pgina ajudam a alinhar as camadas, e quando o encaixe for ativado, as camadas se encaixaro automaticamente no ponto de grade mais prximo, ao serem criadas ou movidas. Outros objetos, como as imagens e pargrafos, no se encaixam na grade. O encaixe funcionar independentemente da visibilidade da grade. Consulte Como encaixar as camadas na grade, na pgina 247. Como exibir as rguas As rguas podem ser exibidas nas bordas superior e esquerda da pgina, em pixels, polegadas ou centmetros.
Para alterar as definies das rguas, escolha dentre as seguintes opes:
Para mostrar ou ocultar as rguas, escolha Exibir > Rguas > Mostrar. Para alterar a origem, arraste o ponto zero em direo pgina. Para denir a origem para a sua posio padro, escolha Exibir > Rguas > Redenir a origem. Para alterar a unidade de medida, escolha Pixels, Polegadas ou Centmetros no submenu Exibir > Rguas.
103
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. Uma imagem de rastreamento uma imagem JPEG, GIF ou PNG que colocada 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 do fundo 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: 1 2
Escolha Exibir > Imagem de rastreamento > Carregar. 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. A qualquer momento, possvel escolher uma imagem de rastreamento ou alterar a transparncia da imagem de rastreamento atual, na caixa de dilogo Propriedades da pgina, escolhendo Modicar > Propriedades da pgina.
Para mostrar ou ocultar uma imagem de rastreamento:
Escolha Exibir > Imagem de rastreamento > Mostrar.

Para alterar a posio de uma imagem de rastreamento, siga um dos procedimentos abaixo:
Para especicar a posio da imagem de rastreamento, escolha Exibir > Imagem de rastreamento > Ajustar a posio e, em seguida digite os valores das coordenadas X e Y. Para mover a imagem um pixel de cada vez, utilize as teclas de seta Para mover a imagem cinco pixels de cada vez, pressione Shift e as teclas de seta Para retornar a imagem de rastreamento ao canto superior esquerdo da janela do documento (0,0), escolha Exibir > Imagem de rastreamento > Redenir a posio.
104
Captulo 3
Para alinhar a imagem de rastreamento a um objeto selecionado: 1 2
Selecione um objeto 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 objeto selecionado.
Sobre a interatividade e animao

Muitas pginas da Web so estticas, contendo apenas texto e imagens. Atravs do uso de interatividade e animao, o Dreamweaver permite avanar em relao s pginas estticas, a m de capturar o interesse dos visitantes. Fornea comentrios aos visitantes medida que eles se movem e clicam; demonstre conceitos, valide os dados do formulrio sem entrar em contato com o servidor em suma, aumente as chances dos visitantes examinarem e fazerem mais coisas sem deixar a pgina. H diversas maneiras de adicionar interatividade e animao s pginas utilizando o Dreamweaver: Utilize os comportamentos para realizar tarefas em resposta a determinados eventos, como o realce de um boto quando o visitante passar o ponteiro sobre ele, a validao de um formulrio quando o visitante clicar no boto Enviar, ou a abertura de uma segunda janela do navegador quando a pgina principal tiver terminado de ser carregada. Consulte Como utilizar os comportamentos, na pgina 299 . Utilize as linhas de tempo para criar animaes que dispensam plug-ins, controles ActiveX ou Java. As linhas de tempo utilizam HTML dinmico para alterar a posio de uma camada ou a origem de uma imagem ao longo do tempo, ou para chamar certas aes de comportamento automaticamente aps a carga da pgina. Consulte Sobre as linhas de tempo, na pgina 253. Utilize os lmes Shockwave e Flash, applets de Java ou quaisquer outros controles ActiveX ou plug-ins da Netscape de uma pgina para adicionar lmes autnomos, esquemas interativos de navegao e outros elementos multimdia pgina. Consulte Como inserir mdia, na pgina 283 .
105
Como exibir e editar o contedo do HEAD

Os arquivos HTML so compostos por duas sees principais: a seo HEAD (CABEALHO) e a seo BODY (CORPO). A seo BODY a parte do documento que os visitantes do site podem ver em uma janela do navegador (e que voc pode ver na janela do documento no Dreamweaver). A seo HEAD est normalmente invisvel aos visitantes (e no Dreamweaver), exceto o texto que contiver rtulos TITLE, que aparece na barra de ttulo do navegador e da janela do documento, e utilizado como um identicador dos marcadores do documento. D um ttulo a cada pgina que criar. A seo HEAD contm informaes importantes alm do ttulo do documento, que incluem o tipo de documento, a codicao de idioma, as funes e variveis do JavaScript e VBScript, e as palavras-chave e indicadores de contedo para os mecanismos de busca. No necessrio fornecer todos estes elementos para cada pgina; voc poder, por exemplo, fornecer as palavras-chave e indicadores de contedo apenas da sua home page. Os elementos da seo HEAD podem ser exibidos utilizando o menu Exibir ou o inspetor de origem de HTML.
Para exibir os elementos da seo HEAD de um documento:
Escolha Exibir > Contedo do cabealho. Para cada elemento do contedo do HEAD, aparecer um cone na parte superior da janela do documento.
Para inserir elementos na seo HEAD de um documento: 1
Siga um dos procedimentos abaixo: Escolha Cabealho, no menu pop-up situado no alto da paleta de objetos, e clique em um dos botes desta paleta. Escolha um item no submenu Inserir > Cabealho. Insira as opes para o elemento na caixa de dilogo que aparecer ou no inspetor de propriedades.
106
Captulo 3
Para editar os elementos na seo HEAD de um documento: 1 2
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 rtulo META propriedades do ttulo propriedades da palavra-chave propriedades da descrio propriedades de atualizao Como denir as propriedades de roteiros propriedades bsicas propriedades do vnculo
107
108
Captulo 3
CAPTULO 4
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Vnculos 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 saber como congurar um site local, consulte Como criar um site local, na pgina 77. O Dreamweaver oferece diversos modos de congurar os vnculos de hipertexto para documentos, imagens, arquivos de multimdia ou programas descarregveis. Podem ser estabelecidos vnculos com qualquer texto ou imagem em qualquer parte de um documento, inclusive texto ou imagens localizados em um cabealho, lista, tabela, camada ou moldura. Com o Dreamweaver, possvel criar facilmente os seguintes tipos de vnculos de texto ou imagens grcas: Vnculos internos, como vincular documentos no mesmo site da Web. Vnculos externos, como vincular a documentos fora de um site local da Web. Vnculos de correio eletrnico, que abrem um formulrio de correio eletrnico. Vnculos para ncoras com nome, que permitem ao visitante passar a uma determinada rea na mesma pgina da Web ou para uma outra diferente. Para examinar uma representao da estrutura do site, utilize o recurso Mapa do site. No mapa do site, possvel adicionar novos documento ao site, criar vnculos ao documento, remover documentos e vericar os vnculos aos arquivos dependentes. Consulte Como exibir a estrutura do site, na pgina 127.
109
Sobre as localizaes e os caminhos dos documentos Ao criar vnculos, essencial compreender o caminho de arquivo entre o documento do qual parte o vnculo e o que est sendo vinculado. Cada pgina da Web tem um endereo nico chamado Universal Resource Locator (URL). (Para obter informaes detalhadas sobre as URLs, consulte a pgina do World Wide Web Consortium sobre como atribuir nomes e endereos). Contudo, quando criado um vnculo local (entre dois documentos no mesmo site), normalmente, a URL inteira do documento que est sendo vinculado no especicada; em vez disso, indicado um caminho relativo a documento atual ou da pasta raiz do site. Abaixo, esto os trs tipos de caminhos de documento: Caminhos absolutos (por exemplo: http://www.macromedia.com/ dreamweaver/contents.html). Caminhos relativos a documento (por exemplo: dreamweaver/contents.html). Caminhos relativos raiz (por exemplo: /support/dreamweaver/contents.html). Com o Dreamweaver, possvel selecionar facilmente o tipo de caminho de documento a ser criado para os vnculos. Consulte Como criar vnculos a um documento, na pgina 114. Sobre os 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 vnculo a um documento em outro servidor. Os vnculos de caminhos absolutos tambm podem ser utilizados para vincular as pginas de um site que esto no seu computador local (em uma apresentao na Web, por exemplo). Contudo, essa abordagem no recomendada porque os vnculos se romperiam, fazendo com os arquivos no abrissem, se fossem transferidos para outra localizao ou fosse alterada a estrutura de arquivos no site.
Caminhos absolutos
Sobre os caminhos relativos a documento so os mais apropriados para os vnculos locais na maioria dos sites da Web. So particularmente teis quando o documento e o vinculado esto na mesma pasta e possivelmente permanecero juntos. O caminho relativo a documento tambm utilizado para estabelecer um vnculo 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.
Caminhos relativos a documento
110
Captulo 4
Para estabelecer um vnculo com outro arquivo na mesma pasta que o documento atual, basta indicar o nome do arquivo a ser vinculado. Para vincular a um arquivo em uma subpasta da pasta do documento atual, fornea o nome da subpasta, coloque uma barra inclinada para a direita e, em seguida, o nome do arquivo a ser vinculado. Para vincular a um arquivo em uma pasta-me daquela onde est o documento atual, preceda o nome do arquivo por ../ (onde .. signica um nvel acima na hierarquia da pasta). Por exemplo: suponha que o site tenha esta estrutura:
my_site (root folder)
support contents.html hours.html
resources tips.html
products catalog.html
Para estabelecer um vnculo de contents.html a outros arquivos: Para estabelecer um vnculo de contents.html a hours.html (ambos os arquivos esto na mesma pasta), o nome do arquivo o caminho relativo: hours.html. Para vincular a tips.html (na subpasta chamada Resources), utilize o caminho relativo resources/tips.html. Cada barra inclinada (/) representa mover um nvel abaixo na hierarquia de pastas. Para vincular a index.html (na pasta-me, um nvel acima de contents.html), utilize o caminho relativo ../index.html. Cada ../ representa mover um nvel acima na hierarquia de pastas. Para vincular a catalog.html (em uma subpasta da pasta-me), utilize o caminho relativo ../products/catalog.html. A ../ move um nvel acima em direo pasta-me; products/ move um nvel para baixo na subpasta products.
Vnculos e navegao
111
Nota: Salve sempre um novo arquivo antes de criar um caminho relativo a documento, j que esse caminho no ser vlido sem um ponto de partida denido. Se voc criar um caminho relativo a documento antes de salvar o arquivo, o Dreamweaver utilizar temporariamente um caminho absoluto iniciado por le://, at que o arquivo seja salvo e, em seguida o Dreamweaver converter o caminho le:// em um caminho relativo.
Quando um grupo de arquivos for movido em conjunto, mantendo os seus caminhos relativos por exemplo: quando uma pasta for transferida inteira, de maneira que os arquivos dentro dela mantenham os mesmos caminhos relativos entre si os vnculos relativos a documento no precisaro ser atualizados entre esses arquivos. Contudo, quando um arquivo individual que contm vnculos relativos a documento ou que est vinculado por esse mesmo tipo de ligao for movido, torna-se absolutamente necessrio atualizar esses vnculos. (Se os arquivos forem movidos ou renomeados utilizando a janela do site, o Dreamweaver ajudar a atualizar todos os vnculos relevantes). Sobre os caminhos relativos raiz
Caminhos relativos raiz
fornecem o caminho da pasta raiz do site a um
documento.
Nota: Se voc entender a capacidade e as limitaes dos caminhos relativos raiz, eles podero ser teis, mas caso no esteja familiarizado com esse tipo de caminho, os relativos a documento so mais recomendados.
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. Um caminho relativo raiz , normalmente, o melhor modo de especicar vnculos 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 vnculos relativos raiz for movido, no necessrio alter-los; por exemplo: quando os arquivos HTML utilizam vnculos relativos raiz para os arquivos dependentes (como as imagens), se um arquivo HTML for movido, os seus vnculos dos arquivos dependentes ainda sero vlidos. Contudo, quando os vnculos dos documentos forem relativos raiz e estes forem movidos ou renomeados, absolutamente necessrio atualizar esses vnculos, mesmo que os caminhos dos documentos relativos entre si no tenham sido alterados. Por exemplo: se uma pasta for movida, todos os vnculos relativos raiz a arquivos nessa pasta devem ser atualizados. Se os arquivos forem movidos ou renomeados utilizando a janela do site, o Dreamweaver ajudar a atualizar todos os vnculos relevantes. Dena um site local no Dreamweaver escolhendo uma pasta raiz local que seja equivalente raiz do documento em um servidor. Consulte Como criar um site local, na pgina 77. O Dreamweaver utiliza essa pasta para determinar os caminhos relativos raiz para os arquivos.
112
Captulo 4
Os vnculos relativos raiz so interpretados pelos servidores, e no pelos navegadores, por isso, se for aberta uma pgina que utiliza vnculos relativos raiz no seu navegador (sem usar Visualizar no navegador, no Dreamweaver), os vnculos no funcionaro. Quando o recurso Visualizar no navegador for utilizado para visualizar um documento que contm vnculos relativos raiz, o Dreamweaver converter temporariamente esses vnculos (apenas no arquivo visualizado) para usar os caminhos le:// absolutos. Contudo, possvel visualizar apenas uma pgina de cada vez, que utilize os vnculos relativos raiz se um vnculo for seguido a partir da pgina visualizada, os vnculos relativos raiz da nova pgina no sero convertidos e o navegador no poder seguilos. A exibio de pginas em conjuntos de molduras que utilizam vnculos relativos raiz causa problemas semelhantes.
Para visualizar um conjunto de pginas que utilizam vnculos relativos raiz, siga um dos procedimentos abaixo:
Coloque os arquivos em um servidor remoto e exiba-os nesse local. (Apenas no Windows) Escolha Editar > Preferncias, e nas preferncias de Visualizar 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.
Como criar os vnculos

O rtulo HTML para criar um vnculo de hipertexto chamado de rtulo de ncora. O Dreamweaver cria um par de rtulos de ncora para objetos, texto ou imagens criados para serem vinculados. Por exemplo: se for selecionado na janela do documento o texto Home Page e, em seguida, for criado um vnculo a um arquivo denominado home.htm, o cdigo de origem de HTML para o vnculo deve ter a aparncia abaixo:
<a href=home.htm>Home Page</a>
Antes de criar os vnculos, 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 110. Podem ser criados diversos tipos de vnculos em um documento. Um vnculo a outro documento ou arquivo, como um arquivo de imagem, lme ou som. Um vnculo de ncora com nome, que salta para uma localizao especca em um documento. Um vnculo de correio eletrnico, que abre um formulrio de correio eletrnico com o endereo do destinatrio j preenchido. Um vnculo nulo, ou vnculo de roteiro, que permite anexar comportamentos a um objeto ou criar um vnculo que execute cdigo JavaScript.
Vnculos e navegao
113
Com o Dreamweaver, h diversas maneiras de criar facilmente vnculos entre os documentos: Utilize a janela do mapa do site para exibir, criar, alterar ou excluir vnculos. Utilize Modicar > Criar vnculo, para selecionar um arquivo a ser vinculado. Utilize o inspetor de propriedades para estabelecer o vnculo a um arquivo, utilizando o cone da pasta, para procurar e selecionar um arquivo usando o cone do indicador de arquivos para selecionar um arquivo ou digitar o seu caminho. Utilize o menu contextual, escolha Criar vnculo e, em seguida selecione um arquivo a ser vinculado. Como criar vnculos a um documento Utilize o inspetor de propriedades para vincular uma imagem, objeto ou texto a outro documento, ou a uma seo especca de um documento. Esta seo contm informaes sobre uma maneira apenas de vincular documentos, para obter informaes sobre outras tcnicas de criar vnculos, consulte Como criar vnculos com o cone do indicador de arquivos, na pgina 116 e Como criar e modicar os vnculos na exibio do mapa do site, na pgina 131.
114
Captulo 4
Para criar vnculos entre documentos: 1 2
Selecione o texto ou uma imagem na janela do documento. Abra o inspetor de propriedades (Janela > Propriedades) e siga um dos procedimentos:abaixo:
Clique no cone correspondente pasta , direita do campo Vnculo, para procurar e selecionar um arquivo. O caminho para o documento vinculado aparecer no campo URL. Utilize o menu pop-up Relativo a, na caixa de dilogo Selecionar o arquivo HTML, para escolher se o caminho ser relativo a documento ou raiz e, em seguida clique em Selecionar.
Nota: Quando o tipo de caminho for alterado no campo Relativo a, o Dreamweaver denir a seleo como o tipo de caminho padro para os vnculos posteriores at que ela seja modicada.
No campo Vnculo, digite o caminho e o nome do arquivo do documento. Para criar um vnculo a um documento no site, digite um caminho relativo a documento ou raiz. Para criar um vnculo a um documento fora do site, digite um caminho absoluto que inclua o tipo de protocolo (por exemplo: http://).
3
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. Para obter mais informaes sobre a maneira de designar documentos com moldura, consulte Como controlar o contedo de molduras com os vnculos, na pgina 279.
Vnculos e navegao
115
Como criar vnculos com o cone do indicador de arquivos Utilize o cone do indicador de arquivos para criar um vnculo a outro documento aberto, a um documento ou imagem na janela do site ou a uma ncora com nome.
Para estabelecer um vnculo a um documentoutilizando o cone do indicador de arquivos no inspetor de propriedades: 1 2
Selecione o texto ou uma imagem na janela do documento. Arraste o cone do indicador de arquivos, direita do campo Vnculo, 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 Vnculo ser atualizado para mostrar o vnculo. Solte o boto do mouse.
Como arrastar o cone do indicador de arquivos do inspetor de propriedades at um arquivo na janela do site.
116
Captulo 4
Para criar um vnculo a partir de uma seleo em um documento aberto: 1 2
Selecione o texto na janela do documento. Mantenha a tecla Shift pressionada e arraste a partir da seleo. O cone do indicador de arquivos aparecer medida que o cursor for arrastado.
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.
Vnculos e navegao
117
Para criar um vnculo a partir de um arquivo no mapa do site: 1
Selecione um arquivo HTML no mapa do site. O cone do indicador de arquivos aparecer ao lado do arquivo. Arraste o cone do indicador de arquivos e indique um outro documento aberto, uma ncora visvel de um documento aberto ou um documento na janela do site. Solte o boto do mouse.
Como arrastar o cone do indicador de arquivos de um arquivo selecionado na exibio do Mapa do site at um arquivo na exibio dos Arquivos do site da janela do site. Para obter mais informaes sobre a exibio de um mapa de site, consulte Como exibir os sites locais, na pgina 80.
118
Captulo 4
Como criar vnculos a uma ncora com nome As ncoras com nome marcam determinadas posies em um documento. Utilizeas para estabelecer um vnculo com uma determinada rea no documento atual ou em outro diferente. Com freqncia, as ncoras com nome so utilizadas para levar um usurio a um tpico especco ou para o incio de um documento, fazendo-o chegar rapidamente posio selecionada. A criao de um vnculo a uma ncora com nome um processo em duas etapas. Primeiro, crie uma ncora com nome e, em seguida crie um vnculo a essa ncora.
Nota: As ncoras com nome so sensveis a maisculas e minsculas. Para criar uma ncora com nome: 1
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 > ncora com nome. Pressione as teclas Ctrl+Alt+A (no Windows) ou Command+Option+A (no Macintosh). No painel Invisveis da paleta de objetos, clique no boto ncora. No campo Nome da ncora da caixa de dilogo Inserir ncora com nome, digite o nome da ncora. Se o marcador da ncora no aparecer no local do ponto de insero, escolha Exibir > Elementos invisveis.
Para estabelecer um vnculo a uma ncora com nome: 1
Na janela do documento, selecione um texto ou uma imagem da qual ser criado um vnculo. No inspetor de propriedades, no campo Vnculo, digite um sinal de nmero (#) e o nome da ncora. Por exemplo: Para estabelecer um vnculo a uma ncora com o nome alto no arquivo atual, digite #alto. Para estabelecer um vnculo a uma ncora com o nome alto em um documento diferente, na mesma pasta, digite nomedoarquivo.html#alto.
Vnculos e navegao
119
Para estabelecer um vnculo a uma ncora com nome utilizando o mtodo de indicao de arquivos: 1 2 3
Escolha Exibir > Elementos invisveis, para tornar a ncora visvel. Selecione o texto ou uma imagem na janela do documento. Siga um dos procedimentos abaixo: Clique no cone do indicador de arquivos, direita do campo Vnculo, no inspetor de propriedades, e arraste-o at a ncora que ser vinculada: uma ncora no mesmo documento ou em outro documento aberto. Mantenha a tecla Shift pressionada e clique na janela do documento e, em seguida arraste o cursor at a ncora a ser vinculada: uma ncora no mesmo documento ou em outro documento aberto.
Como criar um vnculo de correio eletrnico Um vnculo 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 vnculo de correio eletrnico.
Para criar um vnculo de correio eletrnico utilizando o comando Inserir o vnculo de correio eletrnico: 1
Na janela do documento, posicione o ponto de insero onde dever aparecer o vnculo de-correio eletrnico ou selecione o texto a ser mostrado neste lugar. Siga um dos procedimentos abaixo: Escolha Inserir > Vnculo de correio eletrnico. No painel Comuns da paleta de objetos, selecione Inserir o vnculo de correio eletrnico.
No campo Texto, na caixa de dilogo Inserir o vnculo de correio eletrnico, digite ou edite o texto que aparecer no documento como um vnculo de correio eletrnico. No campo Correio eletrnico, digite o endereo eletrnico do destinatrio. Pressione OK.
3 4
Para criar um vnculo de correio eletrnico utilizando o inspetor de propriedades: 1 2
Selecione uma imagem, um texto ou um objeto na janela do documento. No campo Vnculo do inspetor de propriedades, digite mailto: seguido de um endereo de correio eletrnico.
120
Captulo 4
Como criar vnculos nulos e de roteiros Os tipos mais comuns de vnculos ocorrem entre documentos e ncoras com nome (descritos em Como criar vnculos a um documento, na pgina 114 e Como criar vnculos a uma ncora com nome, na pgina 119, respectivamente), mas h tambm outros tipos de vnculos.
Vnculo nulo aquele no designado. Utilize esse tipo de vnculo para ativar os objetos ou o texto em uma pgina. Quando o texto ou objeto estiver ativo, a ele poder ser anexado um comportamento para permutar uma imagem ou exibir uma camada, quando o ponteiro for movido sobre o vnculo. Para obter informaes sobre a anexao de comportamentos a objetos, consulte Como anexar um comportamento, na pgina 303.
executam o cdigo JavaScript ou chamam uma funo JavaScript, sendo teis para fornecer informaes adicionais ao usurio sobre um item, sem sair da pgina da Web atual. Os vnculos de roteiros tambm podem ser utilizados para clculos, validaes de formulrios e outras tarefas de processamento, quando um usurio clicar em um determinado item.
Vnculos de roteiros Para criar um vnculo nulo: 1 2
Selecione o texto, uma imagem ou um objeto na janela do documento. No inspetor de propriedades, digite um sinal de nmero (#) na caixa Vnculo.
Para criar um vnculo de roteiro: 1 2
Selecione o texto, uma imagem ou um objeto na janela do documento. No campo Vnculo do inspetor de propriedades, digite javascript: seguido de cdigo JavaScript ou de uma chamada a funo. Por exemplo: quando for digitado javascript:alert ('Este recurso no est implementado') no campo Vnculo, ser criado um vnculo que exibe uma caixa de alerta de JavaScript com a seguinte mensagem: Este recurso no est
implementado. Nota: Como o cdigo JavaScript aparece entre aspas duplas (assim como o valor do atributo HREF ), necessrio utilizar aspas simples no cdigo do roteiro ou preceder as aspas duplas por barras invertidas (por exemplo: \"Este recurso no est implementado\").
Vnculos e navegao
121
Como criar menus de salto

Um menu de salto um menu pop-up de opes para estabelecer um vnculo a um documento ou arquivo. Podem ser criados vnculos a documentos no seu site da Web, a documentos em outros sites da Web, vnculos de correio eletrnico, vnculos a imagens ou a qualquer tipo de arquivo que possa ser aberto em um navegador. H trs componentes bsicos que um menu de salto pode conter: Um aviso de seleo no menu, como uma descrio da categoria para os itens do menu, ou instrues, como Escolha uma opo. Uma lista de itens de menu vinculados: um usurio clica em uma opo e um documento ou arquivo vinculado aberto. Um boto Ir. Quando um item do menu selecionado, no possvel escolh-lo novamente, caso voc navegue de volta para essa pgina ou se o campo Abrir a URL em especicar uma moldura. H duas maneiras de contornar esse problema: Utilize um aviso de seleo no menu, como uma categoria ou instruo do usurio, por exemplo: Escolha uma opo. Um aviso de seleo no menu escolhido novamente aps cada seleo no menu. Utilize um boto Ir, que permite ao usurio visitar de novo o vnculo que estiver selecionado. Como inserir um menu de salto
Para criar um menu de salto: 1
Escolha Inserir > Objeto de formulrio > Menu de salto. Aparecer a caixa de dilogo Inserir o menu de salto. Se desejar criar um aviso de seleo no campo Texto da caixa de dilogo Inserir o menu de salto, digite o texto que dever aparecer para avisar o usurio. 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.
122
Captulo 4
No menu pop-up Abrir as URLs em, selecione uma localizao na qual o arquivo ser aberto, seguindo um dos procedimentos abaixo. Selecione Janela principal, para abrir o arquivo na mesma janela. Selecione uma moldura na qual o arquivo ser aberto.
Nota: Se a moldura a ser designada no aparecer no menu pop-up Destino, saia da 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 denir as propriedades das molduras, na pgina 273.
6
Em Opes, escolha um dos seguintes itens: Para adicionar um boto Ir, marque a caixa de seleo Inserir o boto Ir aps o menu. Para congurar um aviso de seleo, marque a caixa de seleo Selecionar o primeiro item aps a alterao da URL.
Nota: Escolha apenas uma opo em cada menu de salto. Essas opes se aplicam a um menu de salto inteiro.
Para adicionar itens de menu adicionais, clique no boto com o sinal de adio (+) e repita as etapas 2 a 5 desse procedimento. Clique em OK.
Como editar os itens do menu de salto Podem ser feitas alteraes nos itens do menu de salto, no inspetor de propriedades ou no inspetor de 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 para adicionar ou alterar um aviso de seleo no menu, deve ser utilizado o inspetor de comportamentos. Para obter informaes sobre a maneira como utilizar o inspetor de comportamentos a m de editar um menu de salto, consulte Menu de salto, na pgina 319.
Para editar um item do menu de salto com o inspetor de propriedades: 1 2
No inspetor de propriedades, escolha Janela > Propriedades. Na janela do documento, clique no objeto de 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
Vnculos e navegao
123
Como criar as barras de navegao

Uma barra de navegao composta por uma imagem ou conjunto de imagens, que exibe(m) as alteraes com base nas aes de um usurio. Antes de utilizar o comando Inserir a barra de navegao, crie um conjunto de imagens da barra de navegao para os estados de uma imagem a ser exibida. Uma imagem pode apresentar quatro estados: Ativa: a imagem que aparecer quando a pgina for inicialmente carregada. Sobreposta: a imagem que aparecer quando o ponteiro for movido sobre uma imagem. Inativa: a imagem que aparecer quando o usurio clica sobre ela. Inativa e sobreposta: a imagem que aparecer quando o ponteiro for movido sobre ela, aps o clique do usurio. O exemplo seguinte demonstra como os diferentes estados da imagem de um boto podem ser exibidos: quando um usurio visualiza a home page, o boto de imagem da home page torna-se escurecido e os outros botes da barra de navegao se mantm em seu estado normal ou ativados. Na home page, o usurio move o ponteiro sobre o boto Nossa estria; aparecer uma imagem com uma cor mais clara do que a que foi mostrada (ou seja, o boto ser realado) e o usurio clica no boto Nossa estria. Na pgina Nossa estria, o boto Nossa estria tornase mais escuro e o boto da imagem da home page ser mostrado no estado normal. Voc pode criar uma barra de navegao, copi-la em outra pginas no seu site e editar os comportamentos da pgina, para mostrar os diferentes estados medida que as pginas so acessadas.
124
Captulo 4
Como inserir uma barra de navegao

Para criar uma barra de navegao: 1
Siga um dos procedimentos abaixo: Escolha Inserir > Barra de navegao. No painel Comuns da paleta de 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. O nome aparecer na lista Elementos da barra de navegao. O boto de seta para cima ou para baixo pode ser utilizado para organizar os elementos na barra de navegao.
Selecione as opes de estado da imagem (voc deve escolher uma Imagem ativa; os outros estados da imagem so opcionais): No campo Imagem ativa, clique em Procurar, para selecionar a imagem mostrada inicialmente. No campo Imagem sobreposta, clique em Procurar, para selecionar a imagem a ser exibida quando o usurio mover o ponteiro sobre a imagem. No campo Imagem inativa, clique em Procurar, para selecionar a imagem a ser exibida depois que o usurio clicar na imagem. No campo Imagem sobreposta enquanto inativa, clique em Procurar, para selecionar a imagem a ser exibida depois que o usurio clicar na imagem e, em seguida, mover o ponteiro sobre ela.
Vnculos e navegao
125
No campo Quando clicado, v para a URL, selecione uma localizao na qual o arquivo ser aberto e siga o procedimento abaixo: 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 Destino, saia da caixa de dilogo Inserir a barra de navegao e digite o nome da moldura.
Para obter mais informaes sobre a maneira de designar uma moldura, consulte Como denir as propriedades das molduras, na pgina 273.
5
Selecione as opes de carga da imagem: Pr-carregar as imagens descarrega as imagens quando a pgina for carregada. Se esta opo no estiver selecionada, pode haver uma demora quando o usurio mover o mouse sobre a imagem cambivel. Selecione Mostrar a imagem inativa inicialmente, para exibir o elemento selecionado em seu estado inativo, quando a pgina for exibida. Por exemplo: quando a home page for carregada, o boto da home page dever estar no estado inativo. Quando esta opo for selecionada, aparecer um asterisco aps o elemento na lista Elementos da barra de navegao.
Em Inserir, selecione dentre as seguintes opes: Para inserir os elementos da barra de navegao vertical ou horizontalmente no documento, utilize o menu pop-up Inserir. Para inserir os elementos da barra de navegao em uma tabela, marque a caixa de seleo Utilizar as tabelas.
Clique no boto com o sinal de adio (+) para adicionar outro elemento barra de navegao e, em seguida, realize as etapas 2 a 6 para denir o estado desse elemento. Clique em OK.
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 da utilizao do comando Modicar a barra de navegao. Esse comando poder ser utilizado para alterar uma imagem ou conjunto de imagens, mudar o arquivo que ser aberto quando um boto for clicado, selecionar uma janela diferente na qual abrir um arquivo e reordenar a posio das imagens.
126
Captulo 4
Para modificar uma barra de navegao: 1 2 3
Escolha Modicar > Barra de navegao. Na lista Elementos da barra de navegao, selecione o elemento a ser editado. Edite-o e, em seguida, clique em OK.
Como exibir a estrutura do site

Utilize a exibio do mapa do site para exibir um site local como um mapa visual dos cones vinculados, adicionar novos arquivos a um site ou adicionar, modicar ou remover vnculos. A exibio do mapa do site ideal para fazer storyboards ou criar o layout da estrutura do site. Voc pode congurar rapidamente a estrutura inteira do site e, em seguida, criar uma imagem impressa do mapa do site.
Nota: A exibio do mapa do site se aplica apenas aos sites locais. Se voc quiser criar um mapa de um site remoto, copie o contedo do site remoto no seu disco local. Para exibir um mapa de site, siga um dos procedimentos abaixo:
Escolha Janela > Mapa do site, a m de abrir a janela do site. Na janela do site, clique no boto Mapa do site. A home page do site o ponto de partida do mapa. Se o Dreamweaver no puder determinar a home page do site atual, a caixa de dilogo Denio do site ser aberta no painel Layout do mapa do site, solicitando a escolha da pgina correta. O mapa do site mostra os arquivos HTML e outros elementos da pgina como cones. Os vnculos sero exibidos na ordem em que forem detectados no cdigo de origem de HTML. O texto exibido em vermelho indica um vnculo rompido. O texto exibido em azul e marcado com um cone representando um globo indica um arquivo em um outro site ou um vnculo especial (como um vnculo de correio eletrnico ou de roteiro). 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).
Vnculos e navegao
127
Como padro, o mapa exibe dois nveis da estrutura do site, a partir da home page atual. Clique nos sinais de adio (+) ou subtrao () (no Windows) ou na seta de expanso (no Macintosh) 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 128 e Como mostrar e ocultar os arquivos do mapa do site, na pgina 132. 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 e decidir se os arquivos ocultos e dependentes sero mostrados.
Para modificar o layout do mapa do site: 1
Abra a caixa de dilogo Denio do site, utilizando um dos seguintes mtodos: Escolha Site > Denir os sites e, em seguida, clique em Editar. Na lista de categorias, esquerda, selecione Layout do mapa do site. Escolha Exibir > Layout (no Windows), ou Site > Exibio do mapa do site > Layout (no Macintosh).
Clique no cone da pasta para selecionar uma home page para o site ou digite um caminho de arquivo no campo Home page. 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.
128
Captulo 4
Escolha uma dentre as opes de Coluna: No campo Nmero de colunas, digite um nmero para denir quantas pginas sero exibidas por linha na janela do mapa do site. No campo Largura da coluna, digite um nmero para denir a largura, em pixels, das colunas do mapa do site.
Em Identicao de cones, selecione se voc quer mostrar o nome sob os cones dos documentos no mapa do site, representados como nomes de arquivos ou ttulos de pginas. Em Opes, selecione quais arquivos sero exibidos no mapa do site: Escolha Exibir os arquivos marcados como ocultos, para exibir os arquivos HTML que estiverem marcados como ocultos no mapa do site. Se uma pgina estiver oculta, o seu nome e vnculos sero exibidos em itlico. Para obter informaes sobre a maneira de ocultar arquivos, consulte Como mostrar e ocultar os arquivos do mapa do site, na pgina 132. Escolha Exibir os arquivos dependentes, para mostrar todos os arquivos dependentes na hierarquia do site. Um arquivo dependente uma imagem ou outro elemento diferente de HTML, que carregado pelo navegador junto com a pgina principal.
Como trabalhar com as pginas no mapa do site Durante o trabalho no mapa do site, possvel selecionar pginas, abrir uma pgina para edio, adicionar novas pginas ao site, criar vnculos entre arquivos e alterar o ttulo da pgina.
Para selecionar vrias pginas no mapa do site, siga um dos procedimentos abaixo:
Mantendo a tecla Shift pressionada, clique para selecionar vrias pginas. Inicie em uma parte em branco da exibio e arraste um grupo de arquivos para selecion-los. Pressione a tecla Control (no Windows) ou Command (no Macintosh) e d um clique para selecionar pginas no-contguas.
Para abrir uma pgina para edio, siga um dos procedimentos abaixo:
Clique duas vezes no arquivo. Selecione o arquivo e escolha Arquivo > Abrir a seleo (no Windows) ou Site > Abrir (no Macintosh).
Vnculos e navegao
129
Para adicionar um arquivo j existente ao site, siga um dos procedimentos abaixo:
Arraste um arquivo do Windows Explorer ou do Localizador do Macintosh e solte-o em um arquivo do mapa do site. A pgina ser adicionada ao site e um vnculo ser criado entre ela e o arquivo no qual for solta. Selecione Site > Vnculo a um arquivo existente (no Windows), ou Site > Exibio do mapa do site > Vnculo a um arquivo existente (no Macintosh).
Para criar um novo arquivo e adicionar um vnculo: 1
Selecione um arquivo HTML no mapa do site e, depois, siga um dos procedimentos abaixo: Selecione Site > Vnculo a um novo arquivo (no Windows), ou Site > Exibio do mapa do site > Vnculo a um novo arquivo (no Macintosh). Escolha Vnculo a um novo arquivo, no menu contextual. Na campo Nome do arquivo da caixa de dilogo Vnculo a um novo arquivo, digite um nome de arquivo. No campo Ttulo, digite um ttulo de pgina para o arquivo. No campo Texto do vnculo, digite o texto do vnculo que conecta o arquivo selecionado ao novo arquivo. O vnculo aparecer 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 132.
3 4
Para modificar o ttulo de uma pgina: 1
Certique-se de que a opo Mostrar os ttulos das pginas esteja selecionada. Escolha Exibir > Mostrar os ttulos das pginas (no Windows), ou Site > Exibio do mapa do site > Mostrar os ttulos das pginas (no Macintosh).
Siga um dos procedimentos abaixo: Selecione uma pgina e, em seguida, clique no seu ttulo. Quando o ttulo se tornar um campo editvel, digite um novo ttulo de documento. Selecione uma pgina e, em seguida, escolha Arquivo > Renomear (no Windows) ou Site > Renomear (no Macintosh).
130
Captulo 4
Para alterar a home page, siga um dos procedimentos abaixo:
No painel Pasta local da janela do site, clique no arquivo a ser alterado para home page e escolha Denir como home page, no menu contextual. Escolha Site > Nova home page (no Windows) ou Site > Exibio do mapa do site > Nova home page (no Macintosh), para criar uma nova home page. Escolha Site > Denir como home page (no Windows) ou Site > Exibio do mapa do site > Denir como home page (no Macintosh), para transformar uma pgina existente em uma home page.
Para atualizar a exibio do mapa do site depois de ter concludo as alteraes:
Clique em qualquer local da janela do mapa do site para cancelar a seleo dos arquivos e, em seguida escolha Exibir > Atualizar o local (no Windows) ou Site > Exibio do mapa do site > Atualizar o local (no Macintosh). Como criar e modificar os vnculos na exibio do mapa do site possvel modicar a estrutura do site no respectivo mapa adicionando, alterando e removendo vnculos. O mapa do site ser atualizado automaticamente, exibindo as alteraes feitas no site.
Para adicionar um vnculo, siga um dos procedimentos abaixo:
Arraste uma pgina do Windows Explorer ou do Localizador do Macintosh, e solte-a em uma pgina do mapa do site. Selecione uma pgina HTML e escolha Site > Vnculo a um arquivo existente (no Windows) ou Site > Exibio do mapa do site > Vnculo a um arquivo existente (no Macintosh), ou escolha Vnculo a um arquivo existente, no menu contextual. Selecione uma pgina HTML no mapa do site. Aparecer o cone do indicador de arquivos. Clique e arraste o cone at o objeto a ser vinculado: um arquivo na Exibio de arquivos, um documento do Dreamweaver aberto na rea de trabalho, ou uma ncora com nome em um documento aberto na rea de trabalho. Consulte Como criar vnculos com o cone do indicador de arquivos, na pgina 116.
Para alterar um vnculo:
Na exibio do mapa do site, selecione a pgina cujo vnculo est sendo alterado e escolha Site > Alterar o vnculo (no Windows) ou Site > Exibio do mapa do site > Alterar o vnculo (no Macintosh). Procure o arquivo ou digite uma URL.
Vnculos e navegao
131
Para remover um vnculo, siga um dos procedimentos abaixo:
Selecione a pgina no mapa do site e escolha Site > Remover o vnculo (no Windows) ou Site > Exibio do mapa do site > Remover o vnculo (no Macintosh). Selecione a pgina no mapa do site e escolha Remover o vnculo, no menu contextual.
Para abrir a origem de um vnculo: 1 2
Selecione um arquivo no mapa do site. Escolha Site > Abrir a origem do vnculo (no Windows) ou Site > Exibio do mapa do site > Abrir a origem do vnculo (no Macintosh). O inspetor de propriedades e o arquivo de origem que contm o vnculo sero abertos. O vnculo ser realado.
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. Antes de ocultar ou mostrar um arquivo HTML, necessrio marc-lo como oculto. Quando um arquivo marcado como oculto no for mostrado, seus vnculos tambm se tornaro ocultos. Quando um arquivo marcado como oculto for exibido, o cone e seus vnculos estaro visveis na exibio do 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 vnculo (no Windows) ou Site > Exibio do mapa do site > Mostrar/ocultar o vnculo (no Macintosh)
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 > Exibio do mapa do site > Mostrar os arquivos marcados como ocultos (no Macintosh). Escolha Exibir > Layout (no Windows) ou Site > Exibio 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.
132
Captulo 4
Para mostrar os arquivos dependentes, siga um dos procedimentos abaixo:
Escolha Exibir > Mostrar os arquivos dependentes (no Windows) ou Site > Exibio do mapa do site > Mostrar os arquivos dependentes (no Macintosh). Escolha Exibir > Layout (no Windows) ou Site > Exibio do mapa do site > Layout (no Macintosh), para abrir a caixa de dilogo Denio do site, e selecionar a opo Exibir os arquivos dependentes. 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 > Exibio 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.
Para expandir ou reduzir as ramificaes:
Clique nos sinais de adio (+) ou subtrao () (no Windows) ou nas setas de expanso (no Macintosh), para expandir ou reduzir a ramicao. 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: 1
No mapa do site, siga um dos procedimentos abaixo: No Windows, na caixa de dilogo Salvar o mapa do site, escolha Arquivo > Salvar o mapa do site como. No menu pop-up Tipo de arquivo, selecione .bmp ou .png. No Macintosh, selecione Site > Exibio do mapa do site > Salvar o mapa do site > Salvar o mapa do site como PICT ou Site > Exibio do mapa do site > Salvar o mapa do site > Salvar o mapa do site como JPEG.
Escolha uma localizao, digite um nome para a imagem e clique em Salvar.
Vnculos e navegao
133
Como gerenciar os vnculos

O Dreamweaver pode atualizar os vnculos de e para um documento, sempre que este for transferido ou renomeado em um site local. Esse recurso funciona melhor quando o site inteiro (ou toda uma seo autnoma deste) estiver armazenado na unidade local. Nenhuma alterao ser feita nos arquivos que estiverem no site remoto, at que os arquivos locais sejam colocados ou devolvidos ao servidor remoto.
Para ativar o gerenciamento de vnculos no Dreamweaver: 1 2
Escolha Editar > Preferncias e, em seguida, selecione Geral. Selecione Sempre, ou Solicitar, no menu pop-up Atualizar os vnculos, e clique em OK. Se for escolhida a opo Sempre, o Dreamweaver atualizar automaticamente todos os vnculos 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 vnculo no site inteiro, na pgina 135). 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 vnculos nesses arquivos, ou em No atualizar, para deix-los inalterados. Se a opo devolver/retirar estiver ativada, o Dreamweaver tentar retirar automaticamente o arquivo antes de efetuar qualquer alterao.
Para tornar mais rpido o processo de atualizao, o Dreamweaver pode criar um arquivo de cache, no qual ele armazenar informaes sobre todos os vnculos 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 vnculos 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 Cache, em Opes de gerenciamento de vnculos.
Para criar novamente o cache do site:
Escolha Site > Recriar o cache do site.
134
Captulo 4
Na primeira vez em que vnculos a arquivos forem adicionados, alterados ou excludos no site local, aps ter iniciado o Dreamweaver, este aplicativo lhe solicitar o carregamento do cache. Se voc clicar em Sim, o cache ser carregado e todos os vnculos ao arquivo alterado sero automaticamente atualizados. Se escolher No, as alteraes podero ser observadas no cache, porm este no ser carregado e os vnculos no sero atualizados. possvel que o cache demore alguns minutos a 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. Como alterar um vnculo no site inteiro Alm de o Dreamweaver atualizar os vnculos automaticamente sempre que voc transferir ou renomear um arquivo, tambm possvel alterar manualmente todos os vnculos (inclusive mailto, FTP, nulos e de roteiros) 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 vnculos devem ser alterados para indicar /movies/agosto.html), mas particularmente til quando for necessrio excluir um arquivo vinculado a outros arquivos.
Para alterar um vnculo no site inteiro: 1 2 3
Selecione um arquivo no painel local, na janela de site. Escolha Site > Alterar o vnculo no site inteiro. Na caixa de dilogo que aparecer, clique no cone correspondente pasta, para procurar e selecionar um arquivo, ou no campo Nos vnculos a, digite o caminho e o nome do arquivo de um novo arquivo ao qual ser estabelecido um vnculo. 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).
Aps a alterao de um vnculo 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 vnculos existentes no site local.
Vnculos e navegao
135
Nota: Lembre-se de que, como todas as alteraes esto ocorrendo localmente, ser necessrio excluir manualmente o arquivo correspondente no site remoto e colocar ou devolver quaisquer arquivos nos quais tiverem ocorrido alteraes nos vnculos para que os visitantes do seu site possam visualiz-las. Para alterar os vnculos de correio eletrnico, FTP, nulos ou de roteiros no site inteiro: 1 2 3
Abra o mapa do site. Escolha Site > Alterar o vnculo no site inteiro. Na caixa de dilogo Alterar o vnculo no site inteiro, digite as seguintes informaes: No campo Alterar todos os vnculos a, digite o nome completo do vnculo que est sendo alterado. No campo Em vnculos a, digite o nome completo do vnculo de substituio . Clique em OK.
Por exemplo: para atualizar todos os vnculos de correio eletrnico que levam ao seu endereo antigo, digite mailto:juser@isp.com, na caixa Alterar todos os vnculos a, e digite mailto:juser-interface@isp.com, na caixa Em vnculos a. Como testar os vnculos Os vnculos no esto ativos na janela do documento isto , quando voc clica em um vnculo, ele no o leva ao documento vinculado. O arquivo associado a um vnculo pode ser aberto no Dreamweaver para edio, mas os vnculos devem ser testados em um navegador. Consulte Como testar o site, na pgina 166.
Para testar os vnculos em um navegador:
Escolha Arquivo > Visualizar no navegador ou clique em F12. Voc deve visualizar as suas pginas em um navegador para testar os seus vnculos.
Para abrir documentos vinculados no Dreamweaver, siga um dos procedimentos abaixo:
Selecione o vnculo e escolha Modicar > Abrir a pgina vinculada. Pressione a tecla Control (no Windows) ou Command (no Macintosh) e clique duas vezes no vnculo.
Nota: necessrio que o documento vinculado resida no disco local.
136
Captulo 4
Como anexar comportamentos a vnculos

Um comportamento pode ser anexado a qualquer vnculo em um documento. Considere a possibilidade de utilizar os seguintes comportamentos ao inserir elementos vinculados em seus documentos. 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 vnculo na barra de status, em vez de mostrar a URL a ele associada. Para ver um exemplo de mensagem de status, passe o mouse sobre qualquer um dos botes de navegao nas pginas da Ajuda do Dreamweaver. Consulte Denir a mensagem de status, na pgina 327.
Definir a mensagem de status
utilizado para abrir uma URL em uma nova janela. possvel especicar as propriedades da nova janela, inclusive o seu tamanho, nome e atributos (se ela ser redimensionvel, ter uma barra de menus, etc).Consulte Abrir a janela do navegador, na pgina 320.
Abrir a janela do navegador
permite alterar o comportamento da barra de navegao. Utilize esse comportamento para personalizar a maneira como as imagens sero exibidas na barra de navegao. Por exemplo: quando o ponteiro estiver sobre um boto, a exibio das outras imagens na barra de navegao ou no documento ser alterada. Consulte Denir a imagem da barra de navegao, na pgina 324.
Comportamento Definir a imagem da barra de navegao
utilizado para editar um menu de salto. Voc pode alterar a lista do menu ou o arquivo a ele vinculado, ou alterar a localizao do navegador de onde um documento vinculado ser aberto. Consulte Menu de salto, na pgina 319.
Comportamento Menu de salto
Vnculos e navegao
137
138
Captulo 4
CAPTULO 5
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Gerenciamento de sites
O Dreamweaver o ajuda a organizar os arquivos nos sites locais e remotos. Ele permite duplicar facilmente a estrutura do site local em um servidor remoto ou de um site da Web remoto no seu sistema local. Os vnculos 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 criando-se uma pasta raiz local para ele (ou tornando uma pasta existente a raiz local), utilizando o comando Novo site; consulte Como criar um site local, na pgina 77. Em seguida, associe este site local a um servidor remoto atravs do comando Denir os sites; consulte Como associar um servidor remoto a um site local, na pgina 140. Quando os arquivos so transferidos entre os sites locais e remotos, o Dreamweaver mantm paralelas as estruturas de pastas e arquivos entre os sites locais e remotos. Se as pastas necessrias ainda no existirem no site para o qual os arquivos esto sendo transferidos, o Dreamweaver as criar automaticamente. 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, opcionalmente, remove os arquivos inteis, se houver algum. O Dreamweaver conta com alguns recursos para estruturar um site e transferir arquivos de e para um servidor remoto. Para facilitar trabalhos com mltiplos usurios em um site da Web, possvel devolver e retirar arquivos do servidor remoto; desta maneira, as outras pessoas podero ver quando voc est trabalhando com um arquivo, evitando edit-lo simultaneamente. Contudo, observe que o Dreamweaver no executa o controle de verso.
139
Como configurar um site remoto

Antes de congurar um site remoto, crie um site local (que ser associado ao site remoto). Consulte Como criar um site local, na pgina 77. A prxima etapa da congurao de um site remoto determinar a sua localizao isto , qual servidor se ocupar desse site. O seu cliente, empregador ou provedor de servios da Internet j tem provavelmente um servidor congurado para trabalhar com pginas da Web (na Internet ou intranet); pergunte ao administrador de sistemas ou ao cliente qual o nome desse servidor, e descubra como transferir os arquivos para ele. Em particular, determine se o FTP ser utilizado para estabelecer conexo ao servidor, ou se o servidor poder ser montado em sua rea de trabalho como uma unidade de disco acessvel atravs da rede. Se a conexo for estabelecida com o FTP, procure saber o nome do servidor de FTP. Ao reunir essas informaes, utilize o comando Denir os sites, para associar o servidor ao seu site local. Caso surjam problemas na congurao do site remoto, consulte Como resolver problemas de congurao do site remoto, na pgina 143. Depois que o site remoto estiver congurado, os arquivos podero ser carregados ou descarregados dele, caso haja arquivos no site. Consulte Como utilizar o sistema de devolues e retiradas, na pgina 148 e Como obter e colocar os arquivos, na pgina 151. 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: 1
Escolha Denir os sites, no menu pop-up Sites atuais, na janela do site, ou selecione Site > Denir os sites.
140
Captulo 5
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 criar um site local, na pgina 77. Na lista de categorias, esquerda, clique em Informaes do servidor da Web. Escolha uma dentre as seguintes opes de Acesso ao servidor: Utilize Nenhum, caso no planeje carregar o seu site em um servidor. Em seguida, clique em OK e ignore o restante desse procedimento. 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 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 > Exibio dos arquivos do site > Atualizar o remoto (no Macintosh).
3 4
Utilize a opo FTP, se a conexo ao servidor da Web for estabelecida atravs do protocolo FTP.
5
Digite o nome do host de FTP ao qual deseja carregar os 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 ou shell16.ba.best.com. Digite o nome completo do host sem qualquer texto adicional; especialmente, no adicione um nome de protocolo antes do nome do host. Por exemplo: Correto: ftp.mindspring.com Errado: ftp://ftp.mindspring.com Errado: mindspring.com Digite o nome do diretrio do host no site remoto onde sero armazenados os documentos que estaro visveis para o pblico (tambm conhecido como raiz do site). Consulte Como determinar o diretrio raiz do site remoto, na pgina 142. Por exemplo: o diretrio do host do site dreamcentral public_html/. No caso de outros sites, possvel que o diretrio esteja localizado vrios nveis abaixo (como www/public/docs/ ou public_html/htdoc/), ou que ele corresponda ao diretrio de login (nesse caso, este campo dever ser deixado em branco).
141
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: Selecione a opo Utilizar a rewall, se estiver se conectando ao servidor remoto atrs de uma rewall. Consulte Como denir as preferncias de FTP do site, na pgina 146. Algumas rewalls necessitam da utilizao de FTP passivo, que permite ao software local congurar a conexo de FTP, em vez de pedir ao servidor remoto que o faa. Selecione a opo Utilizar o FTP passivo, se isso for necessrio congurao da rewall. Caso no tenha certeza se ir utilizar essa opo, pergunte ao administrador da rewall local.
Clique em OK.
Como determinar o diretrio raiz do site remoto O diretrio de host especicado na caixa de dilogo Denir os sites deve ser o mesmo que a pasta raiz para o site remoto. 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.
No deveria ser o Diretrio do host neste caso
no sim no
No deveria ser o Diretrio do host Deveria ser o Diretrio do host
Nota: 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.
142
Captulo 5
Se estiver em dvida sobre o que digitar no campo Diretrio do host, deixe-o em branco. Em alguns servidores, o seu 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 no painel remoto, 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. Como resolver problemas de configurao do site remoto Um servidor da Web pode ser congurado de vrias maneiras. Esta seo contm informaes sobre algumas questes comuns que podem ocorrer durante a congurao de um site remoto e como solucion-las. A implementao de FTP do Dreamweaver pode no funcionar corretamente em determinados servidores proxy, rewalls em muitos nveis e outras formas de acesso indireto ao servidor. Caso voc tenha problemas com o acesso de FTP, pea ajuda ao administrador de sistemas local. s vezes, nas conexes lentas, os 60 segundos do valor padro de tempo limite do FTP resulta em muitos tempos de espera. Aumente esse valor (no painel FTP do site, da caixa de dilogo Preferncias), se os tempos de espera forem freqentes. Mas no o aumente demais ou ser preciso aguardar um longo tempo quando uma conexo realmente no puder ser estabelecida. O mais comuns so os limites de tempo de 30 a 120 segundos. Os nomes de pastas e arquivos que contm espaos e caracteres especiais geralmente causam problemas quando so transferidos para um site remoto. Utilize sinais de sublinhado em vez de espaos e evite os caracteres especiais nos nomes de arquivos e pastas, sempre que possvel. Em particular, dois pontos, barras inclinadas, pontos e apstrofes nos nomes de arquivos ou pastas podem causar problemas. Os caracteres especiais em nomes de pastas ou arquivos tambm podem, s vezes, impedir que o Dreamweaver crie um mapa do site. No Macintosh, os nomes de arquivos no podem conter mais de 31 caracteres. Se ocorrer problemas com nomes longos de arquivos, renomeie-os com designaes mais curtas. Observe que muitos servidores podem utilizar vnculos 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 vnculo para outra parte do servidor. Na maioria dos casos, esses apelidos no provocam qualquer efeito sobre a capacidade de conexo pasta ou diretrio adequado, mas se for possvel conectar-se a uma parte do servidor mas no a outras, pode ocorrer um problema devido ao apelido.
143
Em geral, quando ocorrer um problema em uma transferncia de FTP, examine o registro do FTP, escolhendo Janela > Registro de FTP do site, na janela do documento (no Windows), ou Site > Registro do FTP (no Macintosh). Caso aparea uma mensagem de erro como: no possvel colocar o arquivo, possvel que no haja espao no site remoto. Verique o registro do FTP para obter informaes mais detalhadas.
Sobre a janela do site

Utilize a janela do site para executar as operaes padro de manuteno de arquivos como, por exemplo, criar novos documentos HTML, mover arquivos, criar pastas e excluir itens, para layout de navegao do mapa do site (consulte Como exibir a estrutura do site, na pgina 127) e para transferir arquivos entre sites locais e remotos. Como padro, o site remoto (ou mapa do site) aparecer no painel esquerdo e o site local ser mostrado no painel direito. possvel alterar essa denio nas Preferncias de FTP do site. Consulte Como denir as preferncias de FTP do site, na pgina 146.
144
Captulo 5
Como utilizar os controles da janela do site Para abrir a janela do site, escolha Janela> Arquivos do site. Em seguida, utilize os seguintes botes e opes para denir o que ser exibido na janela do site e para transferir arquivos entre os servidores local e remoto: exibe a estrutura de arquivos do site local ou remoto no painel mutvel da janela do site. O painel mutvel qualquer painel que no tiver sido especicado e que mostra sempre um determinado site na seo FTP do site da caixa de dilogo Preferncias; consulte Como denir as preferncias de FTP do site, na pgina 146. Esta a exibio padro da janela do site.
Exibio dos arquivos do site
exibe um mapa visual do seu site, com base nos vnculos existentes entre os documentos, no painel mutvel da janela do site. O painel mutvel qualquer painel que no tiver sido especicado e que mostra sempre um determinado site na seo FTP do site da caixa de dilogo Preferncias; consulte Como denir as preferncias de FTP do site, na pgina 146. Mantenha pressionado o boto, para escolher no menu pop-up a opo Apenas o mapa ou Mapa e arquivos.
Exibio do mapa do site
lista os sites por voc denidos. Para alternar entre diversos sites, selecione 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 da lista (consulte Como associar um servidor remoto a um site local, na pgina 140).
Menu pop-up Sites atuais Conectar/desconectar (disponvel apenas com a definio FTP) conecta-se ou desconecta-se do site remoto. Como padro, o Dreamweaver se desconectar do site remoto depois de 30 minutos de ociosidade. Escolha Editar > Preferncias, e selecione FTP do site, para alterar o limite de tempo.
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 (somente a denio Local/Rede) na caixa de dilogo Denio do site (consulte Como associar um servidor remoto a um site local, na pgina 140). Utilize este boto para que a lista remota de diretrios aparea quando tiver sido montada a unidade que contm o site remoto e depois da abertura da janela do site.
Atualizar
145
Obter
copia os arquivos selecionados do site remoto para o site local. Se a opo Ativar a devoluo e retirada de arquivos estiver ativada, as cpias locais sero somente de leitura; os arquivos estaro 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 os arquivos de um servidor remoto, na pgina 151.
Colocar 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 os arquivos em um servidor remoto, na pgina 153.
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 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 150.
Retirar Devolver 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 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 150. abandona a atividade em curso, inclusive a obteno e colocao de arquivos. O boto aparece como um sinal de parada em vermelho, com um X branco no canto inferior direito. 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.
Parar a tarefa atual
Como definir as preferncias de FTP do site Escolha Editar > Preferncias, FTP do site e, em seguida, selecione uma dentre as seguintes preferncias de FTP do site, para controlar os recursos de transferncia de arquivos disponveis na janela do site: 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 painel que no for escolhido (o padro o da esquerda) ser o painel mutvel, este poder exibir o mapa do site ou os arquivos do outro site (o padro o site remoto).
Mostrar sempre
146
Captulo 5
Arquivos dependentes
exibe uma solicitao para transferir os arquivos dependentes (como imagens, folhas de estilos externas e outros arquivos mencionados no arquivo de HTML) que o navegador carrega junto com o arquivo de HTML). Como padro, as opes Noticar na obteno/retirada e Noticar 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.
determina se a conexo ao site remoto ser terminada aps o nmero especicado de minutos sem atividade.
Conexo de 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.
Tempo limite de FTP Host da firewall especica o endereo do servidor proxy no qual ser estabelecida a
conexo, se voc estiver atrs de uma rewall. Caso contrrio, deixe esse espao em branco.
Nota: No caso de estar atrs de uma rewall, selecione a opo Utilizar a rewall, na caixa de dilogo Denio do site. Consulte Como associar um servidor remoto a um site local, na pgina 140. Porta da firewall especica a porta 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. indica que os arquivos no salvos devem s-lo sem aviso, antes de serem colocados no site remoto.
Opes de colocao: Salvar os arquivos antes da colocao 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 140. 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. Voc pode 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 FTPExtensionMap.txt tambm inclui informaes sobre extenses de arquivo de mapeamento para os criadores e tipos de arquivos do Macintosh. Esse mapeamento permite que, a um arquivo descarregado, seja atribudo o cone correto e que esse arquivo seja aberto pelo aplicativo adequado, quando for clicado duas vezes no Localizador.
147
Observe que, quando um arquivo for transferido como ASCII, a denio de preferncia de quebra de pgina ser ignorada. Consulte Como denir as preferncias de formato HTML, na pgina 346.
Como utilizar o sistema de devolues e retiradas

Em um ambiente com mltiplos usurios, possvel retirar e devolver arquivos ao transferi-los do servidor remoto para o seu computador local. Consulte Como devolver e retirar os arquivos de um servidor remoto, na pgina 150. A retirada de um arquivo equivale a declarar: Estou trabalhando com este arquivo no o toque!. Quando um arquivo for retirado, o Dreamweaver exibir uma marca de seleo ao lado do cone do arquivo, na janela do site. Uma marca de seleo verde indica que o arquivo foi retirado por voc, enquanto que uma marca vermelha signica que o arquivo foi retirado por um outro membro da equipe. O nome da pessoa que retirou o arquivo tambm ser exibido na janela do site. A devoluo de um arquivo possibilitar aos outros membros da equipe retirar e edit-lo. O status da verso local se tornar somente de leitura, a m de evitar eventuais alteraes enquanto algum o mantiver retirado.
Nota: Embora voc no precise saber disso para utilizar o sistema de devoluo/retirada, caso tenha curiosidade, o Dreamweaver controla os arquivos retirados colocando um arquivo de texto com a extenso .lck no servidor remoto e no site local. Os arquivos .lck no so visveis na janela do site. Cada arquivo .lck contm o nome do usurio atual que retirou o arquivo.
No servidor remoto, o Dreamweaver no torna os arquivos retirados somente de leitura. Caso os arquivos sejam transferidos com um aplicativo diferente do Dreamweaver, ser possvel sobrescrever os arquivos retirados. No entanto, nos outros aplicativos, o arquivo .lck estar visvel ao lado do arquivo retirado na hierarquia de arquivos, a m de evitar acidentes deste gnero. A devoluo e retirada pode ser ativada em alguns sites e desativada em outros. Para obter mais informaes sobre a transferncia de arquivos entre os sites local e remoto sem devolv-los ou retir-los, consulte Como obter os arquivos de um servidor remoto, na pgina 151 e Como colocar os arquivos em um servidor remoto, na pgina 153.
148
Captulo 5
Como configurar o sistema de devolues e retiradas Antes de utilizar o sistema de devolues e retiradas, algumas opes precisam ser conguradas.
Nota: Para poder utiliz-lo, necessrio ter associado o site local a um servidor de rede ou de FTP remoto. Consulte Como associar um servidor remoto a um site local, na pgina 140. Para definir as opes de devoluo e retirada: 1 2
Escolha Site > Denir os sites e, em seguida, clique em Editar. Na lista de categorias, esquerda, clique em Devolver/retirar. Selecione a opo Ativar a devoluo e retirada de arquivos, se estiver 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 o sistema de devolues e retiradas, na pgina 148. Selecione a opo Retirar os arquivos na abertura, se desejar retirar os arquivos automaticamente quando clicar duas vezes para abri-los na janela do site. A utilizao da opo Arquivo > Abrir, para abrir um arquivo no o retira, mesmo quando esta estiver selecionada. Digite um nome de retirada. Este o nome que aparecer na janela do site, juntamente com quaisquer arquivos que tiverem sido retirados, possibilitando que outros membros da equipe localizem-no quando necessitarem de um desses arquivos. Se voc trabalhar sozinho utilizando vrios computadores, utilize um nome de retirada diferente em cada computador (por exemplo: AliceR-MacCasa e AliceRPCEscritrio), o que permitir saber onde est a ltima verso do arquivo, caso se esquea de devolv-lo.
149
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 zer parte do site que estiver aberto, o Dreamweaver tentar determinar a qual dos sites denidos 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: 1
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: Selecione um ou mais arquivos e clique no boto Retirar, na parte superior da janela do site. No menu contextual ou no menu Site, escolha Retirar. Para descarregar os arquivos dependentes juntamente com os selecionados, clique em Sim no aviso. Para que os arquivos dependentes no sejam descarregados, clique em No.
Para devolver arquivos a um servidor remoto: 1
Escolha o site desejado no menu pop-up Sites atuais, situado no alto da janela do site. Selecione um ou mais arquivos devolvidos ou novos arquivos no painel Local e siga um dos procedimentos abaixo: Clique no boto Devolver, no alto 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.
150
Captulo 5
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 carregar os arquivos dependes ao devolver um novo arquivo, mas se as verses mais recentes dos dependentes j estiverem no servidor remoto, no ser preciso carreg-los novamente.
Para desfazer a retirada de um arquivo:
Selecione o arquivo e escolha Site > Desfazer a retirada, ou clique com o boto direito do mouse (no Windows) ou pressione Control e clique (no Macintosh) no arquivo, e escolha Desfazer a retirada, no menu contextual. A cpia local do arquivo se tornar somente de leitura e quaisquer alteraes feitas sero perdidas.
Nota: Um arquivo que estiver ativo na janela do documento tambm poder ser devolvido e retirado. Na janela do documento, escolha Site > Devolver ou Site > Retirar. 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 Como denir as preferncias de FTP do site, na pgina 146.
Como obter e colocar os arquivos

Se voc estiver trabalhando em um ambiente com vrios usurios, utilize o sistema de devoluo e retirada para transferir os arquivos entre os sites local e remoto (consulte Como utilizar o sistema de devolues e retiradas, na pgina 148). Caso esteja trabalhado sozinho no site remoto, possvel utilizar, em vez do sistema mencionado, os comandos Obter e Colocar, para transferir os arquivos sem devolver ou retir-los.
Nota: Se for selecionado Site > Obter ou Site > Colocar enquanto a janela do documento estiver ativa, e o arquivo no zer parte do site que estiver aberto, o Dreamweaver tentar determinar a qual dos sites denidos localmente pertence o arquivo; se ele pertencer a apenas um site local, o Dreamweaver abrir esse site e, em seguida, executar a operao de obteno ou colocao.
Como obter os arquivos de um servidor remoto Obter os arquivos copia-os de um site remoto para o site local. Se for utilizado o sistema de devoluo e retirada (isto , se 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 o sistema de devolues e retiradas, na pgina 148.
151
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 devoluo/retirada no site, voc tambm deve usar 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 140. 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.
Para obter arquivos de um servidor remoto: 1 2 3
Escolha Janela > Arquivos do site, para abrir a janela do site. No alto da janela do site, escolha o site desejado, no menu pop-up Sites atuais. Caso seja utilizado o FTP para transferir arquivos, clique em Conectar, a m de abrir uma conexo com o servidor remoto. Se j houver uma conexo aberta (o boto indicar Desconectar, em vez de Conectar), 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 a serem descarregados. 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 descarregar os arquivos dependentes, clique em Sim; para ignor-los, clique em No. Se j houver cpias locais dos arquivos dependentes, clique em No. Para evitar perguntas sobre os arquivos dependentes em descargas posteriores, selecione a opo No me pergunte novamente.
Nota: Para interromper a transferncia de arquivos em qualquer momento, clique no boto Parar a tarefa atual (o sinal de parar vermelho com um X branco, no canto inferior direito da janela do site), ou pressione Esc (no Windows) ou Command+ponto (no Macintosh). possvel que a transferncia no pare imediatamente.
152
Captulo 5
O Dreamweaver registra todas as atividades de transferncia de arquivos atravs de FTP. Se ocorrer um erro durante a transferncia de um arquivo com o FTP, o Registro de FTP do site poder auxili-lo a determinar o problema. Para exibir o registro, escolha Janela > Registro do FTP, na janela do site (no Windows), ou Site > Registro do FTP (no Macintosh). Como colocar os arquivos em um servidor remoto A colocao de arquivos os copia do site local para o remoto, geralmente sem alterar o seu status de retirada. H duas situaes comuns nas quais Colocar utilizado em vez de Devolver: quando voc no estiver em um ambiente com muitos usurios e no estiver utilizando o sistema de devoluo/retirada; 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 devoluo/retirada, o arquivo ser copiado no site remoto e, em seguida, ser retirado para voc, a m de poder continuar a edio.
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 150. Para colocar apenas os arquivos cuja verso local 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 a carga, provocando a ruptura dos vnculos 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 a serem carregados. 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.
153
Se o arquivo no tiver sido salvo, poder aparecer uma caixa de dilogo (dependendo da denio da preferncia no painel de FTP do site da 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 salvada 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 antes de coloc-lo no servidor.
Para carregar os arquivos dependentes, clique em Sim; para ignor-los, clique em No. Se j houver cpias locais dos arquivos dependentes, clique em No. Para evitar perguntas sobre os arquivos dependentes em carregamentos posteriores, selecione a opo No me pergunte novamente.
Nota: Para interromper a transferncia de arquivos em qualquer momento, clique no boto Parar a tarefa atual (o sinal de parar vermelho com um X branco, no canto inferior direito da janela do site), ou pressione Esc (no Windows) ou Command+ponto (no Macintosh). possvel que a transferncia no pare imediatamente.
Se o arquivo estiver aberto na janela do documento, ser possvel escolher Site > Colocar, na janela do documento. O Dreamweaver registra todas as atividades de transferncia de arquivos atravs de FTP. Se ocorrer um erro durante a transferncia de um arquivo com o FTP, o Registro de FTP do site poder auxili-lo a determinar o problema. Para exibir o registro, escolha Janela > Registro do FTP, na janela do site (no Windows), ou Site > Registro do FTP (no Macintosh).
Como sincronizar os arquivos nos sites local e remoto

Depois que os arquivos forem criados nos sites local e remoto, possvel sincroniz-los. Utilize o comando Site > Sincronizar, para transferir as verses mais recentes dos seus arquivos de e para o site remoto. Caso o site remoto seja um servidor de FTP (em vez de um servidor de rede), a sincronizao dos seus arquivos utilizar o FTP. Para obter mais informaes sobre o uso do FTP, consulte Como associar um servidor remoto a um site local, na pgina 140. Antes de sincronizar os sites, o Dreamweaver permite vericar quais arquivos sero colocados ou obtidos no servidor remoto. O programa tambm conrmar quais arquivos foram atualizados aps o trmino da sincronizao.
154
Captulo 5
Para ver quais arquivos so mais recentes no site local ou no site remoto, sem sincronizao, escolha Editar > Selecionar um local mais novo, ou Editar > Selecionar um remoto mais novo (no Windows, na janela do site), ou Site > Exibio dos arquivos do site > Selecionar um local mais novo, ou Site > Exibio dos arquivos do site > Selecionar um remoto mais novo (no Macintosh).
Para sincronizar os arquivos: 1
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 menus (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 foi realizada a seleo mais recente). Escolha uma direo para a cpia dos arquivos: Selecione Colocar os arquivos mais novos no remoto, se desejar carregar todos os arquivos locais com as datas de modicao mais recentes que os seus correspondentes remotos. Selecione Obter os arquivos mais novos do remoto, se desejar descarregar todos os arquivos remotos com datas de modicao mais recentes do que as de seus correspondentes remotos. Escolha Obter e colocar os arquivos mais novos, para colocar as verses mais recentes de todos os arquivos nos sites remoto e local.
Decida se ir excluir ou no os arquivos no site de destino que no tiverem correspondentes no site de origem. Se for escolhido Colocar os arquivos mais novos no remoto e selecionada a opo Excluir, o Dreamweaver excluir os arquivos no site remoto para os quais no haja 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 OK. Se a verso mais recente de cada arquivo escolhido j estiver em ambos os lugares, 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).
155
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.
Como buscar e substituir

possvel buscar um arquivo nos sites local e remoto a partir das janelas do documento e do site. Para exibir a janela do site, escolha Janela > Arquivos do site. possvel realizar uma busca de texto, texto circundado por determinados rtulos, ou rtulos e atributos HTML no documento atual, em arquivos selecionados, em um diretrio ou no site inteiro. Observe que sero utilizados comandos diferentes para buscar arquivos e texto (e/ou HTML) nos arquivos: Localizar no site local e Localizar no site remoto buscam arquivos, enquanto que Editar > Localizar e Editar > Substituir procuram texto e rtulos nos arquivos.
Nota: Se for selecionado Site > Localizar no site local, ou Site > Localizar no site remoto enquanto a janela do documento estiver ativa, e o arquivo no zer parte do site que estiver aberto, o Dreamweaver tentar determinar a qual dos sites denidos localmente pertence o arquivo; se ele pertencer a apenas um site local, o Dreamweaver abrir este site e, em seguida, procurar nele o arquivo. Para localizar um arquivo no site local: 1
Selecione o arquivo no painel remoto da 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 realado no painel Local da janela do site.
Para localizar um arquivo no site remoto: 1
Selecione o arquivo no painel Local da 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. O arquivo ser realado no painel Remoto da janela do site.
156
Captulo 5
Para buscar texto e/ou HTML nos documentos: 1
Escolha uma dentre as seguintes opes: Na janela do documento ou do site, escolha Editar > Localizar, ou Editar > Substituir. No inspetor de origem de HTML, clique com o boto direito do mouse (no Windows) ou pressione a tecla Control e clique (no Macintosh) e, no menu contextual, escolha Localizar ou substituir.
Na caixa de dilogo Localizar ou substituir que aparecer, utilize a opo Localizar em, para especicar os arquivos a serem localizados: A escolha de Documento atual restringe a busca ao documento ativo. Esta opo estar disponvel apenas quando for escolhida Localizar ou substituir, na janela do documento ou no menu contextual do inspetor de origem de HTML. A escolha de Arquivos selecionados restringe a busca aos arquivos e pastas que estiverem selecionados na janela do site. Esta opo est disponvel apenas quando uma das opes Localizar ou Substituir tiver sido escolhida na janela do site ativa (isto , na frente da janela do documento). A escolha de Site atual 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. A escolha de Pasta restringe a busca a um grupo especco de arquivos. Aps escolher a pasta, clique no cone correspondente pasta, para procurar e selecionar o diretrio no qual ser efetuada a busca.
Utilize a opo Localizar, para especicar o tipo de busca a ser efetuada. A escolha de Texto permite procurar determinadas seqncias de texto na janela do documento. Uma busca de texto ignora qualquer HTML que interrompa a seqncia. Por exemplo: uma busca de o co preto coincidiria com o co preto e
o co preto.
A escolha de Origem de HTML permite buscar determinadas seqncias de texto no cdigo de origem de HTML. Consulte Sobre as buscas de origem de HTML, na pgina 158. A escolha de Texto (Avanado) permite buscar determinadas seqncias de texto dentro ou fora de um ou mais rtulos. Por exemplo: em um documento que contm o seguinte HTML, a procura de tenta fora do rtulo i acarretaria a localizao apenas da segunda instncia da palavra tenta: Joo tenta
entregar o trabalho dentro do prazo, mas nem sempre consegue. Ele sempre tenta cumprir os prazos. Consulte Como buscar texto entre rtulos especcos, na
pgina 160.
157
A escolha de Rtulo permite procurar determinados rtulos, atributos e valores de atributo, como todos os rtulos TD com a denio de VALIGN para TOP. Consulte Como buscar os rtulos e atributos HTML, na pgina 159.
Nota: A ativao de Control+Enter ou Shift+Enter (no Windows), ou Control+Return, Shift+Return ou Command+Return (no Macintosh), adiciona quebras de linha nos campos de busca, permitindo a procura de um caractere de retorno. Verique se a opo Ignorar os diferentes espaos em branco est desmarcada ao fazer essa busca, quando no forem utilizadas as expresses regulares. Observe que esse procedimento localiza um determinado caractere, mas no a noo geral de quebra de linha; por exemplo: no localizar um rtulo ou . Os caracteres de retorno aparecem como espaos na janela do documento e no como quebras de linha. 4
Utilize uma das seguintes opes para expandir ou limitar a busca: A opo Coincidir maisc./minsc., restringe a busca ao texto que coincidir 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 m de ignorar qualquer espao em branco Observe que os rtulos e no so considerados espao em branco.
A opo Utilizar expresses regulares acarreta a interpretao de certos caracteres e seqncias pequenas de caracteres (como ?, *, \w e \b) da seqncia de busca como operadores comuns de expresses. Por exemplo: a busca de o co p\w*\b coincidir com o co preto e o co policial. Consulte Sobre as expresses regulares, na pgina 162. Sobre as buscas de origem de HTML Utilize a opo Origem de HTML, na caixa de dilogo Localizar ou substituir, para buscar seqncias especcas de texto no cdigo de origem de HTML. Por exemplo: uma busca de co preto no seguinte cdigo coincidiria com duas instncias (no atributo ALT e na primeira frase):
<IMG SRC=barnab.gif WIDTH=100 HEIGHT=100 ALT=Barnab, um co preto.> Ontem, vimos vrios ces pretos no parque. O co <A HREF=barnab.html>preto</A> de que mais gostamos se chama Barnab.
A frase co preto tambm aparece na segunda frase, porm ela no coincide com a busca, pois interrompida por um vnculo. Consulte Como buscar e substituir, na pgina 156 para obter instrues passo a passo que explicam como iniciar uma busca.
158
Captulo 5
Como buscar os rtulos e atributos HTML Utilize a opo Rtulo, na caixa de dilogo Localizar ou substituir, para buscar rtulos, atributos e valores de atributos especcos. Por exemplo: possvel procurar todos os rtulos IMG sem o atributo ALT. Consulte Como buscar e substituir, na pgina 156 para obter informaes sobre os vrios tipos de buscas.
Para realizar uma busca de rtulo: 1
Escolha Editar > Localizar ou Editar > Substituir, e especique em quais arquivos dever ser feita a busca, conforme a explicao em Como buscar e substituir, na pgina 156. No menu pop-up Localizar, selecione Rtulo. Escolha um determinado rtulo no menu pop-up adjacente ao menu pop-up Localizar, ou selecione [qualquer rtulo]. Se desejar apenas buscar todas as ocorrncias do rtulo especicado, pressione o boto com o sinal de subtrao (-) e passe etapa 6. Caso contrrio, prossiga na etapa 4.
2 3
Limite a busca, utilizando um dos seguintes modicadores de rtulos: Escolha Com atributo, para selecionar um atributo que deva estar no rtulo para que este coincida com o critrio de busca. possvel especicar um determinado valor deste atributo ou escolher [qualquer valor]. Escolha Sem atributo, para selecionar um atributo que no deva estar no rtulo para que haja coincidncia. Por exemplo: escolha esta opo para buscar todos os rtulos IMGsem o atributo ALT. Escolha Contendo, para especicar um texto ou rtulo que deve estar contido no rtulo original para que haja coincidncia. Por exemplo: no cdigo Cabealho 1 , o rtulo FONT est contido no rtulo B. Escolha No contendo, para especicar um texto ou rtulo que no deve estar contido no rtulo original para que este atenda ao critrio de busca. Escolha Dentro do rtulo, para especicar um rtulo dentro do qual deve estar o rtulo de destino, para que haja coincidncia. Escolha Fora do rtulo, para especicar um rtulo dentro do qual no deve estar o rtulo de destino, para que haja coincidncia.
Clique no boto com o sinal de adio (+) e repita a etapa 4, a m de restringir mais ainda a busca.
159
Inicie a busca: Escolha Localizar o prximo, para realar a prxima instncia do texto da busca no documento. Escolha Localizar todos, para gerar uma lista de todas as instncias do texto da busca no documento. Se a busca for realizada em um diretrio ou site, o comando Localizar o prximo realar a prxima instncia do texto da busca no documento ou, caso no haja nenhuma, abrir o documento seguinte que contm o texto procurado. Localizar todos gera uma lista de documentos que contm o texto da busca.
Como buscar texto entre rtulos especficos Utilize a opo Texto (Avanado), na caixa de dilogo Localizar ou substituir, para buscar determinadas seqncias de texto que podero estar ou no em um conjunto de rtulos de conteno. Por exemplo: possvel buscar a expresso Sem ttulo entre os rtulos <title>, a m de localizar todas as pginas sem ttulo no site. Consulte Como buscar e substituir, na pgina 156 para obter informaes sobre os vrios tipos de buscas.
Para realizar uma busca de texto avanada: 1
Escolha Editar > Localizar ou Editar > Substituir, e especique em quais arquivos dever ser feita a busca, conforme a explicao em Como buscar e substituir, na pgina 156. No menu pop-up Localizar, selecione Texto (Avanado). Digite o texto a ser localizado no campo de texto adjacente ao menu pop-up Localizar. Por exemplo: digite a expresso Sem ttulo. Escolha Dentro do rtulo ou Fora do rtulo e, em seguida, escolha um rtulo no menu pop-up adjacente. Por exemplo: escolha Dentro do rtulo e, em seguida title. Clique no boto com o sinal de adio (+), a m de restringir mais ainda a busca dos rtulos com um ou mais atributos especcos. Uma vez que o rtulo <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.
160
Captulo 5
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 ou substituir. O salvamento de uma consulta conveniente se esta for realizada com freqncia (por exemplo: para retirar rtulos 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) e se voc no quiser reconstruir vrias vezes esse padro de busca.
Para salvar um padro de busca: 1
Dena os parmetros da busca, seguindo as etapas descritas em Como buscar e substituir, na pgina 156. Se estiver realizando uma busca de rtulo ou texto avanado, consulte Como buscar os rtulos e atributos HTML, na pgina 159 ou Como buscar texto entre rtulos especcos, na pgina 160, 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 rtulos IMG sem o atributo ALT, a consulta poder se chamar img_no_alt.dwr. As consultas de localizao terminam com a extenso dwq, enquanto que as consultas de substituio terminam com a extenso dwr.
Para chamar um padro de busca novamente: 1 2
Escolha Editar > Localizar ou Editar > 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.
161
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. Final da entrada ou linha. O caractere precedente zero ou mais vezes. O caractere precedente uma ou mais vezes.
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 um+ coincidir com um em rum e umi em luminoso, porm no coincidir com qualquer ocorrncia de azul re?ta coincidir com rta em curta e reta em preta, porm no coincidir com qualquer ocorrncia de caneta ou brotar .pr coincidir com propriedades e programa na frase propriedades do programa FF0000|0000FF coincidir com FF0000 em BGCOLOR=#FF0000 e 0000FF em FONT COLOR=#0000FF
O caractere precedente no mximo uma vez (isto , indica que o caractere precedente opcional). Qualquer caractere, exceto nova linha.
x|y
x ou y.
{n}
Exatamente 'n' ocorrncias do caractere r{2} coincidir com rr em carro e precedente. com os primeiros dois erres em brrrrrr, porm no coincidir com qualquer ocorrncia de for Pelo menos 'n' e, no mximo, 'm' ocorrncias do caractere precedente. F{2,4} coincidir com FF em #FF0000 e com os primeiros quatro efes em #FFFFFF
{n,m}
[abc]
Qualquer um dos caracteres dentro dos [e-g] coincidir com e em tabela, colchetes. Especifique uma faixa de f em fraude e g" em Aguarde caracteres com um hfen ([a-f] equivale a [abcdef], por exemplo).
162
Captulo 5
Caractere
[âbc]
Coincidir com
Qualquer um dos caracteres que no esteja dentro dos colchetes. Especifique uma faixa de caracteres com um hfen ([â-f] equivale a [âbcdef], por exemplo]). Um limite de palavra (como um espao ou retorno de carro). Um limite sem palavra. Qualquer caractere numrico. Equivale a [0-9]. Qualquer caractere no numrico. Equivale a [^0-9]. Alimentao de formulrio. Alimentao de linha. Retorno de carro. Qualquer caractere contendo espaos em branco, inclusive espaos, tabulaes, alimentaes 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_]. Qualquer caractere que no seja alfanumrico. Equivale a [Â-Za-z0-9_]. Caractere de retorno. Verifique se a opo Ignorar os diferentes espaos em branco est desmarcada ao fazer essa busca, quando no forem utilizadas as expresses regulares. Observe que esse procedimento coincidir com um determinado caractere, mas no a noo geral de quebra de pgina; por exemplo: no coincidir com um rtulo ou . Os caracteres de retorno aparecem como espaos na janela do documento e no como quebras de linha.
Exemplo
[âeiou] coincidir inicialmente com r em cravo, b em biblioteca e f em OFF!
\b
\bb coincidir com b em blasfmia, porm no coincidir com qualquer ocorrncia de abrir ou liberdade \Bb coincidir com b em liberdade, porm no coincidir com blasfmia \d coincidir com 3 em C3PO e 2 em apartamento 2G \D coincidir com S em 900S e Q em Q45
\B \d \D \f \n \r \s
\Scoluna coincidir com coluna em 100 colunas, porm no coincidir com colunas \Scoluna coincidir com coluna em colunas:, porm no coincidir com 100 colunas
\S
\t \w
b\w* coincidir com Alfabeto em Alfabeto cirlico e com objeto e abstrato em nenhum objeto abstrato \W coincidir com & em Joca & Mateus e com % em 100%
\W
Control+Enter ou Shift+Enter (no Windows), ou Control+ Return ou Shift+Return ou Command+ Return (no Macintosh)
163
Utilize parnteses para denir grupos nas expresses regulares que sero mencionadas posteriormente; use $1, $2, $3, etc. (no campo Localizar ou 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).
Como criar sites para vrios navegadores

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, levando em considerao as outras restries do projeto. Por que e quando criar sites compatveis com diversos navegadores So utilizados mais de duas dzias de 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 usam 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, possvel 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 fornecer muito contedo incompatvel.
164
Captulo 5
Questes gerais a serem consideradas 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 ter uma boa exibio 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. Um procedimento til fornecer vrias verses de certas pginas importantes, como a home page do site. Pode ser desenhada uma verso com moldura e outra sem moldura dessa pgina, por exemplo. Voc poder usar vrios recursos de navegadores para alternar automaticamente os visitantes que dispem de navegadores com ou sem suporte a molduras.
Como utilizar os comportamentos para detectar os navegadores e plug-ins

Os comportamentos podem ser utilizados para determinar qual navegador os visitantes do site esto utilizando e se dispem de um plug-in instalado. Para obter mais informaes sobre os comportamentos, consulte Como utilizar os comportamentos, na pgina 299. envia os visitantes a outras pginas, dependendo da marca e verso do navegador. Por exemplo: possvel optar por enviar os usurios para uma pgina, se eles estiverem utilizando a verso 4.0 ou mais avanada do Netscape Navigator; para outra pgina, se utilizarem a verso 4.0 ou mais avanada do Microsoft Internet Explorer 4.0 ou por mant-los na mesma pgina, caso estiverem utilizando qualquer outro navegador. Consulte Vericar o navegador, na pgina 310.
Verificar o navegador
envia os visitantes a outras pginas, dependendo da ocorrncia de um determinado plug-in instalado. Por exemplo: possvel optar por enviar os usurios para uma pgina se eles possurem o Shockwave, ou para outra pgina, se no o tiverem. Consulte Vericar o plug-in, na pgina 312.
Verificar o plug-in
165
Como testar o site

Antes de carregar o seu site em um servidor e declar-lo pronto para a exibio, recomendvel test-lo localmente. Certique-se de que a aparncia e o funcionamento das pginas nos navegadores de destino estejam de acordo com o esperado, que no haja vnculos rompidos e que as pginas no demorem demais a serem descarregadas. As seguintes diretrizes o auxiliaro a criar uma experincia agradvel aos visitantes do seu site: Certique-se de que as pginas funcionam conforme o esperado nos navegadores de destino e de que elas no apresentem muitos problemas nos outros navegadores. As pginas devero ser legveis e funcionais nos navegadores que no oferecerem suporte aos estilos, camadas ou ao JavaScript. Consulte Como vericar uma pgina quanto compatibilidade com os navegadores de destino, na pgina 167. No caso das pginas que funcionarem muito mal nos navegadores mais antigos, considere a possibilidade de utilizar o comportamento Vericar o navegador, para redirecionar os visitantes automaticamente at uma outra pgina. Consulte Vericar o navegador, na pgina 310. Verique o site quanto a possveis vnculos rompidos (e ajuste-os). O Dreamweaver tambm gerar uma lista de vnculos a sites externos quando for executada uma vericao de vnculos; siga-os periodicamente, para certicar-se de que ainda continuam vlidos. Como os outros sites tambm sofrem reformas e reorganizaes, a pgina qual est vinculando o seu site pode ter sido transferida ou excluda. Consulte Como vericar os vnculos entre os documentos, na pgina 168 e Como ajustar os vnculos rompidos, na pgina 169. Visualize as suas pginas no maior nmero possvel de navegadores e plataformas diferentes. Este procedimento possibilitar a observao de diferenas no layout, cores, tamanhos de fonte e tamanho padro de janelas do navegador, que no podem ser previstos em uma vericao de navegador de destino. Consulte Como visualizar em navegadores, na pgina 170. Fique atento ao tamanho das suas pginas e ao tempo de descarga. Lembre-se que as pginas que consistem de uma tabela grande sero visualizadas pelos visitantes somente aps o trmino da descarga da tabela inteira. Leve em considerao a possibilidade de desmembrar tabelas grandes; se isto no for possvel, considere, ento, colocar um contedo pequeno como uma mensagem de boas-vindas ou uma faixa de propaganda fora da tabela, no alto da pgina, para que os visitantes possam visualizar esse material enquanto a tabela descarregada. Consulte Como vericar o tempo e o tamanho da descarga, na pgina 172.
166
Captulo 5
Como verificar uma pgina quanto compatibilidade com os navegadores de destino O Dreamweaver permite a construo de pginas da Web com elementos que contam com o suporte de todos os navegadores (imagens e texto de pargrafo, por exemplo), assim como elementos que contam apenas com o suporte dos navegadores mais modernos (estilos e camadas, por exemplo). O recurso Vericar os navegadores de destino testa o HTML nos documentos, a m de vericar se algum rtulo 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 rtulos 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 Sobre os pers de navegadores, na pgina 398. possvel executar uma vericao de navegador de destino em um documento, diretrio ou no site inteiro. Observe que esse procedimento no verica os roteiros no site.
Para executar uma verificao de navegador de destino: 1
Escolha uma dentre as seguintes opes: Para executar a vericao no documento, salve o arquivo. A vericao realizada na ltima verso salva do arquivo e inclui apenas as alteraes que tiverem sido salvas. 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.
Escolha Arquivo > Vericar os navegadores de destino. Se ainda no tiver selecionado um navegador primrio, voc ser solicitado a faz-lo.
3 4
Na lista de navegadores, selecione aqueles que sero vericados. Clique em Efetuar a vericao. O relatrio do navegador de destino ser aberto no navegador primrio (e este ser iniciado, se j no estiver aberto).
167
Para salvar o relatrio para referncia futura, escolha Arquivo > Salvar, no navegador. O relatrio de vericao do navegador de destino um arquivo temporrio armazenado na pasta Temp do Windows e na raiz de documentos, no Macintosh. O arquivo ser perdido se no for salvo antes da visita a outro site.
Como verificar os vnculos entre os documentos Utilize o recurso Vericar os vnculos, para procurar vnculos que tenham sido rompidos e arquivos sem referncias em um arquivo aberto, em uma parte do site ou no site local inteiro. O Dreamweaver vericar apenas os vnculos e referncias aos documentos dentro do site e compilar uma lista de vnculos externos que aparecem no documento ou documentos selecionados, porm no os vericar. Quando o Dreamweaver terminar de vericar os vnculos nos arquivos especicados, ele abrir a caixa de dilogo Vericador de vnculos. Essa caixa de dilogo exibir uma lista de vnculos rompidos, vnculos externos (impossveis de serem vericados pelo Dreamweaver, por estarem fora do site) e arquivos rfos (arquivos aos quais no h outros documentos vinculados). Consulte Como ajustar os vnculos rompidos, na pgina 169, para obter mais informaes.
Para verificar os vnculos no documento: 1 2
Salve o arquivo em uma parte de um site local. Escolha Arquivo > Vericar os vnculos.
Para verificar os vnculos em uma parte de um site local: 1 2 3 4
Escolha Janela > Arquivos do site, para abrir a janela do site. Escolha um site no menu pop-up Lista de sites. No painel local, selecione os arquivos ou pastas a serem vericados. Inicie a vericao utilizando um dos seguintes mtodos: Clique com o boto direito do mouse (no Windows), ou clique mantendo a tecla Control pressionada (no Macintosh) e, no menu contextual, escolha Vericar os vnculos > Arquivos/pastas selecionadas. Escolha Arquivo > Vericar os vnculos.
168
Captulo 5
Para verificar os vnculos no site inteiro:
Escolha Site > Alterar os vnculos no site inteiro.

Para alternar as listas de relatrios do verificador de vnculos:
Aps realizar uma vericao de vnculo, escolha Vnculos rompidos, Vnculos externos ou Arquivos rfos, no menu pop-up Mostrar.
Para salvar o relatrio inteiro como um arquivo de texto delimitado por tabulaes:
Clique em Salvar. Como ajustar os vnculos rompidos Quando voc vericar os vnculos no Dreamweaver, ser exibida a caixa de dilogo Vericador de vnculos, que apresentar um relatrio de vnculos rompidos, externos e quando selecionado, vericar o site inteiro quanto a arquivos rfos. possvel ajustar os vnculos e referncias a imagens que tiverem sido rompidos diretamente na caixa de dilogo Vericador de vnculos, ou abrir os arquivos da lista e ajustar os vnculos no inspetor de propriedades.
Para ajustar os vnculos na caixa de dilogo Verificador de vnculos: 1 2
Selecione o vnculo rompido na caixa de dilogo Vericador de vnculos. Clique no cone correspondente pasta, para chegar ao arquivo, ou digite o caminho correto e o nome do arquivo. Pressione a tecla Tab 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 o sistema de devolues e retiradas, na pgina 148.
169
Para ajustar os vnculos no inspetor de propriedades: 1
Clique duas vezes em uma entrada da coluna Arquivo, na caixa de dilogo Vericador de vnculos. O Dreamweaver abrir o documento, selecionar a imagem ou vnculo 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 vnculos forem ajustados, suas entradas desaparecero da lista Vnculos rompidos. A permanncia de uma entrada na lista aps a digitao do novo caminho e nome de arquivo no Vericador de vnculos (ou aps o salvamento das alteraes feitas no inspetor de propriedades) indica que o Dreamweaver no conseguiu localizar o novo arquivo. O vnculo ainda ser considerado como rompido. Como visualizar em navegadores Os documentos podem ser visualizados nos navegadores de destino a qualquer momento. No necessrio salvar o documento previamente. Todas as funes relacionadas aos navegadores estaro funcionando, inclusive os comportamentos JavaScript, vnculos relativos e absolutos para documentos, controles ActiveX, plug-ins da Netscape, etc., contanto que os plug-ins ou controles ActiveX necessrios estejam instalados. Os contedos vinculados aos caminhos relativos raiz no aparecero quando os documentos forem visualizados em um navegador local. Isso ocorre porque os navegadores no reconhecem as razes dos sites mas os servidores o fazem. Para visualizar o contedo vinculado aos caminhos relativos raiz, coloque o arquivo em um servidor remoto e exiba-o nesse local. Consulte tambm Sobre os caminhos absolutos, na pgina 110. possvel denir at 20 navegadores para a visualizao. Todos os navegadores denidos aparecero no menu Visualizar no navegador.
170
Captulo 5
Para visualizar o site em um navegador:
Siga um dos procedimentos abaixo: Escolha Arquivo > Visualizar no navegador Pressione F12, para exibir o documento no navegador primrio. Pressione Control+F12 (no Windows) ou Command+F12 (no Macintosh), para exibir o documento no navegador secundrio.
Para alterar o navegador primrio ou definir um navegador secundrio: 1 2
Escolha Arquivo > Visualizar no navegador > Editar a lista de navegadores. 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 denidos atualmente. 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/. Com esta opo desativada, o Dreamweaver abrir o documento em um navegador com um caminho de arquivo iniciado por le://. Em alguns casos, os vnculos especicados como caminhos relativos raiz do site no funcionaro adequadamente quando abertos em um navegador com o caminho do tipo le://.
+ adiciona exclui Editar
um navegador lista.
da lista o navegador selecionado.
altera as denies do navegador selecionado.
e Navegador secundrio especicam se o navegador selecionado primrio ou secundrio. A tecla F12 abre o navegador primrio. A combina de teclas Control+F12 (no Windows) ou Command+F12 (no Macintosh) abre o navegador secundrio.
Navegador primrio
171
Como verificar o tempo e o tamanho da descarga O tamanho da pgina atual e o tempo estimado de descarga da mesma aparecero na parte inferior da janela do documento. O Dreamweaver calcular o tamanho com base no contedo da pgina toda, o que inclui todos os objetos vinculados, como imagens e plug-ins. O Dreamweaver estimar o tempo de descarga com base na velocidade de conexo digitada no painel da barra de status da caixa de dilogo Preferncias. O tempo de descarga varivel e depende das condies gerais da Internet.
Para definir as preferncias de tempo e tamanho de descarga: 1 2
Escolha Editar > Preferncias e, em seguida, clique na Barra de status. Escolha uma velocidade de conexo com a qual deseja calcular o tempo de descarga. A velocidade mdia de conexo nos Estados Unidos 28,8. Se o seu projeto destina-se a uma intranet, considere a escolha de 1500 (velocidade T1).
Sobre as Design Notes

As informaes adicionais relativas aos documentos podem ser controladas, como nomes de arquivos de origem da imagem e comentrios sobre o status do arquivo, utilizando o comando Design Notes. Por exemplo: se um documento for copiado de um site para outro, possvel adicionar Design Notes sobre esse documento informando que seu original est na outra pasta do site. Posteriormente, se atualizar esse documento (ou um outro usurio), voc ser informado que necessrio atualizar tambm a pgina original. O comando Design Notes pode ser utilizado tambm para controlar informaes sensveis que no podem ser colocadas no interior de um documento por motivo de segurana. Por exemplo: podem ser includas informaes sobre a criao do documento ou notas sobre a escolha de um determinado preo ou congurao, ou ainda quais fatores de marketing inuenciaram uma deciso sobre desenho. Como salvar as informaes sobre o arquivo em Design Notes Pode ser criado um arquivo de Design Notes para cada documento ou modelo do site. Observe que, se forem adicionadas Design Notes a um modelo, os documentos com base nesse modelo no as herdaro. Pode-se criar tambm as Design Notes para applets, controles ActiveX, imagens, lmes Flash, objetos Shockwave e campos de imagem nos documentos.
172
Captulo 5
Para configurar as Design Notes para o site: 1 2
Escolha Site > Denir os sites e, em seguida, clique em Editar. Na lista de categorias, esquerda, clique em Design Notes. Ative as Design Notes para o site, selecionando Manter as Design Notes (caso ainda no esteja selecionada). Quando 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. Decida se as Design Notes associadas ao site sero carregadas com o restante dos documentos, selecionando ou desmarcando Carregar as Design Notes para compartilhar. Quando a opo Carregar as Design Notes para compartilhar tiver sido selecionada, voc poder compartilhar as Design Notes com as outras pessoas de sua equipe. Quando um arquivo for colocado ou obtido, o Dreamweaver automaticamente colocar ou obter o arquivo de Design Notes a ele associado. Caso esteja trabalhando sozinho no site, voc poder cancelar a seleo desta opo para melhorar o desempenho das transferncias de arquivos; quando a opo for desmarcada, as Design Notes sero mantidas localmente, mas no sero carregadas com os arquivos.
Clique em OK.
Para adicionar Design Notes a um documento: 1
Enquanto o documento estiver ativo na janela do documento, escolha Arquivo > Design Notes. O arquivo tambm pode ser selecionado na janela do site e, em seguida, escolhendo Arquivo > Design Notes. 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 150 ou Como obter e colocar os arquivos, na pgina 151).
Na guia Informaes bsicas, adicione notas de vrios tipos: Escolha o status do documento no menu pop-up Status. Digite os comentrios na caixa de texto Notas. Clique no cone de data (logo acima do campo de texto Notas), para inserir a data atual local. Para que o arquivo de Design Notes seja sempre aberto simultaneamente abertura do arquivo, selecione Mostrar quando o arquivo for aberto.
173
Na guia Todas as informaes, adicione outras chaves e valores que possam ser teis para os outros programadores do site. Por exemplo: denomine uma chave Autor (no campo Nome) e dena o valor como sendo Henl (no campo Valor). Clique no boto com o sinal de adio (+) para adicionar um par chave/ valor; selecione um par e clique no boto com o sinal de subtrao () para remov-lo. Clique em OK para salvar as notas. As notas inseridas so salvas em uma subpasta denominada _notes, na mesma localizao do arquivo. O nome do arquivo ser o mesmo do arquivo do documento, alm da extenso .mno. Por exemplo: se o nome do arquivo for index.html, o arquivo de Design Notes a ele associado ser denominado index.html.mno.
Para adicionar Design Notes a um objeto: 1
Escolha Design Notes no menu contextual do objeto. Abra o menu contextual para o objeto, clicando com o boto direito do mouse (no Windows) ou pressionando Control e clicando (no Macintosh) no objeto. Siga as etapas 2 a 4 para adicionar Design Notes a um documento. Note 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 atribuir um status no contido no menu pop-up Status: 1 2 3 4 5
Abra as Design Notes para 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 do status inserido na primeira vez ser substitudo pelo novo valor includo posteriormente.
174
Captulo 5
Para desativar as Design Notes: 1 2 3 4
Escolha Site > Denir os sites. Na caixa de dilogo Denir os sites, selecione o site e clique em Editar. Na caixa de dilogo Denio do site, clique em Design Notes. Desmarque Manter as Design Notes. O cancelamento da seleo dessa opo desativa 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, perguntando se voc gostaria de excluir os arquivos de Design Notes existentes. Clique em Sim, para exclu-los, ou em No para manter esses arquivos.
Para utilizar as Design Notes apenas localmente: 1 2 3 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 Carregar para compartilhar. 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.
Para excluir as Design Notes no associadas ao site: 1 2 3 4
Escolha Site > Denir os sites. Na caixa de dilogo Denir os sites, selecione o site e clique em Editar. Na caixa de dilogo Denio do site, clique em Design Notes. Clique em Limpar. O Dreamweaver solicitar que verique se as Design Notes, que no esto mais associadas a um arquivo do site, devero ser excludas. Se voc utilizar o Dreamweaver para excluir um arquivo ao qual est associado um arquivo de Design Notes, ambos sero excludos; por essa razo, geralmente os arquivos de Design Notes rfos 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.
175
Como utilizar as Design Notes no Fireworks e Dreamweaver Se uma imagem for aberta no Macromedia Fireworks 3.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 myhouse.png no Fireworks e export-lo para myhouse.gif, o Fireworks criar automaticamente um arquivo de Design Notes chamado myhouse.gif.mno, contendo o nome do arquivo original, como um arquivo absoluto : URL. Por exemplo: as Design Notes para myhouse.gif devem conter a linha abaixo:
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"
Se a imagem contiver pontos ativos ou 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 utilizar um editor de imagens externo, na pgina 205), este abrir o arquivo original para ser editado.
176
Captulo 5
CAPTULO 6
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como formatar o texto
A formatao no Dreamweaver semelhante de um processador de texto padro. Utilize o submenu Texto > Formato ou o menu pop-up Formato, no inspetor de propriedades, para denir o estilo padro de formatao (Pargrafo, Prformatado, Cabealho 1, Cabealho 2, etc.) de um bloco de texto. Para alterar a fonte, tamanho, cor e alinhamento do texto selecionado, utilize o menu Texto ou o inspetor de propriedades. Para aplicar a formatao, como negrito, itlico, cdigo, sublinhado, etc., utilize o submenu Texto > Estilos. Podem ser combinados diversos rtulos HTML padro para formar um nico estilo, chamado de estilo HTML Por exemplo: a formatao HTML pode ser aplicada utilizando uma combinao de rtulos e, em seguida, salvando-a como um estilo HTML, que ser armazenado na paleta de estilos HTML. Na prxima vez que esta combinao de rtulos HTML for utilizada para formatar texto, bastar selecionar o estilo salvo na paleta de 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 estilo CSS, permite aplicar texto e formatao pgina, com a vantagem da atualizao automtica. Os estilos CSS podem ser armazenados diretamente no documento ou, para obter maior ecincia e exibilidade, em uma folha de estilos externa. Se uma folha de estilos externa for anexada a diversas pginas da Web, todas as pginas reetiro automaticamente qualquer alterao feita na folha de estilos. Para acessar os estilos CSS, utilize a paleta de estilos CSS.
177
A formatao HTML manual e os estilos HTML aplicam a formatao utilizando os rtulos HTML padro (como B, FONT e CODE) que contam com suporte de todos os navegadores conhecidos. Os estilos CSS denem a formatao do texto inteiro em uma determinada classe ou a redenem para um rtulo especco (como H1, H2, P ou LI). As CSS (acrnimo de Cascading Style Sheets folhas de estilo em cascata) contam com suporte apenas dos navegadores da Web mais recentes Netscape Navigator 4.0 e mais avanados e Microsoft Internet Explorer 3.0 e mais avanados. Os estilos CSS, HTML e a formatao HTML manual podem ser utilizados na mesma pgina. A formatao HTML manual substitui aquela aplicada com um estilo HTML ou CSS; por isso, embora implique em mais trabalho, pode ser um mtodo conveniente para modicar a formatao aplicada aos estilos HTML ou CSS.
Como formatar o texto com os rtulos HTML

possvel aplicar a formatao de texto HTML a uma carta ou construir um site inteiro com os comandos do menu Texto > Formato ou as opes do inspetor de propriedades. Esse tipo de formatao manual substitui ou anula aquela denida por um estilo HTML ou CSS. Para aplicar a formatao HTML de texto, utilize o inspetor de propriedades e os comandos no menu Texto, como Texto > Formato e Texto > Estilo. Como aplicar os rtulos de pargrafo e cabealho Utilize o menu pop-up Formato, no inspetor de propriedades, ou o submenu Texto > Formato, para aplicar os rtulos padro de pargrafo e cabealho. Para redenir a aparncia desses rtulos, utilize as folhas de estilos CSS; consulte Como formatar o texto com as folhas de estilos CSS, na pgina 188.
Para aplicar um rtulo de pargrafo ou cabealho: 1
Coloque o ponto de insero no pargrafo, ou selecione uma parte do texto no pargrafo. Para utilizar o submenu Texto > Formato ou o menu pop-up Formato, no inspetor de propriedades, escolha uma opo: Escolha um formato de pargrafo (por exemplo, Cabealho 1, Cabealho 2, Texto pr-formatado e assim por diante). O rtulo HTML associado ao estilo selecionado (por exemplo, H1 para Cabealho 1, H2 para Cabealho 2, PRE para Pr-formatado, etc.) ser aplicado ao pargrafo inteiro. Selecione Nenhum, para remover um estilo de pargrafo.
178
Captulo 6
Como alterar as caractersticas da fonte Utilize o inspetor de propriedades ou o menu Texto para alterar as caractersticas da fonte no texto selecionado.
Para alterar as caractersticas da fonte: 1
Selecione o texto. Caso no haja qualquer texto selecionado, a alterao ser aplicada ao texto digitado a seguir. Escolha dentre as seguintes opes: Para alterar a fonte, escolha uma combinao de fontes no inspetor de propriedades ou no submenu Texto > Fonte. Os navegadores exibem o texto utilizando a primeira fonte na combinao que estiver instalada no sistema do usurio. Se nenhuma das fontes da combinao tiver sido instalada, o navegador exibir o texto conforme as especicaes nas preferncias de navegador. Consulte tambm Como modicar as combinaes de fontes, na pgina 180. Escolha Padro, para remover as faces de tipos previamente aplicadas; Padro aplica a fonte padro ao texto selecionado (a fonte padro do navegador ou a fonte atribuda ao rtulo na folha de estilos CSS). Para alterar o estilo da fonte, clique em Negrito ou Itlico, no inspetor de propriedades, ou escolha um estilo de fonte (Negrito, Itlico, Sublinhado, etc.) no submenu Texto > Estilo. Para alterar o tamanho da fonte, escolha um tamanho (1 a 7) no inspetor de propriedades ou no submenu Texto > Tamanho. Os tamanhos de fontes HTML so pontos com tamanhos no especicados e relativos. Os usurios denem o tamanho do ponto da fonte padro para os seus navegadores. Esse o tamanho da fonte que ser exibido quando for escolhido Padro ou 3 no inspetor de propriedades, ou no submenu Texto > Tamanho. Os tamanhos 1 e 2 parecero menores que o da fonte padro, e os tamanhos 4 a 7 parecero maiores. Para que o seu texto aparea sempre com um tamanho de ponto especco, utilize as folhas de estilos CSS. Para aumentar ou diminuir o tamanho do texto selecionado, escolha um tamanho relativo (+ ou 1, + ou 7) no inspetor de propriedades ou no menu Texto > Aumento do tamanho ou Texto > Reduo do tamanho. Os nmeros indicam uma diferena relativa do tamanho da BASEFONT. O valor padro da BASEFONT 3. Assim, um valor +4 resulta em um tamanho de fonte 7. O Dreamweaver no exibe o rtulo BASEFONT (que colocado na seo HEAD (CABEALHO)), embora o tamanho da fonte deva ser exibido corretamente no navegador.
179
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 um texto de pgina da Web. O navegador utilizar a primeira fonte da combinao que estiver instalada no sistema do usurio; se nenhuma das fontes na combinao for encontrada, o navegador exibir o texto conforme as especicaes das preferncias do navegador.
Para modificar as combinaes de fontes: 1 2
Escolha Texto > Fonte > Editar a lista de fontes. Selecione a combinao de fontes na lista, no alto da caixa de dilogo. As fontes na combinao selecionada so apresentadas na lista Fontes escolhidas, no canto inferior esquerdo da caixa de dilogo. direita, h uma lista de todas as fontes instaladas no sistema.
Escolha dentre as seguintes opes: Para adicionar ou remover as fontes de uma combinao, clique no boto << ou >>, entre as listas Fontes escolhidas e Fontes disponveis. Para adicionar ou remover uma combinao de fontes, clique nos botes de adio (+) e subtrao (), respectivamente, 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 adicion-la combinao. A incluso de uma fonte que no est instalada no sistema ser til. Por exemplo: para especicar uma fonte exclusiva ao Windows, quando voc estiver criando algo em um Macintosh. Para mover a combinao de fontes para cima ou para baixo na lista, clique nos botes de seta de direo, no alto da caixa de dilogo.
Para adicionar uma nova combinao lista de fontes: 1 2
Escolha Texto > Fonte > Editar a lista de fontes. Selecione uma fonte na lista Fontes disponveis e clique no boto << para mover a fonte para a lista Fontes escolhidas. Repita a etapa 2 para cada fonte subseqente na combinao. Para adicionar uma fonte que no esteja instalada no sistema, digite o nome da fonte no campo de texto abaixo da lista Fontes disponveis e clique no boto <<, para adicionar a fonte combinao. A incluso de uma fonte que no est instalada no sistema ser til. Por exemplo: para especicar uma fonte exclusiva ao Windows, quando voc estiver criando algo em um Macintosh.
180
Captulo 6
Ao terminar de selecionar as fontes especcas, escolha uma famlia de fontes genricas no menu Fontes disponveis e clique no boto <<, para mov-la at a lista Fontes escolhidas. As famlias de fontes genricas incluem as fontes cursivas, fantasia, monoespaadas, sans-serif e serif. Se nenhuma das fontes na lista Fontes escolhidas estiver disponvel no sistema do usurio, o texto aparecer com a fonte padro associada famlia de fontes genricas. Por exemplo: a fonte monoespaada padro na maioria dos sistemas Courier.
Como alterar a cor do texto A cor do texto selecionado pode ser alterada, para que uma nova cor anule aquela denida nas Propriedades da pgina. Se nenhuma cor do texto tiver sido denida nas Propriedades da pgina, a cor padro do texto ser preta.
Para alterar a cor do texto: 1 2
Selecione o texto. Escolha dentre as seguintes opes: Escolha uma cor na paleta de cores aceitas pelo navegador, clicando na caixa de cores, no inspetor de propriedades. Escolha Texto > Cor. Aparecer a caixa de dilogo do sistema Seletor de cores. 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 94.
Para retornar o texto cor padro: 1
No inspetor de propriedades, clique na caixa de cores, para abrir a paleta de cores aceitas pelo navegador. Clique no boto Apagar (o boto do meio, no canto inferior direito).
181
Como alinhar o texto e os elementos Alinhe o texto na pgina, utilizando o inspetor de propriedades ou o submenu Texto > Alinhamento. Centralize qualquer elemento da pgina atravs do comando Texto > Alinhamento > No centro.
Para alinhar o texto: 1 2
Selecione o texto a ser alinhado. Clique em uma opo de alinhamento ( esquerda, direita ou No centro), no inspetor de propriedades, ou escolha Texto > Alinhamento e escolha um comando.
Para centralizar os elementos: 1
Selecione o elemento desejado (imagem, plug-in, tabela ou um outro elemento da pgina) para centraliz-lo. Escolha Texto > Alinhamento > No centro.
Nota: possvel alinhar e centralizar blocos inteiros de texto, porm no possvel alinhar ou centralizar uma parte de um cabealho ou pargrafo. Para recuar o texto e remover o recuo: 1 2
Selecione o texto desejado. Clique no boto Recuo ou Remover o recuo, no inspetor de propriedades, e escolha Texto > Recuo ou Remover o recuo, ou escolha Lista > Recuo ou Remover o recuo, no menu contextual. Este procedimento aplica ou remove o rtulo BLOCKQUOTE quando o texto selecionado for um pargrafo ou cabealho, e adiciona ou remove um rtulo UL ou OL adicional, no caso de uma lista.
182
Captulo 6
Como criar listas

possvel criar listas numeradas, com marcadores e de denies a partir de um texto existente ou de um novo texto, medida que se digita na janela do documento. As listas tambm podem ser aninhadas.
Para criar uma nova lista: 1
Posicione o ponto de insero na linha onde voc deseja adicionar uma lista de novos itens. Clique no boto 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. Inicie digitando a lista e pressione a tecla Enter (no Windows) ou Return (no Macintosh), para passar a um novo item. Para completar a lista, pressione duas vezes Enter (no Windows) ou Return (no Macintosh).
Para criar uma lista utilizando um texto existente: 1 2
Selecione uma srie de pargrafos para convert-los em uma lista. Clique no boto 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.
Para criar uma lista aninhada: 1 2
Selecione os itens da lista que sero aninhados. Clique no boto Recuo, no inspetor de propriedades, ou escolha Texto > Recuo.
183
Como formatar o texto com os estilos HTML

Um estilo HTML denido por um ou mais rtulos HTML (como B, I, FONT e CENTER) que aplicam formatao ao texto. A especicao HTML 4.0 lanada pelo World Wide Web Consortium (W3C), no incio de 1998, recomenda a utilizao dos rtulos de formatao HTML em vez das folhas de estilos CSS. Entretanto, na prtica, os rtulos de formatao HTML embora proporcionem um controle mais limitado sobre a aparncia que as folhas de estilos CSS contam com o suporte de um nmero maior de navegadores que as folhas de estilos CSS e, provavelmente, faro parte das ferramentas dos programadores da Web enquanto as verses 3.0 e anteriores dos navegadores se constiturem em uma parte considervel do trfego de rede. Para obter informaes especcas sobre a formatao com os rtulos HTML, consulte um dos seguintes tpicos: Como alterar as caractersticas da fonte, na pgina 179 Como alterar a cor do texto, na pgina 181 Como alinhar o texto e os elementos, na pgina 182 Os rtulos HTML que denem a estrutura do documento em vez da sua aparncia cabealhos, pargrafos e listas, por exemplo ainda so uma parte importante da especicao HTML. De fato, caso voc esteja planejando utilizar as folhas de estilos CSS para denir as caractersticas das fontes da pgina, importante utilizar os rtulos de cabealho padro, pois eles ajudam a preservar a estrutura da pgina nos navegadores que no oferecem suporte s folhas de estilos CSS. Para examinar um exemplo de como isto funciona, experimente exibir as pginas da Ajuda do Dreamweaver em um navegador da verso 3.0. Consulte Como aplicar os rtulos de pargrafo e cabealho, na pgina 178. Como utilizar os estilos HTML Utilize os estilos HTML para salvar a formatao de texto e pargrafos que dever ser reutilizada em outra parte de seus documentos. Uma vez criado um estilo HTML com base em um ou mais rtulos HTML, essa formatao poder ser reaplicada em qualquer texto de documentos que utilizem a paleta de estilos HTML. Diferentemente dos estilos CSS, a formatao do estilo HTML afetar apenas o texto ao qual for aplicada, ou o texto criado com um estilo HTML selecionado. Se for alterada a formatao de um estilo HTML criado por voc, o texto originalmente formatado com esse estilo no ser atualizado. Se desejar ter a opo de alterar a formatao e atualizar automaticamente todas as suas ocorrncias, utilize uma folha de estilos CSS; consulte Como formatar o texto com as folhas de estilos CSS, na pgina 188.
184
Captulo 6
A paleta de estilos HTML pode ser utilizada para registrar os estilos HTML utilizados no site e, em seguida, compartilh-los com outros usurios, sites locais ou remotos.
Para exibir a paleta de estilos HTML, siga um dos procedimentos abaixo:
Escolha Janela > Estilos HTML. Clique no boto Estilos HTML, no Iniciador. Clique no cone de Estilos HTML (um smbolo de pargrafo amarelo no Miniiniciador, na parte inferior da janela do documento).
Para exibir um estilo HTML existente: 1
Na paleta de estilos HTML, selecione um estilo. Observe que Limpar o estilo do pargrafo e Limpar o estilo da seleo so utilizados em um texto que contm um estilo aplicado; mas eles no constituem estilos; por esse motivo, no podem ser exibidos ou editados.
Clique com o boto direito do mouse (no Windows) ou pressione a tecla Command e clique (no Macintosh) e, no menu contextual, escolha Editar, ou clique duas vezes no estilo HTML e, no menu contextual, escolha Editar. 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 denies do estilo sero adicionadas formatao original do texto (Adicionar ao estilo existente), ou removidas da formatao original e substitudas pelas novas denies (Limpar o estilo existente).
Para aplicar um estilo HTML existente:
Na paleta de estilos HTML, selecione um estilo. Se a caixa de seleo Aplicao automtica, situada na parte inferior da paleta, estiver selecionada, clique uma vez no estilo. Se a caixa de seleo Aplicao automtica no estiver selecionada, clique no estilo e, em seguida, clique em Aplicar.
185
Para limpar a formatao do texto em um documento: 1 2
Selecione o texto formatado. Na paleta de estilos HTML, clique em Limpar o estilo do pargrafo ou Limpar o estilo da seleo. A aplicao de Limpar o estilo do pargrafo remove a formatao do bloco de texto selecionado no documento. A aplicao de Limpar o estilo da seleo remove a formatao do texto selecionado.
Nota: Utilize Limpar o estilo do pargrafo e Limpar o estilo da seleo para remover qualquer formatao, independentemente de como a formatao original tenha sido aplicada (atravs da paleta de estilos HTML ou do inspetor de propriedades, por exemplo). Para remover um estilo da paleta de estilos HTML: 1
Na paleta de estilos HTML, desmarque a caixa de seleo para desativar a opo Aplicao automtica. Selecione um estilo HTML. Clique no cone de Excluir o estilo (lata de lixo), no canto inferior direito da paleta.
2 3
Para criar um novo estilo HTML com base em texto j existente: 1
No documento, selecione ou crie um texto com a formatao a ser utilizada como base para o novo estilo HTML. O inspetor de propriedades pode ser utilizado para exibir e aplicar a formatao. Na paleta de estilos HTML, clique no cone de Novo estilo, no canto inferior direito. Na caixa de dilogo Denir o estilo HTML, denomine o estilo e ajuste a formatao, se for necessrio. Escolha se deseja aplicar o estilo HTML ao texto selecionado ou ao pargrafo inteiro. Observe que o estilo de pargrafo ser aplicado ao bloco inteiro de texto onde estiver o ponto de insero, independentemente do texto selecionado. Escolha se o estilo HTML ser adicionado ao estilo HTML existente (CSS ou HTML) do texto ou pargrafo selecionado, ou se substituir a formatao da seleo ou pargrafo pelo novo estilo HTML. Observe que as opes de formatao na paleta de estilos HTML coincidem com as do inspetor de propriedades.
Clique em OK.
186
Captulo 6
Para criar um novo estilo HTML com base em um estilo HTML j existente: 1
Certique-se de que no haja qualquer texto selecionado na janela do documento. Na paleta de estilos HTML, selecione um estilo. Clique com o boto direito do mouse (no Windows) ou pressione a tecla Control e clique (no Macintosh) no estilo e, em seguida escolha Duplicar, no menu contextual. Aparecer a caixa de dilogo Denir o estilo HTML. Para voltar s opes padro, clique em Limpar.
2 3
Conclua as etapas 3 e 4 das instrues para criar um novo estilo com base no texto existente.
Para criar um novo estilo HTML a partir do zero: 1
Na paleta de 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 no texto existente. Clique em Limpar, para redenir a caixa de dilogo para as opes padro. Clique em OK.
Para editar um estilo HTML existente: 1
Certique-se de que no haja qualquer texto selecionado na janela do documento. Na paleta de estilos HTML, verique se a opo Aplicao automtica est desativada. Se Aplicao automtica estiver ativada, o estilo HTML ser aplicado quando for selecionado na paleta de estilos HTML.
Na paleta de estilos HTML, clique com o boto direito do mouse (no Windows) ou pressione a tecla Control e clique (no Macintosh) no estilo e, em seguida, escolha Editar, no menu contextual. Aparecer a caixa de dilogo Denir o estilo HTML. Para voltar s opes padro, clique em Limpar. Quando um estilo HTML for editado, o Dreamweaver no atualizar automaticamente o texto que tiver sido formatado com esse estilo anteriormente. Se for necessrio atualizar a formatao aplicada com um estilo, utilize a folha de estilos CSS; consulte Como formatar o texto com as folhas de estilos CSS, na pgina 188.
187
Para compartilhar os estilos HTML com outros sites ou usurios: 1
Escolha Janela > Arquivos do site, a m de abrir a janela do site na exibio Arquivos do site. No painel direita, abra a pasta raiz do site e, em seguida a pasta Biblioteca. Voc notar um arquivo chamado styles.xml, que contm todos os estilos HTML para o seu site. Esse arquivo pode ser colocado, obtido, devolvido, retirado e copiado, como qualquer outro no site. Para o arquivo styles.xml, tambm podero ser criadas Design Notes. Observe que necessrio retirar primeiro o arquivo styles.xml, para poder criar ou editar um estilo de um site remoto. Para obter mais informaes sobre a utilizao destas opes, consulte Como congurar um site remoto, na pgina 140.
Como formatar o texto com as folhas de estilos CSS

Um estilo um grupo de atributos de formatao que controla a aparncia de uma faixa de texto de um nico documento. A folha de estilos CSS pode ser utilizada para controlar vrios documentos simultaneamente e inclui todos os estilos de um documento. A vantagem de utilizar as folhas de estilos CSS em relao aos estilos HTML que, alm de estarem vinculadas a vrios documentos, quando um estilo CSS for atualizado ou alterado, a formatao de todos os documentos que utilizam essa folha de estilos especca ser tambm automaticamente atualizada. Os estilos CSS so identicados pelo nome ou pelo rtulo HTML, o que permite alterar o atributo de um estilo e exibir as modicaes no texto inteiro ao qual esse estilo foi aplicado. Os estilos CSS nos documentos HTML podem controlar a maioria dos atributos tradicionais de formatao de texto, como fonte, tamanho e alinhamento. Eles podem especicar tambm atributos exclusivos de HTML, como posicionamento, efeitos especiais e imagens cambiveis pelo mouse. As folhas de estilos CSS residem na rea do HEAD de um documento e denem uma srie de estilos. Os estilos CSS podem denir os atributos de formatao dos rtulos HTML, faixas de texto identicadas por um atributo CLASS ou texto que atenda aos critrios de compatibilidade com a especicao de folhas de estilo em cascata (Cascading Style Sheets - CSS). O Dreamweaver reconhece os estilos denidos nos documentos existentes, contanto que eles estejam em conformidade com as instrues CSS. As folhas de estilos CSS funcionam em navegadores 4.0 e mais avanados. O Internet Explorer 3.0 reconhece alguns atributos das folhas de estilos CSS, porm os navegadores das verses anteriores os ignoram.
188
Captulo 6
Os trs tipos de folhas de estilos CSS, abaixo, esto disponveis no Dreamweaver: Os estilos CSS personalizados so semelhantes queles utilizados em um processador de texto, exceto na ausncia de distino entre os estilos de caractere e de pargrafo. Os estilos CSS personalizados podem ser aplicados a qualquer faixa ou bloco de texto. Se o estilo CSS for aplicado a um bloco de texto (como um pargrafo inteiro ou a uma lista no-ordenada), ser adicionado um atributo CLASS ao rtulo do bloco (por exemplo: P CLASS="meuEstilo" ou UL CLASS="meuEstilo"). Se o estilo CSS for aplicado a uma faixa de texto, os rtulos SPAN que contiverem o atributo CLASS sero inseridos em volta do texto selecionado. Consulte Como aplicar um estilo CSS (classe) personalizado, na pgina 193. Os estilos de rtulos HTML redenem a formatao de um rtulo especco, como H1. Quando um estilo CSS for criado ou alterado para o rtulo H1, todo o texto formatado com esse rtulo ser imediatamente atualizado. Os estilos do seletor CSS redenem a formatao de uma determinada combinao de rtulos (por exemplo, TD H2 ser aplicado sempre que um cabealho H2 aparecer em uma clula de tabela) ou de todos os rtulos que contiverem um atributo ID (por exemplo: #myStyle ser aplicado a todos os rtulos que contiverem o par atributo-valor ID="myStyle"). A formatao manual de HTML anular a formatao aplicada com os estilosCSS (ou HTML). Para que os estilos CSS controlem a formatao de um pargrafo, remova toda a formatao HTML manual ou os estilos HTML. Embora voc possa congurar um nmero ilimitado de atributos de estilos CSS denidos pela especicao CSS1 no Dreamweaver, nem todos os atributos aparecero na janela do documento. Os atributos ocultos so marcados com um asterisco (*) na caixa de dilogo Denio de estilo. Observe tambm que a aparncia de alguns dos atributos de estilos CSS que podem ser denidos no Dreamweaver diferente no Microsoft Internet Explorer 4.0 e no Netscape Navigator 4.0, e alguns no contam com suporte de qualquer navegador. Sobre as propriedades dos estilos CSS A especicao Cascading Style Sheets (CSS1), controlada pelo World Wide Web Consortium, dene as propriedades dos estilos CSS (por exemplo: fonte, cor, preenchimento, margem, espaamento entre as palavras) e controla a aparncia dos elementos na pgina da Web. O Dreamweaver permite denir qualquer propriedade CSS1. No Microsoft Internet Explorer 4.0, podem ser utilizadas as linguagens de roteiro, como JavaScript ou VBScript, para alterar as propriedades de posicionamento e estilos CSS dos elementos, depois que a pgina tiver sido carregada. No Netscape Navigator 4.0, as propriedades dos estilos CSS no podem ser alteradas aps a carga da pgina, apenas as propriedades de posicionamento.
189
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. A Ajuda do Dreamweaver consiste de pginas HTML que utilizam uma folha de estilos CSS vinculada, denominada help.css. Para examinar a aparncia do cdigo para uma denio de folha de estilos CSS, 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 examinar como a folha de estilos CSS est vinculada ao documento atravs de um rtulo LINK , bem como os estilos CSS especcos so aplicados.
Para criar ou vincular uma folha de estilos CSS externa: 1 2 3 4
Escolha Janela > Estilos CSS, ou clique no boto Estilos CSS, no Iniciador. Na paleta de estilos CSS, clique no cone de Abrir a folha de estilos. Na caixa de dilogo Editar a folha de estilos, clique em Vnculo. Na caixa de dilogo Vincular a folha de estilos externa, siga um dos procedimento abaixo: Clique em Procurar (no Windows) ou Escolher (no Macintosh), para procurar uma folha de estilos CSS externa, ou digite o caminho da folha de estilos na caixa Arquivo/URL. Crie uma nova folha de estilos CSS externa, digitando um nome de arquivo (que ainda no exista no local especicado). As folhas de estilos devem conter a extenso .css.
Selecione a opo Vincular ou Importar, para especicar e criar o rtulo utilizado para anexar a folha de estilos CSS externa ao documento e, em seguida, clique em OK. A opo Importar insere no documento 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, Vincular oferece mais recursos e funciona com mais navegadores. O nome da folha de estilos CSS externa aparece com o identicador (vincular ou importar) na lista de estilos, na caixa de dilogo Editar a folha de estilos. Conclua as etapas abaixo para criar ou editar os estilos denidos na folha de estilos CSS externa.
190
Captulo 6
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 uma folha de estilos CSS, na pgina 192. 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: 1
Abra qualquer documento que esteja vinculado folha de estilos CSS externa a ser alterada. Siga um dos procedimentos abaixo: Escolha Janela > Estilos CSS, ou clique no boto Estilos CSS, no Iniciador. Na paleta de estilos CSS, clique no cone de Abrir a folha de estilos. Escolha Texto > Estilos CSS > Editar a folha de estilos. 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, que exibir os estilos na folha de estilos externa.
Edite os estilos. Consulte Como criar uma folha de estilos CSS, na pgina 192. Ao terminar de denir os estilos, clique em Salvar.
191
Como criar uma folha de estilos CSS Crie uma folha de estilos CSS para automatizar a formatao dos rtulos HTML ou de uma faixa de texto identicada pelo atributo CLASS.
Para criar uma folha de estilos CSS: 1
Escolha Janela > Estilos CSS e clique no boto Novo estilo, na paleta de estilos CSS. Escolha uma dentre as seguintes opes de estilo CSS:
Criar estilo personalizado (classe) cria um estilo que um atributo CLASS a uma faixa ou bloco de texto. Redefinir o rtulo HTML
pode ser aplicado como
redene a formatao padro de um rtulo HTML
especco.
Utilizar o seletor CSS dene a formatao para uma determinada combinao de rtulos ou para todos os rtulos que contm um atributo ID especco. 3
Digite um nome, rtulo ou seletor para o novo estilo: Os nomes de estilos CSS personalizados devem iniciar com um ponto. Caso o ponto no seja colocado, o Dreamweaver o digitar. Para redenir um estilo de rtulo HTML, digite um rtulo HTML ou escolha algum no menu pop-up. Para um seletor CSS, digite qualquer critrio vlido para um seletor (por exemplo: TD H2 ou #myStyle), ou escolha um seletor no menu pop-up.
Clique em um nome de painel no lado esquerdo da caixa de dilogo e escolha as denies de formatao do novo estilo CSS no painel correspondente. Deixe alguns atributos em branco, caso no sejam importantes para o estilo. Os atributos que no aparecerem na janela do documento so marcados com um asterisco (*) na caixa de dilogo Denio do 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 com suporte de qualquer navegador.
192
Captulo 6
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 do 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 na paleta de estilos CSS e no submenu Texto > Estilos CSS. Os estilos de rtulos HTML e os estilos de seletor CSS no aparecero na paleta de estilos CSS porque no podem ser aplicados, mas sero representados automaticamente na janela do documento onde ocorrer o rtulo ou seletor. Como aplicar um estilo CSS (classe) 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 rtulos que o controlam. A paleta de estilos CSS exibe os nomes de todos os estilos disponveis. No confunda os estilos CSS com opes como Negrito ou Varivel, do submenu Texto > Estilo; essas opes so atributos de formatao predenidos que correspondem a rtulos 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 194.
193
Para aplicar um estilo CSS personalizado: 1 2
Escolha Janela > Estilos CSS. Selecione o texto ao qual o estilo CSS ser aplicado. Coloque o ponto de insero em um pargrafo, para aplicar o estilo ao pargrafo inteiro. Para especicar o rtulo exato ao qual o estilo CSS dever ser aplicado, selecione o rtulo com o seletor, na parte inferior esquerda da janela do documento. A seleo do rtulo tambm poder ser alterada com o menu popup Aplicar a, na paleta de estilos CSS. Se for selecionada uma faixa de texto em um nico pargrafo, o estilo CSS afetar apenas a faixa selecionada.
Clique em um nome de estilo na paleta de estilos CSS.
Um estilo CSS tambm pode ser aplicado escolhendo um nome de estilo no submenu Texto > Estilos CSS, ou clicando com o boto direito do mouse (no Windows), ou pressionando a tecla Control e clicando (no Macintosh) para escolher o nome do estilo no submenu Estilos CSS do menu contextual. O rtulo da seleo atual aparecer ao lado do comando Estilo personalizado. Sobre os estilos conflitantes Quando dois ou mais estilos CSS forem aplicados ao mesmo texto, estes podero se tornar conitantes e produzir resultados inesperados. Os navegadores aplicam os atributos de estilo segundo as regras abaixo: Se dois estilos forem aplicados ao mesmo texto, o navegador exibir todos os atributos de ambos os estilos, a menos que os atributos especcos sejam conitantes. Por exemplo: um estilo poder especicar azul para a cor do texto enquanto o outro poder denir vermelho. Se os atributos de dois estilos aplicados ao mesmo texto forem conitantes, o navegador exibir o atributo do estilo mais prximo (quele do texto). Se houver um conito direto, os atributos dos estilos CSS (aplicados com o atributo CLASS) anularo os dos estilos de rtulos HTML. No exemplo seguinte, o estilo denido para H1 deve especicar a fonte, o tamanho e a cor para todos os pargrafos H1, mas o estilo CSS personalizado .Azul, aplicado a esse pargrafo anula a denio de cor no estilo H1. O segundo estilo CSS personalizado .Vermelho anular o .Azul porque ele est contido no estilo .Azul.
<H1>Este pargrafo est controlado pelo estilo personalizado .Azul e pelo estilo de rtulo HTML H1. Exceto pelo fato de esta sentena ser controlada pelo estilo .Vermelho. Agora, estamos de volta ao estilo .Azul.</H1>
194
Captulo 6
Como utilizar a paleta de estilos CSS Utilize a paleta de estilos CSS para aplicar os estilos CSS personalizados seleo atual. Essa paleta exibe apenas os estilos CSS (classes) personalizados; os estilos redenidos de rtulos HTML e de seletor CSS no aparecem na paleta de estilos CSS porque so aplicados automaticamente a qualquer texto controlado pelo rtulo ou seletor especicado. Caso seja conveniente recortar e colar estilos personalizados que podem ser reutilizados mas no atualizados e personalizados, utilize a paleta de estilos HTML. Escolha Janela > Estilos CSS, para exibir a paleta de estilos CSS.
Aplicar a exibe o rtulo da seleo atual. Escolha um rtulo no menu pop-up para
selecionar uma opo diferente.

Abrir a folha de estilos abre a caixa de dilogo Editar a folha de estilos. Edite os estilos no documento atual ou em uma folha de estilos remota.
Consulte tambm Como formatar o texto com as folhas de estilos CSS, na pgina 188.
Nota: Clique com o boto direito do mouse (no Windows) ou pressione a tecla Control e clique (no Macintosh) na paleta de estilos CSS, para abrir um menu contextual, que inclui os comandos Novo, Editar, Duplicar, Excluir e Aplicar.
Como definir as preferncias de formato de folhas de estilos As preferncias de formato das folhas de estilos CSS controlam a maneira como 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 formato das folhas de estilos CSS. Escolha Editar > Preferncias, e clique em Formato da folha de estilos CSS, para exibir as preferncias de formato da folha de estilos CSS. Consulte tambm Como formatar o texto com as folhas de estilos CSS, na pgina 188. determina quais atributos de estilo CSS o Dreamweaver gravar em formato abreviado.
Ao criar os estilos, utilizar o formato abreviado de Ao editar os estilos existentes, utilizar 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.
195
Como converter os estilos CSS em markup HTML

Se tiverem sido utilizados os estilos CSS para especicar a formatao do texto (como famlia, tamanho, cor e decorao das fontes) e, posteriormente, voc decidir tornar a formatao visvel em um navegador 3.0, utilize o comando Arquivo > Converter > Compatvel com navegador 3.0, para converter o maior nmero de informaes possveis relativas aos estilos em rtulos HTML.
Para converter um arquivo que utiliza os estilos CSS em um arquivo compatvel com navegador 3.0: 1 2
Escolha Arquivo > Converter > Compatvel com navegador 3.0. Na caixa de dilogo que aparecer, escolha Estilos CSS em markup HTML. Quando a opo Tabelas em camadas 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 rtulos 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 HTML, na pgina 197 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.
196
Captulo 6
Tabela de converso de CSS em markup HTML Os atributos CSS relacionados na tabela abaixo so convertidos em markup HTML com o comando Arquivo > Converter > Compatvel com navegador 3.0. Consulte Como converter os estilos CSS em markup HTML, na pgina 196. Os atributos no contidos na tabela sero removidos.
Atributo CSS cor famlia da fonte tamanho da fonte estilo de fonte: oblquo estilo de fonte: itlico peso da fonte tipo de estilo de lista: quadrado tipo de estilo de lista: crculo tipo de estilo de lista: disco tipo de estilo de lista: romano maisculo tipo de estilo de lista: romano minsculo tipo de estilo de lista: alfabeto maisculo tipo de estilo de lista: alfabeto minsculo estilo de lista alinhamento do texto decorao do texto: sublinhado decorao do texto: riscado Convertido em FONT COLOR FONT FACE FONT SIZE=[1-7] I I N UL TYPE="quadrado" UL TYPE="crculo" UL TYPE="disco" 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
197
Como verificar a ortografia

Utilize o comando Vericar a ortograa, no menu Texto, para corrigir a ortograa no documento. Esse comando ignora os rtulos HTML e valores de atributos. Como padro, a vericao ortogrca utiliza o dicionrio ortogrco de ingls dos EUA. Para alterar o dicionrio, escolha Editar > Preferncias > Geral e selecione um dicionrio diferente no menu pop-up. Os dicionrios dos idiomas adicionais esto disponveis para descarga no Centro de programadores do Dreamweaver. Caixa de dilogo Verificar a ortografia Utilize as seguintes opes da caixa de dilogo Vericar a ortograa para vericar a ortograa no documento: Para exibir a caixa de dilogo, escolha Texto > Vericar a ortograa. adiciona a palavra no-reconhecida ao seu dicionrio pessoal. Para remover as palavras do dicionrio pessoal, edite o arquivo Personal.dat em um editor de texto.
Adicionar ao dicionrio pessoal Ignorar
ignora a ocorrncia de uma palavra no-reconhecida. ignora todas as ocorrncias de uma palavra no-reconhecida.
Ignorar todas Alterar
substitui a ocorrncia da palavra no-reconhecida pelo texto digitado na caixa Alterar para, ou pela seleo na lista Sugestes. substitui todas as ocorrncias da palavra no-reconhecida.
Alterar todas
198
Captulo 6
CAPTULO 7
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como inserir imagens
O Dreamweaver, como a maioria dos navegadores, pode exibir imagens nos formatos JPEG e GIF. O Dreamweaver, o Microsoft Internet Explorer 4.0 ou mais avanado, e o Netscape Navigator 4.04 ou mais avanado tambm oferecem suporte s imagens no formato PNG. Em geral, JPEG o formato de alto nvel para imagens fotogrcas ou de tons contnuos, e GIF preferido para as imagens de tons descontnuos ou aquelas com extensas reas de cores slidas. O formato PNG um substituto livre de patentes ao GIF, que inclui suporte para as imagens que tiverem as cores indexadas, escala de cinza e true-color. Ele tambm oferece suporte ao canal alfa para transparncia. PNG o formato de arquivo original do Macromedia Fireworks. Para utilizar uma imagem de fundo na pgina, especique-a como uma propriedade da pgina. Consulte Como denir uma imagem de fundo ou a cor da pgina, na pgina 94. Para sobrepor as imagens, insira-as nas camadas. Consulte Como utilizar as camadas, na pgina 235.
199
Como inserir uma imagem

Quando uma imagem inserida em um documento do Dreamweaver, o programa gera automaticamente uma referncia desse arquivo no HTML. Para assegurar que essa referncia est correta, o arquivo de imagem deve estar no site. Caso no esteja, o Dreamweaver perguntar se o arquivo deve ser copiado em uma pasta do site.
Para inserir uma imagem: 1
Siga um dos procedimentos abaixo: Coloque o ponto de insero onde a imagem dever aparecer na janela do documento e, em seguida, escolha Inserir > Imagem, ou clique no boto Inserir a imagem, no painel Comuns da paleta de objetos. Arraste o boto Inserir a imagem, da paleta de objetos at a posio escolhida na janela do documento. Arraste uma imagem da rea de trabalho at essa mesma posio e, em seguida, v para a etapa 3.
Na caixa de dilogo que aparecer, clique em Procurar (no Windows) ou Escolher (no Macintosh), para selecionar 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.
200
Captulo 7
Como definir as propriedades da imagem

Para exibir as seguintes propriedades no inspetor de propriedades, selecione uma imagem na janela do documento. O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades. permite denominar a imagem, o que possibilita se referir a ela com uma linguagem de criao de roteiros, como JavaScript ou VBScript.
Nome 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 de origem de HTML.
Se forem denidos valores para L e U que no correspondam 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 descarga, porque o navegador descarrega 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 redimension-las.
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 Sobre os caminhos absolutos, na pgina 110.
Vnculo especica um hipervnculo para a imagem. Arraste o cone indicador de arquivos at um arquivo na janela do site ou clique no cone correspondente pasta, para procurar e selecionar um documento no seu site, ou digite a URL. Alinhar alinha uma imagem e o texto na mesma linha. Consulte Como alinhar os
elementos, na pgina 203.

Alt.
especica um texto alternativo que aparece no lugar da imagem para os navegadores somente de texto ou para os navegadores que tiverem sido denidos para a descarga manual de imagens. Para os usurios com problemas de vista, 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. adicionam espao, em pixels, acima, abaixo e em ambos os
Espao V e Espao H
lados da imagem.
201
Destino
especica a moldura ou janela na qual a pgina vinculada dever ser carregada. Esta opo no estar disponvel quando a imagem estiver desvinculada. 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 ter o nome especicado. Quando essa janela passar a existir, outros arquivos podero ser destinados para esse local. Podem ser escolhidos tambm os seguintes nomes de destino reservados:
_blank
carrega o arquivo vinculado em uma janela do navegador nova e sem
nome.
_parent carrega o arquivo vinculado em um conjunto-pai de molduras ou na janela da moldura que contm o vnculo. Se a moldura onde est o vnculo no estiver aninhada, o arquivo vinculado ser carregado na janela inteira do navegador. _self carrega o arquivo vinculado na mesma moldura ou janela que o vnculo. Esse destino est implcito, portanto geralmente no necessrio especic-lo. _top carrega o arquivo vinculado na janela inteira do navegador, removendo todas as molduras. Orig. baixa especica a imagem que deve ser carregada antes da imagem principal.
Muitos designers utilizam uma verso de 2 bits (em preto e branco) da imagem principal, porque carregada rapidamente, e serve como uma representao para os visitantes do que eles imaginaram, mas pode-se utilizar tambm qualquer imagem que tenha as mesmas dimenses da principal.
Borda dene a largura, em pixels, da borda do vnculo em volta da imagem. Insira
0 (zero), para que no haja uma borda. possibilita a criao de mapas de imagens do cliente. Consulte Como criar os mapas de imagens, na pgina 211.
Campo Nome do mapa Atualizar
redene os valores L e U do tamanho original da imagem.
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 205.
202
Captulo 7
Como alinhar os elementos As seguintes opes de alinhamento aparecem no menu suspenso de mesmo nome, no inspetor de propriedades, e podem ser associadas a determinados elementos, como imagens e plug-ins. Os botes de alinhamento ( esquerda, direita e No centro) tambm podem ser utilizados para colocar os elementos selecionados. geralmente especica um alinhamento na linha de base. O padro pode ser diferente, dependendo do navegador.
Padro do navegador Linha de base e Embaixo
alinham a base do objeto selecionado com a parte de
baixo do texto. alinha a parte de baixo absoluta do texto, incluindo as hastes descendentes (como na letra g) com a base do objeto.
Embaixo absoluto No alto alinha a parte superior do caractere mais alto na linha do texto com a parte
superior do objeto selecionado.

Alto do texto
alinha o caractere mais alto na linha do texto com a parte superior
do objeto.
Meio
alinha a metade do objeto selecionado com a linha de base do texto. alinha o meio do objeto selecionado com a metade do texto.
Meio absoluto esquerda
coloca o objeto na margem esquerda, quebrando automaticamente as linhas do texto em volta dele direita. Se o texto alinhado esquerda preceder o objeto na linha, ele geralmente forar os objetos alinhados esquerda a passarem para a prxima linha.
direita coloca o objeto na margem direita, quebrando automaticamente as linhas
do texto em volta dele esquerda. Se o texto alinhado direita preceder o objeto na linha, ele geralmente forar os objetos alinhados direita a passarem para a prxima linha. Como redimensionar as imagens e os outros elementos Os elementos, como as imagens, plug-ins, lmes Shockwave ou Flash, applets 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 Flash e os outros elementos que se baseiam em vetores so inteiramente redimensionveis e no perdem a qualidade quando a sua escala for modicada.
203
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 determinado 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 descarga.
Para redimensionar um elemento: 1
Selecione o elemento (uma imagem ou lme Shockwave, por exemplo) na janela do documento. Aparecero alas de redimensionamento nas partes inferior e direita 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 rtulos, para selecionar o elemento.
Redimensione o elemento, seguindo um dos procedimentos abaixo: Para ajustar a largura do elemento, arraste a ala de seleo no lado direito. Para ajustar a altura do elemento, arraste a ala de seleo da parte de baixo. Para ajustar a largura e altura do elemento simultaneamente, arraste a ala de seleo do canto. Pressione a tecla Shift e arraste a ala de seleo do canto para preservar as propores (entre largura e altura) do elemento enquanto ajusta as suas dimenses.
Os elementos podem ser redimensionados visualmente at um mnimo de 6 x 6 pixels. Para ajustar a largura e a altura de um elemento a um tamanho menor (por exemplo: 1 x 1 pixel), utilize o inspetor de propriedades, a m de digitar um valor numrico. Para retornar o elemento s suas dimenses originais, clique nos identicadores L e U, no inspetor de propriedades.
204
Captulo 7
Como utilizar um editor de imagens externo

Uma imagem selecionada pode ser aberta em um editor de imagens externo, diretamente no Dreamweaver. Quando voc retornar ao Dreamweaver aps salvar o arquivo de imagem, as alteraes feitas na imagem aparecero na janela do documento. O Macromedia Fireworks pode ser utilizado como um editor de imagens externo. O Fireworks 3 utiliza as Design Notes para determinar onde est o arquivo PNG original no seu disco rgido local, ou solicitar que o encontre. O Fireworks 2 no utiliza as Design Notes, mas solicitar que localize o arquivo original PNG. O Fireworks 1 procura automaticamente a pasta que contm o arquivo selecionado para um arquivo PNG com o mesmo nome. Por exemplo: se for selecionada uma imagem cuja origem seja images/myPhoto.gif e images/ tambm contenha um arquivo chamado myPhoto.png, o Fireworks abrir o arquivo PNG. Como formato de arquivo original do Fireworks, os arquivos PNG retm todas as informaes sobre camadas, vetores, cores e efeitos originais e, sempre, todos os elementos so editveis. Os arquivos devem ter a mesma extenso .png, para que possam ser reconhecidos como PNG pelo Dreamweaver. Caso seja escolhido qualquer outro aplicativo como editor de imagens externo e iniciado a partir do Dreamweaver, o aplicativo abrir a imagem selecionada (images/myPhoto.gif, por exemplo). Se voc preferir, abra manualmente o arquivo original a partir do qual o GIF foi gerado (por exemplo: myPhoto.psd deve ser o arquivo original do Photoshop), faa as alteraes e regenere a imagem GIF. O Dreamweaver ainda atualizar a imagem quando esta for aberta na janela do documento no retorno ao programa.
Para iniciar o editor de imagens externo, siga um dos procedimentos abaixo:
Mantenha pressionada a tecla Control (no Windows) ou Command (no Macintosh) e clique duas vezes na imagem a ser editada. Clique com o boto direito do mouse (no Windows) ou pressione a tecla Control (no Macintosh), e clique na imagem a ser editada e, em seguida, escolha Editar, no menu contextual. Clique com o boto direito do mouse (no Windows) ou pressione a tecla Control (no Macintosh), e clique na imagem a ser editada e, em seguida, escolha um editor externo, no menu contextual. Selecione a imagem que ser editada e clique em Editar a imagem, no inspetor de propriedades. Clique duas vezes no arquivo de imagem, na janela do site, para iniciar o editor de imagens primrio. Se no for especicado um editor de imagens, o Dreamweaver iniciar o editor padro para o tipo de arquivo.
205
Nota: Quando uma imagem for aberta na janela do site, os recursos de integrao do Fireworks descritos acima no estaro em vigor e o Fireworks no abrir o arquivo PNG original. Para poder utilizar os recursos de integrao do Fireworks, abra as imagens a partir da janela do documento.
Como definir as preferncias do editor de imagens externo As preferncias podem ser denidas para que o Dreamweaver inicie automaticamente aplicativos diferentes para editar tipos de imagens distintos. Por exemplo: o Dreamweaver pode ser instrudo a iniciar o Fireworks ao editar um GIF.
Para definir um editor de imagens externo para um tipo especfico de arquivo: 1 2 3
Escolha Editar > Preferncias e selecione Editores externos. Clique no boto com sinal de adio (+) acima da lista de extenses. Digite a extenso do nome de arquivo do tipo de imagem a ser editada (por exemplo: .gif ) ou selecione uma opo da lista de extenses. Clique no boto com 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. 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.
4 5
Para alterar uma preferncia existente: 1
Nas preferncias de editores externos, clique na extenso de arquivo cujo editor ser alterado. Utilize os botes com 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 de mdia, na pgina 284.
206
Captulo 7
Como otimizar uma imagem no Fireworks Com o Fireworks 2 ou Fireworks 3, pode ser utilizado o comando Otimizar a imagem no Fireworks, para otimizar rapidamente as imagens para a Web.
Para poder utilizar o comando Otimizar a imagem no Fireworks: 1
Selecione uma imagem no documento do Dreamweaver e escolha Comandos > Otimizar a imagem no Fireworks. Se a imagem selecionada for um arquivo GIF ou JPEG, aparecer uma caixa de dilogo perguntando se o documento do Fireworks existente dever ser utilizado como origem da imagem selecionada. Clique em Sim, para abrir o arquivo PNG original, se a imagem tiver sido criada no Fireworks. Clique em No, se a imagem no tiver sido criada no Fireworks e passe etapa 4. Na caixa de dilogo de seleo de arquivo que aparecer, navegue at a pasta que contm o arquivo PNG do Fireworks original, selecione o arquivo e clique em OK. Na caixa de dilogo que aparecer, ajuste a denio esquerda para alterar a qualidade e suavizao de uma imagem JPEG ou da paleta e o nmero de cores em um GIF, ou alternar de um formato de arquivo para outro. Para obter mais informaes sobre as outras opes nessa caixa de dilogo, consulte Usando o Fireworks.
Os resultados dos ajustes aparecero no painel de visualizao, direita; o tamanho do arquivo e o tempo de descarga estimado para a imagem sero listados no alto desse painel. Quando a aparncia e o tamanho do arquivo da imagem forem satisfatrios, clique em Atualizar. Se o formato da imagem for alterada, o vericador de vnculos do Dreamweaver solicitar a atualizao das referncias imagem. Por exemplo: se for alterado o formato de uma imagem chamada my_image, de GIF para JPEG, um clique em OK no aviso ir modicar todas as referncias a my_image.gif no site para my_image.jpg.
207
Como criar uma imagem cambivel

Uma imagem cambivel aquela que se altera quando o cursor for movido sobre ela. Uma imagem cambivel consiste, de fato, de duas imagens: a imagem primria (exibida quando a pgina for carregada pela primeira vez) e a imagem cambivel (que aparecer quando o cursor for movido sobre a imagem primria). Quando for criada uma imagem cambivel, ambas as imagens devero ter o mesmo tamanho; caso contrrio, o Dreamweaver redimensionar automaticamente a segunda imagem para coincidir com as propriedades da primeira. Para obter informaes sobre a alterao de uma imagem em resposta a um evento diferente (um clique do mouse, por exemplo) ou sobre a alterao de uma imagem distinta daquela sobre a qual est sendo movido o mouse, consulte Permutar a imagem, na pgina 331.
Para criar uma imagem cambivel: 1
Na janela do documento, posicione o ponto de insero no local onde dever aparecer a imagem cambivel. Insira a imagem cambivel, utilizando um dos seguintes mtodos: Escolha Janela > Objetos, para abrir a paleta de objetos, e clique no boto Imagem cambivel. Escolha Inserir > Imagem cambivel. Na caixa de dilogo que aparecer, digite as seguintes informaes: Procure e selecione uma imagem, ou digite o caminho e o nome de arquivo da imagem original no campo Imagem original. Procure e selecione uma imagem cambivel, ou digite o caminho e o nome de arquivo da imagem cambivel no campo Imagem cambivel. Para criar um vnculo, procure e selecione um arquivo, ou substitua o # no campo Vnculo por um caminho e um nome de arquivo. Para que o Dreamweaver carregue previamente as imagens no cache do navegador, selecione a opo Pr-carregar as imagens.
Clique em OK.
Para testar uma imagem cambivel: 1 2
Escolha Arquivo > Visualizar no navegador No navegador, passe o cursor sobre a imagem primria. A exibio alternar para a imagem cambivel.
Pode ser criada tambm uma barra de navegao, utilizando o comando Inserir > Barra de navegao. Consulte Como inserir uma barra de navegao, na pgina 125.
208
Captulo 7
Como trabalhar com os arquivos HTML do Fireworks

O Dreamweaver facilita a colagem ou importao do cdigo de origem de HTML, criado no Fireworks 3, para os documentos do Dreamweaver. Se voc for proprietrio e utilizar o Fireworks, poder copiar o HTML diretamente para a rea de transferncia no Fireworks e col-lo em um documento do Dreamweaver. Caso os arquivos HTML do Fireworks tenham sido enviados por outro designer, poder ser utilizado Inserir objeto HTML do Fireworks para importar o HTML.
Nota: O cdigo de origem de HTML criado no Fireworks 2 tambm pode ser importado para um documento do Dreamweaver. Contudo, se esse documento contiver o comportamento Imagem cambivel simples ou Alternar os grupos, o Dreamweaver no os reconhecer e reportar um erro.
Como colar o HTML do Fireworks Se o Fireworks e o Dreamweaver forem utilizados simultaneamente na criao de documentos, a maneira mais fcil de inserir HTML do Fireworks no documento do Dreamweaver copi-lo na rea de transferncia.
Para colar o HTML do Fireworks em um documento do Dreamweaver: 1 2 3
Salve o documento do Dreamweaver em um site denido. No Fireworks, escolha Arquivo > Exportar. Na parte inferior da caixa de dilogo Exportar, selecione Dreamweaver 3, no menu pop-up Estilo, e Copiar para a rea de transferncia, no menu pop-up Local. No alto da caixa de dilogo Exportar, navegue at uma localizao na pasta raiz local do site do Dreamweaver e clique em Salvar, para salvar o arquivo de imagem. No Dreamweaver, coloque o ponto de insero na janela do documento e escolha Editar > Colar. A imagem e seu HTML associado (e o JavaScript, se houver) sero adicionados ao documento do Dreamweaver nos locais apropriados. A imagem aparecer na janela do documento; para ver o cdigo de origem que foi adicionado, escolha Janela > Origem de HTML.
209
Como inserir o HTML do Fireworks Se a imagem e os arquivos HTML forem criados no Fireworks 2 ou 3, voc poder importar a imagem e o cdigo de origem de HTML a ela associado com o objeto Inserir HTML do Fireworks.
Para inserir o HTML do Fireworks em um documento do Dreamweaver: 1 2
Salve o documento do Dreamweaver em um site denido. Coloque o ponto de insero na janela do documento e siga um dos procedimentos abaixo: Clique no boto Inserir HTML do Fireworks, na paleta de objetos. Escolha Inserir > Mdia > HTML do Fireworks. Na caixa de dilogo que aparecer, clique em Procurar, para localizar e selecionar o HTML do Fireworks. Selecione a opo Excluir o arquivo aps a insero, para mover o arquivo HTML para a Lixeira (no Windows) ou Lixo (no Macintosh) quando a operao for concluda.
Nota: Se o arquivo HTML estiver em uma unidade de rede, ele ser excludo permanentemente, mas no movido para a Lixeira ou Lixo.
Clique em OK. A imagem e seu HTML associado (e o JavaScript, se houver) sero adicionados ao documento do Dreamweaver nos locais apropriados. A imagem aparecer na janela do documento; para ver o cdigo de origem que foi adicionado, escolha Janela > Origem de HTML.
210
Captulo 7
Como criar os mapas de imagens

Um mapa de imagens uma imagem dividida em regies ou pontos ativos, quando o usurio clicar no ponto ativo, ser exibida uma pgina da Web. Utilize o inspetor de imagens para criar e editar gracamente os mapas de imagens do cliente. Os mapas de imagens do cliente armazenam as informaes sobre hipervnculos no documento HTML, mas no em um arquivo de mapa separado, como no caso dos mapas de imagens do servidor. Quando o usurio clicar em um ponto ativo na imagem, a URL a ela associada ser enviada diretamente ao servidor. Isso tornar os mapas de imagens de clientes mais rpidos que os do servidor porque o servidor no precisar interpretar onde o usurio clicou. Os mapas de imagens de clientes contam com suporte do Netscape Navigator 2.0 e mais avanado, NCSA Mosaic 2.1 e 3.0, e de todas as verses do Microsoft Internet Explorer. O Dreamweaver no altera as referncias dos mapas de imagens do servidor nos documentos existentes. Em um mesmo documento, possvel utilizar mapas de imagens de cliente e de servidor. Os navegadores que oferecem suporte a ambos os tipos de mapas do prioridade aos do cliente. Para incluir um mapa de imagens do servidor em um documento, necessrio gravar o cdigo HTML adequado.
Para criar um mapa de imagens do cliente: 1 2
Selecione a imagem. Clique na seta de expanso, no canto inferior direito do inspetor de propriedades, para maximiz-lo. Digite o nome do mapa no campo Nome do mapa.
Nota: Caso sejam utilizados vrios mapas de imagens no mesmo documento, d um nome exclusivo a cada mapa.
Para denir as reas do mapa de imagens, siga um dos procedimentos abaixo: Selecione a ferramenta de crculo e arraste o ponteiro sobre a imagem para criar um ponto ativo circular. Selecione a ferramenta de retngulo e arraste o ponteiro sobre a imagem para criar um ponto ativo circular. Selecione a ferramenta de polgono e dena um ponto ativo com forma irregular, clicando uma vez em cada canto. Clique na ferramenta de seta para fechar o formato. Quando o ponto ativo for selecionado, o inspetor de pontos ativos ser mostrado abaixo do inspetor de propriedades. Para obter informaes sobre o inspetor de pontos ativos, consulte Como congurar as propriedades dos pontos ativos, na pgina 213.
211
No inspetor de pontos ativos, clique no cone correspondente pasta, para procurar o arquivo a ser aberto quando o usurio clicar no ponto ativo, ou digite o nome do arquivo no campo Vnculo. Para fazer com que o documento vinculado aparea em um lugar diferente da janela ou moldura, digite um nome de janela na caixa Destino, ou escolha um nome de moldura no menu pop-up. Consulte Como criar os vnculos, na pgina 113. Na caixa Alt., digite um texto diferente do que mostrado para o ponto ativo 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.
Repita as etapas 4 a 7 para denir outros pontos ativos no mapa de imagens.
Para selecionar vrios pontos ativos em um mapa de imagens:
Quando a imagem estiver selecionada, 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). Quando uma imagem for copiada de um documento para outro, os pontos ativos a ela associados tambm sero copiados. As teclas de seta ou o mouse pode(m) ser utilizado(s) para mover um ou vrios pontos ativos simultaneamente. O comando Modicar > Camadas e pontos ativos tambm pode ser utilizado para alinhar os pontos ativos, traz-los para a frente ou coloc-los para trs, ou fazer com que tenham a mesma largura e altura. Se dois pontos ativos carem sobrepostos, o primeiro ponto ativo o dominante.
212
Captulo 7
Como configurar as propriedades dos pontos ativos As propriedades listadas abaixo aparecem no inspetor de propriedades quando um ponto ativo for selecionado.
Mapa especica o nome do mapa de imagens. Crie um nome exclusivo para cada mapa de imagens de um documento. Vnculo
especica o arquivo ou URL a ser exibido quando o usurio clicar no ponto ativo. Se for utilizado um arquivo, digite um caminho relativo ao documento. (Os nomes de arquivos iniciados por le:// no so relativos).
Destino especica a moldura ou janela na qual a pgina vinculada dever ser carregada. A opo de destino no estar disponvel at que o ponto ativo selecionado contenha um vnculo.
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. Podem ser escolhidos tambm os seguintes nomes de destino reservados:
_blank
carrega o arquivo vinculado em uma janela do navegador nova e sem
nome.
_parent carrega o arquivo vinculado em um conjunto-pai de molduras ou na janela da moldura que contm o vnculo. Se a moldura onde est o vnculo no estiver aninhada, o arquivo vinculado ser carregado na janela inteira do navegador. _self carrega o arquivo vinculado na mesma moldura ou janela que o vnculo. Esse destino est implcito, portanto geralmente no necessrio especic-lo. _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 os navegadores que tiverem sido denidos para descarga manual de imagens.
213
Como aplicar comportamentos a imagens

possvel aplicar qualquer comportamento disponvel a uma imagem ou ponto ativo de imagem. Quando um comportamento for aplicado a um ponto ativo, o Dreamweaver inserir o cdigo de origem de HTML ao rtulo AREA. H trs comportamentos que podem ser aplicados especicamente a imagens: Pr-carregar as imagens, Permutar a imagem e Restaurar a imagem permutada.
Pr-carregar as imagens carrega as imagens que no aparecem na pgina imediatamente (como aquelas que sero permutadas com as linhas de tempo, comportamentos, camadas ou JavaScript) no cache do navegador. Este processo evita as demoras causadas pela descarga quando as imagens tiverem que ser exibidas. Consulte Pr-carregar as imagens, na pgina 323. Permutar a imagem troca uma imagem por outra, alterando o atributo SRC do rtulo IMG. 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 331. 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 332.
Restaurar a imagem permutada
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 124 e Como criar menus de salto, na pgina 122.
214
Captulo 7
CAPTULO 8
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como criar tabelas
As tabelas so uma ferramenta de desenho de Web muito avanada para organizar os dados e as imagens em uma pgina HTML. As tabelas proporcionam aos designers da Web os meios 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) 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 podem ser facilmente modicadas nas tabelas HTML. O contedo pode ser includo; adicione, exclua, divida ou mescle as linhas e colunas; modique as propriedades da tabela, das linhas ou clulas, para adicionar cor e alinhamento, e para copiar e colar clulas. Se as idias de layout forem mais complexas, pode-se recorrer insero de uma tabela em outra, a m de tornar o seu desenho mais exvel. Com o Dreamweaver, fcil converter um layout de tabela em um layout de camada. As tabelas e camadas permitem controlar a posio dos elementos na pgina, mas as camadas no contam com suporte nos navegadores 3.0 e menos avanados. Caso o seu procedimento de desenho necessite de reposicionamento rpido do contedo, utilize as camadas para organizar uma pgina e, em seguida, converta as camadas em uma tabela para exibio em navegadores mais antigos. Consulte Como utilizar as camadas para criar tabelas, na pgina 250.
215
Como inserir uma tabela

Utilize a paleta de objetos ou o menu Inserir, para criar uma nova tabela.
Para inserir uma tabela: 1
Siga um dos procedimentos abaixo: Na janela do documento, coloque o ponto de insero onde a tabela dever aparecer e clique no boto Tabela, no painel Comuns da paleta de objetos, ou escolha Inserir > Tabela. Arraste o boto Tabela, da paleta de objetos at o local escolhido na pgina. Aparecer a caixa de dilogo Inserir tabela. Nessa caixa de dilogo, aceite os valores ou digite novos valores.
Nota: A caixa de dilogo Inserir tabela retm os valores das denies mais recentes digitadas para uma tabela.
No campo Linhas, especique o nmero de linhas da tabela. No campo Colunas, especique o nmero de colunas da tabela. No campo Preenchimento da clula, especique o nmero de pixels entre o contedo da clula e os seus limites (ou parede). No campo Espaamento entre as clulas, especique o nmero de pixels entre cada clula da tabela. No campo Largura, especique a largura da tabela, em pixels, ou como um percentual da janela do navegador. No campo Borda, especique a largura, em pixels, da borda da tabela. Digite 0, para que no haja borda.
3
Clique em OK, para criar a tabela.
Se desejar inserir uma tabela sem ter que especicar inicialmente essas opes, desative a opo Mostrar a caixa de dilogo quando inserir objetos, nas preferncias gerais. Consulte Como denir as preferncias, na pgina 71.
216
Captulo 8
Como adicionar o contedo a uma clula da tabela Podem ser adicionados texto e imagens s clulas da tabela. Podem ser denidas tambm as propriedades de uma imagem inserida em uma tabela.
Para adicionar texto a uma tabela: 1
Clique em uma clula na qual o texto ser includo e siga um dos procedimentos abaixo: Digite o texto na tabela. As clulas da tabela se expandiro automaticamente medida que o texto for digitado. Cole o texto copiado de outro documento. Utilize o comando Colar como texto, para manter os marcadores de pargrafos. Consulte Como adicionar texto e inserir objetos, na pgina 86.
Pressione a tecla Tab, para deslocar-se para a prxima clula, ou as teclas Shift+Tab, para voltar clula anterior. Quando a tecla Tab 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.
Para adicionar uma imagem a uma tabela: 1 2
Clique na clula na qual ser inserida a imagem. Clique no boto Inserir imagem, no painel Comuns da paleta de 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 201.
Como criar tabelas
217
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: 1
Siga um dos procedimentos abaixo: Escolha Arquivo > Importar > Importar os dados da tabela. Escolha Inserir > Dados tabulares. Aparecer a caixa de dilogo Importar os dados da tabela ou Inserir dados tabulares, dependendo da sua seleo. Fora os ttulos, essas caixas de dilogo so idnticas.
2 3
Digite o nome do arquivo a ser importado, no campo Arquivo de dados. No menu pop-up Delimitador, selecione o formato do delimitador que corresponda 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 especique) 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 a Largura da tabela, selecione uma das seguintes opes: Selecione Ajustar aos dados, para criar uma tabela que se ajuste seqncia de caracteres mais longa em cada coluna. Selecione Denir, para especicar a largura da tabela como uma percentagem da janela do navegador ou como um nmero de pixels.
218
Captulo 8
Selecione as opes de formatao da tabela: No campo Preenchimento da clula, especique o nmero de pixels entre o contedo da clula e os seus limites (ou parede). No campo Espaamento entre as clulas, especique o nmero de pixels entre cada clula da tabela. No campo Formatar a linha do alto, selecione uma das quatro opes de formatao: sem formatao, negrito, itlico, ou negrito itlico. No campo Borda, especique a largura, em pixels, da borda da tabela. Digite 0, para que no haja borda.
Clique em OK.
Como selecionar os elementos da tabela

Basta um gesto para selecionar uma tabela inteira, uma linha ou coluna, ou uma faixa de clulas contguas na tabela. Depois da seleo da tabela ou de clulas individuais, possvel: Modicar a aparncia das clulas selecionadas ou do texto nelas contido. Consulte Como formatar as tabelas, na pgina 221. Copie e cole as clulas adjacentes. Consulte Como copiar e colar clulas, na pgina 226. Podem ser escolhidas clulas descontguas em uma tabela para alterar as suas propriedades. As selees de clulas descontguas no podem ser copiadas ou coladas.
Para selecionar a tabela inteira, siga um dos procedimentos abaixo:
Clique no campo superior esquerdo da tabela ou em qualquer lugar da extremidade direita ou inferior. Clique uma vez na tabela e escolha Modicar > Tabela > Selecionar a tabela. Clique uma vez na tabela e escolha Editar > Selecionar tudo. Posicione o ponto de insero em qualquer lugar dentro da tabela e selecione o rtulo <table>, na parte inferior esquerda da janela do documento. Aparecero alas de seleo em volta da tabela, quando esta for selecionada.
Como criar tabelas
219
Para selecionar as colunas e linhas, siga um dos procedimentos abaixo:
Posicione o ponto de insero na margem esquerda de uma linha ou no alto de uma coluna. Clique quando a seta de seleo aparecer.
Clique em uma clula e arraste horizontal ou verticalmente, para selecionar diversas linhas ou colunas.
Para selecionar uma ou mais clulas, siga um dos procedimentos abaixo:
Clique em uma clula e arraste-a vertical ou horizontalmente, at uma outra clula. Clique em uma clula e, em seguida, pressione a tecla Shift e clique em outra clula. Todas as clulas que estiverem dentro da regio retangular sero selecionadas.
Para selecionar clulas descontguas, siga um dos procedimentos abaixo:
Pressione a tecla Control (no Windows) ou Command (no Macintosh) e clique na tabela para adicionar clulas, linhas ou colunas seleo. Selecione diversas clulas na tabela e, em seguida, pressione a tecla Control (no Windows) ou Command (no Macintosh) e clique nas clulas, linhas ou colunas, para cancelar a seleo das clulas individuais.
220
Captulo 8
Como formatar as tabelas

A aparncia das tabelas pode ser alterada pela denio de propriedades da tabela e clulas, ou pela aplicao de um desenho predenido tabela. Consulte Como denir as propriedades da tabela, na pgina 222, Como denir as propriedades das colunas, linhas e clulas, na pgina 224 e Como formatar uma tabela com um desenho predenido, na pgina 225. Para formatar o texto nas tabelas, aplique a formatao ao texto selecionado ou utilize os estilos. Consulte Como formatar o texto, na pgina 177. Sobre os rtulos 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 do 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 de origem de 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 rtulo TD, prevalece sobre a formatao das linhas da tabela (rtulo TR) que, por sua vez, prevalece sobre a formatao da tabela (rtulo TABLE). No entanto, se for especicado azul para a cor do 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 rtulo TD prevalece sobre o rtulo TABLE. No exemplo seguinte, o rtulo TABLE dene uma cor de fundo amarela (#FFFF99) para a tabela inteira. O primeiro rtulo TR altera estas clulas para verde (#33FF66) e o segundo rtulo TD modica a clula central do alto para azul (#333399). Os rtulos TR e TD na linha inferior no foram alterados, por isso estas clulas adquirem a cor da tabela: 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>
Como criar tabelas
221
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 formatar uma tabela com um desenho predenido, na pgina 225.
Para especificar as propriedades da tabela: 1 2
Selecione a tabela. Escolha Janela > Propriedades, para abrir o inspetor de propriedades. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades.
Para denominar a tabela:
No campo Nome da tabela, digite um nome para a tabela.

Para selecionar as opes de layout da tabela:
Nos campos Linhas e Colunas, especique o nmero de linhas e colunas na tabela. Nos campos L e U, especique a largura e a altura da tabela, em pixels, ou como um percentual da janela do navegador. Em geral, no necessrio denir a altura de uma tabela. Utilize o campo Alinhar, para especicar como a tabela se alinhar aos outros elementos no mesmo pargrafo, como texto ou imagens. esquerda alinha a tabela esquerda dos outros elementos, direita alinha a tabela direita dos outros elementos e No centro centraliza a tabela. possvel alinhar esquerda, alinhar direita ou centralizar a tabela em relao aos outros elementos. Pode-se tambm escolher o alinhamento padro do navegador. Nos campos Espao V e Espao H, especique o nmero de pixels de espao em branco acima, abaixo e em ambos os lados da tabela. 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.
222
Captulo 8
Utilize o boto Converter as larguras da tabela em pixels, para converter a largura da tabela, de uma percentagem da janela do navegador em sua largura atual, em pixels. Utilize o boto Converter as larguras da tabela em percentagens, para converter a largura da tabela, de pixels em uma percentagem da janela do navegador.
Para definir o layout da clula, escolha uma das seguintes opes:
No campo Preenchimento da clula, especique o nmero de pixels entre o contedo da clula e os seus limites (ou parede). No campo Espao entre clulas, especique o nmero de pixels entre cada clula da tabela. Quando no forem atribudos valores especcos de espaamento e preenchimento da clula, o Netscape Navigator, Microsoft Internet Explorer e Dreamweaver exibiro a tabela como se o espaamento da clula fosse denido para 2 e o preenchimento da clula para 1.
Para definir as bordas da tabela, escolha uma das seguintes opes:
No campo Borda, especique a largura, em pixels, da borda da tabela. A maioria dos navegadores exibe a borda como uma linha tridimensional. Caso a tabela esteja sendo utilizada para layout de pgina, especique um valor 0 para a borda. Para exibir os limites da tabela e das clulas quando a borda for denida como 0, escolha Exibir > Bordas da Tabela. Utilize os campos Borda clara e Borda escura para denir as cores das bordas que tenham um efeito de realce e de sombreado, respectivamente, o que conferir uma aparncia tridimensional borda. Para retornar ao sombreado em tons de cinza padro, remova os valores das cores e mantenha os campos em branco. Utilize o campo Borda, para selecionar uma cor de borda para a tabela inteira. Utilize as opes de Fundo, para denir a imagem ou a cor do fundo para a tabela.
Como criar tabelas
223
Como definir as propriedades das colunas, linhas e clulas Selecione qualquer combinao de clulas e, em seguida, utilize o inspetor de propriedades para alterar a aparncia de clulas, linhas e colunas individuais. Para selecionar as clulas, linhas e colunas, consulte Como selecionar os elementos da tabela, na pgina 219. Para aplicar a formatao a uma tabela inteira, consulte Como denir as propriedades da tabela, na pgina 222.
Para formatar uma linha, coluna ou clula: 1 2
Selecione qualquer combinao de clulas na tabela. Escolha Janela > Propriedades, para abrir o inspetor de propriedades, e clique na seta de expanso, no canto inferior direito, para examinar todas as propriedades.
Escolha dentre as seguintes opes de aparncia: Utilize o menu pop-up Horiz, para denir o alinhamento horizontal do contedo de uma clula, coluna ou linha. O contedo pode ser alinhado esquerda, direita, no centro ou com o padro do navegador (normalmente, esquerda, para as clulas normais, e centralizado, para as clulas de cabealho). Utilize o menu pop-up Vert, para denir o alinhamento vertical do contedo de uma clula, coluna ou linha. O contedo pode ser alinhado no alto, no meio, embaixo, na linha de base ou com o padro do navegador (normalmente, no meio). Os campos L e U especicam a largura e altura das clulas selecionadas, em pixels. Para utilizar percentagens, coloque um sinal de percentual (%) aps o valor. Para denir uma imagem de fundo para uma clula, coluna ou linha, utilize o campo Fundo, no alto. 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 do fundo de uma clula, coluna ou linha, utilize o campo Fundo, embaixo. possvel utilizar o seletor de cores ou digitar o cdigo hexadecimal correspondente cor escolhida. Para denir uma cor de borda para as clulas, utilize a opo Borda.
224
Captulo 8
Escolha dentre as seguintes opes de layout: Clique no boto Mesclar as clulas, para combinar as clulas, linhas ou colunas selecionadas e criar uma clula. Consulte Como dividir e mesclar as clulas, na pgina 231. Clique no boto Dividir a clula, para dividir a clula em duas. Consulte Como dividir e mesclar as clulas, na pgina 231. 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 ampliam verticalmente. Selecione Cabealho, para formatar as clulas ou linhas selecionadas como um cabealho de tabela. Como padro, o contedo das clulas do cabealho da tabela est em negrito e no centro.
Como formatar uma tabela com um desenho predefinido 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 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 (rtulos TD) em vez das linhas (rtulos TR), selecione a opo Aplicar todos os atributos aos rtulos TD e no aos TR. A formatao aplicada s clulas da tabela prevalecer sobre aquela aplicada s linhas. Contudo, a formatao aplicada s linhas da tabela resultar em um cdigo de origem de HTML mais limpo e conciso. Consulte Como formatar as tabelas, na pgina 221.
Clique em Aplicar ou OK, para formatar a tabela com o desenho selecionado.
Como criar tabelas
225
Como copiar e colar clulas

possvel copiar ou colar diversas clulas da tabela, sem que percam a formatao, ou copiar apenas o contedo da clula. As clulas podem ser coladas em um ponto de insero ou em um local selecionado de uma tabela existente. Para colar diversas clulas da tabela, o contedo da rea de trabalho dever ser compatvel com a estrutura da tabela ou da seleo na qual as clulas sero coladas.
Para recortar ou copiar clulas de uma tabela: 1
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 219.
Seleo correta: As clulas podem ser recortadas ou copiadas.
Seleo incorreta: Estas clulas no podem ser recortadas ou copiadas.

2
Recorte ou copie as clulas, utilizando os comandos no menu Editar. Se for selecionada a linha ou coluna inteira, esta ser removida da tabela quando for escolhida a opo Editar > Recortar.
226
Captulo 8
Para colar as clulas da tabela: 1
Escolha onde as clulas sero coladas. Para colar as clulas antes ou acima de uma determinada clula, clique nesta clula. 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).
Escolha Editar > Colar. Se forem coladas linhas ou colunas inteiras em uma tabela existente, estas sero adicionadas tabela. Quando for colada uma clula individual, o contedo da clula selecionada ser substitudo, contanto que o contedo da rea de transferncia seja compatvel com o da clula selecionada. Se a colagem tiver que ser feita fora de uma tabela, as linhas, colunas ou clulas sero utilizadas para denir uma nova tabela.
Para remover o contedo e manter a clula intacta: 1 2
Selecione uma ou mais clulas. Escolha Editar > Limpar, ou pressione a tecla Delete.
Nota: Se todas as clulas em uma linha ou coluna forem selecionadas, a linha ou coluna, no apenas o seu contedo, ser removida da tabela. Para copiar e colar o contedo das clulas: 1
Selecione o texto e escolha Editar > Copiar apenas o texto. Apenas o texto das clulas selecionadas ser copiado na rea de transferncia. Clique em uma nica clula ou em algum lugar na janela do documento, e escolha Editar > Colar como texto. No possvel colar a seleo em vrias clulas escolhidas.
Como criar tabelas
227
Como redimensionar as tabelas e clulas

possvel redimensionar a tabela inteira, ou determinadas linhas e colunas. Quando a tabela inteira for redimensionada, todas as clulas sero alteradas proporcionalmente.
Para redimensionar a tabela: 1 2
Selecione a tabela. Arraste uma das alas de seleo, para redimensionar a tabela em relao a esta dimenso. Quando as alas dos cantos forem arrastadas, ambas as dimenses sero redimensionadas.
Para alterar o tamanho de uma linha ou coluna, siga um dos procedimentos abaixo:
Para alterar a altura da linha, arraste a borda inferior da mesma. Para alterar a largura de uma coluna, arraste a borda direita da mesma. Como alterar a largura das colunas O inspetor de propriedades permite especicar a largura de uma coluna de trs maneiras.
Para definir a largura da coluna: 1 2 3
Clique em qualquer uma das clulas da coluna ou selecione a mesma. Escolha Janela > Propriedades, para abrir o inspetor de propriedades. No campo L, siga um dos procedimentos abaixo: Digite um nmero para denir a largura da coluna com o nmero de pixels especicado. Digite um nmero seguido de um sinal de percentual (%) para denir a largura da coluna como sendo uma percentagem da largura da tabela. Deixe o campo em branco (o padro), para que o navegador e o Dreamweaver possam determinar a largura adequada de acordo com o contedo da clula e as larguras das outras colunas. Normalmente, o espao alocado com base na linha mais longa ou na imagem mais larga. Esta a razo pela qual uma coluna s vezes torna-se mais larga do que as outras na tabela, quando nela for adicionado o contedo.
228
Captulo 8
Como limpar as larguras das colunas e as alturas das linhas 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. Escolha Janela > HTML, e altere as larguras e alturas diretamente no inspetor de origem de HTML. No inspetor de propriedades, digite valores especcos para a largura e altura, nas caixas L e U.
Como adicionar e remover as linhas e colunas

Utilize os comandos no submenu Modicar > Tabela, ou os do menu contextual, para adicionar e remover linhas e colunas de uma tabela.
Para adicionar linhas ou colunas: 1 2
Clique em uma clula na qual dever aparecer a nova linha ou coluna. Siga um dos procedimentos abaixo: Para adicionar uma linha, escolha Modicar > Tabela > Inserir linha, ou escolha Tabela > Inserir linha, no menu contextual. 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.
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.
Como criar tabelas
229
Para excluir uma linha ou coluna: 1 2
Clique em uma clula da linha ou coluna que ser excluda. Escolha uma das seguintes opes: Para excluir uma linha, escolha Modicar > Tabela > Excluir a linha, ou escolha Tabela > Excluir a linha, no menu contextual. Para excluir uma coluna, escolha Modicar > Tabela > Excluir a coluna, ou escolha Tabela > Excluir a coluna, no menu contextual.
Para adicionar ou excluir linhas ou colunas a partir da base ou da direita de uma tabela: 1
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 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.
230
Captulo 8
Para aninhar uma tabela na clula de uma tabela: 1
Siga um dos procedimentos abaixo: Clique na clula onde dever ser inserida a segunda tabela e escolha Inserir > Tabela. Clique na clula onde dever ser inserida a segunda tabela. Em seguida, clique no boto Tabela, no painel Comuns, na paleta de objetos. Arraste o boto Tabela, do painel Comuns, na paleta de objetos, at a clula onde dever aparecer a segunda tabela.
Especique as propriedades da tabela na caixa de dilogo Inserir tabela, e clique em OK.
Como dividir e mesclar as clulas Utilize o inspetor de propriedades ou os comandos do menu Modicar > Tabela, para dividir ou mesclar as clulas. possvel mesclar qualquer nmero de clulas adjacentes contanto que a seleo inteira tenha a forma retangular para produzir uma nica clula que abranja diversas colunas ou linhas. Uma clula pode ser dividida em qualquer nmero de linhas ou colunas, no importando se tiver sido mesclada anteriormente. O Dreamweaver reestrutura automaticamente a tabela (adiciona 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.
Como criar tabelas
231
Para mesclar duas ou mais clulas em uma tabela: 1
Selecione as clulas a serem mescladas. As clulas selecionadas devem ser adjacentes e retangulares.
Esta seleo tem a forma retangular, por isso as clulas podem ser mescladas.
Esta seleo da tabela no tem a forma retangular, por isso as clulas no podem ser mescladas.
2
Escolha Modicar > Tabela > Mesclar as clulas, ou clique no boto Mesclar as clulas, no inspetor de propriedades. O contedo das clulas individuais ser colocado na clula mesclada resultante. As propriedades da primeira clula selecionada sero aplicadas clula mesclada.
Para dividir uma clula mesclada: 1 2
Clique na clula ou selecione-a. Escolha Modicar > Tabela > Dividir as clulas, ou clique no boto Dividir as clulas, 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.
232
Captulo 8
Como ordenar as tabelas

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

Os dados de uma tabela criada no Dreamweaver podem ser exportados, se forem salvos em um formato de arquivo que aceite dados delimitados. Os separadores do delimitador que podem ser utilizados so vrgula, dois pontos, ponto-e-vrgula ou espao. No possvel selecionar partes de uma tabela para exportar; ela sempre exportada inteira. Se apenas alguns dados da tabela forem necessrios, por exemplo: as primeiras seis linhas ou colunas, crie uma nova tabela, copie as informaes para a nova tabela e exporte-a.
Para exportar uma tabela: 1 2
Coloque o ponto de insero em qualquer clula da tabela a ser exportada. Escolha Arquivo > Exportar > Exportar a tabela. Aparecer a caixa de dilogo Exportar a tabela.
No menu pop-up Delimitador, selecione um valor de delimitador para os dados da tabela. No menu Quebras de linha, selecione as quebras de linha do sistema operacional para o qual o arquivo estiver sendo exportado Windows, Macintosh ou MS-DOS. Clique em Exportar. Na caixa de dilogo que aparecer, digite um nome para o arquivo e clique em Salvar.
5 6
234
Captulo 8
CAPTULO 9
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como utilizar as camadas
Uma camada um recipiente para um contedo HTML, normalmente delineado pelo rtulo DIV ou SPAN, que pode ser posicionado em qualquer local da pgina. As camadas podem conter objetos de texto, imagens, formulrios, plug-ins e at mesmo outras camadas qualquer elemento que puder ser colocado no corpo de um documento HTML tambm poder ser colocado em uma camada. As camadas proporcionam aos designers de pginas da Web um controle preciso, a nvel de pixels, sobre o posicionamento exato dos elementos. A colocao dos elementos da pgina em camadas permite determinar quais objetos aparecem na frente de outros, e quais esto fora de lugar ou ocultos. Pode ser utilizada tambm uma linha de tempo para mover uma ou diversas camadas simultaneamente sobre uma tela. No Dreamweaver, podem ser utilizados dois formatos de camadas para posicionar o contedo em uma pgina: Camadas CSS e da Netscape. As camadas CSS (tambm conhecidas como elementos P CSS) posicionam o contedo em uma pgina utilizando os rtulos DIV e SPAN. As propriedades das camadas CSS so denidas pela norma Como posicionar elementos HTML com folhas de estilo em cascata (CSS), do World Wide Web Consortium. As camadas da Netscape posicionam o contedo em uma pgina utilizando os rtulos LAYER e ILAYER da Netscape. As propriedades das camadas da Netscape so denidas pelo formato de camadas patenteado pela Netscape. Tanto o Microsoft Internet Explorer 4.0 como o Netscape Navigator 4.0 oferecem suporte s camadas criadas com os rtulos DIV e SPAN. Apenas o Navigator oferece suporte s camadas criadas com os rtulos LAYER e ILAYER. As verses mais antigas dos dois navegadores exibiro o contedo de uma camada, porm no o posicionaro.
235
As propriedades de posicionamento de camadas incluem esquerda e No alto (coordenadas (x e y, respectivamente), ndice z (tambm denominado ordem de empilhamento) e Visibilidade. Os elementos posicionados podem ser denidos no Dreamweaver com os rtulos DIV, SPAN, LAYER e ILAYER. Consulte Como denir as preferncias de camadas, na pgina 239.
Como criar as camadas

Crie as camadas utilizando as tcnicas de insero, arrastar e soltar, ou de desenho. Uma vez criada a camada, utilize a paleta de camadas para selecionar, aninh-la dentro de outra camada ou alterar a sua ordem de empilhamento. Consulte Sobre a paleta de camadas, na pgina 237. As propriedades padro das camadas (rtulo, visibilidade, altura, largura, etc.) so especicadas nas preferncias de camadas. Para alterar as denies padro, escolha Editar > Preferncias, e selecione Camadas. Consulte Como denir as preferncias de camadas, na pgina 239. Como padro, o Dreamweaver cria camadas com o rtulo DIV e insere o cdigo da camada na posio do ponto de insero ou, durante o desenho das camadas, no alto da pgina, logo aps o rtulo BODY. Se for criada uma camada aninhada, o Dreamweaver inserir o cdigo dentro do rtulo que dene a camada-me. Ao criar camadas, para impedir que se sobreponham, ative a opo Evitar sobreposies, na paleta de camadas, ou escolha Exibir > Evitar sobreposies de camadas. Consulte Como evitar as sobreposies de camadas, na pgina 251.
Para criar uma camada, siga um dos procedimentos abaixo:
Para inserir uma camada, posicione o ponto de insero na janela do documento, onde deseja posicionar a camada e, em seguida, escolha Inserir > Camada. Para arrastar e soltar uma camada, arraste o boto Camada, da paleta de objetos at a janela do documento. Para desenhar uma camada, clique no boto Camada, na paleta de objetos; na janela do documento, arraste o cursor para desenhar a camada. Para desenhar vrias camadas, clique no boto Camada, na paleta de objetos, mantenha pressionada a tecla Shift e desenhe uma camada na janela do documento. Voc pode continuar a desenhar novas camadas, contanto que no solte a tecla Shift. Na janela do documento, aparecer um marcador para cada camada criada no canto superior esquerdo da pgina. Os marcadores de camadas aparecero em outras posies na pgina, se forem adicionadas camadas aps a insero de retornos de pargrafo na janela do documento.
236
Captulo 9
Se os marcadores de camadas no estiverem visveis, escolha Exibir > Elementos invisveis. Consulte Como denir as preferncias de elementos invisveis, na pgina 90. Quando os elementos invisveis estiverem sendo exibidos, os outros elementos da pgina podero parecer deslocados. Os elementos invisveis so mostrados apenas na janela do documento; quando a pgina for exibida em um navegador, os outros elementos aparecero em suas posies corretas. Sobre a paleta de camadas A paleta de camadas um mapa visual das camadas do documento. Escolha Janela > Camadas, ou pressione F11, para abrir a paleta de camadas. As camadas so exibidas como uma lista empilhada de nomes; a primeira camada criada est na parte de baixo 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 a paleta de camadas para evitar sobreposies, alterar a visibilidade das camadas, aninhar ou empilhar camadas e selecionar uma ou mais camadas. Para aninhar uma camada dentro de outra, consulte Como aninhar as camadas, na pgina 237. Para selecionar uma ou mais camadas, consulte Como manipular as camadas, na pgina 243. Para alterar a ordem de empilhamento de uma camada, consulte Como alterar a ordem de empilhamento de camadas, na pgina 248. Para alterar a visibilidade de uma camada, consulte Como alterar a visibilidade de uma camada, na pgina 249. Para evitar sobreposies de camadas, consulte Como evitar as sobreposies de camadas, na pgina 251. Como aninhar as camadas Uma camada aninhada se situa dentro de uma outra camada. Utilize a paleta de camadas ou as tcnicas de insero, arrastar e soltar, ou de desenho para criar camadas aninhadas. possvel utilizar o aninhamento para agrupar as camadas. Uma camada aninhada se move com a sua camada-me e herda a mesma visibilidade. As camadas da Netscape, criadas com os rtulos LAYER e ILAYER, se expandem para acomodar a altura e largura das camadas-lhas.
237
O cdigo HTML a seguir um exemplo de uma camada aninhada:

<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>
Ao desenhar camadas, utilize as preferncias de camadas, para que uma camada criada dentro de outra seja aninhada. Escolha Editar > Preferncias, selecione Camadas, e clique na caixa de seleo Aninhamento. Consulte Como denir as preferncias de camadas, na pgina 239.
Para criar uma camada aninhada, siga um dos procedimentos abaixo:
Para inserir uma camada aninhada, posicione o ponto de insero dentro de uma camada existente e escolha Inserir > Camada. Para arrastar e soltar uma camada aninhada, arraste o boto Camada da paleta de objetos e, em seguida, solte-o dentro de uma camada existente. Para desenhar uma camada aninhada, clique no boto Camada, na paleta de objetos; em seguida, dentro de uma camada existente, arraste o cursor para desenhar a camada aninhada. Se o Aninhamento estiver desativado nas preferncias de camadas, pressione a tecla Control (no Windows) ou Command (no Macintosh), para desenhar uma camada dentro de outra j existente.
Para criar uma camada aninhada utilizando a paleta de camadas: 1 2
Escolha Janela > Camadas, ou pressione F11, para abrir a paleta de camadas. Pressione a tecla Control (no Windows) ou Command (no Macintosh), selecione uma camada na paleta de camadas e arraste-a at a camada de destino. Solte o boto do mouse quando aparecer uma caixa ao redor do nome da camada de destino.
238
Captulo 9
Como definir as preferncias de camadas Utilize as preferncias de camadas para ajustar as denies padro das novas camadas criadas. Escolha Editar > Preferncias e, em seguida, clique em Camadas, para alterar as preferncias de camadas.
Rtulo determina o rtulo padro utilizado na denio da camada. SPAN e DIV criam camadas CSS, enquanto que LAYER e ILAYER criam camadas da Netscape. Visibilidade Largura
determina se as camadas sero visveis como padro.
e Altura denem a largura e altura padro das camadas criadas pelo comando Inserir > Camada.
Cor do fundo
especica a cor do fundo padro. especica uma imagem de fundo padro.
Imagem do fundo Aninhamento
torna aninhada uma camada desenhada dentro dos limites de outra j existente. Pressione a tecla Control (no Windows) ou Command (no Macintosh), para alterar essa denio temporariamente enquanto desenha a camada.
Compatibilidade com o Netscape 4 insere JavaScript no rtulo HEAD de um documento e determina como ser o redimensionamento das camadas CSS da Netscape em um navegador. O JavaScript tambm pode ser adicionado ou removido, escolhendo Comandos > Adicionar/remover ajuste de redimensionamento da Netscape.
Como definir as propriedades das camadas Utilize o inspetor de propriedades para especicar o nome e posio de uma camada, assim como denir outras opes de camadas. Para exibir todas as seguintes propriedades, clique na seta de expanso, localizada no canto inferior direito do inspetor de propriedades.
Id. da camada permite especicar um nome que identicar a camada na paleta de
camadas e como referncia de roteiros. 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.
E e A especicam
a posio da camada em relao ao canto superior esquerdo da pgina ou camada-me.

L e U especicam a largura e altura da camada. Esses valores sero ignorados se o contedo da camada exceder o tamanho especicado.
239
Nas camadas CSS, os valores padro de posicionamento e tamanho so 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 CSS reagiro quando o contedo exceder o tamanho da camada.
ndice Z determina o ndice z (a 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 a paleta de camadas do que digitando valores especcos ao ndice z. Consulte Como alterar a ordem de empilhamento de camadas, na pgina 248. As camadas da Netscape (que contm os rtulos 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
o modo inicial de exibio da camada. Utilize uma linguagem de criao de roteiros, como JavaScript, para controlar a propriedade de visibilidade e exibir dinamicamente o contedo das camadas. Escolha uma dentre as seguintes opes: Default (Padro) no especica uma propriedade de visibilidade, porm a maior parte dos navegadores interpreta essa opo como Inherit (Herdar). Inherit (Herdar) utiliza a propriedade de visibilidade da camada-me. Visible (Visvel) exibe o contedo da camada, independentemente do valor da camada-me. Hidden (Oculta) oculta o contedo da camada, independentemente do valor da camada-me. Observe que as camadas ocultas criadas com os rtulos LAYER e ILAYER ocuparo o mesmo espao, como se estivessem visveis. especica uma imagem de fundo para a camada. Clique no cone correspondente pasta, para procurar e selecionar um arquivo de imagem, ou digite o caminho da imagem no campo de texto.
Imagem de fundo
especica uma cor de fundo para a camada. Deixe esta opo em branco para especicar um fundo transparente.
Cor de fundo Rtulo determina se a camada CSS ou da Netscape. SPAN e DIV criam camadas CSS, enquanto que LAYER e ILAYER criam camadas da Netscape.
240
Captulo 9
Estouro (apenas nas camadas CSS) determina o que ocorrer se o contedo exceder o tamanho da camada. Escolha uma dentre as seguintes opes:
Visible (Visvel) aumenta o tamanho da camada para que todo o contedo da camada possa estar em exibio. A camada se expandir para baixo e para a direita. Hidden (Oculta) mantm o tamanho da camada e corta qualquer contedo que no caiba na camada. No so fornecidas barras de rolagem. Paginao adiciona barras de rolagem camada, independentemente do contedo ser maior ou no que o tamanho da camada. Quando as barras de rolagem forem explicitamente denidas, evita-se qualquer confuso resultante do aparecimento e desaparecimento das mesmas em um ambiente dinmico. Essa opo funciona apenas nos navegadores que oferecem suporte s barras de rolagem. Automtico faz com que as barras de rolagem apaream apenas quando o contedo da camada ultrapassar os seus limites. dene a rea visvel de uma camada. Especica valores que representam a distncia, em pixels, dos limites da camadas. As denies A (alto) e E (esquerda) so relativas camada, e no pgina.
Cortar Utilizar esquerda, no alto ou PginaX, PginaY (apenas nas camadas da Netscape) 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 PginaX, PginaY posiciona a camada em um local absoluto em relao ao canto superior esquerdo da pgina, independente da posio da camada-me.
(apenas nas camadas da Netscape) permite exibir um outro documento HTML na camada. Clique no cone correspondente pasta, para procurar e selecionar o documento, ou digite o caminho do documento. Observe que o Dreamweaver no exibir essa propriedade na janela do documento.
Orig A/B (apenas nas camadas da Netscape) 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.
241
Como definir as propriedades de camadas mltiplas Quando duas ou mais camadas forem selecionadas, o inspetor de propriedades exibir as propriedades de texto e um subconjunto das propriedades normais de camadas, o que permitir modicar vrias camadas simultaneamente. Para selecionar camadas mltiplas, pressione a tecla Shift enquanto seleciona as camadas. Consulte Como manipular as camadas, na pgina 243. especicam a posio das camadas a partir do canto superior esquerdo da pgina ou da camada-me.
EeA L e U especicam
a largura e altura das camadas. Esses valores sero ignorados se o contedo da camada exceder o tamanho especicado. Nas camadas CSS, os valores padro de posicionamento e tamanho so 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
o modo inicial de exibio das camadas. Utilize uma linguagem de criao de roteiros, como JavaScript, para controlar a propriedade de visibilidade e exibir dinamicamente o contedo das camadas. Escolha uma dentre as seguintes opes: Default (Padro) no especica uma propriedade de visibilidade, porm a maior parte dos navegadores interpreta essa opo como Inherit (Herdar). Inherit (Herdar) utiliza a propriedade de visibilidade da camada-me. Visible (Visvel) exibe o contedo da camada, independentemente do valor da camada-me. Hidden (Oculta) exibe o contedo da camada de forma transparente, independentemente do valor da camada-me. Observe que as camadas ocultas criadas com os rtulos LAYER e ILAYER ocuparo o mesmo espao, como se estivessem visveis.
Rtulo determina se as camadas sero CSS ou da Netscape. SPAN e DIV criam camadas CSS, enquanto que LAYER e ILAYER criam camadas da Netscape.
especica uma imagem de fundo para as camadas. Clique no cone correspondente pasta, para procurar e selecionar um arquivo de imagem, ou digite o caminho da imagem no campo de texto.
Imagem de fundo
especica uma cor de fundo para as camadas. Deixe esta opo em branco para especicar um fundo transparente.
Cor de fundo
242
Captulo 9
Como manipular as camadas

Enquanto se modica o layout da pgina, as camadas podem ser ativadas, selecionadas ou redimensionadas. A ativao das camadas permite a insero de seu contedo. A seleo das camadas permite alinhar, reposicionar ou redimension-las. O redimensionamento das camadas permite alterar as dimenses de uma nica camada ou tornar iguais as alturas e larguras de duas ou mais camadas. Diversos inspetores de propriedades aparecero, dependendo de voc estar trabalhando com uma nica ou vrias camadas. Consulte Como denir as propriedades das camadas, na pgina 239 e Como denir as propriedades de camadas mltiplas, na pgina 242. Quando forem selecionadas camadas mltiplas, o menu Modicar exibir as opes Camadas e Pontos ativos. Para evitar que as camadas se sobreponham quando forem movidas ou redimensionadas, utilize a opo Evitar sobreposies. Consulte Como evitar as sobreposies de camadas, na pgina 251. Como ativar as camadas Ative uma camada, para poder inserir objetos nela. A ativao de uma camada coloca o ponto de insero em seu interior, reala a sua borda e exibe a ala de seleo, mas no seleciona a camada.
Para ativar uma camada:
Clique em qualquer ponto dentro da camada.
243
Como selecionar as camadas Selecione uma ou mais camadas para alinh-las, tornar iguais as suas larguras e alturas, reposicion-las, etc. Para obter uma lista completa de opes, consulte Como denir as propriedades das camadas, na pgina 239.
Para selecionar uma camada, siga um dos procedimentos abaixo:
Clique no marcador da camada, na janela do documento, que representa o local da camada no cdigo HTML. Se o marcador da camada no estiver visvel, escolha Exibir > Elementos invisveis. 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 em uma borda da camada. Se nenhuma camada estiver ativa ou selecionada, mantenha pressionada a tecla Shift enquanto clica dentro de uma camada. Se houver mltiplas camadas selecionadas, clique dentro de uma delas enquanto mantm pressionadas as teclas Control e Shift (no Windows), ou as teclas Command e Shift (no Macintosh). Esse procedimento cancelar a seleo de todas as outras camadas. Clique no nome da camada, na paleta de camadas.
Para selecionar camadas mltiplas, siga um dos procedimentos abaixo:
Pressione a tecla Shift e clique dentro ou na borda de duas ou mais camadas. Pressione a tecla Shift enquanto clica nos nomes de duas ou mais camadas, na paleta de camadas. Quando houver camadas mltiplas selecionadas, as alas da ltima camada escolhida estaro realadas em preto. As alas das outras camadas estaro realadas em branco.
244
Captulo 9
Como redimensionar as camadas Redimensione uma nica ou vrias camadas simultaneamente, a m de tornar iguais as suas larguras e alturas. Se a opo Evitar sobreposies estiver ativada, no ser possvel redimensionar uma camada para que esta se sobreponha a outra camada. Consulte Como evitar as sobreposies de camadas, na pgina 251.
Para redimensionar uma camada, siga um dos procedimentos abaixo:
Para redimensionar arrastando o cursor, selecione a camada e arraste qualquer uma das alas de redimensionamento. Para redimensionar um pixel por vez, selecione a camada e pressione a tecla Control e uma das teclas de seta (no Windows), ou a tecla Option e uma das teclas de seta (no Macintosh). Para redimensionar de acordo com o incremento de encaixe na grade, pressione as teclas Shift, Control e uma das teclas de seta (no Windows), ou Option e uma das teclas de seta (no Macintosh). Para obter informaes sobre a denio de incrementos de encaixe na grade, consulte Como encaixar as camadas na grade, na pgina 247. No inspetor de propriedades, digite os valores da largura e altura. O redimensionamento de uma camada altera a sua largura e altura. Este no dene a extenso do contedo da camada que estar visvel. Para denir a regio visvel de uma camada, consulte Como denir as propriedades das camadas, na pgina 239.
Para redimensionar camadas mltiplas: 1 2
Na janela do documento, selecione duas ou mais camadas. Siga um dos procedimentos abaixo: Escolha Modicar > Camadas e pontos ativos > Tornar as larguras iguais, ou Modicar > Camadas e pontos ativos > Tornar as alturas iguais. As primeiras camadas selecionadas assumiro a largura ou altura da ltima camada selecionada (realada em preto). No inspetor de propriedades, abaixo de Camadas mltiplas, digite os valores de largura e altura. Os valores sero aplicados a todas as camadas selecionadas.
245
Como mover as camadas Qualquer pessoa que j tenha trabalhado com aplicativos grcos bsicos estar familiarizado com o procedimento de transferncia de camadas na janela do documento. Se a opo Evitar sobreposies estiver ativada, no ser possvel mover uma camada para que esta se sobreponha a outra. Consulte Como evitar as sobreposies de camadas, na pgina 251.
Para mover uma ou mais camadas, siga um dos procedimentos abaixo:
Para mover arrastando, selecione as camadas e arraste a ala de seleo da ltima camada selecionada (realada em preto). Para mover um pixel por vez, selecione as camadas e utilize as teclas de seta. Pressione a tecla Shift e uma das teclas de seta, para mover a camada de acordo com o incremento de encaixe na grade. Para obter informaes sobre a denio de incrementos de encaixe na grade, consulte Como encaixar as camadas na grade, na pgina 247. 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.
Para alinhar duas ou mais camadas: 1 2
Selecione as camadas. Escolha Modicar > Camadas e pontos ativos, e selecione uma opo de alinhamento. Por exemplo: se voc selecionar Alinhar 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).
246
Captulo 9
Como encaixar as camadas na grade Utilize a grade como um guia visual para posicionar ou redimensionar as camadas na janela do documento. Se o encaixe estiver ativado, as camadas sero automaticamente levadas posio de encaixe mais prxima quando forem movidas ou redimensionadas. O encaixe funcionar independentemente da visibilidade da grade.
Para exibir a grade, siga um dos procedimentos abaixo:
Escolha Exibir > Grade > Mostrar. Escolha Exibir > Grade > Denies, e selecione a opo Grade visvel.
Para encaixar uma camada: 1 2
Escolha Exibir > Grade > Encaixar, para ativar (ou desativar) o encaixe. Selecione a camada e arraste-a. Quando a camada for solta, ela saltar at a posio de encaixe mais prxima. Quando for solta, a camada saltar para a posio de encaixe mais prxima.
Para alterar as definies da grade e do encaixe: 1 2
Escolha Exibir > Grade > Denies, para abrir a caixa de dilogo. Selecione as opes desejadas. Grade visvel torna a grade visvel. Essa opo funciona em conjunto com o comando Mostrar (Exibir > Grade > Mostrar). Espaamento dene a distncia entre os marcadores da grade. Digite um nmero e, em seguida, no menu pop-up Unidades, escolha pixels, polegadas ou centmetros. A unidade mnima 25 pixels. Cor especica a cor dos marcadores da grade. A cor padro azul claro. Exibir especica se a grade ser exibida como linhas ou pontos. Encaixamento ativa e desativa o encaixe. Essa opo funciona em conjunto com o comando Encaixar (Exibir > Grade > Encaixar). Encaixar a cada especica a unidade de encaixe. Digite um nmero na caixa Encaixar a cada e, no menu pop-up Unidades, escolha pixels, polegadas ou centmetros. O valor padro 5 pixels. Para que as camadas se encaixem na grade visvel, as unidades da grade e de encaixe, expressas em pixels, devero ser idnticas. Por exemplo: se o Espaamento estiver denido com 50 pixels, dena Encaixar a cada com 50 pixels.
Clique em OK.
247
Como alterar a ordem de empilhamento de camadas

Utilize o inspetor de propriedades ou a paleta de camadas para alterar a ordem de empilhamento das camadas. A camada na parte superior da paleta de camadas est situada no alto da ordem de empilhamento. Em cdigo HTML, a ordem de empilhamento, ou ndice Z, determina a ordem segundo a qual as camadas sero desenhadas em um navegador. O ndice Z pode ser alterado para cada camada utilizando o inspetor de propriedades ou a paleta de camadas.
Para alterar a ordem de empilhamento das camadas com o inspetor de propriedades: 1
Escolha Janela > Camadas, para abrir a paleta de camadas e examinar a ordem de empilhamento atual. Selecione uma camada na paleta ou na janela do documento. No inspetor de propriedades da camada, digite um nmero no campo ndice Z. Digite um nmero mais alto para mover a camada at uma posio inferior na ordem de empilhamento. Digite um nmero mais baixo para mover a camada at uma posio superior na ordem de empilhamento.
2 3
Para alterar a ordem de empilhamento das camadas na paleta de camadas:
Escolha Janela > Camadas, para abrir a paleta de camadas. Na paleta de camadas, siga um dos procedimentos abaixo: Na coluna Z, clique no nmero da camada que estiver sendo alterada. Digite um nmero mais alto que o existente para mover a camada para uma posio inferior na ordem de empilhamento, ou digite um nmero mais baixo para mover a camada at uma posio inferior na posio de empilhamento. 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.
248
Captulo 9
Como alterar a visibilidade de uma camada

Ao trabalhar em um documento, voc poder mostrar ou ocultar as camadas, a m de examinar a aparncia da pgina sob diversas condies. Utilize a paleta de camadas para alterar a visibilidade das camadas. Utilize o painel de preferncias de camadas para denir a visibilidade padro de novas camadas. Consulte Como denir as preferncias de camadas, na pgina 239.
Para alterar a visibilidade de uma camada: 1 2
Escolha Janela > Camadas, para abrir a paleta de camadas. Na linha da camada que estiver sendo alterada, clique na coluna do cone representando um olho, at que seja denida 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 esto aninhadas, a camada-me o corpo do documento, que est sempre visvel.
Para alterar a visibilidade de todas as camadas simultaneamente: 1 2
Escolha Janela > Camadas, para abrir a paleta de camadas. Clique no cone representando um olho do cabealho, no alto da coluna.
Sobre as camadas e tabelas

Utilize as camadas para posicionar o contedo em uma pgina. fcil trabalhar com as camadas e modicar o desenho das clulas da tabela. possvel utilizar as camadas para criar com rapidez desenhos de pgina complexos e, em seguida, converter as camadas em tabelas, para que possam ser utilizadas em navegadores da verso 3.0, que no oferecem suporte a camadas. Tambm possvel aprimorar o layout e otimizar o desenho da pgina movimentando-se entre as diversas camadas e tabelas. As camadas no podem ser convertidas em tabelas ou vice-versa em um modelo de documento ou em um documento ao qual tiver sido aplicado um modelo. Crie o documento original e converta-o antes de salv-lo como um modelo. Se estiver criando uma pgina visando apenas os navegadores das verses 4.0 e mais avanados, utilize uma combinao de tabelas e camadas, inclusive animando-as. Para obter informaes sobre animao de camadas, consulte Sobre as linhas de tempo, na pgina 253. Se desejar gerar arquivos compatveis com os navegadores das verses 3.0 a partir do arquivo atual, utilize as opes de converso do menu Arquivo. Consulte Como converter para obter compatibilidade com a verso 3.0, na pgina 252.
249
Como utilizar as camadas para criar tabelas Ao desenhar tabelas, voc poder achar mais fcil criar uma pgina utilizando camadas e, em seguida, converter o layout da camada em um layout de tabela.
Para converter camadas em uma tabela: 1 2
Escolha Modicar > Modo de layout > Converter as camadas em tabela. Na caixa de dilogo que aparecer, selecione as opes desejadas de layout de tabelas. Mais preciso cria uma clula de tabela 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 essa opo for selecionada, a tabela resultante ter menos linhas e colunas vazias. Utilizar GIFs transparentes preenche a ltima linha da tabela com GIFs transparentes. Esse procedimento garante que a aparncia da tabela ser uniforme em todos os tipos de navegadores. Quando esta opo estiver ativada, ser impossvel 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.
Para converter uma tabela em camadas: 1 2
Escolha Modicar > Modo de layout > Converter as tabelas em camadas. Na caixa de dilogo que aparecer, selecione as opes desejadas. Mostrar a grade e Encaixar na grade permitem utilizar uma grade para auxililo a posicionar as camadas. Consulte Como encaixar as camadas na grade, na pgina 247. 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 251. Mostrar a paleta de camadas exibe a paleta de camadas. Consulte Sobre a paleta de camadas, na pgina 237.
250
Captulo 9
Clique em OK. As tabelas sero convertidas em camadas no arquivo. As clulas vazias no sero convertidas em camadas. O contedo fora das tabelas tambm ser posicionado 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 Exibir > Evitar sobreposies de camadas, ou ative a opo Evitar sobreposies, na paleta de camadas.
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. Quando essa opo e o encaixe estiverem ativados, 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 no impediro 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 de origem de 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 m de separ-las.
251
Como converter para obter compatibilidade com a verso 3.0 Utilize as opes de converso no menu Arquivo para criar uma verso de uma pgina que utiliza camadas compatvel com navegadores 3.0, ou para converter um documento que usa tabelas em um outro que utiliza camadas. Em cada uma destas situaes, 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.
Nota: Se desejar utilizar camadas para dispor os elementos de uma pgina a ser utilizada com os navegadores da verso 3.0, utilize os comandos do modo de layout no menu Modicar, para converter o layout da pgina, de tabela em camadas, o que dispensar a necessidade de criar um outro arquivo. Consulte Como utilizar as camadas para criar tabelas, na pgina 250. 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 caixa de dilogo que aparecer, escolha se deseja converter camadas em tabelas, estilos CSS em markup HTML (estilos de caracteres), ou ambos. Clique em OK. O Dreamweaver abrir o arquivo convertido em uma nova janela sem ttulo. Todas as camadas sero substitudas por uma nica tabela, que preservar o posicionamento original.
Nota: No possvel converter as camadas sobrepostas ou fora da pgina, esquerda ou no alto.
Sempre que for possvel, o markup CSS ser substitudo por estilos de caracteres HTML. Qualquer markup CSS que no puder ser convertido em HTML ser removido. Consulte a Tabela de converso de CSS em markup HTML, na pgina 197 para obter mais informaes sobre os estilos que so convertidos e os que so removidos. 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 no momento certo, conforme o planejado. A linha de tempo ser automaticamente rebobinada at o quadro 1.
252
Captulo 9
Sobre as linhas de tempo

O HTML dinmico, ou DHTML, refere-se possibilidade de alterar as propriedades de estilo ou posicionamento com uma linguagem de criao de roteiros. As linhas de tempo utilizam o HTML dinmico para alterar as propriedades de camadas e imagens em uma srie temporal de quadros. Utilize as linhas de tempo para criar animaes que dispensem quaisquer controles ActiveX, plug-ins ou applets de Java. As linhas de tempo criam animaes alterando com o tempo a posio, tamanho, visibilidade e ordem de empilhamento de uma camada. As linhas de tempo tambm so teis para outras aes que devero ocorrer aps o nal da carga da pgina. Por exemplo: as linhas de tempo podem alterar o arquivo de origem de uma imagem e executar comportamentos em determinados momentos. As funes de camadas das linhas de tempo funcionam apenas nos navegadores das verses 4.0 ou mais avanadas. Abra o inspetor de HTML para examinar o cdigo de JavaScript gerado por uma linha de tempo. O cdigo da linha de tempo est na funo MM_initTimelines dentro de um rtulo SCRIPT no HEAD do documento. Ao editar o HTML de um documento que contm linhas de tempo, tome cuidado especial para no mover, renomear ou excluir qualquer elemento ao qual se refere a linha de tempo. Como utilizar o inspetor de linhas de tempo O inspetor de linhas de tempo representa a alterao das propriedades das camadas e imagens ao longo do tempo. Escolha Janela > Linhas de tempo, para abrir o inspetor de linhas de tempo. Consulte tambm Sobre as linhas de tempo, na pgina 253. Clique no inspetor de 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.
Cabeote de execuo
mostra o quadro da linha de tempo que est em exibio
na pgina.
Menu pop-up Linha de tempo Cabeote de execuo
especica quais linhas de tempo do documento sero exibidas no inspetor de linhas de tempo.
Menu pop-up Linha de tempo Canais de animao
exibem barras para animar as camadas e imagens.
253
Barras de animao
mostram a durao de cada objeto. Uma nica linha pode incluir vrias barras, que representam diversos objetos. Barras diferentes no podem controlar o mesmo objeto no mesmo quadro. so quadros situados em uma barra na qual algumas propriedades do objeto (como a posio) haviam sido especicadas. O Dreamweaver calcula os valores intermedirios dos quadros situados entre os quadros primrios. Os quadros primrios so indicados por pequenos crculos.
Quadros primrios
o canal que contm os comportamentos que devero ser executados em um determinado quadro da linha de tempo.
Canal de comportamentos
Canal de comportamentos
indicam o nmero de quadros ocupados por cada barra. 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 que executam os 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.
Nmeros de quadros
Opes de execuo Abaixo, est uma lista das opes de execuo para exibir a animao.
Rebobinar Voltar
move o cabeote de execuo at o primeiro quadro da linha de tempo.
move 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.
254
Captulo 9
Execuo automtica inicia a execuo automtica de uma linha de tempo quando a pgina for carregada em um navegador. A execuo automtica anexa um comportamento ao rtulo BODY da pgina, que executa a ao Executar a linha de tempo quando a pgina for carregada.
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.
Loop
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 tambm podem alterar os arquivos de origem das imagens. As linhas de tempo podem mover apenas as camadas. Para mover imagens ou texto, crie uma camada utilizando o boto Camada, na paleta de objetos e, em seguida, insira imagens, texto ou qualquer outro tipo de contedo na camada. Consulte Como criar as camadas, na pgina 236.
Para criar uma animao de linha de tempo: 1 2
Se desejar animar uma camada, mova-a at o ponto inicial da animao. Escolha Janela > Linhas de tempo.
255
Selecione a camada a ser animada. Certique-se de ter selecionado o elemento desejado. Clique no marcador da camada ou utilize a paleta de camadas para selecionar uma camada. Consulte tambm Como manipular as camadas, na pgina 243. Quando a camada estiver selecionada, aparecero alas ao seu redor, como mostra a seguinte ilustrao.
Clique no marcador da camada, para selecion-la Boto Desenhar a camada
Camada selecionada contendo uma imagem
Ao clicar na camada, surgir um ponto de insero piscando dentro da mesma, porm isto no indica que ela esteja selecionada.
4
Escolha Modicar > Linha de tempo >Adicionar objeto linha de tempo, ou simplesmente arraste o objeto selecionado at o inspetor de linhas de tempo. Aparecer uma barra no primeiro canal da linha de tempo. O nome da camada aparecer na barra. Se estiver trabalhando com uma imagem, a nica propriedade que poder ser alterada o arquivo de origem da imagem, no inspetor de propriedades. As etapas restantes no se aplicam. Consulte Como alterar as propriedades das imagens e camadas com as linhas de tempo, na pgina 259.
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.
256
Captulo 9
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), para adicionar um quadro primrio na posio do ponto de insero, ou clique em um quadro no meio da barra de animao e, no menu contextual, 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 ou utilize a paleta de camadas para selecionar uma camada. Consulte tambm Como manipular as camadas, na pgina 243.
3 4 5
Escolha Modicar > 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 inspetor de linhas de tempo, clique no boto Rebobinar; em seguida, mantenha pressionado o boto Executar, para visualizar a animao.
257
Como modificar as linhas de tempo Aps ter denido os componentes bsicos de uma linha de tempo, faa alteraes teis, 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. Todos os quadros primrios da animao sero acomodados no novo espao, mantendo constantes as suas posies relativas. Pressione a tecla Control (no Windows) ou Command (no Macintosh) enquanto arrasta o marcador do quadro nal, para impedir que os outros quadros primrios se movam. Para antecipar ou retardar a chegada da camada posio do quadro primrio, mova o marcador do quadro primrio para a direita ou esquerda, ao longo da barra. Para alterar o incio de uma animao, selecione uma ou todas as barras associadas animao (pressione a tecla Shift para selecionar mais de uma barra simultaneamente) e arraste para a esquerda ou direita. Para alterar a localizao de toda uma animao, selecione a barra inteira e arraste o objeto sobre a pgina. O Dreamweaver ajustar a posio de todos os quadros primrios. Qualquer tipo de alterao feita com uma barra inteira selecionada modicar todos os quadros primrios. Para adicionar ou remover quadros da linha de tempo, escolha Modicar > Linha de tempo > Adicionar quadro, ou Modicar > Linha de tempo > Remover o quadro. Para que a linha de tempo seja executada automaticamente quando a pgina for aberta em um navegador, clique em Execuo automtica. Esta opo anexar um comportamento pgina que executa 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.
258
Captulo 9
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: 1
No inspetor de linhas de tempo, siga um dos procedimentos abaixo: Selecione um quadro primrio na barra que controla o objeto a ser alterado. Os quadros inicial e nal so primrios. 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).
Dena as novas propriedades do objeto, escolhendo uma das seguintes opes: Para alterar o arquivo de origem de uma imagem, clique no cone correspondente pasta, ao lado da caixa Orig, no inspetor de propriedades, para procurar e selecionar uma nova imagem. 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. Consulte tambm Como alterar a visibilidade de uma camada, na pgina 249. Para alterar o tamanho de uma camada, arraste suas alas de redimensionamento ou digite novos valores nas caixas Largura e Altura, no inspetor de propriedades. Atualmente, o Internet Explorer 4.0 e o 5.0 so os nicos navegadores capazes de alterar dinamicamente o tamanho de uma camada. Para alterar a ordem de empilhamento de uma camada, digite um novo valor no campo ndice Z, ou utilize a paleta de camadas para alterar a ordem de empilhamento da camada. Consulte tambm Como alterar a ordem de empilhamento de camadas, na pgina 248.
Mantenha pressionado o boto Executar, para examinar a animao.
A camada selecionada estar sempre visvel e no incio da ordem de empilhamento. Cancele a seleo de todas as camadas, para permitir que a linha de tempo controle a ordem de empilhamento ou a visibilidade.
259
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. A pgina tambm poder incluir elementos interativos que acionam diversas linhas de tempo.
Para gerenciar vrias linhas de tempo, utilize as seguintes opes:
Para criar uma nova linha de tempo, escolha Modicar > Linha de tempo > Adicionar linha de tempo. Para remover uma linha de tempo, escolha Modicar > Linha de tempo > Remover a linha de tempo. Para renomear uma linha de tempo, escolha Modicar > Linha de tempo > Renomear a linha de tempo, ou digite um novo nome no menu pop-up Linha de tempo. Para exibir uma outra linha de tempo no inspetor de linhas de tempo, escolha uma nova linha de tempo no menu pop-up Linha de tempo, no inspetor de 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: 1
Clique em uma barra de animao para selecionar uma seqncia. Para selecionar vrias 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: 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.
2 3
260
Captulo 9
Cole a seleo na linha de tempo. As barras de animao de um mesmo objeto no podem se sobrepor porque uma camada no pode ocupar dois lugares simultaneamente (nem uma imagem pode ter duas origens diferentes ao mesmo tempo). Se a barra de animao a ser colada se sobrepuser a uma outra do mesmo objeto, o Dreamweaver acomodar automaticamente a seleo at o primeiro quadro sem sobreposio.
H dois princpios a serem levados em conta quando forem coladas seqncias de animao em um outro documento: Se voc copiar uma seqncia de animao de uma camada e o novo documento j contiver uma camada com o mesmo nome, o Dreamweaver aplicar as propriedades da animao camada existente no novo documento. Se voc copiar uma seqncia de animao de uma camada e o novo documento no contiver uma camada com o mesmo nome, o Dreamweaver colar a camada e o seu contedo do documento original, juntamente com a seqncia de animao. Para aplicar a seqncia de animao colada a outra camada no novo documento, escolha Alterar o objeto, no menu contextual e, no menu pop-up, selecione o nome da segunda camada. Se desejar, exclua a camada colada. Consulte Como aplicar uma seqncia de animao a um objeto diferente, na pgina 261. Como aplicar uma seqncia de animao a um objeto diferente Para economizar tempo, possvel criar uma seqncia de animao e aplic-la s camadas restantes do documento.
Para aplicar uma seqncia de animao existente a outros objetos: 1 2 3
No inspetor de linhas de tempo, selecione a seqncia de animao e copie-a. Clique em qualquer quadro do inspetor de linhas de tempo e cole a seqncia. 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).
261
Como renomear as linhas de tempo

Para renomear a linha de tempo exibida no inspetor de linhas de tempo, siga um dos procedimentos abaixo:
Escolha Modicar > Linha de tempo > Renomear a linha de tempo, e digite um novo nome na caixa de dilogo Renomear a linha de tempo. Digite um novo nome no menu pop-up Nome da linha de tempo, no inspetor de linhas de tempo. Se o documento contiver a ao de comportamento Executar a linha de tempo (por exemplo: se ele contiver um boto que deve ser clicado para iniciar a linha de tempo), edite o comportamento, para que ele represente o novo nome da linha de tempo. Dicas de animao para as linhas de tempo As seguintes sugestes podem melhorar o desempenho das animaes e facilitar a sua criao: Mostre e oculte as camadas, em vez de alterar o arquivo de origem nas animaes que compreendem vrias imagens. A alternncia de arquivos de origem de uma imagem poder tornar a animao mais lenta porque a nova imagem dever ser descarregada. Se todas as imagens forem descarregadas simultaneamente em camadas ocultas, antes da execuo da animao, no haver pausas perceptveis ou imagens ausentes. Estenda as barras de animao, para criar um movimento mais suave. Se a animao e as imagens estiverem saltando entre as posies, arraste o quadro nal da barra de animao da camada para permitir o movimento ao longo de um nmero maior de quadros. O aumento da barra de animao cria mais pontos de dados entre os pontos inicial e nal do movimento e tambm faz com que o objeto se mova mais lentamente. Tente aumentar o nmero de quadros por segundo (qps) para melhorar a velocidade, porm leve em conta que a maioria dos navegadores executados nos sistemas mais comuns no podem animar muito mais rpido do que 15 qps. Teste a animao em diversos sistemas, com navegadores diferentes, para estabelecer as melhores denies. No anime mapas de bits grandes. Aumente a velocidade da animao, ao evitar mover imagens grandes. Em vez disso, crie imagens compostas e mova apenas pequenas partes da imagem. Por exemplo: mostre o movimento de um carro animando apenas as suas rodas. Crie animaes simples. No crie animaes que exijam mais recursos do que os navegadores atuais podem oferecer. Os navegadores sempre executam cada quadro de uma animao de linha de tempo, mesmo quando o desempenho do sistema ou da Internet diminuir.
262
Captulo 9
Aes de comportamentos para controlar as linhas de tempo

Anexe as aes de comportamentos listadas abaixo a um vnculo, boto ou outro objeto, a m de controlar as linhas de tempo. Para criar efeitos interessantes, coloque os comportamentos que contm estas aes no canal de comportamentos. Por exemplo: faa com que uma linha de tempo interrompa a execuo de si prpria. Para obter mais informaes, consulte Como anexar um comportamento a uma linha de tempo, na pgina 305 e Como utilizar os comportamentos, na pgina 299.
Arrastar a camada
permite que o usurio arraste uma camada. Utilize esta ao para criar quebra-cabeas, controles deslizantes e outros elementos mveis da interface do usurio. Consulte Arrastar a camada, na pgina 314.
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. Consulte Mostrar/ocultar as camadas, na pgina 329.
Mostrar/ocultar as camadas Executar a linha de tempo e Parar a linha de tempo
permitem que o usurio inicie e pare a linha de tempo clicando em um vnculo ou boto. Estas aes tambm podem iniciar e parar uma linha de tempo automaticamente quando o usurio passar o cursor sobre um vnculo, uma imagem, ou um outro objeto. Consulte Executar a linha de tempo e Parar a linha de tempo, na pgina 333.
faz com que a linha de tempo salte at um determinado quadro. A caixa de seleo Loop, no inspetor de linhas de tempo, adiciona a ao Ir para o quadro da linha de tempo aps o ltimo quadro da animao, retornando-a ao primeiro quadro e iniciando a animao novamente. Consulte Ir para o quadro da linha de tempo, na pgina 332
Ir para o quadro da linha de tempo Definir o texto da camada substitui o contedo e a formatao de uma camada existente em uma pgina pelo contedo especicado. O contedo pode incluir qualquer HTML vlido. Consulte Denir o texto da camada, na pgina 326.
263
264
Captulo 9
10
CAPTULO 10
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como utilizar as molduras
As molduras so compostas de dois elementos principais um conjunto de molduras e as molduras individuais. Um conjunto de molduras uma pgina HTML que dene a estrutura de um conjunto de molduras em um documento. A denio do conjunto de molduras abrange informaes sobre o nmero de molduras exibidas em uma pgina, o tamanho das molduras, a origem da pgina carregada em uma moldura e outras propriedades que podem ser denidas. Uma pgina HTML com um conjunto de molduras no exibida em um navegador, ela apenas armazena as informaes sobre a maneira como as molduras em uma pgina sero exibidas. As molduras HTML so regies denidas espacialmente ou reas em uma pgina HTML. Cada moldura em uma pgina retm um documento HTML individualmente. Geralmente, as molduras denem uma rea de navegao e uma rea de contedo em uma pgina da Web. Quando um documento do Dreamweaver dividido em molduras, so criados documentos HTML separados para o conjunto de molduras e para cada nova moldura. O conjunto de molduras chamado de moldura-me e uma moldura chamada de moldura-lha. Um novo contedo pode ser criado diretamente em uma pgina com moldura; as pginas existentes podem ser vinculadas para serem abertas em uma moldura e pode ser congurado um comportamento que altere o contedo em vrias molduras. O que o usurio percebe como uma nica pgina da Web com duas molduras constitui, na verdade, trs arquivos distintos: o arquivo do conjunto de molduras e dois arquivos com o contedo que aparece dentro das molduras. A alterao das propriedades das molduras e dos conjuntos de molduras permite redimensionar as molduras e utilizar os vnculos e os destinos para controlar o contedo de uma moldura.
265
Quando a opo Exibir > Bordas da moldura estiver desativada, o conjunto de molduras ter exatamente a mesma aparncia que em um navegador. Quando as bordas da moldura forem exibidas, o Dreamweaver adicionar espao ao redor do documento para a borda e aumentar a largura das bordas estreitas. Isto facilita a maneira de arrastar e selecionar uma moldura.
Como criar as molduras

As molduras podem ser criadas modicando um documento existente do Dreamweaver, dividindo-o em reas de documento adicionais. H vrias maneiras de criar um conjunto de molduras: voc pode desenh-lo ou selecionar entre vrios conjuntos de molduras predenidos. Como criar 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 > Bordas da moldura. Quando as bordas da moldura forem exibidas, ser adicionado espao em volta da borda do documento, fornecendo-lhe um indicador visual das reas da moldura no documento.
Para criar um conjunto de molduras, siga um dos procedimentos abaixo:
Escolha Modicar > Conjunto de molduras > Dividir a moldura para a esquerda, para a direita, para cima ou para baixo. Mantendo pressionada a tecla Alt (no Windows) ou Option (no Macintosh), arraste uma das bordas da moldura para dentro da janela do documento a m de dividir o documento vertical ou horizontalmente. Arraste uma borda da moldura a partir de um dos cantos, para dividir o documento em quatro molduras.
266
Captulo 10
Para excluir uma moldura:
Arraste a borda da moldura para fora da pgina ou at a borda da moldura-me. Para 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 dos conjuntos de molduras predenidos, no painel de molduras da paleta de objetos, so uma representao visual de cada conjunto de molduras aplicado a um documento selecionado.
O conjunto de molduras selecionado envolve o documento atual no qual o ponto de insero est situado. A rea azul do cone correspondente a um conjunto de molduras predenido representa a pgina ou moldura selecionada atualmente em um documento, enquanto que a rea branca representa a(s) nova(s) moldura(s).
Para inserir um conjunto de molduras predefinido: 1
Coloque o ponto de insero no documento que o conjunto de molduras ir circundar. Siga um dos procedimentos abaixo: No painel de molduras da paleta de objetos, selecione um conjunto de molduras predenido. Para inserir o conjunto de molduras, clique em um cone ou arraste-o diretamente para o documento. Para selecionar um conjunto de molduras predenido, escolha Inserir > Molduras > Esquerda, Direita, Superior, Inferior, Esquerda e superior, Superior esquerda, Esquerda superior, Dividir.
267
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 documento HTML com um conjunto de molduras e documentos com molduras. Utilize as molduras aninhadas para congurar vrias molduras para um documento. 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.
Para criar um conjunto aninhado de molduras: 1
Coloque o ponto de insero na moldura onde dever ser inserido um conjunto aninhado de molduras. Siga um dos procedimentos abaixo: Escolha Modicar > Conjunto de molduras > Dividir a moldura para a esquerda, para a direita, para cima ou para baixo. No painel de molduras da paleta de objetos, selecione um cone de conjunto de molduras. Escolha Inserir > Molduras > Esquerda, Direita, Superior, Inferior, Esquerda e superior, Superior esquerda, Esquerda superior, Dividir. Na janela do documento, mantendo pressionada a tecla Alt (no Windows), ou a tecla Option (no Macintosh), arraste uma borda da moldura para dividi-la vertical ou horizontalmente.
Como selecionar uma moldura ou conjunto de molduras

As molduras e os conjuntos de molduras so documentos HTML individuais. Para fazer alteraes em uma moldura ou em um conjunto de molduras, inicie selecionando a moldura ou o conjunto de molduras a serem modicados. Voc pode selecionar uma moldura ou um conjunto de molduras na janela do documento, ou utilizar o inspetor de molduras. Quando uma moldura ou um conjunto de molduras for selecionado, as linhas de seleo aparecero no inspetor de molduras e na janela do documento.
268
Captulo 10
Como utilizar o inspetor de molduras O inspetor de molduras fornece uma representao visual das molduras em um documento. Voc pode clicar em uma moldura ou um conjunto de molduras, no inspetor de molduras, para selecion-los no documento, e em seguida exibir ou editar as propriedades do item escolhido, no inspetor de propriedades. Consulte Sobre as propriedades das molduras e conjuntos de molduras, na pgina 272. O inspetor de molduras mostra a hierarquia da estrutura do conjunto de molduras de uma maneira que no poder estar visvel na janela do documento. No inspetor de molduras, uma borda tridimensional larga circunda um conjunto de molduras; as molduras so envoltas por uma linha na cinza, e cada moldura identicada por um nome.
Para exibir o inspetor de molduras, siga um dos procedimentos abaixo:
Escolha Janela > Molduras. Pressione as teclas Ctrl e F10 (no Windows) ou Command e F10 (no Macintosh).
Para selecionar uma moldura no inspetor de molduras:
Clique na moldura, no inspetor de molduras.

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

Para mover a seleo at a prxima moldura, siga um dos procedimentos abaixo:
Para mover a seleo at a prxima moldura, Pressione a tecla Alt (no Windows) ou a tecla Command (no Macintosh), mais a tecla de seta direita ou esquerda. Para mover a seleo at o conjunto-pai de molduras, Pressione a tecla Alt (no Windows) ou a tecla Command (no Macintosh), mais a tecla de seta para cima. Para mover a seleo at a moldura-lha, Pressione a tecla Alt (no Windows) ou a tecla Command (no Macintosh), mais a tecla de seta para baixo.
270
Captulo 10
Como salvar os arquivos de molduras e de conjuntos de molduras

Um arquivo de conjunto de molduras e seus arquivos de molduras associados devem ser salvos para que a pgina possa ser visualizada em um navegador. possvel salvar uma pgina com um conjunto de molduras ou com uma moldura individualmente, ou salvar todos os arquivos de molduras abertos e a pgina com o conjunto de molduras. Quando o Dreamweaver for utilizado para criar documentos com molduras, a cada novo documento ser dado um nome de arquivo temporrio por exemplo: MolduraSemNome_1 para a pgina com o conjunto de molduras, SemNome_1, SemNome_2, etc. para as pginas com molduras. Quando uma das opes de salvamento for selecionada, ser aberta a caixa de dilogo Salvar o arquivo, j pronta para salvar um documento com o seu nome de arquivo temporrio. Como os arquivos no tm ttulo, poder ser difcil determinar qual arquivo com moldura est sendo salvo. Examine as linhas da seleo da moldura na janela do documento, para identicar o documento que est sendo salvo. A rea selecionada identica a moldura mencionada na caixa de dilogo Salvar o arquivo. Como salvar um arquivo com um conjunto de molduras
Para salvar um arquivo com um conjunto de molduras, escolha uma das seguintes opes:
Para salvar o arquivo com um conjunto de molduras, escolha Arquivo > Salvar o conjunto de molduras. Para salvar o arquivo com o conjunto de molduras como sendo novo, escolha Arquivo > Salvar o conjunto de molduras como. Como salvar um arquivo de moldura Para salvar um documento inserido em uma moldura, clique na moldura e, em seguida escolha Arquivo > Salvar.
271
Como salvar todos os arquivos em um conjunto de molduras Para salvar todos os documentos abertos, inclusive os individuais, os documentos com moldura e os documentos com um conjunto de molduras, escolha Arquivo > Salvar todos.
Nota: Ao salvar os arquivos, utilize as linhas de seleo de molduras, na janela do documento, para ajud-lo a identicar os documentos com molduras e aqueles com um conjunto de molduras.
Sobre as propriedades das molduras e conjuntos de molduras

As molduras e os conjuntos de molduras tm inspetores de propriedades prprios. As propriedades das molduras determinam o nome da moldura, arquivo de origem, margens, paginao, redimensionamento e bordas de cada moldura em um conjunto. As propriedades dos conjuntos de molduras controlam as dimenses das molduras, assim como a cor e largura das bordas entre elas.
Para exibir as propriedades da moldura: 1
Escolha Janela > Propriedades, para exibir o inspetor de propriedades, caso no esteja aberto. Siga um dos procedimentos abaixo: Mantendo pressionada a tecla Alt (no Windows) ou as teclas Option e Shift (no Macintosh), clique na moldura. Clique em uma moldura, no inspetor de molduras.
272
Captulo 10
Como definir as propriedades das molduras Utilize o inspetor de propriedades da moldura, para denominar uma moldura e denir as bordas e margens. Para examinar todas as seguintes propriedades das molduras, clique na seta de expanso, localizada no canto inferior direito do inspetor de propriedades:
Para especificar as propriedades das molduras: 1
Selecione uma moldura, seguindo um dos procedimentos abaixo: Clique em uma moldura, no inspetor de molduras. Mantendo pressionada a tecla Alt (no Windows) ou as teclas Option e Shift (no Macintosh), clique em uma moldura na janela do documento.
Escolha Janela > Propriedades, para abrir o inspetor de propriedades. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades.
Para denominar uma moldura, digite um nome no campo Nome da moldura.

Nota: Nome da moldura determina o nome da moldura, a ser utilizado como referncia de destino e roteiro de hipervnculos. O nome de uma moldura dever conter apenas uma palavra. So permitidos os sinais de sublinhado (_), porm hfens (-), pontos (.) e espaos no o so. Os nomes das molduras devem iniciar com uma letra (ao invs de um nmero). No utilize as palavras reservadas do JavaScript (por exemplo: top ou navigator) como nomes de molduras.
273
Escolha uma dentre as seguintes opes de molduras: Orig determina o documento de origem da moldura. Digite um nome de 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. Paginao determina se as barras de rolagem aparecero quando no houver espao suciente para exibir o contedo da moldura. A denio padro da maioria dos navegadores Autom. Sem redimens. restringe o tamanho da moldura e impede que os usurios arrastem as suas bordas. As molduras podem ser sempre redimensionadas na janela do documento, contudo, se essa opo for selecionada, um usurio no poder redimension-las em seu navegador. Bordas controlam a borda da moldura. As opes so Sim, No e Padro. Essa escolha anula as denies de borda em vigor para o conjunto de molduras. Consulte Como denir as propriedades dos conjuntos de molduras, na pgina 275. A 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). Cor da borda dene a cor de todas as bordas adjacentes moldura. Essa denio anula a cor da borda do conjunto de molduras.
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).
dene a altura das margens superior e inferior, em pixels (o espao entre as bordas da moldura e o seu contedo).
Altura da margem
274
Captulo 10
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 a 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 do conjunto de molduras: 1
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 inspetor de molduras. Para examinar todas as propriedades dos conjuntos de molduras, clique na seta de expanso, no canto inferior direito do inspetor de propriedades.
275
Para especificar as propriedades do conjunto de molduras: 1 2
Selecione um conjunto de molduras. No menu pop-up Bordas, selecione se as bordas sero exibidas em volta das molduras quando o documento for exibido em um navegador. Se desejar exibir as bordas, selecione Sim. Se no desejar exibir as bordas, selecione No. Caso o navegador do usurio deva determinar como as bordas sero exibidas, selecione Padro.
No campo Largura da borda, digite um nmero, para especicar a largura das bordas no conjunto de molduras. Digite 0, para especicar sem borda. No campo Cor da borda, digite um valor hexadecimal correspondente a uma cor, ou utilize o seletor de cores para selecionar uma cor para a borda. Para selecionar as opes de tamanho de moldura, clique nas guias na caixa Seleo de lin./col., para escolher 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 Adicione um ttulo a uma pgina com um conjunto de molduras, atravs da opo de propriedades da pgina.
Para denominar uma pgina com um conjunto de molduras: 1
Selecione um conjunto de molduras, seguindo um dos procedimentos abaixo: Clique na borda do conjunto de molduras, no inspetor de 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.
276
Captulo 10
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 a quantidade de 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: 1
Clique na borda de uma moldura, para selecionar o conjunto de molduras. Escolha Exibir > 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 na caixa Valor e escolha uma dentre as seguintes opes de Unidades: Pixels dene o tamanho da coluna ou linha selecionada como um valor 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. Percentagem especica que a moldura dever assumir um valor percentual do conjunto de molduras do qual faz parte. Para as molduras especicadas com unidades como percentagens, o espao ser alocado aps o das molduras denidas em pixels, porm antes das molduras denidas como relativas. Relativa especica que o espao destinado moldura dever ser proporcional ao das outras molduras. O espao reservado s molduras especicadas com unidades relativas denido aps as molduras denidas em pixels e percentagens, porm elas consumiro todo o espao restante na janela do navegador.
277
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 especicar as opes de bordas de uma moldura, a opo do conjunto de molduras correspondente ser ignorada.
Para definir as bordas de molduras: 1
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 inspetor de molduras. Dena as seguintes opes no inspetor de propriedades: Bordas controlam a borda das molduras. As opes so Sim, No e Padro. A 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). Cor da borda dene a cor de todas as bordas adjacentes moldura.
Para definir as bordas do conjunto de molduras: 1
Selecione o conjunto de molduras, clicando na borda de uma moldura, na janela do documento, ou na borda que circunda as molduras, no inspetor de molduras. Dena as seguintes opes no inspetor de propriedades: Bordas controlam a borda das molduras no conjunto de molduras. Escolha 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. Cor da borda dene a cor de todas as bordas no conjunto de molduras. Essa denio pode ser ignorada para uma nica moldura, especicando uma cor de borda para essa moldura. Largura da borda especica a largura das bordas no conjunto de molduras. Digite 0, para especicar sem borda.
278
Captulo 10
Como alterar a cor do fundo de uma moldura possvel alterar a cor do fundo de uma moldura, denindo a cor do fundo do documento na moldura.
Para alterar a cor do fundo de um documento em uma moldura: 1
Siga um dos procedimentos abaixo: Posicione o cursor na moldura e escolha Modicar > Propriedades da pgina. Mantendo pressionado o boto direito do mouse (no Windows), ou a tecla Control (no Macintosh), clique na moldura e, no menu contextual, escolha Propriedades da pgina.
Clique no menu pop-up Fundo, para selecionar uma cor.
Como controlar o contedo de molduras com os vnculos

Utilize o menu pop-up Destino, no inspetor de propriedades, para selecionar uma moldura na qual abrir um arquivo. possvel denir a abertura de um arquivo em uma nova janela, a substituio das informaes na mesma moldura que o vnculo e a substituio das informaes em outra moldura. O contedo indicado por um vnculo pode anular a moldura ou aparecer em uma janela de navegador inteiramente nova.
Para designar uma moldura: 1 2
Selecione um texto ou objeto. No campo Vnculo, 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 no outro arquivo a ser vinculado, digite o sinal de nmero (#) antes do nome da ncora.Consulte Como criar vnculos a uma ncora com nome, na pgina 119.
279
No menu pop-up Destino, escolha um destino no qual o documento vinculado ser exibido. abre o documento vinculado em uma nova janela de navegador e disponibiliza a janela.
_blank _parent _self
abre o documento vinculado no conjunto-pai de molduras do vnculo.
abre o vnculo na moldura, substituindo o contedo da mesma.
_top abre o vnculo no conjunto de molduras mais distante do documento, substituindo todas as molduras.
Se as molduras tiverem sido denominadas no inspetor de propriedades, os nomes das molduras aparecero nesse menu. A seleo de uma moldura denida abrir um documento vinculado na moldura escolhida.
Como criar um contedo NOFRAMES

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

possvel aplicar vrios comportamentos que se valem do modo de operao das molduras. Geralmente, as molduras so utilizadas quando o designer da pgina da Web deseja controlar a exibio de seu contedo. H vrios comportamentos que facilitam a alterao do contedo de uma moldura. Denir o texto da moldura substitui o contedo e a formatao de uma moldura pelo contedo especicado. O contedo pode incluir qualquer HTML vlido. Utilize esta ao para exibir informaes dinamicamente. Consulte Denir o texto da moldura, na pgina 325. 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. Consulte Ir para a URL, na pgina 318. Inserir a barra de navegao 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: possvel mostrar uma imagem de boto 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 125. permite congurar uma lista de menu pop-up com vnculos 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 122.
Inserir o menu de salto
281
282
Captulo 10
11
CAPTULO 11
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como inserir mdia
Para inserir um applet de Java, um lme Shockwave ou Flash, controle ActiveX ou outros objetos de udio ou vdeo em uma pgina, siga um dos procedimentos abaixo: Posicione o ponto de insero no local onde deseja inserir o objeto e, em seguida, clique no boto apropriado, na paleta de objetos. Arraste o boto apropriado, da paleta de objetos at o local onde deseja que o objeto aparea na janela do documento. Posicione o ponto de insero e, em seguida, escolha o objeto apropriado no submenu Inserir > Mdia. Na maioria dos casos, aparecer uma caixa de dilogo, que permite escolher um arquivo de origem e especicar certos parmetros do objeto de mdia. Para evitar que estas caixas de dilogo apaream, escolha Editar > Preferncias e desmarque a opo Mostrar a caixa de dilogo quando inserir objetos. Cada boto desta paleta insere o cdigo de origem de HTML necessrio ao aparecimento do objeto na pgina. Utilize o inspetor de propriedades para especicar o arquivo de origem, as dimenses e outros parmetros relevantes.
283
Como iniciar um editor externo de mdia

possvel clicar duas vezes em qualquer arquivo na janela do site para edit-lo. Se o arquivo for um arquivo HTML, ele ser aberto no Dreamweaver. Se ele for de outro tipo, como um arquivo de imagem ou de lme Flash, ele ser aberto em um editor externo apropriado , como o Fireworks ou Flash. Cada tipo de arquivo est associado a um ou mais editores externos. O editor que for iniciado quando voc clicar duas vezes no arquivo na janela do site denominado editor primrio. Se houver mais de um editor associado ao tipo de arquivo, ser possvel iniciar um editor secundrio para um determinado arquivo: clique com o boto direito do mouse (no Windows) ou, mantendo a tecla Control pressionada (no Macintosh), clique no nome do arquivo na janela do site e escolha um editor no submenu Abrir com, do menu contextual. Na maioria das vezes, o editor primrio o mesmo aplicativo que seria iniciado se voc clicasse duas vezes no cone correspondente ao arquivo na rea de trabalho. Para especicar explicitamente os editores externos que devero ser iniciados para um determinado tipo de arquivo, escolha Editar > Preferncias e, na lista de categorias, selecione Editores externos. As extenses dos nomes de arquivos, como .gif, .wav e .mpg, encontram-se listadas esquerda, abaixo de Extenses. Os editores associados extenso selecionada encontram-se listados direita, abaixo de Editores. Para iniciar o editor primrio de uma imagem includa em um documento HTML, pressione a tecla Control enquanto clica duas vezes na imagem (no Windows) ou pressione a tecla Command enquanto clica duas vezes na imagem (no Macintosh) na janela do documento. Observe que este mtodo de iniciar um editor funciona apenas para as imagens, e no para outros tipos de mdia incorporada em um documento.
Para adicionar um tipo de arquivo lista de extenses nas preferncias dos Editores externos: 1 2
Clique no boto de adio (+), situado acima da lista de extenses. Digite a extenso do nome de arquivo (incluindo o ponto no incio da extenso), ou diversas extenses relacionadas, separadas por espaos.
Para adicionar um editor a um determinado tipo de arquivo: 1 2 3
Selecione a extenso do tipo de arquivo na lista de extenses. Clique no boto de adio (+), situado acima da lista de editores. Na caixa de dilogo que aparecer, escolha o aplicativo a ser adicionado lista de editores.
284
Captulo 11
Para remover um tipo de arquivo da lista: 1
Selecione o tipo de arquivo na lista de extenses.
Nota: No possvel desfazer a ao depois de remover um tipo de arquivo da lista, portanto certique-se de no precisar dele antes de remov-lo. 2
Clique no boto de subtrao (), situado acima da lista de extenses.
Para dissociar um editor de um tipo de arquivo: 1 2 3
Selecione o tipo de arquivo na lista de extenses. Selecione o editor na lista de editores. Clique no boto de subtrao (), situado acima da lista de editores.
Para tornar um editor o editor primrio de um tipo de arquivo: 1 2 3
Selecione o tipo de arquivo. Selecione o editor (ou adicione-o, se j no estiver na lista). Clique no boto Tornar primrio.
Como utilizar as Design Notes com objetos de mdia

Do mesmo modo que faria com outros objetos no Dreamweaver, voc poder adicionar as Design Notes a um objeto de mdia.
Para adicionar as Design Notes a um objeto de mdia: 1
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. No menu contextual, escolha Design Notes. Digite as Design Notes. Para obter mais detalhes, consulte Sobre as Design Notes, na pgina 172.
2 3
Como inserir mdia
285
Como inserir filmes Shockwave

Shockwave, o padro da Macromedia para multimdia interativa na Web, um formato compactado que permite que os arquivos de mdia criados no Macromedia Director sejam descarregados rapidamente e executados pela maior parte dos navegadores mais comuns. O software que executa os lmes Shockwave est disponvel como um plug-in do Netscape Navigator e um controle ActiveX. Quando voc inserir um lme Shockwave, o Dreamweaver utilizar os rtulos OBJECT (para o controle ActiveX) e EMBED (para o plug-in), a m de obter os melhores resultados em todos os navegadores. Quando voc zer alteraes ao lme no inspetor de propriedades, o Dreamweaver mapear as entradas dos parmetros apropriados aos rtulos OBJECT e EMBED. Para obter os melhores resultados em diversas plataformas, utilize o Macromedia Aftershock para adicionar wrappers de HTML e JavaScript aos lmes Shockwave. O Aftershock capaz de adicionar diversos recursos aos lmes Shockwave, inclusive a possibilidade de deteco das verses do navegador e dos plug-ins utilizados pelo visitante, para que se adaptem de maneira condizente. Para obter mais informaes sobre o Aftershock, consulte Como inserir e editar os objetos Aftershock, na pgina 290.
Para inserir um filme Shockwave: 1
Na janela do documento, coloque o ponto de insero onde deseja inserir o lme Shockwave. Clique no boto Shockwave, na paleta de objetos. 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. Estas so as nicas propriedades necessrias. Consulte Propriedades do Shockwave, na pgina 287 para obter mais informaes sobre as outras propriedades.
2 3 4
286
Captulo 11
Propriedades do Shockwave
Para garantir os melhores resultados, tanto no Microsoft Internet Explorer como no Netscape Navigator, o Dreamweaver insere os lmes Shockwave utilizando os rtulos OBJECT e EMBED. (OBJECT o rtulo denido pela Microsoft para os controles ActiveX, enquanto que EMBED o rtulo denido pela Netscape para os plug-ins). Para exibir as propriedades no inspetor de propriedades, selecione um lme Shockwave. O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades. especica um nome que identicar o lme para a criao de roteiros. Digite um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades.
Nome 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.
especica o caminho at o arquivo do lme Shockwave. Digite um caminho ou clique no cone correspondente pasta, para procurar um arquivo.
Arquivo
determina os rtulos utilizados para identicar o lme Shockwave. possvel escolher os rtulos OBJECT e EMBED ou apenas um destes rtulos. Recomendamos o valor padro, OBJECT e EMBED.
Rtulo Alinhar determina como o lme ser alinhado na pgina. Consulte Como alinhar
os elementos, na pgina 203, para obter uma descrio de cada opo. especica uma cor de fundo para a rea do lme. Esta cor tambm aparecer enquanto o lme no estiver sendo executado (durante a carga e aps a sua execuo).
Cor do fundo Ident dene o parmetro opcional Ident. do ActiveX. Este parmetro utilizado mais freqentemente para passar informaes entre os controles ActiveX. Bordas
especica a largura da borda ao redor do lme.
e Espao H especicam o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do lme.
Espao V Imagem Alt. (apenas com o rtulo OBJECT) especica uma imagem a ser exibida, se
o navegador do usurio no oferecer suporte aos controles ActiveX.

Parmetros abre uma caixa de dilogo na qual podem ser digitados parmetros adicionais a serem passados ao lme Shockwave. Consulte Sobre os parmetros, na pgina 297. O lme Shockwave deve contar com um autor, para poder receber estes parmetros.
Como inserir mdia
287
Como inserir filmes Flash

A tecnologia Flash da Macromedia constitui a soluo mais eciente para a produo de grcos e animaes com base em vetores. O Flash Player est disponvel tanto como um plug-in do Netscape Navigator quanto um controle ActiveX para o Internet Explorer, tendo sido includo nas verses mais atuais do Netscape Navigator, Microsoft Windows 98 e America Online. Utilize o Macromedia Flash para criar lmes Flash. Se voc utiliza o Flash 3, utilize o Aftershock para adicionar a deteco de roteiros e da verso de plug-ins ao lme; consulte Como inserir e editar os objetos Aftershock, na pgina 290. Se voc utilizar o Flash 4, utilize o comando Publicar com a mesma nalidade. Quando voc inserir um lme Flash em um documento, o Dreamweaver utilizar os rtulos OBJECT (denido pela Microsoft para os controles ActiveX) e EMBED (denido pela Netscape), a m de obter os melhores resultados em todos os tipos de navegadores. Quando voc zer alteraes ao lme no inspetor de propriedades, o Dreamweaver mapear as entradas dos parmetros apropriados aos rtulos OBJECT e EMBED.
Nota: Se voc tiver inserido um lme atravs da utilizao do objeto Flash, o lme poder ser exibido apenas com o Flash Player 4, mesmo se tiver sido criado com o Flash 3. A verso 3 e mais antigas do Flash Player so incapazes de exibir lmes inseridos atravs da utilizao do objeto Flash. Os visitantes sua pgina que utilizarem a verso 3 ou anteriores do Flash Player sero solicitados a atualiz-la para a verso 4 do Flash Player. Para inserir um filme Flash: 1
Na janela do documento, coloque o ponto de insero onde deseja inserir o lme. Clique no boto Flash, na paleta de objetos. Na caixa de dilogo que aparecer, selecione um arquivo de lme Flash. No inspetor de propriedades, digite a largura e altura do lme, nas caixas L e U. Estas so as nicas propriedades necessrias. Consulte Propriedades dos lmes Flash, na pgina 288 para obter mais informaes sobre as outras propriedades.
2 3 4
Propriedades dos filmes Flash

Para garantir os melhores resultados, tanto no Internet Explorer como no Netscape Navigator, o Dreamweaver insere os lmes Flash utilizando os rtulos OBJECT e EMBED. (OBJECT o rtulo denido pela Microsoft para os controles ActiveX, enquanto que EMBED o rtulo denido pela Netscape para os plug-ins). Para exibir as seguintes propriedades no inspetor de propriedades, selecione um lme Flash.
288
Captulo 11
O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades. especica um nome que identicar o lme para a criao de roteiros. Digite um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades.
Nome 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. Digite um caminho ou clique no cone correspondente pasta, para procurar um arquivo.
determina os rtulos utilizados para identicar o lme. possvel escolher os rtulos OBJECT e EMBED, ou apenas um destes rtulos. Recomendamos o valor padro, OBJECT e EMBED.
Rtulo Alinhar determina como o lme ser alinhado na pgina. Consulte Como alinhar
os elementos, na pgina 203, para obter uma descrio de cada opo. especica uma cor de fundo para a rea do lme. Esta cor tambm aparecer enquanto o lme no estiver sendo executado (durante a carga e aps a sua execuo).
Cor do fundo Ident dene o parmetro opcional Ident. do ActiveX. Este parmetro utilizado mais freqentemente para passar informaes entre os controles ActiveX. Bordas
especica a largura da borda ao redor do lme.
e Espao H especicam o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do lme.
Espao V Imagem Alt. (apenas com o rtulo OBJECT) especica uma imagem a ser exibida, se
o navegador do usurio no oferecer suporte aos controles ActiveX.

Parmetros abre uma caixa de dilogo na qual podem ser digitados parmetros adicionais a serem passados ao lme. Consulte Sobre os parmetros, na pgina 297. O lme deve contar com um autor, para poder receber estes parmetros. Qualidade dene o parmetro QUALITY dos rtulos OBJECT e EMBED que executam o lme. Consulte a documentao do Flash para obter uma descrio das opes. As opes so Baixa, Baixa autom., Alta autom. e Alta. Escala dene o parmetro SCALE dos rtulos OBJECT e EMBED que executam o lme. Consulte a documentao do Flash para obter uma descrio das opes. Execuo automtica
executa o lme automaticamente quando a pgina for
carregada.
Loop
faz com que o lme seja repetido indenidamente.
Como inserir mdia
289
Como inserir e editar os objetos Aftershock

O Aftershock um utilitrio da Macromedia, includo no pacote do Director. O Aftershock gera cdigos HTML e JavaScript a serem associados aos lmes Shockwave e Flash; ele pode ser utilizado, por exemplo, para detectar a verso de um plug-in utilizado pelo visitante de sua pgina e para fornecer um contedo apropriado. possvel abrir os arquivos criados pelo Aftershock no Dreamweaver e, em seguida, colar o contedo em outros documentos do Dreamweaver. Para editar os objetos Aftershock, instale este programa no seu sistema, selecione o HTML gerado por ele em um documento e, no inspetor de propriedades, clique em Iniciar o Aftershock. No Flash 4, o Aftershock foi absorvido pelo recurso Publicar. No entanto, o Aftershock ainda til para os usurios do Flash 3 e do Director.
Para inserir objetos Aftershock no Dreamweaver: 1
No Dreamweaver, abra um arquivo HTML criado pelo Aftershock. Os elementos do Aftershock aparecero como objetos no-editveis no Dreamweaver. Se um objeto incluir uma imagem de visualizao, o Dreamweaver a exibir.
Copie o contedo do arquivo e cole-o em outro documento do Dreamweaver.
Para editar um objeto Aftershock: 1 2 3
Selecione um objeto Aftershock e abra o inspetor de propriedades. Clique em Iniciar o Aftershock. Edite o arquivo no Aftershock, salve as alteraes e saia do utilitrio. Quando voc sair do Aftershock, o Dreamweaver atualizar o contedo do objeto Aftershock, incluindo as novas informaes.
290
Captulo 11
Como inserir objetos do Generator

O Macromedia Generator proporciona a possibilidade de tratar de contedo dinmico na Web. Os arquivos do Generator podem ser criados com o Flash 4, utilizando os modelos gratuitos de autoria do Generator; os arquivos passam a ser veiculados por um servidor da Web que executa o software de servidor do Generator. possvel inserir um objeto do Generator em um documento do Dreamweaver.
Para inserir um objeto do Generator: 1
Na janela do documento, coloque o ponto de insero onde deseja inserir o objeto. Clique no boto Generator, na paleta de 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 do Generator.
2 3
Para editar os parmetros depois que o objeto do Generator tiver sido inserido, utilize o inspetor de origem de HTML. O servidor do Generator tentar obter valores de um arquivo de banco de dados para a insero no modelo; se no houver um banco de dados disponvel, o servidor usar os pares name=value fornecidos por voc durante a insero do objeto.
Como inserir mdia
291
Como inserir o contedo de plug-ins do Netscape Navigator

Os plug-ins aprimoram o funcionamento do Netscape Navigator, possibilitando maneiras de exibir o contedo de mdia em diversos formatos. Depois de criar o contedo de um plug-in do Navigator, possvel utilizar o Dreamweaver para inseri-lo em um documento HTML. O Dreamweaver utiliza o rtulo EMBED para marcar a referncia ao arquivo de contedo.
Para inserir o contedo de plug-ins do Navigator: 1
Na janela do documento, coloque o ponto de insero onde deseja inserir o contedo. Clique no boto Plug-in, na paleta de objetos. Na caixa de dilogo que aparecer, selecione um arquivo de contedo para o plug-in do Navigator.
2 3
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 plug-in do Netscape Navigator. O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades. especica um nome que identicar o plug-in para a criao de roteiros. Digite um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades.
Plug-in 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 do valor do objeto-pai). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm.
especica o arquivo de origem dos dados. Digite um nome de arquivo, ou clique no cone correspondente pasta, para procurar um arquivo.
Orig URL do Plg especica
a URL do atributo PLUGINSPAGE. Digite a URL completa do site onde os usurios podero descarregar o plug-in. Se o usurio que estiver visualizando a pgina no contar com o plug-in, o navegador tentar descarreg-lo a partir desta URL.
292
Captulo 11
Alinhar
determina como o objeto ser alinhado na pgina. Consulte Como alinhar os elementos, na pgina 203, para obter uma descrio de cada opo. e Espao H especicam o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do plug-in.
Espao V Bordas
especica a largura da borda ao redor do plug-in.
Parmetros abre uma caixa de dilogo na qual podero ser digitados parmetros adicionais, a serem passados ao plug-in do Netscape Navigator. Consulte Sobre os parmetros, na pgina 297. Muitos plug-ins respondem a parmetros especiais. O plug-in Flash, por exemplo, inclui parmetros relacionados a BGCOLOR, SALIGN e SCALE.
Como executar os plug-ins na janela do documento

possvel visualizar lmes e animaes que dependem dos plug-ins do Navigator ou seja, elementos que utilizam o rtulo 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-in de todos os navegadores que estiverem instalados.
Para executar o contedo de plug-ins na janela do documento: 1
Insira um ou mais elementos de mdia, escolhendo Inserir > Mdia > Shockwave, Inserir > Mdia > Flash ou Inserir > Mdia > Plug-in. Execute o contedo do plug-in: Selecione um dos elementos de mdia que tiver inserido e escolha Exibir > Plug-ins > Executar. Escolha Exibir > Plug-ins > Executar todos, para executar todos os elementos de mdia da pgina que dependerem de plug-ins.
Para interromper a execuo do contedo de plug-ins:
Selecione um elemento de mdia e escolha Exibir > Plug-ins > Parar, ou escolha Exibir > Plug-ins > Parar todos, para parar a execuo de todo o contedo dos plug-ins.
Como inserir mdia
293
Resoluo de problemas relacionados aos plug-ins do Navigator

Se, aps ter seguido estas etapas para executar o contedo do plug-in na janela do documento, alguns elementos do contedo do plug-in no forem executados, tente um dos seguintes procedimentos: Certique-se de que o plug-in associado esteja instalado no computador e que o contedo do mesmo seja compatvel com a verso do plug-in que voc possui. Abra o arquivo Conguration/badplugins.cfg em um editor de texto e procure o plug-in em questo na lista. O arquivo badplugins.cfg controla os plug-ins que acarretaro falhas do Dreamweaver ou outros problemas srios. Se houver problemas com qualquer outro plug-in, adicione-o a este arquivo. Certique-se de contar com memria suciente (e, no Macintosh, que haja memria suciente alocada ao Dreamweaver). Alguns plug-ins exigem entre 2 MB e 5 MB a mais de memria, para que sejam executados.
Como inserir um controle ActiveX

Os controles ActiveX (anteriormente conhecidos como controles OLE) so componentes reutilizveis, semelhantes a mini-aplicativos que podem funcionar como plug-ins dos navegadores. Eles so executados no Internet Explorer com o Windows, porm no so executados no Macintosh ou no Netscape Navigator. No Dreamweaver, o objeto ActiveX permite fornecer atributos e parmetros para um controle ActiveX no navegador do visitante. O Dreamweaver utiliza o rtulo OBJECT para marcar o local na pgina onde o controle ActiveX aparecer e para fornecer parmetros ao controle ActiveX.
Para inserir o contedo de controles ActiveX: 1
Na janela do documento, coloque o ponto de insero onde deseja inserir o contedo. Clique no boto ActiveX, na paleta de objetos. Um cone marca o local onde o controle ActiveX aparecer na pgina no Internet Explorer.
294
Captulo 11
Propriedades do ActiveX
Aps ter inserido um objeto ActiveX, utilize o inspetor de propriedades para denir os atributos do rtulo 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. O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades. especica um nome que identicar o objeto ActiveX para a criao de roteiros. Digite um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades.
Nome 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 do valor do objeto-pai). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm.
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 descarreg-lo a partir do local especicado em Base.
Class ID
especica a URL que contm o controle ActiveX. O Internet Explorer descarregar o 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.
Base Incorporar faz com que o Dreamweaver adicione um rtulo EMBED dentro do rtulo OBJECT do controle ActiveX. Se o controle ActiveX possuir um equivalente ao plug-in do Netscape Navigator, o rtulo EMBED ativar este plug-in. O
Dreamweaver atribuir os valores digitados como propriedades ActiveX aos equivalentes do plug-in do Netscape Navigator. 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.
Orig
determina como o objeto ser alinhado na pgina. Consulte Como alinhar os elementos, na pgina 203, para obter uma descrio de cada opo.
Alinhar
Como inserir mdia
295
Imagem Alt
especica uma imagem a ser exibida, se o navegador no oferecer suporte ao rtulo OBJECT. Esta opo estar disponvel apenas quando a opo Incorporar no estiver selecionada. e Espao H especicam o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do objeto.
Espao V
especica um arquivo de dados a ser carregado pelo controle ActiveX. Muitos controles ActiveX, como o Shockwave e o RealPlayer, no utilizam este parmetro.
Dados Ident. dene o parmetro opcional Ident. do ActiveX. Este parmetro utilizado mais freqentemente para passar informaes entre os controles ActiveX. Bordas
especica a largura da borda ao redor do objeto.
Parmetros abre uma caixa de dilogo na qual podero ser digitados parmetros adicionais, a serem passados ao objeto ActiveX. Consulte Sobre os parmetros, na pgina 297. Muitos controles ActiveX respondem a parmetros especiais.
Como inserir um applet de Java

Java uma linguagem de programao que permite o desenvolvimento de aplicativos pequenos (applets) que podem ser incorporados s pginas da Web. Depois de criar o applet de Java, possvel inseri-lo em um documento HTML atravs do Dreamweaver. O Dreamweaver utiliza o rtulo APPLET para marcar a referncia ao arquivo do applet.
Para inserir um applet de Java: 1
Na janela do documento, coloque o ponto de insero onde deseja inserir o applet. Clique no boto Applet, na paleta de objetos. Na caixa de dilogo que aparecer, selecione um arquivo que contenha o applet de Java.
2 3
Propriedades dos applets de Java

Aps ter inserido um appletde Java, utilize o inspetor de propriedades para denir os parmetros. Para exibir as seguintes propriedades no inspetor de propriedades, selecione um applet de Java. O inspetor de propriedades inicialmente exibir as propriedades mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior direito, para examinar todas as propriedades.
296
Captulo 11
especica um nome que identicar o applet para a criao de roteiros. Digite um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades.
Nome L e U especicam a largura e altura do applet, 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.
especica o arquivo de contedo do applet. Digite um nome de arquivo, ou clique no cone correspondente pasta, para procurar um arquivo.
Cdigo
identica a pasta que contm o applet selecionado. Quando voc escolher um applet, este campo ser preenchido automaticamente.
Base
determina como o objeto ser alinhado na pgina. Consulte Como alinhar os elementos, na pgina 203, para obter uma descrio de cada opo.
Alinhar Alt especica um contedo alternativo (geralmente uma imagem) que ser exibido
se o navegador do usurio no oferecer suporte aos applets de Java ou estiver com o Java desativado. Se voc digitar texto, o Dreamweaver o interpretar atravs da utilizao do atributo ALT do rtulo APPLET. Se voc escolher uma imagem, o Dreamweaver inserir um rtulo IMG entre os rtulos APPLET de abertura e fechamento.
Nota: Para especicar 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 rtulo IMG no inspetor de origem de HTML. Espao V e Espao H especicam o nmero de pixels de espao em branco acima, abaixo e em ambos os lados do applet. Parmetros abre uma caixa de dilogo na qual podem ser digitados parmetros adicionais a serem passados ao applet. Consulte Sobre os parmetros, na pgina 297. Muitos applets respondem a parmetros especiais.
Sobre os parmetros
Utilize a caixa de dilogo Parmetros para digitar valores relacionados aos parmetros especiais denidos para os lmes Shockwave e Flash, controles ActiveX, plug-ins do Netscape Navigator e applets de Java. Consulte a documentao do objeto que estiver utilizando para obter informaes sobre os parmetros que ele requer.
Nota: No h um padro universalmente aceito para identicar os arquivos de dados dos controles ActiveX. Consulte a documentao relativa ao controle ActiveX a ser utilizado, para estabelecer os parmetros a serem empregados.
Como inserir mdia
297
Para abrir a caixa de dilogo Parmetros: 1
Selecione um objeto que possa admitir parmetros (como um lme Shockwave, um controle ActiveX, um plug-in do Navigator ou um applet de Java) na janela do documento. Abra a caixa de dilogo utilizando um dos seguintes mtodos: Clique com o boto direito do mouse (no Windows) ou pressione a tecla Control e clique no objeto (no Macintosh) e, no menu contextual, escolha Parmetros. Abra o inspetor de propriedades, caso ainda esteja fechado, expanda-o clicando na seta de expanso, localizada no canto inferior direito e clique no boto Parmetros.
Para digitar um valor de um parmetro na caixa de dilogo Parmetros: 1 2 3
Clique no boto com o sinal de adio (+). Na coluna Parmetro, digite o nome do parmetro. Na coluna Valor, digite o valor do parmetro.
Para remover os parmetros:
Selecione um parmetro e pressione a tecla Delete.

Para reordenar os parmetros:
Utilize os botes de seta acima e abaixo.
Como utilizar os comportamentos para controlar mdia

possvel adicionar comportamentos pgina, a m de iniciar e interromper diversos objetos de mdia. permite executar, parar, rebobinar ou ir para um quadro de um lme Shockwave ou Flash. Consulte Controlar o Shockwave ou Flash, na pgina 313.
Controlar o Shockwave ou Flash
permite executar um som. Por exemplo: possvel executar um efeito sonoro sempre que o usurio passar o ponteiro do mouse sobre um vnculo. Consulte Executar o som, na pgina 322.
Executar o som
298
Captulo 11
12
CAPTULO 12
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como utilizar os comportamentos
Os comportamentos permitem a interao do usurio com a pgina, a m de alter-la ou executar certas tarefas. Um comportamento uma combinao entre um evento e uma ao. Por exemplo: quando o usurio mover o mouse sobre uma imagem (um evento), esta poder ser realada (uma ao). Uma ao consiste de cdigo previamente escrito em JavaScript, que realiza determinadas tarefas, como a abertura da janela de um navegador, a execuo de um som ou a interrupo de um lme Shockwave. Os eventos so denidos pelos navegadores para cada elemento da pgina; por exemplo: onMouseOver, onMouseOut e onClick so eventos associados a vnculos na maior parte dos navegadores, enquanto que onLoad um evento associado a imagens e ao corpo do documento. Os eventos so gerados pelos navegadores em resposta a aes do usurio; por exemplo: quando um visitante sua pgina mover o ponteiro sobre um vnculo, o navegador gerar um evento onMouseOver e chamar a funo JavaScript (se houver) que tiver sido associada ao evento. Os eventos que podem ser utilizados para disparar uma determinada ao variam de acordo com o navegador utilizado. Ao anexar um comportamento a um elemento da pgina, voc estar especicando uma ao e o evento que a disparar. Diversas aes podem ser disparadas pelo mesmo evento e possvel especicar a ordem na qual as aes ocorrero. O Dreamweaver inclui vrias aes relacionadas a comportamentos; outras aes podem ser encontradas no site do Dreamweaver na Web, assim como em sites de programao de outros fabricantes. Consulte Como descarregar e instalar os comportamentos de outros fabricantes, na pgina 306. Se souber utilizar os recursos JavaScript, voc tambm 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.
299
Como utilizar o inspetor de comportamentos

Utilize o inspetor de comportamentos para anexar comportamentos aos objetos e modicar os parmetros dos comportamentos previamente anexados. Os comportamentos so listados alfabeticamente, segundo os eventos. Se houver diversas aes para o mesmo evento, estas aparecero na ordem na qual sero executadas. Os rtulos selecionados aparecero no alto do inspetor. Para abrir o inspetor de comportamentos, escolha Janela > Comportamentos, ou clique no boto Comportamentos, no Iniciador. exibe uma lista de aes que podem ocorrer. A escolha de uma ao acarretar o aparecimento da caixa de dilogo Parmetros.
Aes (+)
remove uma determinada ao e o evento a ela associado da lista do inspetor de comportamentos.

Excluir ()
especica os navegadores nos quais o comportamento dever funcionar. A seleo feita neste menu determinar os eventos que aparecero no menu pop-up Eventos.
Eventos de Botes de setas acima e abaixo movem a ao selecionada para cima ou para baixo
na lista de comportamentos. As aes sero executadas na ordem especicada.

Eventos exibe todos os eventos que podem disparar a ao. Os eventos que aparecero dependero do objeto selecionado. Se os eventos esperados no aparecerem, certique-se de que o objeto correto esteja selecionado. Utilize o seletor de rtulos, situado no canto inferior esquerdo da janela do documento, para selecionar um rtulo. Nota: O menu pop-up Eventos aparecer apenas aps a seleo de uma ao.
Os diversos navegadores reconhecem de maneira diversa os eventos relacionados aos vrios objetos. Escolha os navegadores nos quais o comportamento dever funcionar, no menu pop-up Eventos de. Apenas os eventos reconhecidos pelos navegadores selecionados aparecero no menu pop-up Eventos.
300
Captulo 12
Sobre os eventos
A lista a seguir descreve os eventos que podem ser vinculados s aes listadas no menu pop-up Aes (+) do inspetor de 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. 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 informaes sobre os navegadores da verso 5.0, consulte a Central de Suporte do Dreamweaver, no endereo http:// www.macromedia.com/support/dreamweaver/. Para obter mais informaes sobre os eventos relacionados ligao de dados e a letreiros no Internet Explorer, consulte a pgina de referncia de Dynamic HTML da Microsoft (listada em Recursos de tecnologias de Web e HTML, na pgina 19). Observe que a maioria dos eventos no se aplicam a todos os objetos. Para obter mais detalhes sobre quais os eventos que se aplicam aos rtulos em cada navegador, consulte os arquivos na pasta Dreamweaver/Conguration/Behaviors/ Events.
onAbort (NS3, NS4, IE4)
gerado quando o usurio interromper a carga de uma imagem no navegador (por exemplo: quando clicar no boto Parar do navegador enquanto a imagem estiver sendo carregada). (IE4) gerado quando um elemento de dados ligados na pgina tiver terminado a atualizao da origem dos dados.
onAfterUpdate
(IE4) 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).
onBeforeUpdate
(NS3, NS4, IE3, IE4) o oposto de onFocus. O evento onBlur gerado quando o elemento especicado deixa de ser o foco da interao com o usurio. Por exemplo: quando um usurio clicar fora de um campo de texto depois de ter clicado nele, o navegador gerar um evento onBlur para o campo de texto.
onBlur
(IE4) gerado quando o contedo de um elemento do letreiro tiver alcanado os limites deste.
onBounce
(NS3, NS4, IE3, IE4) gerado quando o usurio 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.
onChange
301
onClick
(NS3, NS4, IE3, IE4) gerado quando o usurio clicar no elemento especicado, como um vnculo, boto ou mapa de imagens. (Clicar denido como a ao de pressionar e soltar o boto do mouse enquanto se indica um elemento).
onDblClick (NS4, IE4) gerado quando o usurio clicar duas vezes no elemento especicado. (Clicar duas vezes definido como a ao de pressionar rapidamente e soltar o boto do mouse enquanto se indica um elemento).
(NS3, NS4, IE4) gerado quando ocorrer um erro do navegador enquanto uma pgina ou imagem estiver sendo carregada.
onError onFinish (IE4) gerado quando o contedo de um elemento do letreiro tiver concludo um loop. onFocus (NS3, NS4, IE3, IE4) gerado quando o elemento especicado se tornar
o foco da interao com o usurio. Por exemplo: a ao de clicar em um campo de texto de um formulrio gera um evento onFocus. (IE4) gerado quando o usurio clicar no boto Ajuda do navegador ou escolher Ajuda, no menu do navegador.
onHelp
(NS4, IE4) gerado assim que o usurio pressionar qualquer tecla. (No necessrio que o usurio solte a tecla para que este evento seja gerado).
onKeyDown
(NS4, IE4) gerado assim que o usurio pressionar e soltar qualquer tecla; este evento equivale combinao dos eventos onKeyDown e onKeyUp.
onKeyPress
(NS4, IE4) gerado assim que o usurio soltar uma tecla aps t-la pressionado.
onKeyUp
(NS3, NS4, IE3, IE4) gerado quando uma imagem ou pgina tiver terminado de ser carregada.
onLoad onMouseDown
(NS4, IE4) gerado quando o usurio pressionar o boto do mouse. (No necessrio que o usurio solte o boto do mouse para que este evento seja gerado).
(IE3, IE4) gerado quando o usurio mover o mouse enquanto indica o elemento especicado. Ou seja, o ponteiro permanece dentro dos limites do elemento.
onMouseMove onMouseOut (NS3, NS4, IE4) gerado quando o ponteiro se afastar do elemento
especicado. Em geral, o elemento especicado um vnculo. (NS3, NS4, IE3, IE4) gerado quando o mouse for inicialmente movido para indicar o elemento especicado. Ou seja, quando o ponteiro passa a indicar o elemento. Em geral, o elemento especicado para este evento um vnculo.
onMouseOver
302
Captulo 12
onMouseUp onMove
(NS4, IE4) gerado quando o boto do mouse for solto.
(NS4) gerado quando uma janela ou moldura for movida.
(IE4) gerado quando o estado do elemento especicado for alterado. Os estados do elemento podem ser no inicializado, carregando e concludo.
onReadyStateChange onReset (NS3, NS4, IE3, IE4) gerado quando um formulrio for redenido aos
seus valores padro.

onResize (NS4, IE4) gerado quando o usurio redimensionar a janela do navegador ou uma moldura. onRowEnter (IE4) gerado quando o ponteiro de registro da origem dos dados ligados tiver sido alterado.
(IE4) gerado quando o ponteiro de registro da origem dos dados ligados estiver prestes a ser alterado.
onRowExit onScroll (IE4)
gerado quando o usurio rolar para cima ou para baixo na pgina.
onSelect (NS3, NS4, IE3, IE4) gerado quando o usurio selecionar texto em um
campo de texto.
onStart (IE4)
gerado quando o contedo de um elemento do letreiro iniciar um
loop.
onSubmit (NS3, NS4, IE3, IE4) gerado quando o usurio enviar um formulrio. onUnload
(NS3, NS4, IE3, IE4) gerado quando o usurio deixar a pgina.
Como anexar um comportamento

possvel anexar comportamentos ao documento inteiro (ou seja, ao rtulo BODY) ou aos vnculos, imagens, elementos de formulrios ou qualquer um dos vrios elementos HTML. O navegador determinar os elementos que podero aceitar comportamentos. O Internet Explorer 4.0, por exemplo, dispe de um conjunto muito maior de eventos para cada elemento do que o Netscape Navigator 4.0 ou qualquer navegador da verso 3.0. possvel especicar mais de uma ao por evento. As aes ocorrem na ordem em que aparecem na lista da coluna Aes do inspetor de comportamentos. Para obter mais informaes sobre como alterar a ordem das aes, consulte Como alterar um comportamento, na pgina 305.
303
Para anexar um comportamento: 1
Selecione um objeto. Para anexar um comportamento pgina inteira, clique no rtulo <body>, no seletor de rtulos situado no canto inferior esquerdo da janela do documento.
Escolha Janela > Comportamentos, para abrir o inspetor de comportamentos, ou clique no boto Comportamentos, no Iniciador. O rtulo HTML do objeto selecionado aparecer na barra de ttulo do inspetor de comportamentos.
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 porque no funcionaro no documento selecionado. Por exemplo: a ao Executar a linha de tempo estar esmaecida se o documento no possuir linhas de tempo. Se no houver qualquer evento disponvel para o objeto selecionado, todas as aes estaro esmaecidas. Aparecer uma caixa de dilogo com os parmetros e instrues relativos 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 307.
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. Os eventos que aparecero no menu pop-up Eventos dependero do objeto selecionado e dos navegadores especicados neste menu. 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 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 vnculos. Se voc escolher um deles, o Dreamweaver colocar um rtulo A em volta da imagem, a m de denir um vnculo ctcio. O vnculo ctcio ser representado por um sinal de nmero (#) na caixa Vnculo, do inspetor de propriedades. possvel alterar o valor do vnculo se desejar torn-lo um vnculo real a outra pgina, porm, se o sinal de nmero for excludo e no for substitudo por outro vnculo, o comportamento ser removido.
304
Captulo 12
Como anexar um comportamento a uma linha de tempo

Coloque comportamentos em linhas de tempo, para que sejam desencadeados em um determinado quadro da linha de tempo. Para obter mais informaes sobre a criao de linhas de tempo, consulte Sobre as linhas de tempo, na pgina 253.
Para colocar um comportamento em uma linha de tempo: 1
Clique duas vezes em um quadro do canal Comportamento, no inspetor de linhas de tempo. Utilize o inspetor de comportamentos para denir o comportamento.
Apenas um tipo de evento pode desencadear uma ao em uma linha de tempo: a animao que atinge um determinado quadro (um evento onFrame7, por exemplo). Alm dos objetos de uma linha de tempo, o comportamento pode afetar qualquer objeto na pgina. Visualize a linha de tempo em um navegador, para examinar o funcionamento do comportamento. No possvel visualizar os comportamentos no Dreamweaver.
Como alterar um comportamento

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

As aes so elementos de JavaScript. Se estiver bastante familiarizado com JavaScript, voc poder escrever novas aes e faz-las aparecer no menu pop-up Aes, no inspetor de comportamentos. Para obter mais informaes, consulte Extenso dos recursos do Dreamweaver.
Como descarregar e instalar os comportamentos de outros fabricantes

Um dos aspectos mais teis do Dreamweaver a possibilidade de estender os seus recursos ou seja, ele oferece aos usurios que j esto familiarizados com JavaScript a oportunidade de escrever os seus prprios objetos, comportamentos, comandos e inspetores de propriedades. Muitos destes usurios optaram por compartilhar os resultados de seus esforos de programao com outros usurios, ao enviar os seus arquivos ao site do Dreamweaver na Web. Para descarregar estes arquivos de extenso, abra o inspetor de comportamentos e, no menu pop-up Aes (+), escolha Obter mais comportamentos.
Para instalar um comportamento descarregado de outros fabricantes na sua cpia do Dreamweaver: 1
Extraia os arquivos de comportamento do arquivo descarregado com uma ferramenta de descompactao de arquivos. Por exemplo: o WinZip (no Windows) ou o ZipIt (no Macintosh) podem abrir os arquivos .zip que se encontram disponveis no Centro de recursos on-line.
Arraste os arquivos extrados at a pasta Conguration/Behaviors/Actions, localizada na pasta do aplicativo do Dreamweaver. Reinicie o Dreamweaver.
306
Captulo 12
Como utilizar as aes de comportamentos enviadas com o Dreamweaver

As aes de comportamentos enviadas com o Dreamweaver foram criadas para que funcionem com todos os navegadores da verso 4.0 e no Internet Explorer 5 (o Netscape Navigator 5 ainda no havia sido lanado quando este manual foi escrito). Algumas aes, no entanto, no funcionam nos navegadores mais antigos. Consulte a tabela a seguir para obter mais detalhes sobre o modo de funcionamento das aes em determinados navegadores anteriores verso 4.0. Para obter uma explicao sobre como cada ao funciona e como escolher as opes associadas a ela, examine os tpicos abaixo da tabela.
No Macintosh Ao Chamar o JavaScript Alterar a propriedade Verificar o navegador Verificar o plugin Controlar o Shockwave ou Flash Arrastar a camada Ir para a URL Menu de salto Opo Ir do menu de salto Netscape Navigator 3.0 OK OK 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 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 OK OK OK
Falha sem provocar erros OK OK OK OK OK OK
Abrir a janela do OK navegador Executar o som OK
Mensagem pop- OK up
307
No Macintosh Ao Pr-carregar as imagens 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 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 Internet Explorer 3.01 Falha sem provocar erros Falha sem provocar erros OK Falha sem provocar erros OK
Definir a imagem OK da barra de navegao Definir o texto da moldura Definir o texto da camada Definir a mensagem de status Definir o texto do campo de texto Mostrar/ocultar as camadas Permutar a imagem Restaurar a imagem permutada OK Falha sem provocar erros OK
OK Falha sem provocar erros OK
OK
OK
OK
Falha sem provocar erros OK OK
Falha sem provocar erros OK OK
Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros Falha sem provocar erros
Ir para o quadro A animao da da linha de origem da tempo imagem e a chamada do comportament Executar a linha o funcionam, de tempo e Parar porm a a linha de tempo animao da camada falha sem provocar erros. Validar o formulrio OK
A animao da origem da imagem e a chamada do comportament o funcionam, porm a animao da camada falha sem provocar erros. OK
Falha sem provocar erros
OK
308
Captulo 12
Chamar o JavaScript A ao Chamar o JavaScript permite utilizar o inspetor de comportamentos para especicar a execuo de uma funo ou linha de cdigo personalizada de JavaScript quando ocorrer um evento.
Para poder utilizar a ao Chamar o JavaScript: 1 2
Selecione um objeto e abra o inspetor de 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).
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 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 do 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 inspetor de 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.
309
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 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).
6 7
Digite o novo valor da propriedade, no campo Novo valor, e clique em OK. 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 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 eles estiverem utilizando a verso 4.0 ou mais avanada do Microsoft Internet Explorer 4.0 ou por mant-los na mesma pgina, se eles estiverem utilizando qualquer outro navegador. til anexar este comportamento ao rtulo BODY de uma pgina que seja compatvel com praticamente qualquer navegador (e que no utilize outros 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 vnculo nulo (um rtulo A), de forma que a ao determinasse o destino do vnculo, com base na marca e verso do navegador do visitante.
310
Captulo 12
Para poder utilizar a ao Verificar o navegador: 1 2
Selecione um objeto e abra o inspetor de 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 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. 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 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. 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.
6 7
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.
10
311
11
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 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.
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 eles no o possurem.
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 de VBScript apropriado pgina, a m de detectar os plug-ins no IE do Windows. Para poder utilizar a ao Verificar o plug-in: 1 2
Selecione um objeto e abra o inspetor de comportamentos. Clique no boto com o sinal de adio (+) e escolha Vericar o plug-in, no menu pop-up Aes. No menu pop-up Plug-in, escolha um plug-in, ou clique em 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 usurios que contam com o plug-in. Se especicar uma URL remota, digite tambm o prexo http:// no endereo. Para garantir que os usurios 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 usurios que no contam com o plug-in. Para garantir que os usurios sem o plug-in permanecero na mesma pgina, deixe este campo em branco.
312
Captulo 12
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 usurio ser enviado para a URL listada no campo Caso contrrio. Para, em vez disso, enviar o usurio 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 usurio 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 usurios que no dispem do plug-in recebero uma noticao do navegador para que descarreguem o 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 plug-ins.
7 8
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: 1
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 mais esquerda. necessrio dar um nome ao lme, para poder anexar a ao Controlar o Shockwave ou Flash. Com o lme selecionado na janela do documento, abra o inspetor de comportamentos. Clique no boto com o sinal de adio (+) e escolha Controlar o Shockwave ou Flash, no menu pop-up Aes. Escolha um lme no menu pop-up Objeto Shockwave. O Dreamweaver automaticamente listar todos os arquivos terminando em .dcr, .dir, .swf ou .spl que estiverem contidos nos rtulos OBJECT ou EMBED do documento.
313
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 atual. 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 Eventos de.
7 8
Arrastar a camada A ao Arrastar a camada permite ao usurio 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 usurio 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 usurio, certique-se de que o evento que disparar a ao ocorrer antes que o usurio 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 vnculo 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: 1
Escolha Inserir > Camada, ou clique no boto Camada, situado na paleta de objetos, e desenhe uma camada na janela do documento. Desmarque a camada, clicando em outro local da janela do documento. Abra o inspetor de 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 rtulo BODY ou um vnculo (rtulo A) ou, no menu pop-up Eventos de, altere o navegador de destino para IE 4.0.
2 3 4
314
Captulo 12
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.
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 usurio 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 usurio dever se aproximar para a camada se encaixar no destino. Quanto maior o valor, mais fcil ser para o usurio 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 est sendo arrastada e disparar uma ao quando a camada for solta, clique na guia Avanado. Para especicar se o usurio 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 usurio clicar em qualquer ponto da camada para poder arrast-la.
11
315
12
Escolha qualquer opo Enquanto arrasta que desejar utilizar: Selecione Trazer a camada para frente, se preferir que a camada seja transferida para a frente da ordem de empilhamento enquanto for arrastada. Se selecionar esta opo, utilize o menu pop-up para optar por deixar a camada na frente ou restaur-la sua posio original na ordem de empilhamento. Digite um cdigo JavaScript ou um nome de funo (monitorLayer(), por exemplo) no campo Chamar JavaScript, a m de executar repetidamente o cdigo ou funo enquanto a camada for arrastada. Por exemplo: grave uma funo que monitore as coordenadas da camada e exiba indicaes como voc est prximo ou muito distante do destino de soltura em um campo de texto. Consulte Como reunir informaes sobre a camada arrastvel, na pgina 317.
13
Digite um cdigo JavaScript ou um nome de funo (evaluateLayerPos(), por exemplo) no segundo campo Chamar o JavaScript, a m de executar o cdigo ou funo quando a camada for solta. Selecione Apenas se estiver encaixada, nos casos em que o JavaScript for executado apenas se a camada tiver alcanado o destino de soltura. Clique em OK. Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos desejados no estiverem listados, altere o navegador de destino no menu popup 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.
316
Captulo 12
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 horizontal e vertical da camada e se a camada atingiu o destino de soltura. Por exemplo: a funo a seguir exibe o valor da propriedadeMM_UPDOWN (a posio vertical da camada) em um campo de formulrio denominado curPosField. Os campos de formulrio so teis para exibir informaes atualizadas continuamente, pois so dinmicos 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 usurio 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 usurio 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 vnculos 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 usurio passe o ponteiro do mouse sobre as peas j encaixadas enquanto posiciona outras. 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).
317
Para evitar o novo registro de camadas j encaixadas: 1 2 3 4
Escolha Editar > Localizar. No menu pop-up Localizar, escolha Origem de HTML. Digite (!curDrag)no campo de texto adjacente. 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 no inspetor de HTML, 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 a 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 inspetor de 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.
318
Captulo 12
5 6 7
Repita as etapas 3 e 4, para abrir outros documentos em outras molduras. 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 pop-up Eventos de. Menu de salto Quando for criado um menu de salto atravs do menu Inserir > Objeto de formulrio > Menu de salto, o Dreamweaver criar um objeto de menu e anexar o comportamento apropriado a ele. Em geral, no necessrio anexar manualmente a ao Menu de salto a um objeto. Em vez disso, clique duas vezes em uma ao Menu de salto, j existente no inspetor de comportamentos, para editar um menu de salto, alterar o local no qual o arquivo vinculado ser aberto, adicionar ou alterar um aviso de seleo no menu. Para obter mais informaes sobre a criao de um menu de salto, consulte Como inserir um menu de salto, na pgina 122.
Para editar um menu de salto utilizando o inspetor de comportamentos: 1 2 3 4
Crie um objeto menu de salto, se j no houver algum no documento. Selecione o objeto menu de salto e abra o inspetor de comportamentos. Na coluna Aes, clique duas vezes em Menu de salto. Na caixa de dilogo Menu de salto, edite os itens do menu e, em seguida, clique em OK.
Ao Ir do menu de salto A ao 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 vnculo 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 usurio escolher o mesmo item que j estiver escolhido no menu de salto, este no ocorrer. O boto Ir til quando for bvio para os visitantes que a escolha da mesma opo do menu de salto no acarretar o salto. Em particular, adicione um boto Ir a um menu de salto quando este aparecer em uma moldura, e os itens do menu de salto se vincularem a outras pginas de outras molduras que apresentarem vnculos adicionais.
319
Para poder utilizar a ao Ir do menu de salto: 1
Selecione um objeto a ser utilizado como boto Ir (geralmente uma imagem de boto) e abra o inspetor de 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). 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 inspetor de 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.
320
Captulo 12
Dena qualquer uma das seguintes opes:

Largura da janela Altura da janela
especica a largura da janela, em pixels.
especica a altura da janela, em pixels.
Barra de ferramentas de navegao a linha de botes do navegador que inclui Voltar, Avanar, Origem e Recarregar. Barra de ferramentas de localizao
a linha de opes do navegador que
incluem o campo de localizao.

Barra de status a rea situada na parte inferior da janela do navegador, na qual so exibidas as mensagens (como o tempo de carga restante e as URLs associadas aos vnculos).
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 o usurio possa 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 Barras de rolagem, se necessrias
especica o aparecimento das barras de rolagem, 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 usurio no poder exibir o contedo que ultrapassar o tamanho original da janela.
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 Nome da janela o nome da nova janela. D um nome nova janela, se desejar atribuir vnculos a ela ou control-la com JavaScript. 5 6
321
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 vnculo ou executar um clipe de msica quando a pgina for carregada.
Nota: possvel que os navegadores exijam algum tipo de suporte de udio (como um plug-in de udio) para que possam executar sons. Para poder utilizar a ao Executar o som: 1 2
Selecione um objeto e abra o inspetor de 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 Eventos de.
4 5
Mensagem pop-up A ao Mensagem pop-up exibe um alerta em JavaScript com a mensagem por voc especicada. Como os alertas em JavaScript possuem apenas um boto (OK), utilize esta ao para fornecer informaes ao usurio, em vez de apresentar-lhe uma opo. possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade, varivel global ou outra expresso no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o por uma barra invertida (\{).
Exemplo A URL desta pgina {window.location}, e hoje {new Date()}. Para poder utilizar a ao Mensagem pop-up: 1 2
Selecione um objeto e abra o inspetor de 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.
3 4
322
Captulo 12
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 Eventos de.
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 pela descarga 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 inspetor de comportamentos. Clique no boto com o sinal de adio (+) e escolha Pr-carregar as imagens, no menu pop-up Aes. Clique em Procurar, para selecionar o arquivo de imagem a ser pr-carregado, ou digite o caminho e nome do arquivo de imagem no campo Arquivo de origem da imagem. Clique no boto com o sinal de adio (+), situado no alto da caixa de dilogo, para adicionar a imagem lista Pr-carregar as imagens.
Nota: Se voc no clicar no boto com o sinal de adio antes de digitar a prxima imagem, a imagem escolhida na lista ser substituda pela prxima imagem escolhida.
Para todas as imagens restantes a serem pr-carregadas na pgina, repita as etapas 3 e 4. 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 Eventos de.
7 8
323
Definir a imagem da barra de navegao Utilize a 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 125. 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: 1
Selecione a imagem da barra de navegao a ser editada e abra o inspetor de comportamentos. Na coluna Aes do inspetor de comportamentos, clique duas vezes na ao Denir a imagem da barra de navegao associada ao evento que estiver alterando. Na guia Bsico da caixa de dilogo Denir a imagem da barra de navegao, selecione as opes de edio de imagens.
Para definir diversas imagens para um boto da barra de navegao: 1
Selecione a imagem da barra de navegao a ser editada e abra o inspetor de comportamentos. Na coluna Aes do inspetor de 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. No menu pop-up Quando o elemento estiver sendo exibido, escolha um estado para a imagem. Escolha Imagem inativa, se desejar alterar a exibio de uma outra imagem depois que um usurio tiver clicado na imagem selecionada. Escolha Imagem sobreposta ou Imagem sobreposta enquanto estiver inativa, se desejar alterar a exibio de uma outra imagem quando o ponteiro estiver sobre a imagem selecionada.
324
Captulo 12
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 do 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 A URL desta pgina {window.location}, e hoje {new Date()}. Para criar um conjunto de molduras:
Escolha Modicar > Conjunto de molduras > Dividir a moldura para a esquerda, para a direita, para cima ou para baixo. Para obter mais informaes, consulte Como criar as molduras, na pgina 266.
Para poder utilizar a ao Definir o texto da moldura: 1 2
Selecione um objeto e abra o inspetor de 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 HTML e a formatao da moldura. Digite uma mensagem no campo Novo HTML e, em seguida, clique em OK.
325
Verique se o evento padro corresponde ao desejado. Se no corresponder, escolha um outro evento no menu pop-up. Se eventos desejados no forem exibidos, altere o navegador de destino no menu pop-up Eventos de.
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 de origem de 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 rtulos 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 A URL desta pgina {window.location}, e hoje {new Date()}. Para criar uma camada: 1
Escolha Inserir > Camada. Para obter mais informaes, consulte Como criar as camadas, na pgina 236.
No inspetor de propriedades, digite um nome para a camada.
Para anexar uma ao Definir o texto da camada: 1 2
Selecione um objeto e abra o inspetor de 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 eventos desejados no forem exibidos, altere o navegador de destino no menu pop-up Eventos de.
4 5
326
Captulo 12
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 vnculo 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. possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade, varivel global ou outra expresso no texto. Para incorporar uma expresso JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o por uma barra invertida (\{).
Exemplo A URL desta pgina {window.location}, e hoje {new Date()}. Para poder utilizar a ao Definir a mensagem de status: 1 2
Selecione um objeto e abra o inspetor de 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.
4 5
327
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 A URL desta pgina {window.location}, e hoje {new Date()}. Para criar um campo de texto com nome: 1
Escolha Inserir > Objeto de formulrio > Campo de texto. Para obter mais informaes, consulte Como criar formulrios, na pgina 381.
No inspetor de propriedades, digite um nome para o campo de texto. Certique-se de que o nome seja exclusivo pgina (no utilize o mesmo nome para diversos elementos na mesma pgina, mesmo se estiverem em formulrios diferentes).
Para poder utilizar a ao Definir o texto do campo de texto: 1 2
Selecione um campo de texto e abra o inspetor de 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 eventos desejados no forem exibidos, altere o navegador de destino no menu pop-up Eventos de.
4 5
328
Captulo 12
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: 1
Escolha Inserir > Camada, ou clique no boto Camada, situado na paleta de 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 inspetor de 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 rtulo BODY ou um vnculo (rtulo A) ou, no menu pop-up 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. 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 Eventos de.
7 8
329
Quando forem exibidas em uma janela do Netscape Navigator, possvel que as camadas se contraiam, 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: 1
Clique no boto Camada, situado na paleta de objetos, e desenhe uma camada grande na janela do documento. Certique-se de que a camada cubra todo o contedo da pgina. Na paleta de 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. Nomeie a camada carregando no campo de texto mais esquerda, no inspetor de propriedades. Mantendo a camada selecionada, dena, no inspetor de propriedades, a cor do 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 usurio informado sobre o que est ocorrendo, para que ele no pense que a pgina no possui um contedo.
Clique no rtulo <body> no seletor de rtulos, situado no canto inferior esquerdo da janela do documento.
330
Captulo 12
No menu pop-up Aes do inspetor de comportamentos, escolha Mostrar/ ocultar as camadas. Na lista Camadas com nome, selecione a camada denominada carregando Clique em Ocultar. Clique em OK.
8 9 10
Permutar a imagem A ao Permutar a imagem troca uma imagem por outra, alterando o atributo SRC do rtulo 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 esta ao, certique-se de que a imagem permutada tenha as mesmas dimenses (altura e largura) que a original, a m de evitar distores. Para poder utilizar a ao Permutar a imagem: 1
Escolha Inserir > Imagem, ou clique no boto Imagem, situado na paleta de 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 inspetor de 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. 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.
6 7
331
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 pela descarga quando as imagens tiverem que ser exibidas.
10 11
Restaurar a imagem permutada A ao Restaurar a imagem permutada restaura o ltimo conjunto de imagens permutadas aos seus arquivos de origem anteriores. Esta ao adicionada automaticamente, sempre que voc anexar a ao Permutar a imagem a um objeto; no ser necessrio selecion-la manualmente se tiver deixado a opo Restaurar selecionada 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 inspetor de linhas de tempo, para que certas partes da linha de tempo sejam repetidas o nmero de vezes especicado, para criar um vnculo 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: 1
Escolha Janela > Linha de tempo, para abrir o inspetor de linhas de tempo e se certicar que o documento contm uma linha de tempo. Se no houver barras de animao roxas no inspetor de linhas de tempo, o documento no contm uma linha de tempo. Consulte Como criar uma animao de linha de tempo, na pgina 255.
Selecione um objeto. Para anexar o comportamento a um quadro da linha de tempo, clique no canal Comportamento no quadro desejado.
3 4
Abra o inspetor de 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. Selecione uma linha de tempo, no menu pop-up Linha de tempo. Digite um nmero de quadro no campo Ir para o quadro.
5 6
332
Captulo 12
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.
8 9
Executar a linha de tempo e Parar a linha de tempo Utilize as aes Executar a linha de tempo e Parar a linha de tempo, para permitir que o usurio inicie ou pare uma linha de tempo ao clicar em um vnculo ou boto ou inicie ou pare uma linha de tempo automaticamente ao passar o cursor sobre um vnculo, imagem ou outro objeto. A ao Executar a linha de tempo ser automaticamente anexada ao rtulo BODY com o evento onLoad quando for selecionada a opo Execuo automtica, no inspetor de linhas de tempo.
Para poder utilizar as aes Executar a linha de tempo e Parar a linha de tempo: 1
Escolha Janela > Linha de tempo, para abrir o inspetor de linhas de tempo e se certicar que o documento contm uma linha de tempo. Se no houver barras de animao roxas no inspetor de linhas de tempo, o documento no contm uma linha de tempo. Consulte Como criar uma animao de linha de tempo, na pgina 255.
2 3
Selecione um objeto e abra o inspetor de 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. 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 Eventos de.
5 6
333
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 do formulrio 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 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: 1
Escolha Inserir > Formulrio, ou clique no boto Formulrio, situado na paleta de objetos, para inserir um formulrio. Escolha Inserir > Objeto de formulrio > Campo de texto, ou clique no boto Campo de texto, situado na paleta de objetos, para inserir um campo de texto. Repita esta etapa para inserir outros campos de texto. Siga um dos procedimentos abaixo: Para validar determinados campos medida que o usurio estiver preenchendo o formulrio, selecione um campo de texto e escolha Janela > Comportamentos. Para validar vrios campos quando o usurio enviar o formulrio, clique no rtulo <form> no seletor de rtulos, 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: Se estiver validando determinados campos, selecione o mesmo campo que tiver selecionado na janela do documento, na lista Campos com nome. Se estiver validando vrios campos, selecione um campo de texto na lista Campos com nome.
Selecione a opo apropriada, se o campo se destinar a receber dados.
334
Captulo 12
Escolha uma dentre as seguintes opes Aceitar: Utilize a opo Qualquer item, se o campo for necessrio, porm no precisar conter um determinado tipo de dados. Esta opo no ter signicado (ela equivale ausncia, no campo, da ao Validar o formulrio) se a opo Necessrio no estiver selecionada. Utilize a opo Endereo eletrnico, para vericar se o campo contm um sinal de @. Utilize a opo Nmero, para vericar se o campo contm apenas numerais. Utilize a opo Nmero de, para vericar se o campo contm apenas um nmero em uma faixa especca.
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 de qualquer maneira o contedo do campo. O evento onBlur prefervel quando voc tiver especicado que o campo necessrio.
335
Como atualizar um comportamento

Se as suas pginas contiverem comportamentos que tiverem sido criados com uma verso mais antiga do Dreamweaver, esses comportamentos no sero atualizados automaticamente quando as pginas forem abertas na verso atual do Dreamweaver. Entretanto, quando voc atualizar uma ocorrncia de um comportamento em uma pgina, todas as outras ocorrncias do comportamento na pgina tambm sero atualizadas.
Para atualizar um comportamento em uma pgina: 1 2 3 4
Selecione um elemento ao qual foi anexado o comportamento. Abra o inspetor de comportamentos. Clique duas vezes no comportamento. Clique em OK na caixa de dilogo do comportamento.
Todas as ocorrncias desse comportamento na pgina sero atualizadas.
336
Captulo 12
13
CAPTULO 13
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como editar o HTML
O Dreamweaver fornece interfaces grcas para criar e editar arquivos HTML. Contudo, s vezes, voc precisar ter acesso direto ao cdigo HTML subjacente. O Dreamweaver fornece este acesso atravs do inspetor de origem de HTML (consulte Como utilizar o inspetor de origem de HTML, na pgina 339) e do Quick Tag Editor (consulte Como editar um rtulo HTML na janela do documento, na pgina 340). O Dreamweaver oferece tambm modos teis de manusear os arquivos HTML criados com outros programas. Com o Roundtrip HTML, voc pode ter certeza de que o Dreamweaver no modicar o cdigo HTML que voc criou, a menos que instrua o programa para isso; podem ser denidas vrias opes para o que o Dreamweaver dever ou no regravar (consulte Como denir as preferncias de formato HTML, na pgina 346). Por outro lado, o Dreamweaver pode limpar o HTML desordenado e desnecessrio de acordo com a sua convenincia, utilizando os recursos Limpar o HTML e Limpar o HTML do Word consulte Limpar o HTML, na pgina 350 e Limpar o HTML do Microsoft Word, na pgina 352.
337
Sobre o Roundtrip HTML

O Roundtrip HTML uma ferramenta exclusiva do Dreamweaver, que permite mover os documentos entre o Dreamweaver e um editor de HTML com base em texto, com pouco ou nenhum impacto sobre o contedo e a estrutura do cdigo de origem de HTML original do documento. O Dreamweaver manter e interpretar alguns HTML tecnicamente invlidos (por exemplo: um rtulo FONT em volta de vrios rtulos P), se esse cdigo receber suporte dos navegadores. Contudo, o cdigo de origem de HTML que tiver sido gerado pelo Dreamweaver durante a edio grca sempre tecnicamente vlido. Abaixo, esto os recursos principais do Roundtrip HTML: Como padro, o Dreamweaver regravar os ttulos sobrepostos, fechar os rtulos que esto indevidamente abertos e remover os rtulos de nalizao adicionais quando voc retornar ao Dreamweaver de um editor de HTML externo ou abrir um documento HTML j existente. Para que o Dreamweaver no regrave qualquer origem de HTML, escolha Editar > Preferncias e, em seguida selecione Regravao de HTML, para desativar esse comando. Consulte Como denir as preferncias de regravao de HTML, na pgina 346. O Dreamweaver exibe os marcadores na janela do documento para um HTML invlido ao qual no oferea suporte. Os rtulos invlidos so realados em amarelo. Quando um rtulo invlido for selecionado, o Dreamweaver informar como corrigir o erro no inspetor de propriedades. Caso seja desativada a regravao de HTML, qualquer HTML que o Dreamweaver regravasse seria exibido como invlido. O Dreamweaver no alterar os rtulos no-reconhecidos incluindo XML porque no dispe de um critrio para distinguir se eles so vlidos ou invlidos. Se um rtulo no-reconhecvel se sobrepuser a um outro vlido, o Dreamweaver poder marc-lo como incorreto, mas no regravar o cdigo. Por exemplo: o rtulo personalizado, abaixo, seria marcado como incorreto: <MyNewTag>text</MyNewTag> . O Dreamweaver no altera os rtulos Cold Fusion Markup Language (CFML) ou Microsoft Active Server Page (ASP), e exibe cones para identicar blocos de cdigo CFML ou ASP na janela do documento, quando for possvel. Consulte Como editar os arquivos ColdFusion e Active Server no Dreamweaver, na pgina 356. O Dreamweaver permite iniciar um editor de HTML com base em texto para editar o documento. O Dreamweaver integrado ao HomeSite (no Windows) e BBEdit (no Macintosh). Consulte Como utilizar os editores de HTML externos, na pgina 354.
338
Captulo 13
Como utilizar o inspetor de origem de HTML

O inspetor de origem de HTML exibe o cdigo de origem de HTML do documento. Os rtulos so codicados por cores nas denies de preferncias. Consulte Como denir as preferncias de cores HTML, na pgina 349. Quando o contedo em uma janela do documento for adicionado ou alterado, o Dreamweaver exibir imediatamente essas modicaes no inspetor de origem de HTML. Isso torna o inspetor de origem de HTML uma ferramenta til para aprender a linguagem HTML, caso voc ainda no a conhea, ou como lembrete da sintaxe adequada ou dos valores de rtulos e atributos especcos. As alteraes feitas no inspetor de origem de HTML aparecero na janela do documento apenas quando voc clicar fora do inspetor. O Dreamweaver nunca regrava o HTML digitado diretamente no inspetor de origem de HTML; se for especicado aqui um HTML invlido, o Dreamweaver realar os rtulos como invlidos quando o usurio clicar na janela do documento.
Para abrir o inspetor de origem de HTML, siga um dos procedimentos abaixo:
Escolha Janela > Origem de HTML. Clique no cone do inspetor de origem de HTML, no Iniciador ou no Miniiniciador (no canto inferior direito da janela do documento). Pressione a tecla F10.
No inspetor de origem de HTML, possvel ativar ou desativar a quebra automtica de linha, selecionando ou desmarcando a opo Quebra autom. de linha. Observe que a ativao de quebras automticas de linha no as insere no cdigo HTML, apenas exibe as linhas como se estivessem quebradas para facilitar a visualizao. Voc tambm pode optar por exibir ou no os nmeros das linhas, selecionando ou desmarcando a opo Nmeros de linhas.
Como editar o HTML
339
Para iniciar um editor de HTML externo, clique no boto Editor externo. Caso ainda no tenha sido escolhido um editor de HTML externo, necessrio escolher primeiro Editar > Preferncias e, em seguida, selecionar a categoria Editores externos e escolher um deles. Para obter mais informaes, consulte Como utilizar os editores de HTML externos, na pgina 354.
Para alternar entre a janela do documento e o inspetor de origem de HTML:
Pressione as teclas Control e Tab (no Windows e no Macintosh).
Como editar um rtulo HTML na janela do documento

Utilize o Quick Tag Editor para vericar e editar rapidamente a origem de HTML de um nico rtulo na janela do documento, sem ter de alternar para o inspetor de origem de HTML e voltar. A maneira mais fcil de abrir o Quick Tag Editor pressionando as teclas Control e T (no Windows), ou Command e T (no Macintosh). O Quick Tag Editor apresenta os trs modos seguintes: Inserir o HTML, utilizado para incluir o novo cdigo HTML Editar o rtulo, utilizado para editar um rtulo existente Colocar o rtulo ao redor, utilizado para envolver com um novo rtulo a seleo Na janela do documento, a seleo determinar o modo padro de abertura do Quick Tag Editor.
Nota: Quando o Quick Tag Editor estiver aberto, possvel alternar entre os modos com o mesmo atalho de teclado que tiver sido utilizado para abri-lo.
Nos trs modos, a operao bsica do Quick Tag Editor a mesma: abra o editor, digite ou edite os rtulos e atributos e, em seguida, feche-o. A diferena entre os modos est no que o Dreamweaver far com os rtulos, aps a edio. Para obter detalhes sobre os modos, consulte Sobre o modo Inserir o HTML, na pgina 344, Sobre o modo Editar o rtulo, na pgina 344 e Sobre o modo Colocar o rtulo ao redor, na pgina 344.
Nota: Quando o Quick Tag Editor estiver em exibio, em qualquer modo, possvel arrastar a ala do editor (onde aparece o nome do modo), para mover o editor em volta dos rtulos.
Para executar uma edio de HTML mais extensa, utilize o inspetor de origem de HTML.
340
Captulo 13
Para inserir ou editar os rtulos e atributos no Quick Tag Editor: 1
Siga um dos procedimentos abaixo: Selecione um objeto, algum texto ou um rtulo. Clique na janela do documento, para colocar o ponto de insero sem fazer qualquer seleo.
Pressione as teclas Control e T (no Windows), ou as teclas Command e T (no Macintosh), ou clique no boto Quick Tag Editor, no inspetor de propriedades. O Quick Tag Editor ser aberto no modo adequado, dependendo da seleo atual.
No modo Inserir o HTML ou Colocar o rtulo ao redor, digite um rtulo HTML; no modo Editar o rtulo, possvel digitar novos atributos, editar os atributos existentes ou o nome do rtulo.
3
Para editar os nomes ou valores dos atributos existentes (ou editar o nome do rtulo), pressione a tecla Tab, para mover-se de um item para o prximo, at selecionar o atributo (ou rtulo) que ser editado. Pressione as teclas Shift e Tab, para voltar ao nome do atributo, valor do atributo ou nome do rtulo anterior.
Como editar o HTML
341
Caso voc interrompa a edio de um nome de atributo durante alguns segundos, aparecer um menu suspenso de sugestes, com uma lista de todos os atributos vlidos para o rtulo que estiver sendo editado. Se o Dreamweaver no reconhecer o rtulo que estiver sendo editado, o menu de sugestes conter todos os atributos que o Dreamweaver reconhece para qualquer rtulo. A lista de sugestes no aparecer se for cancelada a seleo de Ativar a sugesto de rtulos, no painel do Quick Tag Editor da caixa de dilogo Preferncias. Controle o menu de sugestes das seguintes maneiras: Quando voc comear a digitar um nome de atributo, o menu de sugestes ser rolado, realando o primeiro nome de atributo iniciado com as letras inseridas. Para mover o realce para cima ou para baixo no menu, utilize as teclas de seta para cima e para baixo, ou a barra de rolagem. Para escolher o nome de atributo realado, pressione a tecla Enter (no Windows), ou Return (no Macintosh); o nome realado ser inserido no Quick Tag Editor. Uma alternativa clicar duas vezes em um nome de atributo, no menu, para inseri-lo. 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 rtulo, aparecer um menu suspenso de sugestes semelhante, com uma lista de nomes de rtulos, em vez de nomes de atributos.
No modo Editar o rtulo, se voc zer uma alterao e depois pressionar a tecla Tab ou as teclas Shift e Tab, a alterao ser aplicada imediatamente. Para evitar que as alteraes sejam feitas antes do Quick Tag Editor ser fechado, cancele a seleo da opo Aplicar as modicaes durante a edio, no painel do Quick Tag Editor da caixa de dilogo Preferncias.
Nota: Quando a opo Aplicar as modicaes durante a edio estiver cancelada, vrias alteraes aplicadas simultaneamente aparecero como uma nica etapa na paleta de histrico e sero desfeitas pressionando uma vez Desfazer.
Para adicionar um novo atributo a um rtulo, utilize a tecla Tab, as teclas de seta e a barra de espao, para mover o ponto de insero at onde o atributo deve ser adicionado. Comece a digitar um nome de atributo vlido para o rtulo. O menu suspenso de sugestes aparecer quando houver uma pausa na digitao, como na edio de atributos. Continue a editar e adicionar nomes e valores de atributos, conforme desejar.
342
Captulo 13
No nal da edio do rtulo, saia do Quick Tag Editor, escolhendo um dos seguintes procedimentos: Para sair e descartar todas as alteraes que ainda no tiverem sido aplicadas, pressione a tecla Esc. Se for utilizado o modo Editar o rtulo com a opo Aplicar as modicaes durante a edio selecionada, todas as alteraes que j tiverem sido aplicadas sero mantidas. Para sair e aplicar todas as alteraes, pressione a tecla Enter (no Windows), ou Return (no Macintosh), ou clique fora do Quick Tag Editor.
Se for utilizado qualquer HTML invlido no Quick Tag Editor, o Dreamweaver tentar corrigi-lo, inserindo aspas de fechamento e de sinais de maior, onde for necessrio.
Para selecionar o rtulo-pai (recipiente) do rtulo:
Siga um dos procedimentos abaixo: Pressione as teclas Control, Shift e < (no Windows), ou as teclas Command, Shift e < (no Macintosh). Escolha Editar > Selecionar o rtulo-pai.
Para selecionar o primeiro rtulo-filho contido no rtulo:
Siga um dos procedimentos abaixo: Pressione as teclas Control, Shift e > (no Windows), ou as teclas Command, Shift e > (no Macintosh). Escolha Editar > Selecionar o rtulo-lho.
Nota: Se o rtulo no contiver outros rtulos, o comando Selecionar o rtulo-lho escolher o contedo do rtulo atual. Para alternar entre os modos do Quick Tag Editor:
Com o Quick Tag Editor ativo, pressione as teclas Control e T (no Windows), ou as teclas Command e T (no Macintosh). O Quick Tag Editor altera os modos Inserir o HTML, Editar o rtulo e Colocar o rtulo ao redor, sempre que o atalho de teclado for utilizado.
Como editar o HTML
343
Sobre o modo Inserir o HTML O Quick Tag Editor iniciar no modo Inserir o HTML quando for aberto sem que haja uma seleo. Na abertura, ser mostrado um par de sinais de maior e menor, com o ponto de insero entre eles. Podem ser digitadas seqncias de HTML arbitrrias nesse modo do editor, incluindo vrios rtulos e texto, ou um outro contedo entre os rtulos. Quando o editor for fechado, o HTML inserido ser colocado no ponto de insero; se algum rtulo for deixado aberto, os correspondentes de nalizao sero adicionados automaticamente. Sobre o modo Editar o rtulo O Quick Tag Editor inicia no modo Editar o rtulo quando a seleo consistir de um rtulo completo (um rtulo de abertura e outro correspondente de nalizao, se for aplicvel, e o contedo do rtulo, se houver). Por exemplo: se a seleo for uma imagem ou um rtulo FONT e o rtulo correspondente /FONT, alm do texto entre eles, o Quick Tag Editor iniciar no modo Editar o rtulo. A maneira mais fcil de garantir que a seleo iniciar e terminar com rtulos correspondentes escolhendo um rtulo no seletor de rtulos, na parte inferior esquerda da janela do documento. O Quick Tag Editor tambm inicia no modo Editar o rtulo, quando a seleo incluir rtulos de abertura e nalizao no correspondentes. Nesse caso, a seleo ser expandida, incluindo o seu rtulo-pai e seus contedos. Por exemplo: se o pargrafo consistir do HTML Eles estavam lendo <cite>Esa e Jac</cite> na sala de aula., e a seleo for lendo<cite>Esa, sem o rtulo </cite> de fechamento, o Quick Tag Editor iniciar no modo Editar o rtulo, com o pargrafo inteiro selecionado. No modo Editar o rtulo, pode ser editado apenas um rtulo de abertura. Caso o ponto de insero seja movido para depois do nal do rtulo e mais outros sejam includos, aparecer uma mensagem de erro e tudo o que for digitado ser ignorado. Sobre o modo Colocar o rtulo ao redor Quando a seleo no consistir de um rtulo completo (um rtulo de abertura e outro correspondente de nalizao, se for aplicvel, e o contedo do rtulo, se houver), o Quick Tag Editor iniciar, normalmente, no modo Colocar o rtulo ao redor. Por exemplo: se a seleo contiver texto sem formatao especial, o Quick Tag Editor ser aberto no modo Colocar o rtulo ao redor. H uma exceo para essa regra: quando a seleo incluir um rtulo de abertura ou nalizao sem os seu correspondente, o Quick Tag Editor iniciar no modo Editar o rtulo, em vez de Colocar o rtulo ao redor, e a expandir at o rtulo-pai e o contedo da seleo.
344
Captulo 13
No modo Colocar o rtulo ao redor, pode ser inserido apenas um rtulo de abertura. Se for includo mais de um rtulo, aparecer uma mensagem de erro e tudo o que for inserido ser ignorado. Quando o editor for fechado, o rtulo inserido ser colocado no incio da seleo, e um rtulo de nalizao correspondente, no nal. Sobre os menus de sugestes Os menus pop-up de sugestes exibem os rtulos e atributos do arquivo TagAttributeList.txt, situado na pasta Dreamweaver/Conguration. Podem ser adicionados ou removidos rtulos desse arquivo para ajud-lo em sua edio de HTML. Como remover um rtulo Para remover um rtulo do documento (mantendo o contedo inalterado, se houver), siga um dos procedimentos abaixo: Selecione o rtulo, no seletor de rtulos, no canto inferior esquerdo da janela do documento. Em seguida, escolha Remover o rtulo, no menu contextual. Selecione algo na janela do documento, ou clique, para colocar o ponto de insero na janela. Em seguida, escolha Remover o rtulo, no menu contextual.
Nota: Nem todos os rtulos podem ser removidos.
Como definir as preferncias do Quick Tag Editor As preferncias do Quick Tag Editor permitem controlar se as edies realizadas com esse editor sero ou no automaticamente atualizadas na janela do documento. Os controles do menu suspenso de sugestes tambm podem ser ajustados. Utilize o menu Editar>Preferncias, para acessar o painel de preferncias do Quick Tag Editor. controla se as alteraes do Quick Tag Editor sero atualizadas automaticamente no documento, enquanto voc percorre os atributos no modo Editar o rtulo. Se esta opo for desativada, ser necessrio pressionar a tecla Enter, para aplicar as alteraes ao documento. Esta opo ignorada nos modos Inserir o HTML e Colocar o rtulo ao redor; nesses modos, a tecla Enter deve sempre ser pressionada para aplicar as alteraes no documento.
Aplicar as modificaes durante a edio
controla se a lista de sugestes ser exibida durante a digitao no Quick Tag Editor. O limite de tempo tambm pode ser ajustado antes da exibio do menu suspenso de sugestes para o rtulo ou atributo.
Ativar a sugesto de rtulos
Como editar o HTML
345
Como definir as preferncias de formato HTML

As seguintes preferncias de formatao de cdigo de origem de HTML podem ser denidas no Deamweaver: As preferncias de regravao de HTML determinam quais alteraes, se houver, o Dreamweaver far no cdigo de origem de HTML quando um documento HTML for aberto. Consulte Como denir as preferncias de regravao de HTML, na pgina 346. As preferncias de formato HTML determinam as opes comuns de formatao de HTML, como tamanho e recuo da linha. Consulte Como denir as preferncias de formato HTML, na pgina 347. Essas preferncias fornecem uma interface de usurio para alterar o arquivo SourceFormat.txt. As preferncias de cores HTML controlam como os rtulos HTML (e o texto entre eles) sero codicados utilizando cores no inspetor de origem de HTML Consulte Como denir as preferncias de cores HTML, na pgina 349. As preferncias de fontes/codicao permitem especicar a fonte com a qual o cdigo de origem de HTML aparecer no inspetor de origem de HTML. Consulte Como denir as preferncias de fontes/codicao, na pgina 71. Finalmente, o arquivo SourceFormat.txt (na pasta Dreamweaver/Conguration) fornece especicaes precisas para a formatao de HTML. A edio desse arquivo em um editor de texto lhe possibilita o mais alto grau de controle sobre a maneira pela qual o Dreamweaver grava o HTML; voc poder alterar determinadas opes especcas a rtulos nesse arquivo, que no poderiam ser modicadas utilizando as preferncias de formato HTML. Contudo, recomendamos que apenas os usurios experientes e programadores do Dreamweaver tentem editar esse arquivo, pois h uma grande probabilidade da ocorrncia de erros graves nesse programa. Consulte Como editar o perl de formatao da origem de HTML, na pgina 396. Como definir as preferncias de regravao de HTML As preferncias de regravao de HTML determinam as aes do Dreamweaver quando abre os documentos HTML. Essas preferncias no tm efeito quando o HTML for editado no inspetor de origem de HTML. 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 Word, poder ser utilizado o comando Limpar o HTML do Word, para remover os cdigos HTML desnecessrios. Consulte Limpar o HTML do Microsoft Word, na pgina 352, para obter mais informaes. regrava os rtulos sobrepostos ou aninhados indevidamente. Por exemplo: text ser regravado como text. Esta opo tambm inserir aspas e colchetes de fechamento, se estiverem faltando.
Ajustar os rtulos abertos e aninhados incorretamente
346
Captulo 13
Remover os rtulos de finalizao adicionais exclui os rtulos de nalizao que no apresentarem os correspondentes de abertura.
exibe um resumo do HTML tecnicamente invlido que o Dreamweaver tentou corrigir. O resumo contm a localizao do problema (sob a forma de nmeros de linha e coluna), para que seja localizada a correo e assegurada a sua interpretao adequada.
Advertir ao ajustar ou remover os rtulos
permite fazer com que o Dreamweaver no regrave o HTML nos arquivos com as extenso de nome de arquivo especicadas. Esta opo particularmente til para os tipos de arquivos que contm rtulos de outros fabricantes (como os rtulos ASP). Para obter mais informaes, consulte Como impedir a regravao de rtulos de outros fabricantes, na pgina 407.
Nunca regravar o HTML: Em Arquivos com as extenses
As duas opes de Caracteres especiais permitem controlar a codicao do Dreamweaver de certos caracteres em determinados contextos. Em geral, melhor manter estas opes selecionadas, a menos que os arquivos contenham rtulos especcos de outros fabricantes, que utilizam esses caracteres. Para obter mais informaes sobre estas opes, consulte Como impedir a regravao de rtulos de outros fabricantes, na pgina 407. Como definir as preferncias de formato HTML Utilize as seguintes preferncias de formato HTML para controlar a formatao de HTML, como recuo, tamanho da linha, e maiscula ou minscula para os nomes do rtulos e atributos, quando os documentos forem criados. Para obter informaes sobre os controles de formatao de HTML adicionais, consulte Como editar o perl de formatao da origem de HTML, na pgina 396. Observe que as seguintes opes (exceto Ignorar a caixa de) afetam apenas os novos documentos e incluses (na janela do documento) aos documentos j 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 de origem de HTML nos documentos existentes, na pgina 351.
Nota: Estas opes destinam-se apenas s alteraes feitas na janela do documento; quando o HTML for editado diretamente no inspetor de origem de HTML, elas no se aplicaro.
ativa o recuo de todos os rtulos marcados com INDENT no arquivo SourceFormat.txt. Consulte Como editar o perl de formatao da origem de HTML, na pgina 396.
Recuo Utilizar
especica se os recuos sero feitos com espaos ou tabulaes.
Linhas e colunas da tabela recua automaticamente os rtulos TR e TD, para facilitar
a leitura do cdigo da tabela. A opo Recuo deve estar selecionada para que esta opo funcione.
Como editar o HTML
347
Molduras e conjuntos de molduras recua automaticamente os rtulos FRAME e FRAMESET aninhados, para facilitar a leitura dos arquivos do conjunto de molduras.
A opo Recuo deve estar selecionada para que esta opo funcione.
Tamanho do recuo determina o tamanho dos recuos, em espaos ou tabulaes, se
a opo Utilizar estiver denida para espaos ou tabulaes, respectivamente. Por exemplo: se a opo Utilizar estiver denida para tabulaes e o parmetro em Tamanho do recuo for 4, os rtulos sero recuados com quatro tabulaes.
Tamanho da tabulao
determina o tamanho das tabulaes (medido em
caracteres de espaos).
Nota: Se o Tamanho do recuo no for um mltiplo do Tamanho da tabulao e a opo Utilizar estiver denida como tabulaes, os rtulos sero recuados usando uma combinao de tabulaes e caracteres de espaos. Quebra automtica de linha quebra as linhas (com uma quebra de linha incondicional) quando atingirem 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, no inspetor de origem de HTML, adiciona uma quebra condicional s linhas que ultrapassarem a largura da janela.
especica o tipo de servidor remoto (Windows, Macintosh ou UNIX) que serve de host para o site remoto. A escolha do tipo adequado dos caracteres de quebra de linha assegura que o cdigo de origem de 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 os arquivos so descarregados no modo ASCII, o Dreamweaver dene as quebras de linha com base no sistema operacional do computador; se os arquivos forem carregados 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 seu editor externo e, no Macintosh, utilize CR, no caso do SimpleText.
Quebras de linha
e Caixa do atributo controlam a caixa alta ou baixa dos nomes de rtulos e atributos. Estas opes so aplicadas a rtulos e atributos inseridos ou editados na janela do documento, mas no aos inseridos diretamente no inspetor de origem de HTML 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).
Caixa do rtulo
348
Captulo 13
Ignorar a caixa de: Rtulos e Atributos especicam se as opes de caixa denidas sero implementadas sempre, inclusive quando for aberto um documento HTML j existente. Quando uma destas opes for selecionada, todos os rtulos e atributos nos documentos abertos sero imediatamente convertidos para a caixa especicada, bem como todos os rtulos e atributos abertos daqui em diante (at que seja cancelada novamente esta opo). Os rtulos e atributos digitados no inspetor de origem de HTML e no Quick Tag Editor tambm sero convertidos para a caixa especicada, da mesma forma que os rtulos e atributos inseridos utilizando a paleta de objetos. Por exemplo: se desejar que os nomes de rtulos sejam convertidos sempre em letras minsculas, especique minsculas, em Caixa do rtulo e, em seguida, selecione Ignorar a caixa de: opo Rtulos. Em seguida, quando for aberto um documento que contenha nomes de rtulos em maisculas, o Dreamweaver os converter em minsculas. Centralizao especica se os elementos devem ser centralizados utilizando DIV ALIGN="center" ou CENTER. Ambos fazem parte da especicao HTML 4.0 Transitional, mas CENTER conta com suporte de um nmero maior de navegadores.
Como definir as preferncias de cores HTML Utilize as preferncias de cores HTML para controlar as cores do fundo, do texto e dos rtulos no inspetor de origem de HTML. especica a cor do fundo para o inspetor de origem de HTML. Essa cor aparecer apenas quando voc clicar ou digitar no inspetor de origem de HTML; se o inspetor no estiver ativado a sua cor de fundo ser cinza mdio.
Fundo
especica a cor do texto que aparece entre os rtulos (por exemplo: no cdigo algum texto, as palavras algum texto aparecem na cor da opo Texto, mas no os rtulos ). Para anular a cor da opo Texto de um rtulo especco, selecione a opo Incluir o contedo.
Texto Comentrios
especica a cor dos rtulos dos comentrios () e seus
contedos.
Padro de rtulo
especica a cor de todos os rtulos, exceto aqueles de comentrios. Para ignorar a cor em Padro de rtulo, dena a cor de rtulos especcos.
as denies em Padro de rtulo e Cor do texto podem ser ignoradas, ao especicar cores para determinados rtulos.
Especfica ao rtulo
Como editar o HTML
349
Para definir uma cor de um rtulo especfico: 1
Selecione um rtulo, na caixa Especca ao rtulo. Pressione a tecla Shift e clique, para selecionar vrios rtulos adjacentes, ou pressione a tecla Control e clique (no Windows), ou pressione a tecla Command e clique (no Macintosh), para selecionar diversos rtulos no adjacentes.
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: No campo de texto ao lado da amostra, digite um valor hexadecimal. Clique na amostra de cor e selecione outra cor na paleta de cores aceitas pelo navegador ou no seletor de cores do sistema.
Para colorir o texto entre os rtulos de abertura e de nalizao, selecione Aplicar a cor ao contedo do rtulo.
Limpar o HTML
Utilize o comando Limpar o HTML, para remover os rtulos vazios, combinar os rtulos FONT aninhados e aprimorar o cdigo HTML confuso ou ilegvel.
Para limpar o cdigo HTML: 1 2
Abra um documento existente e escolha Comandos > Limpar o HTML. Na caixa de dilogo que aparecer, escolha dentre as seguintes opes: Remover os rtulos vazios remove os rtulos sem contedo entre eles. Por exemplo: e so considerados rtulos vazios, mas no o rtulo em algum texto. Remover os rtulos aninhados redundantes remove todas as ocorrncias redundantes de um rtulo. Por exemplo: no cdigo Isto exatamente o que gostaria de dizer, os rtulos B em volta da palavra exatamente so redundantes e seriam removidos. Remover comentrios de HTML no pertencentes ao Dreamweaver remove todos os comentrios que no tiverem sido inseridos pelo Dreamweaver. Por exemplo:  seria removido, mas no  (porque um comentrio do Dreamweaver que marca o incio de uma regio editvel em um modelo).
350
Captulo 13
Remover os comentrios de HTML pertencentes ao Dreamweaver remove todos os comentrios inseridos pelo Dreamweaver. Por exemplo: <!-#BeginEditable "doctitle" --> seria removido, mas no  (porque no um comentrio do Dreamweaver). A remoo dos comentrios do Dreamweaver converte os documentos com base em modelos em documentos HTML comuns e os itens de biblioteca em cdigo HTML normal (isto , eles no podero mais ser atualizados quando o modelo original ou o item de biblioteca forem alterados). Remover rtulo(s) especco(s) remove os rtulos especicados no campo de texto adjacente. Utilize esta opo para remover os rtulos personalizados inseridos por outros editores visuais e outros rtulos, que voc no deseja que apaream no seu site (por exemplo: BLINK). Separe vrios rtulos com vrgulas (por exemplo: FONT, BLINK). Combinar os rtulos aninhados sempre que possvel consolida dois ou mais rtulos FONT, quando eles controlarem a mesma faixa de texto. Por exemplo: grande e vermelho seria alterado para grande e vermelho. Mostrar o registro quando concluir exibe uma caixa de alerta com os detalhes sobre as alteraes feitas no documento logo que a limpeza terminar.
3
Clique em OK. Dependendo do tamanho do documento e do nmero de opes selecionadas, a limpeza poder demorar alguns segundos.
Como formatar o cdigo de origem de 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 essas opes de formatao de HTML aos 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: 1
Escolha Arquivo > Abrir, para abrir um arquivo HTML existente na janela do documento. Escolha Comandos > Aplicar a formatao de origem.
Como editar o HTML
351
Limpar o HTML do Microsoft Word

Os documentos salvos como arquivos de HTML no Microsoft Word podem ser abertos no Dreamweaver e, em seguida, possvel utilizar o comando Limpar o HTML do Word, para remover o cdigo HTML no correspondente gerado pelo Word. O cdigo que o Dreamweaver remove basicamente utilizado pelo Word para formatar e exibir os documentos no Word, no sendo necessrio exibio do arquivo HTML. Guarde uma cpia de segurana do arquivo original do Word (.doc), porque talvez no seja possvel reabrir o documento HTML no Word aps a aplicao do recurso Limpar o HTML do Word. O comando Limpar o HTML do Word est disponvel para os documentos salvos como arquivos HTML no Word 97 ou mais avanado.
Para utilizar o recurso Limpar o HTML do Word: 1 2
No Microsoft Word, salve o documento como um arquivo HTML. Abra o documento HTML no Dreamweaver utilizando um dos seguintes mtodos: Escolha Arquivo > Importar > Importar o HTML do Word, e selecione um arquivo a ser aberto. O Dreamweaver abrir o arquivo e, em seguida, a caixa de dilogo Limpar o HTML do Word, automaticamente. Escolha Arquivo > Abrir, e selecione um arquivo a ser aberto. gerado automaticamente um arquivo de registro de correes de HTML. Isso no faz parte do recurso Limpar o HTML do Word. Clique em Continuar, para sair da caixa de dilogo. No Dreamweaver, escolha Comandos >Limpar o HTML do Word.
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.
352
Captulo 13
Escolha quais opes o recurso Limpar o HTML do Word deve utilizar. A guia Bsica exibe as seguintes opes: Remover todo o markup especco ao Word remove todo o HTML especco ao Word, inclusive o XML dos rtulos <html>, os dados meta personalizados do Word e os rtulos de vnculos no cabealho do documento, o markup XML do Word, os rtulos condicionais e seus contedos, alm dos pargrafos vazios e margens dos estilos. possvel optar por selecionar cada uma dessas opes individualmente, utilizando a guia Detalhado. Limpar CSS remove todas as CSS especcas do Word, incluindo os estilos CSS de entrada linear quando for possvel (nos casos em que o estilo-pai tiver as mesmas propriedades do estilo), os atributos de estilo iniciados por mso, as declaraes de estilo diferentes de CSS, os atributos de estilo CSS das tabelas e todas as denies de estilo no utilizadas do cabealho. Esta opo pode ser ainda mais personalizada clicando na guia Detalhado. Limpar os rtulos remove os rtulos HTML, convertendo o corpo do texto padro para o tamanho 2 HTML. Corrigir os rtulos aninhados incorretamente remove os rtulos do markup font inseridos pelo Word fora dos rtulos de pargrafo e cabealho (nvel de bloco). Denir a cor do fundo insere um valor hexadecimal, para denir a cor do fundo do documento. Se no for denida uma cor de fundo, o documento HTML do Word ter um fundo cinza. O valor hexadecimal padro denido pelo Dreamweaver branco. Aplicar a formatao de origem aplica as opes de formatao da origem especicadas nas preferncias de formato HTML e no Format.prole de origem do documento. Mostrar o registro quando concluir exibe uma caixa de alerta com os detalhes sobre as alteraes feitas no documento logo que a limpeza terminar.
Clique em OK. Dependendo do tamanho do documento e do nmero de opes selecionadas, a limpeza poder demorar alguns segundos. As preferncias escolhidas sero automaticamente salvas como denies padro de Limpar o HTML do Word.
Como editar o HTML
353
Como corrigir os markups incorretos

Se o cdigo HTML for realado em amarelo claro na janela do documento ou no inspetor de origem de HTML, isto signica que o Dreamweaver encontrou um HTML incorreto, que no pode ser exibido. Freqentemente, esses marcadores de HTML incorretos aparecero quando for iniciada a digitao de um rtulo no inspetor de origem de HTML e, em seguida, se alterna para a janela do documento sem completar o rtulo. Para corrigir o problema, clique no marcador amarelo de HTML incorreto e siga a sugesto no inspetor de propriedades. Consulte tambm Sobre o Roundtrip HTML, na pgina 338.
Como utilizar os editores de HTML externos

Talvez seja conveniente utilizar um editor de texto para codicar manualmente uma quantidade extensa de HTML, JavaScript ou VBScript. Qualquer editor de texto externo pode ser utilizado com o Dreamweaver, incluindo o Bloco de Notas (incorporado ao Windows 95 e NT) ou o SimpleText (incorporado ao Macintosh), BBEdit, HomeSite, vi, emacs e TextPad. Consulte Como utilizar um editor de texto externo com o Dreamweaver, na pgina 354 e Como utilizar o BBEdit com o Dreamweaver (apenas no Macintosh), na pgina 355. Como utilizar um editor de texto externo com o Dreamweaver possvel iniciar o editor de texto principal a partir do Dreamweaver, para editar o HTML de origem no documento e, em seguida, voltar ao Dreamweaver a m de continuar a edio gracamente. O Dreamweaver detecta as alteraes que foram salvas no documento externamente e lhe avisa para recarreg-lo ao retornar. Se o BBEdit for utilizado no Macintosh, siga as etapas em Como utilizar o BBEdit com o Dreamweaver (apenas no Macintosh), na pgina 355, em vez das expostas abaixo. Para congurar os editores externos para os tipos de arquivos diferentes de texto e HTML, consulte Como iniciar um editor externo de mdia, na pgina 284.
Para escolher um editor de HTML externo: 1 2 3
Escolha Editar > Preferncias. Seleciones Editores externos, na lista de categorias esquerda. 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.
354
Captulo 13
Clique no boto Procurar, ao lado da caixa Editor de HTML, para escolher um editor de texto. Na opo Recarregar os arquivos modicados, especique o que o Dreamweaver dever fazer ao detectar alteraes externas em um documento aberto no Dreamweaver. Na opo Salvar na iniciao, especique se o Dreamweaver deve sempre salvar o documento antes de iniciar o editor, nunca salvar o documento ou lhe perguntar se salvar ou no o documento quando o editor de texto externo for iniciado.
Para iniciar o editor de HTML externo:
Escolha Editar > Iniciar o editor externo, ou clique em Editor externo, no canto superior esquerdo do inspetor de origem de HTML. 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 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
Siga um dos procedimentos abaixo: Escolha Editar > Iniciar o editor externo. Clique em Editor externo, no canto superior esquerdo do inspetor de origem de HTML.
2 3
Edite o documento no BBEdit. Clique no boto Dreamweaver, na paleta de ferramentas de HTML, no BBEdit, para retornar ao Dreamweaver.
Para desativar a integrao com o BBEdit: 1 2 3
Escolha Editar > Preferncias. Escolha Editores externos, na lista de categorias, esquerda. Cancele a seleo de Ativar a integrao com o BBEdit e clique em OK.
Como editar o HTML
355
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 janela do documento, sempre que possvel.
Nota: Como padro, o Dreamweaver nunca regrava o HTML encontrado nos arquivos ColdFusion ou Active Server. Para editar um bloco de cdigo ASP na janela do documento: 1 2 3
Clique no marcador amarelo de ASP, para selecion-lo. No inspetor de propriedades, clique no boto Editar. Edite o cdigo ASP na caixa de dilogo que parecer e, em seguida, clique em OK.
Para editar um bloco de cdigo CFML na janela do documento: 1 2
Clique no marcador de CFML, para selecion-lo. No inspetor de propriedades, siga um dos procedimentos abaixo: Clique no boto Atributos, para editar os atributos existentes do rtulo e seus valores, ou para adicionar novos. Clique no boto Contedo, para editar o contedo que aparecer entre os rtulos CFML de abertura e nalizao. Se o rtulo selecionado estiver vazio (ou seja, no houver um rtulo 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 > Elementos invisveis esteja ativada. Se esta opo estiver selecionada e, mesmo assim, os cones no aparecerem, o Dreamweaver no pode exibir o cdigo como CFML ou ASP. Isto pode acontecer, por exemplo, quando rtulos condicionais forem inseridos em rtulos HTML, como no cdigo ASP seguinte:
<input type="checkbox" name="month" value="October" <% if month="October" then %>checked<% end if %> >
356
Captulo 13
Para editar o cdigo CFML ou ASP quando um marcador ou um texto realado no aparecer: 1
Se for selecionado o rtulo ou objeto que contm o cdigo, utilize o Quick Tag Editor para editar o cdigo. Consulte Como editar um rtulo HTML na janela do documento, na pgina 340. Caso contrrio, siga as etapas abaixo: Na janela do documento, posicione o ponto de insero prximo posio onde deve estar o cdigo CFML ou ASP. Escolha Janela > Origem de HTML, para abrir o inspetor de origem de HTML. Clique na barra de ttulo do inspetor de origem de HTML, para direcionar o teclado para esse inspetor. No clique no meio do inspetor, seno o ponto de insero ser movido para fora do cdigo CFML ou ASP a ser editado.
3 4
5 6
Edite o cdigo diretamente no inspetor de origem de HTML. Pressione F10, para fechar o inspetor de origem de HTML e retornar janela do documento.
Para obter informaes sobre o processamento de cdigos CFML ou ASP, e exibir os resultados na janela do documento, consulte Como personalizar a interpretao e a aparncia dos rtulos de outros fabricantes, na pgina 402.
Como inserir roteiros

JavaScript e VBScript podem ser inseridos na janela do documento, dispensando a utilizao do inspetor de origem de HTML. Para exibir os marcadores do roteiro na janela do documento, escolha Exibir > Elementos invisveis. Consulte tambm Como denir as preferncias de elementos invisveis, na pgina 90.
Para inserir um roteiro: 1 2 3
Coloque o cursor onde deve ser adicionado o roteiro. Clique no boto Roteiro, na paleta de objetos, ou escolha Inserir > Roteiro. Na caixa de dilogo que aparecer, escolha a linguagem de roteiro no menu pop-up. Se voc utilizar o JavaScript e no tiver certeza de sua verso, escolha JavaScript em vez de JavaScript1.1 ou JavaScript1.2.
Digite o cdigo que deve aparecer entre os rtulos do roteiro. Para estabelecer um vnculo com um arquivo de roteiro externo, clique em OK sem digitar nada e, em seguida, adicione a referncia ao arquivo de origem, no inspetor de propriedades (digite o nome do arquivo na caixa Origem, ou clique no cone correspondente pasta, para procurar e selecionar o arquivo).
Como editar o HTML
357
Para editar o roteiro: 1 2
Selecione o cone de Roteiro. No inspetor de propriedades, clique em Editar.
Como definir as propriedades dos roteiros Aparecero as seguintes propriedades no inspetor de propriedades, quando um marcador de roteiro for selecionado:
Linguagem Origem
especica JavaScript ou VBScript como a linguagem do roteiro.
especica um arquivo de roteiro vinculado externamente. Digite o caminho ou clique na pasta, para escolher o arquivo.
Editar
abre a janela do roteiro, permitindo a alterao do roteiro.
Como inserir comentrios

Um comentrio um texto descritivo, inserido no HTML para explicar o cdigo ou fornecer outras informaes. Um comentrio no afeta a aparncia do documento em um navegador. Se for necessrio adicionar mais informaes sobre qualquer arquivo do site, tambm possvel utilizar as Design Notes. Para obter mais informaes, consulte Sobre as Design Notes, na pgina 172. Consulte tambm Como denir as preferncias de elementos invisveis, na pgina 90.
Para inserir um comentrio: 1 2
Coloque o ponto de insero onde deve ser adicionado o comentrio. Clique no boto Comentrio, no painel Invisveis da paleta de objetos, ou escolha Inserir > Comentrio.
Para exibir os marcadores de comentrios na janela do documento, escolha Exibir > Elementos invisveis.
Para inserir o texto do comentrio: 1 2
Selecione o cone de Comentrios. Digite o texto no inspetor de propriedades.
A criao de um comentrio gera o cdigo HTML seguinte:


358
Captulo 13
14
CAPTULO 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modelos e bibliotecas
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 seu site da Web, j que possvel redesenh-lo, assim como alterar centenas de pginas em segundos. Um modelo um documento que pode ser utilizado como base para outros documentos. Quando um modelo criado, possvel indicar quais elementos de uma pgina devero permanecer inalterados (no-editveis) e quais podero ser alterados. Por exemplo: caso voc esteja publicando uma revista on-line, o nome provavelmente no ser alterado, mas o ttulo e o contedo da matria de capa sero modicados a cada edio. Para indicar o estilo e o local dessa matria, pode ser utilizado um texto alocador de espao que denir uma regio editvel. Para adicionar uma nova matria de capa, basta que o autor selecione o texto alocador de espao e digite o novo artigo para substitu-lo. Um modelo pode ser modicado mesmo depois de ter sido utilizado para criar documentos. Quando os documentos que utilizam o modelo forem atualizados, suas sees bloqueadas (no-editveis) sero atualizadas de modo a reetir as alteraes no modelo.
359
O Dreamweaver tambm oferece duas maneiras de tratar esses contedos recorrentes para que no seja necessrio alter-los em cada pgina do site: itens de biblioteca e server-side includes. Voc poder utilizar estas abordagens para o contedo que se repetir em cada pgina do site (como um cabealho ou rodap, por exemplo) ou que aparecer apenas em algumas pginas, mas que deve ser atualizado freqentemente (como as manchetes de notcias ou ofertas especiais). Estas abordagens so apropriadas para tipos diversos de sites: Os itens da biblioteca podem ser utilizados em todos os sites e devem sempre ser inseridos nos sites exibidos localmente. Consulte Sobre os itens de biblioteca, na pgina 372. As server-side inclusions (incluses do servidor) podem ser utilizadas apenas nos sites que forem exibidos a partir de um servidor e somente nos servidores que forem congurados para process-las. Pergunte ao seu webmaster ou ao administrador da rede se o servidor da Web oferece suporte s server-side includes. Consulte Como utilizar as server-side includes, na pgina 379. Como definir as preferncias de realce Nos modelos e nos arquivos que neles se basearem, as regies editveis e as bloqueadas so realadas em cores diferentes. As preferncias de realce permitem personalizar as cores utilizadas na janela do documento para identicar as regies do modelo e os itens de biblioteca. Para obter mais informaes, consulte os seguintes : Para personalizar as cores do realce do modelo, consulte Como denir as preferncias dos modelos, na pgina 363. Para especicar a cor do realce dos itens de biblioteca, consulte Como denir as preferncias de biblioteca, na pgina 373. possvel tambm especicar uma cor de realce do contedo com rtulos de outros fabricantes. Consulte Como os rtulos personalizados aparecem na janela do documento, na pgina 405.
360
Captulo 14
Como criar os modelos

Um modelo pode ser criado a partir de um documento HTML j existente e, em seguida, ser modicado para que atenda s suas exigncias, ou ser criado a partir do zero, com base em um documento HTML em branco. Os modelos so armazenados automaticamente na pasta Modelos, contida na pasta raiz local do site. Se esta pasta ainda no existir, o Dreamweaver a criar quando voc salvar um novo modelo.
Para salvar um documento j existente como um modelo: 1 2 3
Escolha Arquivo > Abrir e selecione um documento. Escolha Arquivo > Salvar como modelo. Na caixa de dilogo que aparecer, selecione um site e digite um nome para o modelo, na caixa Salvar como. Clique em Salvar.
Para criar um novo modelo em branco: 1 2
Escolha Janela > Modelos. Na paleta de modelos, siga um dos procedimentos abaixo: Clique no boto do menu contextual e, em seguida, selecione Novo modelo. Clique no cone de Novo modelo, na rea inferior direita da paleta de modelos. Na lista da paleta de modelos, clique com o boto direito do mouse (no Windows), ou clique mantendo a tecla Control pressionada (no Macintosh) e, no menu contextual, selecione Novo modelo. Um novo modelo em branco ser adicionado lista de modelos na paleta. Enquanto o modelo estiver selecionado, digite um nome para ele.
Para editar um modelo: 1 2 3
Escolha Janela > Modelos. Na paleta de modelos, clique duas vezes no nome do modelo. Edite o modelo na janela do documento.
Se desejar salvar informaes adicionais sobre um modelo, crie 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 sobre como utilizar as Design Notes, consulte Sobre as Design Notes, na pgina 172).
361
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 utilizar um modelo, possvel alterar o ttulo do documento, porm quaisquer alteraes feitas s suas outras propriedades da pgina sero ignoradas. As propriedades da pgina de um modelo podem ser denidas atravs do comando Modicar > Propriedades da pgina. Se precisar alterar as propriedades da pgina de um documento aps ter aplicado o modelo, voc dever modicar as propriedades da pgina do modelo e, em seguida, atualizar as pginas que o utilizarem. Consulte Como modicar os modelos e atualizar o site, na pgina 369.
Para definir as propriedades da pgina do modelo: 1 2
Abra o modelo e escolha Modicar > Propriedades da pgina. Especique as opes desejadas para a pgina e clique em OK.
Para obter mais informaes sobre as propriedades da pgina, consulte Propriedades da pgina, na Ajuda do Dreamweaver.
Como definir as regies editveis de um modelo

Em um modelo, as regies editveis so as partes de uma pgina que se alteram por exemplo: um artigo em um boletim. As regies bloqueadas (no editveis) so as reas que se mantm constantes de uma pgina para outra, como o nome ou logotipo de uma corporao. Como padro, todas as regies em um modelo so marcadas como bloqueadas quando salvas; para tornar o modelo til, necessrio que algumas de suas partes sejam editveis. Enquanto o modelo estiver sendo editado, possvel fazer alteraes tanto nas regies editveis quanto nas bloqueadas. Quando o modelo for aplicado a um documento, no entanto, as modicaes podero ser feitas apenas nas regies editveis do documento; as regies bloqueadas no podem ser alteradas.
Nota: Ao nomear uma regio, no possvel utilizar os seguintes caracteres: aspas simples ou duplas ( ), sinais de maior e menor (< >) e tralhas (&). Para definir o contedo de um modelo j existente como uma regio editvel: 1 2
No modelo, selecione o texto ou contedo a ser tornado editvel. Escolha Modicar > Modelos > Marcar como editvel a seleo.
362
Captulo 14
Na caixa de dilogo Nova regio editvel, digite um nome para a regio. A regio editvel ser realada no modelo. Uma tabela inteira ou uma clula de uma tabela pode ser marcada como editvel; no entanto, no possvel marcar vrias clulas como editveis simultaneamente. As camadas e o seu contedo so elementos separados; ao ser transformada em editvel, a posio da camada pode ser alterada; a marcao do contedo da camada como editvel permite alter-lo.
Para definir uma nova regio editvel em um modelo: 1
No modelo, coloque o ponto de insero onde deseja incluir uma regio editvel. Escolha Modicar > Modelos > Nova regio editvel. Na caixa de dilogo Nova regio editvel, digite um nome para a regio. O nome da regio, entre chaves ({}) ser inserido no modelo como um alocador de espao realado. Quando o modelo for aplicado a um documento, o alocador de espao poder ser substitudo por texto, imagens ou qualquer outro contedo.
2 3
Como definir as preferncias dos modelos possvel utilizar as preferncias de realce do Dreamweaver para personalizar as cores de realce das regies editveis e bloqueadas de um modelo. A cor das regies editveis aparece no modelo; a cor das regies bloqueadas aparece nos documentos que utilizam o modelo. Voc poder utilizar estas cores como auxlio para se lembrar (e quem quer que esteja utilizando os seus modelos) das sees que no podem ser editadas no documento.
Para alterar as cores de realce do modelo: 1 2
Escolha Editar > Preferncias e selecione Realce. Clique na caixa de cores das Regies editveis e selecione uma cor de realce. Faa o mesmo para as Regies bloqueadas. Clique em Mostrar, para exibir ou ocultar essas cores na janela do documento. Clique em OK.
3 4
Para exibir as cores de realce na janela do documento:
Escolha Exibir > Elementos invisveis. As cores de realce aparecem somente na janela do documento quando a opo Exibir > Elementos invisveis estiver ativada.
363
Como exibir as regies editveis e bloqueadas As regies editveis e bloqueadas aparecem na janela do documento como objetos e textos realados. Para obter informaes sobre a denio das preferncias de realce, consulte Como denir as preferncias dos modelos, na pgina 363. Nos modelos, apenas as regies editveis esto realadas. No entanto, o contedo das regies editveis e bloqueadas pode ser alterado.
Tanto as regies bloqueadas quanto as editveis podem ser modicadas
As regies editveis esto realadas
Nos documentos que utilizam os modelos, apenas as regies bloqueadas esto realadas. Somente o contedo editvel (no-realado) poder ser alterado.
As regies bloqueadas esto realadas Apenas as regies editveis podem ser modicadas
364
Captulo 14
Como exibir o HTML editvel e o bloqueado O contedo editvel delimitado no HTML atravs dos comentrios do Dreamweaver #BeginEditable e #EndEditable. O cdigo de origem de HTML de um alocador de espao editvel chamado Edit-Region ter esta aparncia:
 {Editable-Region} 
O HTML para uma tabela editvel chamada Edit-Table ter esta aparncia:
 <table width="77%" border="1"> <tr> <td> </td> <td> </td> </tr> </table> 
Nos modelos, as regies editveis so realadas no inspetor de origem de HTML. Contudo, possvel alterar o cdigo de origem de HTML editvel e bloqueado.
O HTML editvel est realado
Tanto as regies editveis quanto as bloqueadas podem ser modicadas
365
Nos documentos que utilizam modelos, as regies bloqueadas esto realadas no inspetor de origem de HTML. Apenas o cdigo de origem de HTML editvel (no-realado) pode ser alterado.
O HTML bloqueado est realado
Apenas o HTML editvel pode ser modicado
Como desmarcar uma regio Caso voc marque uma regio como editvel e depois queira bloque-la (torn-la no-editvel) novamente, utilize o comando Desmarcar a regio editvel.
Para desmarcar uma regio (torn-la no-editvel): 1 2
Escolha Modicar > Modelos > Desmarcar a regio editvel. Selecione o nome da regio na lista e clique em OK. A regio ser bloqueada.
366
Captulo 14
Como utilizar os estilos, as linhas de tempo e os comportamentos nos modelos Os estilos, linhas de tempo e comportamentos personalizados contam com suporte amplo nos modelos. Para poder utilizar os estilos, linhas de tempo e comportamentos em um modelo, eles devero ser denidos em uma regio editvel de um documento que utiliza o modelo. Para obter mais informaes, consulte Como formatar o texto com as folhas de estilos CSS, na pgina 188, Sobre as linhas de tempo, na pgina 253 e Como utilizar os comportamentos, na pgina 299. Como utilizar a paleta de modelos Utilize a paleta de modelos para criar novos modelos e gerenciar os existentes.
Para abrir a paleta de modelos:
Escolha Janela > Modelos. O painel superior da paleta de modelos contm uma lista dos modelos disponveis para um site local. O painel inferior exibe o contedo do modelo selecionado.
Para editar um modelo:
Selecione um modelo na lista e clique em Abrir ou clique duas vezes no nome do modelo, na lista.
Para renomear um modelo:
Clique uma vez no nome do modelo para selecion-lo e, em seguida, clique novamente. Quando o nome se tornar um campo editvel, digite um novo nome. Quando um modelo for renomeado, as referncias a esse modelo no sero atualizadas automaticamente. necessrio reaplicar o modelo com o novo nome aos documentos aos quais ele serve de referncia. Consulte Como criar documentos com base em modelos, na pgina 368.
367
Como criar documentos com base em modelos

O modelo pode ser utilizado como ponto de partida para um novo documento ou para ser aplicado a um documento existente.
Para criar um documento com base em um modelo, siga um dos procedimentos abaixo:
Escolha Arquivo > Novo a partir de modelo. Na caixa de dilogo que aparecer, escolha um modelo e clique em Selecionar. Escolha Arquivo > Novo, para criar um novo documento e, em seguida, aplique nele um modelo, arrastando-o da paleta de modelos.
Para aplicar um novo modelo a um documento j existente do Dreamweaver:
Abra o documento. Siga um dos procedimentos abaixo: Escolha Modicar > Modelos > Aplicar o modelo pgina. Escolha um modelo na lista e clique em Selecionar. Arraste o modelo da paleta de modelos para a janela do documento. Selecione o modelo na paleta de modelos e clique em Aplicar pgina. Quando um modelo for aplicado a um documento existente, o contedo do modelo ser adicionado ao documento. Se um modelo j houver sido aplicado ao documento. O Dreamweaver comparar os nomes das regies editveis dos dois modelos e inserir o contedo do novo modelo nos nomes das regies que coincidirem no modelo mais antigo. Caso no haja correspondncias nos nomes das regies editveis ou se uma regio editvel no modelo anterior no coincidir com a regio correspondente no novo, uma caixa de dilogo solicitar a excluso das regies no coincidentes ou a transferncia delas para o novo modelo. Se houver mais regies editveis no novo modelo do que no antigo, elas aparecero nos documentos como alocadores de espao.
368
Captulo 14
Como localizar as regies editveis do documento Todas as regies editveis no corpo de um modelo so mostradas em uma lista na base 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. A regio ser selecionada no documento. Inicie a digitao para substituir o contedo da regio. Como desanexar um documento de um modelo Para alterar as regies editveis e bloqueadas de uma pgina que utiliza um modelo, necessrio desanexar primeiro a pgina do modelo. Em seguida, edite a pgina como se nenhum modelo tivesse sido aplicado. Contudo, a pgina no ser mais atualizada quando isso ocorrer com o modelo.
Para desanexar um documento de um modelo: 1 2
Abra o documento a ser desanexado. Escolha Modicar > Modelos > Desanexar de Modelo.
A pgina ser desanexada do modelo e todas as regies se tornaro editveis.
Como modificar os modelos e atualizar o site

Quando for feita uma alterao a um modelo, o Dreamweaver solicitar a atualizao das pginas que o utilizarem. Podem ser utilizados tambm os comandos de atualizao para renovar manualmente a pgina atual ou o site inteiro. A aplicao dos comandos de atualizao funciona da mesma maneira que a reaplicao do modelo.
Para abrir o modelo utilizado para criar o documento atual:
Escolha Modicar > Modelos > Abrir o modelo anexado. Modique o contedo do modelo conforme a necessidade. Para modicar as propriedades da pgina do modelo, escolha Modicar > Propriedades da pgina. Os documentos criados a partir de um modelo herdaro as propriedades da pgina do mesmo, com exceo do ttulo da pgina.
Para atualizar o documento atual em relao verso mais recente de um modelo:
Escolha Modicar > Modelos > Atualizar a pgina atual.
369
Para atualizar o site inteiro ou todos os documentos que utilizam um modelo especfico: 1
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: Escolha Site inteiro e, em seguida, selecione o nome do site. Esse procedimento atualiza todas as pginas no site escolhido em relao ao modelo. Escolha Arquivos que utilizam e, em seguida, escolha o nome do modelo. Este procedimento atualiza todas as pginas no site atual s quais foi aplicado o modelo selecionado.
3 4
Verique se a opo Modelos est selecionada na opo Atualizar. Clique em Iniciar.
Como importar e exportar o contedo XML

Se voc utilizar XML em suas pginas da Web, utilize os recursos de importao e exportao de XML, a m de lidar com o contedo XML. possvel exportar as regies editveis de um documento que utiliza um modelo, para que voc possa trabalhar com este contedo fora do Dreamweaver, ou mesclar o contedo de um documento XML com um modelo j existente do Dreamweaver.
Para exportar as regies editveis do documento como XML: 1
Escolha Arquivo > Abrir e abra um documento que utilize um modelo (e tenha regies editveis). Escolha Arquivo > Exportar > Exportar as regies editveis como XML. Na caixa de dilogo de XML, escolha uma notao de rtulo e clique em OK. Consulte Como utilizar as notaes de rtulos XML, na pgina 372. Na caixa de dilogo que aparecer, digite um nome para o arquivo XML e clique em Salvar. Quando o documento for exportado, o arquivo XML gerado conter o nome do modelo que o documento est utilizando e todos os nomes das regies editveis.
2 3
370
Captulo 14
Para importar um contedo XML: 1 2
Escolha Arquivo > Importar XML para o modelo. Selecione o arquivo XML e clique em Abrir. Quando o arquivo XML for importado, o Dreamweaver mesclar o contedo XML com o modelo especicado no arquivo XML e exibir o resultado em uma nova janela do documento. Se o modelo especicado no for localizado, o Dreamweaver solicitar a escolha de outro modelo a ser utilizado.
Sobre o XML XML signica Extensible Markup Language, uma linguagem de markup para documentos estruturados. XML deriva-se de SGML, a linguagem padro de markup generalizado; assim como SGML, XML uma linguagem para denir rtulos e as relaes entre os mesmos. semelhante a uma generalizao da HTML, que permite que voc crie os seus prprios rtulos. Os rtulos de XML se assemelham aos de HTML: eles consistem de um nome de rtulo mais os atributos opcionais, envolvidos por sinais de maior e menor. Como em HTML, so utilizados um rtulo de abertura e outro de fechamento (nos quais o nome do rtulo precedido por uma barra inclinada) para marcar o contedo entre os rtulos. Uma diferena entre as sintaxes que, em XML, um rtulo vazio (sem contedo, como <img>) dever terminar com uma barra inclinada logo antes do sinal de maior. Por exemplo: a aparncia de um rtulo <img> em XML poder ser:
<img src="test.png" />
Para obter mais informaes sobre XML, consulte Recursos de tecnologias de Web e HTML, na pgina 19.
371
Como utilizar as notaes de rtulos XML O Dreamweaver permite exportar contedos XML utilizando uma das duas notaes de rtulos: rtulos de nomes das regies editveis ou rtulos XML padro do Dreamweaver. A notao utilizada depender da maneira como o contedo XML ser incorporado ao site da Web. O seguinte cdigo XML foi exportado de um documento que se baseou em um modelo denominado newstemplate. O documento contm uma regio editvel chamada Edit-Region. Os rtulos dos nomes das regies editveis utilizam os nomes das regies editveis como rtulos XML. Neste exemplo, o rtulo doctitle identica o ttulo do modelo e Edit-Region refere-se regio editvel.
<doctitle> <![CDATA[<title>newstemplate</title>]]> </doctitle> <Edit-Region> <![CDATA[{Edit-Region}]]> </Edit-Region>
Os rtulos XML padro do Dreamweaver utilizam o rtulo item name. Neste exemplo, item name="doctitle" e item name="Edit-Region" so utilizados para identicar o ttulo do modelo e a regio editvel.
<item name="doctitle"> <![CDATA[ <title>newstemplate</title>]]> </item> <item name="Edit-Region"> <![CDATA[{Edit-Region}]]></item> </item>
Sobre os itens de biblioteca

As bibliotecas contm elementos de pginas como, por exemplo, imagens, texto e outros objetos, a serem reutilizados ou atualizados com freqncia no site da Web. Estes elementos so denominados itens de biblioteca. Quando um item de biblioteca for colocado em um documento, o Dreamweaver inserir uma cpia do cdigo de origem de HTML no arquivo e criar uma referncia ao item externo original. A referncia ao item externo da biblioteca torna possvel a atualizao simultnea do contedo de um site inteiro, por meio da alterao do item de biblioteca e, em seguida, da emisso dos comandos de atualizao no submenu Modicar > Biblioteca. O Dreamweaver armazena os itens de biblioteca na pasta Biblioteca, contida na pasta raiz local de cada site. possvel denir uma biblioteca diferente para cada site. Para obter mais informaes sobre a pasta raiz local de cada site, consulte Como criar um site local, na pgina 77.
372
Captulo 14
Como criar um item de biblioteca Nesse caso, selecione uma parte da seo BODY do documento e o Dreamweaver converter a rea selecionada em um item de biblioteca. Os itens de biblioteca incluem qualquer elemento do BODY incluindo texto, tabelas, formulrios, imagens, applets de Java, plug-ins e elementos ActiveX. O Dreamweaver armazena apenas uma referncia dos itens vinculados, como as imagens. O arquivo original deve permanecer no local especicado para que o item de biblioteca funcione corretamente. Os itens de biblioteca tambm podem conter comportamentos, porm h requisitos especiais para a edio dos comportamentos neses itens; consulte Como editar um comportamento em um item de biblioteca, na pgina 376. Os itens de biblioteca no podem conter linhas de tempo ou folhas de estilos porque o cdigo para esses elementos faz parte da seo HEAD (CABEALHO).
Para criar um item de biblioteca: 1
Selecione uma parte de um documento, para salv-la como um item de biblioteca. Siga um dos procedimentos abaixo: Escolha Janela > Biblioteca, e arraste a seleo para a paleta de bibliotecas. Na paleta de bibliotecas, clique no boto do menu contextual e, em seguida, selecione Criar item de biblioteca. Clique no cone de Novo item de biblioteca, na rea inferior direita da paleta de bibliotecas. Escolha Modicar > Biblioteca > Adicionar objeto biblioteca. Digite um nome para o novo item de biblioteca.
Como definir as preferncias de biblioteca A cor de realce dos itens de biblioteca pode ser personalizada, alm de mostrada ou ocultada nas preferncias de realce.
Para alterar a cor de realce de itens de biblioteca: 1 2 3
Escolha Editar > Preferncias e selecione Realce. Clique na caixa de cores para selecionar uma cor para os itens de biblioteca. Selecione Mostrar, para alternar a exibio da cor de realce da biblioteca. A opo Exibir > Elementos invisveis tambm dever estar ativa, para que a cor de realce da biblioteca que visvel na janela do documento.
Clique em OK, para fechar a caixa de dilogo Preferncias.
373
Como adicionar um item de biblioteca a uma pgina Quando um item de biblioteca for adicionado a uma pgina, o contedo atual ser inserido no documento junto com uma referncia ao item original. Aps a insero do contedo, no necessrio que o item original esteja presente para que o contedo seja exibido.
Para adicionar um item de biblioteca: 1 2 3
Coloque o ponto de insero na janela do documento. Escolha Janela > Biblioteca, ou clique no boto Biblioteca, no Iniciador. Arraste um item da paleta de bibliotecas at a janela do documento, ou selecione um item e clique em Inserir. Para inserir o contedo do item sem criar uma ocorrncia deste no documento, pressione Control (no Windows) ou a tecla Option (no Macintosh) enquanto arrasta um item para fora da paleta de bibliotecas.
Como alterar um item de biblioteca A edio de um item de biblioteca altera o arquivo original do mesmo. O Dreamweaver permite optar pela atualizao do item editado em todos os documentos no site atual, renomeao dos itens para que percam a conexo com documentos ou modelos, e pela excluso dos itens de uma biblioteca.
Nota: A paleta de estilos CSS e os inspetores 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 faz parte da seo do HEAD, enquanto que o inspetor de comportamentos no estar disponvel porque ele insere cdigo nas sees do HEAD e do BODY. Para obter instrues sobre a edio de comportamentos, consulte Como editar um comportamento em um item de biblioteca, na pgina 376. Para editar um item de biblioteca: 1 2
Escolha Janela > Biblioteca, ou clique em Biblioteca, no Iniciador. Selecione um item de biblioteca e clique no cone de Abrir (o cone correspondente pasta), situado na parte inferior da paleta, ou clique duas vezes no item. O Dreamweaver abrir uma nova janela para a edio do item de biblioteca. Edite o item de biblioteca e, em seguida, salve as suas alteraes.
374
Captulo 14
Na caixa de dilogo que aparecer, escolha se deseja atualizar os documentos no site local com o item de biblioteca editado: Escolha Atualizar, para atualizar todos os documentos no site local com o item de bilioteca editado. 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 as pginas que utilizam um item de bilioteca editado: 1 2
Escolha Modicar > Biblioteca > Atualizar as pginas. Na caixa de dilogo que aparecer, escolha os arquivos que sero atualizados. Escolha Site inteiro, para atualizar todos os documentos no site especicado. Escolha Arquivos que utilizam, para atualizar todo os documentos que utilizam o item de biblioteca especicado.
Clique em Iniciar.
O contedo do item de biblioteca ser substitudo nos documentos especicados.

Para renomear um item de biblioteca: 1 2 3 4
Selecione um item de biblioteca na paleta de bibliotecas. Clique no nome do item. Digite um novo nome. Quando voc clicar em OK, o Dreamweaver perguntar se deseja atualizar os arquivos que utilizam o item. Se voc clicar em Sim, todos os documentos que tiverem utilizado o item anteriormente atualizaro as suas referncias ao novo nome. Se voc clicar em No, os documentos que zerem referncia ao item com o nome antigo no atualizaro automaticamente as suas referncias ao novo nome.
Para excluir um item de uma biblioteca: 1 2 3
Escolha Janela > Biblioteca, ou clique no boto Biblioteca, no Iniciador. Selecione um item na paleta de bibliotecas. Clique no cone de lata de lixo ou pressione a tecla Delete.
A excluso de um item remove-o da biblioteca, mas no altera o contedo dos documentos.
375
Como tornar os itens de biblioteca editveis em um documento Se tiver adicionado um item de biblioteca ao documento e desejar edit-lo especicamente em uma pgina, ser necessrio romper o vnculo entre o item no documento e a biblioteca. Quando a ocorrncia do item de biblioteca tornar-se editvel, essa instncia no poder ser atualizada na biblioteca.
Para tornar editvel um item de biblioteca: 1 2
Selecione um item de biblioteca no documento atual. Siga um dos procedimentos abaixo: Clique em Desanexar do original, no inspetor de propriedades No menu contextual, escolha Desanexar do original.
Como editar um comportamento em um item de biblioteca Quando forem criados itens de biblioteca contendo elementos com anexos de comportamentos, o Dreamweaver copiar o elemento e o seu manipulador de evento (o atributo que especica qual evento dever ser procurado e qual 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, o Dreamweaver inserir automaticamente as funes na seo HEAD (CABEALHO) do documento atual (caso ainda no existam) quando o item de biblioteca for inserido no documento. As funes JavaScript no so armazenadas com o item de biblioteca porque so elementos do HEAD e os itens de biblioteca podem conter apenas elementos do BODY. Por isso, o inspetor de comportamentos no estar disponvel durante a edio de um item de biblioteca, pois apenas a metade do cdigo de comportamento estar disponvel para inspeo. preciso inicialmente tornar o item de biblioteca editvel, para poder edit-lo; em seguida, recrie o item aps fazer as alteraes.
Para editar um comportamento em um item de biblioteca: 1
Abra um documento que contenha o item de biblioteca. Anote o nome do item, bem como os rtulos exatos 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 anexo de comportamento. Escolha Janela > Comportamentos, para abrir o inspetor de comportamentos e, em seguida, clique duas vezes na ao a ser alterada.
3 4
376
Captulo 14
5 6 7 8
Na caixa de dilogo que aparecer, faa as alteraes necessrias e clique em OK. Escolha Janela > Biblioteca, para abrir a paleta de bibliotecas. Exclua o item de biblioteca original. Na janela do documento, selecione os elementos que compem o item de biblioteca. Selecione com cuidado exatamente os mesmos elementos contidos no item de biblioteca original.
Na paleta de bibliotecas, utilize o menu contextual para selecionar Criar item de biblioteca e d ao novo item 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 nas pginas do site, siga um dos procedimentos abaixo Escolha Modicar > Biblioteca > Atualizar as pginas. Utilize o menu contextual e, em seguida, selecione Atualizar as pginas. Na caixa de dilogo Atualizar as pginas, no menu pop-up Procurar em, selecione Arquivos que utilizam. O nome do item de biblioteca recm-criado dever aparecer no menu pop-up adjacente.
10
11
12 13
Selecione Atualizar os itens de biblioteca, e clique em Iniciar. Clique em Fechar, para sair da caixa de dilogo Atualizar as pginas.
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 recri-lo aps a edio. Clique duas vezes em um item de biblioteca para abrir o inspetor de propriedades.
Orig
exibe o nome e a localizao do arquivo de origem do item de biblioteca. abre o arquivo de origem do item de biblioteca.
Abrir
rompe o vnculo entre o item de biblioteca selecionado e o seu arquivo de origem. Quando um item for desanexado, ele deixar de ser um item de biblioteca, tornando-se editvel. Tambm possvel escolher Desanexar do original, no menu contextual, para desanexar um item da biblioteca.
Desanexar do original Recriar substitui
o item de biblioteca original pela seleo atual. Utilize esta opo para recriar os itens de biblioteca se o arquivo de biblioteca no estiver presente, o nome do item for alterado ou caso o item tenha sido editado.
377
Como utilizar a paleta de bibliotecas A paleta de bibliotecas exibe todos os itens contidos no arquivo de bibliotecas do site local atual.
Para exibir a paleta de bibliotecas:
Escolha Janela > Biblioteca.

Para adicionar um item de biblioteca a um documento, siga um dos procedimentos abaixo:
Selecione e arraste um item da lista Paleta de bibliotecas at o documento Selecione um item da lista Paleta de bibliotecas e, no menu contextual, escolha Adicionar pgina.
Para abrir um item de biblioteca:
Na lista Paleta de bibliotecas, clique no item de biblioteca a ser aberto com o boto direito do mouse (no Windows), ou clique nele mantendo a tecla Control pressionada (no Macintosh) e, no menu contextual, escolha Abrir. Na lista Paleta de bibliotecas, clique duas vezes no item a ser aberto. Selecione o item na lista Paleta de bibliotecas e, em seguida, clique no cone de Abrir o item de biblioteca (o cone correspondente pasta, na parte inferior da paleta), para poder alterar o item. Opes da paleta de bibliotecas Estes comandos esto disponveis no menu contextual Paleta de bibliotecas.
Criar item de biblioteca (cone de documento) adiciona a seleo atual da janela do
documento biblioteca como um novo item.

Excluir (cone de lata de lixo) Renomear
remove o item selecionado da biblioteca. abre o item selecionado em uma nova janela
renomeia o item selecionado.
Abrir (cone correspondente pasta)
para edio. coloca na posio do ponto de insero o item de biblioteca selecionado na pgina. No h um cone para este comando; ele pode ser selecionado no menu contextual.
Adicionar pgina Selecionar na janela do site Atualizar as pginas
seleciona o item realado na janela do documento.
abre a caixa de dilogo Atualizar as pginas, que permite atualizar o site ou arquivos que utilizam o item da biblioteca.
378
Captulo 14
Como utilizar as server-side includes

As server-side includes (incluses do servidor) so instrues destinadas ao servidor para que ele inclua o arquivo especicado no documento atual. Como o processamento das incluses ocorre no servidor, o contedo includo normalmente no aparecer quando o documento for aberto localmente em um navegador. Contudo, o Dreamweaver exibe as server-side includes, tanto na janela do documento como na janela de visualizao do navegador. Para poder exibir o contedo includo, o Dreamweaver utiliza um conversor que reete a maneira que o servidor utilizaria para processar as instrues contidas na incluso. Quando uma server-side include for colocada em um documento, ser inserida apenas uma referncia a um arquivo externo. O Dreamweaver exibir o contedo do arquivo externo na janela do documento, facilitando assim o desenho das pginas, porm esse contedo 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.
Para inserir uma server-side include: 1
Escolha Inserir > Server-side include, ou clique no boto SSI, no painel Comuns, da paleta de objetos. Na caixa de dilogo que aparecer, clique no cone correspondente pasta, para procurar um arquivo ou digite o caminho at o arquivo a ser includo. Em seguida, clique em OK.
Como exibir as server-side includes no Dreamweaver Como padro, o Dreamweaver processa todas as server-side includes (incluses do servidor) incondicionais e exibe-as na janela do documento.
Para especificar os arquivos que sero processados ou desativar o processamento das server-side includes: 1 2
Escolha Editar > Preferncias > Converso. Na lista de conversores, selecione Server-side includes.
379
Selecione uma das seguintes opes para converter as server-side includes:

Em todos os arquivos a denio padro; deixe esta opo ativa, a m de exibir o contedo dos arquivos includos na janela do documento. Em nenhum arquivo
desativa todos os processamentos de server-side includes
no Dreamweaver. acarreta o processamento, pelo Dreamweaver, das server-side includes apenas nos arquivos com as extenses .stm, .html, .htm, .shtml ou .shtm.
Nos arquivos com extenses Nos arquivos com uma das seguintes expresses acarreta o processamento, pelo
Dreamweaver, do documento, a m de detectar coincidncias relativas s expresses comuns e, se no forem detectadas, sero processadas as server-side includes contidas no documento. Como editar uma server-side include Assim como os itens de biblioteca, as server-side includes (incluses do servidor) so selecionadas como um conjunto nico na janela do documento. Ao contrrio dos itens de biblioteca, o HTML contido em uma incluso no aparecer no inspetor de origem de HTML. Em vez disso, ser mostrada a instruo do servidor, que tem esta aparncia:

Para poder editar o contedo associado a este arquivo includo, abra o arquivo.
Para editar uma server-side include: 1
Selecione uma server-side include na janela do documento ou no inspetor de origem de HTML 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 so transpostas imediatamente para o documento atual e em qualquer documento subseqente que seja aberto e inclua esse arquivo.
380
Captulo 14
15
CAPTULO 15
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como criar formulrios
Os formulrios permitem coletar informaes dos usurios. Entre os usos mais comuns dos formulrios, destacam-se as pesquisas, formulrios de pedidos e interfaces de busca. Os formulrios necessitam de dois componentes: O cdigo de origem de HTML que o descreve e um aplicativo do servidor ou roteiro do cliente que possa processar as informaes digitadas pelo usurio nos campos do formulrio criados pelo HTML. Utilize o Dreamweaver para criar formulrios, adicionar objetos a eles e (atravs da utilizao de comportamentos) para validar as informaes digitadas pelo usurio. necessrio utilizar um editor de texto para gravar um roteiro ou aplicativo para processar os dados do formulrio. Perl a linguagem mais comum de criao de roteiros para o processamento de formulrios; C, Java e at mesmo JavaScript so outras opes possveis. Os formulrios do Dreamweaver podem incluir objetos padro, como campos de texto, botes, campos de imagens, caixas de seleo, botes de opo, menus de lista, campos de arquivos e campos ocultos. O Dreamweaver tambm oferece suporte aos tipos de entrada que ele no for capaz de reconhecer, exibindo propriedades de campos genricos, no inspetor de propriedades. Consulte Propriedades de campos genricos, na Ajuda do Dreamweaver.
381
Como criar um formulrio

Utilize o comando Inserir > Formulrio ou o painel Formulrios da paleta de objetos, para criar um formulrio.
Para criar um formulrio: 1
Siga um dos procedimentos abaixo: Coloque o ponto de insero no local onde deseja colocar o formulrio e escolha Inserir > Formulrio. Posicione o ponto de insero no local onde deseja colocar o formulrio e clique no boto Formulrio, no painel Formulrios da paleta de objetos. Arraste o boto Formulrio at o local desejado na pgina. Se no houver qualquer resultado visvel, verique se a opo Exibir > Elementos invisveis est ativada.
Selecione o formulrio e dena as propriedades deste no inspetor de propriedades. Escolha dentre as seguintes opes:
Nome do formulrio atribui um nome ao formulrio. O procedimento de nomear um formulrio possibilita control-lo com uma linguagem de criao de roteiros, como JavaScript ou VBScript, por exemplo.
identica o aplicativo do servidor que processa as informaes do formulrio, especicadas como URL. Clique no cone da pasta, para localizar o aplicativo, ou digite o caminho correspondente a ele.
Ao Mtodo 3
dene a maneira como sero processados os dados do formulrio.
No inspetor de propriedades, escolha um dos seguintes mtodos de processamento dos dados do formulrio:
Obter acrescenta valores do formulrio URL e envia uma solicitao GET ao servidor. Como o tamanho das URLs est limitado a 8192 caracteres, no utilize o mtodo GET com formulrios longos. Enviar envia os valores do formulrio no corpo de uma mensagem e uma solicitao POST ao servidor. Padro
utiliza o mtodo padro do navegador (geralmente GET).
382
Captulo 15
Como adicionar um objeto a um formulrio

Depois de adicionar um objeto a um formulrio, possvel denir as suas propriedades, utilizando o inspetor de propriedades.
Para adicionar um objeto a um formulrio: 1
Siga um dos procedimentos abaixo: Posicione o ponto de insero dentro dos limites do formulrio e escolha um objeto no menu Inserir > Objeto de formulrio. Posicione o ponto de insero dentro dos limites do formulrio e clique em um boto de objeto no painel Formulrios, localizado na paleta de objetos. Arraste um boto de objeto at o local desejado dentro dos limites do formulrio.
Especique as propriedades do objeto no inspetor de propriedades (escolha Janela > Propriedades, para exibir o inspetor de propriedades, se este j no estiver aberto).
Campos de texto aceitam qualquer tipo de texto: alfabtico ou numrico. O texto digitado pode ser exibido como uma linha simples, linhas mltiplas, marcadores ou asteriscos (com a nalidade de proteger as senhas). Consulte Propriedades de campos de texto, na Ajuda do Dreamweaver. Botes realizam tarefas quando forem clicados, como o envio e redenio dos formulrios. possvel digitar um identicador personalizado para um boto ou utilizar um dos identicadores predenidos. Consulte Propriedades dos botes, na Ajuda do Dreamweaver. Campos de imagens podem ser utilizados no lugar dos botes Enviar. Consulte Propriedades de campos de imagens, na Ajuda do Dreamweaver.
permitem mltiplas respostas em um nico grupo de opes. Consulte Propriedades das caixas de seleo, na Ajuda do Dreamweaver.
Caixas de seleo Botes de opo representam opes exclusivas. A seleo de um dos botes do grupo cancela a seleo de todos os outros. Consulte Propriedades dos botes de opo, na Ajuda do Dreamweaver. Menus de lista apresentam um conjunto de valores que os usurios podero escolher. O objeto poder apresentar um menu pop-up, que aparecer apenas quando o usurio clicar no nome do objeto (e aceitar apenas uma opo), ou uma caixa de listagem, que sempre exibir os valores em uma lista de rolagem (e aceitar mais de uma opo). Consulte Propriedades dos menus de lista, na Ajuda do Dreamweaver. Campos de arquivos permitem que o usurio procure os arquivos nos discos rgidos, carregando-os como dados do formulrio. Consulte Propriedades dos campos de arquivos, na Ajuda do Dreamweaver.
383
Campos ocultos
permitem armazenar informaes (como o destinatrio dos dados do formulrio ou o assunto do formulrio) que no forem relevantes ao usurio, mas que sero utilizadas pelo aplicativo que processa o formulrio. Consulte Propriedades dos campos ocultos, na Ajuda do Dreamweaver.
Menu de salto permite inserir um menu no qual cada opo se vincula a um documento ou arquivo. Consulte Como criar menus de salto, na pgina 122. 3
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 alterar as caractersticas da fonte, na pgina 179.
Como processar os formulrios

Os formulrios so processados pelo roteiro ou aplicativo especicado no atributo ACTION do rtulo FORM. Selecione um formulrio e examine a ao a ele associada no inspetor de propriedades. Os formulrios mais simples utilizam JavaScript ou VBScript para efetuar todo o processamento dos formulrios no cliente (o que evita a necessidade de enviar os dados do formulrio ao servidor para o processamento). Por exemplo: imagine que voc esteja lidando com um pequeno formulrio, situado na parte inferior de uma pgina que contm apenas dois botes de opo, identicados por Sim e No, alm de um boto Enviar. possvel que a ao do formulrio seja uma funo JavaScript, denida na seo HEAD do documento, que exibir um alerta se o usurio selecionar Sim, e outro alerta, se o usurio selecionar No:
funo processForm(){ if (document.forms[0].elements[0].checked){ alert('Sim'); }else{ alert('No'); } } Para poder utilizar uma funo JavaScript do cliente como a ao do formulrio: 1 2
Selecione um boto Enviar em um formulrio. Anexe o comportamento Call JavaScript ao boto. Consulte Chamar o JavaScript, na pgina 309. 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.
384
Captulo 15
possvel lidar com muitas tarefas de processamento de formulrios utilizando os recursos de criao de roteiros 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 roteiro Common Gateway Interface (CGI), por exemplo. Os roteiros CGI podem ser escritos em Perl, C, Java ou outra linguagem de programao. H vrios sites na Web que oferecem roteiros CGI para utilizao gratuita, ou para serem modicados, de acordo com as suas necessidades. Consulte Recursos de tecnologias de Web e HTML, na pgina 19. Tambm possvel perguntar ao provedor de servios da Internet ou equipe da Web se h qualquer roteiro CGI disponvel que j esteja congurado para a execuo no seu servidor. Para examinar uma introduo criao de roteiros CGI, consulte os recursos CGI , listados em Recursos de tecnologias de Web e HTML, na pgina 19.
Como utilizar os comportamentos com formulrios

possvel anexar comportamentos aos formulrios e objetos de formulrios utilizando qualquer um dos comportamentos que aparecem no inspetor de comportamentos quando o formulrio ou objeto de formulrios for selecionado. Os comportamentos Validar o formulrio e Denir o texto do campo de texto estaro disponveis apenas se tiver sido inserido um campo de texto no documento. Ao anexar o comportamento Validar o formulrio a um objeto de formulrio, necessrio especicar o campo de texto que dever ser validado. Por exemplo: se for anexado Validar o formulrio ao boto Enviar, especique um campo de texto criado para Nome. Ao aplicar comportamentos, necessrio se assegurar que todos os objetos do formulrio no documento tenham um nome exclusivo. Se for utilizado o mesmo nome para dois objetos diferentes, possvel que os comportamentos no funcionem adequadamente mesmo se os objetos estiverem em formulrios diferentes. Observe que, no Dreamweaver 2, os nomes exclusivos de objetos de formulrios (em formulrios diferentes da mesma pgina) no eram necessrios. Se houver alguma pgina que tenha sido criada no Dreamweaver 2 com elementos de diversos formulrios com o mesmo nome, modique a pgina, a m de poder associar os comportamentos a ela.
385
Duas outras diretrizes para a nomeao de objetos: Os nomes de objetos dos formulrios (assim como outros objetos) devem se iniciar com uma letra (e no com um nmero). No utilize palavras reservadas a JavaScript (como top ou navigator) como nomes de objetos. Os dois comportamentos especcos aos formulrios so explicados abaixo. Para obter informaes sobre outros comportamentos, consulte Como utilizar os comportamentos, na pgina 299.
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 334.
substitui o contedo de um campo de texto pelo contedo especicado. Consulte Denir o texto do campo de texto, na pgina 328.
Definir o texto do campo de texto
386
Captulo 15
16
CAPTULO 16
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Como personalizar o Dreamweaver
O 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 na paleta de objetos, para que aqueles utilizados com mais freqncia estejam sempre visveis, crie novos painis para reordenar os objetos ou adicione novos objetos. Consulte Como alterar a paleta de objetos, na pgina 388. Modique os atalhos de teclado ou os nomes dos itens de menu, adicione novos comandos e remova os j existentes dos menus. Consulte Como personalizar os menus do Dreamweaver, na pgina 391. Edite o perl de formatao de origem, para obter um controle mais preciso sobre o HTML criado pelo Dreamweaver. O arquivo SourceFormat.txt inclui todas as denies das preferncias de formato HTML e muitas outras informaes. Consulte Como editar o perl de formatao da origem de HTML, na pgina 396. Crie os seus comandos e paletas utuantes ao utilizar JavaScript. Consulte Extenso dos recursos do Dreamweaver: Princpios bsicos, na pgina 401. Altere a maneira como os rtulos de outros fabricantes (como ASP e ColdFusion) aparecem na janela do documento. Consulte Como personalizar a interpretao e a aparncia dos rtulos de outros fabricantes, na pgina 402. Dena as preferncias para todos os itens, desde os esquemas de cores e realce s conguraes do site e navegadores. Consulte Como denir as preferncias, na pgina 71.
387
Como alterar a paleta de objetos

Como padro, a paleta de objetos dividida em seis painis: Caracteres, Comuns, Formulrios, Molduras, Cabealho e Invisveis. Para obter informaes sobre esses pains, consulte Como utilizar a paleta de objetos, na pgina 68. Os painis correspondem s pastas contidas na pasta Conguration/Objects, dentro da pasta do aplicativo do Dreamweaver. Para cada objeto da paleta de objetos, h dois ou trs arquivos na pasta correspondente: Um arquivo GIF que contm um cone correspondente ao objeto Um arquivo HTML que contm o HTML a ser inserido no seu arquivo ou um formulrio HTML que permite especicar os dados a serem includos (por exemplo: o texto de um comentrio) Um arquivo JavaScript (opcional) que gera o HTML a ser includo no seu arquivo Voc pode mover objetos de um painel para outro, renomear painis e remover objetos de uma paleta. Uma vez feitas as alteraes, as extenses podem ser recarregadas, para que essas modicaes apaream na paleta de objetos.
Para mover um objeto de um painel para outro da paleta de objetos:
Mova os arquivos HTML e GIF do objeto (e o arquivo JavaScript, se houver) de uma pasta para outra, dentro da pasta Conguration/Objects. Certique-se de ter movido todos os arquivos do objeto.
Para renomear um painel na paleta de objetos:
Renomeie a pasta correspondente, contida em Conguration/Objects.

Para remover um objeto da paleta de objetos:
Mova os arquivos HTML, GIF e JavaScript correspondentes ao objeto para fora da pasta Conguration/Objects.
Para recarregar as extenses aps ter feito as alteraes na pasta Configuration/ Objects: 1
Pressione a tecla Control e clique (no Windows), ou pressione a tecla Option e clique (no Macintosh), no menu pop-up, no alto da paleta de objetos. Escolha Recarregar as extenses.
388
Captulo 16
Como criar um objeto simples

Muitos objetos simples no necessitam de JavaScript, eles contm apenas o HTML que ser includo no documento. Para obter informaes bsicas sobre a criao de objetos mais complexos utilizando a linguagem JavaScript, consulte Extenso dos recursos do Dreamweaver: Princpios bsicos, na pgina 401.
Para criar um objeto simples: 1
Crie um novo documento em branco em um editor de texto (por exemplo: BBEdit ou HomeSite). O inspetor de origem de HTML do Dreamweaver pode ser utilizado como editor de texto, mas necessrio excluir, primeiro, todos os rtulos que aparecem no inspetor de HTML, quando um novo documento for criado.
Digite ou cole os rtulos que este objeto deve inserir nos documentos. Por exemplo, digite:
 © 2000 DCD Productions, Inc. Todos os direitos reservados 
Salve o arquivo. Se desejar que o objeto aparea em um dos painis existentes na paleta de objetos, salve-o em uma das pastas Objects (Caracteres, Comuns, Formulrios, Molduras, Cabealho ou Invisveis). Para criar um novo painel, crie uma subpasta na pasta Conguration/Objects e salve o arquivo nesse local. As pastas adicionais contidas em qualquer subpasta do painel (como as pastas criadas na subpasta Caracteres) sero ignoradas.
Em um programa grco ou de edio de imagens (como o Fireworks da Macromedia), crie uma imagem GIF com 18 x 18 pixels, que corresponder ao cone do objeto na paleta de 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 na paleta de objetos.
D ao cone o mesmo nome de arquivo que o do objeto e salve-o no diretrio em que estiver o arquivo do objeto. Por exemplo: se o objeto se chamar Copyright_DCD.htm e tiver sido salvo no diretrio Comuns, denomine o cone Copyright_DCD.gif e salve esse arquivo no mesmo diretrio.
Reinicie o Dreamweaver para utilizar o novo objeto. O objeto aparecer na parte inferir do menu Inserir e tambm na paleta de objetos.
389
Como alterar o tipo de arquivo padro

Como padro, o Dreamweaver mostra todos os tipos de arquivos que reconhece na caixa de dilogo Arquivo > Abrir. Voc poder usar um menu pop-up na caixa de dilogo, para limitar a exibio a determinados tipos de arquivos. Se a maior parte do trabalho envolver um tipo de arquivo especco (como os arquivos ASP), pode-se alterar a exibio padro.
Para alterar o tipo de arquivo padro do Dreamweaver aberto segundo a opo Arquivo > Abrir: 1
Faa uma cpia de segurana do arquivo Extensions.txt, contido na pasta Conguration, para o caso de precisar restaurar os padres posteriormente. Abra o arquivo Extensions.txt em um editor de texto. No o abra no Dreamweaver. Recorte a linha correspondente ao novo padro e cole-a no local da primeira linha do arquivo. Salve o arquivo e reinicie o Dreamweaver para ver o novo padro.
Para adicionar novos tipos de arquivos ao menu na caixa de dilogo Arquivo > Abrir: 1
Faa uma cpia de segurana do arquivo Extensions.txt, contido na pasta Conguration, caso precise restaurar os padres, posteriormente. Abra o arquivo Extensions.txt em um editor de texto. No o abra no Dreamweaver. Adicione uma nova linha ao arquivo para cada novo tipo de arquivo. Em letras maisculas, 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 no menu Arquivo > Abrir. Por exemplo: para os arquivos JPEG, digite
Arquivos de imagem JPG,JPEG,JFIF:JPEG
Salve o arquivo e reinicie o Dreamweaver para ver as alteraes.
390
Captulo 16
Como personalizar os menus do Dreamweaver

O Dreamweaver cria todos os menus com a estrutura denida em um arquivo XML, denominado menus.xml e situado na subpasta Conguration/Menus, dentro da pasta do aplicativo do Dreamweaver. A edio desse arquivo modicar os menus do Dreamweaver na prxima vez que o programa for iniciado. Para obter informaes bsicas sobre a XML, consulte Sobre o XML, na pgina 371. possvel adicionar, alterar e remover atalhos de teclado para os itens de menu, editando o arquivo menus.xml. Os itens de menu tambm podem ser reordenados, renomeados e removidos.
Nota: Sempre faa uma cpia de segurana do arquivo menus.xml em uso ou de qualquer arquivo de congurao do Dreamweaver, antes de modic-lo. fcil cometer erros ao editar o arquivo de congurao de menus e, no Dreamweaver, no h qualquer modo de reverter ao conjunto anterior de menus. Contudo, a pasta Conguration contm uma cpia de segurana do arquivo menus.xml padro, denominada menus.bak; para reverter ao conjunto de menus padro, substitua o menus.xml por uma cpia do menus.bak.
Como editar o menu Comandos Determinados comandos podem ser adicionados ao menu Comandos, alterando os seus nomes, sem editar o arquivo menus.xml. Para criar novos comandos que so colocados automaticamente no menu Comandos, utilize a paleta de histrico (consulte Como criar novos comandos a partir de etapas do histrico, na pgina 101). Para alterar os nomes dos comandos criados ou exclu-los do menu Comandos, escolha Comandos > Editar a lista de comandos. Observe que, quando um comando for excludo do menu utilizando esse mtodo, o arquivo que contm o comando ser tambm removido.
Nota: Para reordenar os itens no menu Comandos, ou para mover os itens entre os menus, o arquivo menus.xml deve ser editado. O termo comando tem dois signicados no Dreamweaver. Um comando um tipo especco de extenso, no sentido estrito e do ponto de vista de um programador de extenses. Contudo, em determinados contextos, a palavra comando utilizada como sinnimo de item de menu signicando qualquer item que aparea em um menu do Dreamweaver, sem levar em conta a sua funo ou como implementado.
391
Sobre a sintaxe de menus Tenha cuidado ao modicar os menus. O Dreamweaver ignora qualquer menu ou item de menu que contenha um erro de sintaxe XML. O arquivo menus.xml contm uma lista estruturada de menus, barras de menus e itens de menu. Uma barra de menus (marcada com rtulos de abertura e nalizao MENUBAR) um menu individual ou um conjunto de menus. Por exemplo: h uma barra de menus principal, uma barra de menus especca janela do site (apenas no Windows) e uma barra de menus para cada menu contextual. Cada barra de menus contm um ou mais menus; um menu envolvido pelos rtulos <MENU> e </MENU>. Um menu contm um ou mais itens de menu e cada um dos quais descrito por um rtulo MENUITEM e seus atributos. Um menu podem conter tambm separadores e submenus. Por exemplo: a seguir est parte de uma denio da barra de menus principal (janela do documento):
<menubar name="Main Window" id="DWMainWindow"> <menu name="_File" id="DWMenu_File"> <menuitem name="_New" key="Cmd+N" enabled="true" command="dw.createDocument()" /> ...outros itens de menu, separadores e submenus aqui... </menu> ...outros itens de menu aqui... </menubar>
Como reorganizar os menus Os itens de menu podem ser movidos em um menu ou de um menu para outro, a ordem dos menus pode ser alterada em uma barra de menus e os separadores podem ser adicionados ou removidos dos menus. Observe que os itens podem ser inseridos ou removidos dos menus contextuais, utilizando o mesmo procedimento empregado para outros menus.
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, como BBEdit, HomeSite ou Wordpad (no o abra no Dreamweaver). Recorte um rtulo MENUITEM inteiro, de <menuitem, no incio, at /> , no nal. Coloque o ponto de insero na nova localizao. Cole o item de menu nesse local. Verique se ele est entre um rtulo <MENU> e seu correspondente </MENU>.
4 5 6
Para criar os submenus, aninhe um par de rtulos de abertura e nalizao MENU dentro de um menu. Ou seja, insira um novo par <MENU></MENU> em um menu, em seguida, adicione novos itens de menu entre esses rtulos.
392
Captulo 16
Para inserir um separador entre dois itens de menu:
Digite <SEPARATOR /> entre os dois rtulos MENUITEM. Para remover um separador existente, exclua a linha correspondente a <SEPARATOR />. Sobre a sintaxe dos itens de menu Abaixo esto os atributos do rtulo MENUITEM:
NAME o nome do item que aparece no menu. Um sinal de sublinhado indica que
a letra seguinte o mnemnico do comando (apenas no Windows). Necessrio. utilizado pelo Dreamweaver para identicar o item. O rtulo ID deve ser nico em toda a estrutura do menu. Se forem adicionados novos itens ao arquivo menus.xml, utilize o nome de sua empresa ou uma outra seqncia de caracteres nica como um prexo para cada identicao de item de menu, a m de assegurar a exclusividade. Necessrio.
ID
o atalho de teclado para o comando, se houver algum. Utilize estas seqncias para especicar as teclas modicadoras:
KEY Cmd Alt
especica a tela Control (no Windows) ou Command (no Macintosh).
e Opt respectivamente especicam a tecla Alt (no Windows) ou Option (no Macintosh).
Shift Ctrl
especica a tecla Shift em ambas as plataformas.
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 especicadas pelo nome: F1 a F12, PgDn, PgUp, Home, End, Ins, Del, tabulao, Esc, BkSp e espao. As teclas modicadoras tambm podem ser aplicadas s teclas especiais. indica a plataforma na qual o item aparece. Os valores vlidos so win, signicando apenas Windows, ou mac, indicando apenas Macintosh. O padro (se esse atributo no for especicado) que o item aparea em ambas as plataformas.
PLATFORM
o nome de uma funo JavaScript que determina se o item de menu est ativado. Se a funo retornar false, o item de menu estar desativado.
ENABLED
uma expresso JavaScript que ser executada quando o usurio selecionar esse item no menu. Nos cdigos JavaScript complexos, utilize um arquivo JavaScript (especicado com o atributo FILE). FILE ou COMMAND deve ser especicado para cada item de menu.
COMMAND
393
FILE o nome do arquivo HTML que contm o JavaScript que controla o item de menu. O caminho especicado no atributo FILE relativo pasta Conguration. Observe que o atributo FILE anula os atributos COMMAND, ENABLED e CHECKED. FILE ou COMMAND deve ser especicado para cada item de menu. Para obter
informaes sobre a criao de um arquivo de comando utilizando a paleta de histrico, consulte Como criar novos comandos a partir de etapas do histrico, na pgina 101. Consulte Extenso dos recursos do Dreamweaver, para obter informaes sobre a maneira de escrever os seus prprios comandos JavaScript a partir do zero. 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 essa marca.
CHECKED
se estiver presente, indica que um item de menu determinado dinamicamente, por um arquivo HTML que contm cdigo JavaScript para denir o texto e o estado do item de menu. Se um rtulo for especicado como DYNAMIC, o atributo FILE tambm dever ser denido.
DYNAMIC
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.
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, como BBEdit, HomeSite ou Wordpad (no o abra no Dreamweaver). Procure em Matriz de atalhos de teclado, na pgina 420 e localize um atalho que no esteja sendo utilizado ou algum ao qual pretende dar 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" do item de menu. Localize o item de menu para o qual ser designado 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 dentro do rtulo MENUITEM.
6 7
394
Captulo 16
Entre as aspas do atributo KEY , digite o novo atalho de teclado. Utilize um sinal de adio (+) entre as teclas modicadoras, e entre os modicadores e as teclas de letras. Para obter mais informaes, consulte Sobre a sintaxe dos itens de menu, na pgina 393. Se o atalho de teclado estiver em uso em outro local e caso no tiver sido removida a outra utilizao, o atalho ser aplicado apenas ao primeiro item de menu ao qual foi atribudo no menus.xml.
Nota: Se desejar, voc poder utilizar o mesmo atalho de teclado para um item de menu apenas do Macintosh e para outro apenas do Windows.
Grave o novo atalho no local apropriado da Matriz de Atalhos de Teclado.
Como alterar o nome de um item de menu O nome de qualquer de menu pode ser alterado facilmente.
Para alterar o nome 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 BBEdit, HomeSite ou Wordpad (no o abra no Dreamweaver). Localize o rtulo MENUITEM adequado e altere o valor de seu atributo NAME. No modique o atributo ID do item.
Como personalizar a aparncia das caixas de dilogo

Os layouts das caixas de dilogo para objetos, comandos e comportamentos so especicados como formulrios HTML, nos arquivos HTML do diretrio Conguration, no diretrio do aplicativo do Dreamweaver. Os formulrios podem ser editados com o Dreamweaver; consulte Como criar formulrios, na pgina 381.
Para alterar a aparncia de uma caixa de dilogo: 1
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.
2 3
395
4 5
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.
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 de comentrio obtm a entrada de texto em uma rea de texto, numa caixa de dilogo, em seguida utiliza uma funo JavaScript simples para transform-lo em um comentrio em HTML, que ser inserido no documento. O formulrio que descreve a caixa de dilogo est no arquivo Conguration/Objects/Invisibles/Comment.htm. possvel abrir e alterar o tamanho e outros atributos da rea do texto, mas se for removido todo o rtulo TEXTAREA ou alterado o valor do seu atributo NAME, o objeto de comentrio deixar de funcionar corretamente.
Como editar o perfil de formatao da origem de HTML

O perl de formatao da origem de HTML determina como o Dreamweaver formata o cdigo de origem de HTML de um documento. O perl inclui as preferncias de formatao dos rtulos individuais e dos grupos de rtulos, juntamente com as preferncias de formato HTML (denidas com o comando Editar > Preferncias). O arquivo SourceFormat.txt pode ser editado em um editor de texto, para que se tenha controle preciso sobre a maneira atravs da qual o Dreamweaver grava o HTML. O perl um arquivo de texto salvo na pasta Conguration, contida na pasta do aplicativo do Dreamweaver. As preferncias de formato HTML denidas com o comando Preferncias sero salvas no arquivo SourceFormat.txt quando o Dreamweaver for fechado, e as alteraes feitas no perl no tero efeito, at que o programa seja reiniciado. Por isso, para garantir o acesso s novas denies de preferncias, saia do aplicativo antes de editar o perl. O perl de formatao da origem de HTML segue um formato especco, que descrito no arquivo. Leia as seguintes convenes: Cada seo do perl inicia com um <?keyword> (por exemplo: <?OPTIONS>, <?ELEMENTS>, <?ATTRIBUTES>). Os parmetros de cada seo so denidos nos comentrios em HTML () diretamente acima desta seo.
396
Captulo 16
A linha OMIT na seo <?OPTIONS> reservada para utilizao posterior (atualmente, ela no afeta a formatao da origem de HTML). Um rtulo individual pode ser marcado como pertencente a um grupo de recuo (IGROUP) na seo <?ELEMENTS>. Como padro, IGROUP 1 contm as linhas e colunas da tabela, e IGROUP 2 contm as molduras e os conjuntos de molduras. Esses agrupamentos correspondem s opes Recuar as linhas e colunas da tabela e Recuar as molduras e os conjuntos de molduras, na caixa de dilogo Preferncias de formato HTML. O recuo pode ser desativado para o grupo inteiro, removendo o seu nmero do atributo ACTIVE na seo <?OPTIONS>. Tambm podem ser adicionados outros rtulos a IGROUP 1 ou 2, para controllos com as opes em Preferncias de formato HTML. Por exemplo: as denies padro do rtulo P no SourceFormat.txt so , e produzem o seguinte:
 Um pargrafo de texto recuado na margem esquerda, que tem uma separao antes do rtulo P de abertura e depois do rtulo P de finalizao, mas no depois do rtulo P de abertura nem antes do rtulo P de finalizao. Prximo pargrafo.
Se as denies de forem alteradas, voc obter:

 Um pargrafo de texto que no recuado na margem esquerda e tem uma separao antes e depois do rtulo P de abertura, uma separao antes do rtulo P de finalizao e duas separaes depois do rtulo P de finalizao. Prximo pargrafo. 
Algumas denies de rtulos e atributos incluem os termos NAMECASE ou SAMECASE. NAMECASE especica que o rtulo ou atributo deve ser colocado em maisculas de um determinado modo. Por exemplo: onClick especicado como <onClick namecase="onClick">, indicando que sempre deve ser colocado em maisculas de uma maneira especca, parte em letras maisculas e parte em minsculas. O Dreamweaver utiliza SAMECASE para garantir a utilizao da caixa correta (alta ou baixa) ao gerar determinados atributos; no remova SAMECASE das especicaes de formatao de atributos, onde quer que ele aparea. Qualquer atributo no especicado no arquivo SourceFormat.txt utilizar as denies de formatao padro indicadas no painel de preferncias de formatao HTML.
397
Sobre os perfis de navegadores

Os pers de navegadores so os arquivos aos quais os seus documentos so comparados quando for executada uma vericao do navegador de destino (consulte Como vericar uma pgina quanto compatibilidade com os navegadores de destino, na pgina 167). Cada perl contm informaes sobre os rtulos e atributos HTML que contam com suporte de um determinado navegador. Ele pode conter tambm advertncias, mensagens de erro e sugestes para as substituies de rtulos. Os pers de navegadores so armazenados na pasta Conguration/ BrowserProles, dentro da pasta do aplicativo do Dreamweaver. Voc poder editar os pers existentes ou criar novos com um editor de texto (BBEdit, HomeSite, Bloco de Notas ou SimpleText, por exemplo). No necessrio sair do Dreamweaver para poder editar ou criar os pers de navegadores. Sobre a formatao dos perfis de navegadores Os pers de navegadores seguem um formato especco. Para evitar erros de anlise durante as vericaes dos navegadores de destino, siga estas regras ao editar ou criar os pers: A primeira linha reservada ao nome do perl. Este deve conter, no nal, um retorno de carro. O nome nesta linha aparece na caixa de dilogo Vericao do navegador de destino e no relatrio de vericao do destino. Esse nome deve ser exclusivo. A segunda linha reservada ao designador PROFILE_TYPE=BROWSER_PROFILE. O Dreamweaver utiliza esta linha para determinar quais documentos sero pers de navegadores. Esta linha no deve ser alterada ou movida. Dois hfens (--) no incio de uma linha indicam um comentrio (isto , a linha ser ignorada durante o processo de vericao do destino). Deve aparecer um espao nesses locais: antes do sinal de maior (>) na linha !ELEMENT, aps o parntese de abertura, antes do parntese de fechamento, e antes e depois de cada trao (|) na lista de valores. Deve aparecer 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).
!Error
e !Warning devem aparecer dentro de !ELEMENT ou da rea !ATTLIST.
As mensagens !msg devero conter apenas texto simples. As mensagens !htmlmsg devero conter qualquer HTML vlido, inclusive hipervnculos. Os comentrios em HTML () no podem ser listados como rtulos 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.
398
Captulo 16
A sintaxe de uma entrada de rtulo

<!ELEMENT htmlTag NAME="tagName" > <!ATTLIST htmlTag unsupportedAttribute1!Error !msg="unsupported Attribute1 do htmlTag no conta com suporte. Tente utilizar supportedAttribute1 para obter um efeito semelhante." supportedAttribute1 supported Attribute2( validValue1 | validValue2 | validValue3 ) unsupportedAttribute2!Error !htmlmsg="Nunca utilize esse unsupportedAttribute2 do htmlTag !!" >
onde
htmlTag
o rtulo na forma em que aparece em um documento HTML.
como o rtulo chamado (por exemplo: o rtulo HR chamado de rgua horizontal). O atributo NAME opcional. Se for especicado, tagName ser utilizado na mensagem de erro; caso no seja fornecido um nome, ser utilizado htmlTag.
tagName unsupportedAttribute um atributo que no conta com suporte. Considera-se que os rtulos e atributos que no foram especicamente mencionados no contam com suporte. Especique os rtulos ou atributos sem suporte apenas quando desejar criar uma mensagem de erro personalizada.
um atributo ao qual o htmlTag oferece suporte. Considera-se que apenas os rtulos presentes na lista sem uma designao !Error contam com suporte do navegador.
supportedAttribute validValue
um valor que conta com suporte do atributo.
O exemplo abaixo mostra uma entrada para o rtulo APPLET , que seria preciso para o Navigator 3.0:
<!ELEMENT APPLET Name="Java Applet" > <!ATTLIST APPLET Align ( top | middle | bottom | left | right | absmiddle | absbottom | baseline | texttop ) Alt Archive Class!Warning !htmlmsg=Este navegador ignora o atributo <CODE>CLASS</CODE> do rtulo <CODE>APPLET</CODE>." Code Codebase Height HSpace Class!Warning !htmlmsg="Este navegador ignora o atributo <CODE>ID</CODE> do rtulo <CODE>APPLET</CODE>". Utilize em seu lugar <CODE>NAME</CODE>". Name Style!Warning !htmlmsg="Este navegador ignora o atributo <CODE>STYLE</CODE> do rtulo <CODE>APPLET</CODE>". VSpace Width >
399
Como criar um perfil de navegador Um perl de navegador pode ser criado atravs da modicao de um perl existente. Por exemplo: para criar um perl para o Netscape Navigator 5.0, podese abrir o do Navigator 4.0, adicionar novos rtulos ou atributos da verso 5.0, e salvar o perl como Netscape Navigator 5.0.
Para criar um perfil de navegador: 1
Utilizando um editor de texto, abra o perl mais parecido ao que se deseja criar ou abra o que ser alterado. Altere o nome do perl. O nome do perl aparecer na primeira linha. Dois pers no podem ter o mesmo nome.
Adicione novos rtulos ou atributos, que contem com suporte do navegador, de acordo com a sintaxe mostrada em Sobre a formatao dos pers de navegadores, na pgina 398. Se no desejar receber mensagens de erro sobre um determinado rtulo que no conta com suporte, adicione-o lista de rtulos aos quais oferecido suporte. Caso os rtulos que no contam com suporte sejam inseridos na lista daqueles que contam com suporte, salve o perl em um arquivo separado com um novo nome (como Nomedonavegador x.x limitado). O novo nome do perl serve para preservar o perl original somente com os rtulos que contam com suporte.
Exclua os rtulos 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 rtulos.
400
Captulo 16
Adicione as mensagens de erro personalizadas, de acordo com a sintaxe mostrada em Sobre a formatao dos pers de navegadores, na pgina 398. Os pers que acompanham o Dreamweaver contm uma lista de todos os rtulos que contam com suporte; eles podem incluir tambm as linhas de comentrios com alguns rtulos utilizados comumente porm no contando com suporte. Para adicionar uma mensagem de erro personalizada, remova os dois hfens no incio da linha e adicione !msg "message" ou !htmlmsg "<tag>message</tag>" depois de !Error. Por exemplo: esta notao dever aparecer no perl do Netscape Navigator 3.0:
<!ELEMENT HR name="Horizontal Rule" > <!ATTLIST HR -- COLOR !Error >
Para adicionar uma mensagem personalizada, remova os hfens e adicione a mensagem, precedida por !msg:
<!ELEMENT HR name="Horizontal Rule" > <!ATTLIST HR COLOR !Error !msg "O Internet Explorer 3.0 oferece suporte a COLOR nas rguas horizontais, porm o Netscape Navigator 3.0 no oferece". > 6 !Error
pode ser utilizado para todas as situaes de erro, ou tambm !Warning, para indicar que o rtulo ser ignorado mas no causar um erro.
Extenso dos recursos do Dreamweaver: Princpios bsicos

O Dreamweaver foi projetado para ser extensvel. Ele inclui um intrprete de JavaScript, para que voc possa ler e executar o cdigo JavaScript, e fornece uma interface de programao de aplicativos (API), um amplo conjunto de funes JavaScript que permite aos programadores estender os recursos do Dreamweaver. O Dreamweaver tambm oferece o Document Object Model (DOM), que permite s extenses examinar e modicar a estrutura e o contedo de um documento. Com a API de JavaScript, possvel criar objetos, aes de comportamento, comandos, inspetores de propriedades, paletas utuantes e conversores de dados (todos denominados coletivamente como extenses). Voc pode criar tambm novos objetos e comandos simples sem conhecer programao; consulte Como alterar a paleta de objetos, na pgina 388 e Como criar novos comandos a partir de etapas do histrico, na pgina 101, para obter mais detalhes. Porm, se o objetivo for mais avanado, para adicionar recursos ao Dreamweaver preciso gravar extenses, nas linguagens JavaScript ou C. Para obter mais informaes sobre DOM e API, consulte Extenso dos recursos do Dreamweaver.
401
Sobre o JavaScript JavaScript uma linguagem de programao interpretada. Para saber mais sobre JavaScript, leia um bom livro sobre o assunto, como JavaScript Bible de Danny Goodman (IDG) ou JavaScript: The Definitive Guide, de David Flanagan (OReilly). Para obter mais informaes sobre a extensibilidade do Dreamweaver utilizando o JavaScript, consulte Extenso dos recursos do Dreamweaver.
Nota: Apesar da semelhana entre os dois nomes, JavaScript no est relacionado de modo algum a Java.
Como editar os comandos do Dreamweaver Todos os comandos nos menus do Dreamweaver, inclusive aqueles criados e salvos utilizando a paleta de histrico (consulte Como criar novos comandos a partir de etapas do histrico, na pgina 101), 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 os cdigos JavaScript, a menos que saiba exatamente o que est fazendo.
Para renomear um comando, mova-o para um outro menu ou adicione a ele um atalho de teclado. Consulte Como personalizar os menus do Dreamweaver, na pgina 391.
Como personalizar a interpretao e a aparncia dos rtulos de outros fabricantes

A tecnologias de processamento de servidor, como ASP, PHP, ColdFusion e JSP utilizam um cdigo especial diferente de HTML nos arquivos HTML; os servidores criam e trabalham com o contedo HTML com base nesse cdigo. Ao encontrar os rtulos diferentes de HTML, o Dreamweaver os compara com as informaes nos arquivos de rtulos de outros fabricantes, que denem como o programa l e exibe os rtulos diferentes de HTML. Por exemplo: os arquivos ASP (Active Server Pages) contm o cdigo a ser interpretado pelo servidor. Esse cdigo denido por um par de delimitadores: ele inicia com a seqncia <% e termina com %>. A pasta Conguration/ ThirdPartyTags do Dreamweaver contm um arquivo chamado ASP.xml, que descreve o formato do cdigo ASP, e dene como o Dreamweaver o exibir. Devido maneira como o cdigo ASP especicado no arquivo ASP.xml, o Dreamweaver no tenta interpretar o que estiver entre os delimitadores inicial e nal.
402
Captulo 16
Voc pode congurar os seus prprios rtulos e criar arquivos de banco de dados de rtulos, para denir como o Dreamweaver os ler e exibir. A criao dos arquivos de banco de dados de rtulos so particularmente teis, quando for usado um sistema de markup de servidor diferente de ASP, ColdFusion ou PHP; crie um novo arquivo de banco de dados de rtulos para cada um desses sistemas de markup, a m de informar ao Dreamweaver como exibir os rtulos.
Nota: Esta seo explica como denir a aparncia de um rtulo personalizado no Dreamweaver, mas no como editar o seu contedo ou propriedades. Para obter informaes sobre a criao de um inspetor de propriedades para vericar e alterar as propriedades de um rtulo personalizado, consulte Inspetor de propriedades, em Extenso dos recursos do Dreamweaver.
Cada arquivo de banco de dados de rtulos dene o nome, tipo, modelo do contedo, esquema de interpretao e cone para um ou mais rtulos personalizados. Pode ser criado qualquer nmero de arquivos de banco de dados de rtulos, mas todos devem residir na pasta Conguration/ThirdPartyTags, para que sejam lidos e processados pelo Dreamweaver. Os arquivos de banco de dados de rtulos tm a extenso .xml. Se voc estiver trabalhando simultaneamente em diversos sites diferentes e sem relao (por exemplo: como um programador independente), coloque todas as especicaes de rtulos relativos a um determinado site em um nico arquivo. Em seguida, basta incluir esse arquivo de banco de dados de rtulos nos cones personalizados e inspetores de propriedades, que sero enviados para a equipe que far a manuteno do site. Uma especicao de rtulo denida com um rtulo XML denominado TAGSPEC; por exemplo: o cdigo abaixo descreve a especicao para o rtulo 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>
H dois tipos de rtulos que podem ser denidos utilizando TAGSPEC: rtulos em estilo HTML normal e rtulos delimitados por seqncias de caracteres, que iniciam com uma seqncia e terminam com outra. Os rtulos delimitados por seqncias de caracteres se parecem com os rtulos HTML vazios (por exemplo: IMG) porque eles no envolvem o contedo e no contm rtulos de nalizao. O rtulo HAPPY, mostrado acima, um rtulo em estilo HTML normal; ele inicia com um rtulo de abertura <HAPPY>, envolve o contedo, e termina com outro de nalizao </HAPPY>. Um rtulo ASP, que inicia com a seqncia de caracteres <% e termina com %>, um rtulo delimitado por seqncias de caracteres.
403
A tabela abaixo descreve os atributos e os possveis valores de TAGSPEC:

Atributo
TAG_NAME
Valor
tagName
Descrio
O nome do rtulo personalizado. Necessrio (nos rtulos delimitados por seqncias de caracteres, TAG_NAME utilizado apenas para determinar se um inspetor de propriedades especfico pode ser utilizado para o rtulo. Se a primeira linha do inspetor de propriedades contiver esse nome de rtulo com um asterisco de cada lado, ento o inspetor poder ser utilizado para esses tipos de rtulos. Por exemplo: o TAG_NAME 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 Extenso dos recursos do Dreamweaver). Determina se o rtulo o contedo (como em IMG) ou se envolve o contedo (como em CODE). Necessrio para rtulos normais (no delimitados por seqncias de caracteres). Determina se o contedo do rtulo dever aparecer na janela do documento ou se ser representado por um cone. Necessrio para os rtulos nonempty (vazios). Aplica-se apenas aos rtulos que aparecem fora dos atributos. Descreve o que o rtulo pode conter e o que pode cont-lo. Necessrio. block_model especifica que o rtulo pode conter elementos em nvel de bloco, como DIV e P, e que o rtulo pode aparecer apenas na seo BODY ou dentro de outros rtulos de contedo de corpo do texto, como DIV, LAYER ou TD. head_model especifica que o rtulo pode acomodar contedo de texto e aparecer apenas na seo HEAD. marker_model especifica que o rtulo pode conter qualquer cdigo HTML vlido e pode aparecer em qualquer posio. Como a incluso de texto fora de um elemento HEAD vlido cria um HTML incorreto, utilize head_model em vez de marker_model, se desejar usar um rtulo personalizado contento texto na seo HEAD. Utilize marker_model nos rtulos que precisam ser exibidos linearmente (dentro de um elemento em nvel de bloco, como P ou DIV), em vez de produzir uma quebra de pgina. script_model permite que o rtulo seja colocado em qualquer posio entre os rtulos HTML de abertura e finalizao de um documento. Quando o Dreamweaver se deparar com um rtulo com esse modelo, todo o contedo do rtulo ser ignorado. Utilizado para markups de outros fabricantes (como determinados rtulos ColdFusion), que o Dreamweaver no deve analisar. Especifica um delimitador que marca o incio de um rtulo delimitado por seqncias de caracteres. Os rtulos delimitados por seqncias de caracteres podem aparecer em qualquer posio no documento, onde pode haver um comentrio. O Dreamweaver no realiza a anlise de rtulos e nem decodifica qualquer entidade ou URL entre START_STRING e END_STRING. Necessrio se END_STRING for especificado.
TAG_TYPE*
empty ou nonempty
RENDER_CONTENTS*
TRUE ou FALSE
CONTENT_MODEL*
block_model, head_model, marker_model ou script_model
START_STRING
beginningOfTag
404
Captulo 16
Atributo
END_STRING
Valor
endOfTag
Descrio
Especifica um delimitador que marca o final de um rtulo delimitado por seqncias de caracteres. Necessrio se START_STRING for especificado. Indicam se deve ser ignorado tudo que estiver entre START_STRING e END_STRING (ou entre os rtulos de abertura e finalizao, se estas seqncias no forem definidas), mesmo quando estas seqncias aparecerem dentro de nomes ou valores de atributos. Geralmente, deve ser definido como TRUE, no caso de rtulos delimitados por seqncias de caracteres; o padro FALSE. Indica se os atributos do rtulo sero analisados. Se for definido como TRUE (o padro), o Dreamweaver analisar os atributos; se for definido como FALSE, o Dreamweaver ir ignorar tudo at o prximo sinal de maior que aparecer fora das aspas. Por exemplo: este atributo deve ser definido como FALSE para um rtulo como CFIF (em <cfif a is 1>, por exemplo). Especifica o caminho e o nome do arquivo do cone associado ao rtulo. necessrio para os rtulos vazios e para os que tenham contedo que no for exibido na janela do documento. Especifica a largura do cone. Especifica a altura do cone.
DETECT_IN_ATTRIBUTE
TRUE ou FALSE
PARSE_ATTRIBUTES*
TRUE ou FALSE
ICON
URL
ICON_WIDTH ICON_HEIGHT
widthInPixels heightInPixels
*Ignorados nos rtulos que utilizam START_STRING e END_STRING Como os rtulos personalizados aparecem na janela do documento A aparncia dos rtulos personalizados na janela do documento depende dos valores dos atributos TAG_TYPE e RENDER_CONTENTS do rtulo 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 rtulo vazio. Por exemplo: o rtulo HAPPY denido acima dever aparecer no HTML da seguinte maneira:
Este um pargrafo que inclui uma instncia do rtulo <CODE>HAPPY</CODE> (<HAPPY>Joo</HAPPY>).
e, na janela do documento, aparecer desta forma:
405
Nos rtulos no vazios com um valor TRUE para RENDER_CONTENTS, o contedo entre os rtulos de abertura e nalizao (por exemplo: o texto entre os rtulos <MYTAG>este o contedo entre os rtulos de abertura e finalizao</MYTAG> ) aparecer na janela do documento em vez do cone. Se a opo Exibir > Elementos invisveis estiver ativada, o contedo ser realado utilizando a cor para os rtulos de outros fabricantes especicada nas preferncias de realce. Observe que o realce se aplica apenas aos rtulos denidos nos arquivos de banco de dados de rtulos.
Para alterar a cor de realce dos rtulos de outros fabricantes: 1 2 3
Escolha Editar > Preferncias. Selecione Realce na lista de categorias. Clique na caixa de cores Rtulos de outros fabricantes, para exibir a paleta de cores. Escolha uma cor e, em seguida clique em OK, para sair da caixa de dilogo Preferncias.
Sobre as ASP As ASP (Active Server Pages) da Microsoft constituem uma maneira de combinar HTML, roteiros 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. Para obter mais informaes sobre as ASP, consulte as pginas de viso geral das ASP da Microsoft, conforme a descrio em Recursos de tecnologias de Web e HTML, na pgina 19. Um bloco de cdigo ASP inicia com <% e termina com %>. Se a opo Exibir > Elementos invisveis estiver selecionada, o Dreamweaver mostrar um cone de ASP na janela do documento, para marcar a localizao do cdigo ASP. 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. Para obter mais informaes sobre JSP, consulte a Pgina JSP da Sun, conforme a descrio em Recursos de tecnologias de Web e HTML, na pgina 19. Um bloco de cdigo JSP inicia com <% e termina com %>.
406
Captulo 16
Sobre o PHP PHP (que signica PHP: Hypertext Preprocessor) uma linguagem de criao de roteiros 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. Para obter mais informaes sobre PHP, consulte as Pginas PHP, conforme a descrio em Recursos de tecnologias de Web e HTML, na pgina 19. Um bloco de cdigo PHP inicia com <? e termina com ?>. Se a opo Exibir > Elementos invisveis estiver selecionada, o Dreamweaver mostrar um cone de PHP na janela do documento, para marcar a localizao do cdigo PHP. Sobre a ColdFusion A ColdFusion constitui outra maneira de tratar as pginas dinamicamente. Quando um navegador solicita uma pgina ColdFusion de um servidor, este a passa ao software ColdFusion Server, que interpreta os roteiros na pgina e envia o HTML resultante para o navegador. Para obter mais informaes sobre ColdFusion, consulte a Pgina do produto ColdFusion, conforme a descrio em Recursos de tecnologias de Web e HTML, na pgina 19. O Dreamweaver reconhece aproximadamente 50 rtulos ColdFusion; consulte o arquivo ColdFusion.xml, na pasta Conguration/ThirdPartyTags, para obter mais detalhes. Se a opo Exibir > Elementos invisveis estiver selecionada, o Dreamweaver exibir um cone de ColdFusion na janela do documento, para marcar a localizao dos rtulos ColdFusion para os quais RENDER_CONTENTS tiver sido denido como FALSE (no ColdFusion.xml). Como impedir a regravao de rtulos de outros fabricantes O Dreamweaver corrige alguns tipos de erros no HTML; para obter informaes sobre os erros especcos que so consertados, consulte Como denir as preferncias de regravao de HTML, na pgina 346. Como padro, o Dreamweaver no altera o HTML nos arquivos com determinadas extenses de nome de arquivo, inclusive .asp (ASP), .cfm (ColdFusion) e .php (PHP). Esse padro denido para que o Dreamweaver no modique acidentalmente o cdigo contido nos rtulos 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. O Dreamweaver tambm codicar determinados caracteres especiais, quando forem digitados no inspetor de propriedades. Com freqncia, conveniente permitir que o Dreamweaver realize essa codicao; ele torna os caracteres especiais mais provveis de serem visualizados corretamente em vrias plataformas e navegadores. Contudo, como essa codicao pode interferir no cdigo contido nos rtulos de outros fabricantes ou at mesmo nos prprios rtulos, altere o comportamento de codicao do Dreamweaver.
407
Para permitir que o Dreamweaver regrave o HTML em todos os arquivos: 1 2
Escolha Editar > Preferncias, e selecione a categoria Regravao de HTML. Siga um dos procedimentos abaixo: Exclua uma ou mais extenses da lista de extenses. Cancele a seleo de Nunca regravar o HTML: opo Em arquivos com as extenses.
Para adicionar tipos de arquivos que o Dreamweaver no deve regravar: 1 2
Escolha Editar > Preferncias, e selecione a categoria Regravao de HTML. 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.
Para desativar as opes de codificao do Dreamweaver: 1 2
Escolha Editar > Preferncias, e selecione a categoria Regravao de HTML. Cancele uma ou ambas as opes de Caracteres especiais.
Para obter informaes sobre as outras preferncias de regravao de HTML, consulte Como denir as preferncias de regravao de HTML, na pgina 346.
408
Captulo 16
APNDICE A
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Atalhos de teclado
menu Arquivo
Ao
Novo documento Nova janela Abrir um arquivo HTML
No Windows
Control+Shift+N Control+N Control+O, ou arraste o arquivo da janela Explorer ou do site para a janela do documento Control+Shift+O Control+W Control+S Control+Shift+S Control+Q
No Macintosh
Command+N no disponvel Command+O
Abrir na moldura Fechar Salvar Salvar tudo Sair
Command+Shift+O Command+W Command+S Command+Shift+S Command+Q
409
menu Editar
Ao
Desfazer Refazer Recortar Copiar Colar Limpar Selecionar tudo Iniciar o editor externo Propriedades da pgina Preferncias
No Windows
Control+Z Control+Y ou Control+Shift+Z Control+X Control+C Control+V Delete Control+A Control+E Control+J Control+U ou Control+K
No Macintosh
Command+Z Command+Y ou Command+Shift+Z Command+X Command+C Command+V Delete Command+A Command+E Command+J Command+U ou Command+K
Quick Tag Editor

Ao
Abrir o Quick Tag Editor Selecionar o rtulo-pai Selecionar o rtulo-filho
No Windows
Control+T Control+Shift+6 Control+Shift+7
No Macintosh
Command+T Command+Shift+6 Command+Shift+7
410
Apndice A
Paleta de 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
Como editar o texto

Ao
Criar um novo pargrafo Inserir uma quebra de linha Inserir um espao no-separvel Mover o texto ou objeto para um outro local na pgina Copiar o texto ou objeto para um outro local na pgina
No Windows
Enter Shift+Enter Control+Shift+barra de espao Arraste o item selecionado para o novo local Enquanto mantm a tecla Control pressionada, arraste o item selecionado at o novo local Control+Shift+C Control+Shift+V Clique duas vezes Control+Shift+B Control+Tab Control+Shift+J Shift+F7
No Macintosh
Return Shift+Return Option+barra de espao Arraste o item selecionado para o novo local Enquanto mantm a tecla Option pressionada, arraste o item selecionado at o novo local Command+Shift+C Command+Shift+V Clique duas vezes Command+Shift+B Control+Tab ou Option+Tab Command+Shift+J Shift+F7
Copiar apenas o texto (no copia os rtulos HTML) Colar como texto Selecionar uma palavra Adicionar os itens selecionados biblioteca Alternar entre a janela do documento e o inspetor de HTML Abrir e fechar o inspetor de propriedades Verificar a ortografia
Atalhos de teclado
411

Ao
Recuo Remover o recuo Formato > Nenhum Formato do pargrafo Aplicar os cabealhos 1 a 6 a um pargrafo Alinhamento > esquerda Alinhamento > No centro Alinhamento > direita Tornar negrito o texto selecionado Tornar itlico o texto selecionado Editar a folha de estilos
No Windows
Control+9 Control+8 Control+0 (zero) Control+Shift+P Control+1 a 6 Control+Alt+L Control+Alt+C Control+Alt+R Control+B Control+I Control+Shift+E
No Macintosh
Command+9 Command+8 Command+0 (zero) Command+Shift+P Command+1 a 6 Command+Option+L Command+Option+C Command+Option+R Command+B Command+I Command+Shift+E
Nota: Muitos atalhos de formatao de texto no tm qualquer efeito quando estiverem funcionando no inspetor de HTML.
Como localizar e substituir o texto

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

Ao
Selecione a tabela (com o cursor dentro da mesma) Mover at a prxima clula Mover at a clula anterior
No Windows
Control+A Tecla de tabulao Shift+tecla de tabulao
No Macintosh
Command+A Tecla de tabulao Shift+tecla de tabulao Command+M
Inserir uma linha (antes da linha atual) Control+M
Adicionar uma linha ao final da tabela Tecla de tabulao na ltima Tecla de tabulao na ltima clula clula 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) Control+Shift+M Control+Shift+A Control+Shift+5 Control+Alt+M Control+Alt+S Control+barra de espao Command+Shift+M Command+Shift+A Command+Shift+5 Command+Option+M Command+Option+S Command+barra de espao
Como trabalhar com as molduras

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

Ao
Selecionar uma camada Selecionar e mover uma camada Adicionar ou remover a camada da seleo Mover a camada selecionada um determinado nmero de pixels Mover a camada selecionada um incremento de encaixe Redimensionar a camada selecionada um determinado nmero de pixels Redimensionar a camada selecionada um incremento de encaixe
No Windows
Control+Shift-clique Shift+Control-arraste Enquanto mantm a tecla Shift pressionada, clique na camada Teclas de seta Shift+teclas de seta Control+teclas de seta Control+Shift+teclas de seta
No Macintosh
Command+Shift-clique Command+Shift-arraste Enquanto mantm a tecla Shift pressionada, clique na camada Teclas de seta Shift+teclas de seta Option+teclas de seta Option+Shift+teclas de seta Command+teclas de seta Acima/Abaixo/ esquerda/ direita Command+Shift+9 Command+Shift+8 Command+Shift+F6 Command+F6 Command-arraste Command+Shift+ Option+G Command+Option+G Shift+F9 Delete
Alinhar as camadas selecionadas Control+teclas de seta parte inferior/superior/esquerda/direita Acima/Abaixo/ esquerda/ da ltima camada selecionada direita Tornar igual a largura das camadas selecionadas Tornar igual a altura das camadas selecionadas Converter as camadas em tabela Converter as tabelas em camadas Control+Shift+9 Control+Shift+8 Control+Shift+F6 Control+F6
Alternar a preferncia de aninhamento Control-arraste ao criar uma camada Alternar a exibio da grade Encaixar na grade Adicionar quadro primrio (Linha de tempo) Remover um quadro primrio (Linha de tempo) Control+Shift+Alt+G Control+Alt+G Shift+F9 Delete
414
Apndice A
Como trabalhar com as linhas de tempo

Ao
Adicionar objeto linha de tempo
No Windows
Control+Shift+Alt+T
No Macintosh
Command+Shift+ Option+T
Como trabalhar com as imagens

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

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

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

Ao
Criar um novo arquivo Criar uma nova pasta Abrir a seleo Obter os arquivos ou pastas selecionadas do site remoto de FTP
No Windows
Control+Shift+N Control+Shift+Alt+N Control+Shift+Alt+O Control+Shift+D ou arraste os arquivos do painel Remoto para o painel Local, na janela do site Control+Shift+U ou arraste os arquivos do painel Local para o painel Remoto, na janela do site Control+Shift+Alt+D Control+Shift+Alt+U Control+Shift+Alt+F5 Control+F5 Alt+F5
No Macintosh
Command+Shift+N Command+Shift+ Option+N Command+Shift+ Option+O Command+Shift+D ou arraste os arquivos do painel Remoto para o painel Local, na janela do site Command+Shift+U ou arraste os arquivos do painel Local para o painel Remoto, na janela do site Command+Shift+ Option+D Command+Shift+ Option+U Command+Shift+ Option+F5 Command+F5 Option+F5
Colocar os arquivos ou pastas selecionadas no site remoto de FTP
Retirar Devolver Desconectar Mapa do site Atualizar o site remoto
416
Apndice A
Mapa do site
Ao
exibio dos arquivos do site Atualizar o painel Local Tornar raiz Vincular a um arquivo existente Alterar o vnculo Remover o vnculo Mostrar/ocultar o vnculo 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 Tecla Delete Control+Shift+Y Control+Shift+T F2
No Macintosh
F5 Shift+F5 Command+Shift+R Command+Shift+K Command+L Tecla Delete Command+Shift+Y Command+Shift+T no disponvel
Control++ (sinal de adio) Command++ (sinal de adio) Control+ - (sinal de subtrao) Command+ - (sinal de subtrao)
Como executar os plug-ins

Ao
Executar o plug-in Parar o plug-in Executar todos os plug-ins Parar todos os plug-ins
No Windows
Control+Alt+P Control+Alt+X Control+Shift+Alt+P Control+Shift+Alt+X
No Macintosh
Command+Option+P Command+Option+X Command+Shift+ Option+P Command+Shift+ Option+X
Atalhos de teclado
417
Como exibir os elementos da pgina

Para alternar a exibio de
Elementos invisveis Rguas Grade Exibir o contedo do cabealho
No Windows
Control+Shift+I Control+Shift+Alt+R Control+Shift+Alt+G Control+Shift+W
No Macintosh
Command+Shift+I Command+Shift+ Option+R Command+Shift+ Option+G Command+Shift+W
Como trabalhar com os modelos

Ao
Criar uma nova regio editvel Marcar como editvel uma regio
No Windows
Control+Alt+V no disponvel
No Macintosh
Command+Option+V no disponvel
Como inserir objetos

Para inserir
Qualquer objeto (imagem, filme Shockwave e assim por diante)
No Windows
No Macintosh
Arraste o arquivo do Arraste o arquivo do Explorer ou da janela do site Localizador ou da janela do para a 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
418
Apndice A
Como abrir e fechar as paletas

Para alternar a exibio de
Objetos Propriedades Iniciador exibio dos arquivos do site exibio do mapa do site Biblioteca Estilos CSS Estilos HTML Comportamentos Histrico Origem de HTML Camadas Linha de tempo Molduras Modelos Mostrar/ocultar as janelas flutuantes Fechar a janela do documento
No Windows
Control+F2 Control+F3 Shift+F4 F5 Control+F5 F6 F7 Control+F7 F8 F9 F10 F11 Control+F9 Control+F10 Control+F11 F4 Control+F4 ou Control+W
No Macintosh
Command+F2 Command+F3 Shift+F4 F5 Command+F5 F6 F7 Command+F7 F8 F9 F10 F11 Command+F9 Command+F10 Command+F11 F4 Command+W
Como obter ajuda

Ao
Tpicos da Ajuda de Usando o Dreamweaver Tpicos da Ajuda da Extenso dos recursos do Dreamweaver Dreamweaver on-line
No Windows
F1 Shift+F1 Control+F1
No Macintosh
F1 Shift+F1 Command+F1
Atalhos de teclado
419
Matriz de atalhos de teclado

Nota: Um asterisco (*) indica uma combinao de teclas no utilizada. O texto em itlico indica comandos ao nvel do sistema. Caractere do teclado Control (no Windows) ou Command (no Macintosh) Control+Shift (no Windows) ou Command+Shift (no Macintosh)
Inserir coluna na tabela Adicionar biblioteca Copiar apenas o texto Obter os arquivos ou pastas selecionados Editar a folha de estilos * * Trazer para frente Mostrar invisveis (alternar)
Control+Alt (no Windows) ou Command + Option (no Macintosh)

Inserir ncora com nome * Justificar no centro Inserir filme Shockwave Director * Inserir filme Flash Encaixar na grade (alternar) Mover para trs Inserir a imagem * * Justificar esquerda Mesclar as clulas selecionadas da tabela
Control+Shift+Alt (no Windows) ou Command+ Shift+Option (no Macintosh)

* * * Retirar os arquivos ou pastas selecionadas * * Mostrar/ocultar as grades Enviar para trs * * * * * Nova pasta do site
A N C D E F G H I J K L M N
Selecionar tudo, Selecionar a tabela Negrito (alternar) Copiar Duplicar Iniciar o editor externo Localizar Localizar novamente (apenas no Macintosh) Substituir Itlico (alternar)
Propriedades da pgina Inspetor de propriedades (alternar) Preferncias Criar vnculo Inserir linha na tabela Nova janela (no Windows) Nova pgina (no Macintosh) Abrir Executar o comando gravado Sair Importar Salvar Vincular a um arquivo existente Remover o vnculo Excluir a linha da tabela
Nova pgina (apenas no * Windows)
O P Q R S
Abrir na moldura Formato do pargrafo * Tornar raiz Salvar tudo
* Executar o plug-in * Justificar direita Dividir a clula da tabela
Abrir o arquivo selecionado do site Executar todos os plug-ins * Mostrar/ocultar as rguas *
420
Apndice A
Caractere do teclado
Control (no Windows) ou Command (no Macintosh)

Quick Tag Editor Preferncias Colar Fechar Recortar Refazer Desfazer Definir o formato do pargrafo como Nenhum 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 * Remover o recuo (Mover para trs)
Control+Shift (no Windows) ou Command+Shift (no Macintosh)

Adicionar objeto linha de tempo Devolver os arquivos ou pastas selecionadas * * Parar todos os plug-ins * * *
T U V W X Y Z 0 (zero)
Mostrar os ttulos das Inserir tabela pginas no Mapa do site Colocar os arquivos ou pastas selecionadas Colar como texto Exibir o contedo do cabealho Iniciar o comando de gravao Mostrar/ocultar o vnculo Refazer * * Criar uma nova regio editvel * Parar o plug-in * * *
1 2 3 4 5 6 7 8
* * * * Excluir a coluna da tabela Selecionar o rtulo-pai
* * * * * *
* * * * * * * *
Selecionar o rtulo-filho * Diminuir a extenso da coluna (em tabelas), Tornar as larguras das camadas iguais (em camadas) *
Recuo (Avanar)
Aumentar a extenso da * coluna (em tabelas), Tornar as alturas das camadas iguais (em camadas)
Atalhos de teclado
421
Caractere do teclado

Reduzir o zoom do mapa do site Ajustar janela * * Parar o plug-in * * * * * * Atualizar o layout da tabela
Control+Shift (no Windows) ou Command+Shift (no Macintosh)

*

*

*
- (sinal de subtrao) e _ (sublinhado) =e+ [e{ ]e} . (ponto) e > , (vrgula) e< ?e/ ;e: e e~ \e| Barra de espao
Aumentar o zoom do mapa do site * * * * * * * * * Inserir um espao noseparvel (no Windows) (Option+ barra de espao no Macintosh)
* * * * * * * * * * *
* * *
* * * * * * *
Tecla de funo
Nenhum modificador
Shift
Alt (no Windows) ou Option (no Macintosh)
Control+ Shift (no Windows) ou Command + Shift (no Macintosh)
Control+ Alt (no Windows) ou Command+ Option (no Macintosh)
Control+ Shift+Alt (no Windows) ou Command+ Shift+ Option (no Macintosh) *
F1
Ajuda de Como utilizar o Dreamweaver Renomear o arquivo no mapa do site (apenas no Windows)
Ajuda da Extenso dos recursos do Dreamweaver *
Dreamweaver on-line
F2
Paleta de objetos
422
Apndice A
Tecla de funo
Nenhum modificador
Shift
Alt (no Windows) ou Option (no Macintosh)
Control+ Shift (no Windows) ou Command + Shift (no Macintosh)
Control+ Alt (no Windows) ou Command+ Option (no Macintosh)
Control+ Shift+Alt (no Windows) ou Command+ Shift+ Option (no Macintosh) *
F3
Localizar novamente (apenas no Windows) Mostrar/ ocultar as janelas flutuantes Arquivos do site paleta de bibliotecas Estilos CSS
Inspetor de propriedades
F4
Iniciador
Sair (apenas no Windows)
Fechar a janela
F5 F6
Atualizar o painel Local *
Atualizar o Mapa do site painel remoto * Converter as tabelas em camadas Estilos HTML Verificar os vnculos No site inteiro
* Converter as camadas em tabela * *
* *
Desconectar do site remoto *
F7 F8
Verificar a ortografia
* *
* *
* *
Comportamen Verificar os to vnculos selecionados
F9
paleta de histrico
Adicionar quadro primrio
Linha de tempo *
F10
inspetor de origem de HTML Camadas Exibir no navegador primrio
inspetor de molduras paleta de modelos Exibir no navegador secundrio
F11 F12
* *
* *
* *
* *
* *
Atalhos de teclado
423
424
Apndice A
NDICE REMISSIVO
A ao Abrir a janela do navegador 320 ao Alterar a propriedade 309 ao Arrastar a camada 314 ao Chamar o JavaScript 309 ao Controlar o Shockwave ou Flash 313 ao Denir a imagem da barra de navegao 324 ao Denir a mensagem de status 327 ao Denir o texto da camada 326 ao Denir o texto da moldura 325 ao Denir o texto do campo de texto 328 ao Executar a linha de tempo 333 ao Executar o som 322 ao Ir do menu de salto 319 ao Ir para a URL 318 ao Ir para o quadro da linha de tempo 332 ao Mensagem pop-up 322 ao Menu de salto 319 ao Mostrar/ocultar as camadas 329 ao Parar a linha de tempo 333 ao Permutar a imagem 331 ao Pr-carregar as imagens 323 ao Restaurar a imagem permutada 332 ao Validar o formulrio 334 ao Vericar o navegador 310 ao Vericar o plug-in 312 aes como alterar em comportamentos 305 como controlar as linhas de tempo 263 como criar 306 como escolher no inspetor de comportamentos 303 compatibilidade com os navegadores 307 denidas 299 includas com o Dreamweaver 307 Consulte tambm aes individuais pelo nome Active Server Pages (ASP) como editar 356 sobre 406
Ajuda 11 atalhos 419 alas de redimensionamento 204 alinhamento direita 203 alinhamento esquerda 203 alinhamento Alto do texto 203 alinhamento Embaixo absoluto 203 alinhamento Meio 203 alinhamento Meio absoluto 203 alinhamento No alto 203 alinhamentos Linha de Base e Embaixo 203 ambientes com mltiplos usurios 148 ambientes de equipe 148 ncoras com nome como criar 119 como exibir o marcador na janela do documento 119 ncoras, com nome 119 animaes ao longo de um caminho complexo 257 como aplicar a objetos 261 como copiar e colar 260 como criar 255 como melhorar 262 linhas de tempo 253 viso geral 105 aplicativos, como utilizar com o Dreamweaver 72 applets. Consulte applets de Java applets de Java como inserir 283, 296 como redimensionar 203 propriedades 296 viso geral 296 rea de trabalho 61 arquivo de registro de correes de HTML 352 arquivo SourceFormat.txt 346
425
arquivos como buscar 156 como carregar 153 como colocar 153 como descarregar 151 como devolver e retirar 148 como exibir na janela do site 82 como gerenciar 144 como obter 151 como sincronizar os sites local e remoto 154 como transferir com FTP 141 tipos, padro 390 arquivos dependentes como colocar 153 como mostrar e ocultar 132 como obter 152 arquivos ocultos, como mostrar e ocultar 132 ASP rtulos, como personalizar a anlise e a aparncia 402 ASP. Consulte Active Server Pages atalhos 409 atalhos de teclado 409 como alterar 394 atalhos, teclado como alterar 394 atributo CLASS 192 atributo USEMAP 211 atributos buscas 159 em pers de navegadores 398 Consulte tambm rtulos B barra de navegao como adicionar imagens 125 como criar 124 como exibir horizontalmente na pgina 126 como exibir verticalmente na pgina 126 como inserir em uma tabela 126 como modicar os elementos 127 estados da imagem 124 barra de status como denir o texto (comportamento) 327 menu pop-up Tamanho da janela 64 preferncias 66 viso geral 64
BBEdit (no Macintosh) 355 bibliotecas como abrir os itens 378 como adicionar itens a pginas 374, 378 como alterar a cor de realce dos itens 373 como criar itens 373 como editar os comportamentos em itens 376 como editar os itens 374 como excluir itens 375 como tornar os itens editveis em documentos 376 preferncias 373 propriedades dos itens 377 viso geral 372 borda da tabela cores 223 largura 223 bordas como adicionar a uma tabela 222 como remover 216 em uma moldura 278 boto Apagador 90 boto Carregar a consulta 161 boto Editar (inspetor de propriedades da imagem) 202 boto Editar (inspetor de propriedades de roteiro) 358 boto Executar novamente 97 boto Ir, como associar a um menu de salto 319 boto Paleta 90 boto Salvar a consulta 161 Busca, Ajuda 12 C cabeote de execuo 253 caixa de dilogo Denir o estilo HTML 185 caixa de dilogo Inserir a barra de navegao 125 caixa de dilogo Inserir ncora com nome 119 caixa de dilogo Inserir o menu de salto 122 caixa de dilogo Inserir o vnculo de correio eletrnico 120 caixa de dilogo Parmetros 297 caixa de dilogo Vericador de vnculos 169 caixa de dilogo Vincular a folha de estilos externa 190 caixas de dilogo, como personalizar 395
426
ndice remissivo
camadas arrastveis 317 atalhos 414 como alinhar 246 como alterar a ordem de empilhamento 248 como alterar a visibilidade com a paleta de camadas 249 como alterar a visibilidade com os comportamentos 329 como aninhar 237 como ativar 243 como converter em tabelas 250 como converter para navegadores 3.0 252 como criar 236 como desenhar vrias 236 como encaixar na grade 247 como evitar sobreposies 251 como inserir 236 como manipular 243 como mover 246 como posicionar 239 como redimensionar 245 como selecionar 244 como selecionar mltiplas 242 marcadores, como exibir 237 na criao de tabelas 250 pontos de ancoragem 90 preferncias 239 propriedades 239 propriedades de mltiplas 242 viso geral 235 visibilidade 249 caminhos absolutos 110 relativos a documento 110 relativos raiz 112 Consulte tambm vnculos caminhos absolutos 110 caminhos relativos a documento como denir 115 sobre 110 caminhos relativos raiz como denir 115 preferncia Visualizar utilizando o servidor local 113 sobre 112
caminhos relativos raiz do site Consulte caminhos relativos raiz campo Diretrio do host 142 campo Endereo HTTP 78 campo Imagem cambivel 208 campo Imagem original 208 campo Nome do host de FTP 141 campo Nome do site 77 campo Pasta raiz local 77 campos de texto, como denir o texto com comportamentos 328 canal de comportamentos nas linhas de tempo 253 caracteres especiais como inserir 88 viso geral 87 caracteres, especiais 87 clula do cabealho, como formatar 225 clulas. Consulte clulas da tabela clulas da tabela clulas do cabealho, como designar 225 como copiar e colar 226 como dividir 231 como formatar 224 como mesclar 231 Consulte tambm tabelas cor do fundo, como adicionar 224 imagem de fundo, como adicionar 224 Centro de suporte do Dreamweaver 13 CFML rtulos, como personalizar a anlise e a aparncia 402 CFML. Consulte ColdFusion Markup Language codicaes 71 cdigo de origem 338
ndice remissivo
427
cdigo de origem de HTML buscas de rtulos 159 como buscar 157, 158 como editar com o BBEdit 355 como editar na janela do documento 340 como exibir com o inspetor de origem de HTML 71 como formatar nos documentos existentes 351 como limpar 350 como limpar o HTML do MS Word 352 como selecionar na janela do documento 89 converso de atributos CSS 197 do Fireworks 209 editores externos 354 estilos de rtulos 188 material de referncia 19 menus pop-up de sugestes 345 perl de formatao 396 preferncias de cores de rtulos 349 preferncias de formatao, como denir 347 preferncias de regravao 346 rtulos, como corrigir os incorretos 354 rtulos, como remover 345 viso geral da edio 337 viso geral das preferncias de formatao 346 ColdFusion Markup Language (CFML) como editar os rtulos CFML 356 e o Dreamweaver 338 viso geral 407 colunas, linhas e clulas como adicionar e remover 229 como formatar 224 cor do fundo, como adicionar 224 comando Abrir a pgina vinculada 136 comando Abrir o modelo anexado 369 comando Adicionar objeto biblioteca 373 comando Adicionar objeto linha de tempo 255 comando Adicionar quadro 255 comando Adicionar/remover ajuste de redimensionamento da Netscape 239 comando Ajustar a posio 104 comando Alinhar com a seleo 105 comando Alterar o vnculo no site inteiro 135 comando ncora com nome 119 comando Aplicar a formatao de origem 351, 353 comando Aplicar o modelo pgina 368 comando Atualizar a pgina atual 369
comando Atualizar as pginas 370 comando Barra de navegao 208 comando Colar como texto 86 comando Colocar 153 comando Converter as camadas em tabela 250 comando Converter tabelas em camadas 252 comando Cor 181 comando Criar item de biblioteca 373 comando Denir como home page 131 comando Denir o esquema de cores 94 comando Desanexar do modelo 369 comando Desmarcar a regio editvel 366 comando Dividir as clulas 232 comando Editar a folha de estilos 191 comando Editar a lista de fontes 180 comando Editar o contedo NoFrames 280 comando Evitar sobreposies de camadas 251 comando Excluir (paleta de bibliotecas) 378 comando Exportar a tabela 234 comando Formatar a tabela 225 comando Formulrio 382 comando Gravar o caminho da camada 257 comando Importar o HTML do Word 352 comando Importar os dados da tabela 218 comando Inserir dados tabulares 218 comando Limpar o HTML 350 comando Limpar o HTML do Word 352 comando Mesclar as clulas 231 comando Novo a partir de modelo 85, 368 comando Obter 151 comando Obter mais comportamentos 306 comando Otimizar a imagem no Fireworks 207 comando Redenir a origem 103 comando Redenir a posio 104 comando Remover a linha de tempo 260 comando Remover o quadro 255 comando Salvar como modelo 361 comando Salvar os conjuntos de molduras 271 comando Salvar todos 271 comando Selecionar um local mais novo 155 comando Selecionar um remoto mais novo 155 comando Tornar editvel 376 comando Vericar a ortograa 198 comando Vericar os navegadores de destino 167 comando Vnculo a um arquivo existente 130 comando Vnculo a um novo arquivo 130 comando Visualizar no navegador 171
428
ndice remissivo
comando Visualizar utilizando o servidor local 113 comandos como acessar a partir de menus contextuais 70 como criar, a partir das etapas do histrico 101 como gravar 102 como renomear 395 comandos Dividir a moldura 266 comentrios, como inserir 358 como abrir documentos 84 tipos de arquivos diferentes de HTML como padro 390 como adicionar quadros a uma linha de tempo 258 como adicionar um objeto a uma linha de tempo 255 como alinhar camadas 246 elementos da pgina 203 imagens de rastreamento 105 opes 203 texto 182 como aninhar camadas 237 molduras 268 como atualizar os vnculos 134 como automatizar as tarefas 97 como buscar arquivos 156 como salvar os padres de busca 161 expresses regulares 162 rtulos e atributos HTML 159 texto entre rtulos especcos 160 texto na origem de HTML 158 texto nos arquivos 157 como carregar arquivos 153 como colar as etapas do histrico 100 como colocar arquivos em um servidor remoto 153 como combinar as paletas utuantes 62 como copiar as etapas do histrico 100 como criar vnculos a ncoras com nome usando o cone do indicador de arquivos 120 a documentos usando o cone do indicador de arquivos 116 ncoras 119 documentos 114
como descarregar comportamentos 306 tamanho, estimativas de tempo 172 como descarregar e editar sites j existentes 78 como desfazer mais de uma etapa 96 como designar molduras para _blank 280 _parent 280 _self 280 _top 280 como designar os navegadores como converter um arquivo em compatvel com navegador 3.0 252 pers de navegadores 398 como designar os navegadores de destino atalhos 416 como designar vnculos a folhas de estilos CSS externas 190 como abrir documentos em uma nova janela 115 em documentos 114 como detectar os navegadores e plug-ins 165 como devolver e retirar arquivos como desfazer a retirada de um arquivo 151 viso geral 148 como editar o HTML 338 como exibir camadas 249 contedo HEAD 106 elementos invisveis 90 HTML editvel e bloqueado nos modelos 365 imagens de rastreamento 104 regies editveis e bloqueadas nos modelos 364 server-side includes 379 sites 80 como formatar o cdigo de origem de HTML como personalizar 396 preferncias 346 como gravar comandos 102 como iniciar 14
ndice remissivo 429
como inserir applets de Java 296 caracteres especiais 88 controles ActiveX 294 datas 87 elementos de mdia 283 lmes Flash 288 lmes Shockwave 286 HTML do Fireworks 210 imagens 200 imagens cambiveis 208 objetos Aftershock 290 objetos do Generator 291 server-side includes 379 como instalar o Dreamweaver 10 como integrar o Dreamweaver com outros aplicativos 72 como localizar atalhos 412 como localizar e substituir. Consulte como buscar como obter arquivos de um servidor remoto 151 como personalizar caixas de dilogo 395 Dreamweaver 387 Iniciador e Mini-iniciador 67 menus 391 paleta de objetos 388 rtulos, de outros fabricantes 402 como planejar um site da Web 74 como processar os formulrios 384 como recuar o texto 182 como redimensionar camadas 245 clulas da tabela 228 elementos da pgina 203 molduras 277 como remover quadros de uma linha de tempo 258 como repetir as etapas 97 como repetir as linhas de tempo continuamente 258 como reutilizar buscas 161 itens de biblioteca 374 modelos 368 como salvar arquivos em molduras e conjuntos de molduras 271 buscas 161
como selecionar camadas 244 molduras e conjuntos de molduras 268 objetos na janela do documento 89 como sincronizar os sites local e remoto 154 como testar os sites 166 como transferir arquivos, resoluo de problemas 153 como vericar os vnculos 168 como visualizar em navegadores atalhos 416 viso geral 170 comportamentos aes, como criar 306 como alterar 305 como anexar 303 como desencadear 303 como excluir 305 compatibilidade com os navegadores 307 de outros fabricantes 306 denidos 299 e formulrios 385 e imagens 214 e itens de biblioteca 376 e linhas de tempo 305 e mdia 298 e modelos 367 conjuntos de molduras aninhados 268 bordas 278 como designar vnculos em 114 como nomear 273 como salvar arquivos em 271 como selecionar 268 predenidos, como inserir 267 propriedades 275 Consulte tambm molduras conta-gotas 90 contedo NOFRAMES 280 contedo, como adicionar a tabelas 217 controles ActiveX como inserir 283 como redimensionar 203 propriedades 295 viso geral 294 controles deslizantes, como criar 314 convenes 15 convenes tipogrcas 15
430
ndice remissivo
cor aceita pela Web 92 como escolher 90 conta-gotas, como utilizar 90 fundo da moldura 279 fundo da pgina 94 padro do texto da pgina 94 texto, como alterar 181 D datas como inserir 87 desenho da Web, nveis de experincia no 14 Design Notes como adicionar as opes de status 174 como congurar 173 como desativar 175 como salvar as informaes sobre o arquivo 172 para documentos e objetos 173 para objetos de mdia 285 para os arquivos do Fireworks 176 viso geral 172 dicionrio como editar 198 dicionrio pessoal 198 Director e Aftershock 290 lmes Shockwave, como criar 286 documentos como abrir 84 como buscar 156 como criar 84 como criar, com base em modelos 368 como denir as propriedades 93 como vericar os vnculos 168 como visualizar em navegadores 170 Design Notes, como utilizar em 172 modelos, como desanexar de 369 tamanho de descarga, tempo 172 texto, como adicionar 86 ttulo da pgina 93 documentos HTML. Consulte documentos 84
E editores. Consulte editores externos editores de HTML com base em texto. Consulte editores externos editores de texto. Consulte editores externos editores externos BBEdit (no Macintosh), integrao com 355 HomeSite (no Windows) 338 HTML, como iniciar 340 HTML, viso geral 354 imagens 205 mdia 284 texto, viso geral 354 elementos como alinhar 203 como exibir os invisveis 418 elementos de mdia como inserir 283 parmetros 297 elementos invisveis comentrios 358 como mostrar e ocultar 90 como selecionar 89 preferncias 90 roteiros 357 entidades 87 estilos 188 como aplicar estilos personalizados 193 como converter em HTML 196 como criar 192 conitantes 194 em modelos 367 HTML 184 tabela de converso de CSS em markup HTML 197 Consulte tambm folhas de estilos estilos CSS atributo CLASS 192 atributos, como converter em HTML 197 como aplicar personalizados 193 como criar 192 seletores 192
ndice remissivo
431
estilos HTML como aplicar 185 como criar 186187 como editar 187 como excluir 186 como exibir 185 como limpar 186 como modicar 187 como remover da paleta 186 como utilizar em outros sites 188 cone de Novo estilo 187 estilos personalizados. Consulte tambm folhas de estilos estrutura de diretrios, site. Consulte sites evento onBlur 334 eventos como alterar em comportamentos 305 como desencadear aes 303 denidos 299 disponveis para diversos navegadores e objetos 301 exibio dos arquivos do site 82 expresses regulares 162 extensibilidade comportamentos de outros fabricantes 306 JavaScript 402 viso geral 401 F lmes como inserir 283 lmes Flash como controlar 313 como inserir 288 como redimensionar 203 propriedades 288 viso geral 288 lmes Shockwave como controlar 313 como inserir 286 como redimensionar 203 propriedades 287 viso geral 286 lmes Show Me 11 rewalls como denir o host e a porta 147 opes 142
Fireworks arquivos HTML do 209 como otimizar as imagens no 207 Design Notes no 176 folhas de estilos como editar as folhas de estilos externas 191 externas 190 preferncias 195 viso geral 188 Consulte tambm estilos folhas de estilos externas como criar 190 como editar 191 como vincular a 190 fontes codicaes, como denir fontes para 72 como alterar a cor das 181 como alterar as caractersticas 179 como alterar as combinaes 180 formatos de arquivos, imagem 199 formulrios campos, como validar 334 como criar 382 como processar 384 comportamentos, como utilizar com 385 criao de roteiros do servidor 385 criao de roteiros pelo cliente 384 menus de salto, como criar 122 objetos, como adicionar 383 propriedades 382 viso geral 381 fotograas 199 FTP como transferir arquivos com 141 preferncias 146 registro 153 resoluo de problemas 143 fundo imagem da pgina e cor 94 transparncia em 94 G grade como alterar a denio da 247 como encaixar as camadas na 247 como guia 103 como mostrar 247
432
ndice remissivo
grcos. Consulte imagens guia Informaes bsicas (Design Notes) 173 guia Todas as informaes (Design Notes) 174 H home page, como denir 131 HomeSite (no Windows) 338 HTML do Microsoft Word como importar 352 como limpar 352 HTML do Word. Consulte HTML do Microsoft Word I cone de Abrir a folha de estilos 190 cone do indicador de arquivos 116 imagens atalhos 415 como alinhar 182 como alterar o arquivo de origem com as linhas de tempo 259 como aplicar comportamentos a 214 como editar 205 como inserir 200 como otimizar no Fireworks 207 como permutar (comportamento) 331 como pr-carregar (comportamento) 323 como pr-carregar automaticamente 208 como redimensionar visualmente 203 como restaurar as permutadas (comportamento) 332 editores de imagem externos 205 em tabelas 217 formatos, com suporte 199 mapas de imagens 211 propriedades 201 redimensionamento 203 imagens cambiveis 208 como criar 208 como criar um vnculo 208 como testar 208 imagens de rastreamento 104 imagens GIF como imagem de rastreamento 104 utilizaes de 199
imagens JPEG como imagem de rastreamento 104 utilizaes de 199 imagens PNG como imagem de rastreamento 104 utilizaes de 199 ndice, Ajuda 11 informaes do servidor da Web 140 Iniciador como personalizar 67 como utilizar 67 Mini-iniciador 64 inspetor de comportamentos 300 inspetor de imagens 211 inspetor de linhas de tempo 253 inspetor de molduras 269 inspetor de origem de HTML janela do documento, como alternar para 340 viso geral 339 inspetor de propriedades como ajustar os vnculos rompidos 170 como exibir 66 como expandir 66 imagens 201 pontos ativos 213 propriedades do formulrio 382 propriedades dos applets de Java 296 propriedades dos controles ActiveX 295 propriedades dos lmes Flash 288 propriedades dos lmes Shockwave 287 propriedades dos itens de biblioteca 377 propriedades dos plug-ins do Netscape Navigator 292 roteiros 358 inspetores atalhos 419 como abrir e fechar com o Iniciador 67 inspetor de comportamentos 300 inspetor de imagens 211 inspetor de origem de HTML 339 inspetor de propriedades 66 Consulte tambm paletas interatividade 105 introduo ao Dreamweaver 14 itlico 179
ndice remissivo 433
J janela do documento barra de ttulo 64 como abrir documentos 84 como buscar texto 157 como editar um rtulo HTML 340 como executar os plug-ins do Navigator 293 como redimensionar 65 como selecionar os elementos 89 inspetor de origem de HTML, como alternar para 340 menu pop-up Tamanho da janela 64 Mini-iniciador 64 princpios bsicos 64 seletor de rtulos 64 tamanho da pgina e tempo de descarga 64 janela do site comando Colocar 153 comando Obter 151 como alterar a exibio 81 como buscar arquivos 156 como buscar texto 157 como exibir os sites locais 80 exibio do mapa do site 145 exibio dos arquivos do site 145 mapas de sites 80 opes da barra de ferramentas 145 princpios bsicos 79 viso geral 144 janelas atalhos 419 como abrir e fechar com o Iniciador 67 Consulte tambm inspetores, paletas JavaScript aes 301 alertas 322 como executar 309 como inserir roteiros 357 extenso dos recursos do Dreamweaver 402 JavaServer Pages (JSP), sobre 406 JSP 406
L linhas de tempo atalhos 415 cabeote de execuo 253 caminhos complexos 257 como adicionar e remover 258 como adicionar um objeto s 255 como alterar as propriedades das camadas 259 como alterar o arquivo de origem da imagem 259 como anexar um comportamento 305 como controlar com os comportamentos 263 como criar 255 como executar automaticamente 258 como executar e parar utilizando os comportamentos 333 como modicar 258 como renomear 262 como repetir continuamente 258 dicas de animao 262 em modelos 367 mltiplas 260 quadros primrios 255 listas como criar 183 listas no-ordenadas, como criar 183 M macros (como criar comandos) 101 manipuladores de eventos. Consulte eventos manual Usando o Dreamweaver 13 mapa de percurso (onde iniciar) 14 mapas de bits, como redimensionar 204 mapas de imagens como criar para o cliente 211 como selecionar vrios pontos ativos 212 pontos ativos 211 viso geral 211 mapas de imagens do cliente como criar 211 mapas de imagens do servidor 211 mapas de sites atalhos 417 como exibir 80
434
ndice remissivo
mapas dos sites comando Atualizar local 131 comando Denir como home page 131 comando Vnculo a um arquivo existente 130 comando Vnculo a um novo arquivo 130 como adicionar os arquivos ao site 130 como alterar os vnculos nos 131 como atualizar aps as alteraes 131 como editar as pginas 129 como exibir uma ramicao dos 133 como expandir uma ramicao 133 como marcar como ocultos 132 como mostrar os arquivos dependentes nos 133 como reduzir uma ramicao 133 como remover os vnculos nos 132 como renomear as pginas nos 130 como salvar como um arquivo de imagem 133 como selecionar vrias pginas nos 129 mostrar os arquivos ocultos 132 opo Exibir os arquivos dependentes 133 opo Mostrar os ttulos das pginas 130 vnculos 131 marcador de HTML incorreto 354 marcadores de elementos invisveis 90 material de referncia 19 menu Comandos, como editar 391 menu Janela 62 menu pop-up Tamanho da janela 64 menus contextuais 70 menus de atalhos. Consulte menus contextuais menus de salto botes Ir (comportamento) 319 botes Ir, como adicionar automaticamente 122 como adicionar os itens de menus 122 como alterar os itens de menu 123 como criar um aviso de seleo para 122 como editar 319 menus, como personalizar 391 Mini-iniciador como personalizar 67 introduo 64
modelos atalhos 418 como alterar as cores de realce 363 como aplicar a um documento j existente 368 como criar 361 como criar novos documentos com 85, 368 como denir as regies editveis 362 como desanexar um documento de 369 como editar 361 como exibir as regies 364 como localizar as regies editveis 369 como modicar 369 como renomear 367 como tornar uma regio no-editvel 366 como utilizar as linhas de tempo 367 como utilizar os comportamentos 367 como utilizar os estilos 367 paleta de modelos 367 pasta Modelos 361 preferncias 363 propriedades da pgina 362 regies editveis e bloqueadas 362 viso geral 359 XML 370 molduras aninhadas 268 atalhos 413 bordas 278 como alterar a cor do fundo 279 como alterar o contedo 279 como criar 266 como designar 279 como excluir 267 como redimensionar 277 como salvar arquivos em 271 como selecionar 268 compatibilidade com os navegadores 280 comportamentos, como utilizar com 281 propriedades 273 viso geral 265 Mostrar os ttulos das pginas no mapa do site 130 multimdia. Consulte mdia
ndice remissivo 435
N navegador primrio 171 navegador secundrio 171 navegadores arquivos compatveis com a verso 3.0 252 como designar 167 como detectar 165 como visualizar nos 170 compatibilidade, como planejar para 164 compatibilidade, como testar 167 cores, aceitas 92 e estilos CSS 196 pers, como criar 400 pers, como editar 398 primrio, como denir 171 verses, como vericar 310 novos recursos no Dreamweaver 16 O objeto de ncora (paleta de objetos) 119 objetos atalhos 418 como adicionar a formulrios 383 como adicionar Design Notes 174 como criar 389 como inserir 86 como inserir com a paleta de objetos 68 objetos Aftershock 290 objetos do Generator, viso geral 291 opo Abrir (cone correspondente pasta) 378 opo Adicionar pgina (paleta de bibliotecas) 378 opo Advertir ao ajustar ou remover os rtulos 347 opo Ajustar os rtulos abertos e aninhados incorretamente (preferncias) 346 opo Aninhar sempre quando criada dentro de uma camada existente 239 opo Ao criar os estilos, utilizar o formato abreviado de 195 opo Ao editar os estilos existentes, utilizar o formato abreviado 195 opo Aplicao automtica (paleta de estilos HTML) 185 opo Arquivos locais 81 opo Arquivos remotos 81 opo Ativar a devoluo e retirada de arquivos 149 opo Atualizar a lista de arquivos locais automaticamente 77
opo Atualizar as pginas (paleta de bibliotecas) 378 opo Cache 78 opo caixa de cores 90 opo Caixa do atributo 348 opo Caixa do rtulo 348 opo Centralizao 349 opo Coincidir maisc./minsc. 158 opo Colocar os arquivos mais novos no remoto 155 opo Combinar os rtulos aninhados sempre que possvel 351 opo Comentrios (Cores HTML) 349 opo Cor do fundo (Cores HTML) 349 opo Cor do texto 94 opo Cor do vnculo 94 opo Corrigir os rtulos aninhados incorretamente (Limpar o HTML do Word) 353 opo Denir a cor do fundo (Limpar o HTML do Word) 353 opo Desanexar do original 376 opo Espaamento da clula 216 opo Especca ao rtulo 349 opo Execuo automtica 253 opo Ignorar a caixa de 349 opo Ignorar os diferentes espaos em branco 158 opo ndice Z como alterar a ordem de empilhamento 248 opo Limpar CSS 353 opo Limpar o estilo da seleo 186 opo Limpar o estilo do pargrafo 186 opo Limpar os rtulos 353 opo Linhas e colunas 216 opo Linhas e colunas da tabela 347 opo Loop 253 opo Molduras e conjuntos de molduras 348 opo Mostrar o Mini-iniciador na barra de status 66 opo Mostrar o registro quando concluir 351, 353 opo Nmeros de linhas 339 opo Nunca regravar o HTML em arquivos com as extenses 347 opo Obter e colocar os arquivos mais novos 155 opo Obter os arquivos mais novos do remoto 155 opo Origem de HTML 158 opo Padro de rtulo 349 opo Padro do navegador (Alinhamento) 203 opo Pr-carregar as imagens 208 opo Preenchimento da clula 216 opo Quebra autom. de linha 339
436
ndice remissivo
opo Quebra automtica de linha 348 opo Quebras de linha (formato HTML) 348 opo Recuo (preferncias) 347 opo Redenir o rtulo HTML 192 opo Remover comentrios de HTML no pertencentes ao Dreamweaver 350 opo Remover os comentrios de HTML pertencentes ao Dreamweaver 351 opo Remover os rtulos adicionais de nalizao 347 opo Remover os rtulos aninhados redundantes 350 opo Remover os rtulos vazios 350 opo Remover rtulo(s) especco(s) 351 opo Remover todo o markup especco ao Word 353 opo Renomear (paleta de bibliotecas) 378 opo Retirar os arquivos na abertura 149 opo Selecionar na janela do site (paleta de bibliotecas) 378 opo Tamanho da tabulao 348 opo Tamanho do recuo 348 opo Texto (Cores HTML) 349 opo Utilizar (preferncias de formato HTML) 347 opo Utilizar a rewall 142 opo Utilizar expresses regulares 158 opo Utilizar Local/Rede 141 opo Utilizar nenhum 141 opo Utilizar o FTP 141 opo Utilizar o FTP passivo 142 opo Velocidade de conexo 66 opo Vnculos ativos 94 opo Vnculos visitados 94 opes de Acesso ao servidor 141 opes de Caracteres especiais (preferncias de regravao de HTML) 347 opes de devoluo/retirada 149 opes de exibio fontes 71 paletas utuantes 63 opes de localizao 157 opes de localizao em 157 opes Recuo e Remover o recuo (inspetor de propriedades de texto) 183 ordem de empilhamento camadas 248 como alterar com as linhas de tempo 259 ortograa como vericar 198
P pginas como alterar o ttulo 93 como visualizar em navegadores 170 cor 94 cores padro do texto 94 Design Notes, como utilizar em 172 imagem de fundo 94 propriedades e modelos 362 tamanho 172 tempo de descarga, estimativa 172 pginas da Ajuda e manual Extenso dos recursos do Dreamweaver 13 Pginas da Ajuda em HTML do Dreamweaver 11 paleta de bibliotecas 378 paleta de camadas 237 paleta de estilos CSS 195 paleta de histrico comandos, como criar a partir das etapas do histrico 101 como automatizar as tarefas com 97 como desfazer as alteraes 96 como limpar a lista de histrico 95 etapas, como aplicar a outros objetos 98 etapas, como copiar e colar 100 etapas, como repetir 97 nmero mximo de etapas, como denir 95 viso geral 95 paleta de modelos 367 Paleta de objetos viso geral 68 paleta de objetos como personalizar 388 painis 68 preferncias 69
ndice remissivo
437
paletas atalhos 419 como abrir e fechar com o Iniciador 67 como denir as preferncias de paletas utuantes 63 cor 90 de encaixe 62 Iniciador 67 paleta de bibliotecas 378 paleta de histrico 95 paleta de modelos 367 paleta de objetos 68 Consulte tambm inspetores paletas utuantes de encaixe 62 pasta Conguration arquivo Extensions.txt 390 arquivo menus.xml 391 arquivo SourceFormat.txt 396 subpasta Behaviors 395 subpasta BrowserProles 398 subpasta Commands 395 subpasta Objects 388 subpasta ThirdPartyTags 402 pasta raiz local 77 remoto 142 pasta raiz local 77 pastas como buscar 156 raiz 77 perl de formatao da origem 396 pers formato da origem de HTML 396 navegadores 398 PHP Hypertext Preprocessor 407 pixels transparentes 94 pixels, transparentes 94 plug-ins como detectar 165 como executar na janela do documento 293 como executar os atalhos 417 como redimensionar 203 como vericar 312 Netscape Navigator 292 resoluo de problemas 294
plug-ins do Netscape Navigator como executar na janela do documento 293 propriedades 292 resoluo de problemas 294 pontos ativos como aplicar comportamentos a 214 como selecionar vrios em um mapa de imagens 212 em mapas de imagens 211 propriedades 213 preferncias barra de status 66 bibliotecas 373 Camada 239 como atualizar os vnculos 134 Converso 379 cores HTML 349 dicionrio para vericao ortogrca 198 Editores externos 284 Elementos invisveis 90 Fontes 71 Formato da folha de estilos 195 formato HTML 347 FTP do site 146 gerais 71 modelo 363 paleta de objetos 69 paletas utuantes 63 regravao de HTML 346 viso geral 71 Visualizar no navegador 171 Visualizar utilizando o servidor local (vnculos relativos raiz) 113 preferncias de camadas como aninhar 239 compatibilidade da camada com o Netscape 4 239 rtulos de camadas 239 preferncias de fontes/codicao 71 preferncias de FTP do site 146 preferncias de visualizao no navegador 171 preferncias gerais 71 princpios bsicos do Dreamweaver 14 procedimentos de eventos. Consulte aes propores, como manter 204 propriedade de alinhamento da imagem 201 propriedade de atualizao da imagem 202 propriedade de borda da imagem 202
438
ndice remissivo
propriedade de campo de nome do mapa 202 propriedade de imagem alternativa 201 propriedade de imagem de destino 202 propriedade de linguagem do roteiro 358 propriedade de nome (inspetor de propriedades da imagem) 201 propriedade de origem baixa da imagem 202 propriedade de origem da imagem 201 propriedade de vnculo da imagem 201 propriedade do roteiro de origem 358 propriedades applets de Java 296 camada 239 camadas mltiplas 242 colunas, linhas e clulas 224 como alterar com comportamentos 309 como exibir 66 conjunto de molduras 275 controles ActiveX 295 lmes Flash 288 lmes Shockwave 287 imagem 201 moldura 273 pontos ativos 213 tabela 222 propriedades das camadas 239 propriedades Espao V e Espao H da imagem 201 propriedades L e U da imagem 201 Q qps 253 quadros por segundo (qps) 253 quadros primrios como criar 255 viso geral 253 Quick Tag Editor como abrir 340 como utilizar 341 modo Colocar o rtulo ao redor 344 modo Editar o rtulo 344 modo Inserir o HTML 344 preferncias 345 viso geral 340
R ramicaes, como expandir e reduzir no mapa do site 133 recursos, novos no Dreamweaver 16 recursos, referncia na Web 19 rguas 103 rguas horizontais 88 requisitos do sistema Macintosh 10 Windows 9 resoluo de problemas como transferir arquivos 153 plug-ins do Navigator 294 roteiros como inserir e editar 357 como mostrar no documento 90 propriedades 358 roteiros CGI 385 roteiros Common Gateway Interface (CGI) 385 rtulo BLOCKQUOTE 182 rtulo BODY 106 rtulo MAP 211 rtulo OL 182 rtulo UL 182 rtulos ASP 356 BLOCKQUOTE 182 BODY 106 buscas 159 CFML 356 como aplicar 178 como corrigir os incorretos 354 como editar 340 como envolver com 340 como remover 345 como selecionar 89 como sobrepor 338 de outros fabricantes 402 em pers de navegadores 398 especicaes 403 invlidos 338 OL 182 tabela 221 TAGSPEC 403 UL 182 XML 338 rtulos de cabealhos 178
ndice remissivo 439
rtulos de outros fabricantes como impedir a regravao 407 como personalizar 402 rtulos de pargrafos 178 rtulos incorretos como corrigir 354 rtulos invlidos como exibir 338 rtulos sobrepostos 338 Roundtrip HTML 338 S seo HEAD, como editar o contedo na 106 server-side includes como editar 380 como inserir 379 como processar e exibir 379 opes de converso 380 viso geral 379 servidores AppleTalk 141 como denir 140 como resolver problemas de congurao 143 NFS 141 opes de acesso 141 servidores AppleTalk 141 servidores da Web. Consulte servidores servidores NFS 141
sites atalhos 416 cache 134 como adicionar arquivos e pastas 82 como ajustar os vnculos rompidos 169 como alterar a exibio 81 como alterar os vnculos no site inteiro 135 como buscar arquivos nas 156 como descarregar e editar sites remotos j existentes 78 como devolver e retirar arquivos 150 como exibir 79 como remover da lista de sites 84 como selecionar os arquivos atualizados 82 como testar 166 como vericar os vnculos 168 como visualizar em navegadores 170 compatibilidade com os navegadores 164, 167 Design Notes, como utilizar em 172 estrutura e navegao 139 locais e remotos 74 locais, como criar 77 locais, como exibir 80 locais, pasta raiz 77 local, como associar a um servidor remoto com 140 local, como localizar arquivos no 156 remoto, como congurar 140 remoto, como denir 140 remoto, como localizar arquivos no 156 remoto, como resolver problemas de congurao 143 remoto, pasta raiz 142 remotos, como denir 140 remotos, opes de acesso 141 sites locais. Consulte sites 77 sites remotos. Consulte sites som, como executar 322 sublinhado 179 submenu Estilo 179 Sumrio, Ajuda 11
440
ndice remissivo
T tabelas atalhos 413 clulas, como dividir 232 colunas, linhas e clulas 224 como adicionar bordas a 222 como adicionar cor de fundo a 223 como adicionar e remover linhas e colunas 229 como adicionar imagens de fundo a 223 como adicionar o contedo a 217 como ajustar as linhas e colunas 228 como alinhar 224 como alterar a largura das colunas 228 como aninhar 230 como converter a partir de camadas 250 como criar 216 como formatar 221 como limpar a largura e altura das clulas 229 como mesclar as clulas 232 como ordenar 233 como redimensionar 228 como selecionar os elementos 219 formatos predenidos de 225 largura, como denir 222 opo Sem quebra 225 propriedades 222 rtulos HTML 221 viso geral 215 Consulte tambm colunas, linhas e clulas tamanho da pgina, como redimensionar para que caiba no monitor 65 tamanho do monitor, como redimensionar as pginas para que caibam 65 tempo de descarga 64 texto alinhamento 182 atalhos de formatao 412 como adicionar a documentos 86 como alterar as combinaes de fontes 180 como buscar nos documentos 157 como editar os atalhos 411 como formatar 177 como formatar com estilos HTML 184 como recuar 182 cor padro nas pginas 94 cor, como alterar 181 editores externos. Consulte editores externos
texto em negrito 179 tipo de arquivo padro, como alterar 390 Tour guiado 11 U URLs. Consulte caminhos V VBScript 357 vnculos a ncoras 119 a folhas de estilos 190 a um documento 113 arquivo de cache 134 atalhos 415 como abrir a origem 131 como ajustar 169 como alterar as molduras com 279 como alterar no site inteiro 135 como atualizar 134 como criar 114 como criar com o cone do indicador de arquivos 116 como designar 113 como especicar 183 como remover 131 como testar 136 como vericar 168 mapa do site 131 relativos a documento 115 relativos raiz do site 115 vnculos de correio eletrnico como alterar 135 como criar 120, 121 vnculos de roteiros como alterar 135 como criar 121 vnculos nulos como alterar 135 como criar 121 viso geral do Dreamweaver 9
ndice remissivo
441
X XML em modelos 370 notaes de rtulos para a exportao 372 rtulo TAGSPEC 403 rtulos 338 viso geral 371
442
ndice remissivo

Cuso Completo de Dreamweaver

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Cuso Completo de Dreamweaver

Hochgeladen von

Copyright:

Verfügbare Formate

macromedia

Como instalar o Dreamweaver

Para procurar uma frase, basta digit-la na caixa de texto.

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

Texto romano em negrito indica o texto a ser expandido.

Como dinamizar o fluxo de trabalho: Integrao e comunicao

Repetir fornece um modo rpido de executar tarefas simples e repetitivas. Consulte

Iniciar e editar a mdia

Como personalizar e estender os recursos do Dreamweaver

Recursos de tecnologias de Web e HTML

(http://Webreview.com/guides/style/) um guia que explica o que so os estilos e em quais navegadores funcionam.

Site Common Gateway Interface

(http://msdn.microsoft.com/workshop/ author/dhtml/reference/events.asp#om40_event) contm informaes sobre os eventos no Microsoft Internet Explorer.

workshop/server/asp/ASPover.asp) contm informaes sobre as Active Server Pages (ASP).

Pgina JSP da Sun

(http://www.coldfusion.com/Products/ ColdFusion/) contm informaes sobre ColdFusion.

(http://www.xml.com) contm informaes sobre XML.

Feche o navegador quando terminar de examinar o site. Feche o Dreamweaver.

Configurar a estrutura do site do tutorial

Definir um site local

Criar a home page do site da Scaal

Clique em OK. O ttulo aparecer na barra de ttulo da janela do documento do Dreamweaver.

Criar um layout de pgina

Mantenha a janela do navegador aberta no fundo para consult-la, se for necessrio.

No painel Comuns da paleta de objetos, clique no boto Desenhar a camada.

Clique na borda da mesma. Aparecero alas em volta da camada selecionada:

Escolha Inserir > Imagem.

Clique em OK. As camadas foram convertidas em uma tabela.

Feche a paleta de camadas. Salve o arquivo.

Criar imagens cambiveis

Importar um documento em HTML do Word

Formatar o texto utilizando os estilos HTML

Escolha Janela > Estilos HTML. Aparecer a paleta de estilos HTML.

Clique no cone de Novo estilo, na parte inferior da paleta de estilos HTML.

cone de Novo estilo

Aparecer a caixa de dilogo Denir o estilo HTML.

Criar um mapa visual do site

Feche o navegador ao concluir a exibio da pgina. Feche o arquivo products_cd.html.

No campo Nome, digite Image como nome desta regio do modelo.

Salve o documento e nomeie o arquivo my_products_mug.html.

Criar um menu de salto

Princpios bsicos do Dreamweaver

Menu contextual Janela do documento

Mini-iniciador Inspetor de propriedades

Arraste a sua guia para fora da janela.

Princpios bsicos do Dreamweaver

O menu pop-up Tamanho da janela

Para adicionar um novo tamanho ao menu pop-up Tamanho da janela: 1 2 3 4

Princpios bsicos do Dreamweaver

Princpios bsicos do Dreamweaver

Princpios bsicos do Dreamweaver

Como definir as preferncias

Princpios bsicos do Dreamweaver

Para alterar a codificao do documento atual:

Usando o Dreamweaver com outros aplicativos

Como criar sites e documentos

Sobre o planejamento de sites

my_site1 (root folder)

my_site2 (root folder)

Assets (for whole site)

index.html (home page)

index.html (home page)

Como criar sites e documentos

Como criar um site local