Usando o Dreamweaver

macromedia

Marcas comerciais
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware,
Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage
Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio,
Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer,
FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge
Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash,
Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip
HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools
to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind e Xtra so marcas comerciais da Macromedia, Inc.,
podendo estar registradas nos Estados Unidos ou em outras jurisdies, inclusive internacionais. Outros nomes de produtos, logotipos,
designs, ttulos, palavras ou frases mencionados no mbito desta publicao podem ser marcas comerciais, marcas de servios ou nomes
comerciais da Macromedia, Inc. ou de outras entidades, podendo ser registrados em certas jurisdies, inclusive internacionais.
Este guia contm links a sites de outros fabricantes na Web que no esto sob o controle da Macromedia, e por cujo contedo a
Macromedia no se responsabilizar. Se acessar um dos sites de outros fabricantes na Web mencionados neste guia, voc prprio(a) se
responsabilizar pelos riscos. A Macromedia fornece estes links apenas como uma convenincia. A incluso dos links no implica que a
Macromedia endossar ou aceitar qualquer responsabilidade pelo contedo dos sites destes outros fabricantes.
Iseno de responsabilidade da Apple
A APPLE COMPUTER, INC. NO OFERECE GARANTIAS, EXPRESSAS OU IMPLCITAS, PARA O PACOTE DE SOFTWARE DE COMPUTADOR CONTIDO NESTA EMBALAGEM, SUA COMERCIALIZAO OU ADEQUAO A QUALQUER UTILIZAO ESPECFICA. A EXCLUSO DAS GARANTIAS IMPLCITAS NO PERMITIDA EM ALGUNS
ESTADOS. A EXCLUSO ACIMA PODE NO SE APLICAR AO SEU CASO. ESTA GARANTIA LHE CONCEDE DIREITOS
LEGAIS ESPECFICOS. POSSVEL QUE HAJA OUTROS DIREITOS AOS QUAIS O USURIO TENHA DIREITO, QUE
VARIAM PARA CADA ESTADO.
Copyright 2000 Macromedia, Inc. Todos os direitos reservados. Este manual no pode ser copiado, fotocopiado, reproduzido,
traduzido ou convertido em qualquer meio eletrnico ou formato mecnico, integralmente ou em parte, sem a aprovao prvia, por
escrito, da Macromedia, Inc.
Nmero de parte ZDW40M100PO
Agradecimentos
Gerncia do projeto: Sheila McGinn
Texto: Kim Diezel, Valerie Hanscom, Jed Hartman e Emily Ricketts
Edio: Anne Szabla e Lisa Stanziano
Gerncia de produo: John Zippy Lehnus
Design e produo de multimdia: Aaron Begley e Noah Zilberberg
Produo da impresso: Chris Basmajian, Paul Benkman, Caroline Branch e Rebecca Godbois
Edio e produo da Web: Jane Flint DeKoven e Jeff Harmon
Gerente de localizao: Bonnie Loo
Agradecimentos especiais a Jaime Austin, Chris Bank, Saam Barrager, Heidi Bauer, Jennifer Chapman, Winsha Chen, Kristin Conradi,
Margaret Dumas, Peter Fenczik, Jean Fitzgerald, S Fred Golden, Stephanie Goss, Victor Grigorieff, Narciso (nj) Jaramillo, John Koch,
David Lenoe, Eric Lerner, Charles Nadeau, Eric Ott, Jeff Schang, Mike Sundermeyer, Luciano Arruda, Raymond Lim, Scott Richards,
Yoko Vogt, Peter von dem Hagen, Joo Carlos Rebello Carib, Ziggy Quinete e s equipes de engenharia e garantia de qualidade do
Dreamweaver.
Primeira edio: novembro de 2000
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103

NDICE

INTRODUO
Guia de introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Requisitos do sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Como instalar o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Introduo ao Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Fluxo de trabalho de desenvolvimento da Web . . . . . . . . . . . . . . . . . . 17
Onde iniciar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Convenes tipogrficas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Novidades do Dreamweaver 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Recursos de tecnologias da Web e HTML . . . . . . . . . . . . . . . . . . . . . . 25
Acessibilidade e o Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
CAPTULO 1
Tutorial do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . .29
Faa um tour guiado no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . 30
A rea de trabalho do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Configurar a estrutura do site do tutorial. . . . . . . . . . . . . . . . . . . . . . . 33
Definir um site local . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Criar a home page do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Desenhar uma pgina na visualizao de layout . . . . . . . . . . . . . . . . . . 38
Adicionar contedo pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Trabalhar na visualizao padro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Utilizar o painel Propriedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Inserir objetos Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Criar um modelo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Verificar o site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
As prximas etapas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

CAPTULO 2
Princpios bsicos do Dreamweaver . . . . . . . . . . . . . 73
Sobre a rea de trabalho do Dreamweaver . . . . . . . . . . . . . . . . . . . . . . .74
Sobre as diversas visualizaes no Dreamweaver . . . . . . . . . . . . . . . . . .75
Como trabalhar com as cores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91
Sobre as cores aceitas pela Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92
Como definir as preferncias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92
Como utilizar o Dreamweaver com outros aplicativos . . . . . . . . . . . . . .94
Personalizao bsica no Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . .94
CAPTULO 3
Como planejar e definir o seu site . . . . . . . . . . . . . . 101
Sobre o planejamento e projeto de sites . . . . . . . . . . . . . . . . . . . . . . . .101
Como utilizar o Dreamweaver para definir um novo site . . . . . . . . . . .108
Como editar um site da Web j existente: . . . . . . . . . . . . . . . . . . . . . .110
Como editar um site remoto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .111
Para remover um site da lista de sites . . . . . . . . . . . . . . . . . . . . . . . . . .112
CAPTULO 4
Gerenciamento de sites e colaborao . . . . . . . . . .113
Sobre a janela do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114
Como exibir e abrir os arquivos na janela do site . . . . . . . . . . . . . . . . .119
Sobre o mapa do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123
Como utilizar o mapa do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124
Como configurar um site remoto . . . . . . . . . . . . . . . . . . . . . . . . . . . .131
Sobre a integrao WebDAV e SourceSafe . . . . . . . . . . . . . . . . . . . . . .135
Como solucionar problemas de configurao do site remoto . . . . . . . .138
Como utilizar as opes de devoluo e retirada de arquivos . . . . . . . .139
Sobre as Design Notes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142
Como utilizar os relatrios para melhorar o fluxo de trabalho . . . . . . .149
Como obter e colocar arquivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151
Como sincronizar os arquivos nos sites local e remoto . . . . . . . . . . . . .154
CAPTULO 5
Como configurar um documento . . . . . . . . . . . . . . . 157
Como criar, abrir e salvar os documentos HTML . . . . . . . . . . . . . . . .158
Como definir as propriedades do documento . . . . . . . . . . . . . . . . . . .160
Como selecionar os elementos na janela do documento. . . . . . . . . . . .162
Como utilizar as guias visuais no processo de desenho. . . . . . . . . . . . .165
Como exibir e editar o contedo do cabealho . . . . . . . . . . . . . . . . . .167
Sobre como automatizar as tarefas . . . . . . . . . . . . . . . . . . . . . . . . . . . .168

ndice

CAPTULO 6
Como projetar o layout de pgina . . . . . . . . . . . . . . 177
Sobre as clulas e tabelas de layout. . . . . . . . . . . . . . . . . . . . . . . . . . . .178
Como desenhar clulas e tabelas de layout. . . . . . . . . . . . . . . . . . . . . .179
Como mover e redimensionar as clulas e tabelas de layout . . . . . . . . .185
Como formatar as clulas e tabelas de layout . . . . . . . . . . . . . . . . . . . .187
Como definir a largura do layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . .189
Como definir as preferncias de visualizao de layout. . . . . . . . . . . . .194
CAPTULO 7
Como utilizar as tabelas para apresentar o
contedo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Como inserir uma tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196
Como selecionar os elementos da tabela . . . . . . . . . . . . . . . . . . . . . . .200
Como formatar as tabelas e clulas . . . . . . . . . . . . . . . . . . . . . . . . . . .201
Como redimensionar as tabelas e clulas . . . . . . . . . . . . . . . . . . . . . . .207
Como adicionar e remover linhas e colunas . . . . . . . . . . . . . . . . . . . . .208
Como copiar e colar as clulas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .212
Como ordenar as tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214
Como exportar os dados da tabela . . . . . . . . . . . . . . . . . . . . . . . . . . . .215
CAPTULO 8
Como utilizar as molduras (frames) . . . . . . . . . . . . . 217
Como decidir se as molduras sero utilizadas. . . . . . . . . . . . . . . . . . . .218
Sobre a criao de pginas da Web com base em molduras . . . . . . . . .219
Como criar molduras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219
Como selecionar uma moldura ou um conjunto de molduras . . . . . . .223
Como salvar os arquivos de molduras e de conjuntos de molduras . . .225
Sobre as propriedades das molduras e dos conjuntos de molduras . . . .226
Como controlar o contedo de molduras com os links . . . . . . . . . . . .233
Como tratar os navegadores que no podem exibir molduras . . . . . . .234
Como utilizar os comportamentos com molduras . . . . . . . . . . . . . . . .235
CAPTULO 9
Como gerenciar e inserir propriedades. . . . . . . . . 237
Como utilizar o painel Propriedades . . . . . . . . . . . . . . . . . . . . . . . . . .238
Como utilizar as propriedades favoritas . . . . . . . . . . . . . . . . . . . . . . . .246

ndice

CAPTULO 10
Como inserir e formatar texto . . . . . . . . . . . . . . . . . . 251
Como inserir texto e objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252
Como criar listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .256
Como configurar as fontes, estilos, cor e alinhamento . . . . . . . . . . . . .257
Como utilizar os estilos HTML para formatar o texto . . . . . . . . . . . .262
Como utilizar as folhas de estilos CSS . . . . . . . . . . . . . . . . . . . . . . . . .267
Como converter os estilos CSS em tags HTML . . . . . . . . . . . . . . . . .277
Como verificar a ortografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279
Como procurar e substituir texto, tags e atributos . . . . . . . . . . . . . . . .280
CAPTULO 11
Como inserir imagens . . . . . . . . . . . . . . . . . . . . . . . . 289
Como inserir uma imagem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .291
Como definir as propriedades da imagem . . . . . . . . . . . . . . . . . . . . . .292
Como criar os mapas de imagens. . . . . . . . . . . . . . . . . . . . . . . . . . . . .296
Como utilizar um editor de imagens externo. . . . . . . . . . . . . . . . . . . .301
Como aplicar comportamentos a imagens . . . . . . . . . . . . . . . . . . . . . .304
CAPTULO 12
Utilizao do Dreamweaver e do Fireworks
juntos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Obteno de arquivos do Fireworks no Dreamweaver . . . . . . . . . . . . .307
Execuo do Fireworks a partir do Dreamweaver. . . . . . . . . . . . . . . . .312
Edio de arquivos do Fireworks colocados no Dreamweaver . . . . . . .314
Otimizao de imagens e animaes do Fireworks colocadas no
Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .317
Atualizao do HTML do Fireworks colocado no Dreamweaver . . . . .321
Criao de lbuns de fotografias na Web . . . . . . . . . . . . . . . . . . . . . . .321
CAPTULO 13
Como inserir mdia . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Como inserir objetos de mdia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325
Como iniciar um editor externo . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326
Como utilizar as Design Notes com objetos de mdia . . . . . . . . . . . . .328
Sobre o contedo Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .328
Como utilizar os objetos boto Flash. . . . . . . . . . . . . . . . . . . . . . . . . .329
Como utilizar os objetos de texto Flash . . . . . . . . . . . . . . . . . . . . . . . .332
Como definir as propriedades dos objetos Flash . . . . . . . . . . . . . . . . .333
Como inserir filmes Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .335
Como inserir objetos Generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337

ndice

Sobre os filmes Shockwave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .338

Como adicionar som a uma pgina . . . . . . . . . . . . . . . . . . . . . . . . . . .339
Como inserir o contedo de plug-ins do Netscape Navigator . . . . . . .341
Como inserir um controle ActiveX . . . . . . . . . . . . . . . . . . . . . . . . . . .344
Como inserir um miniaplicativo Java . . . . . . . . . . . . . . . . . . . . . . . . .346
Como utilizar os parmetros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .348
Como utilizar os comportamentos para controlar os elementos
de mdia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .349
CAPTULO 14
Como editar o HTML no Dreamweaver. . . . . . . . . 351
Como compreender os tags HTML bsicos. . . . . . . . . . . . . . . . . . . . .352
Como inserir os comentrios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .357
Como utilizar o painel Referncia do Dreamweaver . . . . . . . . . . . . . .358
Sobre o Roundtrip HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .360
Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) . . . .361
Como inserir os scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .365
Como abrir e editar os arquivos no-HTML no Dreamweaver . . . . . .368
Como editar um tag HTML na visualizao do projeto . . . . . . . . . . .369
Como definir as preferncias de formatao de cdigo. . . . . . . . . . . . .374
Como limpar o cdigo-fonte HTML . . . . . . . . . . . . . . . . . . . . . . . . .378
Como limpar o HTML do Microsoft Word . . . . . . . . . . . . . . . . . . . .379
Como utilizar os editores de HTML externos . . . . . . . . . . . . . . . . . . .381
CAPTULO 15
Links e navegao . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
Sobre as localizaes e os caminhos dos documentos . . . . . . . . . . . . . .386
Como criar os links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .390
Como gerenciar os links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .398
Como criar menus de salto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .401
Como criar as barras de navegao . . . . . . . . . . . . . . . . . . . . . . . . . . .404
Como anexar comportamentos aos links . . . . . . . . . . . . . . . . . . . . . . .407

ndice

CAPTULO 16
Como reutilizar o contedo com os modelos
e bibliotecas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
Como criar os modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .411
Como definir as regies editveis de um modelo . . . . . . . . . . . . . . . . .415
Como criar documentos a partir de modelos . . . . . . . . . . . . . . . . . . . .422
Como atualizar as pginas com base em um modelo . . . . . . . . . . . . . .424
Como exportar e importar o contedo XML. . . . . . . . . . . . . . . . . . . .426
Como criar, gerenciar e editar os itens de biblioteca. . . . . . . . . . . . . . .429
Como utilizar as server-side includes . . . . . . . . . . . . . . . . . . . . . . . . . .436
CAPTULO 17
Como utilizar as camadas . . . . . . . . . . . . . . . . . . . . . 439
Sobre as camadas e o cdigo HTML . . . . . . . . . . . . . . . . . . . . . . . . . .440
Como criar camadas na pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .441
Como manipular as camadas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .445
Como definir as propriedades de camada . . . . . . . . . . . . . . . . . . . . . .449
Como alterar a ordem de empilhamento de camadas. . . . . . . . . . . . . .453
Como alterar a visibilidade das camadas . . . . . . . . . . . . . . . . . . . . . . .454
Como utilizar as tabelas e camadas para o layout . . . . . . . . . . . . . . . . .455
Como animar as camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .458
Aes de comportamentos para controlar as linhas de tempo
de camadas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .468
CAPTULO 18
Como utilizar os comportamentos . . . . . . . . . . . . . 469
O painel Comportamentos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .470
Sobre os eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .470
Como anexar um comportamento. . . . . . . . . . . . . . . . . . . . . . . . . . . .473
Sobre os comportamentos e texto . . . . . . . . . . . . . . . . . . . . . . . . . . . .475
Como anexar um comportamento a uma linha de tempo . . . . . . . . . .476
Como alterar um comportamento. . . . . . . . . . . . . . . . . . . . . . . . . . . .476
Como atualizar um comportamento . . . . . . . . . . . . . . . . . . . . . . . . . .477
Como criar novas aes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .477
Como fazer o download de e instalar os comportamentos de
outros fabricantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .478
Como utilizar as aes de comportamentos enviadas com o
Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .478

ndice

CAPTULO 19
Como depurar o cdigo JavaScript. . . . . . . . . . . . 509
Como executar o depurador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .510
Como localizar e corrigir os erros lgicos. . . . . . . . . . . . . . . . . . . . . . .512
CAPTULO 20
Como criar formulrios . . . . . . . . . . . . . . . . . . . . . . . . 519
Sobre os scripts CGI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .520
Sobre os objetos de formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .520
Como criar um formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .522
Sobre os campos de formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .524
Como inserir caixas de seleo e botes de opo . . . . . . . . . . . . . . . .529
Sobre as listas e menus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .532
Sobre os botes de formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .534
Sobre a criao de formulrios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .536
Como processar os formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .537
Como utilizar os comportamentos com formulrios . . . . . . . . . . . . . .538
CAPTULO 21
Como testar e publicar um site . . . . . . . . . . . . . . . . . 541
Como verificar a compatibilidade com o navegador . . . . . . . . . . . . . .542
Como utilizar os comportamentos para detectar os navegadores
e plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .544
Como visualizar nos navegadores. . . . . . . . . . . . . . . . . . . . . . . . . . . . .544
Como verificar links numa pgina ou site . . . . . . . . . . . . . . . . . . . . . .546
Como verificar o tempo e o tamanho do download . . . . . . . . . . . . . . .549
Como utilizar os relatrios para testar um site . . . . . . . . . . . . . . . . . . .550
CAPTULO 22
Como personalizar o Dreamweaver . . . . . . . . . . . 553
Como alterar o tipo de arquivo padro . . . . . . . . . . . . . . . . . . . . . . . .554
Como modificar o painel Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . .555
Como criar um objeto simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .556
Sobre a personalizao dos menus do Dreamweaver . . . . . . . . . . . . . .557
Como personalizar a aparncia das caixas de dilogo . . . . . . . . . . . . . .568
Como alterar a formatao HTML padro . . . . . . . . . . . . . . . . . . . . .569
Como trabalhar com perfis de navegadores . . . . . . . . . . . . . . . . . . . . .571
Como estender os recursos do Dreamweaver: Princpios bsicos . . . . .575
Como personalizar a interpretao dos tags de outros fabricantes . . . .576

ndice

APNDICE A
Atalhos de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . 585
Menu Arquivo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .585
Menu Editar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .586
Visualizaes de pgina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .586
Como visualizar os elementos da pgina . . . . . . . . . . . . . . . . . . . . . . .587
Edio do cdigo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .587
Como editar o texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .588
Como formatar o texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .589
Como localizar e substituir o texto . . . . . . . . . . . . . . . . . . . . . . . . . . .590
Como trabalhar com tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .590
Como trabalhar com as molduras . . . . . . . . . . . . . . . . . . . . . . . . . . . .591
Como trabalhar com as camadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . .592
Como trabalhar com as linhas de tempo . . . . . . . . . . . . . . . . . . . . . . .592
Como trabalhar com as imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . .593
Como gerenciar os hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .593
Como designar e visualizar nos navegadores . . . . . . . . . . . . . . . . . . . .594
Como depurar nos navegadores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .594
Gerenciamento de sites e FTPs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .594
Mapa do site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .595
Como executar os plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .595
Como trabalhar com os modelos . . . . . . . . . . . . . . . . . . . . . . . . . . . . .595
Como inserir objetos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .596
Painel Histrico. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .596
Como abrir e fechar os painis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .597
Como obter ajuda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .597
Matriz de atalhos de teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .598
NDICE REMISSIVO . . . . . . . . . . . . . . . . . . . . . . . . 603

10

ndice

INTRODUO

Guia de introduo

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

O Macromedia Dreamweaver um editor de HTML profissional que projeta e

gerencia sites e pginas da Web visualmente. Se voc gostar do controle de
codificar manualmente HTML ou preferir trabalhar num ambiente de edio
visual, o Dreamweaver facilita o incio do trabalho e fornece ferramentas de ajuda
para aprimorar a experincia em projetos para pginas da Web.
O Dreamweaver inclui vrias ferramentas e recursos: uma referncia de HTML,
CSS e JavaScript, um depurador JavaScript e editores de cdigo (a visualizao de
cdigo e o inspetor de cdigo), que possibilitam editar JavaScript, XML e outros
documentos de texto diretamente no Dreamweaver. A tecnologia Roundtrip
HTML da Macromedia importa documentos HTML sem reformatar o cdigo
e o Dreamweaver pode ser definido para limpar e reformatar o HTML quando
voc quiser.
Os recursos de edio visual do Dreamweaver tambm permitem adicionar
rapidamente desenho e funcionalidade s suas pginas, sem ter que codificar uma
linha sequer. possvel visualizar todos os elementos ou propriedades do site e
arrast-los de um painel de fcil utilizao diretamente para um documento.
Dinamize o seu fluxo de trabalho de desenvolvimento atravs da criao e edio
das imagens no Macromedia Fireworks e, em seguida, de sua importao
diretamente para o Dreamweaver ou adio dos objetos Flash que criar
diretamente para o Dreamweaver.
O Dreamweaver pode ser totalmente personalizado. Utilize o Dreamweaver para
criar os seus prprios objetos e comandos, modificar os atalhos de teclado, alm de
gravar cdigo JavaScript para estender os recursos do Dreamweaver com novos
comportamentos, inspetores de propriedades e relatrios de site.

11

Requisitos do sistema
Os seguintes componentes de hardware e software so necessrios para executar o
Dreamweaver.
Para o Microsoft Windows:

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

executando o Windows 95, Windows 98, Windows 2000, Windows ME ou
Windows NT (com o Server Pack 3)

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

Explorer

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

em disco

Um monitor de 256 cores com resoluo de 800 x 600 pixels

Uma unidade de CD-ROM
Para o Macintosh:

Um Power Macintosh, executando o Mac OS 8.6 ou 9.x

32 MB de memria de acesso aleatrio (RAM) e 135 MB de espao disponvel
em disco

Um monitor de 256 cores com resoluo de 800 x 600 pixels

Uma unidade de CD-ROM

Como instalar o Dreamweaver

Siga estas etapas para instalar o Dreamweaver em um computador com o sistema
Windows ou Macintosh.
Para instalar o Dreamweaver:

Insira o CD do Dreamweaver na unidade de CD-ROM do computador.

Escolha dentre as seguintes opes:

No Windows, escolha Iniciar > Executar. Clique em Procurar e escolha o

arquivo Installer.exe do Dreamweaver 4 no CD deste software. Clique em OK
na caixa de dilogo Executar, para iniciar a instalao.

No Macintosh, clique duas vezes no cone do Instalador do Dreamweaver.

12

Introduo

Siga as instrues na tela.

Se for solicitado, reinicie o computador.

Introduo ao Dreamweaver
O Macromedia Dreamweaver contm vrios recursos para ajud-lo a conhecer o
programa rapidamente e tornar-se um experiente criador de suas pginas e sites da
Web. Estes recursos incluem um manual impresso, pginas da ajuda online, filmes
do Tour guiado, um tutorial e lies interativas. possvel tambm encontrar
dicas atualizadas regularmente, notas tcnicas, exemplos e informaes no site do
Centro de suporte do Dreamweaver no site da Macromedia na Web.
Comece assistindo aos filmes do Tour guiado para se informar sobre os recursos do
Dreamweaver. Em seguida, complete o tutorial do Dreamweaver. E finalmente,
tente as lies do Dreamweaver para aprender como realizar as tarefas no
Dreamweaver.
Filmes do Tour guiado
Os filmes do Tour guiado apresentam uma viso geral animada ao processo de
desenvolvimento da Web e levam-no em um tour pelos recursos do Dreamweaver.
Para visualizar um filme do Tour guiado, escolha Ajuda > Tours guiados e clique
em um dos ttulos de filme. Quando o filme tiver terminado, clique no boto
Incio, para retornar lista de filmes e, em seguida, clique em um outro filme.
possvel assistir ao tour inteiro ou passar a sees especficas.
Tutorial
O tutorial do Dreamweaver constitui o seu melhor ponto de partida, caso queira
adquirir experincia prtica na criao de pginas no Dreamweaver. Ao avanar ao
longo do tutorial, voc aprender a criar uma amostra de site da Web com alguns
dos recursos mais avanados e teis do Dreamweaver. O tutorial est na Ajuda do
Dreamweaver e no manual Como utilizar o Dreamweaver. Tambm possvel fazer
o download de uma verso do tutorial, que pode ser impressa, a partir do site da
Macromedia na Web.
O tutorial inclui pginas e propriedades de amostras (imagens e arquivos do
Macromedia Flash) para ajud-lo a comear no desenvolvimento do site da Web.
Lies do Dreamweaver
O Dreamweaver vem acompanhado de um conjunto de lies interativas. Cada
lio leva-o pelas etapas de uma tarefa especfica e inclui pginas de amostras que
contm todos os elementos funcionais e de desenho necessrios. Utilize as lies
como guias passo a passo com pginas de amostras ou como um guia quando
estiver trabalhando em suas prprias pginas.
Para localizar as lies, escolha Ajuda > Lies, e selecione um tpico.

Guia de introduo

13

Guia do usurio do Dreamweaver (manual impresso)

Como utilizar o Dreamweaver uma alternativa impressa Ajuda do Dreamweaver
e contm informaes de como usar os comandos e recursos do Dreamweaver.
Alguns tpicos de referncia sobre opes do programa no esto includos no
manual impresso; consulte a Ajuda, para obter informaes sobre esses tpicos.
Se tiver adquirido a verso Download de software eletrnico (DSE) do
Dreamweaver, possvel efetuar o download da verso, que pode ser impressa, de
Como utilizar o Dreamweaver a partir do Centro de Suporte do Dreamweaver em
http://www.macromedia.com/support/dreamweaver/documentation.html.
Ajuda do Dreamweaver
A Ajuda do Dreamweaver contm informaes completas sobre todos os recursos
do Dreamweaver, otimizada para uso on-line.
Para obter os melhores resultados na visualizao da Ajuda do Dreamweaver,
utilize o Netscape Navigator 4.0 ou mais avanado, ou o Microsoft Internet
Explorer 4.0 ou mais avanado.
A Ajuda do Dreamweaver utiliza amplamente o JavaScript. Certifique-se de que
esta linguagem esteja ativada no seu navegador. Caso voc planeje utilizar o
recurso de busca, verifique se o Java tambm est ativo.

14

Introduo

A Ajuda do Dreamweaver inclui os seguintes componentes:

Sumrio permite

ver todas as informaes organizadas por assunto. Clique nas

entradas de nvel superior para exibir os subtpicos.
O ndice,

como um ndice tradicional impresso, pode ser utilizado para localizar

termos importantes e ir para os tpicos relacionados.
Busca permite

localizar qualquer seqncia de caracteres no texto inteiro do

tpico. O recurso de busca requer um navegador 4.0 com Java ativado.
Nota: Quando voc clicar em Busca, possvel que a janela de segurana do Java
aparea, solicitando permisso para ler os arquivos no seu disco rgido. Esta permisso
deve ser concedida para que a busca funcione. O miniaplicativo no gravar nada no disco
rgido, nem ler os arquivos que no estiverem na Ajuda do Dreamweaver.

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

Para fazer uma busca nos arquivos de duas palavras-chave (camadas e estilos, por
exemplo), separe os termos da busca com um sinal de adio (+).

Guia de introduo

15

A ajuda contextual fornece

um boto Ajuda, em qualquer caixa de dilogo, ou um

cone de ponto de interrogao, nos inspetores, janelas e painis, que abre um
tpico relevante da Ajuda.
Clique aqui, para abrir a Ajuda

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

pode clicar para mover-se entre os tpicos. Os botes seta direita e esquerda
levam-no ao prximo tpico ou ao anterior em uma seo (seguindo a ordem dos
tpicos no sumrio).

Como estender os recursos do Dreamweaver

O sistema de ajuda de Como estender os recursos do Dreamweaver contm
informaes sobre o modelo de objeto de documento do Dreamweaver e as APIs
(interfaces de programao de aplicativos) que permitem aos programadores de
JavaScript e C criar objetos, comandos, inspetores de propriedades,
comportamentos e conversores.
Centro de suporte do Dreamweaver
O site do Centro de suporte do Dreamweaver na Web atualizado regularmente
com as informaes mais recentes sobre o Dreamweaver, alm de conter
recomendaes de usurios experientes, exemplos, dicas, atualizaes e
informaes sobre os tpicos avanados,. Verifique o site da Web com freqncia
para ler as notcias mais recentes sobre o Dreamweaver e saber como obter o
melhor rendimento do programa em
http://www.macromedia.com/support/dreamweaver/.
Grupo de discusso do Dreamweaver
Discuta questes tcnicas e compartilhe sugestes teis com outros usurios do
Dreamweaver, visitando o Grupo de discusso do Dreamweaver. Voc obter
informaes sobre como acessar o grupo de discusso no site da Web da
Macromedia, em http://www.macromedia.com/software/dreamweaver/
discussiongroup/.

16

Introduo

Fluxo de trabalho de desenvolvimento da

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

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

sero consideradas enquanto planeja o seu site. Consulte Como planejar e
definir o seu site na pgina 101.

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

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

Configurao de sistemas que evitaro que os membros de uma equipe

substituam os arquivos; consulte Como configurar o sistema de devolues e
retiradas.

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

Web; consulte Como salvar as informaes sobre o arquivo em Design Notes.

Guia de introduo

17

Projetar pginas da Web

A maioria dos projetos de desenho da Web comeam com a criao de scripts e
fluxogramas que se tornam pginas de amostras. Utilize o Dreamweaver para criar
pginas de amostras de um prottipo quando o objetivo for o projeto final. Os
prottipos geralmente mostram o layout do desenho, a navegao do site, os
componentes tcnicos, os temas, a cor e as imagens grficas ou outros elementos
de mdia.

Criar documentos HTML no Dreamweaver, adicionando facilmente o ttulo

da pgina e a cor de fundo. Consulte Como configurar um documento na
pgina 157.

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

que se projete rapidamente pginas da Web atravs do desenho e da
reorganizao da estrutura da pgina. Consulte Como projetar o layout de
pgina na pgina 177.

Utilize o painel Objetos do Dreamweaver para projetar e adicionar rapidamente

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

O painel Propriedades permite organizar facilmente as propriedades em um

site; possvel arrastar a maioria das propriedades diretamente do painel
Propriedades para um documento do Dreamweaver. Consulte Como gerenciar
e inserir propriedades na pgina 237.

Digite diretamente num documento do Dreamweaver ou importe o texto de

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

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

compartilhadas do Fireworks. Utilize as ferramentas de alinhamento, para
posicionar as imagens em uma pgina. Consulte Como inserir imagens na
pgina 289 e Utilizao do Dreamweaver e do Fireworks juntos na
pgina 307.

Insira outros tipos de mdia numa pgina da Web, como filmes de Flash,
Shockwave e QuickTime, som e miniaplicativos. Consulte Como inserir
mdia na pgina 325.

18

Introduo

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

visualizao de cdigo e o inspetor de cdigo do Dreamweaver para escrever o
seu prprio cdigo HTML ou JavaScript. Consulte Como editar o HTML no
Dreamweaver na pgina 351.

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

ncora e de correio eletrnico ou definir, de maneira fcil, sistemas de
navegao grfica, como menus de salto e barras de navegao. Consulte Links
e navegao na pgina 385.

Os modelos e arquivos de biblioteca do Dreamweaver permitem aplicar

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

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

controles ActiveX ou Java. As linhas de tempo utilizam HTML dinmico para
alterar a posio de uma camada ou a origem de uma imagem ao longo do
tempo, ou para chamar certas aes de comportamento automaticamente aps
a carga da pgina. Consulte Como utilizar as camadas na pgina 439.

Utilize os comportamentos para realizar tarefas em resposta a determinados

eventos, como o realce de um boto quando o visitante passar o ponteiro sobre
ele, a validao de um formulrio quando o visitante clicar no boto Enviar, ou
a abertura de uma segunda janela do navegador quando a pgina principal tiver
terminado de ser carregada. Consulte Como utilizar os comportamentos na
pgina 469.

Depure o cdigo JavaScript personalizado. Consulte Como depurar o cdigo

JavaScript na pgina 509.

Utilize formulrios para permitir que os visitantes do seu site insiram dados
diretamente na pgina da Web. Consulte Como criar formulrios na
pgina 519.

Guia de introduo

19

Testar e publicar o seu site

O seu site est completo e pronto para ser utilizado, mas antes de public-lo em
um servidor, necessrio test-lo. Dependendo do tamanho do projeto, das
especificaes do cliente e dos tipos de navegadores que os visitantes utilizaro,
talvez seja necessrio mover o seu site para um servidor de teste, onde ele possa ser
testado e editado. Quando as correes tiverem sido feitas, o site poder ser
publicado onde o pblico possa access-lo. Quando o site for publicado,
estabelea um ritmo de manuteno para assegurar a qualidade deste, responda aos
comentrios dos usurios e atualize as informaes do site.
Utilize os seguintes recursos do Dreamweaver para testar e publicar os seus sites:

Para adicionar novos tags em uma pgina ou corrigir o seu cdigo, utilize o
painel Referncia do Dreamweaver, para pesquisar cdigo JavaScript, CSS e
HTML. Consulte Como utilizar o painel Referncia do Dreamweaver na
pgina 358.

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

cdigo. O depurador permite definir pontos de interrupo no cdigo e,
depois, visualizar o cdigo quando uma pgina for depurada no Dreamweaver.
Consulte Como depurar o cdigo JavaScript na pgina 509.

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

documentos e execute relatrios de site para verificar arquivos HTML quanto a
erros comuns. Consulte Como testar e publicar um site na pgina 541.

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

gerenciar o seu site, transferir arquivos de e para um servidor remoto, definir
um processo de devoluo/retirada, para evitar que os arquivos sejam
substitudos, e sincronizar os arquivos nos seus sites local e remoto. Consulte
Gerenciamento de sites e colaborao na pgina 113.

Onde iniciar
Este guia da contm informaes para os leitores em vrios nveis. A fim de tirar o
melhor proveito desta documentao, comece lendo as partes mais relevantes para
o seu nvel de experincia.
Para os iniciantes no HTML:

20

Introduo

Inicie assistindo aos filmes do Tour guiado. No menu principal do

Dreamweaver, escolha Ajuda > Tours guiados.

Em seguida, trabalhe utilizando o Tutorial do Dreamweaver. Escolha Ajuda >

Tutorial, ou siga as etapas descritas no manual impresso.

Acompanhe as lies correspondentes aos tpicos que lhe interessam. Escolha

Ajuda > Lies, e, em seguida, selecione a lio.

Prossiga com Princpios bsicos do Dreamweaver na pgina 73, Como

planejar e definir o seu site na pgina 101, Gerenciamento de sites e
colaborao na pgina 113 e Links e navegao na pgina 385.

Para aprender sobre a formatao de texto e incluso de imagens nas pginas,

leia Como inserir e formatar texto na pgina 251 e Como inserir imagens
na pgina 289.

Isso tudo que voc precisa para comear a produzir sites da Web de alta
qualidade, mas quando estiver pronto para aprender a utilizar as ferramentas mais
avanadas de layout e interao, siga a ordem do restante do manual. Talvez voc
queira saltar Como personalizar o Dreamweaver, pelo menos no incio.
Para os designers da Web experientes, que ainda no utilizaram o Dreamweaver:

Inicie assistindo aos filmes do Tour guiado. No menu principal do

Dreamweaver, escolha Ajuda > Tours guiados.

Trabalhe com o Tutorial do Dreamweaver, a fim de aprender os princpios

bsicos da utilizao do Dreamweaver. Escolha Ajuda > Tutorial, ou siga as
etapas descritas no manual impresso.

Acompanhe as lies correspondentes aos tpicos que lhe interessam. Escolha

Ajuda > Lies, e, em seguida, selecione a lio.

Leia Princpios bsicos do Dreamweaver na pgina 73, para obter uma viso
geral mais completa da interface do usurio do Dreamweaver.

Embora a maior parte do material em Gerenciamento de sites e colaborao

na pgina 113 e Links e navegao na pgina 385 lhe seja provavelmente
familiar, examine esses captulos, para ver como os conceitos j conhecidos so
implementados no Dreamweaver; preste ateno especialmente em Como
utilizar o Dreamweaver, para configurar um novo site. Em seguida, leia
Gerenciamento de sites e colaborao na pgina 113.

Como inserir e formatar texto na pgina 251 e Como inserir imagens na

pgina 289 contm informaes teis sobre os detalhes da utilizao do
Dreamweaver para criar pginas HTML bsicas.

Leia a viso geral, no incio de cada captulo subseqente, para determinar se os

tpicos podem lhe interessar.

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

Comece pela leitura de Novidades do Dreamweaver 4. Siga as referncias

cruzadas nesta seo para as outras que abrangem os novos recursos do
Dreamweaver.

Talvez voc queira examinar Princpios bsicos do Dreamweaver na

pgina 73, para aprender os novos aspectos da interface do usurio do
Dreamweaver.

Guia de introduo

21

Verifique as lies do Dreamweaver; escolha Ajuda > Lies, para obter uma
lista das lies interativas que voc pode acompanhar.

Se estiver interessado em personalizar e estender os recursos do Dreamweaver,

leia Como personalizar o Dreamweaver na pgina 553.

Convenes tipogrficas
As seguintes convenes tipogrficas so utilizadasneste guia da Ajuda do
Dreamweaver:

Fonte do cdigo indica os nomes de tags e atributos HTML, bem como o texto
utilizado nos exemplos.

Fonte do cdigo em itlico

indica os itens substituveis (s vezes denominados

metassmbolos) no cdigo.

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

indicao.

Novidades do Dreamweaver 4
Os novos recursos no Dreamweaver 4 aprimoram a edio do HTML, facilitam o
desenho de pginas, melhoram o gerenciamento do site e das propriedades,
permitem criar os seus prprios objetos Flash, dinamizam o fluxo de trabalho,
aprimoram a colaborao em equipe e permitem personalizar e estender os
recursos do programa.
Edio de cdigo aprimorada
A barra de ferramentas do Dreamweaver permite gerenciar como uma pgina ser

visualizada: a visualizao do projeto, visualizao do cdigo ou a visualizao

tanto do cdigo como do projeto. A barra de ferramentas proporciona fcil acesso
aos recursos utilizados normalmente, como Visualizar no navegador e Design
Notes. Consulte Como utilizar a barra de ferramentas na pgina 80.
proporciona uma nova maneira de visualizar o cdigofonte HTML diretamente na janela do documento do Dreamweaver. Consulte
Como abrir a visualizao de cdigo (ou o inspetor de cdigo) na pgina 362.
Tambm possvel editar documentos diferentes de HTML, como arquivos
JavaScript e XML, diretamente na visualizao de cdigo do Dreamweaver.
Consulte Como inserir os scripts na pgina 365.

A visualizao de cdigo

22

Introduo

Editores de cdigo integrados a

partir de agora, o Dreamweaver integra editores

de cdigo modernos: a visualizao de cdigo e o inspetor de cdigo. possvel
definir a quebra automtica de linhas, o recuo de cdigo, sinalizao ativa da
sintaxe por cores, dentre outras opes, no menu Opes em qualquer um destes
editores. Consulte Como definir as opes da visualizao de cdigo (ou do
inspetor de cdigo) na pgina 364.
uma ferramenta de referncia rpida para HTML,
JavaScript e CSS. Ele fornece informaes sobre os tags especficos com os quais
estiver trabalhando na visualizao de cdigo (ou no inspetor de cdigo). Consulte
Como utilizar o painel Referncia do Dreamweaver na pgina 358.

O painel Referncia

O menu pop-up Navegao do cdigo permite selecionar o cdigo para as funes

JavaScript de uma pgina. Utilizando este menu, possvel navegar rapidamente
pelo cdigo JavaScript enquanto estiver trabalhando na visualizao de cdigo.
Consulte Como exibir as funes de script na pgina 368.
O depurador JavaScript permite depurar um documento JavaScript enquanto
estiver no Dreamweaver. Por exemplo: possvel definir pontos de interrupo
para controlar o cdigo que deseja examinar. Consulte Como depurar o cdigo
JavaScript na pgina 509.

Projetos de pgina mais fceis

A visualizao de layout permite projetar rapidamente as pginas da Web,
desenhando caixas (tabelas ou clulas) s quais possvel adicionar contedo.
Consulte Como desenhar clulas e tabelas de layout na pgina 179.

facilitam a identificao de regies editveis num

arquivo de modelo. Os modelos agora exibem uma guia que contm o nome da
regio editvel e um retngulo delimitador. Consulte Como criar os modelos na
pgina 411.
Os modelos aprimorados

As folhas de estilos CSS podem ser definidas logo que um novo estilo for criado.
Tambm possvel anexar uma folha de estilos CSS existente com a ajuda de um
boto no painel Estilos CSS. Consulte Como utilizar as folhas de estilos CSS na
pgina 267.

Integrao aprimorada
agora foram incorporados ao Dreamweaver.
possvel escolher num conjunto de botes Flash predefinidos e inseri-los no seu
documento, ou deixar que o designer do Flash crie modelos de botes
personalizados. Consulte Como utilizar os objetos boto Flash na pgina 329 e
Como utilizar os objetos de texto Flash na pgina 332.

Os botes Flash e Texto Flash

Guia de introduo

23

O compartilhamento Roundtrip permite trabalhar sem impedimentos no

Dreamweaver e no Fireworks 4. possvel editar e atualizar as imagens e tabelas
HTML importadas do Fireworks. Tambm possvel editar tanto no
Dreamweaver quanto no Fireworks e preservar as alteraes em ambos os
aplicativos. Consulte Edio de arquivos do Fireworks colocados no
Dreamweaver na pgina 314.

permite combinar com facilidade cores com

imagens. Com apenas um clique, possvel selecionar a cor de qualquer lugar na
rea de trabalho e o seletor de cores selecionar a cor mais prxima aceita pela
Web. Consulte Como trabalhar com as cores na pgina 91.
O seletor de cores aceito pela Web

Como dinamizar o fluxo de trabalho

O painel Propriedades permite gerenciar as propriedades do site. possvel
visualizar todas as imagens, cores, URLs externas e scripts, bem como modelos
Flash, Shockwave e QuickTime e itens de biblioteca numa localizao central.
Visualize as propriedades e, em seguida, arraste-as para o lugar apropriado no
documento HTML. Salve as propriedades usadas normalmente numa lista de
propriedades favoritas e reutilize-as em outros sites. Consulte Como utilizar o
painel Propriedades na pgina 238 e Como utilizar as propriedades favoritas na
pgina 246.
Design Notes aprimoradas permitem anexar notas a um arquivo, possibilitando o
controle das alteraes nele feitas e a comunicao sobre as questes de
desenvolvimento com os outros membros da equipe. possvel inserir e visualizar
comentrios diretamente na janela do site do Dreamweaver. Consulte Sobre as
Design Notes na pgina 142 e Como utilizar os relatrios para melhorar o fluxo
de trabalho na pgina 149.
O correio eletrnico integrado permite a comunicao com os membros da
equipe. Quando um arquivo estiver sendo verificado por uma outra pessoa,
possvel clicar no nome deste membro da equipe e lhe enviar uma mensagem
eletrnica. Consulte Como configurar o sistema de devolues e retiradas na
pgina 140.
Os relatrios do site permitem utilizar vrios relatrios predefinidos para testar
problemas comuns de documentos HTML como, por exemplo, documentos sem
ttulo ou tags alt ausentes. Tambm possvel definir relatrios personalizados
para atender s suas necessidades, exibir resultados de relatrios e abrir arquivos
que apresentarem problemas na janela Resultados do relatrio. Consulte Como
configurar o sistema de devolues e retiradas na pgina 140 e Como criar
relatrios na pgina 550.
Integrao com o SourceSafe se voc contar com o SourceSafe, possvel verificar
arquivos fora e dentro do SourceSafe enquanto estiver trabalhando no
Dreamweaver. Consulte Como utilizar o Dreamweaver com o Visual SourceSafe
na pgina 136.

24

Introduo

utilize o Dreamweaver para transferir arquivos

utilizando o protocolo WebDAV. Consulte Como utilizar o Dreamweaver com o
protocolo WebDAV na pgina 135.
Integrao com o WebDAV

O Package Manager (anteriormente conhecido como Extension Manager) instala

extenses facilmente, atravs de um simples clique. Visite o intercmbio da
Macromedia e efetue um download de extenses teis, para facilitar o seu
trabalho. Consulte Como adicionar extenses ao Dreamweaver na pgina 98.

Interface comum do usurio

possuem uma nova interface, que comum a todos os
produtos de publicao de Web da Macromedia. Essa nova interface permite
editar os atalhos de teclado existentes, criar novos atalhos para itens de menu e
excluir os atalhos de teclado que se tornarem desnecessrios. possvel tambm
alternar entre conjuntos de configuraes de atalho de teclado. Consulte Como
utilizar o editor de atalhos de teclado na pgina 95.

Os atalhos do teclado

foi aprimorado: todas as janelas encaixam-se sem

interferncias. Ao abrir uma nova janela, o Dreamweaver evita que esta se
sobreponha aos painis visveis.
O gerenciamento de janelas

Os painis tm agora uma nova aparncia da Macromedia e o seu comportamento

consistente em todos os produtos de publicao da Web. Todos os painis

possuem cones e texto, para facilitar a sua identificao. Todos os painis utilizam
cores do sistema e fontes existentes nos sistemas Windows e Macintosh. Alm
disso, os painis possuem comportamentos uniformes de encaixe e arraste.

Recursos de tecnologias da Web e HTML

Os seguintes so alguns recursos teis disponveis na Web:
A especificao HTML 4.0 (http://www.w3.org/TR/REC-html40/)

a norma

oficial para HTML do World Wide Web Consortium.

(http://www.blooberry.com/indexdot/html/) uma lista
completa de tags, atributos e valores HTML, bem como sua compatibilidade com
os diversos navegadores.
ndice DOT Html

A biblioteca de tags do programador ZDNet (http://www.zdnet.com/devhead/

resources/tag_library/) uma outra lista de informaes sobre todos os tags
HTML.
A especificao para o nvel 1 das Cascading Style Sheets (CSS1) (http://

www.w3.org/TR/REC-CSS1) a especificao oficial para as folhas de estilo do

World Wide Web Consortium.

Guia de introduo

25

Guia de referncia das folhas de estilos da Web Review (http://webreview.com/

guides/style/style.html) explica o que so os estilos CSS e em quais navegadores
funcionam.
CGI Scripts for Fun and Profit (http://www.hotwired.lycos.com/webmonkey/

99/26/index4a.html) um artigo do site Hotwired Webmonkey sobre a incluso

de scripts CGI (Common Gateway Interface) j prontos nas pginas.
O ndice de recursos CGI (http://www.cgi-resources.com/)

um repositrio de
todas as questes relativas a CGI, incluindo scripts prontos, documentao, livros
e at mesmo programadores que oferecem seus servios.
O site Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/)

inclui uma

introduo CGI.
A tabela de entidades (http://www.bbsinc.com/iso8859.html)

apresenta uma lista

dos nomes de entidades utilizadas pelo padro ISO 8859-1 (Latin-1).
A pgina de eventos de HTML dinmico (http://msdn.microsoft.com/workshop/

author/dhtml/reference/events.asp#om40_event) contm informaes sobre os

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

contm informaes

sobre as JavaServer Pages (JSP).

As pginas PHP (http://www.php.net/)

contm informaes sobre o PHP: pr-

processador de hipertexto.
A pgina de produtos ColdFusion da Allaire (http://www.allaire.com/Products/

ColdFusion/) contm informaes sobre ColdFusion.

O site XML.com (http://www.xml.com)

fornece informaes, tutoriais e dicas

sobre Extensible Markup Language (XML), assim como outras tecnologias da
Web.
A JavaScript Bible (Bblia de JavaScript),

de autoria de Danny Goodman (IDG

Books), cobre a linguagem JavaScript 1.2 de maneira exaustiva.
JavaScript: The Definitive Guide (JavaScript: o guia definitivo),

de autoria de
David Flanagan (OReilly & Associates), fornece informaes de referncia para
cada funo, objeto, mtodo, propriedade e manipulador de evento JavaScript.

26

Introduo

Acessibilidade e o Dreamweaver
A Macromedia oferece suporte criao de timas experincias da Web que
possam ser acessveis a todas as pessoas, inclusive as que portarem limitaes
fsicas. Ns estimulamos a implementao de padres internacionais para orientar
os programadores de sites acessveis, incluindo as diretrizes oferecidas pelo World
Wide Web Consortium (W3C). Muitas normas governamentais concernentes
acessibilidade da Web, inclusive as do governo dos EUA, fazem referncia s
diretrizes do W3C. Estas diretrizes sobre o contedo da Web estimulam os
programadores a adotar prticas de criao e codificao voltadas acessibilidade,
muitas das quais contam com o suporte irrestrito dos produtos da Macromedia.
Para obter mais informaes sobre as diretrizes do W3C, consulte as Diretrizes
sobre a criao de contedo para a Web, no seguinte endereo: http://
www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html.
Para obter as mais recentes informaes sobre os recursos de produtos que
oferecem suporte ao design acessvel, consulte a pgina da Macromedia
relacionada acessibilidade (http://www.macromedia.com/accessibility/).

Guia de introduo

27

28

Introduo

CAPTULO 1

Tutorial do Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

O tutorial do Dreamweaver o acompanha atravs das etapas envolvidas na criao

de pginas da Web. Voc aprender como utilizar o Macromedia Dreamweaver
para definir um site local e utilizar os painis e ferramentas do Dreamweaver para
criar e editar documentos da Web.
Nesse tutorial, voc criar pginas da Web para a Compass, uma empresa fictcia
especializada em viagens orientadas para aventuras. Se ainda no conhecer o
Dreamweaver, inicie pelo princpio do tutorial e avance at o final. Se j estiver
familiarizado com o Dreamweaver, seria recomendvel iniciar pela seo Utilizar
o painel Propriedades na pgina 58 e as subseqentes, que se encarregam dos
novos recursos do Dreamweaver ou daqueles que foram modificados, como o
painel Propriedades, botes e texto Flash, como utilizar um modelo, como
executar um relatrio de site e como adicionar uma Design Note.
O tutorial toma aproximadamente uma a duas horas para ser concludo, dependendo
da sua experincia, e se concentra nas seguintes tarefas do Dreamweaver:

Como definir um site local

Como criar uma pgina na visualizao de layout
Como inserir uma imagem e uma imagem cambivel
Como trabalhar com tabelas na visualizao padro
Como criar um link para outro documento
Como inserir propriedades do painel Propriedades
Como inserir objetos de texto e botes Flash
Como criar e aplicar um modelo
Como executar um relatrio de site
Como adicionar uma Design Note

Nota: Este tutorial demonstra alguns recursos aos quais oferecido suporte apenas nos
navegadores 4.0 ou posteriores.

29

Faa um tour guiado no Dreamweaver

Antes de comear a trabalhar com o Dreamweaver, assista aos filmes do Tour
guiado, para se familiarizar com o processo de desenvolvimento para a Web e com
os recursos do Dreamweaver.
1

No Dreamweaver, escolha Ajuda > Tour guiado.

Clique no ttulo de um filme.

Quando tiver terminado, feche o filme.

A rea de trabalho do Dreamweaver

Comecemos com uma breve viso geral da rea de trabalho do Dreamweaver.

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

programa, para inici-lo.
A rea de trabalho do Dreamweaver adapta-se a diversos estilos de trabalho e
nveis de experincia. Quando o Dreamweaver for iniciado, sero abertos os
seguintes itens da rea de trabalho:

Barra de ferramentas

janela do documento

painel Objetos

painel flutuante

seletor de tags

barra do Iniciador
inspetor de
propriedades

A janela do documento exibir o documento medida que for criado e editado.

O painel Objetos contm cones que podem ser clicados para inserir objetos no
documento e para alterar a maneira como se trabalha nos documentos.

O Dreamweaver fornece muitos painis flutuantes, como o painel Estilos

HTML e o inspetor de cdigo, que permitem trabalhar com outros elementos
do Dreamweaver.

30

Captulo 1

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

utilizados com maior freqncia.

O inspetor de propriedades exibe as propriedades do objeto ou texto

selecionado e permite modific-las. O tipo de objeto selecionado no
documento determinar as propriedades que aparecero no inspetor de
propriedades.
Para abir as janelas, inspetores e painis do Dreamweaver, utilize o menu Janela.
Uma marca de seleo prxima a um item no menu Janela indica que o item em
questo est aberto (apesar de poder estar oculto atrs de outras janelas). Para
exibir um item que no se encontra aberto, escolha o nome a ele correspondente,
no menu, ou utilize o respectivo atalho de teclado.
Como trabalhar no Dreamweaver
O Dreamweaver capaz de exibir um documento de trs maneiras: na visualizao
do projeto, na visualizao de cdigo e em uma visualizao dividida, que mostra
ambas as visualizaes. Para alterar a visualizao na qual est trabalhando,
selecione uma opo, na barra de ferramentas do Dreamweaver. Como padro, o
Dreamweaver exibe a janela do documento na visualizao do projeto.
Alm disso, possvel trabalhar com a visualizao do projeto do Dreamweaver de
duas maneiras diferentes: na visualizao de layout e na visualizao padro. Essas
visualizaes podem ser selecionadas na categoria Exibir, no painel Objetos. Na
visualizao de layout, possvel projetar o layout de uma pgina e inserir
imagens, texto e outros elementos de mdia; na visualizao padro, alm da
possibilidade de inserir imagens, texto e mdia, tambm possvel inserir camadas,
criar documentos com molduras, criar tabelas e aplicar outras alteraes pgina,
opes que no esto disponveis na visualizao de layout.
Como esto organizados os arquivos do tutorial
Tanto os arquivos HTML concludos quanto os parcialmente concludos que
foram utilizados neste tutorial esto localizados na pasta Compass_Site, na pasta
Tutorial. As imagens e outros arquivos associados ao site tambm se encontram na
pasta Compass_Site.
Cada arquivo do tutorial possui um nome caracterstico (por exemplo: o arquivo
HTML que contm as informaes sobre os destinos de viagem denominado
Destinations.html. Os arquivos parcialmente concludos com os quais voc
trabalhar possuem nomes semelhantes aos respectivos arquivos concludos,
exceto pelo fato de estes serem iniciados por DW4_; a verso parcialmente
concluda de Destinations.html, por exemplo, denominada
DW4_Destinations.html.

Tutorial do Dreamweaver

31

Visualizar o site da Web concludo

Em seguida, visualize as pginas do site da Web concludo, para ter uma idia do
objetivo do seu trabalho.
1

Se ainda no as tiver visualizado, inicie o Dreamweaver.

No Dreamweaver, escolha Arquivo > Abrir. Na caixa de dilogo de pesquisa de

arquivos, navegue at a pasta do Dreamweaver 4 (onde tiver instalado o
programa) e, em seguida, navegue at Tutorial/Compass_Site.

Na pasta Compass_Site, selecione o arquivo CompassHome.html e, em

seguida, clique em Abrir, para abrir a home page Compass na janela do
documento.
No edite esta pgina; voc criar a sua prpria verso dela.

Escolha Arquivo > Visualizar no navegador e, em seguida, selecione um

navegador com o qual deseja exibir a home page Compass. Utilize a verso 4.0
ou mais avanada de um navegador para poder visualizar este site.

Mova o ponteiro do mouse sobre os botes de navegao, para ver os efeitos de

imagens cambiveis.
Clique nos botes de navegao, para explorar o site.

32

Captulo 1

Feche o navegador ao terminar de visualizar o site.

Para abrir um novo documento em branco no Dreamweaver, escolha Arquivo >

Abrir.

Feche o arquivo CompassHome.html, que est aberto no Dreamweaver.

Configurar a estrutura do site do tutorial

H duas maneiras de se trabalhar com os arquivos do tutorial: utilizando um site
local predefinido ou definindo um site local.

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

tutorial, para que saiba como configurar um site local quando estiver pronto
para trabalhar com os seus prprios sites.

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

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

Definir um site local

Ao definir um site local, voc estar informando ao Dreamweaver onde planeja
armazenar todos os arquivos de um determinado site. Para poder trabalhar com
eficincia no Dreamweaver, sempre defina um site local correspondente a cada site
da Web que criar.
Neste tutorial, voc especificar a pasta Compass_Site como a pasta do site local.
1

Se ela ainda no estiver aberta, inicie o Dreamweaver.

Ser aberto um documento em branco.

Escolha Site > Novo site.

Na caixa de dilogo Definio do site, verifique se Informaes locais est

selecionada na lista Categoria.

No campo Nome do site, digite my_tutorial.

O nome do site permite identificar e selecionar com facilidade um site em uma
lista de sites previamente definidos.

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

Tutorial do Dreamweaver

33

Na caixa de dilogo que aparecer, navegue at a pasta Tutorial-DW4/

Compass_Site e siga um dos procedimentos abaixo:

No Windows, clique em Abrir e, em seguida, clique em Selecionar, quando

Compass_Site aparecer no campo Selecionar.

No Macintosh, clique em Escolher, para selecionar a pasta Compass_Site.

O campo Pasta raiz local ser atualizado, exibindo o caminho at o site local.

Nota: possvel que o caminho completo at a pasta Compass_Site varie,

dependendo de onde o Dreamweaver estiver instalado.

Em Cache, siga um dos procedimentos abaixo:

Selecione Ativar o cache (no Windows), para criar um arquivo de cache para o
site.

Selecione Utilizar o cache para acelerar as atualizaes de links (no Macintosh),

para criar um arquivo de cache para o site.
Se o contedo da pasta Compass_Site for colocado em um cache, ser criado
um registro dos arquivos existentes para que o Dreamweaver possa atualizar
rapidamente os links quando um arquivo for movido, renomeado ou excludo.
8

34

Captulo 1

Clique em OK, para fechar a caixa de dilogo.

Clique em OK na mensagem relacionada ao cache.

A janela do site passar a exibir uma lista de todas as pastas e arquivos do site
local. A lista tambm atua como um gerenciador de arquivos, permitindo a
cpia, colagem, excluso, transferncia e abertura de arquivos, da mesma
maneira que voc faria na rea de trabalho do computador.

Tutorial do Dreamweaver

35

Criar a home page do site

Agora que a estrutura do site j foi configurada para armazenar as pginas e
propriedades do site Compass, voc criar a primeira pgina, uma home page do
site. medida que cria esta pgina, voc adicionar imagens, texto e propriedades
Flash; o documento ir conter os mesmos componentes de design que a home
page Compass concluda.
Salvar o documento
Comece por salvar o documento no qual estiver trabalhando.
1

Deixe a janela do site aberta e clique na janela do documento, para torn-la

ativa.
A janela do site continuar aberta no segundo plano.

Escolha Arquivo > Salvar.

Na caixa de dilogo Salvar como, selecione a pasta Compass_Site como local

para este documento.

No campo Nome do arquivo, digite my_CompassHome.html.

Clique em Salvar.
Observe que o nome do documento passar a aparecer na parte superior da
janela do documento.

36

Captulo 1

Defina o ttulo da pgina do documento

Embora o documento tenha um nome de arquivo, obserque que ele ainda est
identificado por Documento sem ttulo; isso se deve ao fato dele necessitar de um
nome de documento HTML ou ttulo de pgina. A definio do ttulo de uma
pgina auxilia os visitantes do site a identificar a pgina que estiverem
consultando: o ttulo da pgina aparecer na barra de ttulo do navegador e na lista
de marcadores. Se voc criar um documento sem ttulo de pgina, ele ser
apresentado no navegador como Documento sem ttulo.
Nesta parte do tutorial, voc dar um ttulo pgina.
1

Com a janela do documento ativa, escolha Exibir > Barra de ferramentas, se

esta barra ainda no estiver visvel.
A barra de ferramentas do Dreamweaver aparecer acima da janela do
documento

No campo Ttulo, digite Compass Home Page; em seguida, clique na janela do

documento, para examinar a atualizao do ttulo da pgina na barra de ttulo
desta janela.

Salve o arquivo.

Tutorial do Dreamweaver

37

Desenhar uma pgina na visualizao de

layout
Voc iniciar a sua primeira pgina enquanto trabalha na visualizao do projeto
do Dreamweaver. Voc organizar a pgina e, em seguida, inserir as imagens e o
texto.
A pgina que voc concluir nesta seo do tutorial ter uma aparncia semelhante
a esta pgina.

Trabalhar na visualizao de layout

O Dreamweaver possui duas visualizaes do projeto: a visualizao padro e a
visualizao de layout. Comece trabalhando na visualizao de layout, que permite
desenhar clulas ou tabelas de layout, nas quais possvel adicionar contedo
(como imagens, texto ou outros tipos de mdia).
Nesta parte do tutorial, voc organizar a pgina; na seo seguinte, voc
adicionar contedo. Quando estiver vontade com estas duas tarefas, voc
poder adicionar layout e contedo simultaneamente.
1

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

estiver selecionado.
cone de Desenhar a clula de layout
cone de Desenhar a tabela de layout
cone de Visualizao de layout

Aparecer a caixa de dilogo Guia de introduo para a visualizao do layout,

que descreve as opes desta visualizao.
2

38

Captulo 1

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

No painel Objetos, observe que as opes de layout abaixo de Layout

(Desenhar a clula de layout e Desenhar a tabela de layout) passaram a estar
disponveis; estas opes no estavam disponveis na visualizao padro.

Desenhar as clulas de layout

Na visualizao de layout, possvel desenhar clulas e tabelas de layout, para definir
as reas de desenho de um documento. Esta tarefa ser mais fcil se voc preparar
uma amostra da pgina que estiver criando antes de comear a organiz-la.
Examine a amostra de layout abaixo, para ter uma idia do layout de pgina que
voc estar criando nessa seo do tutorial. Existe uma clula para o logotipo
Compass, uma tabela com trs clulas para os botes de navegao no site, uma
clula para outra imagem grfica e uma tabela para as trs clulas onde ser
colocado o texto.

medida que trabalhar no documento, voc desenhar tabelas e clulas

semelhantes s deste layout. Primeiramente, desenhe uma clula de layout, na qual
voc inserir o logotipo Compass.
1

Clique na janela do documento my_CompassHome, para torn-lo ativo.

Se ainda no estiverem abertas, abra as seguintes ferramentas da rea de

trabalho:

O painel Objetos (escolha Janela > Objetos), que ser utilizado para adicionar
objetos ao documento.

O inspetor de propriedades (escolha Janela > Propriedades), que ser utilizado

para definir as propriedades ou atributos dos objetos contidos no documento.
Se o inspetor de propriedades ainda no estiver expandido, clique na seta de
expanso, localizada no canto inferior direito, para examinar todas as opes
das propriedades.

Tutorial do Dreamweaver

39

No painel Objetos, clique no cone de Desenhar a clula de layout.

Mova o ponteiro para a janela do documento; o ponteiro se transformar em

uma ferramenta de desenho (semelhante a uma pequena cruz). Clique no canto
superior esquerdo do documento e, em seguida, arraste, para desenhar
uma clula de layout.
Ao soltar o mouse, voc ver uma clula de layout aparecer em uma tabela de
layout.
Clula de
layout
Tabela de
layout

A tabela de layout se expandir, preenchendo a janela do documento e

definindo a rea de layout da pgina. O retngulo branco a clula de layout
que voc desenhou. possvel colocar outras clulas de layout na rea cinzenta
da tabela de layout.
Redimensionar as clulas de layout
Para desenhar uma pgina com preciso, possvel definir o tamanho das clulas
adicionadas ao documento. Tambm possvel reposicionar as clulas na pgina.
1

Clique na borda da clula de layout, para selecion-la.

Aparecero alas ao redor da clula de layout selecionada:

Para redimensionar esta clula de layout, siga um dos procedimentos abaixo:

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

para definir a largura da clula como sendo 510 pixels e, em seguida, clique no
documento, para verificar a alterao na largura.

40

Captulo 1

Nota: Se digitar uma largura (em pixels) maior do que a da tabela de layout ou se isso
acarretar a sobreposio da clula a outra clula de uma tabela de layout, o
Dreamweaver o alertar e ajustar a largura da clula a um valor vlido.

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

intermediria para a direita, at atingir a largura desejada da clula. Quando
voc soltar o mouse, a largura da clula ser exibida na rea do cabealho da
coluna, no alto da tabela de layout.

Adicionar clulas de layout mltiplas

A seguir, voc adicionar trs clulas de layout abaixo da clula de logotipo que
acabou de criar. Posteriormente, voc inserir os botes de navegao da pgina
nestas clulas.
1

No painel Objetos, clique no cone de Desenhar a clula de layout; a seguir,

mantenha pressionada a tecla Control (no Windows) ou Command (no
Macintosh).

Na janela do documento, posicione o ponteiro do mouse abaixo da clula que

tiver desenhado para o logotipo; em seguida, arraste, para desenhar uma clula
de layout.
Continue a manter pressionada a tecla Control (no Windows) ou Command
(no Macintosh) e desenhe duas outras clulas de layout. A sua tela dever ter
uma aparncia semelhante a esta.

Tutorial do Dreamweaver

41

Mover uma clula de layout

Se precisar alinhar as clulas, voc poder redimension-las e mov-las conforme a
necessidade. A alterao no tamanho das clulas de layout feita utilizando uma
de suas alas de redimensionamento.
No possvel clicar e arrastar uma clula para mov-la para outra posio. Se
precisar mover uma clula de layout para reposicion-la no documento, siga as
etapas abaixo.
1

Clique na borda de uma clula de layout, para selecion-la.

Para mover a clula de layout, siga um dos procedimentos abaixo:

Utilize as teclas de seta.

Mantenha pressionada a tecla Shift e utilize as teclas de seta, para mover uma
clula de layout cinco pixels de cada vez.
Agrupar clulas em uma tabela de layout
Agora, voc criar uma tabela com as clulas dos botes de navegao que acabou
de criar. O agrupamento das clulas em uma tabela permite controlar o
espaamento entre as clulas e mover com facilidade as clulas como um grupo, se
desejar alterar o layout da pgina. Voc criar uma tabela para os botes de
navegao com a mesma largura que a clula do logotipo, situada acima.
Utilize a opo Desenhar a tabela de layout, para agrupar as imagens dos botes de
navegao.

42

Captulo 1

No painel Objetos, clique no cone de Desenhar a tabela de layout.

Na janela do documento, posicione o ponteiro no canto superior esquerdo da

primeira clula de boto de navegao e, em seguida, arraste o ponteiro, para
que a tabela abrigue as trs clulas e tenha o mesmo comprimento da clula do
logotipo.

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

Voc criou uma tabela que contm trs clulas de layout (a rea branca da
tabela) e um espao vazio (a rea cinzenta da tabela).
Mover a tabela de layout
possvel selecionar e mover uma tabela de layout para outras reas de um
documento. Contudo, no possvel mover uma tabela de layout de maneira que
ela se sobreponha a outra tabela.
A seguir, voc mover a tabela que criou alguns pixels para a direita, para deslocar
o alinhamento dos botes de navegao em relao ao logotipo, quando aqueles
forem inseridos na pgina.
1

Na janela do documento, clique na guia correspondente tabela de layout, para

mov-la.

Arraste a tabela de layout alguns pixels para a direita, para reposicion-la e, em

seguida, arraste uma das alas de redimensionamento direita da tabela, para
alinhar o lado direito do logotipo com as clulas de layout dos botes de
navegao.

Observe que, medida que voc for criando novas tabelas e clulas, aparecero
linhas de grade contornando a rea do layout. possvel utilizar estas linhas de
grade para alinhar os elementos do layout.

Tutorial do Dreamweaver

43

Adicionar outra clula de layout

A seguir, adicione uma clula de layout imagem correspondente a "Learn More
About" (Mais informaes).
1

No painel Objetos, clique no cone de Desenhar a clula de layout.

Na janela do documento, desenhe uma nova clula no espao situado abaixo da

tabela de botes de navegao.

A sua pgina dever ter uma aparncia semelhante a esta:

Criar uma tabela de layout

Na seo anterior, voc utilizou clulas para criar uma tabela. Agora, voc partir
de uma tabela, qual adicionar clulas.

44

Captulo 1

No painel Objetos, clique no cone de Desenhar a tabela de layout.

Mova o ponteiro para a janela do documento. Na rea abaixo da clula de

layout que tiver adicionado, arraste o ponteiro para a direita, para alinh-la com
o lado direito da clula mais acima e, em seguida, arraste at a parte inferior da
janela do documento.

Desenhar clulas de layout em uma tabela

Adicione as clulas de layout, s quais voc adicionar texto sobre os locais de
viagem.
1

No painel Objetos, clique no cone de Desenhar a clula de layout e mova o

ponteiro para a tabela de layout que acabou de desenhar.

Desenhe uma clula de tabela com aproximadamente um tero do espao da

tabela.

Clique na borda da clula de layout, para selecion-la e, em seguida, no campo

Fixo do inspetor de propriedades, digite 170, para definir a largura da clula.

Desenhe outra clula de tabela com aproximadamente um tero do espao da

tabela ao lado da primeira clula.

Clique na borda da clula de layout, para selecion-la e, em seguida, no campo

Fixa do inspetor de propriedades, digite 170, para definir a largura da clula.

Desenhe a ltima clula no espao restante da tabela. Redimensione ou mova as

clulas, para ajustar o seu tamanho e posio, conforme necessrio.
A sua tela dever ter uma aparncia semelhante a esta:

Tutorial do Dreamweaver

45

Adicionar contedo pgina

Agora que as reas da pgina j esto organizadas, voc adicionar o contedo
grfico (o logotipo e as imagens cambiveis, por exemplo).
Inserir imagens
Voc aprender duas maneiras de inserir imagens no Dreamweaver: utilizando o
menu principal do programa e utilizando o painel Objetos.
1

Clique em qualquer ponto da clula de layout que contm o logotipo (a clula

mais ao alto).
O ato de clicar em uma clula de layout posiciona o ponto de insero na clula
sem selecion-la.

Escolha Inserir > Imagem.

Na caixa de dilogo Selecionar a origem da imagem, localize a pasta

Compass_Site e navegue at a pasta Assets e, em seguida, at a pasta de
imagens; clique em compass_logo.gif, para selecion-lo.

Certifique-se de que o menu pop-up Relativa a, localizado na parte inferior da

caixa de dilogo, esteja definido como Documento e, em seguida, clique em
Selecionar (no Windows), ou Abrir (no Macintosh), para selecionar a imagem.
A imagem aparecer na clula de layout.

Clique em qualquer ponto da clula de layout "Learn More About", para

colocar o ponto de insero na clula.

Na categoria Comuns do painel Objetos, clique no cone de Inserir imagem.

Na caixa de dilogo Selecionar a origem da imagem, localize a pasta

Compass_Site/Assets/images e navegue at learnMoreAbout.gif; em seguida,
clique em Selecionar (no Windows), ou Abrir (no Macintosh), para selecionar a
imagem.
A imagem aparecer na clula de layout.

46

Captulo 1

Escolha Arquivo > Salvar, para salvar todas as alteraes feitas na home page.

Criar uma imagem cambivel

Uma imagem cambivel aquela cuja exibio alterada quando o ponteiro for
movido sobre ela.
Voc utilizar o comando Inserir imagem cambivel do Dreamweaver para criar
trs imagens cambiveis para os botes de navegao: "Trip Planner" (Planejador
de viagem), "Destinations" (Destinos) e "Travel Logs" (Registros de viagem).
A imagem cambivel consiste de duas imagens: a imagem exibida quando a pgina
for carregada pela primeira vez no navegador e a imagem exibida quando o
ponteiro for passado sobre a imagem original. Certifique-se de utilizar imagens
com o mesmo tamanho. A primeira imagem regula o tamanho da tela, de forma
que se a segunda imagem for muito menor ou maior, o resultado parecer
distorcido ou com um carter amador.
A seguir, voc adicionar um boto de navegao com uma imagem cambivel
pgina. E, em seguida, voc adicionar os outros botes de navegao e visualizar
a pgina em um navegador, para testar as imagens cambiveis.
1

Na janela do documento, clique na primeira clula da tabela de botes de

navegao.
Este procedimento informar ao Dreamweaver onde deseja inserir a imagem.

Para inserir uma imagem cambivel, siga um dos procedimentos abaixo:

Na categoria Comuns do painel Objetos, clique no cone de Inserir imagem

cambivel.

Escolha Inserir > Imagens interativas > Imagem cambivel.

3

Na caixa de dilogo Inserir imagem cambivel, digite "planner" (planejador),

no campo Nome da imagem.
Com isso, a imagem assumir um nome exclusivo e se tornar facilmente
identificvel no cdigo HTML.

No campo Imagem original, clique em Procurar; em seguida, navegue at o

arquivo MenuTripPlanner.gif e clique em Selecionar (no Windows), ou Abrir
(no Macintosh).
Este procedimento informar ao Dreamweaver a imagem que dever ser exibida
quando a pgina for carregada pela primeira vez.

No campo Imagem cambivel, clique em Procurar; em seguida, navegue at o

arquivo MenuTripPlanner_on.gif e clique em Selecionar (no Windows), ou
Abrir (no Macintosh).
Este procedimento informar ao Dreamweaver a imagem que dever ser exibida
quando o ponteiro for passado sobre a imagem original.

Tutorial do Dreamweaver

47

Certifique-se de que a opo Pr-carregar a imagem cambivel esteja

selecionada, de maneira que as imagens cambiveis sejam carregadas quando a
pgina for carregada no navegador, garantindo uma transio rpida entre as
imagens quando o usurio mover o ponteiro do mouse sobre a imagem
original.

Clique em OK, para fechar a caixa de dilogo.

A imagem aparecer no documento.

Redimensione a clula de layout, para que possa acomodar a imagem.

Criar as outras imagens cambiveis

Agora, voc adicionar as imagens cambiveis correspondentes aos outros botes
de navegao.

48

Captulo 1

Na janela do documento, clique na segunda clula de boto de navegao; em

seguida, na categoria Comuns do painel Objetos, clique no cone de Inserir a
imagem cambivel.

Na caixa de dilogo Inserir a imagem cambivel, digite destinos, no campo

Nome da imagem, para dar um nome exclusivo imagem.

No campo Imagem original, clique em Procurar; em seguida, navegue e

selecione MenuDestinations.gif.

No campo Imagem cambivel, clique em Procurar; em seguida, navegue e

selecione MenuDestinations_on.gif.

Certifique-se de que a opo Pr-carregar a imagem cambivel esteja

selecionada e, em seguida, clique em OK, para fechar a caixa de dilogo.

Na janela do documento, clique na clula correspondente ao terceiro boto de

navegao; em seguida, na categoria Comuns do painel Objetos, clique no
cone de Inserir imagem cambivel.

Na caixa de dilogo Inserir a imagem cambivel, digite registro de viagem, no

campo Nome da imagem, para dar um nome exclusivo imagem.

No campo Imagem original, clique em Procurar e, em seguida, navegue e

selecione MenuTravelLogs.gif.

No campo Imagem cambivel, clique em Procurar e, em seguida, navegue e

selecione MenuTravelLogs_on.gif.

10

Certifique-se de que a opo Pr-carregar a imagem cambivel esteja

selecionada e, em seguida, clique em OK, para fechar a caixa de dilogo.

11

Redimensione as duas clulas de layout, para que possam acomodar a imagem.

Visualizar o documento
No possvel examinar o comportamento das imagens cambiveis na janela do
documento do Dreamweaver; estas imagens funcionam apenas nos navegadores.
Contudo, possvel visualizar o documento no Dreamweaver, para examinar as
suas funes associadas ao navegador. No necessrio salvar o documento para
poder visualiz-lo.
1

Pressione a tecla F12, para visualizar o documento em um navegador da Web.

Mova o ponteiro do mouse sobre as imagens cambiveis que tiver criado, para
v-las mudar.
2

Ao terminar de visualizar o arquivo, feche a janela do navegador.

Retorne janela do documento do Dreamweaver e escolha Arquivo > Salvar,

para salvar as alteraes feitas na home page.

Inserir texto
Agora, voc vai adicionar texto s clulas da parte inferior da tabela de layout.
No Dreamweaver, possvel digitar contedo diretamente em uma clula de
layout ou recort-lo de um outro documento e col-lo na clula de layout. Nesse
tutorial, voc adicionar texto clula de layout, copiando e colando o contedo
de um arquivo de texto j existente.
1

Escolha Arquivo > Abrir; em seguida, na pasta Compass_Site, abra o arquivo

DW4_HomeText.txt.
O documento DW4_HomeText.txt ser aberto em outra janela do
Dreamweaver.

No arquivo DW4_HomeText.txt, selecione as duas primeiras linhas de texto,

de Fly Fishing (Pesca com iscas artificiais) at ravioli.

Tutorial do Dreamweaver

49

Escolha Editar > Copiar, para copiar o texto.

No documento my_CompassHome, clique na primeira clula de layout da

tabela de layout de descrio do texto.

Escolha Editar > Colar, para colar o texto na clula de layout.

No arquivo DW4_HomeText.txt, selecione as duas linhas de texto seguintes:

Level 5 Rapids (Corredeiras de nvel 5) e Siberia (Sibria).

Escolha Editar > Copiar, para copiar o texto.

No documento my_CompassHome, clique na segunda clula da tabela de

layout de descrio do texto.

Escolha Editar > Colar, para colar o texto na clula de layout.

10

No arquivo DW4_HomeText.txt, selecione as duas ltimas linhas de texto:

Puget Sound Kayaking (Caiaque no Estreito Puget) e Puget Sound
(Estreito Puget).

11

Copie o texto e, em seguida, cole-o na terceira clula da tabela de layout.

12

Feche o arquivo DW4_HomeText.txt e, em seguida, clique no documento

my_CompassHome.html, para torn-lo ativo.

Formatar o texto
possvel formatar o texto da janela do documento definindo as propriedades no
inspetor de propriedades. Inicialmente, selecione o texto a ser formatado e aplique
as alteraes. Voc alterar o tipo de fonte e o tamanho do texto.
1

Se o inspetor de propriedades ainda estiver fechado, escolha Janela >

Propriedades.

Na primeira clula de layout de descrio do texto, selecione todo o texto,

desde a palavra Fly at a ltima palavra (ravioli).

No segundo menu pop-up Formato do inspetor de propriedades, que apresenta

a opo Fonte padro, selecione Verdana, Arial, Helvetica, sans-serif.

No menu pop-up Tamanho, selecione 2.

O texto do documento ser automaticamente atualizado, refletindo as
alteraes.

50

Captulo 1

Repita as etapas descritas acima, para selecionar e formatar o texto das outras
duas clulas de layout de descrio do texto.

Aplicar cor e estilo

Agora, voc aplicar outras alteraes de formatao ao texto; voc aplicar cor e
estilo para criar o texto do cabealho.
1

Na primeira clula de layout de descrio do texto, selecione o texto do

cabealho, desde a palavra Fly at a palavra Mountains (Montanhas).

No inspetor de propriedades, clique no seletor de cores; em seguida, mova o

conta-gotas at a imagem Mais informaes, na janela do documento, e
selecione a cor marrom no texto desta imagem.

Ainda no inspetor de propriedades, clique no cone B, para aplicar o estilo

negrito ao texto.

Repita as etapas acima para aplicar cor e estilo ao texto do cabealho nas outras
clulas de layout de descrio do texto.

Pressione a tecla F12, para visualizar a pgina em um navegador.

A sua pgina dever se assemelhar pgina abaixo.

Observe o texto. A separao entre o texto de uma clula de layout e a seguinte

pequena. Voc corrigir este problema nas prximas etapas do tutorial.
6

Feche a janela do navegador e, em seguida, clique na janela do documento, para

torn-la ativa.

Tutorial do Dreamweaver

51

Trabalhar na visualizao padro

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

No painel Objetos, clique no cone da Visualizao padro.

A sua pgina dever se assemelhar tela abaixo.

Definir as propriedades das clulas

Altura da clula determina a altura de uma linha de clulas. Observe o espao ao
redor do logotipo Compass. Remova o excesso de espao entre o logotipo e os
botes de navegao.
1

Clique em qualquer ponto da rea vazia da clula que contm a imagem do

logotipo Compass (no na imagem em si).

No inspetor de propriedades da clula, exclua o valor contido no campo U

(altura).

Ainda no inspetor de propriedades, clique no cone da caixa Cor de fundo,

localizado na parte inferior; em seguida, utilize o conta-gotas para selecionar a
cor preta.
A cor de fundo ser aplicada clula.

52

Captulo 1

Clique em qualquer ponto da janela do documento, para examinar a alterao.

Como selecionar uma tabela

A seguir, voc ajustar o espao na tabela dos botes de navegao. A maneira mais
fcil de selecionar uma tabela na visualizao padro atravs da utilizao do
seletor de tags, que exibe os tags HTML dos elementos do documento.
Voc utilizar o seletor de tags para selecionar a tabela que contm os botes de
navegao.
1

Clique na clula que contm a imagem Planejador de viagem.

Observe o seletor de tags, no canto inferior esquerdo da janela do documento.

Nota: Os tags apresentados no seletor de tags podem variar, dependendo do nmero

de tabelas que tiverem sido criadas na visualizao de layout.

No seletor de tags, clique no tag <table> mais direita.

Na janela do documento, aparecer uma borda ao redor da tabela de botes de
navegao, enquanto que o inspetor de propriedades passar a refletir as
propriedades da tabela.

Tutorial do Dreamweaver

53

Definir as propriedades de uma tabela

Agora, voc utilizar o inspetor de propriedades da tabela para limpar o excesso de
espao na tabela de botes de navegao e para adicionar uma cor de fundo
tabela.
1

No inspetor de propriedades, clique no cone de Limpar as alturas das linhas (o

boto na parte inferior do inspetor de propriedades).
O espao excessivo ser removido da tabela.

Ainda no inspetor de propriedades, clique no cone da caixa Cor de fundo e,

em seguida, utilize o conta-gotas para selecionar a cor preta.
A cor de fundo preta ser aplicada tabela dos botes de navegao.

Adicionar preenchimento s clulas

A seguir, voc far alteraes s clulas que contm texto. Como voc pode ver, o
texto est prximo demais das margens das clulas. Voc adicionar
preenchimento s clulas, para aumentar o espao entre elas e o texto.
1

Clique na primeira clula da tabela de descrio do texto.

No seletor de tags, clique no tag <table> mais direita, para selecionar a tabela.

No campo Preench. da clula, no inspetor de propriedades, digite 10, para

adicionar 10 pixels de espao entre o texto e as clulas da tabela.

Clique em qualquer ponto da janela do documento, para examinar as

alteraes.

Salve o documento.

Visualizar os arquivos do site

Para examinar uma representao de nvel elevado da estrutura de um site local,
utilize a visualizao do mapa do site do Dreamweaver. O mapa do site tambm
pode ser utilizado para adicionar novos arquivos ao site; adicionar, remover e
alterar os links, alm de criar um arquivo de imagem do site, que pode ser
exportado e impresso a partir de um aplicativo de edio de imagens.
O mapa do site sempre exibe a home page de um site na parte superior do mapa;
abaixo da home page, voc poder examinar os arquivos que se vinculam home
page.

54

Captulo 1

Existem diversas maneiras de se definir a home page de um site. A maneira mais

fcil atravs da utilizao do menu contextual, situado na janela do site.
1

Clique na barra de ttulo da janela do site para ativ-la. Se a janela do site no

estiver visvel, escolha Janela > Arquivos do site.

Na lista Pasta local da janela do site, clique com o boto direito do mouse no
documento e my_CompassHome.html (no Windows), ou pressione a tecla
Control e clique no documento (no Macintosh); em seguida, no menu
contextual, escolha Definir como home page.

Clique no cone de Mapa do site, situado na rea superior esquerda da janela do

site; em seguida, no menu pop-up Mapa do site, selecione a opo Mapa e
arquivos.

cone de Mapa do site

A janela do site aparecer e contar agora com duas visualizaes do site local:
esquerda, um mapa do site, que representa graficamente a estrutura do site
Compass (cuja home page my_CompassHome.html), enquanto que direita,
uma lista com o contedo da pasta local.

A pgina my_CompassHome.html ainda no possui links. Voc adicionar links a

esta pgina na prxima seo do tutorial.
Mantenha aberta a janela do site por enquanto, para acompanhar a atualizao do
mapa do site enquanto os links so includos na home page.

Tutorial do Dreamweaver

55

Vincular os documentos
As imagens da rea superior da home page Compass guiam os visitantes para
pginas especficas do site. Agora, voc adicionar links aos botes de navegao.
Voc perceber que h diversas maneiras de criar links utilizando o Dreamweaver.
Primeiramente, voc adicionar um link da imagem Planejador de viagem
pgina TripPlanner.html, utilizando o inspetor de propriedades.
1

Na janela do site, clique duas vezes no cone correspondente ao arquivo

my_CompassHome.html, em qualquer um dos painis.
O arquivo my_CompassHome.html se tornar a janela ativa.

Na janela do documento, clique uma vez na imagem Planejador de viagem,

para selecion-la.

Escolha Janela > Propriedades, para abrir o inspetor de propriedades, caso ainda
esteja fechado.
O inspetor de propriedades exibir as informaes sobre a imagem selecionada.

Nota: O campo Link contm um sinal de nmero (#), geralmente denominado link nulo
ou fictcio, que foi criado quando voc inseriu a imagem cambivel. No remova este
caractere. Ele ser substitudo pelo nome do arquivo do documento vinculado.

No inspetor de propriedades, clique no cone correspondente pasta, direita

do campo Link.

Na caixa de dilogo Selecionar o arquivo, procure a pasta Compass_Site e, em

seguida, o arquivo DW4_TripPlanner.html; clique em Selecionar (no
Windows), ou Abrir (no Macintosh), para selecionar o arquivo a ser aberto
quando o boto Planejador de viagem for clicado.
O nome do arquivo aparecer no campo Link, no inspetor de propriedades.
Agora, voc ir adicionar um link imagem Destinos utilizando o inspetor de
propriedades e a janela do site.

56

Captulo 1

Clique na barra de ttulo da janela do site para ativ-la ou escolha Janela >
Arquivos do site. Redimensione a janela do documento, se for necessrio, para
que o lado esquerdo da janela do documento possa ser colocado ao lado da
janela do site.

Na janela do documento, clique na imagem Destinos, para selecion-la.

No inspetor de propriedades, clique no cone de Indicar o arquivo (localizado

direita do campo Link) e, em seguida, arraste o ponteiro para a janela do site;
na lista Pasta local, indique o arquivo DW4_Destinations.html.

O nome do arquivo aparecer no campo Link, no inspetor de propriedades da

imagem Produtos.
9

Clique no cone de Mapa do site, na janela do site. O mapa do site ser

atualizado, refletindo a adio do link.

Um sinal de adio (+) ao lado de um arquivo no mapa do site indica que o

arquivo possui links a outros documentos. Clique no sinal de adio para exibir
os arquivos associados; clique no sinal de subtrao () para reduzir o mapa do
site.
A seguir, voc adicionar um link imagem "Travelogs".
10

Na janela do documento, clique na imagem "Travelogs", para selecion-la.

11

No inspetor de propriedades, arraste o cone do indicador de arquivos at a

janela do site e indique o arquivo DW4_Travelog.html.

12

Escolha Arquivo > Salvar, para salvar as alteraes feitas na home page.

Tutorial do Dreamweaver

57

Testar a pgina
No possvel testar os links no Dreamweaver. Os links devem ser verificados em
um navegador, para garantir o funcionamento das pginas conforme as expectativas.
1

Pressione a tecla F12, para visualizar a pgina em um navegador.

Clique nos botes de navegao, para verificar os links. Clique no boto Voltar
do navegador, para retornar home page.

Quando tiver terminado de testar a pgina, escolha Arquivo > Fechar, para fech-la.

Utilizar o painel Propriedades

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

Se estiver continuando o tutorial vindo da seo anterior, escolha Arquivo >

Abrir e, em seguida, selecione o arquivo DW4_CompassHome2.html.

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

58

Captulo 1

Visualizar as propriedades do site

Inicie abrindo o painel Propriedades.
1

Abra o painel Propriedades seguindo um dos procedimentos abaixo:

Escolha Janela > Propriedades.

Clique no cone de Mostrar a propriedade, na barra do Iniciador.
Aparecer o painel Propriedades.

rea de visualizao das propriedades

opes das
propriedades

Inserir uma imagem

Inicie utilizando o painel Propriedades para inserir duas imagens na pgina: a
imagem de um alpinista e uma imagem de texto.
1

No painel Propriedades, clique no cone de Imagens e certifique-se de que o

boto de opo Site, localizado na parte superior deste painel esteja selecionado,
para que todas as imagens do site Compass estejam visveis.

Na lista de nomes, selecione o cone da imagem correspondente a climber.jpg e, em

seguida, arraste-o para a clula intermediria da tabela, do lado direito da pgina.

Tutorial do Dreamweaver

59

Pressione a tecla de seta direita (este procedimento cancelar a seleo da

imagem do alpinista e colocar o ponto de insero aps a mesma) e, em
seguida, pressione as teclas Shift e Enter (no Windows), ou Shift e Return (no
Macintosh), para inserir uma quebra de linha.

Na lista de nomes, selecione o arquivo featureText.gif e, em seguida, arraste-o

para a quebra de linha que criou, colocando a imagem featureText abaixo da
imagem do alpinista.

Inserir um filme Flash

Agora, voc adicionar um tipo diferente de propriedade. Voc arrastar um filme
Flash para a clula abaixo dos botes de navegao.
1

Clique no cone do Flash, no painel Propriedades, para visualizar todos os

arquivos Flash do site Compass.

Na lista de nomes, clique no arquivo welcome.swf, para selecionar o filme Flash

que deseja inserir no documento.
Na rea de visualizao do painel Propriedades, voc ver o alocador de espao
do filme Flash.

Clique no boto Executar, na rea de visualizao do painel Propriedades, para

visualizar o filme Flash.
boto Executar

Na lista de nomes, arraste o arquivo Welcome.swf para a clula abaixo do boto

de navegao "Trip Planner".
Aparecer um alocador de espao para o filme Flash na clula selecionada.

60

Captulo 1

Aplicar uma cor utilizando o painel Propriedades

As cores que forem aplicadas aos elementos HTML, como ao texto ou ao fundo,
sero automaticamente adicionadas categoria Cores no painel Propriedades.
possvel selecionar uma cor no painel Propriedades e aplic-la ao texto na mesma
pgina ou em outras pginas do site.
1

Coloque o ponto de insero depois da imagem do alpinista, pressione a tecla

Enter (no Windows), ou a tecla Return (no Macintosh), para adicionar um
novo pargrafo e, em seguida, digite Yosemite.

Clique duas vezes em Yosemite, para selecionar o texto.

No painel Propriedades, clique no cone de Cores, para visualizar as cores

HTML no site Compass.

Na lista de valores, selecione o cone de cor correspondente a #993300 e, em

seguida, arraste-o para o texto selecionado, para aplicar a cor.

Criar uma lista de propriedades favoritas

Utilize o painel Propriedades para gerenciar as propriedades. possvel criar o seu
prprio grupo de propriedades favoritas no painel Propriedades. A seguir, voc ir
adicionar o logotipo e imagem dos botes de navegao do Compass sua lista
Favoritos do site.
1

No painel Propriedades, selecione o cone de Imagens.

Na lista de nomes, clique no arquivo compass_logo.gif para selecion-lo e, em

seguida, siga um dos procedimentos abaixo:

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

Control e clique (no Macintosh), para utilizar o menu contextual e, em
seguida, selecione Adicionar pasta Favoritos.

Clique no cone de Adicionar pasta Favoritos, localizado no canto inferior

direito do painel Propriedades.
Voc ser alertado que a propriedade selecionada foi adicionada lista Favoritos
do site.
3

Clique em OK.

Tutorial do Dreamweaver

61

Adicionar diversas imagens lista Favoritos

Agora, voc adicionar as imagens dos botes de navegao lista Favoritos.
possvel selecionar diversas imagens no painel Propriedades e, em seguida,
adicion-las simultaneamente lista Favoritos.
1

Na lista de imagens do painel Propriedades, clique na imagem do primeiro

boto de navegao (MenuDestinations.gif ).

Selecione os outros botes de navegao, seguindo um dos procedimentos

abaixo:

Pressione a tecla Shift (no Windows) e, na lista de imagens, clique no arquivo

MenuTripPlanner_on.gif (o ltimo boto de navegao da lista), para
selecionar todas as imagens dos botes de navegao.

Pressione a tecla Shift (no Macintosh) e mantenha-na pressionada enquanto

seleciona as imagens correspondentes a cada boto de navegao.
3

Clique no cone de Adicionar pasta Favoritos.

Na mensagem de alerta, clique em OK.

Visualizar as propriedades favoritas

possvel visualizar as propriedades que tiverem sido adicionadas lista Favoritos
e utilizar esta visualizao para inserir as propriedades no documento.

Para visualizar as imagens que tiver adicionado lista Favoritos, clique no boto
de opo Favoritos, situado na parte superior do painel Propriedades.

Inserir objetos Flash

Os objetos Flash so pequenos arquivos grficos SWF (Shockwave) que podem ser
criados enquanto voc trabalha no Dreamweaver. possvel criar objetos de texto
e botes Flash. A utilizao de texto Flash permite desenhar pginas da Web
contendo fontes diferentes do padro, dispensando qualquer preocupao com as
fontes que os visitantes ao site tero disponveis nos seus computadores. Os botes
Flash so criados a partir de modelos Flash enviados com o Dreamweaver.
possvel personalizar com facilidade um boto de modelo e adicion-lo s suas
pginas da Web.

62

Captulo 1

Criar um objeto de texto Flash

Agora, voc criar um objeto de texto Flash para ser utilizado como ttulo da sua
home page.
1

Na janela do documento, coloque o ponto de insero acima da imagem do

alpinista.

No painel Objetos, clique no cone de Inserir texto Flash.

Aparecer a caixa de dilogo Inserir texto Flash.

Na caixa de dilogo Inserir texto Flash, defina as seguintes opes:

Em Fonte, selecione Verdana ou escolha uma de suas fontes favoritas.

Em Tamanho, digite 18.
Em Cor, clique na caixa de cores e, em seguida, utilize o conta-gotas para
selecionar uma cor amarronzada para o texto do cabealho do documento.

Em Cor da imagem cambivel, clique na caixa de cores; em seguida, mova o

conta-gotas at a janela do documento e selecione a cor dourada para o fundo
da tabela.

No campo Texto, digite Destino principal.

No campo Salvar como, digite myText.swf.
4

Clique em OK, para fechar a caixa de dilogo Inserir texto Flash.

Tutorial do Dreamweaver

63

Visualizar o objeto de texto Flash no documento

O objeto de texto Flash aparecer no documento. necessrio executar o objeto
Flash para examinar o efeito cambivel do texto.
1

Se o inspetor de propriedades ainda no estiver expandido, clique na seta de

expanso para examinar tudo.

No inspetor de propriedades do texto Flash, clique em Executar.

Na janela do documento, passe o ponteiro do mouse sobre o objeto de texto Flash.

Para interromper a execuo do objeto, clique em Parar, no inspetor de

propriedades.

Criar um objeto de boto Flash

Veja como fcil adicionar um boto Flash a um documento. Voc criar um
boto Flash e o adicionar abaixo da imagem do alpinista.
1

Na janela do documento, coloque o ponto de insero onde deseja inserir o

objeto, abaixo da imagem do alpinista e, em seguida, no painel Objetos, clique
no cone de Inserir boto Flash.
Aparecer a caixa de dilogo Inserir boto Flash.

64

Captulo 1

Na caixa de dilogo Inserir boto Flash, defina as seguintes opes:

Na lista de estilos, selecione "Beveled Rect-Bronze".

Em Texto do boto, digite Mais detalhes.
Em Fonte, selecione Verdana ou escolha uma de suas fontes favoritas.
Em Tamanho, digite 11.
Clique em Aplicar, para inserir o boto Flash no documento.
Em Salvar como, digite myButton.swf

Clique em OK, para fechar a caixa de dilogo.

O objeto de boto Flash aparecer no documento.

Visualizar o boto Flash no documento

Como o boto Flash que voc inseriu apresenta um efeito cambivel, examine-o,
para ver a sua aparncia.
1

No inspetor de propriedades do boto Flash, clique em Executar, para executar

o boto no documento.

Na janela do documento, passe o ponteiro do mouse sobre o objeto, para

examinar o efeito cambivel do boto Flash.

Para interromper a execuo do objeto, clique em Parar, no inspetor de

propriedades.

Criar um modelo
Os modelos podem ser utilizados para criar os documentos que tenham uma
estrutura e aparncia semelhantes. Eles so teis quando for necessrio assegurar
que todas as pginas em um site compartilhem determinadas caractersticas.
Quando apenas um modelo for aplicado a um grupo de pginas, as informaes
nelas contidas podero ser alteradas atravs da edio do modelo e de sua
reaplicao nas pginas. Enquanto os elementos especficos de uma pgina (como
o texto que descreve um item para venda) permanecem inalterados, os elementos
comuns do modelo (como as barras de navegao) so atualizados em todas as
pginas que o utilizarem.
A pgina de destinos de viagem Compass se vincula a diversas pginas de detalhes
sobre viagens que descrevem os locais que poderiam interessar aos visitantes do
site. Voc utilizar o desenho de uma pgina existente de detalhes de viagem para
criar um modelo. A utilizao de um modelo garante que as pginas de
informaes de viagem tero um layout e formato idnticos.

Tutorial do Dreamweaver

65

Criar um modelo a partir de uma pgina existente

Nesta seo, voc criar um modelo a partir de uma pgina de viagem j existente
e o utilizar para criar novas pginas de viagem.
1

Na lista de pastas locais da janela do site, clique duas vezes no cone

correspondente ao arquivo DW4_TravelDetail_surf.html, para abri-lo.

Escolha Arquivo > Salvar como modelo.

Aparecer a caixa de dilogo Salvar como modelo.

Os modelos existentes (travelDetail e travelDetail_v2) foram criados e

aplicados s pginas de viagem concludas do site Compass. Voc criar a sua
prpria verso deste modelo.
3

No campo Salvar como, altere o nome do modelo: digite myTravelDetail e

clique em Salvar.
Na janela do documento, um novo documento substituir o documento
DW4_TravelDetail. Na barra de ttulo do documento, observe que o
documento contm um identificador de modelo <<Template>> e uma extenso
de arquivo de modelo do Dreamweaver (.dwt).

Modificar o modelo
A esta altura, o novo modelo idntico pgina a partir da qual foi salvo. Os
modelos contm regies bloqueadas e editveis. As regies bloqueadas podem ser
editadas apenas no modelo. As regies editveis so alocadores de espao para o
contedo exclusivo de cada pgina que utiliza esse modelo. No modelo, os botes
correspondentes ao logotipo e aos botes de navegao no so editveis, ao passo
que o ttulo do destino, o anncio relacionado e a descrio dos destinos, so.

66

Captulo 1

A primeira etapa ser a criao de regies editveis no modelo.

1

No modelo myTravelDetail.dwt, na janela do documento, clique no alocador

de espao Flash mais ao alto, para selecion-lo; este filme exibir o ttulo do
destino.

Escolha Modificar > Modelos > Nova regio editvel.

Aparecer a caixa de dilogo Nova regio editvel.

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

Clique em OK.
Ser criada uma regio de modelo. Observe a guia que contm o nome da
regio do modelo. O alocador de espao tambm circundado por uma linha
azul-clara, que identifica os limites da rea editvel.

Na janela do documento, selecione o alocador de espao do anncio Flash e,

em seguida, escolha Modificar > Modelos > Nova regio editvel, para tornar
editvel esta regio do modelo.

No campo Nome da caixa de dilogo Nova regio editvel, digite adCell e, em

seguida, clique em OK.
Os identificadores de rea do modelo aparecero no documento.

Na janela do documento, selecione todo o texto da primeira clula abaixo do

anncio e, em seguida, escolha Modificar > Modelos > Nova regio editvel,
para tornar editvel esta rea do modelo.

No campo Nome da caixa de dilogo Nova regio editvel, digite textCell1e,

em seguida, clique em OK.

Na janela do documento, selecione todo o texto da segunda clula abaixo do

anncio e, em seguida, escolha Modificar > Modelos > Nova regio editvel,
para tornar editvel esta seo do modelo.

Tutorial do Dreamweaver

67

10

No campo Nome da caixa de dilogo Nova regio editvel, digite textCell2 e,

em seguida, clique em OK.

11

Escolha Arquivo > Salvar, para salvar o arquivo do modelo.

Aplicar o modelo a uma nova pgina

Como as regies editveis do modelo j esto definidas, voc utilizar o modelo
para criar uma pgina de detalhes de uma viagem Nova Zelndia.
1

Escolha Arquivo > Novo a partir de modelo, para abrir um novo documento.

Escolha Janela >Propriedades, para abrir o painel Propriedades.

Clique no cone de Modelos, para examinar os modelos do site Compass.

Na lista de nomes, selecione o modelo myTravelDetail e, em seguida, arraste o

cone para o novo documento.
O modelo ser aplicado ao novo documento.

Esta pgina contm as mesmas regies e contedo que o modelo por voc
criado.
Nota: Se voc mover o ponteiro do mouse para uma regio no-editvel deste modelo
(como as reas correspondentes ao logotipo ou aos botes de navegao), o ponteiro
ser alterado, indicando a impossibilidade de acesso regio bloqueada.

68

Captulo 1

Salve o documento e nomeie o arquivo como myTravelDetail_mtnBike.html.

Como editar uma pgina baseada em modelo

Agora, voc atualizar o documento myTravelDetail_mtnBike.html, atualizando
as regies editveis com propriedades e texto que se referem aos detalhes de
viagens envolvendo ciclismo rstico na Nova Zelndia.
1

Na janela do site, clique no alocador de espao Flash, situado na regio

titleCell, para selecionar o objeto a ser substitudo.

No campo Arquivo, no inspetor de propriedades, clique no cone

correspondente pasta; em seguida, na caixa de dilogo que aparecer, navegue
at Assets/swfs e selecione text_mtnBike.swf.

Na regio adCell, clique no alocador de espao Flash, para selecionar o objeto a

ser substitudo.

No campo Arquivo, no inspetor de propriedades, clique no cone

correspondente pasta; em seguida, na caixa de dilogo que aparecer, navegue
at Assets/swfs e selecione bikeAd.swf.

Escolha Arquivo > Abrir e, em seguida, navegue at o arquivo

DW4_MtnBikeText.txt, para abrir o documento que contm o texto
correspondente a este destino.

No arquivo DW4_MtnBikeText.txt, copie o pargrafo do texto abaixo de "Cell 1"

(Clula 1); no documento myTravelDetail_mtnBike, substitua o texto da
regio textCell1 selecionando-o e, em seguida, colando o texto copiado.

No arquivo DW4_MtnBikeText.txt, copie o pargrafo do texto abaixo de "Cell 2"

(Clula 2); no documento myTravelDetail_mtnBike, substitua o texto da
regio textCell2 selecionando-o e, em seguida, colando o texto copiado.
As informaes dos detalhes de viagem sero atualizadas.

Feche o arquivo DW4_MtnBikeText.text.

No campo Ttulo da barra de ferramentas do Dreamweaver, digite Ciclismo na

Nova Zelndia.

10

Salve o documento.

Tutorial do Dreamweaver

69

Verificar o site
Antes de enviar as pginas para um servidor remoto, verifique sempre os arquivos.
At agora, voc aprendeu como testar as pginas, visualizando-as em um
navegador. Agora, voc conhecer outras ferramentas do Dreamweaver, que se
encontram disponveis para criar o acompanhamento de um arquivo e para testar
as pginas.
Inicialmente, voc aprender como adicionar uma Design Note a um arquivo e,
em seguida, como executar um relatrio sobre os arquivos do site.
Criar uma Design Note
As Design Notes constituem uma maneira inteligente de gerenciar o site, atravs
da incluso de comentrios na janela do site do documento. Utilize as Design
Notes para programar o trabalho de produo, incluir acompanhamento nos
arquivos ou comunicar detalhes sobre arquivos ou sobre o site aos outros membros
da equipe. A seguir, voc criar uma Design Note para programar o
acompanhamento de uma alterao a uma pgina do site.
1

Na janela do site do Dreamweaver (Site > Arquivos do site), no painel Pasta

local, selecione DW4_Destinations.html.

No menu principal, escolha Arquivo > Design Notes.

Aparecer a caixa de dilogo Design Notes.

70

Captulo 1

Na guia Informaes bsicas, no menu pop-up Status, selecione Necessita de

ateno.

Clique no cone de calendrio, para adicionar a data ao campo Notas.

Clique no campo Notas e, em seguida, digite necessrio criar a pgina do

Pico do Papagaio e adicionar links aos documentos.

Selecione a opo Mostrar quando o arquivo estiver aberto, de maneira que a

Design Note seja aberta automaticamente quando esta pgina for aberta.

Clique em OK, para fechar a caixa de dilogo.

Aparecer um cone de Design Note na coluna Notas, no painel Pasta local.

Na janela do site, selecione o arquivo DW4_Destinations.html e abra-o.

O documento e as Design Note a ele associadas sero abertos; fcil verificar as
aes necessrias neste arquivo.

Relatrios do site inteiro

possvel executar relatrios do site, para verificar as condies dos arquivos
HTML e para gerenciar o fluxo de trabalho. Execute relatrios no nvel do
documento, pasta ou site. Voc executar um relatrio para verificar se h
qualquer documento sem ttulo no site.
1

Escolha Site > Relatrios.

Aparecer a caixa de dilogo Relatrios.

Na caixa de dilogo Relatrios, no menu pop-up Relatrio sobre, selecione a

opo Todo o site local; em seguida, em Relatrios HTML, selecione a opo
Documento sem ttulo.

Clique em Executar, para executar o relatrio.

Aparecer a caixa de dilogo Resultados, que apresenta uma listagem dos
documentos sem ttulo de pgina.

Tutorial do Dreamweaver

71

Na lista de arquivos, clique no arquivo, para selecion-lo.

O campo Descrio detalhada ser atualizado com as informaes detalhadas
de advertncia.

Clique em Abrir o arquivo, para abrir o arquivo e corrigir o problema.

O arquivo ser aberto.

No campo Ttulo da barra de ferramentas do Dreamweaver, digite Destinos

principais.

Salve e feche o arquivo quando tiver concludo.

Feche a caixa de dilogo Resultados.

As prximas etapas
Parabns, voc concluiu o tutorial do Dreamweaver. Voc j sabe como desenhar
pginas, adicionar contedo e testar as pginas. Se desejar, voc poder continuar a
criar pginas e links para o site Compass. Voc sabe como cumprir todas as etapas
necessrias para concluir as pginas (alternativamente, utilize as pginas concludas
como referncia). Depois de atualizar as pginas, visualize-as para testar as imagens
cambiveis e links, certificando-se de que estejam funcionando.
Se desejar se informar mais sobre como utilizar o Dreamweaver, tente as lies do
Dreamweaver; no menu principal do Dreamweaver, escolha Ajuda> Lies e, em
seguida, selecione uma lio.
Se tiver uma cpia do Dreamweaver e do Fireworks e desejar aprender como
trabalhar com estas ferramentas em conjunto, consulte os tutoriais do
Dreamweaver e do Fireworks.
Se estiver interessado em aprender mais sobre como utilizar os cdigos HTML e
JavaScript ou as folhas de estilos em cascata (CSS), consulte o material de
referncia enviado com o Dreamweaver. Escolha Janelas > Referncia.

72

Captulo 1

CAPTULO 2

Princpios bsicos do Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

O trabalho inicial com o Macromedia Dreamweaver to fcil quanto abrir ou

criar um novo documento HTML. No entanto, para tirar o melhor proveito da
experincia com o Dreamweaver, voc dever compreender os conceitos bsicos
subjacentes rea de trabalho do programa e saber escolher as opes, utilizar os
inspetores e painis e definir as preferncias mais adequadas ao seu estilo de
trabalho.

73

Sobre a rea de trabalho do Dreamweaver

A rea de trabalho do Dreamweaver adapta-se a diversos estilos de trabalho e nveis
de experincia. Eis alguns dos componentes mais comumente utilizados:

Barra de
ferramentas

menu
contextual

painel Objetos

janela do
documento

barra do Iniciador

seletor de tags

inspetor de
propriedades

A janela do documento exibe o documento atual medida que criado e

editado.

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

contm botes para abrir e fechar os inspetores e painis utilizados mais
freqentemente. Os cones da barra do Iniciador tambm aparecem no
Iniciador, um painel flutuante que pode ser selecionado no menu Janela.
possvel especificar os cones que aparecero no Iniciador e na barra do mesmo,
definindo as preferncias dos painis.

A barra de ferramentas contm botes e menus pop-up que permitem visualizar

a janela do documento de diversas maneiras, definir as opes de visualizao e
acessar algumas operaes comuns como, por exemplo, visualizar um
documento em um navegador.

Os menus contextuais facilitam o acesso rpido a comandos teis relacionados

seleo ou rea atual. Para exibir um menu contextual, clique com o boto
direito do mouse no item de uma janela (no Windows), ou pressione a tecla
Control e clique no item (no Macintosh).

74

Captulo 2

 O painel Objetos contm botes para criar e inserir diversos tipos de objetos,
como imagens, tabelas, camadas e molduras. Tambm possvel alternar da
visualizao padro para a de layout e acessar as ferramentas de desenho da
visualizao de layout.

O inspetor de propriedades exibe as propriedades do objeto ou texto

selecionado e permite modific-las (as propriedades que aparecero no inspetor
dependero do objeto ou texto selecionado).

O Dreamweaver tambm conta com muitos outros inspetores, painis e janelas

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

Sobre as diversas visualizaes no

Dreamweaver
O Dreamweaver permite trabalhar em um documento de diversas maneiras
utilizando a visualizao do projeto, visualizao do cdigo ou uma combinao
das duas, que exibir o projeto e o cdigo do documento. possvel alterar a
visualizao na qual est trabalhando, selecionando um tipo de visualizao, na
barra de ferramentas do Dreamweaver. Para obter mais informaes, consulte
Como utilizar a barra de ferramentas na pgina 80.
Como trabalhar com a visualizao de cdigo
Durante a criao e o trabalho com os documentos, o Dreamweaver gera
automaticamente o respectivo cdigo-fonte HTML subjacente. Para examinar ou
editar este cdigo, utilize um dos editores de cdigo do Dreamweaver: a
visualizao de cdigo apresentada na janela do documento ou o inspetor de
cdigo. Para obter informaes mais detalhadas, consulte Como utilizar a
visualizao de cdigo (ou o inspetor de cdigo) na pgina 361.

Princpios bsicos do Dreamweaver

75

Como trabalhar com a visualizao do projeto

A visualizao do projeto do Dreamweaver exibe uma representao visual do
documento, em vez do cdigo a ele subjacente. No trabalho com a visualizao do
projeto, existem duas visualizaes nas quais possvel desenhar a visualizao
de layout e a visualizao padro. Estas visualizaes podem ser selecionadas no
painel Objetos, abaixo de Exibir.
Na visualizao de layout possvel projetar o layout de uma pgina e inserir
imagens, texto e outros elementos de mdia. Para obter mais informaes, consulte
Como projetar o layout de pgina na pgina 177.
Trabalhe na visualizao padro para inserir camadas, criar documentos com
molduras, criar tabelas ou utilizar outros recursos que no esto disponveis na
visualizao de layout. Para trabalhar na visualizao padro, clique no cone a ela
correspondente, no painel Objetos.
A janela do documento
Na visualizao do projeto, a janela do documento exibe o documento
aproximadamente da maneira como ele aparecer em um navegador da Web. A
barra de ttulo da janela do documento exibe o ttulo da pgina e, entre parnteses,
os nomes da pasta raiz e do arquivo, alm de um asterisco, se o arquivo contiver
alteraes que ainda no tiverem sido salvas.
A barra de status, localizada na parte inferior da janela do documento, fornece
informaes adicionais sobre o documento que voc estiver criando.
Tamanho do documento e
tempo estimado de download

seletor de tags

menu pop-up
Tamanho da janela

barra do Iniciador

O seletor de tags exibe os tags-pais HTML que controlam o texto e objetos

selecionados. Clique em um destes tags para realar o seu contedo na janela do
documento. Clique em <body>, para selecionar o corpo inteiro do documento.
O menu pop-up Tamanho da janela permite redimensionar a janela do
documento de acordo com dimenses pr-determinadas ou personalizadas.
Consulte Como redimensionar a janela do documento na pgina 77.
direita do menu pop-up Tamanho da janela, so exibidos o tamanho estimado
do documento e o tempo estimado de download da pgina, incluindo todos os
arquivos dependentes, como imagens e outros arquivos de mdia. Consulte
Como verificar o tempo e o tamanho do download na pgina 549

76

Captulo 2

A barra do Iniciador aparece na parte inferior da janela do documento. Por

padro, os botes da barra do Iniciador abrem a janela Site, os painis
Propriedades, Estilos HTML, Estilos CSS, Comportamentos, Histrico, e o
inspetor de cdigo. Para especificar que botes aparecero na barra do Iniciador (e
no Iniciador flutuante), consulte Como personalizar a barra do Iniciador na
pgina 80.
Como redimensionar a janela do documento
A barra de status da janela do documento exibe as dimenses da janela (em pixels).
Se voc clicar neste tamanho de janela, o Dreamweaver exibir o menu pop-up
Tamanho da janela, que permite definir o tamanho da janela, a fim de ajust-la a
diversos tamanhos comuns de monitor. Para criar uma pgina de maneira que a
sua aparncia seja a melhor em um determinado tamanho, possvel ajustar a
janela do documento a qualquer um dos tamanhos pr-determinados, editar estes
tamanhos ou criar novos tamanhos.

Nota: O tamanho dado da janela corresponde s dimenses internas da janela do

navegador, sem bordas; o tamanho do monitor est listado entre parnteses. Por exemplo:
seria recomendvel utilizar o tamanho 536 x 196 (640 x 480, padro) se for provvel
que os visitantes ao seu site estejam utilizando o Microsoft Internet Explorer ou o Netscape
Navigator nas suas configuraes padro em um monitor de 640 x 480 pixels.
Para redimensionar a janela do documento de acordo com um tamanho prdeterminado:

Escolha um dos tamanhos no menu pop-up situado na parte inferior da janela do

documento.

Princpios bsicos do Dreamweaver

77

Para alterar os valores na lista do menu pop-up Tamanho da janela:

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 especfica (mantendo a
altura inalterada), selecione um valor de altura e exclua-o.

Clique no campo Descrio, para inserir um texto descritivo sobre um

tamanho especfico.

Clique em OK para salvar a alterao e retornar janela do documento.

Para adicionar um novo tamanho ao menu pop-up Tamanho da janela:

Escolha Editar os tamanhos, no menu pop-up Tamanho da janela.

Clique no espao em branco abaixo do ltimo valor na coluna Largura.

Digite os valores de Largura e Altura. Para definir apenas os valores de Largura

ou de Altura, basta deixar um campo vazio.

Clique no campo Descrio, para inserir um texto descritivo sobre o tamanho

adicionado.

Clique em OK para salvar a alterao e retornar janela do documento.

Por exemplo: voc poder digitar SVGA ou PC comum prximo entrada de
um monitor de 800 x 600 pixels, e Mac de 17 polegadas prximo entrada de
um monitor de 832 x 624 pixels. Observe que a maioria dos monitores pode
ser ajustada de acordo com diversas dimenses de pixels.

Como minimizar e restaurar as janelas e painis (apenas para

os usurios de PCs)
possvel minimizar e restaurar todas as janelas abertas do Dreamweaver
janelas de documentos, inspetores e painis.

Para minimizar todas as janelas do Dreamweaver, pressione as teclas Shift+F4

ou selecione Janela > Minimizar todas.

Para restaurar todas as janelas do Dreamweaver, pressione as teclas

Alt+Shift+F4. Se houver pelo menos uma janela aberta, possvel selecionar
Janela > Restaurar todas, para restaurar qualquer outra janela.

78

Captulo 2

Como definir as preferncias da barra de status

Utilize as preferncias da barra de status para definir as opes da barra de status,
situada na parte inferior da janela do documento. Para exibir estas preferncias,
escolha Editar > Preferncias e selecione Barra de status.
Tamanhos da janela permite

personalizar os tamanhos da janela que aparecem no

menu pop-up da barra de status. Consulte Como redimensionar a janela do
documento na pgina 77.
Velocidade da conexo determina a velocidade da conexo (em quilobits por
segundo) utilizada no clculo do tamanho do download. O tamanho do download
da pgina exibido na barra de status. Quando uma imagem for selecionada, o
tamanho do download de imagens e outras propriedades ser exibido no inspetor
de propriedades.
Mostrar o iniciador na barra de status exibe a barra do Iniciador, na parte inferior
da janela do documento. Os botes da barra do Iniciador iniciam janelas, painis e
inspetores. O Iniciador contm os mesmos botes (com texto) e funes. Para
obter mais informaes, consulte Como personalizar a barra do Iniciador na
pgina 80.

Como utilizar a barra do Iniciador

A barra do Iniciador contm botes para abrir e fechar vrios painis, janelas e
inspetores. Tambm possvel exibir o Iniciador, um painel flutuante com botes
idnticos.

Para mostrar ou ocultar o Iniciador:

Escolha Janela > Iniciador.

Se a barra do Iniciador no aparecer na parte inferior da janela do documento, ative a
opo Mostrar o iniciador na barra de status, nas preferncias da barra de status.
Para alterar a orientao do Iniciador, de horizontal para vertical:

Clique no cone de orientao, no canto inferior direito.

Para obter mais informaes sobre os itens que podem ser abertos pelos botes
padro do Iniciador, consulte Sobre a janela do site na pgina 114, Como
utilizar os estilos HTML para formatar o texto na pgina 262, Como utilizar o
painel Estilos CSS na pgina 275, O painel Comportamentos na pgina 470,
Sobre como automatizar as tarefas na pgina 168, Como utilizar a visualizao
de cdigo (ou o inspetor de cdigo) na pgina 361, Como gerenciar e inserir
propriedades na pgina 237 e Como utilizar o painel Referncia do
Dreamweaver na pgina 358.

Princpios bsicos do Dreamweaver

79

Como personalizar a barra do Iniciador

Utilize as preferncias dos painis para especificar os itens que aparecero na barra
do Iniciador e no Iniciador.
Para especificar que botes aparecero na barra do Iniciador e no Iniciador:

Escolha Editar > Preferncias e, em seguida, selecione Painis, na lista de

categorias.
Os itens selecionados para a exibio no Iniciador e na barra do Iniciador esto
listados na caixa Mostrar no Iniciador.

Para adicionar um item ao Iniciador e barra do Iniciador, clique no boto

com o sinal de adio (+).

Para remover um item do Iniciador e da barra do Iniciador, realce-o e clique no

boto com o sinal de subtrao (-).

Para alterar a ordem dos itens que aparecem no Iniciador ou na barra do

Iniciador, selecione um item da lista e clique em um boto de seta.
Por exemplo: para mover um item para o lado direito do Iniciador, mova o item
para a parte de baixo da lista.

Clique em OK.
O Iniciador e a barra do Iniciador sero alterados, exibindo os itens
especificados.

Como utilizar a barra de ferramentas

A barra de ferramentas do Dreamweaver contm botes que permitem alternar
rapidamente de uma visualizao para outra do documento: de cdigo, do projeto
e uma terceira visualizao, que compreende estas duas. A barra de ferramentas
tambm contm comandos comuns relacionados visualizao selecionada e ao
status do documento. Os itens do menu Opes (o boto localizado direita)
sero modificados, dependendo da visualizao selecionada.
Visualizao de
cdigo
Visualizao do
projeto

Visualizao de
cdigo e do projeto

Status do
arquivo
Ttulo do
documento

Referncia

Visualizar no navegador

Menu
Opes

Navegao do cdigo

Atualizar a visualizao do projeto

Para visualizar ou ocultar a barra de ferramentas, escolha Exibir > Barra de

ferramentas.

80

Captulo 2

 Para exibir o cdigo apenas na janela do documento, clique no boto Mostrar a

visualizao de cdigo.

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

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

Para exibir apenas a visualizao do projeto, clique no boto Mostrar a

visualizao do projeto.
Tambm possvel acessar estas visualizaes atravs do menu Exibir.

Para digitar o ttulo de um documento, utilize o campo Ttulo.

Se o documento j tiver um ttulo, ele aparecer neste campo.

Para exibir o menu pop-up Status do arquivo, clique no boto do menu Status
do arquivo.

Para visualizar ou depurar o documento em um navegador, clique no boto

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

Para atualizar a visualizao do projeto, clique no boto Atualizar a visualizao

do projeto.

Para acessar o painel Referncia, clique no boto Referncia.

O painel Referncia contm informaes de referncia sobre os cdigos
HTML, CSS e JavaScript. Para obter mais informaes, consulte Como
utilizar o painel Referncia do Dreamweaver na pgina 358.

Para navegar pelo cdigo, clique no boto Navegao do cdigo. Para obter
mais informaes, consulte Como depurar o cdigo JavaScript na
pgina 509.

Para acessar o menu Opes, clique no boto do menu Opes.

O menu Opes apresenta diversas opes para cada visualizao. Para obter
mais informaes sobre as opes de visualizao do cdigo, consulte Como
utilizar a visualizao de cdigo (ou o inspetor de cdigo) na pgina 361. Para
obter mais informaes sobre as opes de visualizao do projeto, consulte
Como projetar o layout de pgina na pgina 177.
Nota: Quando a janela do documento exibir ambas as visualizaes, possvel acessar
o menu Opes de qualquer uma das visualizaes clicando na visualizao desejada
e, em seguida, no menu Opes.

Princpios bsicos do Dreamweaver

81

Como utilizar os menus contextuais

O Dreamweaver utiliza amplamente os menus contextuais, que permitem acessar
rapidamente os comandos e propriedades mais teis, relativos ao objeto ou
janela que estiver sendo trabalhada. Os menus contextuais apresentam apenas os
comandos relacionados seleo em questo.
Para utilizar um menu contextual:

Clique com o boto direito do mouse no objeto ou janela (no Windows), ou

pressione a tecla Control e clique no objeto ou janela (no Macintosh).
Aparecer o menu contextual correspondente ao objeto ou janela selecionada.

Escolha o comando no menu contextual e solte o boto do mouse.

Como utilizar o painel Objetos

O painel Objetos contm botes para criar e inserir objetos como tabelas, camadas
e imagens. Para mostrar ou ocultar o painel Objetos, escolha Janela > Objetos.
Para inserir um objeto:

Clique no boto correspondente do painel Objetos ou arraste o cone do boto

para a janela do documento. Dependendo do objeto, aparecer uma caixa de
dilogo de insero de objeto a ele correspondente, que solicitar a seleo ou
insero do arquivo ou objeto desejado.

82

Captulo 2

Para ignorar essa caixa de dilogo e inserir um objeto alocador de espao vazio:

Mantenha pressionada a tecla Control (no Windows), ou Option (no Macintosh)

enquanto insere o objeto. Por exemplo: para inserir um alocador de espao de uma
imagem sem especificar um arquivo de imagem, mantenha pressionada a tecla
Control ou Option e clique no boto Imagem.
Nota: Este procedimento no ignora todas as caixas de dilogo. Certos objetos, como
barras de navegao, camadas, botes Flash e molduras, entre outros, no inserem
alocadores de espao.

Por padro, o painel Objetos contm sete categorias: Caracteres, Comuns,

Formulrios, Molduras, Cabealho, Invisveis e Especial. Ele tambm contm
botes que alteram a visualizao: Padro e Layout.

A categoria Caracteres contm caracteres especiais, como os smbolos de

direitos autorais e marca registrada, alm de aspas curvas. Observe que
possvel que estes smbolos no sejam exibidos corretamente nas verses
anteriores 3.0 dos navegadores (Netscape e IE).

A categoria Comuns contm botes para criar e inserir os objetos mais

comumente utilizados, como imagens, tabelas e camadas.

A categoria Formulrios contm botes para criar os formulrios e inserir os

seus elementos.

A categoria Molduras contm estruturas comuns dos conjuntos de molduras.

A categoria Cabealho contm botes para adicionar diversos elementos head,
como os tags meta, keywords, e base.

Princpios bsicos do Dreamweaver

83

 A categoria Invisveis contm botes para criar objetos que no so visveis na

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

A categoria Especial contm botes para inserir itens especiais, como

miniaplicativos Java, plug-ins e objetos ActiveX. Para obter mais informaes,
consulte Como inserir mdia na pgina 325.

A seo Exibir do painel Objetos permite escolher entre a visualizao Padro

ou Layout. Se a Visualizao de layout for selecionada, tambm ser possvel
selecionar as ferramentas de layout Desenhar a clula de layout e Desenhar a
tabela de layout. Para obter mais informaes, consulte Como projetar o
layout de pgina na pgina 177.
Para alternar para outra categoria, utilize o menu pop-up situado no alto do
painel. Voc pode modificar qualquer objeto do painel ou criar os seus prprios
objetos; consulte Como modificar o painel Objetos na pgina 555 e Como
criar um objeto simples na pgina 556. Para obter informaes sobre as opes de
cada painel, consulte os tpicos relacionados na Ajuda do Dreamweaver.
Algumas configuraes das preferncias gerais afetam o painel Objetos. Para
modific-las, escolha Editar > Preferncias e, em seguida selecione Geral.

Ao inserir objetos, como imagens, tabelas, scripts e elementos head, uma caixa
de dilogo solicitar informaes adicionais. possvel suprimir estas caixas de
dilogo ao desativar a opo Mostrar a caixa de dilogo quando inserir objetos
ou ao manter pressionada a tecla Control enquanto cria o objeto. Ao inserir um
objeto com esta opo desativada, sero conferidos valores de atributos padro
ao objeto. Utilize o inspetor de propriedades para alterar as propriedades do
objeto aps a insero.

A preferncia do painel Objetos permite exibir o contedo do painel Objetos

como apenas texto, apenas cones ou texto e cones.

84

Captulo 2

Como utilizar o inspetor de propriedades

O inspetor de propriedades permite examinar e editar as propriedades do
elemento selecionado na pgina. Um elemento da pgina um objeto ou texto.
possvel selecionar elementos da pgina na janela do documento ou no inspetor de
cdigo.
Para mostrar ou ocultar o inspetor de propriedades, escolha Janela > Propriedades.

A maioria das alteraes feitas s propriedades ser imediatamente aplicada

janela do documento. No caso de algumas propriedades, as alteraes no sero
aplicadas enquanto voc no clicar fora dos campos de texto para edio de
propriedades, pressionar a tecla Return ou pressionar a tecla de tabulao, para
passar a outra propriedade.
O contedo do inspetor de propriedades ir variar, dependendo do elemento
selecionado. Para obter informaes sobre determinadas propriedades, selecione
um elemento na janela do documento e, em seguida, clique no cone da Ajuda, no
canto superior direito do inspetor de propriedades.
O inspetor de propriedades inicialmente exibir as propriedades mais comumente
utilizadas do elemento selecionado. Clique na seta de expanso, localizada no
canto inferior direito do inspetor de propriedades, para examinar outras
propriedades do elemento. Em alguns poucos casos, possvel que certas
propriedades pouco conhecidas no apaream, mesmo no inspetor de
propriedades expandido; nestes casos, utilize o inspetor de cdigo ou a
visualizao de cdigo, para codificar estas propriedades manualmente.

Princpios bsicos do Dreamweaver

85

Como utilizar os painis flutuantes de encaixe

A maioria dos painis do Dreamweaver podem ser encaixados, ou seja,
combinados em um nico painel flutuante com diversas guias. Este recurso facilita
o acesso s informaes necessrias sem desordenar o seu espao de trabalho. No
entanto, o Iniciador, o inspetor de propriedades e a janela do site do site no
podem ser encaixados. Agora, os painis e inspetores se encaixam
automaticamente uns nos outros, nos lados da tela ou na janela do documento.
Isto facilita a mudana e organizao dos diversos painis flutuantes e janelas no
Dreamweaver.
Para combinar dois ou mais painis, a fim de criar um painel com guias:

Arraste a guia (no a barra de ttulo) de um painel flutuante sobre outro painel
flutuante. Quando aparecer uma borda realada ao redor do painel de destino,
solte o boto do mouse.

Clique em qualquer guia do painel para trazer o painel correspondente para a

frente.
guia do painel
Histrico

painel Histrico sendo arrastado para

o painel Camadas

Como o painel Objetos no possui uma guia, ele no pode ser encaixado com
outros painis mediante o arraste; no entanto, possvel combinar outros painis
com o painel Objetos, arrastando as guias daqueles sobre este. No entanto,
possvel mover os painis com guias para a frente e para trs dos painis flutuantes,
reorganizando-os de acordo com o fluxo de trabalho, utilizando o processo
descrito acima.
Para remover um painel de um painel com guias:

Arraste a sua guia para fora da janela.

86

Captulo 2

Como definir as preferncias dos painis

Utilize as preferncias dos painis para especificar os painis e inspetores que sempre
aparecero na frente das janelas do documento e do site, e quais podero estar
obscurecidos. Tambm possvel utilizar as preferncias dos painis para especificar os
painis e inspetores que aparecero no Iniciador e na barra do Iniciador.
Para especificar o local em que cada painel aparecer em relao janela do
documento:

Escolha Editar > Preferncias e, em seguida, selecione Painis, na lista de

categorias.
Por padro, todas as janelas , inspetores e painis aparecero na frente da janela
do documento.

Cancele a seleo das janelas, inspetores e painis que desejar colocar atrs da
janela do documento.
Por exemplo: se desejar que a janela do documento obscurea o inspetor de
cdigo, cancele a seleo da opo correspondente a este inspetor. A partir de
agora, o inspetor de cdigo aparecer na frente da janela do documento
somente quando for ativado.
Da mesma forma, se preferir que a janela do documento obscurea quaisquer
painis flutuantes que tiver adicionado ao personalizar o Dreamweaver, cancele
a seleo de Todos os outros flutuadores.

Sobre o painel Histrico

O painel Histrico mostra uma lista com todas as etapas do seu trabalho no
documento ativo, desde a criao ou abertura do mesmo. O painel Histrico no
mostra as etapas efetuadas em outras molduras, janelas de documentos ou na
janela do site. Ela permite desfazer uma ou mais etapas, execut-las novamente e
criar novos comandos para automatizar tarefas repetitivas.

Etapas

Controle deslizante
(polegar)
boto Executar
novamente
boto Copiar as etapas boto Salvar como comando

O boto deslizante (polegar) do painel Histrico indica inicialmente a ltima

etapa efetuada.

Princpios bsicos do Dreamweaver

87

Como utilizar o painel Histrico

O painel Histrico mantm um registro de cada etapa do seu trabalho no
Dreamweaver. Utilize o painel Histrico para desfazer diversas etapas
simultaneamente.
Se desejar desfazer a ltima operao realizada em um documento, escolha
Editar > Desfazer, da mesma maneira que faria em qualquer outro aplicativo. O
nome do comando Desfazer no menu Editar ser alterado, refletindo a ltima
operao efetuada.
O painel Histrico tambm permite executar novamente as etapas que j foram
executadas e automatizar as etapas, criando novos comandos. Para obter mais
informaes, consulte Sobre como automatizar as tarefas na pgina 168.

Para abrir o painel Histrico:

Escolha Janela > Histrico.

Para desfazer a ltima etapa:

Arraste o controle deslizante do painel Histrico uma etapa acima na lista. Esta
ao provoca o mesmo efeito que a seleo de Editar > Desfazer.
A etapa desfeita se tornar cinza.
Para selecionar vrias etapas simultaneamente, siga um dos procedimentos
abaixo:

Arraste o controle deslizante, at que indique uma etapa.

Clique esquerda de uma etapa, ao longo do caminho do controle deslizante;
este rolar automaticamente at a etapa, desfazendo etapas medida que rola.

88

Captulo 2

Nota: Para rolar automaticamente at uma determinada etapa, clique esquerda da

mesma; a seleo da etapa feita clicando-se sobre a mesma. A seleo de uma etapa
diferente da volta etapa no histrico dos comandos Desfazer.

Da mesma maneira que uma nica etapa no pode ser refeita aps uma nova ao,
se vrias etapas forem desfeitas, no ser mais possvel refaz-las depois de efetuar
uma nova ao no documento, j que elas desaparecero do painel Histrico.
O painel Histrico tambm permite repetir as etapas que aparecem no histrico
de etapas e automatizar as tarefas que se basearem nas etapas efetuadas.Consulte
Sobre como automatizar as tarefas na pgina 168
Para definir o nmero de etapas que o painel Histrico manter e mostrar:

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 suficiente para as necessidades da maioria dos
usurios. Quanto mais alto o nmero, maiores sero os requisitos de memria
do painel Histrico. Isso poder afetar o desempenho e diminuir
significativamente a velocidade do computador. Quando o painel Histrico
atingir este nmero mximo de etapas, as primeiras etapas sero descartadas.

Nota: No possvel reorganizar a ordem das etapas no painel Histrico. No encare o

painel Histrico como um conjunto arbitrrio de comandos, mas como uma maneira de
exibir as etapas, na ordem em que foram efetuadas.
Para apagar a lista de histrico do documento:

No menu contextual do painel Histrico, escolha Limpar o histrico.

Este comando tambm limpar todas as informaes relacionadas aos comandos
Desfazer do documento; depois de escolher Limpar o histrico, no ser mais
possvel desfazer as etapas que tiverem sido limpas. Observe que o comando
Limpar o histrico no desfaz etapas; ele simplesmente remove o registro das
etapas da memria do Dreamweaver.

Princpios bsicos do Dreamweaver

89

Como utilizar outros painis do Dreamweaver

A rea de trabalho do Dreamweaver compreende vrios outros painis.
Destacamos apenas alguns destes painis:
O inspetor de cdigo exibe o cdigo utilizado pelos navegadores para exibir o
documento como uma pgina da Web. Para mostrar ou ocultar o inspetor de
cdigo, escolha Janela > Inspetor de cdigo.

As modificaes feitas na janela do documento sero transpostas imediatamente

para o inspetor de cdigo. Quando voc digitar HTML no inspetor de cdigo e
clicar fora do mesmo, as alteraes correspondentes aparecero na janela do
documento. Para obter mais informaes, consulte Como utilizar a visualizao
de cdigo (ou o inspetor de cdigo) na pgina 361.
Para a edio secundria dos tags HTML, possvel utilizar o Editor rpido de
tags em vez do inspetor de cdigo. Para exibir o Quick Tag Editor, pressione as
teclas Control e T (no Windows), ou Command e T (no Macintosh), ou escolha
Modificar > Quick Tag Editor. Para obter mais informaes, consulte Como
editar um tag HTML na visualizao do projeto na pgina 369.
O painel Referncia fornece

informaes detalhadas sobre o tag HTML e os

respectivos atributos com o qual estiver trabalhando. possvel abrir o painel
Referncia a partir do menu Janela, da barra do Iniciador ou do inspetor de
cdigo.
Por exemplo: possvel selecionar um tag img, clicar no boto Referncia, na barra
de ferramentas e, determinar quais atributos se aplicaro a ele (align, border, e
assim por diante). Para obter mais informaes, consulte Como utilizar o painel
Referncia do Dreamweaver na pgina 358.
permite depurar cdigo JavaScript do
cliente. possvel abrir o depurador JavaScript a partir do menu Janela. Para obter
mais informaes, consulte Como depurar o cdigo JavaScript na pgina 509.

O depurador JavaScript do Dreamweaver

90

Captulo 2

Como trabalhar com as cores

No Dreamweaver, muitas caixas de dilogo, assim como o inspetor de
propriedades de muitos elementos de pginas, contm uma caixa de cores, que
abre um seletor de cores. Utilize o seletor de cores para escolher uma cor para um
elemento da pgina.
Para escolher uma cor no Dreamweaver:

Clique em uma caixa de cores, em qualquer caixa de dilogo ou no inspetor de

propriedades.
O seletor de cores aparecer.

caixa de cores
do inspetor de
propriedades

Siga um dos procedimentos abaixo:

Utilize o conta-gotas, para selecionar uma amostra de cor na paleta. Todas as

cores nas paletas Cubos de cor (padro) e Tom contnuo so aceitas pela Web,
enquanto que as cores de outras paletas, no.

Utilize o conta-gotas para selecionar uma cor de qualquer lugar da tela,

inclusive fora das janelas do Dreamweaver. Se voc clicar na rea de trabalho ou
em outro aplicativo, o Dreamweaver selecionar a cor do local clicado, porm
possvel alternar para o outro aplicativo; neste caso, clique em uma janela do
Dreamweaver, para continuar a trabalhar neste programa, ou mantenha
pressionado o boto do mouse enquanto move do Dreamweaver para a rea de
trabalho, a fim de evitar sair do Dreamweaver.

Para aumentar a seleo de cores, utilize o menu pop-up situado no canto

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

Para limpar a cor sem ter que escolher outra cor, clique no boto Riscado.
Para abrir o seletor de cores do sistema, clique no boto Roda de cores.

Princpios bsicos do Dreamweaver

91

Sobre as cores aceitas pela Web

Em HTML, as cores so expressas como valores hexadecimais (#FF0000, por
exemplo) ou como nomes (red). Uma cor aceita pela Web ter a mesma aparncia
no Netscape Navigator e no Microsoft Internet Explorer, tanto nos sistemas do
Windows quanto do Macintosh que estiverem em execuo no modo de 256
cores. Na prtica, diz-se que h 216 cores comuns e que qualquer valor
hexadecimal que combine os pares 00, 33, 66, 99, CC ou FF (valores RGB 0, 51,
102, 153, 204 e 255, respectivamente) representa uma cor aceita pela Web.
Contudo, os testes revelam que h somente 216 cores aceitas pela Web. O Internet
Explorer no Windows no interpreta corretamente as cores #0033FF (0,51,255),
#3300FF (51,0,255), #00FF33 (0,255,51) e #33FF00 (51,255,0).
No Dreamweaver, as paletas Cubos de cor (padro) e Tom contnuo utilizam a
paleta de 216 cores aceitas pela Web; a seleo de uma cor de uma dessas paletas
exibir o valor hexadecimal a ela correspondente.
Para escolher uma cor fora da faixa de cores aceitas pela Web, abra o seletor de
cores do sistema, clicando no boto Roda de cores, situado no canto superior
direito do seletor de cores do Dreamweaver. O seletor de cores do sistema no se
limita s cores aceitas pela Web.
As verses para UNIX do Netscape Navigator utilizam uma paleta de cores
diferente daquela das verses para Windows e Macintosh. Se a programao for
exclusiva para os navegadores do UNIX (ou se o pblico-alvo for composto por
usurios do Windows ou Macintosh com monitores de 24 bits e usurios do
UNIX com monitores de 8 bits), considere a possibilidade de utilizar os valores
hexadecimais que combinam os pares 00, 40, 80, BF ou FF, que produzem as
cores aceitas pela Web para o SunOS.

Como definir as preferncias

O Dreamweaver oferece definies de preferncias que controlam a aparncia
geral da interface do usurio do programa, bem como as opes relativas a recursos
especficos, como as camadas, folhas de estilos, exibio de cdigo HTML e
JavaScript, editores externos e visualizao nos navegadores. Este guia do usurio
oferece informaes sobre determinadas opes das preferncias, juntamente com
o recurso ou tpico associado.
Este guia descreve apenas as opes mais comuns das preferncias. Para obter
informaes sobre uma determinada opo das preferncias, consulte o tpico
correspondente na Ajuda do Dreamweaver.

92

Captulo 2

Como definir as preferncias gerais

As preferncias gerais controlam a aparncia geral do Dreamweaver. Para alterar
essas preferncias, escolha Editar > Preferncias e, em seguida, clique em Geral. As
preferncias gerais dividem-se em duas subcategorias: opes de arquivo e de
edio. Para obter informaes detalhadas sobre essas preferncias, consulte a
Ajuda do Dreamweaver.
Como definir as preferncias de fontes/codificao
Utilize as preferncias de fontes/codificao para definir uma codificao da fonte
padro nos novos documentos e para definir as fontes que o Dreamweaver
utilizar para exibir cada codificao de fonte. A codificao de um documento
determinar como o documento ser exibido em um navegador. As definies de
fontes do Dreamweaver permitem trabalhar em um texto com a fonte e o
tamanho preferidos, sem afetar a aparncia do documento quando este for
visualizado por outras pessoas em um navegador.
Para alterar a codificao do documento atual:

Escolha Modificar > Propriedades da pgina e, em seguida, selecione uma

codificao no menu pop-up Codificao do documento.
Para alterar a codificao padro a ser utilizada na criao de novos documentos:

Escolha Editar > Preferncias, clique em Fontes/codificao, na lista de Categorias

e escolha uma codificao no menu pop-up Codificao padro.
Para definir as fontes a serem utilizadas em cada tipo de codificao:

Escolha Editar > Preferncias e clique em Fontes/codificao, na lista de

Categorias.

Selecione o tipo de codificao (como Ocidental (Latin1) ou japons, por

exemplo) na lista Definies de fontes e, em seguida, escolha as fontes a serem
utilizadas na codificao nos menus pop-up de fontes situados abaixo da lista
Definies de fontes.

Para obter mais informaes sobre as preferncias de fontes/codificao, consulte a

Ajuda do Dreamweaver.

Princpios bsicos do Dreamweaver

93

Como utilizar o Dreamweaver com outros

aplicativos
O Dreamweaver adapta o seu desenho da Web e o processo de desenvolvimento,
facilitando, assim, o trabalho com outros aplicativos. Para obter informaes sobre
o trabalho com outros aplicativos, como navegadores, editores de HTML e de
imagens, e ferramentas de animao, consulte os seguintes tpicos:

Para obter informaes sobre a utilizao do Dreamweaver com outros editores

de HTML, como HomeSite ou BBEdit, consulte Como utilizar os editores de
HTML externos na pgina 381.

possvel especificar os navegadores preferidos para visualizar o site. Consulte

Como visualizar nos navegadores na pgina 544.

O editor de imagens externo, como Macromedia Fireworks, pode ser iniciado

no Dreamweaver. Consulte Como utilizar um editor de imagens externo na
pgina 301.

possvel configurar o Dreamweaver para que inicie um editor diferente, de

acordo com o tipo de arquivo. Consulte Como iniciar um editor externo na
pgina 326.

Para obter informaes sobre a incluso de animao no seu site com os filmes
Flash, consulte Sobre o contedo Flash na pgina 328.

Para saber como tornar o site interativo utilizando os filmes Shockwave,

consulte Sobre os filmes Shockwave na pgina 338.

Personalizao bsica no Dreamweaver

Existem algumas tcnicas bsicas que podem ser utilizadas para personalizar o
Dreamweaver, a fim de adequ-lo s suas necessidades. Por exemplo: ao definir as
preferncias, criar os seus prprios atalhos de teclado e adicionar extenses,
possvel configurar a sua rea de trabalho, dispensando a necessidade de conhecer
cdigos complexos ou de editar arquivos de texto. Para obter mais informaes
sobre os recursos avanados de personalizao, consulte Como personalizar o
Dreamweaver na pgina 553.

94

Captulo 2

Como utilizar o editor de atalhos de teclado

Utilize o editor de atalhos de teclado para criar as suas prprias teclas de atalho,
editar os atalhos existentes ou utilizar os conjuntos de atalhos pr-determinados.
Para acessar o editor de atalhos de teclado:

Escolha Editar > Atalhos de teclado.

Aparecer a caixa de dilogo Atalhos de teclado, que contm diversas opes que
podem ser selecionadas e comandos que podem ser editados.
boto Conjunto
duplicado
boto Excluir o
conjunto
boto Salvar como
arquivo HTML
boto Renomear o
cone

Conjunto atual

um menu que exibe os conjuntos de atalhos pr-determinados

enviados com o Dreamweaver, assim como qualquer conjunto personalizado que
voc tiver definido. Como padro, o conjunto atual aquele que estiver sendo
utilizado pelo DW no documento. Os conjuntos pr-determinados se encontram
no alto do menu. Se estiver familiarizado com os atalhos do Dreamweaver 3, voc
poder utiliz-los escolhendo o conjunto pr-determinado do Dreamweaver 3.
Este conjunto apresenta os atalhos correspondentes aos recursos do Dreamweaver
3 e aos novos recursos do Dreamweaver 4.
Comandos

um menu pop-up que permite selecionar a categoria de comando a

ser editada. Por exemplo: possvel editar os comandos de menu, como Abrir o
arquivo, ou um dos comandos de edio de cdigo, como Ajustar as chaves.

Princpios bsicos do Dreamweaver

95

Lista de comandos exibe os comandos associados categoria selecionada no menu

pop-up Comandos, assim como os atalhos a eles atribudos. As categorias de

comandos Menu e menu Site exibiro esta lista como uma visualizao hierrquica
que reflete a estrutura dos menus. As outras categorias apresentam listas de
comandos, de acordo com os seus nomes (Sair do aplicativo, por exemplo).
Janela de teclados

exibe a lista de atalhos atribudos ao comando selecionado.

Pressionar as teclas

exibe a nova combinao de teclas a serem digitadas.

Sinal de adio adiciona

um novo atalho ao comando. Clique no sinal de adio

(+), para ativar o campo Atalhos. Digite um novo comando de tecla e clique em
Alterar, para adicionar um novo atalho de teclado a este comando. possvel
atribuir dois atalhos de teclado diferentes a cada comando.
Sinal de subtrao remove
Alterar aplica

o atalho selecionado da lista de atalhos.

o novo atalho ao comando e o adiciona lista de atalhos.

Clique no boto Duplicar, para duplicar o conjunto atual. possvel optar por
dar um nome ao conjunto ou manter o nome padro (o nome atual com o
sufixo copy).

Clique no boto Renomear, para renomear o conjunto.

Clique no boto Salvar como arquivo HTML, para salvar o conjunto em um
formato de tabela HTML, para fcil visualizao e impresso. possvel abrir o
arquivo HTML no navegador e imprimir os atalhos, para referncia rpida.

Clique no boto Excluir, para excluir cpias e conjuntos personalizados. No

possvel excluir os conjuntos ativos.
Para remover um atalho de um comando:

No menu pop-up Comandos, selecione a categoria de comando que contm o

atalho de comando a ser removido; por exemplo: comandos do menu Site.
A lista Comandos exibir os comandos associados quela categoria.

Na lista Comandos, selecione o atalho de comando a ser removido.

Ser exibida uma lista de atalhos atribudos aos comandos.

96

Captulo 2

Selecione os atalhos a serem removidos.

Clique no boto com o sinal de subtrao (-).

Para adicionar um atalho a um comando:

Selecione a categoria de comando que contm o comando desejado.

A lista Comandos exibir os comandos associados quela categoria.

Na lista Comando, selecione o comando.

Na lista atalhos, voc ver os atalhos que j haviam sido atribudos ao comando.

Clique no boto com o sinal de adio (+). O campo de entrada Atalhos se

tornar ativo e o ponto de insero se mover para o campo Pressionar as teclas.

Pressione a combinao de teclas que deseja adicionar; esta a combinao

aparecer no campo Pressionar as teclas.
Se houver um problema com o atalho (por exemplo: se a combinao de teclas
j tiver sido atribuda a um outro comando), aparecer um alerta, que permitir
atribuir novamente a combinao de teclas ou cancelar a operao.

Clique em Alterar. A nova combinao de teclas ser atribuda ao comando.

Para editar um atalho j existente:

Selecione a categoria de comando que contm o comando desejado.

A lista Comando exibir os comandos na categoria escolhida.

Na lista Comando, selecione o comando.

No campo Novo atalho, voc ver os atalhos que j haviam sido atribudos ao
comando. Se um comando apresentar mais de um atalho a ele atribudo, ser
necessrio selecionar o que deseja alterar.

Clique no campo Pressionar as teclas e digite a combinao de teclas desejada.

Clique no boto Alterar, para alterar o atalho.

Nota: Se houver um problema com a combinao de teclas, ser exibida uma mensagem
explicativa, logo abaixo do campo Nova entrada de atalho, e talvez no seja possvel
adicionar, excluir ou editar o atalho. Por exemplo: se a combinao de teclas j tiver sido
atribuda a um outro comando, ser exibido um texto de advertncia logo abaixo do campo
Nova entrada de atalho.

Princpios bsicos do Dreamweaver

97

Como adicionar extenses ao Dreamweaver

As extenses so novos recursos que podem ser facilmente adicionados ao
Dreamweaver 4. possvel utilizar muitos tipos de extenses; por exemplo:
existem extenses que permitem reformatar tabelas, efetuar conexes a bancos de
dados auxiliares ou que podem auxili-lo a escrever scripts para navegadores.
Para ter acesso s mais recentes extenses para o Dreamweaver, utilize o site de
intercmbio da Macromedia na Web, no seguinte endereo:
http://www.macromedia.com/exchange/dreamweaver/. Neste site, possvel
efetuar o login e o download das extenses (muitas das quais so gratuitas),
participar de grupos de discusso, visualizar as avaliaes e crticas dos usurios,
alm de instalar e utilizar o Package Manager. necessrio instalar o Package
Manager antes de efetuar o download das extenses.
O Package Manager funciona juntamente com o Dreamweaver e permite instalar
e gerenciar as extenses. Depois de ter efetuado o download do site de intercmbio
e instalado o Package Manager, inicie-o diretamente no Dreamweaver, escolhendo
Gerenciar as extenses, no menu Comandos.

98

Captulo 2

Para instalar e gerenciar as extenses:

Clique no link de download, localizado no site da Web correspondente

extenso desejada.
possvel optar por abrir e instal-la diretamente no site ou salv-la em disco.

Se optar por abri-la diretamente, o Package Manager efetuar a instalao

automaticamente.

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

pasta Downloaded Extensions, abaixo da pasta do Dreamweaver. Por exemplo:
Meu computador\c:\Arquivos de programas\Macromedia\Dreamweaver
4\Configuration\Extensions.
2

Clique duas vezes no arquivo do pacote de extenso ou escolha Instalar a

extenso, no menu Arquivo do Package Manager.
O arquivo ser instalado no Dreamweaver. Algumas extenses no se
encontram acessveis enquanto o Dreamweaver no for reinicializado; possvel
que haja uma solicitao para que voc saia do aplicativo e o reinicialize.

Utilize o Package Manager para remover extenses ou para examinar as

informaes sobre uma determinada extenso.

Princpios bsicos do Dreamweaver

99

100

Captulo 2

CAPTULO 3

Como planejar e definir o seu site

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Um site da Web um conjunto de documentos vinculados com atributos

compartilhados, como tpicos relacionados, uma concepo semelhante ou uma
finalidade compartilhada.
O Macromedia Dreamweaver uma ferramenta de criao e gerenciamento de
sites que pode ser utilizada para criar sites da Web completos, alm de documentos
individuais. Para obter os melhores resultados, projete e planeje o seu site da Web
antes de criar qualquer pgina contida nele.
Nota: Se no for possvel aguardar o momento certo para a criao dos documentos,
tente utilizar algumas das ferramentas de criao de documentos do Dreamweaver, para
criar um exemplo de documento. Consulte Como criar, abrir e salvar os documentos
HTML na pgina 158. Mas no tente criar os documentos definitivos antes de configurar
o site.

A primeira etapa para criar um site da Web o planejamento. Consulte Sobre o

planejamento e projeto de sites na pgina 101. A etapa seguinte envolve a
configurao da estrutura bsica do site; consulte Como utilizar o Dreamweaver
para definir um novo site na pgina 108. Se voc j tiver um site em um servidor
da Web e desejar utilizar o Dreamweaver para edit-lo, consulte Como configurar
um site remoto na pgina 131.

Sobre o planejamento e projeto de sites

No Dreamweaver, o termo site pode se referir a um site da Web ou a um local de
armazenamento de documentos pertencentes a um site da Web. Quando comear
a pensar na criao de um site da Web, voc deve seguir uma srie de etapas de
planejamento para se assegurar que o seu site funcionar. Mesmo se estiver
criando apenas uma home page pessoal, que ser vista apenas por amigos e famlia,
pode ser vantajoso planejar o site com cuidado, a fim de assegurar que todos
podero utiliz-lo com sucesso.

101

Como determinar os seus objetivos

A deciso de quais sero os objetivos do seu site a primeira etapa na criao de
um site da Web. Faa perguntas sobre o site a si mesmo e a seus clientes. O que
deseja alcanar possuindo um site da Web? Tome nota de seus objetivos, para que
se lembre deles durante o processo de criao. Os objetivos ajudam a concentrar e
destinar o seu site da Web s suas necessidades particulares.
Um site da Web que proporciona notcias sobre um tema especfico deve ter
aparncia e navegao diferentes de um site da Web destinado a vender produtos.
A complexidade dos seus objetivos afetar a navegao, a mdia utilizada (Flash,
Director e assim por diante) e at mesmo a aparncia e impresso causada pelo
site.
Como escolher um pblico-alvo
Aps decidir o que deseja alcanar com o seu site da Web, voc precisar decidir
quem deseja que o visite. Esta pode ser uma pergunta pouco importante, j que a
maioria das pessoas deseja que todo mundo visite o seu site da Web. No entanto,
difcil criar um site da Web que todas as pessoas do mundo iro utilizar. As pessoas
utilizam navegadores diferentes, se conectam em velocidades diferentes e podem
ou no possuir plug-ins de mdia. Todos estes fatores podem afetar o uso do seu
site. Por estes motivos, voc precisa determinar o seu pblico-alvo.
Pense nas pessoas que sero atradas ao seu site da Web ou quem espera atrair. Que
tipos de computadores voc acredita que elas usaro? Qual ser a plataforma
predominante (Macintosh, Windows, Linux, etc.)? Qual a velocidade de
conexo mdia (modem 33.6 ou DSL)? Que tipos de navegadores e tamanhos de
monitores estas pessoas estaro utilizando? Voc est criando um site de intranet
onde todos estaro utilizando o mesmo sistema operacional de computador e o
mesmo navegador? Todos estes fatores podem afetar muito a aparncia que a sua
pgina da Web tem para os seus visitantes.
Depois de ter escolhido o seu pblico e determinado que tipos de computadores,
velocidades de conexo e navegadores os seus visitantes utilizaro, voc pode
iniciar o seu projeto.
Digamos, por exemplo, que o seu pblico-alvo composto predominantemente
de usurios que possuem monitores de 17 polegadas e utilizam o Internet Explorer
3.0 ou verses mais avanadas deste. medida que projetar a sua pgina da Web,
voc dever testar o funcionamento do site no Internet Explorer da Microsoft
num computador com Windows e um tamanho de tela de 800 x 600 pixels.
Poucos visitantes devem utilizar o Netscape Navigator numa plataforma
Macintosh, mas voc deve assegurar que o seu site funcione nestes tipos de
computadores mesmo assim, at mesmo se a exibio no for exatamente a mesma
que a do pblico-alvo.

102

Captulo 3

Como criar sites para que haja compatibilidade com o

navegador
Ao criar um site, voc deve se lembrar de que h vrios navegadores da Web que
podero ser utilizados pelos seus visitantes. Se possvel, desenhe sites com ampla
compatibilidade com o navegador, levando em considerao as outras restries do
projeto.
So utilizados cerca de 25 navegadores da Web diferentes, sendo que a maioria
deles foi lanada em mais de uma verso. Mesmo que voc vise apenas o Netscape
Navigator e Microsoft Internet Explorer, que so utilizados pela maioria dos
usurios da Web, lembre-se de que nem todos tm a verso mais recente desses
navegadores. Se o site estiver na Web, mais cedo ou mais tarde algum ir visit-lo
utilizando o Netscape Navigator 2.0, o navegador que a AOL fornece aos seus
clientes ou algum navegador somente de texto como o Lynx.
Em algumas circunstncias, no necessrio criar sites compatveis com diversos
navegadores. Por exemplo: se o site estiver disponvel apenas na intranet de sua
empresa e voc souber que todos os funcionrios utilizam o mesmo navegador,
possvel otimizar o site de modo a ser compatvel com esse navegador. Da mesma
forma, se for criado contedo HTML para ser distribudo em CD-ROM junto
com um navegador, razovel supor que todos os seus clientes tero acesso a esse
determinado navegador.
Na maioria dos casos, para os sites da Web desenhados para visitas pblicas,
conveniente torn-los visveis atravs do maior nmero possvel de navegadores.
Escolha um ou dois navegadores como principais e desenhe o site visando-os, mas
tente explorar o site com outros navegadores de vez em quando, para evitar incluir
muito contedo incompatvel. Tambm possvel enviar uma mensagem para um
grupo de discusso, solicitando-lhes que visualizem o seu site. Esta pode ser uma
boa maneira de obter comentrios de um pblico variado.
Quanto mais sofisticado for o site em termos de layout, animao, contedo de
multimdia e interao menor ser a probabilidade de que seja compatvel com
diversos navegadores. Nem todos os navegadores podem executar o JavaScript, por
exemplo. Uma pgina contendo texto simples que no utiliza caracteres especiais
ser exibida sem problemas em qualquer navegador, porm essa pgina parecer
menos atraente do que aquelas que contm imagens, layout e forem interativas.
Tente equilibrar o projeto, para obter o mximo de efeito e compatibilidade com o
navegador.
Um procedimento til fornecer vrias verses de certas pginas importantes,
como a home page do site. Por exemplo: possvel desenhar uma verso com
moldura e outra sem moldura dessa pgina. Voc poder incluir na sua pgina da
Web um comportamento para direcionar automaticamente os visitantes que no
dispuserem de navegadores com suporte a molduras para a verso sem molduras.
Para obter mais informaes, consulte Como utilizar as aes de
comportamentos enviadas com o Dreamweaver na pgina 478.

Como planejar e definir o seu site

103

Como organizar a estrutura do site

O cuidado na organizao do site desde o incio pode, posteriormente, evitar
frustraes e economizar tempo. Se comear a criar documentos sem pensar em
que local da hierarquia da pasta eles devero ser armazenados, possvel que voc
tenha que lidar com uma pasta de difcil acesso e com demasiados arquivos, ou
que os arquivos relacionados estejam espalhados em pastas com nomes
semelhantes.
A maneira usual de se configurar um site envolve a criao de uma pasta no disco
local, que contm todos os arquivos do site (conhecido como o site local), e a
criao e edio de documentos contidos nesta pasta. Quando o site estiver pronto
para ser publicado e visualizado pelo pblico, estes arquivos podero, ento, ser
copiados para um servidor da Web. Esta abordagem melhor do que criar e editar
os arquivos no prprio site pblico ativo da Web, pois ela permite testar as
alteraes no site local antes de torn-las publicamente visualizveis e, em seguida,
quando o site estiver finalizado, efetuar o upload dos arquivos locais e atualizar
todo o site pblico de uma vez s.
Consulte Como utilizar o Dreamweaver para definir um novo site na
pgina 108, para coordenar o seu site local com o Dreamweaver. Depois que o site
local tiver sido definido com o Dreamweaver, voc estar capacitado, entre outras
coisas, a gerenciar os arquivos do site, manter um registro dos links e atualizar as
pginas.
Classifique o seu site em categorias. Coloque na mesma pgina as pginas que se
relacionarem. Por exemplo: os press releases, informaes de contato e
oportunidades de empregos em sua empresa podero ser armazenados em uma
pasta, enquanto que as pginas relativas ao seu catlogo on-line podero ser
armazenadas em outra pasta. Sempre que necessrio, utilize subpastas. Este tipo de
organizao facilitar a manuteno e navegao do seu site.

104

Captulo 3

Decida onde colocar itens como imagens e arquivos de som. Por

exemplo:
conveniente colocar todas as imagens em um nico local, para facilitar a
localizao das mesmas quando forem inseridas em uma pgina. Algumas vezes, os
criadores colocam todos os itens a serem utilizados em um site e que no forem
HTML em uma pasta denominada Propriedades. possvel que esta pasta
contenha outras pastas (para imagens, filmes Shockwave e arquivos de som, por
exemplo). Alternativamente, possvel que haja uma pasta Propriedades para cada
grupo de pginas relacionadas no site, se os diversos grupos no compartilharem
muitas propriedades.
Site 1

Site 2

meu_site1 (pasta raiz)

meu_site2 (pasta raiz)

Sobre_a_empresa

Sobre_a_empresa

Catlogo

Propriedades

Propriedades (do site inteiro)

ndice.html (home page)

Catlogo

Propriedades

ndice.html (home page)

Utilize a mesma estrutura nos sites locais e remotos. O site local e o site remoto na

Web devero ter exatamente a mesma estrutura. Se voc criar um site local
utilizando o Dreamweaver e, em seguida, efetuar o upload de tudo para o site
remoto, o Dreamweaver se encarregar de duplicar com exatido a estrutura local
no site remoto.

Como planejar e definir o seu site

105

Como criar a sua aparncia de desenho

Muito tempo ser economizado no processo, se o seu desenho e layout forem
planejados antes de iniciar o trabalho no Dreamweaver. Pode ser to simples como
criar um desenho de prottipo de acordo com a aparncia desejada do layout do
site numa folha de papel. Uma abordagem mais avanada seria criar um desenho
composto do site, utilizando aplicativos como o Macromedia Freehand ou
Fireworks. O importante ter um prottipo do layout e desenho, para que este
possa ser seguido mais tarde, quando o site estiver sendo construdo.
importante manter a coerncia no layout e projeto da sua pgina. do seu
interesse que os usurios possam clicar nas pginas do seu site sem ficarem
confusos, porque todas as pginas tm uma aparncia diferente ou a navegao
est posicionada num local diferente em cada pgina.
Como projetar o esquema de navegao
Um outro aspecto em que o planejamento de sites apresenta vantagens a
navegao. medida que cria o seu site, pense na experincia que voc deseja
proporcionar aos visitantes. Pense em como um visitante ao seu site poder se
mover de uma rea para outra. Considere os seguintes aspectos:
Voc est aqui. Os visitantes devem saber facilmente onde esto no seu site e
como retornar pgina de nvel superior.
A busca e os ndices facilitam

a localizao de quaisquer informaes buscadas

pelos visitantes.
Os comentrios fornecem uma maneira atravs da qual os visitantes podem entrar
em contato com o webmaster (quando necessrio) e com outras pessoas relevantes
associadas empresa ou ao site, caso haja qualquer problema com o site.

Projete a aparncia da sua navegao. A navegao deve ser coerente no site

inteiro. Se uma barra de navegao for colocada no alto da sua home page, procure
mant-la nesta posio em todas as pginas vinculadas.
O Dreamweaver possui duas ferramentas de navegao que podem ser utilizadas
para criar o esquema de navegao. Para obter mais informaes, consulte Links e
navegao na pgina 385.

106

Captulo 3

Como planejar e reunir as propriedades

Depois que souber a aparncia que o desenho e layout tero, possvel criar e
reunir as propriedades que sero necessrias. As propriedades podem ser itens
como imagens, texto ou mdia (Flash, Shockwave, entre outros). Antes de comear
a desenvolver o site, assegure-se de ter todos estes itens reunidos e prontos para
serem utilizados. Seno, voc ter que parar sempre o desenvolvimento, para
localizar uma imagem ou criar um boto.
Se estiver utilizando imagens e grficos de um site de clip-art ou eles estiverem
sendo criados por alguma outra pessoa, assegure-se de reuni-los e coloc-los numa
pasta do site (consulte Como organizar a estrutura do site na pgina 104). Se
estiver criando as propriedades voc mesmo, assegure-se de cri-las antes de iniciar
o desenvolvimento, incluindo todas as imagens necessrias, se estiver utilizando
imagens cambiveis. Em seguida, organize as propriedades, para que possa acesslas facilmente enquanto estiver criando o site no Dreamweaver.
O Dreamweaver pode facilitar a reutilizao de layouts e elementos de pgina em
vrios tipos de documentos, atravs da utilizao de modelos e bibliotecas. No
entanto, mais fcil criar novas pginas com modelos e bibliotecas do que apliclos a documentos existentes.
Utilize os modelos,

se souber que muitas de suas pginas utilizaro o mesmo

layout. Planeje e projete um modelo para tal layout e, em seguida, voc poder
criar novas pginas a partir do modelo. Se decidir alterar o layout de todas as
pginas, basta alterar o modelo.
Nota: Existem algumas restries quanto s alteraes que podem ser feitas aos
documentos que se baseiam em modelos. O melhor aproveitamento que se pode dar aos
modelos ocorre em ambientes de colaborao, para garantir que todos estejam utilizando
o mesmo layout de pgina. possvel que os itens de biblioteca ofeream uma maior
flexibilidade de uso fora dos ambientes de colaborao.
Utilize itens de biblioteca, se voc j souber que determinadas imagens ou outros
elementos aparecero em muitas pginas do site. Crie estes elementos com
antecedncia e transforme-os em itens de uma biblioteca. Se estes itens forem
alterados posteriormente, a nova verso atualizada aparecer em todas as pginas
que os utilizarem.

Para obter mais informaes sobre como reutilizar os layouts e elementos de uma
pgina, consulte Como reutilizar o contedo com os modelos e bibliotecas na
pgina 409.

Como planejar e definir o seu site

107

Como utilizar o Dreamweaver para definir

um novo site
Depois que a estrutura do site tiver sido criada (consulte Como organizar a
estrutura do site na pgina 104), voc dever designar o novo site no
Dreamweaver. A configurao deste site local no Dreamweaver significa que o
programa pode ser utilizado com FTP para efetuar o upload do site para um
servidor da Web, controlar automaticamente e manter os links e arquivos
compartilhados em colaborao. melhor definir o site local no Dreamweaver
antes de iniciar a criao das pginas.
O site local a estrutura do site que voc define no seu computador para conter
todas as suas pastas, propriedades e arquivos de um determinado site (consulte
Como organizar a estrutura do site na pgina 104).
A pasta raiz local do site dever se a pasta configurada especificamente para ele.
Uma boa abordagem organizacional consiste na criao de uma pasta denominada
Sites e na criao de pastas raiz locais dentro desta, uma para cada site a ser
utilizado.
Para criar um novo site:

Escolha Site > Novo site.

Na caixa de dilogo que aparecer, intitulada Definio do site, a categoria
Informaes locais estar selecionada.

108

Captulo 3

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. Utilize qualquer nome que preferir.
Ele no aparecer no navegador e servir apenas de referncia para voc.

No campo Pasta raiz local, especifique a pasta do disco local onde sero
armazenados os arquivos, modelos e itens de biblioteca do site. O Dreamweaver
resolve os links relativos raiz levando em conta esta pasta (consulte
Caminhos relativos raiz na pgina 388). Clique no cone correspondente
pasta, para procurar e selecionar a pasta, ou digite um caminho e o nome da
pasta no campo de texto. Se a pasta raiz local ainda no existir, crie-a na caixa
de dilogo de busca de arquivos.

Na opo Atualizar a lista de arquivos locais automaticamente, indique se

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

No campo Endereo HTTP, digite a URL que o site da Web concludo

utilizar, para que o Dreamweaver possa verificar os links no site que utilizam
URLs absolutas. Consulte Como verificar links numa pgina ou site na
pgina 546. Por exemplo: o endereo absoluto HTTP do site da Macromedia
na Web http://www.macromedia.com.

Na opo Cache, indique se deseja criar um cache local, para melhorar a

velocidade das tarefas de vinculao e gerenciamento do site. Se voc no
selecionar esta opo, o Dreamweaver o notificar novamente, sugerindo a
criao de um cache antes que ele crie o site. recomendvel que se selecione
esta opo, porque o painel Propriedades somente funciona se um cache for
criado. Para obter mais informaes sobre o painel Propriedades, consulte
Como gerenciar e inserir propriedades na pgina 237.
3

Clique em OK.

A janela Arquivos do site se abrir. Para obter mais informaes sobre a janela do
site e gerenciamento do site, consulte Gerenciamento de sites e colaborao na
pgina 113.
Posteriormente, quando o site estiver pronto para ser publicado em um servidor
remoto, voc dever incluir informaes adicionais relacionadas ao site. Para obter
informaes sobre os sites remotos, consulte Como configurar um site remoto
na pgina 131.

Como planejar e definir o seu site

109

Como editar um site da Web j existente:

possvel utilizar o Dreamweaver para editar um site j existente no seu disco
local, mesmo se o site original no tiver sido criado com o Dreamweaver.
Para editar um site da Web j existente:

Escolha Site > Definir os sites e clique em Novo, ou escolha Site > Abrir o site >
Definir os sites.
Na caixa de dilogo que aparecer, intitulada Definio 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. Utilize qualquer nome que preferir.
Ele no aparecer no navegador e servir apenas de referncia para voc.

No campo Pasta raiz local, especifique a pasta do disco local onde sero
armazenados os arquivos, modelos e itens de biblioteca do site. Clique no cone
correspondente pasta, para procurar e selecionar a pasta, ou digite um
caminho e o nome da pasta no campo de texto.

Na opo Atualizar a lista de arquivos locais automaticamente, indique se

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

No campo Endereo HTTP, digite a URL que o site da Web concludo

utilizar, para que o Dreamweaver possa verificar os links no site que utilizam
URLs absolutas. Consulte Como verificar links numa pgina ou site na
pgina 546. Por exemplo: o endereo absoluto HTTP do site da Macromedia
na Web http://www.macromedia.com.

Na opo Cache, indique se deseja criar um cache local, para melhorar a

velocidade das tarefas de vinculao e gerenciamento do site. Se voc no
selecionar esta opo, o Dreamweaver o notificar novamente, sugerindo a
criao de um cache antes que ele crie o site. recomendvel que se selecione
esta opo, porque o painel Propriedades somente funciona se um cache for
criado. Para obter mais informaes sobre o painel Propriedades, consulte
Como gerenciar e inserir propriedades na pgina 237.
3

110

Captulo 3

Clique em OK.

A janela Arquivos do site se abrir. Para obter mais informaes sobre a janela do
site e gerenciamento do site, consulte Gerenciamento de sites e colaborao na
pgina 113.

Como editar um site remoto

possvel utilizar o Dreamweaver para copiar um site remoto j existente (ou um
ramo deste) para o disco local e edit-lo a, mesmo se o site original no tiver sido
criado com o Dreamweaver.
Observe que, mesmo se pretender editar apenas uma parte do site remoto,
duplique localmente toda a estrutura da ramificao do site remoto, desde a raiz
do mesmo at os arquivos a serem editados. Por exemplo: se a pasta raiz do site
remoto (denominada public_html) contiver duas pastas (Projeto1 e Projeto2) e se
voc desejar trabalhar apenas com os arquivos HTML no Projeto1, no haver
necessidade de efetuar o download dos arquivos do Projeto2, porm ser
necessrio mapear a pasta raiz local para public_html, em vez de Projeto1.
Site remoto

Site local

pblico_html

pasta raiz local

(mapeie-a para pblico_html, e no
para Projeto1 ou Projeto1/HTML)

Projeto1

Propriedades

HTML

Projeto1
(deve estar presente no
site local; corresponde
a Projeto1 no site remoto)

HTML
(deve estar presente
no site local; corresponde
a Projeto1/HTML no site remoto)

Projeto2

Propriedades

HTML

Como planejar e definir o seu site

111

Para editar um site remoto j existente:

Crie uma pasta local que abrigar o site existente e defina-a como sendo a pasta
raiz local do site (consulte Como utilizar o Dreamweaver para definir um novo
site na pgina 108).

Defina um site remoto utilizando as informaes sobre o site j existente.

Consulte Como configurar um site remoto na pgina 131. Certifique-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 efetuar o download do 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 efetuar o seu download
no disco local. O Dreamweaver duplicar automaticamente o quanto for
possvel a estrutura do site remoto, posicionando o arquivo do qual se fez
download na poro direita da hierarquia do site. Ao editar apenas uma parte
de um site, opte preferencialmente por incluir os arquivos dependentes.
5

Prossiga como se estivesse criando um site a partir do zero: edite os

documentos, visualize e teste-os, e carregue-os novamente para o site remoto.

Para obter mais informaes sobre o gerenciamento de sites, consulte

Gerenciamento de sites e colaborao na pgina 113.

Para remover um site da lista de sites

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

Escolha Site > Definir os sites.

Selecione o nome do site.

Clique em Remover.
Aparecer uma caixa de dilogo, solicitando a confirmao da remoo.

112

Captulo 3

Clique em Sim, para remover o site da lista.

CAPTULO 4

Gerenciamento de sites e colaborao

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

O Macromedia Dreamweaver ajuda a organizar os arquivos dos seus sites locais e

remotos, atravs da janela do site. Ele permite duplicar a estrutura do site local em
um servidor remoto ou de um site da Web remoto no seu sistema local. Os links
relativos criados no site local continuaro a funcionar aps a transferncia de
arquivos para o site remoto, porque a estrutura dos dois sites ser idntica.
Um site local criado no Dreamweaver utilizando-se o comando Novo site, para
criar uma pasta raiz local para o site (ou tornando uma pasta existente a pasta raiz
local); consulte Como utilizar o Dreamweaver para definir um novo site na
pgina 108. Ao criar um novo site, voc estar definindo um site remoto,
possvel adicionar as informaes posteriormente, utilizando o comando Definir
os sites; consulte Como associar um servidor remoto a um site local na
pgina 132.
O Dreamweaver conta com alguns recursos para estruturar um site e transferir
arquivos de e para um servidor remoto. Quando os arquivos so transferidos entre
os sites locais e remotos, o Dreamweaver mantm paralelas as estruturas de pastas e
arquivos entre estes sites. Ao transferir arquivos entre os sites, o Dreamweaver
automaticamente criar as pastas necessrias, se ainda no exisitirem em um dos
sites. Os arquivos tambm podem ser sincronizados entre os sites locais e remotos;
o Dreamweaver copia os arquivos em ambos os diretrios conforme a necessidade
e remove os arquivos inteis, se houver algum.
O Dreamweaver contm recursos para facilitar o trabalho de colaborao em um
site da Web. possvel retirar e devolver os arquivos a um servidor remoto, de
maneira que os outros membros de uma equipe da Web possam saber quem est
trabalhando com um determinado arquivo. possvel adicionar Design Notes aos
arquivos, para compartilhar informaes com os membros da equipe sobre o
status e prioridade de um arquivo, e assim por diante. Tambm possvel utilizar o
recurso Relatrios de fluxo de trabalho, para executar relatrios relativos ao site,
exibir informaes sobre o status de retiradas e devolues de arquivos e procurar
as Design Notes anexadas aos arquivos.

113

O Dreamweaver pode ser integrado a alguns dos mais conhecidos aplicativos de

controle de origem e verso de arquivos. Para obter a integrao do controle de
origem, conecte-se aos bancos de dados SourceSafe e a outros sistemas de controle
de origem que oferecem suporte ao protocolo WebDAV. Contudo, observe que o
Dreamweaver no executa o controle de verso.
Uma vez que o seu site tiver sido publicado, qualquer pessoa de sua equipe poder
continuar a mant-lo, utilizando estas mesmas ferramentas. Antes e aps a
publicao do site, recomendvel manter um procedimento contnuo para a
soluo de quaisquer problemas encontrados no site. Para obter mais informaes,
consulte Como testar e publicar um site na pgina 541.

Sobre a janela do site

Utilize a janela do site para executar as operaes padro de manuteno de
arquivos, como, por exemplo, criar novos documentos HTML, visualizar, abrir e
transferir arquivos, criar pastas e excluir itens. Tambm possvel utilizar a janela
do site para transferir arquivos entre os sites locais e remotos, e para determinar o
layout da navegao do site utilizando o mapa do mesmo (consulte Como
configurar um site remoto na pgina 131 e Como utilizar o mapa do site na
pgina 124).

Como padro, o site remoto (ou mapa do site) aparecer no painel esquerdo,
enquanto que o site local ser mostrado no painel direito. Esta definio pode ser
alterada nas preferncias do site. Consulte Preferncias do site na pgina 117.

114

Captulo 4

Como utilizar os controles da janela do site

Para abrir a janela do site, escolha Janela > Arquivos do site. Utilize os seguintes
botes e opes da barra de ferramentas da janela do site para definir o que ser
exibido nesta janela e para transferir arquivos entre os sites local e remoto:

Visualizao dos arquivos do site exibe

a estrutura de arquivos do site local e

remoto nos painis da janela do site. As definies das preferncias determinaro o
site que ser exibido no painel da direita ou da esquerda; consulte Preferncias do
site na pgina 117. A visualizao dos arquivos do site constitui a visualizao
padro da janela do site.
Visualizao do mapa do site exibe um mapa grfico do site, levando em conta
como os documentos esto vinculados uns aos outros. Mantenha pressionado este
boto, para escolher no menu pop-up a opo Apenas o mapa ou Mapa e
arquivos.
O menu pop-up Site lista os sites por voc definidos. Para alternar entre diversos
sites, escolha um outro site da lista. Para adicionar um site ou editar as
informaes relativas a um site existente, escolha Definir os sites, na parte inferior
do menu (consulte Como configurar um site remoto na pgina 131).
Conectar/desconectar (disponvel com os protocolos FTP e WebDAV e com
SourceSafe) conecta-se ou desconecta-se do site remoto. Como padro, o

Dreamweaver se desconectar do site remoto depois de 30 minutos de ociosidade

(apenas no FTP). Para alterar o limite de tempo, escolha Editar > Preferncias, e
selecione Site.
Atualizar atualiza

as listas de diretrios locais e remotos. Utilize esse boto para

atualizar manualmente as listas de diretrios, caso seja cancelada a seleo das
opes Atualizar automaticamente a lista de arquivos locais ou Atualizar
automaticamente a lista de arquivos remotos, na caixa de dilogo Definio do site
(consulte Como associar um servidor remoto a um site local na pgina 132). Por
exemplo: voc no ver a lista de diretrios do site remoto enquanto no clicar no
boto Atualizar, se tiver montado uma unidade que contm um site remoto depois
da abertura da janela do site.

Gerenciamento de sites e colaborao

115

Obter o(s) arquivo(s) copia os arquivos selecionados do site remoto para o site local
(substituindo a cpia local do arquivo j existente, se houver). Se a opo Ativar a
devoluo e retirada de arquivos estiver ativada, as cpias locais sero somente de
leitura; os arquivos continuaro disponveis no site remoto, para que outros
membros da equipe possam retir-los. Se a opo Ativar a devoluo e retirada de
arquivos estiver desativada, a obteno de um arquivo transferir uma cpia com
os privilgios de leitura e gravao. Observe que os arquivos copiados so aqueles
selecionados no painel que estiver ativo na janela do site. Se o painel Remoto
estiver ativo, o arquivos remotos selecionados sero copiados para o site local; se o
painel Local estiver ativo, as verses remotas dos arquivos locais selecionados sero
copiadas para o site local. Consulte Como obter arquivos de um servidor remoto
na pgina 151.
Obter o(s) arquivo(s) copia os arquivos selecionados do site local para o site
remoto. Observe que os arquivos copiados so aqueles selecionados no painel que
estiver ativo na janela do site. Se o painel Local estiver ativo, o arquivos locais
selecionados sero copiados para o site remoto; se o painel Remoto estiver ativo, as
verses locais dos arquivos remotos selecionados sero copiadas para o site remoto.
Consulte Como colocar arquivos em um servidor remoto na pgina 152.
Nota: Se estiver adicionando um arquivo que ainda no exista no site remoto e a opo
Ativar a devoluo e retirada de arquivos estiver ativa, o arquivo ser adicionado ao site
remoto como retirado. Escolha a opo Devolver os arquivos, em vez de adicionar um
arquivo sem o status de retirada.
Retirar o(s) arquivo(s) transfere

uma cpia do arquivo do servidor remoto para o

site local (substituindo a cpia local do arquivo j existente, se houver) e marca
esse arquivo como tendo sido retirado do servidor. Esta opo no estar
disponvel se Ativar a devoluo e retirada de arquivos estiver desativada no site
atual. Consulte Como devolver e retirar os arquivos de um servidor remoto na
pgina 141.

Devolver o(s) arquivo(s) transfere uma cpia do arquivo local para o servidor
remoto, tornando-o disponvel para edio por outros usurios. O arquivo local se
tornar somente de leitura. Esta opo no estar disponvel se a opo Ativar a
devoluo e retirada de arquivos, na caixa de dilogo Definio do site, estiver
desativada no site. Consulte Como devolver e retirar os arquivos de um servidor
remoto na pgina 141.
Parar a tarefa atual abandona a atividade em curso, inclusive a obteno e
colocao de arquivos. O boto, um sinal octagonal vermelho de parada com um
'X' branco, aparecer no canto inferior direito da janela apenas quando houver
uma tarefa em andamento. Observe que talvez haja uma demora at que o
servidor processe a solicitao de parada. Por isso, a transferncia do arquivo
poder no ser interrompida imediatamente. Este boto aparecer apenas quando
houver uma tarefa em andamento.

O boto com um tringulo de reduo/expanso situado no canto inferior

esquerdo da janela do site permite reduzir ou expandir esta janela, exibindo um ou
dois painis.

116

Captulo 4

Preferncias do site
Escolha Editar > Preferncias, selecione Site e, em seguida, escolha uma dentre as
seguintes preferncias do site, para controlar os recursos de transferncia de
arquivos disponveis na janela do site .

Mostrar sempre especifica qual site (remoto ou local) ser sempre mostrado e em
qual painel da janela do site (esquerdo ou direito) os arquivos locais e remotos
aparecero. Como padro, o site local aparecer sempre direita. O pianel que no
for escolhido (o esquerdo, como padro) ser o painel mutvel: este painel poder
exibir o mapa do site ou os arquivos no outro site (o padro o site remoto).
Arquivos dependentes exibe uma solicitao para transferir os arquivos
dependentes (como imagens, folhas de estilos externas e outros arquivos
mencionados no arquivo HTML) que o navegador carregar junto com o arquivo
HTML. Como padro, as opes Solicitar na obteno/retirada e Solicitar na
colocao/devoluo esto selecionadas.
Nota: Para forar a solicitao Incluir os arquivos dependentes a aparecer quando essas
opes estiverem desmarcadas, pressione a tecla Alt (no Windows) ou a tecla Option (no
Macintosh) enquanto escolhe os comandos Obter, Colocar, Devolver ou Retirar.
Conexo de FTP determina

se a conexo ao site remoto ser terminada aps o

nmero especificado de minutos sem atividade.
Tempo limite do FTP especifica o nmero de segundos durante os quais o
Dreamweaver tentar estabelecer uma conexo com o servidor remoto. Se no
houver resposta aps o tempo especificado, o Dreamweaver exibir uma caixa de
dilogo de advertncia, alertando-o para esse fato.

Gerenciamento de sites e colaborao

117

Host da firewall especifica

o endereo do servidor proxy atravs do qual ser

estabelecida a conexo aos servidores externos, se voc no estiver atrs de uma
firewall. Caso contrrio, deixe esse espao em branco.
Nota: No caso de estar atrs de uma firewall, selecione a opo Utilizar a firewall, na caixa
de dilogo Definio do site. Consulte Como associar um servidor remoto a um site local
na pgina 132.
Porta da firewall especifica

a porta da firewall atravs da qual voc se conectar ao

servidor de FTP. Se a conexo for estabelecida atravs de uma porta diferente da
21 (o padro de FTP), digite o nmero aqui.
Opes de colocao: Salvar os arquivos antes de coloc-los indica que os
arquivos no salvos sero salvos automaticamente antes de serem colocados no site
remoto.
Definir os sites remete-o

caixa de dilogo Definir os sites, onde possvel editar

um site existente ou criar um novo site. Consulte Como associar um servidor
remoto a um site local na pgina 132.
possvel tambm definir 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/Configuration
(FTPExtensionMapMac.txt, no Macintosh). possvel modificar 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
definida nesse arquivo, o Dreamweaver transferir automaticamente o arquivo em
modo binrio.

Nota: No Macintosh, o arquivo FTPExtensionMapMac.txt tambm inclui informaes

sobre como mapear as extenses de arquivo para os criadores e tipos de arquivos do
Macintosh. Esse mapeamento permite que, a um arquivo do qual foi feito download, seja
atribudo o cone correto e que esse arquivo seja aberto pelo aplicativo adequado, quando
for clicado duas vezes no Localizador.

Observe que, quando um arquivo for transferido como ASCII, a definio de

preferncia de quebra de linha ser ignorada. Consulte Como definir as
preferncias de formatao de cdigo na pgina 374.

118

Captulo 4

Como exibir e abrir os arquivos na janela do

site
Utilize a janela do site para exibir os sites locais e remotos, adicionar ou remover
documentos do site ou para estabelecer a estrutura navegacional do site segundo
um mapa do site. Para obter mais informaes, consulte Sobre a janela do site na
pgina 114.
possvel definir cada uma das duas visualizaes da janela do site, para que
mostrem o site local, o site remoto ou um mapa grfico do site local. Por exemplo:
possvel exibir o site local em um painel e o site remoto em outro; ou o site local
na visualizao dos arquivos do site, em um painel, e a visualizao do mapa do
site, no outro painel. Para obter mais informaes sobre a exibio de mapas de
sites, consulte Sobre o mapa do site na pgina 123.
Como exibir os sites locais
A janela do site pode exibir o contedo tanto dos sites locais quanto dos remotos.
Os sites locais podem ser exibidos na janela do site como uma lista de arquivos,
um mapa visual ou ambos. Os sites remotos podem ser exibidos apenas como uma
lista de arquivos. Para poder exibir um site remoto, necessrio configur-lo;
consulte Como configurar um site remoto na pgina 131.
Para exbir os arquivos do site local, siga um dos procedimentos abaixo:

Escolha Janela > Arquivos do site.

Na janela do site, se o mapa do site estiver sendo exibido, clique no boto
Arquivos do site.

A janela do site exibir dois conjuntos de arquivos: um lado da janela

apresentar uma lista dos arquivos do site local, enquanto que o outro lado
apresentar uma lista dos correspondentes arquivos do site remoto.
Nota: Se voc estiver exibindo um site local que no possui um site remoto
correspondente, a visualizao Site remoto estar vazia.

Gerenciamento de sites e colaborao

119

Para exibir o mapa e os arquivos do site, siga um dos procedimentos abaixo:

Escolha Janela > Mapa do site. Se anteriormente, apenas o mapa tivesse sido
exibido, sem os arquivos do site, esta janela exibir apenas o mapa.

Na janela do site, clique no boto Mapa do site, ou mantenha pressionado o

boto do mouse com o ponteiro sobre o boto Mapa do site e, no menu popup, selecione Mapa e arquivos.

A janela do site exibe duas visualizaes: o site local como um mapa,

identificado por Navegao no site; e, dependendo de como as preferncias
tiverem sido definidas, os arquivos do site local (identificado por Pasta local) ou
os arquivos do site remoto (identificado por Site remoto).
Para exibir apenas o mapa do site:

Mantenha pressionado o boto do mouse com o ponteiro sobre o boto Mapa do

site e, no menu pop-up, selecione Apenas o mapa. Para obter mais informaes,
consulte Como utilizar o mapa do site na pgina 124.
Como alterar o layout da janela do site
Como padro, o site remoto (ou o mapa do site local) aparecer no lado esquerdo
da janela do site, enquanto que o site local aparecer no lado direito. possvel
alternar entre estas visualizaes.
Para alterar o layout da janela do site:

Escolha Editar > Preferncias e, em seguida, selecione a categoria Site.

Siga um dos procedimentos abaixo:

No menu Mostrar sempre, selecione Arquivos locais e, em seguida, escolha se

deseja exibir os arquivos locais no lado direito ou esquerdo da janela do site.
O site local aparecer no lado selecionado e o site remoto (ou o mapa do site)
aparecer no lado oposto. Quando esta opo for escolhida, os arquivos do site
local sero sempre mostrados na janela do site, mesmo quando a janela for
reduzida a um painel.

120

Captulo 4

 No menu Mostrar sempre, selecione Arquivos remotos e, em seguida, escolha se

deseja exibir os arquivos remotos no painel direito ou esquerdo.
O site remoto aparecer no lado selecionado e o site local (ou o mapa do site,
sempre local) aparecer no lado oposto. Quando esta opo for escolhida, os
arquivos do site remoto sero sempre mostrados na janela do site, mesmo
quando esta for reduzida a um painel.
3

Clique em OK, para aplicar as alteraes e fechar a caixa de dilogo

Preferncias.

Para alterar a rea de exibio:

Na janela do site, siga um dos procedimentos abaixo:

Arraste a barra de diviso que separa as duas visualizaes, para aumentar ou

diminuir a rea de exibio da janela direita ou esquerda da janela.

Utilize as barras de rolagem, na parte inferior da janela do site, para rolar pelo
contedo das visualizaes.

No mapa do site, arraste a seta acima de um arquivo para alterar o espao entre
os arquivos.
Para reduzir a janela do site a uma visualizao:

Clique no boto com um pequeno tringulo branco, no canto inferior esquerdo

da janela do site.
Nota: A visualizao que continuar visvel corresponder sua escolha de Mostrar
sempre, na caixa de dilogo Preferncias do site.

Para obter mais informaes sobre as preferncias relativas ao site, consulte

Preferncias do site na pgina 117.
Como trabalhar com os arquivos na visualizao dos arquivos
do site
Utilize a visualizao dos arquivos do site para exibir os sites locais e remotos como
listas de arquivos, abrir ou renomear arquivos, adicionar novas pastas ou arquivos
a um site ou atualizar a visualizao do site depois de concluir as alteraes.
Tambm possvel utilizar a visualizao de arquivos do site para determinar quais
arquivos (em cada um dos sites) foram atualizados desde a ltima vez em que
foram transferidos. Para obter mais informaes sobre a sincronizao do site local
com o remoto, consulte Como sincronizar os arquivos nos sites local e remoto
na pgina 154.

Gerenciamento de sites e colaborao

121

Para exibir os arquivos do site:

Siga um dos procedimentos abaixo:

Escolha Janela > Arquivos do site, para abrir a janela do site na visualizao dos
arquivos do site.

Na janela do site, clique no boto Arquivos do site.

Para abrir um arquivo na visualizao dos arquivos do site:

Clique duas vezes no cone do arquivo.

Para adicionar uma nova pasta ao site:

Certifique-se de que um arquivo ou pasta esteja selecionada na janela do site; a

nova pasta ser criada dentro da pasta selecionada ou na mesma pasta que o
arquivo selecionado.

Escolha Arquivo > Nova pasta, na janela do site (no Windows), ou Site > Exibir
os arquivos do site > Nova pasta (no Macintosh).
Tambm possvel acessar esta opo no menu contextual da janela do site.

Digite um nome para a nova pasta.

Para adicionar um novo arquivo ao site:

Certifique-se de que haja um arquivo ou pasta selecionada na janela do site; o

novo arquivo ser criado dentro da pasta selecionada ou na mesma pasta que o
arquivo selecionado.

Escolha Arquivo > Novo arquivo, na janela do site (no Windows), ou Site >
Exibir os arquivos do site > Novo arquivo (no Macintosh).
Tambm possvel acessar esta opo no menu contextual da janela do site.

Digite um nome para o novo arquivo.

Para renomear um arquivo ou pasta de um site:

Na janela do site, selecione o arquivo ou pasta a ser renomeada e siga um dos

procedimentos abaixo, para ativar o campo de nome ao lado do arquivo ou
pasta:

Escolha Arquivo > Renomear (no Windows), ou Site > Renomear (no
Macintosh)

Clique no arquivo, faa uma pausa e, em seguida, clique novamente.

2

122

Captulo 4

Digite o novo nome e pressione a tecla Enter.

Para atualizar a visualizao dos 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 retirados:

Escolha Editar > Selecionar os arquivos retirados, na janela do site (no Windows),
ou Site > Exibir os arquivos do site > Selecionar os arquivos retirados (no
Macintosh).
Para localizar e selecionar os arquivos locais mais recentes:

Escolha Editar > Selecionar um local mais novo, na janela do site (no Windows),
ou Site > Exibir os arquivos do site > Selecionar um local mais novo (no
Macintosh).
Para localizar e selecionar os arquivos remotos mais recentes:

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

Sobre o mapa do site

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

Gerenciamento de sites e colaborao

123

Como utilizar o mapa do site

necessrio definir uma home page correspondente ao site antes de exibir o mapa
do mesmo. A home page do site o ponto de partida do mapa.
Para definir a home page do site:

Escolha Site > Definir os sites.

Escolha Novo ou Editar, para definir um novo site ou abrir um site j existente,
respectivamente.
Aparecer a caixa de dilogo Definio do site.

Selecione Layout do mapa do site.

Clique no cone da pasta, para procurar uma home page para o site, ou digite
um caminho de arquivo no campo Home page.

Para exibir um mapa de site, siga um dos procedimentos abaixo:

Escolha Janela > Mapa do site, a fim de abrir a janela do site.

Na janela do site, clique no boto Mapa do site.
Nota: Se nenhuma home page tiver sido definida ou se no for possvel ao Dreamweaver
localizar uma pgina denominada index.html ou index.htm no site para utilizar como home
page, aparecer uma caixa de dilogo, solicitando a seleo de uma home page clicando
em Definir os sites. Escolha o site desejado e, em seguida, clique em Editar. A seguir,
selecione Layout do mapa do site, na caixa de dilogo Definio do site.

O mapa do site mostrar os arquivos HTML e outros elementos da pgina como

cones. Os links sero exibidos na ordem em que forem detectados no cdigofonte HTML.

O texto exibido em vermelho indica um link rompido.

O texto exibido em azul e marcado com um cone representando um globo
indica um arquivo em um outro site ou um link especial (como um link de
correio eletrnico ou de script).

Uma marca de seleo verde indica um arquivo retirado por voc.

Uma marca de seleo vermelha indica um arquivo retirado por outro usurio.
Um cone com um cadeado indica um arquivo somente de leitura (no
Windows) ou bloqueado (no Macintosh).

124

Captulo 4

Como padro, o mapa exibe dois nveis da estrutura do site, a partir da home page
atual. Clique nos sinais de adio (+) ou subtrao (), ao lado de uma pgina, a
fim 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
modificar o layout do mapa do site na pgina 125 e Como mostrar e ocultar os
arquivos do mapa do site na pgina 128.
Como modificar o layout do mapa do site
Utilize as opes do Layout do mapa do site para personalizar a aparncia do mapa
do site. possvel especificar a home page, o nmero de colunas exibidas, se os
identificadores de cones exibiro o nome do arquivo ou o ttulo da pgina, e
decidir se os arquivos ocultos e dependentes sero mostrados.
Para modificar o layout do mapa do site:

Abra a caixa de dilogo Definio do site, utilizando um dos seguintes mtodos:

Escolha Site > Definir 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 > Visualizao do mapa do site
> Layout (no Macintosh).
2

Clique no cone da pasta, para procurar uma home page para o site, ou digite
um caminho de arquivo no campo Home page. necessrio que a home page
esteja no site local.
Se voc no especificar 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.

Gerenciamento de sites e colaborao

125

Escolha uma dentre as opes de Coluna:

No campo Nmero de colunas, digite um nmero, para definir quantas pginas

sero exibidas por linha na janela do mapa do site.

No campo Largura da coluna, digite um nmero, para definir a largura, em

pixels, das colunas do mapa do site.
4

Em Identificadores de cones, selecione se o nome exibido com os cones dos

documentos no mapa do site ser representado por um nome de arquivo ou
ttulo de pgina.

Em Opes, selecione quais arquivos sero exibidos no mapa do site:

Escolha Exibir os arquivos marcados como ocultos, para exibir os arquivos

HTML que estiverem marcados como ocultos pelo usurio no mapa do site. Se
uma pgina estiver oculta, o seu nome e os links a ela sero exibidos em itlico.
Para obter informaes sobre como ocultar os arquivos, consulte Como
mostrar e ocultar os arquivos do mapa do site na pgina 128.

Escolha Exibir os arquivos dependentes, para mostrar todos os arquivos

dependentes na hierarquia do site. Um arquivo dependente uma imagem ou
outro elemento diferente de HTML, que carregado pelo navegador junto
com a pgina principal.
Como trabalhar com as pginas no mapa do site
Durante o trabalho no mapa do site, possvel selecionar pginas, abrir uma
pgina para edio, adicionar novas pginas ao site, criar links entre arquivos e
alterar o ttulo da pgina.
Para selecionar vrias pginas no mapa do site, siga um dos procedimentos
abaixo:

Mantendo a tecla Shift pressionada, clique para selecionar vrias pginas.

Inicie em uma parte em branco da visualizao e arraste um grupo de arquivos,
para selecion-los.

Pressione a tecla Control (no Windows) ou Command (no Macintosh) e d um

clique, para selecionar pginas no-contguas.
Para abrir uma pgina para edio, siga um dos procedimentos abaixo:

Clique duas vezes no arquivo.

Selecione o arquivo e escolha Arquivo > Abrir a seleo (no Windows) ou Site >
Abrir (no Macintosh).

126

Captulo 4

Para adicionar um arquivo j existente ao site, siga um dos procedimentos abaixo:

Arraste um arquivo do Windows Explorer ou do Localizador do Macintosh e

solte-o em um arquivo do mapa do site. A pgina ser adicionada ao site e um
link ser criado entre ela e o arquivo no qual for solta.

Selecione Site > Link a um arquivo existente (no Windows), ou Site >
Visualizao do mapa do site > Link a um arquivo existente (no Macintosh).
Para criar um novo arquivo e adicionar um link:

Selecione um arquivo HTML no mapa do site e, depois, siga um dos

procedimentos abaixo:

Escolha Site > Link a um novo arquivo (no Windows), ou Site > Visualizao
do mapa do site > Link a um novo arquivo (no Macintosh).

Escolha Link a um novo arquivo, no menu contextual.

2

Na campo Nome do arquivo da caixa de dilogo Link a um novo arquivo,

digite um nome de arquivo.

No campo Ttulo, digite um ttulo de pgina para o arquivo.

No campo Texto do link, digite o texto do link que conecta o arquivo

selecionado ao novo arquivo. O texto e o link aparecero no arquivo
selecionado.

Clique em OK.
O arquivo ser salvo na mesma pasta que o arquivo selecionado. Se for
adicionado um novo arquivo a uma ramificao oculta, o novo arquivo tambm
estar oculto. Consulte Como mostrar e ocultar os arquivos do mapa do site
na pgina 128.

Para modificar o ttulo de uma pgina:

Certifique-se de que a opo Mostrar os ttulos das pginas esteja selecionada.

Escolha Exibir > Mostrar os ttulos das pginas (no Windows), ou Site >
Visualizao do mapa do site > Mostrar os ttulos das pginas (no Macintosh).

Siga um dos procedimentos abaixo:

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).
Nota: Durante o trabalho na janela do site, o Dreamweaver atualizar automaticamente
todos os links aos arquivos cujos nomes tiverem sido modificados.

Gerenciamento de sites e colaborao

127

Para alterar a home page, siga um dos procedimentos abaixo:

Na visualizao Pasta local da janela do site, clique no arquivo a ser alterado

para home page e escolha Definir como home page, no menu contextual.

Selecione um arquivo na janela do site e escolha Site > Nova home page (no
Windows), ou Site > Visualizao do mapa do site > Nova home page (no
Macintosh), para criar uma nova home page.

Na visualizao Pasta local da janela do site, clique no arquivo a ser alterado

para home page e escolha Site > Definir como home page (no Windows), ou
Site > Visualizao do mapa do site > Definir como home page (no Macintosh),
para transformar uma pgina existente em home page.

Escolha Site > Definir os sites e clique em Editar. Selecione Layout do mapa do
site, na caixa de dilogo Definio do site.
Para atualizar a visualizao do mapa do site depois de ter concludo as
alteraes:

Clique em qualquer ponto do mapa do site, para cancelar a seleo dos

arquivos.

Escolha Exibir > Atualizar o local (no Windows), ou Site > Visualizao do
mapa do site > Atualizar o local (no Macintosh).

Como mostrar e ocultar os arquivos do mapa do site

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

128

Captulo 4

No mapa do site, selecione um ou mais arquivos.

Escolha Exibir > Mostrar/ocultar o link (no Windows), ou Site > Visualizao
do mapa do site > Mostrar/ocultar o link (no Macintosh)

Para mostrar ou ocultar os arquivos marcados como ocultos, siga um dos

procedimentos abaixo:

Escolha Exibir > Mostrar os arquivos marcados como ocultos (no Windows),
ou Site > Visualizao do mapa do site > Mostrar os arquivos marcados como
ocultos (no Macintosh).

Escolha Exibir > Layout (no Windows), ou Site > Visualizao do mapa do site
> Layout (no Macintosh), para abrir a caixa de dilogo Definio do site, e
selecionar a opo Exibir os arquivos marcados como ocultos.
Como padro, os arquivos dependentes j esto ocultos. possvel optar por
mostr-los ou no no mapa do site.
Para mostrar os arquivos dependentes, siga um dos procedimentos abaixo:

Escolha Exibir > Mostrar os arquivos dependentes (no Windows), ou Site >
Visualizao do mapa do site > Mostrar os arquivos dependentes (no
Macintosh).

Escolha Exibir > Layout (no Windows) ou Site > Visualizao do mapa do site
> Layout (no Macintosh), para abrir a caixa de dilogo Definio do site, e
selecionar a opo Exibir os arquivos dependentes.
Para desmarcar os arquivos marcados como ocultos:

No mapa do site, selecione um ou mais arquivos.

Escolha Exibir > Mostrar os arquivos marcados como ocultos (no Windows),
ou Site > Visualizao do mapa do site > Mostrar os arquivos marcados como
ocultos (no Macintosh).

Escolha Exibir > Mostrar/ocultar o link (no Windows), ou Site > Visualizao
do mapa do site > Mostrar/ocultar o link (no Macintosh)

Como exibir o site a partir de uma ramificao

possvel exibir os detalhes de uma determinada seo de um site, tomando como
ponto de referncia uma das ramificaes do mapa do site.
Para exibir uma ramificao diferente:

Selecione a pgina a ser exibida e escolha Exibir > Exibir como raiz (no Windows),
ou Site > Visualizao do mapa do site > Exibir como raiz (no Macintosh).
O mapa do site ser redesenhado na janela como se a pgina especificada 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 especificada. Selecione qualquer item nesse
caminho para exibir o mapa do site a partir desse nvel, clicando uma vez.

Gerenciamento de sites e colaborao

129

Para expandir ou contrair os ramos:

Clique nos sinais de adio (+) ou subtrao (), para expandir ou reduzir a
ramificao, respectivamente.
Como salvar o mapa do site
possvel salvar o mapa do site como uma imagem e, em seguida, exibi-la (ou
imprimi-la) em um editor de imagens.
Para criar um arquivo de imagem do mapa do site atual:

No mapa do site, siga um dos procedimentos abaixo:

No Windows, escolha Arquivo > Salvar o mapa do site. Na caixa de dilogo

Salvar o mapa do site, digite um nome no campo Nome do arquivo. No menu
pop-up Tipo de arquivo, selecione .bmp ou .png.

No Macintosh, selecione Site > Visualizao do mapa do site > Salvar o mapa
do site > Salvar o mapa do site como PICT, ou Site > Visualizao do mapa do
site > Salvar o mapa do site > Salvar o mapa do site como JPEG.
2

Escolha uma localizao, digite um nome para a imagem e clique em Salvar.

Como localizar arquivos na janela do site

possvel procurar um arquivo nos sites local e remoto a partir das janelas do
documento e do site. Para obter mais informaes sobre como procurar e
substituir arquivos, consulte Como procurar e substituir texto, tags e atributos
na pgina 280.
Para exibir a janela do site, escolha Janela > Arquivos do site.
Para localizar um arquivo no site local:

Selecione o arquivo na visualizao Site remoto, na janela do site, ou abra o

arquivo em uma janela do documento.

Escolha Site > Localizar no site local. Apenas no Windows, se a janela do site
estiver ativa, escolha Editar > Localizar no site local.
O arquivo ser realado na pasta Local da janela do site.

130

Captulo 4

Para localizar um arquivo no site remoto:

Selecione o arquivo na pasta Local, na janela do site, ou abra o arquivo em uma

janela do documento.

Escolha Site > Localizar no site remoto. Apenas no Windows, se a janela do site
estiver ativa, escolha Editar > Localizar no site remoto. Tambm possvel
selecionar o arquivo na pasta Local e clic-lo com o boto direito do mouse (no
Windows), ou clicar nele mantendo a tecla Control pressionada (no
Macintosh) e escolher a opo Localizar no site remoto, no menu contextual.
O arquivo ser realado na visualizao Site remoto, na janela do site.

Nota: Se, enquanto a janela do documento estiver ativa, for selecionado Site > Localizar no
site local, ou Site > Localizar no site remoto, e o arquivo no fizer parte do site que estiver
aberto, o Dreamweaver tentar determinar a qual dos sites definidos localmente pertence
o arquivo; se ele pertencer a apenas um site local, o Dreamweaver abrir este site e, em
seguida, procurar nele o arquivo.

Como configurar um site remoto

Para poder configurar um site remoto, necessrio criar um site local (que poder,
ento, ser associado ao site remoto). Consulte Como utilizar o Dreamweaver para
definir um novo site na pgina 108.
A prxima etapa da configurao 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 configurado
para trabalhar com pginas da Web (na Internet ou intranet); pergunte ao
administrador de sistemas ou ao cliente qual o nome desse servidor, e descubra
como transferir os arquivos para ele.
Em particular, determine se o FTP ser utilizado para estabelecer a conexo com o
servidor, ou se o servidor poder ser montado em sua rea de trabalho como uma
unidade de disco acessvel atravs da rede. Se a conexo for estabelecida com o
FTP, procure saber o nome do servidor de FTP e determine o diretrio do host,
assim como as informaes relativas ao login e senhas.
Ao reunir essas informaes, utilize o comando Definir os sites, para associar o
servidor ao seu site local. Caso surjam problemas na configurao do site remoto,
consulte Como solucionar problemas de configurao do site remoto na
pgina 138.
Depois que o site remoto estiver configurado, ser possvel efetuar o upload ou
download dos arquivos para ele, caso j haja arquivos no site. Consulte Como
utilizar as opes de devoluo e retirada de arquivos na pgina 139 e Como
obter e colocar arquivos na pgina 151.

Gerenciamento de sites e colaborao

131

Como associar um servidor remoto a um site local

Aps criar um site local, utilize o comando Definir os sites, para adicionar ou
alterar as informaes relativas ao servidor remoto e s preferncias de devoluo/
retirada.
Para associar um servidor remoto a um site local existente:

Escolha Definir os sites, no menu pop-up Sites atuais, na janela do site, ou

selecione Site > Definir os sites.

Aparecer uma caixa de dilogo com uma lista dos sites definidos atuais; escolha
um site existente e clique em Editar.
Se no houver sites definidos, crie um site local antes de continuar; consulte
Como utilizar o Dreamweaver para definir um novo site na pgina 108.

Na lista de categorias esquerda, clique em Informaes remotas.

Escolha uma dentre as seguintes opes de Acesso ao servidor:

Utilize nenhum, caso no planeje efetuar o upload do site para 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 seu computador
local. Clique no cone correspondente pasta, para procurar e selecionar a pasta
do servidor na qual esto armazenados os arquivos do site. Se voc desejar que o
painel Remoto da janela do site atualize automaticamente os arquivos conforme
forem adicionados e excludos, selecione a opo Atualizar automaticamente a
lista de arquivos remotos; para aumentar a velocidade de cpia de arquivos para
o site remoto, no selecione essa opo. Para atualizar manualmente a janela do
site a qualquer momento, clique no boto Atualizar, na janela do site. Clique
em OK e ignore o restante desse procedimento.
Nota: Para atualizar manualmente apenas o painel Remoto, escolha Exibir > Atualizar o
remoto, na janela do site (no Windows), ou Site > Visualizao dos arquivos do site >
Atualizar o remoto (no Macintosh).

Utilize a opo FTP, se a conexo ao servidor da Web for estabelecida atravs do

protocolo FTP.

132

Captulo 4

Para se conectar a um servidor da Web utilizando o FTP:

Digite o nome do host de FTP para o qual deseja efetuar o upload dos arquivos
do site da Web.
O nome do host de FTP o nome completo da Internet de um sistema de
computador, como ftp.mindspring.com. Digite o nome completo do host sem
qualquer texto adicional; especialmente, no adicione um nome de protocolo
antes do nome do host. Por exemplo:

Correto: ftp.mindspring.com
Incorreto: ftp://ftp.mindspring.com
Incorreto: mindspring.com
2

Digite o nome do diretrio do host no site remoto onde sero armazenados os

documentos que estaro visveis para o pblico. Consulte Como determinar o
diretrio do host do site remoto (apenas no FTP) na pgina 134.

Digite o nome de login e a senha utilizados para estabelecer a conexo ao

servidor de FTP.
Como padro, o Dreamweaver salvar a sua senha. Cancele a seleo de Salvar,
para ser notificado a digitar uma senha sempre que estabelecer conexo ao
servidor remoto.

Selecione as opes de firewall adequadas ao seu site:

Selecione a opo Utilizar a firewall, se estiver se conectando ao servidor remoto

de trs de uma firewall. Par obter mais informaes sobre as opes de firewalls,
consulte Como associar um servidor remoto a um site local na pgina 132.

Se a configurao de firewall necessitar da utilizao de FTP passivo (que

permite ao software local configurar a conexo do FTP, em vez de solicitar que
o servidor remoto que o faa), selecione Utilizar FTP passivo. Caso no tenha
certeza, se informe com o administrador do sistema.
5

Clique em OK.

Gerenciamento de sites e colaborao

133

Como determinar o diretrio do host do site remoto (apenas

no FTP)
O diretrio do host especificado na caixa de dilogo Definio do site deve ser o
mesmo que a pasta raiz do site local. Se a estrutura do site remoto no coincidir
com a do site local, os seus arquivos sero carregados para o local incorreto e no
estaro visveis para os visitantes do site. Os caminhos at as imagens e links
tambm se rompero.
Neste caso, no deveria
ser o Diretrio do host

n
sim
no

No deveria ser o
Diretrio do host
Deveria ser o Diretrio
do host

necessrio que o diretrio raiz remoto exista, para que o Dreamweaver possa se
conectar a ele. Caso no haja um diretrio raiz para o seu site no servidor remoto,
crie-o antes de tentar estabelecer a conexo ou pea ao administrador do servidor
para criar um diretrio raiz, se no puder faz-lo.
Se estiver em dvida sobre o que digitar no campo Diretrio do host, deixe-o em
branco. Em alguns servidores, o diretrio raiz ser idntico quele com o qual voc
estabeleceu a primeira conexo com o FTP. Para descobrir isso, conecte-se ao
servidor. Se aparecer uma pasta com um nome semelhante a public_html, ou
www ou o seu nome de login na visualizao de arquivos remotos, na janela do
site, este ser provavelmente o diretrio a ser utilizado no campo Diretrio do
host. Anote o nome do diretrio, desconecte-se e reabra a caixa de dilogo
Definio do site. Em seguida, digite o nome do diretrio no campo Diretrio do
host e conecte-se de novo.

134

Captulo 4

Sobre a integrao WebDAV e SourceSafe

O Dreamweaver permite acessar aplicativos de controle de origem e verso de
arquivos na janela do site. possvel estabelecer conexes aos bancos de dados e
servidores SourceSafe, alm de outros sistemas de controle de origem que
oferecem suporte ao protocolo WebDAV.
Utilizando a caixa de dilogo Definio do site, possvel selecionar um tipo de
conexo ou sistema de controle de origem. Uma vez conectado, possvel utilizar
os recursos de compartilhamento de arquivos do Dreamweaver, como Devolver/
retirar, Atualizar, Obter e Colocar, alm das Design Notes, para acessar os recursos
correspondentes do seu prprio sistema de controle de origem.
Nota: Para poder utilizar este recurso, necessrio que o Visual SourceSafe esteja
instalado no sistema ou que voc conte com o acesso a um sistema com suporte do
WebDAV.

Como utilizar o Dreamweaver com o protocolo WebDAV

possvel utilizar o Dreamweaver para estabelecer uma conexo que utilize o
protocolo WebDAV (Web-based Distributed Authoring and Versioning) se o
sistema oferecer suporte a este protocolo. Dois exemplos de servidores compatveis
com o WebDAV atualmente disponveis so o Microsoft Internet Information
Server (IIS) 5.0 e o Apache Web Server.
Para se conectar a um site utilizando o protocolo WebDAV:

Escolha Site > Definir os sites.

Na caixa de dilogo Definir os sites, selecione Editar.

Na caixa de dilogo Definio do site, selecione a categoria Informaes

remotas.

No menu pop-up Acesso, escolha WebDAV.

Se desejar, selecione a opo Retirar os arquivos na abertura, para retirar

automaticamente os arquivos na abertura.

Clique em Definies.

Aparecer a caixa de dilogo Conexo WebDAV.

Gerenciamento de sites e colaborao

135

No campo URL, digite a URL completa at o diretrio do servidor WebDAV

ao qual deseja se conectar.
Esta URL inclui o protocolo, porta e diretrio (se for diferente do diretrio
raiz). Por exemplo: http://apache1/WebDAV/meu site.

Digite o seu nome de usurio e senha nos campos apropriados.

Estas informaes se destinam autenticao do servidor e no esto
relacionadas ao Dreamweaver. Se estiver em dvida quanto ao seu nome de
usurio e senha, informe-se com o administrador do sistema ou webmaster.

No campo correio eletrnico, digite o seu endereo de correio eletrnico.

Este campo necessrio, sendo utilizado para identificar a propriedade do
servidor WebDAV. Ele aparecer na janela do site, para fins de contato.

10

Clique em Salvar a senha, para armazenar a senha. Saia do Dreamweaver.

A cada nova sesso que for iniciada, a senha continuar salva.

11

Clique em OK.

12

Escolha Site > Conectar, ou clique no boto Conectar, na barra de ferramentas

da janela do site, para se conectar ao site remoto. Para se desconectar, escolha
Site > Desconectar, ou clique no boto Desconectar.

Uma vez conectado, voc poder utilizar os recursos de compartilhamento de

arquivos do Dreamweaver, como devolver ou retirar arquivos, e as Design Notes,
entre outros.
possvel alterar as informaes relativas conexo a qualquer momento,
seguindo as etapas enumeradas e digitando as novas informaes na caixa de
dilogo Conexo WebDAV.
Como utilizar o Dreamweaver com o Visual SourceSafe
A partir da janela do site do Dreamweaver, possvel acessar um banco de dados
existente do Visual SourceSafe (VSS). Uma vez conectado, voc poder utilizar os
recursos de transferncia de arquivos do Dreamweaver.
Nota: Para poder utilizar este recurso com o Windows, necessrio contar com a verso 6
do Microsoft Visual SourceSafe Client instalada. Para poder utilizar este recurso no
Macintosh, necessrio contar com a verso 1.1.0 do cliente MetroWerks SourceSafe
instalada. Os usurios do MetroWerks Visual SourceSafe podem acessar os bancos de
dados da verso 5.0 do Microsoft SourceSafe, mas no os da verso 6.0. Se desejar
garantir o acesso de toda a sua equipe a qualquer banco de dados VSS em todas as
plataformas, utilize um banco de dados da verso 5.0. Para obter mais informaes,
consulte a documentao do SourceSafe.

136

Captulo 4

Para se conectar a um banco de dados SourceSafe:

Na caixa de dilogo Definio do site, selecione a categoria Informaes

remotas.

No menu pop-up Acesso, escolha Banco de dados SourceSafe.

Se desejar, selecione a opo Retirar os arquivos na abertura, para retirar

automaticamente os arquivos na abertura.

Clique em Definies.

Aparecer uma caixa de dilogo Abrir o banco de dados SourceSafe.

5

No campo Caminho do banco de dados, clique em Procurar, para procurar o

banco de dados VSS desejado, ou digite o caminho completo do arquivo.
O arquivo escolhido se transformar no arquivo srcsafe.ini e ser utilizado para
inicializar o SourceSafe.

No campo Projeto, digite o projeto do banco de dados VSS que deseja utilizar
como diretrio raiz do site remoto.

Nos campos Nome de usurio e Senha, digite o seu nome de usurio e senha
para login no banco de dados selecionado.
Se no souber o seu nome de usurio e senha, informe-se com o administrador
do sistema.

Clique em OK e retorne janela do site.

Escolha Site > Conectar, ou clique no boto Conectar, na barra de ferramentas

da janela do site, para se conectar ao site remoto. Para se desconectar, escolha
Site > Desconectar, ou clique no boto Desconectar.

Gerenciamento de sites e colaborao

137

Como solucionar problemas de

configurao do site remoto
Um servidor da Web pode ser configurado de vrias maneiras. Esta seo contm
informaes sobre algumas questes comuns que podem ocorrer durante a
configurao de um site remoto e como solucion-las.

A implementao de FTP do Dreamweaver pode no funcionar corretamente

em determinados servidores proxy, firewalls em muitos nveis e outras formas
de acesso indireto ao servidor. Caso voc tenha problemas com o acesso de FTP,
pea ajuda ao administrador de sistemas local.

A implementao de FTP do Dreamweaver diferente daquela de alguns

aplicativos de FTP comuns. Em particular, necessrio conectar-se pasta raiz
do sistema remoto e no possvel navegar pelo sistema de arquivos remotos.
Em muitos aplicativos, possvel conectar-se a qualquer diretrio remoto e, em
seguida, navegar pelo sistema de arquivos remotos, para localizar o diretrio
desejado.

Se estiverem ocorrendo problemas na conexo e voc tiver especificado o

diretrio do host utilizando uma barra inclinada simples (/), possvel que voc
precise especificar um caminho relativo no diretrio ao qual estiver se
conectando, assim como a pasta raiz do site remoto. Por exemplo: se a pasta raiz
remota for um diretrio de nvel mais elevado, possvel que voc precise
especificar ../../ correspondente ao diretrio do host.

s vezes, nas conexes lentas, o valor padro de tempo limite de FTP,

equivalente a 60 segundos, resultar em um nmero excessivo de ultrapassagens
do tempo limite. Se ocorrer um nmero freqente de tempo limite, aumente
este valor (nas preferncias do site). Mas no o aumente demais, seno ser
preciso aguardar um longo tempo quando uma conexo realmente no puder
ser estabelecida. Os mais teis so os limites de tempo de 30 a 120 segundos.

Os nomes de pastas e arquivos que contm espaos e caracteres especiais

geralmente causam problemas quando so transferidos para um site remoto.
Utilize sinais de sublinhado em vez de espaos e evite os caracteres especiais nos
nomes de arquivos e pastas, sempre que possvel. Em particular, dois pontos,
barras inclinadas, pontos e apstrofes nos nomes de arquivos ou pastas podem
causar problemas. Os caracteres especiais em nomes de pastas ou arquivos
tambm podem, s vezes, impedir que o Dreamweaver crie um mapa do site.

No Macintosh, os nomes de arquivos no podem conter mais de 31 caracteres.

Se ocorrerem problemas com nomes longos de arquivos, renomeie-os com
designaes mais curtas.

138

Captulo 4

 Observe que muitos servidores podem utilizar links simblicos (no UNIX),
atalhos (no Windows) ou apelidos (no Macintosh), para conectar uma pasta em
uma parte do disco do servidor a uma outra que esteja em uma localizao
diferente. Por exemplo: o subdiretrio public_html do seu diretrio principal
no servidor pode ser, na verdade, um link para outra parte do servidor. Na
maioria dos casos, esses apelidos no provocam qualquer efeito sobre a
possibilidade de conexo pasta ou diretrio adequado, mas se for possvel
conectar-se a uma parte do servidor mas no a outras, pode ocorrer uma
discrepncia devida ao apelido.

Em geral, quando ocorrer um problema em uma transferncia de FTP, examine

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

Como utilizar as opes de devoluo e

retirada de arquivos
Quando estiver trabalhando em um ambiente de equipe, possvel retirar e
devolver arquivos dos servidores local e remoto e utilizar as Design Notes para
adicionar comentrios e notas para os seus colegas. A retirada de um arquivo
equivale a declarar: Estou trabalhando com este arquivo no o toque!.
Quando um arquivo for retirado, o Dreamweaver exibir uma marca de seleo ao
lado do cone do arquivo, na janela do site. Uma marca de seleo verde indica que
o arquivo foi retirado por voc, enquanto que uma marca vermelha significa 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 fim de evitar
eventuais alteraes enquanto algum o mantiver retirado.
No servidor remoto, o Dreamweaver no modifica o status dos arquivos retirados
para somente de leitura. Caso os arquivos sejam transferidos com um aplicativo
diferente do Dreamweaver, ser possvel sobrescrever os arquivos retirados. No
entanto, nos outros aplicativos, o arquivo .LCK estar visvel ao lado do arquivo
retirado na hierarquia de arquivos, a fim de evitar acidentes deste gnero.
A devoluo e retirada pode ser ativada em alguns sites e desativada em outros.
Para obter mais informaes sobre a transferncia de arquivos entre os sites local e
remoto sem devolv-los ou retir-los, consulte Como obter arquivos de um
servidor remoto na pgina 151 e Como colocar arquivos em um servidor
remoto na pgina 152.

Gerenciamento de sites e colaborao

139

Como configurar o sistema de devolues e retiradas

Para poder utilizar o sistema de devolues e retiradas, necessrio associar o site
local a um FTP remoto ou servidor de rede (consulte Como associar um servidor
remoto a um site local na pgina 132). Em seguida, necessrio configurar as
seguintes opes.
Para definir as opes de devoluo e retirada:

Escolha Site > Definir os sites e, em seguida, clique em Editar.

Na lista de categorias esquerda, clique em Informaes remotas.

Siga qualquer um dos procedimentos abaixo:

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 as
opes de devoluo e retirada de arquivos na pgina 139.

Selecione a opo Retirar os arquivos na abertura, se desejar retirar os arquivos

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

Digite um nome de retirada.

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

Digite um endereo de correio eletrnico.

Se voc digitar um endereo de correio eletrnico e, em seguida, retirar um
arquivo, o seu nome aparecer na janela do site, ao lado do arquivo, como um
link clicvel (azul e sublinhado). Se um membro da equipe clicar no link, o
programa padro do correio eletrnico desta pessoa exibir uma nova
mensagem. O campo Para: conter o endereo de correio eletrnico, enquanto
que o campo Assunto: conter os respectivos arquivo e nome do site.

140

Captulo 4

Como devolver e retirar os arquivos de um servidor remoto

Utilize a janela do site ou o menu Site, na janela do documento, para devolver e
retirar arquivos de um servidor remoto.
Se um arquivo for retirado, mas voc decidir no edit-lo (ou preferir descartar as
alteraes feitas), possvel desfazer a retirada, para que o arquivo no servidor
fique disponvel para os outros membros da equipe que queiram utiliz-lo.
Nota: Se for selecionado Site > Devolver, ou Site > Retirar enquanto a janela do documento
estiver ativa, e o arquivo no fizer parte do site que estiver aberto, o Dreamweaver tentar
determinar a qual dos sites definidos localmente pertence o arquivo; se ele pertencer a
apenas um site local, o Dreamweaver abrir esse site e, em seguida, executar a operao
de devoluo ou retirada.
Para retirar arquivos de um servidor remoto:

Escolha o site desejado no menu pop-up Sites atuais, situado no alto da janela
do site.

Retire os arquivos, utilizando um dos mtodos abaixo:

Selecione um ou mais arquivos e clique no cone de Retirar, na parte superior

da janela do site.

No menu contextual ou no menu Site, escolha Retirar.

3

Para efetuar o download dos arquivos dependentes juntamente com os

selecionados, clique em Sim no aviso. Para que no seja efetuado o download
dos arquivos dependentes, clique em No.

Para devolver arquivos a um servidor remoto:

Escolha o site desejado no menu pop-up Sites atuais, situado na parte superior
da janela do site.

Selecione um ou mais arquivos retirados ou novos arquivos, no painel Local,

e siga um dos procedimentos abaixo:

Clique no cone de Devolver, na parte superior da janela do site.

Escolha Devolver, no menu contextual ou no menu Site.
Os arquivos retirados so indicados com uma marca de seleo verde. Se um
arquivo for acompanhado por uma marca de seleo vermelha, porque outro
usurio o retirou; no devolva esses arquivos.
Um smbolo de cadeado indica um arquivo somente de leitura (no Windows)
ou bloqueado (no Macintosh).
Os novos arquivos no contm nem uma marca de seleo nem um smbolo de
cadeado ao lado.

Gerenciamento de sites e colaborao

141

Para carregar os arquivos dependentes juntamente com o arquivo selecionado,

clique em Sim no aviso. Para que os arquivos dependentes no sejam
carregados, clique em No. sempre conveniente efetuar o upload dos
arquivos dependentes ao devolver um novo arquivo, mas se as verses mais
recentes dos dependentes j estiverem no servidor remoto, no ser preciso
carreg-los novamente.

Para desfazer uma retirada:

Selecione o arquivo e escolha Site > Desfazer a retirada, ou clique com o boto
direito do mouse (no Windows), ou pressione a tecla Control e clique no arquivo
(no Macintosh), e escolha Desfazer a retirada, no menu contextual. A cpia local
do arquivo se tornar somente de leitura e quaisquer alteraes feitas sero
perdidas.
Para devolver ou retirar um arquivo ativo:

Na janela do documento, escolha Site > Devolver, ou Site > Retirar, ou utilize os
cones da barra de ferramentas.
Se o arquivo ativo for retirado, a verso aberta deste ser substituda pela nova
verso retirada. Se o arquivo ativo for devolvido, ele dever ser automaticamente
salvo antes da devoluo, dependendo das opes de preferncia definidas;
consulte Preferncias do site na pgina 117.

Sobre as Design Notes

possvel controlar as informaes adicionais relativas aos seus documentos
(como nomes de arquivos de origem de imagens e comentrios sobre o status do
arquivo), atravs do comando Design Notes.
Por exemplo: se um documento for copiado de um site para outro, possvel
adicionar Design Notes sobre esse documento, informando que seu original est
na outra pasta do site. Posteriormente, se voc (ou outro usurio) atualizar esse
documento, voc ser informado que necessrio atualizar tambm a pgina
original.
O comando Design Notes pode ser utilizado tambm para controlar informaes
sensveis que no podem ser colocadas no interior de um documento por motivos
de segurana. Por exemplo: podem ser includas informaes sobre a criao do
documento ou notas sobre a escolha de um determinado preo ou configurao,
ou ainda quais fatores de marketing influenciaram uma deciso sobre desenho.
possvel ver quais arquivos apresentam Design Notes anexadas, na janela do site:
haver um cone de Design Notes na coluna Notas da visualizao dos arquivos do
site.

142

Captulo 4

Como salvar as informaes sobre o arquivo em Design

Notes
possvel criar um arquivo de Design Notes para cada documento ou modelo do
site. Observe que, se forem adicionadas Design Notes a um modelo, os
documentos criados com esse modelo no as herdaro. Pode-se criar tambm as
Design Notes para miniaplicativos, controles ActiveX, imagens, filmes Flash,
objetos Shockwave e campos de imagem nos documentos.
Para configurar as Design Notes para o seu site:

Escolha Site > Definir 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 a opo Manter as Design Notes estiver selecionada, podero ser
criadas Design Notes para os arquivos do site. Quando um arquivo for copiado,
movido, renomeado ou excludo, as Design Notes a ele associadas tambm
sero copiadas, movidas, renomeadas ou excludas.

Decida se as Design Notes associadas ao site sero carregadas com o restante

dos documentos, selecionando ou desmarcando a opo Efetuar o upload das
Design Notes para compartilhar.
Quando a opo Efetuar o upload das Design Notes para compartilhar tiver
sido selecionada, voc poder compartilhar as Design Notes com as outras
pessoas de sua equipe. Quando um arquivo for colocado ou obtido, o
Dreamweaver automaticamente colocar ou obter o arquivo de Design Notes
a ele associado. Caso esteja trabalhando sozinho no site, voc poder cancelar a
seleo desta opo para melhorar o desempenho das transferncias de
arquivos; quando a opo for desmarcada, as Design Notes sero mantidas
localmente, mas o seu upload no ser feito com os arquivos.
3

Clique em OK.

Para adicionar Design Notes a um documento:

Enquanto o documento estiver ativo na janela do documento, escolha Arquivo

> Design Notes.
Tambm possvel selecionar o arquivo na janela do site e, em seguida, escolher
Arquivo > Design Notes, ou clicar duas vezes na coluna Notas. Se o arquivo
residir em um site remoto, retire primeiro o arquivo e, em seguida selecione-o
na pasta local. Consulte Como devolver e retirar os arquivos de um servidor
remoto na pgina 141 ou Como obter e colocar arquivos na pgina 151.

Gerenciamento de sites e colaborao

143

Na guia Informaes bsicas, adicione notas de vrios tipos:

Escolha o status do documento no menu pop-up Status.

Digite os comentrios no campo de texto Notas.
Clique no cone de data (logo acima do campo de texto Notas), para inserir a
data atual local.

Para que o arquivo de Design Notes seja sempre aberto simultaneamente

abertura do arquivo, selecione Mostrar quando o arquivo estiver aberto.
3

Na guia Todas as informaes, adicione outras chaves e valores que possam ser
teis para os outros programadores do site. Por exemplo: denomine uma chave
Autor (no campo Nome) e defina o valor como sendo Henfil (no campo
Valor). Clique no boto com o sinal de adio (+) para adicionar um par chave/
valor; selecione um par e clique no boto com o sinal de subtrao () para
remov-lo.

Clique em OK, para salvar as notas.

As notas inseridas so salvas em uma subpasta denominada _notes, na mesma
localizao do arquivo. O nome do arquivo ser o mesmo do arquivo do
documento, alm da extenso .mno. Por exemplo: se o nome do arquivo for
index.html, o arquivo de Design Notes a ele associado ser denominado
index.html.mno.

Para adicionar Design Notes a um objeto:

Escolha Design Notes, no menu contextual do objeto. Abra o menu contextual

correspondente ao objeto, clicando com o boto direito do mouse (no
Windows), ou pressionando Control e clicando no objeto (no Macintosh).

Siga as etapas 2 a 4, para adicionar as Design Notes a um documento.

Observe que um arquivo de Design Notes de um objeto salvo em uma
subpasta _notes, no mesmo diretrio que o arquivo de origem do objeto, que
no est necessariamente no mesmo diretrio do documento no qual aparece o
objeto.

Para abrir as Design Notes associadas a um arquivo, siga um dos procedimentos

abaixo:

Selecione um arquivo na janela do site ou abra o prprio arquivo e, em seguida,

escolha Arquivo > Design Notes. As Design Notes associadas ao arquivo sero
abertas.

Na coluna Notas da janela do site, clique duas vezes no cone amarelo das
Design Notes.

144

Captulo 4

Para atribuir um status no contido no menu pop-up Status:

Abra as Design Notes correspondentes a um arquivo ou objeto.

Clique na guia Todas as informaes.

Clique no boto com o sinal de adio (+).

No campo Nome, digite a palavra status.

No campo Valor, digite o status.

Se j existir um valor de status, ele ser substitudo pelo novo valor.

Clique na guia Informaes bsicas e observe que o valor do novo status

aparecer no menu pop-up Status.
Nota: possvel constar apenas um novo valor no menu de status de cada vez. Se esse
procedimento for realizado novamente, o novo valor de status inserido na primeira vez
ser substitudo pelo novo valor includo posteriormente.

Para desativar as Design Notes:

Escolha Site > Definir os sites.

Na caixa de dilogo Definir os sites, selecione o site e clique em Editar.

Na caixa de dilogo Definio do site, clique em Design Notes.

Desmarque a opo Manter as Design Notes.

O cancelamento da seleo dessa opo desativar o recurso Design Notes. Se
esta opo for desmarcada e, em seguida, voc clicar em Limpar, todos os
arquivos de Design Notes do site sero excludos.

Clique em OK.
Aparecer uma caixa de dilogo, indagando se voc gostaria de excluir os
arquivos de Design Notes existentes. Clique em Sim, para exclu-los, ou em
No, para manter esses arquivos.

Para utilizar as Design Notes apenas localmente:

Escolha Site > Definir os sites.

Na caixa de dilogo Definir os sites, selecione o site e clique em Editar.

Na caixa de dilogo Definio do site, selecione a opo Manter as Design

Notes, na caixa Design Notes.

Desmarque a opo Efetuar o upload para compartilhamento.

As Design Notes no sero transferidas para o site remoto quando os arquivos
forem devolvidos/retirados. Voc ainda poder adicionar e modificar
localmente as Design Notes do site.

Gerenciamento de sites e colaborao

145

Para excluir as Design Notes no associadas ao site:

Escolha Site > Definir os sites.

Na caixa de dilogo Definir os sites, selecione o site e clique em Editar.

Na caixa de dilogo Definio do site, clique em Design Notes.

Clique em Limpar. O Dreamweaver solicitar que verifique se as Design Notes

que no esto mais associadas a um arquivo do site devero ser excludas. Se
voc utilizar o Dreamweaver para excluir um arquivo ao qual est associado um
arquivo de Design Notes, ambos sero excludos; por essa razo, geralmente os
arquivos rfos de Design Notes ocorrero apenas quando um arquivo for
excludo ou renomeado fora do Dreamweaver.
Nota: Se a opo Manter as Design Notes for cancelada antes de clicar em Limpar, o
Dreamweaver excluir todos os arquivos de Design Notes associados ao site.

Como utilizar as colunas de visualizao de arquivos com as

Design Notes
possvel personalizar as colunas que so exibidas nas listas Pasta local e Site
remoto, na janela do site. possvel reordenar colunas, adicionar novas colunas
(at, no mximo, 10 colunas), excluir ou ocultar colunas, associar Design Notes
aos dados de colunas e designar colunas que podero ser compartilhadas com
todos os usurios conectados ao site. As colunas padro so Nome, Notas,
Tamanho, Tipo, Modificado e Retirado por. possvel ordenar de acordo com
qualquer coluna, clicando no respectivo cabealho, na janela do site. A ao de
clicar mais de uma vez em uma coluna inverter a ordem (de ascendente para
descendente, ou vice-versa) segundo a qual a coluna classificada.
Nota: No possvel excluir, renomear ou associar uma Design Note a uma coluna padro
(Nome, Notas, Tamanho, Tipo, Modificado e Retirado por). possvel alterar a ordenao
e alinhamento destas colunas, assim como ocult-las, com exceo da coluna Nome, que
no pode ser oculta.
Para acessar as opes das colunas de visualizao de arquivos, siga um dos
procedimentos abaixo:

Escolha Exibir > Colunas de visualizao de arquivos, na janela do site (no

Windows), ou Site > Exibir os arquivos do site > Colunas de visualizao de
arquivos (no Macintosh).

Escolha > Definir os sites e, em seguida, clique em Editar. Em seguida,

selecione Colunas de visualizao de arquivos, na caixa de dilogo Definio do
site.

146

Captulo 4

 Na janela do site, clique com o boto direito do mouse (no Windows), ou

pressione a tecla Control e clique na coluna (no Macintosh) e selecione a opo
Colunas de visualizao de arquivos.

Aparecer a caixa de dilogo Definio do site, que exibir as opes das colunas
de visualizao de arquivos.
Para alterar a ordem das colunas:

Na tela Colunas de visualizao de arquivos, na caixa de dilogo Definio do

site, selecione o nome de uma coluna.

Clique no boto de seta acima ou seta abaixo, para alterar a posio da coluna
selecionada.
possvel alterar a ordem de qualquer coluna, exceto Nome, que sempre
permanecer na posio original.

Para adicionar uma nova coluna:

Na tela Colunas de visualizao de arquivos, na caixa de dilogo Definio do

site, clique no boto com o sinal de adio (+).

No campo Nome da coluna, digite o nome da coluna.

Escolha um valor no menu pop-up Associar Design Note, ou digite um outro

valor qualquer.
necessrio associar uma nova coluna Design Note, para que haja dados a
serem exibidos na janela do site.

Gerenciamento de sites e colaborao

147

Escolha uma opo de alinhamento: esquerda, direita ou no centro. Esta

opo determinar a maneira como o texto ser alinhado na coluna.

Para mostrar ou ocultar a coluna, selecione ou cancele a seleo da opo

Mostrar.

Para compartilhar a coluna com todos os usurios que estiverem conectados ao

site, selecione a opo Compartilhar com todos os usurios deste site.

Para excluir uma coluna que tiver sido adicionada:

Selecione a coluna que deseja excluir.

Clique no boto com o sinal de subtrao (-).

Nota: A coluna ser excluda imediatamente e sem confirmao, portanto certifique-se de

desejar exclui-la, antes de clicar no boto com o sinal de subtrao (-).

Como utilizar as Design Notes no Fireworks e no

Dreamweaver
Se uma imagem for aberta no Macromedia Fireworks 4.0 e exportada com outro
formato, o Fireworks salvar automaticamente, no arquivo de Design Notes, o
nome do arquivo de origem inicial. Por exemplo: se voc abrir minha_casa.png no
Fireworks e export-lo para minha_casa.gif, o Fireworks criar automaticamente
um arquivo de Design Notes chamado minha_casa.gif.mno, contendo o nome do
arquivo original, como uma URL absoluta file:. Por exemplo: as Design Notes
para minha_casa.gif devem conter a linha abaixo:
fw_source="file:///Mydisk/sites/assets/orig/minha_casa.png"

Se a imagem contiver pontos ativos ou imagens cambiveis, a origem de HTML

desses itens tambm ser adicionada ao arquivo de Design Notes.
Quando a imagem for importada para o Dreamweaver, o arquivo de Design Notes
ser automaticamente copiado para o site, juntamente com a imagem. Quando a
imagem for selecionada no Dreamweaver e voc decidir edit-la no Fireworks
(consulte Como iniciar um editor externo na pgina 326), este abrir o arquivo
original para ser editado. Para obter mais informaes, consulte Utilizao do
Dreamweaver e do Fireworks juntos na pgina 307.

148

Captulo 4

Como utilizar os relatrios para melhorar o

fluxo de trabalho
Utilize o comando Site > Relatrios, para melhorar a colaborao entre os
membros de uma equipe da Web. possvel executar relatrios de fluxo de
trabalho que exibam as pessoas que retiraram certos arquivos e quais destes
contam com Design Notes a eles associadas. possvel refinar ainda mais os
relatrios das Design Notes, especificando os parmetros nome/valor. Para obter
mais informaes sobre a execuo de outros tipos de relatrios, consulte Como
utilizar os relatrios para testar um site na pgina 550.

Nota: necessrio contar com uma conexo definida a um site remoto, para poder
executar os relatrios de fluxo de trabalho.
Para executar um relatrio Retirado por:

Escolha Site > Relatrios.

Aparecer a caixa de dilogo Relatrios.

Escolha uma opo no menu pop-up Relatrio sobre. possvel optar por
preparar um relatrio sobre um documento, um site inteiro, determinados
arquivos de um site ou uma pasta especfica.

Em Fluxo de trabalho, selecione Retirado por.

Clique no boto Definies do relatrio.

Aparecer a caixa de dilogo Retirado por.

Digite o nome do membro de uma equipe e clique em OK.

Gerenciamento de sites e colaborao

149

Clique em Executar.
O relatrio ser executado e a caixa de dilogo Relatrios exibir um resumo
dos arquivos que tiverem sido retirados pela pessoa especificada.

Para executar um relatrio sobre determinadas Design Notes:

Escolha Site > Relatrios.

Aparecer a caixa de dilogo Relatrios.

Escolha uma opo no menu pop-up Relatrio sobre. possvel optar por
preparar um relatrio sobre um documento, um site inteiro, determinados
arquivos de um site ou uma pasta especfica.

Em Fluxo de trabalho, selecione Design Notes.

O boto Definies do relatrio se tornar disponvel.

Clique no boto Definies do relatrio.

Aparecer a caixa de dilogo Design Notes.

Digite um ou mais pares nome/valor e selecione valores de comparao nos

respectivos menus pop-up.
Por exemplo: se especificar status contm rascunho, o relatrio procurar os
arquivos cujas Design Notes apresentam o status de rascunho.

150

Captulo 4

Clique em OK, para retornar caixa de dilogo Relatrios.

Clique em Executar, para executar o relatrio.

Como obter e colocar arquivos

Se voc estiver trabalhando em um ambiente com vrios usurios, utilize o sistema
de devolues e retiradas para transferir os arquivos entre os sites local e remoto
(consulte Como utilizar as opes de devoluo e retirada de arquivos na
pgina 139). Caso esteja trabalhado sozinho no site remoto, em vez do sistema
mencionado, possvel utilizar os comandos Obter e Colocar, para transferir os
arquivos sem devolver ou retir-los.
Nota: Se voc selecionar a opo Site > Obter, ou Site > Colocar enquanto a janela do
documento estiver ativa, e o arquivo no fizer parte do site que estiver aberto, o
Dreamweaver tentar determinar a qual dos sites definidos localmente pertence o arquivo;
se ele pertencer a apenas um site local, o Dreamweaver abrir esse site e, em seguida,
executar a operao de obteno ou colocao.

Como obter arquivos de um servidor remoto

Obter os arquivos copia-os de um site remoto para o site local.
Se for utilizado o sistema de devolues e retiradas (isto , se a opo Ativar a
devoluo e a retirada de arquivos estiver acionada), o comando Obter produzir
uma cpia local somente de leitura do arquivo; os arquivos continuaro
disponveis no site remoto para os outros membros da equipe retir-los. Se a opo
Ativar a devoluo e retirada de arquivos estiver desativada, a obteno de um
arquivo transferir uma cpia com os privilgios de leitura e gravao. Consulte
Como utilizar as opes de devoluo e retirada de arquivos na pgina 139.
Nota: Se voc estiver trabalhando em um ambiente de equipe isto , se outras pessoas
estiverem utilizando os mesmos arquivos no recomendada a desativao de Ativar a
devoluo e retirada de arquivos. Em particular, se as outras pessoas estiverem utilizando
o sistema de devolues e retiradas no site, voc tambm dever utilizar o mesmo sistema.

Observe que os arquivos copiados quando for clicada a opo Obter so aqueles
selecionados no painel ativo da janela do site. Se o painel remoto estiver ativo, o
arquivos remotos selecionados sero copiados para o site local; se o painel local
estiver ativo, as verses remotas dos arquivos locais escolhidos sero copiadas no
site local.
Se voc no estiver trabalhando em um ambiente de equipe e desejar obter
arquivos com privilgios de leitura e gravao, desative a opo Ativar a devoluo
e retirada de arquivos no site; consulte Como associar um servidor remoto a um
site local na pgina 132.
Para obter apenas os arquivos cuja verso remota for mais recente que a local,
utilize o comando Sincronizar; consulte Como sincronizar os arquivos nos sites
local e remoto na pgina 154.

Gerenciamento de sites e colaborao

151

Para obter arquivos de um servidor remoto:

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 fim de
abrir uma conexo com o servidor remoto.
Se j houver uma conexo aberta (o boto indicar Desconectar), ignore essa
etapa. Caso os arquivos remotos j estejam visveis no painel remoto devido a
uma conexo anterior, no ser preciso clicar em Conectar; quando se clica em
Obter, o Dreamweaver estabelece automaticamente a conexo.

Selecione os arquivos dos quais deseja efetuar o download. Normalmente, eles

so escolhidos no painel remoto, mas, em vez disso, selecione os arquivos
correspondentes no painel Local, se preferir.

Clique em Obter, ou escolha Obter, no menu contextual ou no menu Site. Se o

arquivo estiver aberto na janela do documento, possvel escolher Site > Obter,
nessa janela.

Para efetuar o download dos arquivos dependentes, clique em Sim; para ignorlos, clique em No. Se j houver cpias locais dos arquivos dependentes, clique
em No. Para evitar perguntas sobre os arquivos dependentes em downloads
posteriores, selecione a opo No me pergunte novamente.

Nota: Para interromper a transferncia de arquivos a qualquer momento, clique no boto

Parar a tarefa atual (o sinal de parada vermelho com um X branco, no canto inferior direito
da janela do site), ou pressione a tecla Esc (no Windows), ou as teclas Command e ponto
(no Macintosh). possvel que a transferncia no pare imediatamente.

O Dreamweaver registra todas as atividades de transferncia de arquivos atravs de

FTP. Se ocorrer um erro durante a transferncia de um arquivo com o FTP, o
Registro de FTP do site poder auxili-lo a determinar o problema. Para exibir o
registro, escolha Janela > Registro de FTP do site, na janela do site (no Windows),
ou Site > Registro de FTP do site (no Macintosh).
Como colocar arquivos em um servidor remoto
A utilizao do comando Colocar copia arquivos do site local para o site remoto,
geralmente sem alterar o status de retirada dos arquivos. H duas situaes
comuns nas quais o comando Colocar utilizado em vez de Devolver: quando
voc no estiver em um ambiente com muitos usurios e no estiver utilizando o
sistema de devolues e retiradas; ou quando desejar colocar a verso atual do
arquivo no servidor mas continuar a edit-lo.
Nota: Caso seja colocado um arquivo que ainda no existia no site remoto, e se for
utilizado o sistema de devolues e retiradas, o arquivo ser copiado no site remoto e, em
seguida, retirado, para que voc possa continuar a edit-lo.

152

Captulo 4

Se desejar colocar um arquivo em um servidor remoto e devolv-lo, utilize o

comando Devolver. Consulte Como devolver e retirar os arquivos de um servidor
remoto na pgina 141.
Para colocar apenas os arquivos cuja verso local for mais recente do que a remota,
consulte Como sincronizar os arquivos nos sites local e remoto na pgina 154.
Nota: No utilize caracteres especiais (como , ou ) ou pontuao, como dois pontos,
barras inclinadas ou pontos nos nomes dos arquivos que sero colocados em um servidor
remoto. Muitos servidores convertero esses caracteres durante o processo do upload,
provocando a ruptura dos links entre os arquivos.
Para colocar arquivos em um servidor remoto:

Escolha Janela > Arquivos do site, para abrir a janela do site.

No alto da janela do site, escolha o site desejado no menu pop-up com a lista de
sites atuais.

Se for utilizado o FTP para a transferncia dos arquivos, clique em Conectar,

para abrir uma conexo com o servidor remoto, que lhe permitir ver o que h
no site remoto antes de transferir os arquivos. Contudo, no necessrio clicar
em Conectar; quando voc clicar em Colocar, o Dreamweaver estabelecer
automaticamente a conexo.

Selecione os arquivos dos quais deseja efetuar o upload. Normalmente, eles so

escolhidos no painel local, mas, em vez disso, selecione os arquivos
correspondentes no painel Remoto, se preferir.

Clique em Colocar, ou escolha Colocar, no menu contextual ou no menu Site.

Se o arquivo no tiver sido salvo, possvel que aparea uma caixa de dilogo
(dependendo da definio da preferncia, no painel Site, na caixa de dilogo
Preferncias), que permite salvar o arquivo antes de coloc-lo no servidor
remoto. Para salvar o arquivo, clique em Sim; para colocar a verso salva
anteriormente no servidor remoto, clique em No.
Se preferir no salvar o arquivo, as alteraes feitas aps o ltimo salvamento
no sero colocadas no servidor remoto. Contudo, o arquivo continuar aberto
para que seja ainda possvel salvar o arquivo depois de coloc-lo no servidor.

Para efetuar o upload dos arquivos dependentes, clique em Sim; para ignorlos, clique em No. Se j houver cpias locais dos arquivos dependentes, clique
em No. Para evitar perguntas sobre os arquivos dependentes em uploads
posteriores, selecione a opo No me pergunte novamente.

Nota: Para interromper a transferncia de arquivos a qualquer momento, clique no boto

Parar a tarefa atual (o sinal de parada vermelho com um X branco, no canto inferior direito
da janela do site), ou pressione a tecla Esc (no Windows), ou as teclas Command e ponto
(no Macintosh). possvel que a transferncia no pare imediatamente.

Gerenciamento de sites e colaborao

153

Se o arquivo estiver aberto na janela do documento, ser possvel escolher Site >
Colocar, na janela do documento.
O Dreamweaver registra todas as atividades de transferncia de arquivos atravs de
FTP. Se ocorrer um erro durante a transferncia de um arquivo com o FTP, o
Registro de FTP do site poder auxili-lo a determinar o problema. Para exibir o
registro, escolha Janela > Registro do FTP, na janela do site (no Windows), ou
Site > Registro do FTP (no Macintosh).

Como sincronizar os arquivos nos sites

local e remoto
Depois que os arquivos forem criados nos sites local e remoto, possvel
sincroniz-los. Utilize o comando Site > Sincronizar, para transferir as verses mais
recentes dos seus arquivos de e para o site remoto.
Caso o site remoto seja um servidor de FTP (em vez de um servidor de rede), a
sincronizao dos arquivos utilizar o FTP. Para obter mais informaes sobre o
uso do FTP, consulte Como associar um servidor remoto a um site local na
pgina 132.
Antes de sincronizar os sites, o Dreamweaver permite verificar quais arquivos sero
colocados ou obtidos no servidor remoto. O programa tambm confirmar quais
arquivos foram atualizados aps o trmino da sincronizao.
Para verificar quais arquivos so mais recentes no site local ou no site remoto, sem
sincronizao, escolha Editar > Selecionar um local mais novo, ou Editar >
Selecionar um remoto mais novo (no Windows, na janela do site), ou Site > Exibir
os arquivos do site > Selecionar um local mais novo, ou Site > Exibir os arquivos
do site > Selecionar um remoto mais novo (no Macintosh).
Para sincronizar os arquivos:

154

Captulo 4

Se forem sincronizados arquivos ou pastas especficas, em vez do site inteiro,

selecione esses arquivos ou pastas no painel local ou remoto da janela do site.

Escolha Site > Sincronizar, na janela do site (no Windows), ou na barra de

menu (no Macintosh).

Para sincronizar o site inteiro, escolha Site nome do site inteiro, no menu popup Sincronizar. Para sincronizar apenas os arquivos selecionados, escolha
Apenas os arquivos locais selecionados (ou Apenas os arquivos remotos
selecionados, se o painel remoto for o local onde tiver sido realizada a seleo
mais recente).

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 modificao mais recentes que os seus
correspondentes remotos.

Selecione Obter os arquivos mais novos do remoto, se desejar efetuar o

download de todos os arquivos remotos com datas de modificao mais
recentes do que as de seus correspondentes locais.

Escolha Obter e colocar os arquivos mais novos, para colocar as verses mais
recentes de todos os arquivos nos sites remoto e local.
5

Decida se ir excluir os arquivos do site de destino que no tiverem

correspondentes no site de origem. Esta opo no estar disponvel, se voc
tiver selecionado a opo Obter e colocar.
Se for escolhida a opo Colocar os arquivos mais novos no remoto e
selecionada a opo Excluir, o Dreamweaver excluir os arquivos no site remoto
que no tiverem correspondentes locais. Se for escolhido Obter os arquivos
mais novos do remoto, o Dreamweaver excluir os arquivos no site local para os
quais no haja correspondentes remotos.

Clique em Visualizar.
Se a verso mais recente de cada arquivo escolhido j estiver em ambos os
lugares e no houver nada a ser excludo, aparecer um alerta informando-lhe
que a sincronizao no ser necessria.

Na caixa de dilogo Sincronizar os arquivos, verifique quais arquivos deseja

excluir, colocar e obter. Se no desejar que o Dreamweaver exclua, coloque ou
obtenha um determinado arquivo, desmarque-o, clicando na caixa de seleo
esquerda do mesmo (na coluna Ao).

Clique em OK. Os arquivos sero automaticamente transferidos (e excludos,

conforme a necessidade) e o Dreamweaver atualizar o status na caixa de
dilogo Sincronizar os arquivos.

Para salvar as informaes relativas verificao em um arquivo local, clique em

Salvar o registro.

Gerenciamento de sites e colaborao

155

156

Captulo 4

CAPTULO 5

Como configurar um documento

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Uma vez criado o site local, voc poder preench-lo com documentos. Se ainda no
tiver definido um site, consulte Como utilizar o Dreamweaver para definir um novo
site na pgina 108. Um documento (ou seja, uma pgina do seu site da Web) pode
conter texto e imagens, bem como um contedo mais sofisticado, como animao,
vdeo, links a outros documentos e som. Durante a criao e edio dos documentos, o
Dreamweaver gera automaticamente o cdigo-fonte HTML e JavaScript subjacente.
Para examinar ou editar este cdigo, utilize um dos editores de cdigo do
Dreamweaver: a visualizao de cdigo, na janela do documento, ou o inspetor de
cdigo. Para obter mais informaes, consulte Como utilizar a visualizao de cdigo
(ou o inspetor de cdigo) na pgina 361).
possvel criar novos documentos no Dreamweaver comeando a partir de
pginas HTML em branco ou modelos. Alternativamente, possvel abrir e
modificar documentos HTML criados em outros aplicativos. Consulte Como
criar, abrir e salvar os documentos HTML na pgina 158.
Quando definir um documento, voc pode definir elementos de pgina bsicos.
Por exemplo: o ttulo de pgina identifica o documento para o visitante do site.
Geralmente, este aparece na barra de ttulo da janela do navegador. As imagens e a
cor de fundo, as cores do texto e dos links personalizam a pgina e distinguem o
texto comum do hipertexto. As propriedades de margem permitem que se
especifique os tamanhos das margens superiores e inferiores da pgina. Consulte
Como definir as propriedades do documento na pgina 160.
Durante a incluso do contedo, os objetos podem ser selecionados e modificados
diretamente na janela do documento. Em alguns casos, talvez seja preciso
selecionar os marcadores que representem os elementos da pgina que no esto
visveis na janela do documento, como comentrios e scripts, por exemplo.
Consulte Como selecionar os elementos na janela do documento na pgina 162.
Ao criar os seus documentos, possvel executar a mesma tarefa diversas vezes,
utilizando o painel Histrico. Consulte Sobre como automatizar as tarefas na
pgina 168.

157

Como criar, abrir e salvar os documentos

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

No Windows, selecione Arquivo > Novo a partir de, em uma janela de

documento existente, ou selecione Arquivo > Nova janela, na janela do site.

No Macintosh, escolha Arquivo > Novo.

Se a visualizao de cdigo (na janela do documento) ou o inspetor de cdigo for
aberto, voc poder notar que no se trata de um documento em branco ele
contm os tags html, head (cabealho) e body (corpo), para adiantar o trabalho.
Durante a digitao na visualizao do projeto, na janela do documento, ou
durante a insero de objetos, como tabelas e imagens, o editor de cdigo pode ser
mantido aberto para que seja observada a criao do cdigo-fonte HTML. Para
obter mais informaes sobre os editores de cdigo, consulte Como utilizar a
visualizao de cdigo (ou o inspetor de cdigo) na pgina 361.

158

Captulo 5

Para abrir um arquivo HTML j existente, siga um dos procedimentos abaixo:

Escolha Arquivo > Abrir.

Se o arquivo tiver sido criado com o Microsoft Word, escolha Arquivo >
Importar > Importar HTML do Word.
Se voc selecionar Importar HTML do Word, o Dreamweaver abrir o arquivo
e permitir que se especifique as opes para remover o cdigo HTML no
correspondente, gerado pelo Word. O Microsoft Word 97 e as verses mais
avanadas contam com o recurso Salvar como HTML, que adiciona cdigo
HTML desnecessrio medida que converte o documento em HTML. Para
obter mais informaes, consulte Como limpar o HTML do Microsoft Word
na pgina 379.
Nota: No possvel importar diretamente um arquivo do Microsoft Word (com a
extenso .doc) para o Dreamweaver. Se desejar importar o contedo de um arquivo do
Word, inicie o Word e salve o arquivo como HTML antes de importar o arquivo HTML
resultante para o Dreamweaver.
Criar um novo documento a partir de um modelo:

Escolha Arquivo > Novo a partir de modelo.

Aparecer uma caixa de dilogo com uma lista de modelos disponveis para o
site atual. necessrio criar antes os modelos nos quais se basearo os
documentos; consulte Como criar os modelos na pgina 411.
Quando for criado um documento com base em um modelo, algumas partes
do documento sero bloqueadas para que no sejam editadas. O arquivo do
modelo determinar quais regies sero editveis ou no. Este procedimento
assegura a consistncia quando o modelo for utilizado para diversos
documentos em um site.

Selecione um modelo e clique em Selecionar.

Ser criado um novo documento a partir do modelo. Cada parte editvel do
novo documento ser envolvida por uma borda azul como padro. O
documento inteiro ser envolvido por uma borda amarela (como padro),
como um lembrete de que se baseia num modelo e que, por conseguinte,
algumas partes dele esto bloqueadas. Para personalizar as cores realadas,
consulte Como definir as preferncias de modelo na pgina 417. Para
modificar as partes editveis de um modelo, selecione o contedo do alocador
de espao na regio editvel e digite sobre o mesmo. Em alguns casos, no h
qualquer contedo do alocador de espao na regio editvel. Neste casos, clique
dentro da regio editvel.

Para se informar mais sobre como criar e trabalhar com os modelos, consulte
Como reutilizar o contedo com os modelos e bibliotecas na pgina 409.

Como configurar um documento

159

Para salvar um documento:

Escolha Arquivo > Salvar.

Fornea um nome para o arquivo e navegue para onde deseja que ele seja salvo.
Nota: Quando a caixa de dilogo aparecer pela primeira vez, o Dreamweaver
adicionar automaticamente as extenses .htm (no Windows) ou .html (no Macintosh)
ao nome do arquivo. possvel controlar qual extenso de arquivo ser adicionada,
atravs da utilizao de uma opo nas Preferncias gerais. Para salvar um arquivo
como texto simples no Windows, atribua ao nome dele uma extenso .txt. Para salvar
um arquivo como texto simples no Macintosh, basta remover a extenso .html do nome
dele. Para que o Dreamweaver considere o arquivo como arquivo HTML novamente,
salve-o de novo com uma extenso .html ou .htm. Depois que o arquivo for salvo como
texto, o Dreamweaver no interpretar qualquer cdigo HTML no arquivo.

Quando salvar os documentos, sempre que possvel, evite utilizar espaos e

caracteres especiais nos nomes de arquivos e pastas. No utilize caracteres
especiais (como , ou ) ou pontuao (como dois pontos, barras inclinadas
ou pontos) nos nomes dos arquivos que sero colocados em um servidor
remoto. Muitos servidores alteram estes caracteres durante o upload, o que
causa o rompimento dos links aos arquivos. Tambm no coloque um
algarismo na primeira posio de um nome de um arquivo.
3

Clique no boto Salvar, para salvar o arquivo.

Como definir as propriedades do

documento
Os ttulos de pginas, as cores e imagens de fundo, as cores do texto e dos links,
alm das margens, so propriedades bsicas de todo documento HTML. O ttulo
de pgina identifica e nomeia o documento. Uma cor e imagem de fundo define a
aparncia geral do documento. As cores do texto e dos links ajudam os visitantes
do site a distinguir entre texto comum e hipertexto, e tambm a examinar quais
links foram ou no visitados.
Como alterar o ttulo de uma pgina
O ttulo de uma pgina HTML ajuda os visitantes do site a controlar o que esto
exibindo enquanto navegam; ele serve tambm para identificar a pgina nas listas
de histrico e marcadores do visitante. Se uma pgina no for intitulada, ela
aparecer na janela do navegador e nessas listas como um Documento sem ttulo.
Observe que o ato de salvar um documento e lhe dar um nome no corresponde
ao ato de dar um ttulo a uma pgina. Para localizar todos os documentos sem
ttulo no seu site, utilize o comando > Relatrios. Consulte Como criar
relatrios na pgina 550.

160

Captulo 5

Para alterar o ttulo de uma pgina:

Siga um dos procedimentos abaixo:

Escolha Modificar > Propriedades da pgina.

Clique num espao vazio da pgina, para se assegurar de que nada ser selecionado.
Em seguida, no menu contextual, escolha Propriedades da pgina, clicando com o
boto direito do mouse (no Windows), ou pressionando a tecla Control e clicando
na visualizao do projeto, na janela do documento (no Macintosh).

Escolha Exibir > Contedo do cabealho e, quando aparecer, clique no boto

Ttulo e, em seguida, abra o inspetor de propriedades.

Escolha Exibir > Barra de ferramentas.

2

Digite o ttulo da pgina na caixa de texto Ttulo.

Se estiver editando o ttulo na caixa de dilogo Propriedades da pgina, clique

em OK.
O ttulo aparecer na barra de ttulo da janela do documento e na barra de
ferramentas, se esta for exibida. O nome do arquivo da pgina e a pasta na qual
o arquivo ser salvo aparecero entre parnteses, ao lado do ttulo, na barra de
ttulo. Um asterisco indica que o documento contm alteraes que ainda no
foram salvas.

Como definir uma imagem ou cor de fundo da pgina

Utilize a caixa de dilogo Propriedades da pgina, para definir uma imagem ou cor de
fundo da pgina. Se utilizar tanto uma imagem de fundo quanto uma cor de fundo, a
cor aparecer durante o download da imagem e, ento, esta cobrir a cor. Se a imagem
de fundo contiver algum pixel transparente, a cor de fundo transparecer.
Para definir uma imagem ou cor de fundo:

Escolha Modificar > Propriedades da pgina, ou selecione Propriedades da

pgina, no menu contextual, na visualizao do projeto da janela do
documento.

Para definir uma imagem de fundo, clique no boto Procurar e, em seguida

procure e selecione a imagem. Uma alternativa digitar o caminho at a
imagem de fundo, na caixa Imagem de fundo.
O Dreamweaver colocar lado a lado (repetir) a imagem de fundo, se esta no
preencher inteiramente a janela, exatamente como fazem os navegadores. Para
evitar que isto acontea, utilize a opo Cascading Style Sheets, para desativar a
repetio de imagens. Consulte Como utilizar as folhas de estilos CSS na
pgina 267.

Para definir uma cor de fundo, clique na caixa Cor de fundo e selecione uma
cor do seletor de cores. Consulte Como trabalhar com as cores na pgina 91.

Como configurar um documento

161

Como definir as cores padro do texto

Defina as cores padro do texto comum, links visitados ou no, e dos links ativos
na caixa de dilogo Propriedades da pgina, ou escolha um esquema de cores
predefinido para configurar as cores do texto e do fundo da pgina. Consulte
Como trabalhar com as cores na pgina 91.
Nota: A cor dos links ativos a cor assumida por um link quando este for clicado. Alguns
navegadores da Web podem no usar a cor que voc especificar.
Para definir as cores padro do texto, siga um dos procedimentos abaixo:

Escolha Modificar > Propriedades da pgina e, em seguida, escolha as cores para

as opes Cor do texto, Cor do link, Links visitados e Links ativos.

Escolha Comandos > Definir o esquema de cores e, em seguida, escolha uma

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

Como selecionar os elementos na janela do

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

Para selecionar um elemento visvel na janela do documento, clique nele ou

arraste o mouse sobre o elemento.

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

162

Captulo 5

 Para selecionar um tag completo (inclusive o seu contedo, se houver), clique

em um tag do seletor de tags, situado na parte inferior esquerda da janela do
documento. O seletor de tags aparecer somente quando a visualizao do
projeto estiver ativa. O seletor sempre mostra os tags que contm a seleo atual
ou a posio do ponto de insero. O tag mais esquerda o tag mais externo
que contm a seleo atual ou a posio do ponto de insero. O tag seguinte
est contido no tag mais externo, e assim por diante. O tag mais direita o tag
mais interno, que contm a seleo atual ou o ponto de insero.

seletor de tags

Por exemplo: se definir um link para uma imagem, o cdigo HTML ter a
seguinte aparncia:
<a href="http://www.macromedia.com"><img src="agraphic.gif"></a>

Quando a imagem na janela do documento for clicada, o seletor de tags ser

alterado, exibindo os tags correspondentes seleo.
<body><a><img>

Como a imagem est selecionada, o tag <img> no seletor de tags aparecer em

negrito. O ato de clicar neste tag no seletor de tags corresponde seleo do tag
<img src="agraphic.gif">, num editor de cdigo.
Para selecionar o link (o tag a e tudo que estiver contido nele) ao invs da
imagem, clique na imagem na janela do documento e clique em <a>, no seletor
de tags.
Para examinar o cdigo HTML associado ao texto ou objeto selecionado, siga um
dos procedimentos abaixo:

Para exibir a visualizao de cdigo na janela do documento, selecione Exibir >

Cdigo, ou Exibir > Cdigo e projeto. Para obter mais informaes sobre a
visualizao de cdigo, consulte Como utilizar a visualizao de cdigo (ou o
inspetor de cdigo) na pgina 361.

Para abrir o inspetor de cdigo (numa janela separada), selecione Janela >
Inspetor de cdigo.
Geralmente, quando algum elemento for selecionado em um dos editores de
cdigo (a visualizao de cdigo ou o inspetor de cdigo), ele tambm ser
selecionado na janela do documento. Talvez seja preciso sincronizar as duas
visualizaes para que a seleo aparea. Consulte Como utilizar a visualizao de
cdigo (ou o inspetor de cdigo) na pgina 361.

Como configurar um documento

163

Sobre os elementos invisveis

Alguns cdigos HTML no possuem uma representao visvel num navegador.
Por exemplo: os tags comment no aparecem nos navegadores. Entretanto, enquanto
voc estiver criando uma pgina pode ser til selecionar tais elementos invisveis,
edit-los, mov-los e exclui-los. O Dreamweaver permite especificar se cones
devem ser exibidos marcando a localizao de elementos invisveis, na visualizao
do projeto da janela do documento.
Para exibir ou ocultar os cones marcadores de elementos invisveis, escolha Exibir
> Auxlios visuais > Elementos invisveis. A exibio de elementos invisveis
permite selecion-los e alterar as suas propriedades no inspetor de propriedades. A
sua ocultao permite examinar a pgina mais detalhadamente, da maneira em
que ela aparecer no navegador. Observe que a exibio dos elementos invisveis
pode alterar levemente o layout da pgina, movendo outros elementos alguns
pixels. Portanto, para obter uma preciso no layout, oculte os elementos invisveis.
Para indicar os marcadores de elementos que aparecero ao se escolher a opo
Exibir > Auxlios visuais > Elementos invisveis, defina as opes nas preferncias
de elementos invisveis. Por exemplo: possvel especificar que as ncoras com
nome devero estar visveis, mas no as quebras de linha.
possvel criar certos elementos invisveis (como comentrios, ncoras com nome
e scripts) utilizando os botes na categoria Invisveis do painel Objetos. Consulte
Como utilizar o painel Objetos na pgina 82. A seguir, possvel modificar estes
elementos utilizando o inspetor de propriedades.
Como definir as preferncias de elementos invisveis
Utilize as preferncias de elementos invisveis, para especificar quais tipos de
elementos que estaro visveis quando for selecionada a opo Exibir > Auxlios
visuais > Elementos invisveis.
Para alterar as preferncias de elementos invisveis:

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, significa que ele estar visvel
quando a opo Exibir > Auxlios visuais> Elementos invisveis for selecionada.

Para obter uma explicao de cada preferncia dos elementos invisveis, consulte a
Ajuda do Dreamweaver.

164

Captulo 5

Como utilizar as guias visuais no processo

de desenho
O Dreamweaver oferece diversos tipos de guias visuais para auxili-lo a projetar os
documentos e prever (aproximadamente) que aparncia eles tero nos
navegadores. Siga qualquer um dos procedimentos abaixo:

Ajuste instantaneamente a janela do documento ao tamanho desejado, para ver

como os elementos se ajustam pgina. Consulte Como redimensionar a
janela do documento na pgina 77.

Utilize as rguas para que sirvam como um guia visual ao posicionar e

redimensionar as camadas ou tabelas.

Utilize uma imagem de rastreamento como fundo da pgina, para ajud-lo a

duplicar um desenho criado em um aplicativo de edio de imagens ou
ilustraes, como o Macromedia Fireworks.

Utilize a grade para posicionar e redimensionar as camadas com preciso. As

marcas da grade na pgina ajudam a alinhar as camadas, e quando o encaixe for
ativado, as camadas se encaixaro automaticamente no ponto de grade mais
prximo, ao serem redimensionadas ou movidas. Outros objetos, como as
imagens e pargrafos, no se encaixam na grade. O encaixe funcionar
independentemente da visibilidade da grade. Consulte Como encaixar as
camadas na grade na pgina 448.
Como exibir as rguas
As rguas podem ser exibidas nas bordas superior e esquerda da pgina, marcadas
em pixels, polegadas ou centmetros.
Para alterar as configuraes de rgua, siga um dos procedimentos abaixo:

Para mostrar ou ocultar as rguas, escolha Exibir > Rguas > Mostrar.
Para alterar a origem, arraste o cone de origem da rgua para qualquer lugar na
pgina. Este cone aparecer no canto superior esquerdo da visualizao do
projeto da janela de documento enquanto as rguas forem exibidas. Para
redefinir a origem para a sua posio padro, escolha Exibir > Rguas >
Redefinir a origem.

Para alterar a unidade de medida, escolha Pixels, Polegadas ou Centmetros, no

submenu Exibir > Rguas.

Como configurar um documento

165

Como utilizar uma imagem de rastreamento

Utilize uma imagem de rastreamento como um guia para recriar o desenho de
uma pgina da qual foi feito um prottipo em um aplicativo grfico. As imagens
de rastreamento so imagens JPEG, GIF ou PNG que so colocadas no fundo da
janela do documento. possvel ocultar a imagem, definir a sua opacidade e
alterar a sua posio.
A imagem de rastreamento visvel apenas no Dreamweaver. Essa imagem nunca
pode ser vista quando a pgina for exibida em um navegador. Quando a imagem
de rastreamento estiver visvel, a imagem e a cor de fundo reais da pgina no
podero ser visualizadas na janela do documento; contudo, aparecero quando a
pgina for exibida em um navegador.
Para colocar uma imagem de rastreamento na janela do documento:

Siga um dos procedimentos abaixo:

Escolha Exibir > Imagem de rastreamento > Carregar.

Escolha Modificar > Propriedades da pgina e, em seguida, clique no boto
Procurar, junto caixa de texto Imagem de rastreamento.
2

Na caixa de dilogo que aparecer, selecione um arquivo de imagem e clique em

Selecionar (no Windows), ou Escolher (no Macintosh).

Aparecer a caixa de dilogo Propriedades da pgina. Especifique a

transparncia da imagem, arrastando o boto deslizante Transparncia da
imagem e, em seguida, clique em OK.
Para alternar para outra imagem de rastreamento ou alterar a transparncia da
imagem de rastreamento atual a qualquer hora, escolha Modificar >
Propriedades de pgina.

Para exibir ou ocultar a imagem de rastreamento:

Escolha Exibir > Imagem de rastreamento > Mostrar.

Para alterar a posio de uma imagem de rastreamento:

Escolha Exibir > Imagem de rastreamento > Ajustar a posio. Siga, ento, um dos
procedimentos abaixo:

Para especificar com preciso a posio da imagem de rastreamento, digite

valores de coordenadas nas caixas de texto X e Y.

Para mover a imagem um pixel de cada vez, utilize as teclas de seta

Para mover a imagem cinco pixels de cada vez, pressione a tecla Shift e uma
tecla de seta.

166

Captulo 5

Para redefinir a posio da imagem de rastreamento:

Escolha Exibir > Imagem de rastreamento > Redefinir a posio. A imagem de

rastreamento retornar ao canto superior esquerdo da janela de documento
(coordenadas 0,0).
Para alinhar a imagem de rastreamento a um elemento selecionado:

Selecione um elemento na janela do documento.

Escolha Exibir > Imagem de rastreamento > Alinhar com a seleo.

O canto superior esquerdo da imagem de rastreamento ser alinhado com o
canto superior esquerdo do elemento selecionado.

Como exibir e editar o contedo do

cabealho
Os arquivos HTML so compostos por duas sees principais: a seo head e a
seo body. A seo body a parte principal do documento, a parte visvel contendo
texto, imagens, etc. A seo head a parte invisvel, com exceo do ttulo do
documento, que aparece nas barras de ttulo das janelas dos navegadores e do
Dreamweaver. D um ttulo a cada pgina que criar.
A seo head contm tambm informaes importantes, que incluem o tipo de
documento, a codificao de idioma, as funes e variveis JavaScript e VBScript,
as palavras-chave e indicadores de contedo para os mecanismos de busca e as
definies de estilo. No necessrio fornecer todos estes elementos para cada
pgina; voc poder, por exemplo, fornecer as palavras-chave e indicadores de
contedo apenas da sua home page. Os elementos da seo head podem ser
exibidos utilizando o menu Exibir, a visualizao de cdigo da janela do
documento ou o inspetor de cdigo.
Para exibir os elementos da seo head de um documento:

Escolha Exibir > Contedo do cabealho. Para cada elemento do contedo do

head, aparecer um cone no alto da visualizao do projeto da janela do
documento.
Nota: Se a janela do documento estiver definida para mostrar somente a visualizao de
cdigo, a opo Exibir > Contedo do cabealho estar esmaecida.

Como configurar um documento

167

Para inserir um elemento na seo head de um documento:

Siga um dos procedimentos abaixo:

Escolha Cabealho, no menu pop-up situado no alto do painel Objetos, e

clique em um dos botes de objeto.

Escolha um item no submenu Inserir > Cabealho.

2

Insira as opes para o elemento na caixa de dilogo que aparecer ou no

inspetor de propriedades.

Para editar um elemento na seo head de um documento:

Escolha Exibir > Contedo do cabealho.

Clique em um dos cones na seo head para selecion-lo.

Defina ou modifique as propriedades do elemento no inspetor de propriedades.

Para obter informaes sobre as propriedades de determinados elementos do head,

consulte os seguintes tpicos na Ajuda do Dreamweaver:

propriedades do tag Meta

propriedades do ttulo
propriedades da palavra-chave
propriedades da descrio
propriedades de atualizao
Como editar um script
propriedades bsicas
propriedades do link

Sobre como automatizar as tarefas

Ao criar os seus documentos, voc pode desejar executar a mesma tarefa vrias
vezes. Esta seo explica como utilizar o painel Histrico para automatizar tarefas
repetitivas.
Para repetir uma srie de etapas uma ou duas vezes, reexecute-as diretamente no
painel Histrico, que registra as etapas que voc executou enquanto trabalha em
um documento. Para obter informaes bsicas sobre o painel Histrico, consulte
Sobre o painel Histrico na pgina 87. Para automatizar uma tarefa realizada
com freqncia, crie um novo comando que realiza a tarefa automaticamente.

168

Captulo 5

Alguns movimentos do mouse, como o ato de clicar ou arrastar para selecionar um

elemento na janela do documento, no podero ser executados novamente ou
salvos como parte dos comandos salvos. Ao realizar um destes movimentos,
aparecer uma linha preta no painel Histrico (embora a linha no estar bvia
enquanto uma outra ao no for efetuada). Para evitar movimentos que no
podem ser executados novamente, utilize as teclas de seta em vez do mouse, para
mover o ponto de insero na janela do documento. Para efetuar ou estender uma
seleo, mantenha pressionada a tecla Shift enquanto pressiona uma tecla de seta.
Nota: Se uma linha preta de indicao do movimento do mouse aparecer enquanto voc
estiver executando uma tarefa que deseja repetir mais tarde, possvel desfazer at antes
desta etapa e tentar novamente, talvez utilizando as teclas de seta.

Certas outras etapas tambm no podem ser repetidas, como arrastar um elemento
para outro local na pgina. Ao efetuar uma destas etapas, aparecer um cone de
comando de menu com um pequeno X vermelho no painel Histrico.
As etapas sero repetidas exatamente como elas foram executadas originalmente.
No possvel alter-las enquanto estiverem sendo executadas. Por exemplo: se a
cor de uma clula de tabela tiver sido anteriormente alterada para vermelho, a
aplicao da mesma etapa a uma outra clula de tabela tambm alterar a cor da
mesma para vermelho; no possvel especificar uma cor diferente quando a
mesma etapa for aplicada a uma nova clula.
Como repetir as etapas
Para repetir a ltima etapa executada, utilize o comando Editar >Repetir, ou utilize
o atalho do teclado, com as teclas Control e Y (no Windows), ou Command e Y
(no Macintosh). O nome deste comando do menu Editar alterado, refletindo a
ltima etapa efetuada; por exemplo: se a ltima etapa tiver sido a digitao de
texto, o nome do comando ser Repetir a digitao. No possvel utilizar o
comando Repetir imediatamente aps uma operao Desfazer ou Refazer.
Para repetir as etapas que diferirem da mais recente ou para repetir diversas etapas
simultaneamente, utilize o painel Histrico.
Observe que as etapas executadas novamente sero aquelas que tiverem sido
selecionadas (realadas) e no necessariamente a etapa indicada pelo controle
deslizante.
Para repetir uma etapa:

No painel Histrico, selecione a etapa e clique no boto Executar novamente. A

etapa ser executada novamente e uma cpia da mesma aparecer no painel
Histrico.

Como configurar um documento

169

Para repetir uma srie de etapas adjacentes:

Selecione as etapas no painel Histrico, seguindo um dos procedimentos

abaixo:

Arraste de uma etapa para outra. No arraste o controle deslizante, apenas

arraste do identificador de texto de uma etapa at o identificador de texto de
uma outra etapa.

Selecione a primeira etapa e, em seguida, pressionando a tecla Shift, clique na

ltima etapa, ou selecione a ltima etapa e depois, pressionando a tecla Shift,
clique na primeira etapa.
Nota: Embora seja possvel selecionar uma srie de etapas que incluem uma linha preta
de indicao do movimento do mouse, o movimento do mouse ser ignorado quando
voc executar as etapas novamente.

Clique em Executar novamente.

As etapas sero executadas novamente na ordem e uma nova etapa,
denominada Executar novamente as etapas, aparecer no painel Histrico.

Para repetir etapas no adjacentes:

Selecione uma etapa e, em seguida, clique nas outras etapas mantendo a tecla
Control pressionada (no Windows), ou a tecla Command pressionada (no
Macintosh).
Tambm possvel clicar na etapa selecionada, mantendo pressionada a tecla
Control (no Windows), ou a tecla Command (no Macintosh), para cancelar a
seleo da etapa.

Clique em Executar novamente.

As etapas selecionadas sero executadas novamente na ordem e uma nova etapa,
denominada Executar novamente as etapas, aparecer no painel Histrico.

Como aplicar etapas a um outro objeto

possvel aplicar um conjunto de etapas do painel Histrico a qualquer objeto na
janela do documento.
Para aplicar as etapas do painel Histrico a um novo objeto:

170

Captulo 5

Selecione o objeto.

Selecione as etapas relevantes no painel Histrico e, em seguida, clique em

Executar novamente.

Como aplicar etapas a vrios objetos

Se forem selecionados diversos objetos em um documento aos quais se aplicaro as
etapas do painel Histrico, os objetos sero tratados como uma nica seleo e o
Dreamweaver tentar aplicar as etapas a esta seleo combinada. Por exemplo: no
possvel selecionar cinco imagens e aplicar a mesma alterao de tamanho a cada
uma delas ao mesmo tempo. Uma alterao de tamanho uma operao que deve
ser aplicada a cada imagem individualmente e no a um conjunto de imagens.
Para aplicar uma srie de etapas a cada objeto em um conjunto de objetos,
necessrio que a ltima etapa da srie selecione o objeto seguinte do conjunto. O
seguinte procedimento demonstra este princpio numa determinada situao:
como definir o espaamento vertical e horizontal de uma srie de imagens.
Para definir o espaamento vertical e horizontal de uma srie de imagens:

Inicie com um documento no qual cada linha consiste de uma pequena

imagem (como um marcador grfico ou um cone) 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 nas caixas de texto Espao V e Espao H, a fim de definir o

espaamento entre as imagens.

Clique na barra de ttulo da janela do documento (em vez de clicar dentro

desta), para ativar a janela do documento sem mover o ponto de insero.

Pressione a tecla de seta esquerda, para mover o ponto de insero para a

esquerda da imagem. Em seguida, pressione a tecla de seta abaixo, para mover o
ponto de insero uma linha abaixo, deixando-o esquerda da segunda imagem
da srie. Pressione as teclas Shift e seta direita, para selecionar a segunda
imagem.
Nota: No selecione a imagem clicando na mesma, seno no ser possvel executar
todas as etapas novamente.

Como configurar um documento

171

Selecione as etapas do painel Histrico que correspondem alterao do

espaamento da imagem e seleo da imagem seguinte. Clique no boto
Executar novamente, para executar estas etapas novamente.

O espaamento da imagem atual ser alterado e a prxima imagem ser

selecionada.
8

Continue a clicar em Executar novamente, at que todas as imagens tenham

sido espaadas corretamente.

Para aplicar as etapas a um objeto em outro documento, utilize o boto Copiar as

etapas.
Como copiar e colar as etapas entre documentos
Cada documento aberto possui o seu prprio histrico de etapas. possvel copiar
as etapas de um documento e col-las em outro.
Nota: Copiar as etapas (um boto no painel Histrico) diferente de Copiar (no menu
Editar). No possvel utilizar Editar > Copiar, para copiar as etapas, embora elas sejam
coladas com o comando Editar > Colar.

O fechamento de um documento limpar o seu histrico. Se tiver certeza que

desejar utilizar etapas de um documento aps t-lo fechado, copie as etapas com
Copiar as etapas (ou salve-as como um comando; consulte Como criar novos
comandos a partir das etapas do histrico na pgina 173) antes de fechar o
documento.
Copie com cuidado as etapas que incluem um comando Copiar ou Colar:

No utilize Copiar as etapas se uma das etapas for um comando Copiar; talvez
no seja possvel colar estas etapas da maneira desejada.

Se as etapas inclurem um comando Colar, no ser possvel col-las, a no ser

que as etapas tambm incluam um comando Copiar antes do comando Colar.

172

Captulo 5

Se voc colar as etapas em um editor de texto ou na visualizao de cdigo ou no

inspetor de cdigo, elas aparecero como cdigo JavaScript. Este procedimento
poder ser til para aprender como gravar os seus prprios scripts. Para obter mais
informaes sobre como utilizar o JavaScript no Dreamweaver, consulte Como
estender os recursos do Dreamweaver: Princpios bsicos na pgina 575.
Para reutilizar as etapas de um documento em outro documento:

Inicie com o documento que contm as etapas a serem reutilizadas.

Selecione as etapas no painel Histrico.

Clique no boto Copiar as etapas, no painel Histrico, para copiar as etapas.

Abra o outro documento.

Coloque o ponto de insero no local desejado ou selecione um objeto ao qual

deseja aplicar as etapas.

Escolha Editar > Colar, para colar as etapas.

As etapas sero executadas novamente, medida que forem coladas no painel
Histrico do documento. O painel Histrico as mostrar como apenas uma
etapa, denominada Colar as etapas.

Como criar novos comandos a partir das etapas do histrico

possvel salvar um conjunto de etapas do histrico como um comando com
nome, que passar a estar disponvel no menu Comandos.
Crie e salve um novo comando se for provvel a necessidade de percorrer
novamente um determinado conjunto de etapas no futuro, especialmente se voc
desejar utilizar estas etapas quando iniciar o Dreamweaver; os comandos salvos
sero mantidos em carter permanente (a no ser que sejam excludos), enquanto
que os comandos gravados sero descartados quando voc sair do Dreamweaver e
as seqncias copiadas de etapas sero descartadas quando copiar outro elemento.
possvel editar ou excluir os nomes de comandos colocados no menu
Comandos, utilizando Comandos > Editar a lista de comandos. mais
complicado editar e excluir os comandos includos no menu Comandos (ou seja,
os comandos que no foram adicionados voluntariamente); consulte Sobre a
personalizao dos menus do Dreamweaver na pgina 557.

Como configurar um documento

173

Para criar um comando:

Selecione a etapa ou conjunto de etapas no painel Histrico.

Clique no boto Salvar como comando, ou escolha Salvar como comando, no

menu contextual do painel Histrico.

Digite o nome do comando e clique em OK.

O comando aparecer no menu Comandos.
Nota: O comando ser salvo como um arquivo JavaScript (ou s vezes como arquivo
HTML) na pasta Dreamweaver/Configuration/Commands.

Para poder utilizar um comando salvo:

Selecione um objeto ao qual deseja aplicar o comando ou coloque o ponto de

insero no local desejado.

Escolha o comando no menu Comandos.

Para editar os nomes de comandos no menu Comandos:

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:

174

Captulo 5

Escolha Comandos > Editar a lista de comandos.

Selecione um comando.

Clique em Excluir e, em seguida, em Fechar.

Como gravar comandos

O Dreamweaver permite a gravao de um comando temporrio destinado
utilizao por um perodo curto de tempo. So as seguintes as principais
diferenas entre esta abordagem e a execuo das etapas no painel Histrico
(consulte Como repetir as etapas na pgina 169):

As etapas so gravadas medida que forem efetuadas, dispensando a

necessidade de selecion-las no painel Histrico antes de execut-las.

Durante a gravao, o Dreamweaver impede que sejam efetuados movimentos

do mouse no-relacionados gravao (como o clique para selecionar um
elemento em uma janela ou arrast-lo para um novo local).

Se voc alternar para um outro documento durante a gravao, o Dreamweaver

no gravar as alteraes feitas no outro documento. Olhe para o ponteiro do
mouse para determinar se a gravao est se processando ou no em um
determinado momento.
O Dreamweaver manter apenas um comando gravado por vez; assim que for
iniciada a gravao de um novo comando, o antigo se perder. Para salvar um
novo comando sem perder um comando j gravado, salve o comando no painel
Histrico.
Uma vez gravado o comando, possvel salv-lo utilizando o painel Histrico.
Para gravar temporariamente uma srie de etapas utilizadas com freqncia:

Escolha Comandos > Iniciar a gravao, ou pressione as teclas Control, Shift e

X (no Windows), ou Command, Shift e X (no Macintosh).
O ponteiro ser alterado, indicando a gravao de um comando.

Quando terminar a gravao, escolha Comandos > Parar a gravao, ou

pressione as teclas Control, Shift e X (no Windows), ou Command, Shift e X
(no Macintosh).

Para executar um comando gravado:

Escolha Comandos > Executar o comando gravado, ou pressione as teclas Control

e P (no Windows), ou Command e P (no Macintosh).

Como configurar um documento

175

Para salvar um comando gravado:

Escolha Comandos > Executar o comando gravado, para executar o comando.

Aparecer uma etapa, denominada Executar o comando, na lista de etapas do
painel Histrico.

Selecione a etapa Executar o comando e clique no boto Salvar como comando.

Digite o nome do comando e clique em OK.

O comando aparecer no menu Comandos.

176

Captulo 5

CAPTULO 6

Como projetar o layout de pgina

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

O layout de pgina uma parte importante do projeto da Web. O termo layout de

pgina se refere aparncia que a pgina ter no navegador, como a posio de um
menu ou as imagens, por exemplo. O Macromedia Dreamweaver proporciona
diversas maneiras de criar e controlar o layout da pgina da Web.
Um mtodo comum de criar o layout de pgina consiste na utilizao de tabelas
HTML. No entanto, as tabelas podem ser de difcil utilizao, porque elas no
foram originalmente criadas para o layout de pgina da Web, mas sim para exibir
dados tabulares.
Para simplificar o processo de utilizao de tabelas para o layout de pgina, o
Dreamweaver conta com a visualizao de layout. Na visualizao de layout
possvel projetar a pgina utilizando tabelas como estrutura subjacente. Contudo,
evite cometer os erros associados sua utilizao. Por exemplo: possvel desenhar
clulas (clulas de tabela) na pgina com facilidade e, em seguida mov-las para
onde desejar. O layout pode ter uma largura fixa ou se expandir, at ocupar toda a
janela do navegador (consulte Como definir a largura do layout na pgina 189).
Ainda possvel dispor as suas pginas utilizando tabelas segundo a maneira
tradicional (consulte Como utilizar as tabelas para apresentar o contedo na
pgina 195), ou utilizando camadas e depois convertendo-as em tabelas (consulte
Como utilizar as tabelas e camadas para o layout na pgina 455). No entanto, a
visualizao de layout do Dreamweaver a forma mais fcil de definir o layout da
pgina.
Para utilizar a visualizao de layout, necessrio sair da visualizao padro do
Dreamweaver.

177

Para passar visualizao de layout:

Escolha Exibir > Visualizao de tabela> Visualizao de layout, ou clique no

boto Visualizao de layout, no painel Objetos.
cone de Desenhar a clula de layout
cone de Desenhar a tabela de layout
cone de Visualizao de layout

A opo Mostrar as guias da tabela de layout est automaticamente ativada na

visualizao de layout. Para desativar guias da tabela quando estiver na visualizao
de layout, escolha Exibir > Visualizao de tabela > Mostrar as guias da tabela de
layout.
Nota: Se a tabela for criada na visualizao padro do Dreamweaver, ento alterne para a
visualizao de layout. possvel que a tabela tenha clulas de layout vazias, que devero
ser excludas para criar novas clulas.

Sobre as clulas e tabelas de layout

Quando alternar para a visualizao de layout, voc poder adicionar clulas de
layout pgina. Estas clulas o auxiliaro a delinear o layout da pgina. Por
exemplo: possvel desenhar uma clula ao longo do alto da pgina, para conter
um menu, uma clula no lado direito da pgina, para submenus, e uma clula
junto a esta, para exibir o contedo dos submenus. til pensar no layout em
termos de uma grade com linhas e colunas.

178

Captulo 6

Quando uma clula de layout for criada na pgina, o Dreamweaver

automaticamente criar uma tabela de layout como um recipiente para a clula.
Uma clula de layout no pode existir fora de uma tabela de layout. possvel
criar a pgina de layout utilizando diversas clulas de layout em uma tabela de
layout, ou utilizar tabelas de layout mltiplas, para obter um layout mais
avanado.
A utilizao de tabelas de layout mltiplas isolar certas sees do layout, para que
elas no sejam afetadas por outra seo. Este recurso especialmente til se o
contedo de uma clula de layout puder ser alterado e causar a expanso da clula.
Quando a clula cresce, as clulas prximas a ela sero afetadas, porque elas no
podem se sobrepor. Se tiver criado o layout com tabelas de layout mltiplas, as
linhas e colunas de uma tabela no afetaro outras tabelas.
Tambm possvel aninhar as tabelas de layout (inserindo uma tabela de layout
em uma tabela de layout j existente). As clulas dentro de uma tabela aninhada
no esto restritas pelas linhas e colunas da tabela exterior. Consulte Como
desenhar uma tabela de layout aninhada na pgina 182.

Como desenhar clulas e tabelas de layout

possvel desenhar clulas e tabelas de layout na pgina enquanto estiver na
visualizao de layout. Se, inicialmente, criar uma clula de layout, ser
automaticamente inserida uma tabela de layout, para funcionar como um
recipiente para a clula de layout. Sempre haver uma clula de layout numa
tabela de layout.
Nota: A tabela de layout que automaticamente criada pelo Dreamweaver ter a largura
da janela do documento. possvel modificar o seu tamanho ou provocar o seu
alongamento automtico, se necessrio.
Para desenhar uma clula de layout:

Assegure-se de estar na visualizao de layout e, em seguida, clique no boto

Desenhar a clula de layout, na categoria Layout, no painel Objetos. O
ponteiro do mouse se transformar em um sinal de adio (+).

Posicione o ponteiro do mouse onde deseja comear a clula na pgina e, em

seguida, arraste-o para criar a clula de layout. Para criar algumas clulas sem ter
que clicar no boto Clula de layout a cada vez, mantenha pressionada a tecla
Control (no Windows), ou a tecla Command (no Macintosh).

A clula ser contornada em azul na pgina. O azul a cor de contorno padro das
clulas de layout. Consulte Como definir as preferncias de visualizao de
layout na pgina 194 para modific-la. O tamanho de cada clula exibido na
rea do cabealho da coluna, no alto da clula. Para obter mais informaes sobre
a largura, consulte Como definir a largura do layout na pgina 189.

Como projetar o layout de pgina

179

O layout da pgina segue uma grade de colunas e linhas, para que as clulas
possam abranger diversas colunas ou linhas. Porm, elas nunca podero se
sobrepor umas s outras na pgina. O Dreamweaver o auxilia a manter esta
estrutura, encaixando automaticamente as novas clulas que forem criadas nas
clulas j existentes, se voc as desenhar prximas umas das outras (afastadas a at
8 pixels de distncia). As clulas se encaixaro automaticamente no lado da pgina,
se as desenhar junto extremidade (afastadas a at 8 pixels). Para desativar
temporariamente o encaixe, pressione a tecla Alt (no Windows), ou a tecla Option
(no Macintosh) enquanto desenha a clula na pgina.

Isto no implica na necessidade de que todas as clulas tenham o mesmo tamanho

ou largura. possvel que as clulas de uma mesma coluna tenham diferentes
larguras, ou diferentes alturas, em uma mesma linha.

180

Captulo 6

Para desenhar uma tabela de layout:

Assegure-se de estar na visualizao de layout e, em seguida, clique no boto

Desenhar a tabela de layout, na categoria Layout, no painel Objetos. O
ponteiro do mouse se transformar em um sinal de adio (+).

Posicione o ponteiro do mouse na pgina e, em seguida, clique e arraste o

mouse, para criar a tabela de layout. Se esta for a primeira tabela que estiver
desenhando na pgina, ela ser automaticamente posicionada no canto superior
esquerdo da pgina.
Para criar algumas tabelas sem ter que clicar no boto Tabela de layout a cada
vez, mantenha pressionada a tecla Control (no Windows), ou a tecla Command
(no Macintosh).

A tabela ser contornada em verde na pgina. O verde a cor de contorno padro

das tabelas de layout. Consulte Como definir as preferncias de visualizao de
layout na pgina 194 para modific-la. Uma guia de tabela de layout tambm
aparece no alto de cada tabela que for desenhada e auxilia a distinguir e selecionar
a tabela. O tamanho da cada tabela exibido na rea do cabealho da coluna , no
alto da tabela.

Para obter mais informaes sobre a largura, consulte Como definir a largura do
layout na pgina 189.
No possvel sobrepor tabelas. O layout da pgina segue uma grade de colunas e
linhas, para que as tabelas possam abranger diversas linhas ou colunas. Porm, elas
nunca podero se sobrepor umas s outras na pgina. O Dreamweaver o auxilia a
manter esta estrutura, encaixando automaticamente as novas tabelas que forem
criadas nas tabelas ou clulas j existentes, se voc as desenhar prximas umas das
outras (afastadas a at 8 pixels de distncia). As tabelas se encaixaro
automaticamente no lado da pgina, se as desenhar junto extremidade (afastadas
a at 8 pixels). Para desativar o encaixe, pressione a tecla Alt (no Windows), ou a
tecla Option (no Macintosh) enquanto desenha a tabela na pgina.
possvel criar tabelas de layout em reas vazias do layout da pgina, em uma
tabela de layout j existente (aninhamento) ou ao redor de clulas e tabelas de
layout j existentes. Quando voc criar uma tabela de layout em um documento
vazio, ela se encaixar automaticamente no canto superior esquerdo da janela de
documento.
Nota: Se a pgina j apresentar algum contedo, s ser possvel desenhar a tabela de
layout abaixo da parte inferior do mesmo.

Como projetar o layout de pgina

181

Para desenhar uma tabela de layout ao redor de clulas e tabelas j existentes:

Assegure-se de estar na visualizao de layout e, em seguida, clique no boto

Desenhar a tabela de layout, na categoria Layout, no painel Objetos. O
ponteiro do mouse se transformar em um sinal de adio (+).

Clique e arraste o mouse ao redor das clulas e tabelas de layout existentes. A

tabela de layout ir incorporar as clulas e tabelas existentes.

Como desenhar uma tabela de layout aninhada

possvel desenhar uma tabela de layout numa tabela de layout j existente (este
recurso cria uma tabela aninhada). As clulas dentro de uma tabela aninhada no
esto restritas pelas linhas e colunas da tabela exterior. possvel inserir diversas
tabelas aninhadas.

Para desenhar uma tabela aninhada:

Clique no boto Desenhar a tabela de layout, na categoria Layout, no painel

Objetos. O ponteiro do mouse se transformar em um sinal de adio (+).

Posicione o ponteiro do mouse no espao cinza de uma tabela de layout

existente e, em seguida, clique e arraste o mouse para criar a tabela de layout
aninhada.

Uma tabela de layout aninhada no pode ser maior do que a tabela que a contm.

182

Captulo 6

Como utilizar a grade do Dreamweaver

possvel ativar a grade do Dreamweaver, para utiliz-la como um guia, quando
estiver desenhando o seu layout. possvel encaixar automaticamente o layout na
grade, alter-la ou controlar o comportamento de encaixe, atravs da especificao
das configuraes de grade.
Para exibir ou ocultar a grade na janela do documento:

Escolha Exibir > Grade > Mostrar a grade, ou selecione a opo Grade, no menu
suspenso Opes, na barra de ferramentas.
Para alterar as definies de grade:

Clique em Exibir > Grade > Editar a grade, para abrir a clula de dilogo
Definies de grade.

Siga qualquer um dos procedimentos abaixo:

Clique na seta prxima amostra de cor e selecione a cor na paleta ou digite o

nmero hexadecimal na clula. Este recurso controla a cor das linhas da grade.

Selecione Mostrar a grade, para mostrar a grade na janela do documento.

Selecione Encaixar na grade, para possibilitar o encaixe.
Digite o fator de espaamento que deseja e, no menu pop-up, selecione Pixels,
Polegadas ou Centmetros. Este recurso controla a distncia entre as linhas da
grade.

Escolha linhas ou pontos para as linhas de grade.

3

Clique em Aplicar, para visualizar as alteraes e depois em OK, para fechar a

caixa de dilogo.

Como adicionar contedo a uma clula

possvel adicionar texto, imagens e outros tipos de mdia s clulas de layout na
visualizao de layout, assim como voc o faria na exibio normal do
Dreamweaver (visualizao padro). Clique na clula onde dever ser inserido o
contedo e, em seguida, digite o texto ou insira outros arquivos.
O contedo s pode ser inserido numa clula de layout, portanto voc dever criar
inicialmente as clulas de layout (consulte Como desenhar clulas e tabelas de
layout na pgina 179). Os espaos cinzas na sua pgina indicam as reas que no
esto disponveis para adicionar contedo, a no ser que voc insira uma clula de
layout nessas reas.

Como projetar o layout de pgina

183

Se voc adicionar um material maior do que a clula de layout, esta se expandir

automaticamente. Quando a clula se expandir, as clulas ao seu redor podem ser
afetadas, e a coluna em que a clula se encontra tambm se ampliar.

Para adicionar texto a uma clula:

Clique na clula de layout em que deseja inserir o texto e siga um dos

procedimentos abaixo:

Digite o texto na clula. A clula se expandir automaticamente medida que o

texto for digitado.

Cole o texto copiado de outro documento. Utilize o comando Colar. Para obter
mais informaes, consulte Como inserir texto e objetos na pgina 252.
Para adicionar uma imagem a uma clula:

Clique na clula de layout onde deseja adicionar a imagem.

Clique no boto Inserir a imagem, no painel Objetos, escolha Inserir >

Imagem, ou arraste o boto Inserir a imagem, no painel Objetos da pgina.

Na caixa de dilogo Selecionar a imagem, escolha um arquivo de imagem.

Para obter mais informaes, consulte Como definir as propriedades da imagem

na pgina 292.
Como limpar as alturas das clulas
Aps inserir o contedo nas suas clulas, voc pode limpar as alturas das clulas
para remover a definio. O Dreamweaver cria automaticamente as clulas com
uma determinada altura, mas uma vez adicionado o contedo clula, esta altura
no ser mais necessria.

184

Captulo 6

Para limpar as alturas, siga um dos procedimentos abaixo:

Selecione Limpar as alturas das clulas, no menu Cabealho da coluna. As

alturas sero limpas e algumas linhas podero se contrair.

Selecione uma tabela de layout (clique na guia ou na extremidade da tabela) e,

em seguida, clique no boto Limpar as alturas das linhas, no inspetor de
propriedades.

Como mover e redimensionar as clulas e

tabelas de layout
Todas as clulas e tabelas no layout podem ser movidas e redimensionadas, o que
facilita o ajuste do layout da pgina. Para poder utilizar a grade do Dreamweaver
como guia enquanto move ou redimensiona as clulas e tabelas, consulteComo
utilizar a grade do Dreamweaver na pgina 183.
Para redimensionar uma clula:

Clique na extremidade da clula ou, mantendo pressionada a tecla Control (no

Windows), ou a tecla Command (no Macintosh), clique em qualquer ponto da
clula.
Aparecero alas de seleo ao redor da clula.

Utilize as alas de seleo para aumentar a clula at o tamanho desejado.

A clula se encaixar automaticamente s clulas existentes (se estiver afastada at

8 pixels das suas bordas). Uma clula de layout no pode se sobrepor s outras
clulas e no possvel redimension-la fora dos limites da tabela de layout a ela
correspondente. Uma clula de layout pelo menos to grande quanto o contedo
nela compreendido.

Como projetar o layout de pgina

185

Para mover uma clula:

Clique na extremidade da clula.

Arraste a clula at onde desejar na pgina ou utilize as teclas de seta. A tecla de

seta mover a tabela um pixel por vez. Se a tecla Shift for mantida pressionada,
a tabela ser movida 10 pixels por vez.

Para redimensionar uma tabela:

Clique na guia da tabela.

Aparecero alas de seleo ao redor da tabela de layout.

Utilize as alas de seleo para arrastar a tabela at o tamanho desejado.

A tabela se encaixar automaticamente s clulas e tabelas existentes (se estiver

afastada at 8 pixels da clula existente). A tabela de layout no pode ser
redimensionada a um tamanho menor do que o limite das clulas nela
compreendidas. Ela tambm no pode ser redimensionada de maneira a se
sobrepor tabelas e clulas vizinhas.
Para mover uma tabela:

186

Captulo 6

Clique na guia da tabela.

Arraste a tabela at onde desejar na pgina ou utilize as teclas de seta. A tecla de

seta mover a tabela um pixel por vez. Se a tecla Shift for mantida pressionada,
a tabela ser movida 10 pixels por vez.

Como formatar as clulas e tabelas de

layout
A aparncia de qualquer clula ou tabela de layout pode ser alterada no inspetor de
propriedades.
Como formatar uma clula de layout
possvel definir o alinhamento, a largura, altura e as cores de fundo do contedo
no inspetor de propriedades.

Para formatar uma clula de layout no inspetor de propriedades:

Clique na extremidade da clula ou, mantendo pressionada a tecla Control (no

Windows), ou a tecla Command (no Macintosh), clique em qualquer ponto da
clula.

Escolha Janela > Propriedades, para abrir o inspetor de propriedades.

Escolha dentre as seguintes opes de aparncia:

Para alterar a largura, escolha Fixa e digite uma largura na caixa, em pixels, ou
escolha Alongamento automtico (consulte Como definir a largura do layout
na pgina 189).

Para alterar a altura, especifique a altura na caixa de texto, em pixels.

Para definir a cor de fundo da clula de layout, escolha a cor no seletor de cores,
ou digite o cdigo hexadecimal correspondente cor que deseja na caixa de
texto.

Para definir o alinhamento horizontal, selecione no menu pop-up Horizontal.

possvel definir o alinhamento dos contedos da clula de layout, tanto para a
esquerda, quanto para o centro, direita ou padro.

Para definir o alinhamento vertical, selecione no menu pop-up Vertical.

possvel definir o alinhamento dos contedos da clula de layout, tanto para a
cima, quanto para o meio, baixo, linha de base ou padro.

Selecione Sem quebra, para impedir a quebra automtica de linhas. Se

selecionada, a clula de layout se alargar para acomodar todo o contedo, sem
quebrar para uma nova linha.

Como projetar o layout de pgina

187

Como formatar as tabelas de layout

possvel definir a largura e altura, o preenchimento e o espaamento, entre
outros, no inspetor de propriedades.

Para formatar uma tabela de layout:

Clique na guia ou extremidade da tabela.

Escolha Janela > Propriedades, para abrir o inspetor de propriedades.

Escolha dentre as seguintes opes de aparncia:

Para alterar a largura, escolha Fixa e digite uma largura na caixa, em pixels, ou
escolha Alongamento automtico (consulte Como definir a largura do layout
na pgina 189).

Para alterar a altura, especifique a altura no campo de texto, em pixels.

Para definir o preenchimento da clula, especifique o nmero de pixels no
campo Preenchimento da clula. O preenchimento da clula especifica o espao
entre o contedo da clula de layout e os seus limites (ou parede). Quando o
espaamento for definido acima de 0, todas as clulas de layout na tabela
selecionada tero este espaamento. Se houver dois nmeros que aparecem na
rea de cabealho da coluna, utilize a opo Tornar consistentes as larguras,
abaixo.

Para definir o espaamento da clula, especifique o nmero de pixels no campo

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

Para limpar as definies de altura de todas as clulas na tabela de layout

selecionada, clique no boto de atributos Limpar a altura. Se no houver
elementos na tabela, esta ser completamente fechada.

188

Captulo 6

 Se o layout apresentar clulas de largura fixa, clique no boto Tornar

consistentes as larguras. Este recurso redefine automaticamente as larguras
HTML das clulas, tornando-as coincidentes com o seu respectivo contedo.
Por exemplo: se tiver definido a largura como 200 pixels e, subseqentemente,
tiver adicionado contedo com largura superior a 250, sero exibidos os dois
nmeros seguintes na barra superior tabela: 250 entre aspas e 200 entre
parnteses. Ao clicar na opo Tornar consistentes as larguras, a definio de
200 pixels ser removida e a de 250 ser mantida.

Para remover as imagens espaadoras (imagens transparentes que so utilizadas

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

Se a tabela de layout selecionada estiver aninhada dentro de outra tabela, clique

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

Como definir a largura do layout

Existem dois tipos de larguras que podem ser utilizadas na visualizao de layout:
Largura fixa e Alongamento automtico. A largura aparece na rea do cabealho da
coluna, no alto de cada coluna. A largura fixa uma largura numrica especfica
(como 300 pixels) e exibida como um nmero. O alongamento automtico
redimensiona a largura automaticamente, dependendo do tamanho da janela, e
exibido como uma linha ondulada. Com o alongamento automtico o layout
ocupar a janela do navegador, independente do tamanho de janela que o usurio
tiver definido. Embora a largura fixa seja a definio padro, normalmente
algumas clulas ou tabelas de layout sero definidas com a largura fixa, enquanto
uma poder apresentar o alongamento automtico. As definies que especificar
afetaro todas as clulas ou tabelas naquela coluna. Apenas uma coluna num
layout pode ter alongamento automtico.

Como projetar o layout de pgina

189

Por exemplo: suponha que o layout inclua uma barra de menu no lado esquerdo
da pgina, o ttulo no alto e a rea do contedo principal no lado direito.
possvel definir a coluna da esquerda como tendo a largura fixa e a rea do
contedo principal como tendo alongamento automtico.

190

Captulo 6

Para definir a largura de alongamento automtico, siga um dos procedimentos

abaixo:

V para o alto da coluna qual deseja definir o alongamento automtico e

selecione Provocar o alongamento automtico da coluna, no menu Cabealho
da coluna. Apenas uma coluna pode ter alongamento automtico.

Selecione a coluna e clique no boto Alongamento automtico, no inspetor de

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

V para o alto da coluna qual deseja definir a largura fixa e selecione Tornar
fixa a largura da coluna, no menu Cabealho da coluna.
O recurso Tornar fixa a largura da coluna define automaticamente a largura da
coluna, para que coincida com o seu respectivo contedo.

No inspetor de propriedades, clique na opo Fixa e digite um valor numrico.

Se voc inserir um valor numrico menor do que a largura do contedo, o
Dreamweaver definir automaticamente o nmero correto de pixels da largura.
s vezes, dois nmeros aparecero no menu Cabealho da coluna: a largura real da
coluna e a largura que aparece no cdigo HTML. Isto pode acontecer por diversas
razes, como a insero de contedo mais largo do que a largura desenhada ou
especificada. recomendvel tornar consistentes as larguras, para que somente um
nmero aparea.
Para tornar consistente a largura (para que apenas a largura real seja
especificada):

Selecione Tornar consistentes as larguras das clulas, no menu Cabealho da

coluna.

Como projetar o layout de pgina

191

Como utilizar imagens espaadoras

As imagens espaadoras so imagens transparentes que no so visveis na janela
do navegador, mas que so utilizadas para controlar o espaamento em tabelas de
alongamento automtico. A imagen espaadora mantm a largura que voc tiver
definido para cada tabela e clula na pgina. Se preferir no utilizar as imagens
espaadoras em tabelas de alongamento automtico, o tamanho das colunas ser
modificado ou estas desaparecero, se no apresentarem contedo.
possvel inserir e remover as imagens espaadoras de cada coluna ou permitir
que o Dreamweaver adicione-as automaticamente, quando criar uma coluna de
alongamento automtico. As colunas que contm imagens espaadoras possuem
uma barra dupla no alto.
Quando voc inserir uma imagem espaadora em uma coluna ou definir o
alongamento automtico da coluna, aparecer uma caixa de dilogo, que indagar
como voc deseja configurar o arquivo da imagem espaadora. Se voc j tiver
definido uma imagem espaadora para o site nas preferncias do Dreamweaver, a
caixa de dilogo no aparecer. Consulte Como definir as preferncias de
visualizao de layout na pgina 194.
Para definir a imagem espaadora:

Defina uma coluna como alongamento automtico ou escolha Adicionar uma

imagem espaadora, no menu Cabealho da coluna.

Na caixa de dilogo que aparecer, escolha dentre as seguintes opes:

Informe ao Dreamweaver onde criar o arquivo da imagem espaadora: Se

selecionar esta opo e clicar em OK, aparecer outra caixa de dilogo, que lhe
permitir navegar at o diretrio do site onde deseja armazenar o arquivo da
imagem espaadora, como uma pasta de imagens, por exemplo. Esta a opo
recomendada.

Procure um arquivo existente de imagem espaadora: Se j tiver criado um

arquivo da imagem espaadora para o site, escolha esta opo e depois navegue
at a imagem espaadora, na prxima caixa de dilogo que aparecer. A imagem
espaadora dever ser um GIF transparente de 1 pixel por 1 pixel.

192

Captulo 6

 Desative as imagens espaadoras para as colunas de alongamento automtico:

Se selecionar esta opo, aparecer uma caixa de dilogo avisando-o de que
outras colunas do layout podero ser reduzidas para uma largura menor. Se
escolher no usar imagens espaadoras, as larguras das colunas tero o mesmo
tamanho que o contedo destas. As colunas sem contedo se reduziro a nada.
A Ajuda relativa s imagens espaadoras mantm a estrutura do layout como
voc originalmente o tiver definido.
possvel inserir e remover as imagens espaadoras em colunas especficas ou
remover todas as imagens espaadoras da pgina.
Para inserir uma imagem espaadora numa coluna:

Selecione Adicionar imagem espaadora, no menu Cabealho da coluna. A

imagem espaadora ser inserida na coluna. Voc no ver a imagem, mas a coluna
poder se deslocar levemente e uma barra dupla aparecer no alto.
Para remover uma imagem espaadora de uma coluna:

Selecione Remover a imagem espaadora, no menu Cabealho da coluna. A

imagem espaadora ser removida e a coluna poder se deslocar.
Para remover todas as imagens espaadoras da pgina:

Selecione Remover todas as imagens espaadoras, no menu Cabealho da coluna,

ou clique no boto Remover todas as imagens espaadoras, no inspetor de
propriedades da tabela de layout. O layout completo poder se deslocar levemente
ou dramaticamente, dependendo do contedo. Se no houver contedo em
algumas colunas, estas podero desaparecer completamente.

Como projetar o layout de pgina

193

Como definir as preferncias de

visualizao de layout
Utilize a categoria Visualizao de layout, nas preferncias, para definir ou alterar
os arquivos e locais das imagens espaadoras, bem como as cores que a visualizao
de layout utiliza para desenhar as tabelas, clulas, e assim por diante.
Para abrir as preferncias de visualizao de layout:

Escolha Editar > Preferncias e, em seguida, selecione Visualizao de layout, na

lista de categorias.
Espaadores de insero automtica especifica se o Dreamweaver dever ou no
inserir automaticamente imagens espaadoras quando for provocado o
alongamento automtico de uma coluna.
Imagem espaadora define o arquivo de imagem espaadora dos sites. Escolha um

site no menu suspenso e, em seguida, crie uma nova imagem espaadora ou

procure uma imagem j existente naquele site.
Contorno da clula

define a cor a ser utilizada para desenhar o contorno da clula.

Realce da clula define a cor que realar a clula, quando voc escolh-la ou
mover o mouse sobre ela.
Contorno da tabela
Fundo da tabela

194

Captulo 6

define a cor a ser utilizada para desenhar o contorno da tabela.

define a cor de fundo da janela do documento.

CAPTULO 7

Como utilizar as tabelas para

apresentar o contedo
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

As tabelas so uma ferramenta muito avanada para organizar os dados e as

imagens em uma pgina HTML. As tabelas proporcionam aos designers da Web
um meio de adicionar uma estrutura horizontal e vertical a uma pgina.
As tabelas consistem de trs componentes bsicos:

Linhas (espaamento horizontal)

Colunas (espaamento vertical)
Clulas (o recipiente criado pela interseo de uma linha e uma coluna)

195

Utilize as tabelas para organizar os dados tabulares, desenhar colunas em uma

pgina ou organizar texto e imagens em uma pgina da Web. Aps a criao da
tabela, a aparncia e a estrutura desta podem ser facilmente modificadas.
possvel incluir contedo; adicionar, excluir, dividir ou mesclar as linhas e colunas;
modificar as propriedades de tabelas, linhas ou clulas, para adicionar cor e
alinhamento, e copiar e colar clulas.
Nota: recomendvel utilizar a visualizao de layout para visualizar o layout de pgina
(Consulte Como projetar o layout de pgina na pgina 177). A visualizao de layout
uma maneira fcil de se implementar a sua pgina de layout com tabelas como estrutura
subjacente. Utilize tabelas no Dreamweaver para adicionar dados tabulares pgina.

Como inserir uma tabela

Utilize o painel Objetos ou o menu Inserir, para criar uma nova tabela.
Para inserir uma tabela:

Siga um dos procedimentos abaixo:

Na janela do documento, coloque o ponto de insero no local onde deseja

inserir a tabela na pgina e clique no boto Tabela, na categoria Comuns do
painel Objetos, ou escolha Inserir > Tabela.

Arraste o boto Tabela, do painel Objetos at o local escolhido na pgina.

Aparecer a caixa de dilogo Inserir tabela.
2

Nessa caixa de dilogo, aceite os valores ou digite novos valores.

Nota: A caixa de dilogo Inserir tabela retm os valores das definies mais recentes
digitadas para uma tabela.

No campo Linhas, especifique o nmero de linhas da tabela.

No campo Colunas, especifique o nmero de colunas da tabela.
No campo Preenchimento da clula, especifique o nmero de pixels entre o
contedo da clula e os seus limites (ou parede). O preenchimento padro 1
pixel. Insira 0 (zero), para no preencher.

196

Captulo 7

 No campo Espaamento entre as clulas, especifique o nmero de pixels entre

cada clula da tabela. O espaamento padro 2 pixels. Insira 0 (zero), para no
espaar.

No campo Largura, especifique a largura da tabela, em pixels, ou como uma

percentagem da janela do navegador.

No campo Borda, especifique 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 especificar inicialmente essas opes,
desative a opo Mostrar a caixa de dilogo quando inserir objetos, nas
preferncias gerais. Consulte Como definir as preferncias na pgina 92.
Como adicionar o contedo a uma clula da tabela
Podem ser adicionados texto e imagens s clulas da tabela.

Para adicionar texto a uma tabela:

Clique em uma clula na qual deseja adicionar o texto e siga um dos

procedimentos abaixo:

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. Consulte Como inserir texto e

objetos na pgina 252.
2

Pressione a tecla de tabulao, para deslocar-se para a prxima clula, ou as

teclas Shift e de tabulao, para voltar clula anterior. Quando a tecla de
tabulao for pressionada na ltima clula de uma tabela, ser adicionada
automaticamente outra linha tabela.
possvel utilizar tambm as teclas de seta para mover-se entre as clulas.

Como utilizar as tabelas para apresentar o contedo

197

Para adicionar uma imagem a uma tabela:

Clique na clula na qual ser inserida a imagem.

Clique no boto Inserir imagem, na categoria Comuns do painel Objetos, ou

escolha Inserir > Imagem.

Na caixa de dilogo Selecionar a origem da imagem, escolha um arquivo de

imagem.

Para obter informaes sobre a definio das propriedades da imagem, consulte

Como definir as propriedades da imagem na pgina 292.
Como importar os dados da tabela
Os dados criados em outro aplicativo (como o Microsoft Excel) e salvos em um
formato delimitado (separados por tabulaes, vrgulas, dois pontos, ponto-evrgula ou outros delimitadores), podem ser importados para o Dreamweaver e
reformatados como uma tabela.
Para importar os dados da tabela:

Siga um dos procedimentos abaixo:

Escolha Arquivo > Importar > Importar os dados tabulares.

Escolha Inserir > Dados tabulares.
Aparecer a caixa de dilogo Importar os dados da tabela ou Inserir dados
tabulares, dependendo da sua seleo. Com exceo dos ttulos, essas caixas de
dilogo so idnticas.

198

Captulo 7

Digite o nome do arquivo a ser importado, no campo Arquivo de dados.

No menu pop-up Delimitador, selecione o formato do delimitador que

corresponde ao formato do documento a ser importado.
Se for selecionado Outro, aparecer um campo direita do menu pop-up.
Digite o delimitador utilizado para separar os dados da tabela.
Nota: Caso voc no selecione (ou especifique) o delimitador utilizado quando o
arquivo foi salvo, o arquivo no ser importado de modo adequado e os dados no
sero formatados corretamente na tabela. No ser exibida uma mensagem de erro ou
de advertncia para alert-lo sobre a ocorrncia do problema.

Para Largura da tabela, selecione uma das seguintes opes:

Selecione Ajustar aos dados, para criar uma tabela que se ajuste seqncia de
caracteres mais longa em cada coluna.

Selecione Definir, para especificar a largura da tabela como uma percentagem

da janela do navegador ou como um nmero de pixels.
5

Selecione as opes de formatao da tabela:

No campo Preenchimento da clula, especifique o nmero de pixels entre o

contedo da clula e os seus limites (ou parede).

No campo Espaamento entre as clulas, especifique 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, especifique a largura, em pixels, da borda da tabela. Digite 0,

para que no haja borda.
6

Clique em OK.

Como utilizar as tabelas para apresentar o contedo

199

Como selecionar os elementos da tabela

Basta um gesto para selecionar uma tabela inteira, uma linha ou coluna, ou uma
faixa de clulas contguas na tabela. Depois da seleo da tabela ou de clulas
individuais, possvel:

Modificar a aparncia das clulas selecionadas ou do texto nelas contido.

Consulte Como formatar as tabelas e clulas na pgina 201.

Copiar e colar clulas adjacentes. Consulte Como copiar e colar as clulas na

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

Clique no canto superior esquerdo da tabela ou em qualquer ponto da

extremidade direita ou inferior.

Clique uma vez na tabela e escolha Modificar > Tabela > Selecionar a tabela.
Clique uma vez na tabela e escolha Editar > Selecionar tudo.
Posicione o ponto de insero em qualquer lugar dentro da tabela e selecione o
tag <table>, no seletor de tags, no canto inferior esquerdo da janela do
documento.
Aparecero alas de seleo ao redor da tabela, quando esta for selecionada.

Para selecionar as colunas e linhas, siga um dos procedimentos abaixo:

Posicione o ponto de insero na margem esquerda de uma linha ou no alto de

uma coluna. Clique quando a seta de seleo aparecer.

Clique em uma clula e arraste horizontal ou verticalmente, para selecionar

diversas linhas ou colunas.

200

Captulo 7

Para selecionar uma ou mais clulas, siga um dos procedimentos abaixo:

Clique em uma clula e arraste-a vertical ou horizontalmente, at uma outra

clula.

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

clula. Todas as clulas que estiverem dentro da regio retangular sero
selecionadas.

Para selecionar clulas descontguas, siga um dos procedimentos abaixo:

Pressione a tecla Control (no Windows), ou Command (no Macintosh), e

clique na tabela para adicionar clulas, linhas ou colunas seleo.

Selecione diversas clulas na tabela e, em seguida, pressione a tecla Control (no

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

Como formatar as tabelas e clulas

A aparncia das tabelas pode ser alterada pela definio de propriedades da tabela e
clulas, ou pela aplicao de um desenho predefinido tabela. Consulte Como
definir as propriedades da tabela na pgina 203, Como definir as propriedades
das colunas, linhas e clulas na pgina 204 e Como usar um esquema de
desenho para formatar uma tabela na pgina 206.
Para formatar o texto nas tabelas, aplique a formatao ao texto selecionado ou
utilize os estilos. Consulte Como inserir e formatar texto na pgina 251.

Como utilizar as tabelas para apresentar o contedo

201

Sobre os tags de tabelas

Quando as tabelas forem formatadas na janela do documento, possvel definir as
propriedades que se aplicam tabela inteira ou s linhas, colunas ou clulas
selecionadas na tabela. Ao definir uma propriedade (como a cor de fundo ou o
alinhamento) de uma maneira, para a tabela inteira, e de outra, para clulas
individuais, conveniente compreender como o Dreamweaver interpreta o
cdigo-fonte HTML.
Quando uma propriedade for definida mais de uma vez em uma tabela, ela ser
interpretada desta maneira: a formatao da clula, que faz parte do tag td,
prevalece sobre a formatao das linhas da tabela (tag tr) que, por sua vez,
prevalece sobre a formatao da tabela (tag table). Por conseguinte, se for
especificado azul para a cor de fundo de uma nica clula e, em seguida, definido
amarelo para o fundo da tabela inteira, a clula azul no se tornar amarela, pois o
tag td prevalece sobre o tag table.
No exemplo seguinte, o tag table define uma cor de fundo amarela (#FFFF99)
para a tabela inteira. O primeiro tag tr altera estas clulas para verde (#33FF66) e
o segundo tag td modifica a clula central do alto para azul (#333399). Os tags tr
e td na linha inferior no foram alterados, por isso estas clulas adquirem a cor da
tabela, que o amarelo.
<table border="1" width="75%" bgcolor="#FFFF99">
<tr bgcolor="#33FF66">
<td>&nbsp;</td>
<td bgcolor="#333399">&nbsp;</td>
<td>&nbsp;</td>
<tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

202

Captulo 7

Como definir as propriedades da tabela

O inspetor de propriedades exibe as propriedades da tabela quando esta for
selecionada.
O comando Formatar a tabela tambm pode ser utilizado para aplicar
rapidamente um desenho predefinido a uma tabela selecionada. Consulte Como
usar um esquema de desenho para formatar uma tabela na pgina 206.
Para especificar as propriedades da tabela:

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, especifique o nmero de linhas e colunas

na tabela.

Nos campos L e U, especifique a largura e a altura da tabela, em pixels, ou

como uma percentagem da janela do navegador. Em geral, no necessrio
definir a altura de uma tabela.

Utilize o campo Alinhar, para especificar como a tabela se alinhar aos outros
elementos no mesmo pargrafo, como texto ou imagens. esquerda alinha a
tabela esquerda dos outros elementos, direita alinha a tabela direita dos
outros elementos e No centro centraliza a tabela. possvel alinhar esquerda,
alinhar direita ou centralizar a tabela em relao aos outros elementos. Pode-se
tambm escolher o alinhamento padro do navegador.

Utilize os botes Limpar as alturas das linhas e Limpar as larguras das colunas,
para excluir todos os valores de altura de linha e largura de coluna da tabela.

Utilize o boto Converter as larguras da tabela em pixels, para converter a

largura da tabela, de uma percentagem da janela do navegador em sua largura
atual, em pixels.

Utilize o boto Converter as larguras da tabela em percentagens, para converter

a largura da tabela, de pixels em uma percentagem da janela do navegador.

Como utilizar as tabelas para apresentar o contedo

203

Para definir o preenchimento e espaamento da clula, escolha uma das

seguintes opes:

No campo CellPad (Preenchimento da clula), especifique o nmero de pixels

entre o contedo da clula e os seus limites (ou parede).

No campo CellSpace (Espaamento entre as clulas), especifique o nmero de

pixels entre cada clula da tabela.
Quando no forem atribudos valores especficos de espaamento e preenchimento
da clula, o Netscape Navigator, Microsoft Internet Explorer e o Dreamweaver
exibiro a tabela como se o espaamento entre as clulas fosse definido como 2 e o
preenchimento da clula como 1.
Para definir as bordas da tabela, escolha uma das seguintes opes:

No campo Borda, especifique 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, especifique um valor
0 para a borda. Para exibir os limites da tabela e das clulas quando a borda for
definida como 0, escolha Exibir > Auxlios visuais > Bordas da tabela.

Utilize o campo Brdr Color (Cor da borda), para selecionar uma cor de borda
para a tabela inteira.

Utilize as opes de cor de fundo, para definir a imagem ou a cor de fundo

da tabela.

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

Como definir as propriedades das colunas, linhas e clulas
Selecione qualquer combinao de clulas e, em seguida, utilize o inspetor de
propriedades para alterar a aparncia de clulas, linhas e colunas individuais. Para
selecionar as clulas, linhas e colunas, consulte Como selecionar os elementos da
tabela na pgina 200. Para aplicar a formatao a uma tabela inteira, consulte
Como definir as propriedades da tabela na pgina 203.
Para formatar uma linha, coluna ou clula:

204

Captulo 7

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 definir o alinhamento horizontal do

contedo de uma clula, coluna ou linha. O contedo pode ser alinhado
esquerda, direita, no centro ou de acordo com o padro do navegador
(normalmente, esquerda, para as clulas normais, e centralizado, para as
clulas de cabealho).

Utilize o menu pop-up Vert, para definir o alinhamento vertical do contedo

de uma clula, coluna ou linha. O contedo pode ser alinhado no alto, no
meio, embaixo, na linha de base ou de acordo com o padro do navegador
(normalmente, no meio).

Especifique a largura e altura das clulas selecionadas, em pixels, nos campos L

e U. Para utilizar percentagens, coloque um sinal de percentual (%) aps o
valor.

Para definir uma imagem de fundo para uma clula, coluna ou linha, utilize o
campo Fundo. Clique no cone correspondente pasta, para procurar uma
imagem; tambm possvel digitar o caminho da imagem ou utilizar o cone do
indicador de arquivos.

Para definir a cor de fundo de uma clula, coluna ou linha, utilize o campo
Fundo. possvel utilizar o seletor de cores ou digitar o cdigo hexadecimal
correspondente cor escolhida.

Para definir a cor de borda das clulas, utilize a opo Borda.

4

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 210.

Clique no boto Dividir a clula, para dividir a clula em duas. Consulte

Como dividir e mesclar as clulas na pgina 210.

Selecione Sem quebra, para impedir a quebra automtica de linhas. Esta opo
expande as clulas, a fim de que acomodem todos os dados medida que forem
digitados ou colados em uma clula. Normalmente, as clulas se expandem
horizontalmente para acomodar a palavra maior e, em seguida, se
expandem verticalmente.

Selecione Cabealho, para formatar as clulas ou linhas selecionadas como um

cabealho de tabela. Como padro, o contedo das clulas do cabealho da
tabela est em negrito e no centro.

Como utilizar as tabelas para apresentar o contedo

205

Como usar um esquema de desenho para formatar uma

tabela
Utilize o comando Formatar a tabela, para aplicar rapidamente um desenho
predefinido a uma tabela. Em seguida, as opes podem ser selecionadas para
personalizar o desenho.
Para utilizar um desenho predefinido:

Selecione a tabela e escolha Comandos > Formatar a tabela.

Na caixa de dilogo que aparecer, escolha um esquema de desenho na lista

esquerda. A tabela ser atualizada, de modo a exibir um exemplo do desenho.

Para aprimorar ainda mais a personalizao do desenho, altere as opes Cores

da linha, Linha do alto e Coluna esquerda.

Para modificar a largura da borda, digite um valor no campo Borda. Digite 0,

para que no haja borda.

Para aplicar o desenho s clulas da tabela (tagstd) em vez das linhas (tags tr),
selecione a opo Aplicar todos os atributos aos tags TD e no aos TR.
A formatao de clulas de tabela se sobrepor a qualquer formatao
especificada para a linha em que a clula se encontra. No entanto, se desejar que
todas as clulas numa linha sejam formatadas da mesma forma, melhor
formatar a linha da tabela ao invs de cada clula. Este procedimento resultar
em cdigo HTML mais limpo e conciso. Consulte Como formatar as tabelas e
clulas na pgina 201.

206

Captulo 7

Clique em Aplicar ou OK, para formatar a tabela com o desenho selecionado.

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:

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 especificar a largura de uma coluna de trs
maneiras.
Para definir a largura da coluna:

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 definir a largura da coluna com o nmero de pixels

especificado.

Digite um nmero seguido de um sinal de percentual (%) para definir 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.

Como utilizar as tabelas para apresentar o contedo

207

Como redefinir a largura e a altura

A maneira mais simples de definir as larguras das colunas e as alturas das linhas
arrastar as bordas da tabela. Quando uma coluna ou linha for arrastada,
automaticamente sero definidos valores especficos para todas as linhas e colunas,
em pixels, ou como percentagens das dimenses da tabela, dependendo da
maneira como a largura da tabela for especificada.
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 Modificar > Tabela, e selecione Limpar as alturas das
clulas ou Limpar as larguras das clulas.

Abra a visualizao de cdigo (ou o inspetor de cdigo) e altere as larguras e

alturas diretamente no cdigo HTML.

No inspetor de propriedades, digite valores especficos para a largura e altura,

nas caixas L e U.

Como adicionar e remover linhas e colunas

Utilize os comandos no submenu Modificar > Tabela, ou os do menu contextual,
para adicionar e remover linhas e colunas de uma tabela.
Para adicionar linhas ou colunas:

Clique na clula na qual dever aparecer a nova linha ou coluna.

Siga um dos procedimentos abaixo:

Para adicionar uma linha, escolha Modificar > Tabela > Inserir linha, ou escolha
Tabela > Inserir linha, no menu contextual.

Para adicionar uma coluna, escolha Modificar > Tabela > Inserir coluna, ou
escolha Tabela > Inserir coluna, no menu contextual.

Para adicionar linhas e colunas, escolha Modificar > Tabela > Inserir linhas
ou colunas, ou escolha Tabela > Inserir linhas ou colunas, no menu contextual.

208

Captulo 7

Na caixa de dilogo que aparecer, digite o nmero de linhas ou colunas a serem

adicionadas. Especifique se as novas linhas ou colunas devero aparecer antes ou
depois da linha ou coluna selecionada.

Clique em OK.

Para excluir uma linha ou coluna:

Clique em uma clula da linha ou coluna que ser excluda.

Escolha uma das seguintes opes:

Para excluir uma linha, escolha Modificar > Tabela > Excluir a linha, ou escolha
Tabela > Excluir a linha, no menu contextual.

Para excluir uma coluna, escolha Modificar > Tabela > Excluir a coluna, ou
escolha Tabela > Excluir a coluna, no menu contextual.
Para adicionar ou excluir as linhas ou colunas a partir da base ou da direita de uma
tabela:

Selecione a tabela inteira. Clique no canto superior esquerdo da tabela ou

clique uma vez na tabela e escolha Modificar > Tabela > Selecionar a tabela.

No inspetor de propriedades, siga um dos procedimentos abaixo:

Aumente o valor da linha ou coluna, para adicionar linhas.

Diminua o valor da linha ou coluna, para excluir as linhas.
O Dreamweaver adicionar e remover as linhas da base da tabela e isso
adicionar e remover colunas direita. O Dreamweaver no avisar quando as
linhas ou colunas que contm dados estiverem sendo excludas.
Como aninhar as tabelas
Uma tabela aninhada aquela que est dentro de outra. Uma tabela aninhada
pode ser configurada como qualquer outra tabela; contudo, a sua largura est
limitada pela largura da clula na qual ela aparece.

Como utilizar as tabelas para apresentar o contedo

209

Para aninhar uma tabela na clula de uma tabela:

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.

Arraste o boto Tabela, da categoria Comuns, do painel Objetos, at a clula
onde dever aparecer a segunda tabela.
2

Especifique 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 Modificar > Tabela,
para dividir ou mesclar as clulas. possvel mesclar qualquer nmero de clulas
adjacentes contanto que a seleo inteira tenha a forma retangular para
produzir uma nica clula que abranja diversas colunas ou linhas. Uma clula
pode ser dividida em qualquer nmero de linhas ou colunas, no importando se
tiver sido mesclada anteriormente. O Dreamweaver ir reestruturar
automaticamente a tabela (adicionando os atributos COLSPAN ou ROWSPAN,
necessrios), criando a disposio especificada.
Na ilustrao seguinte, as clulas no meio das duas primeiras linhas foram
mescladas, de modo a abranger duas linhas.

210

Captulo 7

Para mesclar duas ou mais clulas em uma tabela:

Selecione as clulas a serem mescladas. As clulas selecionadas devem ser

adjacentes e retangulares.

Esta seleo tem a forma retangular, por isso as clulas podem ser mescladas.

Esta seleo da tabela no tem a forma retangular, por isso as clulas no podem ser
mescladas.
2

Escolha Modificar > 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:

Clique na clula ou selecione-a.

Escolha Modificar > Tabela > Dividir a clula, ou clique no boto Dividir a
clula, no inspetor de propriedades.

Na caixa de dilogo Dividir a clula, escolha se a clula ser dividida em linhas

ou colunas e, em seguida, digite o nmero de linhas ou colunas.

Como utilizar as tabelas para apresentar o contedo

211

Como copiar e colar as clulas

possvel copiar ou colar diversas clulas da tabela, sem que percam a formatao,
ou copiar apenas o contedo da clula.
As clulas podem ser coladas em um ponto de insero ou em um local
selecionado de uma tabela existente. Para colar diversas clulas da tabela, o
contedo da rea de trabalho dever ser compatvel com a estrutura da tabela ou
da seleo na qual as clulas sero coladas.
Para recortar ou copiar as clulas de uma tabela:

Selecione uma ou mais clulas na tabela.

Para serem recortadas ou copiadas, as clulas selecionadas devem formar um
retngulo. Consulte Como selecionar os elementos da tabela na pgina 200.

Seleo correta: as clulas podem ser recortadas ou copiadas.

Seleo incorreta: estas clulas no podem ser recortadas ou copiadas.

2

Recorte ou copie as clulas, utilizando os comandos no menu Editar.

Se for selecionada a linha ou coluna inteira, esta ser removida da tabela
quando for escolhida a opo Editar > Recortar.

212

Captulo 7

Para colar as clulas da tabela:

Escolha onde deseja que as clulas sejam coladas.

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).
2

Escolha Editar > Colar.

Se forem coladas linhas ou colunas inteiras em uma tabela existente, estas sero
adicionadas tabela. Se estiver colando um clula determinada, o contedo da
clula selecionada ser substitudo. Se a colagem tiver que ser feita fora de uma
tabela, as linhas, colunas ou clulas sero utilizadas para definir uma nova
tabela.

Para remover o contedo e manter a clula intacta:

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.

Como utilizar as tabelas para apresentar o contedo

213

Como ordenar as tabelas

Uma ordenao simples da tabela pode ser executada atravs da classificao com
base no contedo de uma coluna. possvel tambm realizar uma ordenao da
tabela mais complexa, classificando-a em relao a duas colunas.
No possvel ordenar as tabelas que contm o atributo COLSPAN ou ROWSPAN
isto , aquelas que comportam clulas mescladas. Para obter mais detalhes sobre as
clulas mescladas, consulte Como dividir e mesclar as clulas na pgina 210.
Para ordenar uma tabela:

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

classificao.

214

Captulo 7

Para executar uma ordenao secundria em uma coluna diferente, especifique

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 exportar os dados da tabela

Os dados de uma tabela criada no Dreamweaver podem ser exportados, se forem
salvos em um formato de arquivo que aceite dados delimitados. Os separadores do
delimitador que podem ser utilizados so vrgula, dois pontos, ponto-e-vrgula ou
espao.
No possvel selecionar partes de uma tabela para exportar; ela sempre
exportada inteira. Se apenas alguns dados da tabela forem necessrios (as primeiras
seis linhas ou colunas, por exemplo) crie uma nova tabela, copie as informaes
para a nova tabela e exporte-a.
Para exportar uma tabela:

Coloque o ponto de insero em qualquer clula da tabela a ser exportada.

Escolha Arquivo > Exportar > Exportar a tabela.

Aparecer a caixa de dilogo Exportar a tabela.

No menu pop-up Delimitador, selecione um valor de delimitador para os dados

da tabela.

No menu Quebras de linha, selecione as quebras de linha do sistema

operacional para o qual o arquivo estiver sendo exportado Windows,
Macintosh ou UNIX.

Clique em Exportar.

Na caixa de dilogo que aparecer, digite um nome para o arquivo e clique em

Salvar.

Como utilizar as tabelas para apresentar o contedo

215

216

Captulo 7

CAPTULO 8

Como utilizar as molduras (frames)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

As molduras so utilizadas em uma pgina da Web para dividi-la em vrias pginas

HTML. Por exemplo: uma pgina da Web consiste em trs molduras. Uma
moldura estreita lateral que contm um menu de rolagem, outra no alto com o
logotipo e o nome do site da Web, e uma moldura grande que ocupa o restante da
pgina e acomoda o contedo principal. Cada uma dessas molduras uma pgina
HTML independente. Elas funcionam juntas na pgina atravs da utilizao de
um ou mais conjuntos de molduras, que constituem uma pgina HTML, que
define a estrutura e as propriedades da pgina da Web, incluindo informaes
sobre o nmero de molduras exibidas na pgina, o tamanho dos elementos, a
origem da pgina carregada em uma moldura e outras propriedades que podem ser
configuradas. Uma pgina com um conjunto de molduras no exibida em um
navegador, ela armazena apenas as informaes sobre a maneira como as molduras
sero exibidas em uma pgina. (Esta a pgina que deve ser visualizada quando for
utilizada a opo Visualizar no navegador.)

217

Neste exemplo, a moldura do alto permaneceria esttica e nunca seria alterada a

cada pgina do site. O menu da moldura lateral ter links que alteram o contedo
da rea da moldura principal, mas do contrrio, permanecer esttica. A rea da
moldura principal dinmica, isto , modifica-se dependendo do item de menu
escolhido.
Todas as molduras e conjuntos molduras da pgina podem ser formatados
utilizando o inspetor de propriedades. possvel definir a rolagem como ativada
ou desativada, configurar a largura e altura, denominar cada pgina e muito mais.
Para obter mais informaes, consulte Sobre as propriedades das molduras e dos
conjuntos de molduras na pgina 226.
Uma pgina da Web que contm trs molduras consiste em quatro pginas
HTML individuais: o arquivo do conjunto de molduras e trs arquivos que
comportam o contedo que aparece dentro das molduras. Quando uma pgina
for projetada para utilizar conjuntos de molduras, esses quatro arquivos devem ser
salvos, para que a pgina funcione corretamente no navegador. Para obter mais
informaes sobre a maneira de criar pginas da Web bem-sucedidas, que utilizem
molduras, consulte Sobre a criao de pginas da Web com base em molduras na
pgina 219.

Como decidir se as molduras sero

utilizadas
A utilizao mais comum da molduras para navegao. Uma pgina da Web
pode usar uma moldura para acomodar o menu de navegao e outra para o
contedo da pgina. Como o menu de navegao est em uma moldura, um
visitante do site poder clicar em um item de menu e o contedo aparecer na
moldura de contedo, mas o menu de navegao no ser alterado. Esse
procedimento mantm o usurio orientado no site.

218

Captulo 8

Contudo, as molduras podem ser confusas de implementar e, com freqncia, so

criadas pginas da Web sem molduras, que atingem os mesmos objetivos daquelas
que as utilizam. Por exemplo: para colocar a barra de navegao no lado esquerdo
da pgina, divida a pgina em duas molduras ou inclua a navegao esquerda em
cada pgina do site. A diferena que, quando so utilizadas molduras,
necessrio criar a navegao apenas uma vez. Se voc decidir utilizar molduras no
seu site da Web, certifique-se de ter compreendido a relao entre molduras e
conjuntos de molduras, porque a vinculao com molduras pode ser confusa.

Sobre a criao de pginas da Web com

base em molduras
As molduras so uma ferramenta muito til para os designers da Web, mas elas
precisam ser implementadas corretamente para que funcionem. Execute as etapas
abaixo para garantir que a sua pgina da Web funcione corretamente (no
necessariamente em uma determinada ordem):

Crie as molduras e o conjunto de molduras na pgina. Consulte Como criar

molduras na pgina 219.

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

Defina as propriedades de cada moldura e do conjunto de molduras. Isso inclui

o nome de cada moldura e do conjunto de molduras, a definio de opes
fixas e de rolagem, etc. Consulte Sobre as propriedades das molduras e dos
conjuntos de molduras na pgina 226.

Verifique se todos os links incluem os respectivos destinos, para que o contedo

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

Como criar molduras

H duas maneiras de criar um conjunto de molduras no Dreamweaver: voc pode
desenh-lo ou escolher entre vrios conjuntos de molduras predefinidos. A seleo
de um conjunto de molduras predefinido configura automaticamente todos os
conjuntos de molduras e as molduras necessrios criao do layout, e a maneira
mais fcil de inserir um layout de molduras na pgina. As molduras podem ser
criadas apenas na visualizao do projeto da janela do documento.

Como utilizar as molduras (frames)

219

Como inserir um conjunto de molduras predefinido

Os conjuntos de molduras predefinidos facilitam a seleo do tipo de conjunto de
molduras a ser criado.
Os cones de conjuntos de molduras predefinidos, na categoria Molduras do
painel Objetos, so uma representao visual de cada conjunto de molduras
aplicado a um documento selecionado.

O conjunto de molduras escolhido circunda o documento atual no qual o

ponto de insero est situado. A rea azul do cone de conjunto de molduras
predefinido representa a pgina ou moldura escolhida em um documento,
enquanto que a rea branca representa a(s) nova(s) moldura(s).
Para inserir um conjunto de molduras predefinido:

Coloque o ponto de insero no documento.

Siga um dos procedimentos abaixo:

Na categoria Molduras do painel Objetos, selecione um conjunto de molduras

predefinido. Para inserir o conjunto de molduras, clique em um cone ou
arraste-o diretamente para o documento.

Para selecionar um conjunto de molduras predefinido, escolha Inserir >

Molduras > Esquerda, Direita, Superior, Inferior, Esquerda e superior, Superior
esquerda, Esquerda superior ou Dividir.

220

Captulo 8

Como projetar e inserir um conjunto de molduras

Antes de criar um conjunto de molduras ou trabalhar com molduras, torne visveis
as bordas da moldura na janela do documento.
Para exibir as bordas da moldura em um documento, escolha Exibir > Auxlios
visuais > Bordas da moldura.
Quando as bordas da moldura forem mostradas, ser adicionado espao em volta
da borda do documento, fornecendo um indicador visual das reas da moldura no
documento.
Para criar um conjunto de molduras, siga um dos procedimentos abaixo:

Escolha Modificar > Conjunto de molduras > Dividir a moldura para a

esquerda, para a direita, para cima ou para baixo.

Arraste uma das bordas da moldura at a janela do documento para dividir o

documento vertical ou horizontalmente. Arraste uma borda da moldura a partir
de um dos cantos, para dividir o documento em quatro molduras.

Mantenha pressionada a tecla Alt (no Windows), ou Option (no Macintosh), e

arraste para dividir uma moldura interna.
Para excluir uma moldura:

Arraste a borda da moldura para fora da pgina ou at a borda da moldura-me.

Como utilizar as molduras (frames)

221

Como criar um conjunto aninhado de molduras

Um conjunto de molduras que estiver dentro de outro denominado um
conjunto aninhado de molduras. Cada novo conjunto de molduras criado inclui o
seu respectivo documento HTML com um conjunto de molduras e documentos
com molduras. A maioria das pginas da Web que utilizam molduras contm, de
fato, conjuntos aninhados de molduras, e vrios dos conjuntos de molduras
predefinidos no Dreamweaver tambm utilizam o aninhamento.
Por exemplo: um documento com trs molduras poder exibir o logotipo de uma
empresa em uma moldura no alto do documento, os controles de navegao em
uma moldura no lado esquerdo de um documento e o contedo em uma terceira
moldura.
Conjunto de molduras
principal

As molduras do menu
e do contedo esto
aninhadas dentro do
conjunto de molduras
padro

Para criar um conjunto aninhado de molduras:

Coloque o ponto de insero na moldura onde dever ser inserido um conjunto

aninhado de molduras.

Siga um dos procedimentos abaixo:

Escolha Modificar > Conjunto de molduras > Dividir a moldura para a

esquerda, para a direita, para cima ou para baixo.

Na categoria Molduras do painel Objetos, selecione um cone de conjunto de

molduras.

Escolha Inserir > Molduras > Esquerda, Direita, Superior, Inferior, Esquerda e
superior, Superior esquerda, Esquerda superior ou Dividir.

222

Captulo 8

Como selecionar uma moldura ou um

conjunto de molduras
As molduras e os conjuntos de molduras so documentos HTML individuais.
Para fazer alteraes em uma moldura ou em um conjunto de molduras, inicie
selecionando a moldura ou o conjunto de molduras a serem modificados. Voc
pode selecionar uma moldura ou um conjunto de molduras na janela do
documento, ou utilizar o painel Molduras.
Quando uma moldura ou um conjunto de molduras for selecionado, as linhas de
seleo aparecero no painel Molduras e na janela do documento.
Como utilizar o painel Molduras
O painel Molduras fornece uma representao visual das molduras em um
documento. Pode-se clicar em uma moldura ou em um conjunto de molduras, no
painel Molduras, para selecion-los no documento e, em seguida, exibir ou editar
as propriedades do item escolhido, no inspetor de propriedades. Consulte Sobre
as propriedades das molduras e dos conjuntos de molduras na pgina 226.
O painel Molduras mostra a hierarquia da estrutura do conjunto de molduras de
um modo que no aparece na janela do documento. Nesse painel, uma borda
tridimensional espessa envolve um conjunto de molduras; as molduras so
contornadas por uma linha fina cinza e cada uma delas identificada por um
nome.

Para exibir o painel Molduras, siga um dos procedimentos abaixo:

Escolha Janela > Molduras.

Pressione as teclas Control e F10 (no Windows), ou Command e F10 (no
Macintosh).

Como utilizar as molduras (frames)

223

Para selecionar uma moldura no painel Molduras:

Clique na moldura, no painel Molduras.

Para selecionar um conjunto de molduras no painel Molduras:

Clique na borda que circunda as molduras, no painel Molduras.

Como selecionar uma moldura ou um conjunto de molduras
na janela do documento
Na janela do documento, quando uma moldura for selecionada, suas bordas sero
marcadas com uma linha pontilhada; quando um conjunto de molduras for
escolhido, todas as bordas das molduras nesse conjunto sero marcadas com uma
linha pontilhada.
Selecione as molduras e os conjuntos de molduras, para alterar suas propriedades.
O inspetor de propriedades exibir as propriedades da moldura ou do conjunto de
molduras escolhido. Consulte Sobre as propriedades das molduras e dos
conjuntos de molduras na pgina 226.
Para selecionar uma moldura na janela do documento:

Pressione a tecla Alt (no Windows), ou as teclas Option e Shift (no Macintosh), e
clique dentro de uma moldura.
Para selecionar um conjunto de molduras na janela do documento:

Clique na borda de uma moldura, na janela do documento.

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

Para mover a seleo at a prxima moldura,

Mantenha pressionada a tecla Alt (no Windows), ou Command (no
Macintosh), e pressione a tecla de seta direita ou esquerda.

Para mover a seleo at o conjunto-pai de molduras (que contm as molduras

aninhadas),
Pressione a tecla Alt (no Windows), ou Command (no Macintosh), e a seta
para cima.

Para mover a seleo at a moldura-filha (a moldura que est aninhada em

outra moldura), pressione a tecla Alt (no Windows), ou Command (no
Macintosh), e a seta para baixo.

224

Captulo 8

Como salvar os arquivos de molduras e de

conjuntos de molduras
Um arquivo de conjunto de molduras e seus arquivos de molduras associados
devem ser salvos para que a pgina possa ser visualizada em um navegador.
possvel salvar individualmente uma pgina com um conjunto de molduras ou
com uma moldura, ou salvar todos os arquivos de molduras abertos e a pgina
com o conjunto de molduras.
Quando o Dreamweaver for utilizado para criar documentos com molduras, a
cada novo documento ser dado um nome de arquivo temporrio. Por exemplo:
MolduraSemNome_1, para a pgina com o conjunto de molduras, SemNome_1,
SemNome_2, etc., para as pginas com molduras.
Quando uma das opes de salvamento for selecionada, ser aberta a caixa de
dilogo Salvar o arquivo, j pronta para salvar um documento com o seu nome de
arquivo temporrio. Como os arquivos no tm ttulo, poder ser difcil
determinar qual arquivo de moldura est sendo salvo. Examine as linhas da seleo
da moldura na janela do documento, para identificar o documento que est sendo
salvo. A rea selecionada identifica a moldura mencionada na caixa de dilogo
Salvar o arquivo. O nome do arquivo de moldura ou de conjunto de moldura
selecionado tambm aparecer na barra de ttulo.

Como utilizar as molduras (frames)

225

Para salvar um arquivo de conjunto de molduras:

Selecione o conjunto de molduras, no painel Molduras ou na janela do

documento.

Escolha uma dentre as seguintes opes:

Para salvar o arquivo do conjunto de molduras, escolha Arquivo > Salvar o

conjunto de molduras.

Para salvar um novo arquivo de conjunto de molduras, escolha Arquivo >

Salvar o conjunto de molduras como.
Para salvar um documento que estiver dentro de uma moldura:

Clique na moldura para selecion-la e, em seguida, escolha Arquivo > Salvar a

moldura, ou Arquivo > Salvar a moldura como.
Para salvar todos os arquivos em um conjunto de molduras:

Escolha Arquivo > Salvar todas as molduras.

Esse comando salva todos os documentos abertos, inclusive documentos
individuais, molduras e conjuntos de molduras.
Nota: Ao salvar os arquivos, utilize as linhas de seleo de molduras, na janela do
documento, para ajud-lo a identificar os documentos com molduras e aqueles com
conjuntos de molduras.

Sobre as propriedades das molduras e dos

conjuntos de molduras
As molduras e os conjuntos de molduras tm inspetores de propriedades prprios.

As propriedades das molduras determinam o nome da moldura, arquivo de

origem, margens, rolagem, redimensionamento e bordas de cada moldura em
um conjunto.

As propriedades dos conjuntos de molduras controlam as dimenses das

molduras, assim como a cor e largura das bordas entre elas.
Para exibir as propriedades da moldura:

Escolha Janela > Propriedades, para exibir o inspetor de propriedades, caso no

esteja aberto.

Siga um dos procedimentos abaixo:

Mantendo pressionada a tecla Alt (no Windows) ou as teclas Option e Shift (no
Macintosh), clique na moldura.

Clique em uma moldura, no painel Molduras.

226

Captulo 8

Como definir as propriedades das molduras

Utilize o inspetor de propriedades, para denominar uma moldura e definir as
bordas e margens. Para examinar todas as propriedades das molduras, clique na
seta de expanso, localizada no canto inferior direito do inspetor de propriedades.
necessrio dar nome s molduras, para que os links da pgina funcionem
corretamente.
Para especificar as propriedades das molduras:

Selecione uma moldura, seguindo um dos procedimentos abaixo:

Clique em uma moldura, no painel Molduras.

Mantendo pressionada a tecla Alt (no Windows) ou as teclas Option e Shift (no
Macintosh), clique em uma moldura na janela do documento.
2

Escolha Janela > Propriedades, para abrir o inspetor de propriedades. Clique na

seta de expanso, situada no canto inferior direito, para examinar todas as
propriedades.

Para denominar uma moldura, digite um nome no campo Nome da moldura.

Nota: Nesse campo determinado o nome da moldura, a ser utilizado como referncia
de destino e script de hyperlinks. O nome de uma moldura dever conter apenas uma
palavra. So permitidos os sinais de sublinhado (_), mas no hfens (-), pontos (.) e
espaos. Os nomes das molduras devem iniciar com uma letra (ao invs de um
nmero). No utilize as palavras reservadas do JavaScript (top ou navigator, por
exemplo) como nomes de molduras.

Como utilizar as molduras (frames)

227

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 suficiente para exibir o contedo da moldura. A definio padro da
maioria dos navegadores Autom.

Sem redimensionamento restringe o tamanho da moldura e impede que os

usurios arrastem as suas bordas. As molduras podem ser sempre
redimensionadas na janela do documento, contudo, se essa opo for
selecionada, um usurio no poder redimension-las em seu navegador.

Bordas controlam a borda da moldura. As opes so Sim, No e Padro. A

escolha da opo Bordas anula as definies de borda configuradas para o
conjunto de molduras. Consulte Como definir as propriedades dos conjuntos
de molduras na pgina 229. A definio padro da maioria dos navegadores
Sim. Uma borda pode ser desativada apenas quando todas as molduras a ela
adjacentes estiverem definidas como No, ou Padro, com o conjunto-pai de
molduras definido como No.

Cor da borda define a cor de todas as bordas adjacentes moldura. Essa

definio anula a cor da borda do conjunto de molduras.
5

Defina as seguintes opes de margem (se as opes no estiverem visveis,

clique na seta de expanso, no canto inferior direito):
Largura da margem define

a largura das margens esquerda e direita, em pixels

(o espao entre as bordas da moldura e o seu contedo).
Altura da margem define a altura das margens superior e inferior, em pixels (o
espao entre as bordas da moldura e o seu contedo).

228

Captulo 8

Como definir as propriedades dos conjuntos de molduras

Utilize as propriedades dos conjuntos de molduras para definir as bordas e o
tamanho das molduras. A definio da propriedade de uma moldura anular o
parmetro correspondente em um conjunto de molduras. Por exemplo: a
definio das propriedades da borda em uma moldura anular essas mesmas
propriedades definidas no conjunto de molduras.
Os conjuntos de molduras predefinidos so utilizados para aplicar rapidamente
um conjunto a um documento. Esses conjuntos compartilham os seguintes valores
de propriedades padro: no haver bordas, barras de rolagem e
redimensionamento de molduras quando forem visualizadas em um navegador.
Para alterar os valores padro, selecione as opes desejadas no inspetor de
propriedades.
Para exibir as propriedades dos conjuntos de molduras:

Escolha Janela > Propriedades, para exibir o inspetor de propriedades, caso no

esteja aberto.

Siga um dos procedimentos abaixo:

Clique em uma borda entre duas molduras, na janela do documento.

Clique na borda que circunda as molduras, no painel Molduras.
3

Para examinar todas as propriedades dos conjuntos de molduras, clique na seta

de expanso, no canto inferior direito do inspetor de propriedades.

Como utilizar as molduras (frames)

229

Para especificar as propriedades dos conjuntos de molduras:

Selecione um conjunto de molduras.

No menu pop-up Bordas, selecione se as bordas sero exibidas em volta das

molduras quando o documento for exibido em um navegador.

Se desejar exibir as bordas, selecione Sim.

Se no quiser exibir as bordas, selecione No.
Caso o navegador do usurio deva determinar como as bordas sero mostradas,
selecione Padro.
3

No campo Largura da borda, digite um nmero, para especificar a largura das

bordas no conjunto de molduras.

No campo Cor da borda, utilize o seletor de cores para selecionar uma cor para
a borda, ou digite um valor hexadecimal correspondente a uma cor.

Para selecionar as opes de tamanho de moldura, clique nas guias na caixa

Seleo de linha/coluna, para selecionar uma linha, ou nas guias situadas no
alto, para selecionar uma coluna. Em seguida, no campo Valor, digite um
nmero para definir o tamanho da linha ou coluna selecionada, e, no menu
pop-up Unidades, especifique a unidade de medida para o nmero no campo
Valor.

Como denominar um documento com um conjunto de

molduras
Para adicionar um ttulo a uma pgina com um conjunto de molduras, utilize a
opo Propriedades da pgina.
Para denominar uma pgina com um conjunto de molduras:

Selecione um conjunto de molduras, seguindo um dos procedimentos abaixo:

Clique na borda do conjunto de molduras, no painel Molduras.

Mantendo pressionada a tecla Alt (no Windows), ou as teclas Option e Shift
(no Macintosh), clique em uma moldura na janela do documento. Talvez seja
necessrio pressionar a tecla Alt (no Windows) ou Command(no Macintosh)
mais a tecla de seta para cima, para selecionar o conjunto de molduras.

230

Captulo 8

Escolha Modificar > Propriedades da pgina.

No campo Ttulo, digite um nome para o documento.

Como especificar os tamanhos das molduras

Arraste a borda de uma moldura na janela do documento, a fim de definir os
tamanhos aproximados das molduras; em seguida, utilize o inspetor de
propriedades para especificar o espao que o navegador reservar para uma
moldura, quando o tamanho da tela no permitir que as molduras sejam exibidas
no tamanho em que foram criadas.
Para especificar os tamanhos das molduras:

Clique na borda de uma moldura, para selecionar o conjunto de molduras.

Escolha Exibir > Auxlios visuais >Bordas da moldura, se as bordas no
estiverem visveis.

No inspetor de propriedades, clique na seta de expanso, para exibir todas as

propriedades.

Na caixa Seleo de lin./col, clique na linha ou coluna a ser alterada.

Para especificar como o espao ser alocado quando a janela do navegador for
redimensionada, digite um nmero no campo Valor e escolha uma dentre as
seguintes opes de Unidades:

Pixels define 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 definida uma opo de
Unidades diferente para as outras molduras, o espao reservado a elas ser
definido apenas depois que as molduras especificadas em pixels tiverem
assumido o seu tamanho total.

Percentagem especifica que a moldura atual dever assumir um valor percentual

do conjunto de molduras do qual faz parte. Para as molduras especificadas com
unidades como percentagens, o espao ser alocado aps o das molduras
definidas em pixels, porm antes das molduras definidas como relativas.

Relativa especifica que o espao destinado moldura dever ser proporcional ao

das outras molduras. O espao reservado s molduras especificadas com
unidades relativas definido aps as molduras definidas em pixels e
percentagens, porm elas ocuparo todo o espao restante na janela do
navegador.

Como utilizar as molduras (frames)

231

Como definir as bordas de molduras e conjuntos de molduras

possvel especificar a aparncia das bordas de molduras e conjuntos de molduras
em um documento. Ao definir as opes de bordas de uma moldura, a opo do
conjunto de molduras correspondente ser ignorada.
Para definir as bordas de molduras:

Selecione a moldura, clicando e mantendo pressionada a tecla Alt (no

Windows), ou as teclas Option e Shift (no Macintosh), ou clique na moldura,
no painel Molduras.

Defina as seguintes opes no inspetor de propriedades:

Bordas controlam a borda das molduras. As opes so Sim, No e Padro. A

definio padro da maioria dos navegadores Sim. Para desativar uma borda,
todas as molduras a ela adjacentes devero estar definidas como No (ou
Padro, com o conjunto-pai de molduras definido como No).

Cor da borda define a cor de todas as bordas adjacentes moldura.

Para definir as bordas do conjunto de molduras:

Selecione o conjunto de molduras, clicando na borda de uma moldura, na

janela do documento, ou na borda que circunda as molduras, no painel
Molduras.

Defina 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 definio padro da maioria dos navegadores Sim.

Cor da borda define a cor de todas as bordas no conjunto de molduras. Essa

definio pode ser ignorada para uma nica moldura, especificando uma cor de
borda para essa moldura.

Largura da borda especifica a largura das bordas no conjunto de molduras.

Digite 0, para especificar sem borda.

232

Captulo 8

Como alterar a cor do fundo de uma moldura

possvel alterar a cor do fundo de uma moldura, definindo a cor de fundo do
documento na moldura.
Para alterar a cor de fundo de um documento em uma moldura:

Siga um dos procedimentos abaixo:

Posicione o cursor na moldura e escolha Modificar > Propriedades da pgina.

Clique com o boto direito do mouse (no Windows), ou mantenha pressionada
a tecla Control (no Macintosh) e clique na moldura e, no menu contextual,
escolha Propriedades da pgina.
2

Clique no menu pop-up Fundo, para selecionar uma cor.

Como controlar o contedo de molduras

com os links
Para utilizar links nas molduras, deve ser definido um destino para o link. O
destino a moldura na qual o contedo vinculado ser aberto. Por exemplo: se o
menu de navegao estiver na moldura esquerda e o contedo vinculado dever
aparecer na moldura principal de contedo, defina destinos para todos os links do
menu de navegao. O destino ser o nome da moldura principal de contedo.
Por exemplo: main_frame. Quando o usurio clicar em um link de navegao, o
contedo ser aberto na moldura principal.
Para selecionar uma moldura na qual o arquivo ser aberto, utilize o menu pop-up
Destino, no inspetor de propriedades. Um arquivo pode ser definido para que seja
aberto em uma nova moldura, substitua as informaes na mesma moldura que o
link, ou troque-as em outra moldura. O contedo vinculado pode anular a
moldura (no escolhendo um destino) ou aparecer em uma janela de navegador
inteiramente nova.
Para designar uma moldura:

Selecione um texto ou objeto.

No campo Link, no inspetor de propriedades, siga um dos procedimentos abaixo:

Digite o nome do arquivo a ser vinculado.

Clique no cone correspondente pasta e selecione o arquivo a ser vinculado.
Clique e arraste o cone do indicador de arquivos, para selecionar o arquivo a
ser vinculado.
Para especificar uma ncora (local especfico) no arquivo a ser vinculado, digite
o sinal de nmero (#) antes do nome da ncora. Consulte Como estabelecer
um link a um local especfico de um documento na pgina 394.

Como utilizar as molduras (frames)

233

No menu pop-up Destino, escolha o local onde o documento vinculado dever

aparecer.

Se as molduras tiverem sido denominadas no inspetor de propriedades, os

nomes das molduras aparecero nesse menu. Selecione uma moldura com
nome, para abrir um documento vinculado na moldura escolhida.

_blank

_parent

abre o documento vinculado em uma nova janela de navegador e

disponibiliza a janela atual.

_self

abre o documento vinculado no conjunto-pai de molduras do link.

abre o link na moldura, substituindo o contedo da mesma.

_top abre o link no conjunto de molduras mais externa do documento,

substituindo todas as molduras.

Como tratar os navegadores que no

podem exibir molduras
O Dreamweaver permite especificar contedos a serem exibidos nos navegadores
mais antigos, com base em texto e sem suporte s molduras. O Dreamweaver
insere o contedo especificado no documento com o conjunto de molduras,
utilizando uma instruo semelhante seguinte:
<noframes><body bgcolor="#FFFFFF">
este o contedo noframes.
</body></noframes>

Quando um navegador sem suporte s molduras carregar o arquivo do conjunto

de molduras, o navegador exibir apenas o contedo delimitado por tags
noframes.
Para definir o contedo para navegadores sem suporte a molduras:

Escolha Modificar > Conjunto de molduras > Editar o contedo NoFrames.

O Dreamweaver limpar a janela do documento e as palavras Contedo
NoFrames aparecero no alto da rea do corpo do documento.

Para criar o contedo NoFrames, siga um dos procedimentos abaixo:

Na janela do documento, digite ou insira o contedo.

Escolha Janela > inspetor de cdigo e, entre os tags noframes, digite o
contedo ou o cdigo HTML para o contedo.
3

234

Captulo 8

Escolha novamente Modificar > Conjunto de molduras > Editar o contedo

NoFrames, para retornar exibio normal do documento com o conjunto de
molduras.

Como utilizar os comportamentos com

molduras
possvel aplicar vrios comportamentos que se valem do modo de operao das
molduras. Geralmente, as molduras so utilizadas quando o designer da pgina da
Web deseja controlar a exibio de seu contedo. H vrios comportamentos que
facilitam a alterao do contedo de uma moldura.

Definir o texto da moldura substitui o contedo e a formatao de uma moldura

pelo contedo especificado. O contedo pode incluir qualquer HTML vlido.

Utilize esta ao para exibir informaes dinamicamente. Consulte Definir o
texto da moldura na pgina 497.

Ir para a URL

Inserir a barra de navegao

Inserir o menu de salto permite configurar uma lista de menu pop-up com links
que abrem arquivos em uma janela de navegador, quando forem clicados. Uma
janela ou moldura especfica tambm pode ser designada, na qual o documento
ser aberto. Consulte Como inserir um menu de salto na pgina 402.

abre uma nova pgina na janela ou moldura especificada. Esta

ao particularmente til para alterar o contedo de duas ou mais molduras
com um clique. Consulte Ir para a URL na pgina 490.
utilizada para direcionar um usurio a pginas
especficas em um site da Web. possvel anexar os comportamentos a imagens
da barra de navegao e definir qual imagem ser exibida, com base nas aes
do usurio. Por exemplo: uma imagem de boto pode ser mostrada no estado
ativo ou inativo, para permitir que o usurio saiba qual pgina de um site est
sendo exibida. Consulte Como inserir uma barra de navegao na
pgina 405.

Como utilizar as molduras (frames)

235

236

Captulo 8

CAPTULO 9

Como gerenciar e inserir propriedades

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

As propriedades so elementos (arquivos de imagens ou de filmes, por exemplo)

utilizados para construir uma pgina ou um site.
O painel Propriedades ajuda a gerenciar e organizar as propriedades do site mais
facilmente do que na janela do site. O painel exibe as propriedades do site,
dividindo-as nas seguintes categorias:

Imagens
Cores
URLs
filmes Flash
filmes Shockwave
filmes MPEG e QuickTime
Scripts
Modelos
Itens de biblioteca

Nota: Apenas os arquivos que se enquadram nas categorias acima sero mostrados no
painel Propriedades. Outros tipos de arquivos que so s vezes denominados
propriedades no sero mostrados no painel.

Se as propriedades de um site ainda no tiverem sido definidas, elas podero ser

obtidas de vrias fontes. Por exemplo: as propriedades podem ser criadas em um
aplicativo como o Macromedia Fireworks ou Macromedia Flash, recebidas de um
colega de trabalho ou cliente, ou copiadas de um CD de clip-art. Para obter mais
informaes sobre o planejamento e obteno de propriedades, consulte Sobre o
planejamento e projeto de sites na pgina 101.

237

O painel Propriedades pode ser utilizado de duas maneiras diferentes: como uma
lista facilmente acessvel das propriedades do site (a lista Site), ou como um modo
de organizar as propriedades que so utilizadas com mais freqncia (a lista
Favoritos). O painel Propriedades coloca automaticamente as propriedades do site
na lista Site. A lista Favoritos iniciada vazia e o usurio incluir as propriedades
que desejar.
A maioria das operaes do painel Propriedades so as mesmas das listas Site e
Favoritos. Contudo, h algumas tarefas que podem ser executadas apenas na lista
Favoritos (consulte Como utilizar as propriedades favoritas na pgina 246).
Os modelos e os itens de biblioteca so tratados com mais detalhe no Como
reutilizar o contedo com os modelos e bibliotecas na pgina 409.

Como utilizar o painel Propriedades

O painel Propriedades fornece duas maneiras de exibir as propriedades: a lista Site,
que mostra todas as propriedades (de tipos reconhecidos pelo painel) do site, e a
lista Favoritos, que exibe apenas as propriedades escolhidas explicitamente. A
maioria dos procedimentos abaixo podem ser executados na lista Site ou Favoritos.
Em ambas as listas, as propriedades esto divididas em categorias; o usurio
escolhe qual categoria de propriedades ser listada, clicando em um dos botes de
categoria, no lado esquerdo do painel. Tanto a lista Site quanto a lista Favoritos
esto disponveis para todas as categorias de propriedades, exceto os modelos e
itens de biblioteca.
A lista Site exibe todas as propriedades (nas categorias reconhecidas) existentes
como arquivos do site (mesmo que algum documento as utilize ou no), alm de
todas as cores e URLs utilizadas em quaisquer documentos do site.
possvel trabalhar com as seguintes categorias de propriedades:
so arquivos de imagens nos formatos GIF, JPEG ou PNG. Para obter
informaes sobre as imagens, consulte Como inserir imagens na pgina 289.
Imagens

so as cores utilizadas em documentos e folhas de estilos no site, incluindo

as cores do texto, do fundo e dos links.
Cores

so as URLs externas dos links aos quais os documentos do site esto

vinculados. Essa categoria inclui os seguintes tipos de links: FTP, gopher, HTTP,
HTTPS, JavaScript, correio eletrnico (mailto) e arquivo local (file://).
URLs

so arquivos em qualquer verso do formato Macromedia Flash. O

painel Propriedades exibe apenas os arquivos SWF (Flash compactados) e no os
arquivos Flash de origem. Consulte Sobre o contedo Flash na pgina 328.
Filmes Flash

so arquivos em qualquer verso do formato Macromedia

Shockwave. Consulte Sobre os filmes Shockwave na pgina 338.
Filmes Shockwave

238

Captulo 9

Filmes so arquivos de filme no formato QuickTime ou MPEG. Consulte Como

inserir mdia na pgina 325.

so arquivos JavaScript ou VBScript. Observe que os scripts nos arquivos

HTML (ao invs dos arquivos JavaScript ou VBScript independentes) no
aparecero no painel Propriedades. Para obter informaes sobre o trabalho com
JavaScript no Dreamweaver, consulte Como depurar o cdigo JavaScript na
pgina 509.
Scripts

fornecem um modo de utilizar o mesmo layout em vrias pginas e

tambm de modifi-los em todas as pginas simultaneamente. Consulte Como
reutilizar o contedo com os modelos e bibliotecas na pgina 409.
Modelos

Itens de biblioteca so

elementos utilizados em vrias pginas. Quando um item

de biblioteca for modificado, todas as pginas que o contm sero atualizadas.
Consulte Como reutilizar o contedo com os modelos e bibliotecas na
pgina 409.

Para abrir o painel Propriedades:

Escolha Janela > Propriedades. Aparecer o painel Propriedades.

O painel pode demorar alguns segundos at criar a lista Site, porque dever ler o
cache do site para criar a lista.
Nota: Antes de utilizar o painel Propriedades, defina um site e crie um cache de site.
Consulte Como utilizar o Dreamweaver para definir um novo site na pgina 108.

Como gerenciar e inserir propriedades

239

Algumas alteraes no aparecero imediatamente no painel Propriedades:

Quando uma propriedade for adicionada ou removida do site, as alteraes no

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

Quando for removida a nica instncia de uma determinada cor ou URL no

site, ou quando um novo arquivo salvo contiver uma cor ou uma URL ainda
no utilizada anteriormente no site, as alteraes no aparecero no painel
Propriedades at que a lista Site seja atualizada.
Para atualizar manualmente a lista Site:

Clique em Site, no alto do painel Propriedades, para garantir que a lista Site
estar em exibio.

Clique no boto Atualizar a lista Site, na parte inferior do painel Propriedades.

O cache do site ser criado ou atualizado, conforme necessrio, e o painel
propriedades ser atualizado a fim de mostrar todas as propriedades
reconhecidas no site.

Para recriar do zero o cache do site manualmente e atualizar a lista Site:

Pressione Control (no Windows) ou Command (no Macintosh) e clique no boto

Atualizar a lista Site, na parte inferior do painel Propriedades.
Para exibir a lista Favoritos:

Clique em Favoritos, no alto do painel Propriedades.

A lista Favoritos estar vazia at que as propriedades sejam includas.
Para exibir a lista Site:

Clique em Site, no alto do painel Propriedades.

Nota: Nas categorias Modelos e Biblioteca, as opes Site e Favoritos no esto
disponveis.
Para exibir as propriedades de uma determinada categoria:

Clique no cone de categoria adequado e clique em Site ou Favoritos. Por

exemplo: para exibir todas as imagens no site, clique no cone de Imagens e, em
seguida, clique em Site.

240

Captulo 9

Para visualizar uma propriedade:

Selecione a propriedade no painel Propriedades.

A rea de visualizao, no alto do painel, mostra uma prvia visual da propriedade.
Quando uma propriedade de filme for selecionada, a rea de visualizao mostrar
um cone. Para exibir um filme, clique no boto Executar (o tringulo verde), no
canto superior direito da rea de visualizao.
Para alterar o tamanho da rea de visualizao:

Arraste para cima ou para baixo a barra de diviso (entre a rea de visualizao e a
lista de propriedades).
Para adicionar propriedades lista Favoritos:

Selecione uma ou mais propriedades na lista Site.

Clique no boto Adicionar pasta Favoritos.

As propriedades so includas na lista Favoritos. Para ver a lista Favoritos, clique
em Favoritos no alto do painel.
Para conhecer outros mtodos de incluso de propriedades lista Favoritos,
consulte Como adicionar e remover as propriedades da lista Favoritos na
pgina 246.
Nota: No h listas Favoritos para os modelos e itens de biblioteca.

Como adicionar uma propriedade a uma pgina

A maior parte dos tipos de propriedades podem ser inseridos em um documento
arrastando-as para a visualizao do projeto da janela do documento, ou
utilizando o boto Inserir. possvel inserir cores e URLs ou aplic-las no texto
selecionado, na visualizao do projeto. As URLs tambm podem ser aplicadas a
outros elementos, como as imagens, na visualizao do projeto. Os modelos so
aplicados ao documento inteiro.
Para inserir uma propriedade em um documento:

Coloque o ponto de insero na visualizao do projeto, onde a propriedade

dever aparecer.

Escolha Janela > Propriedades, para abrir o painel Propriedades, caso ainda no
esteja aberto.

Selecione a categoria da propriedade.

Escolha uma categoria diferente de Modelos. Um modelo pode ser aplicado
apenas a um documento inteiro e no pode ser inserido em um documento.

Como gerenciar e inserir propriedades

241

Selecione Site ou Favoritos e localize a propriedade desejada.

No h listas Site ou Favoritos para os itens de biblioteca; ignore essa etapa ao
inserir um item de biblioteca.

Siga um dos procedimentos abaixo:

Arraste a propriedade do painel para a visualizao do projeto. Nos scripts,

arraste-a at a rea de contedo do cabealho, na janela do documento; se essa
rea no estiver visvel, escolha primeiro Exibir > Contedo do cabealho.

Selecione a propriedade no painel e clique em Inserir.

A propriedade ser inserida no documento. Se a propriedade for uma cor, ela
ser aplicada a partir do ponto de insero, ou seja, a digitao subseqente
aparecer nessa cor.
Para alterar a cor do texto selecionado em um documento:

Selecione a categoria Cores, no painel Propriedades.

Escolha a cor a ser aplicada.

Clique em Aplicar.

Para adicionar um link seleo atual em um documento:

Selecione a categoria URLs, no painel Propriedades e localize a URL a ser

aplicada.

Siga um dos procedimentos abaixo:

Arraste a URL do painel para a seleo na visualizao do projeto.

Selecione a URL e clique no boto Aplicar.
Para aplicar um modelo ao documento ativo:

Selecione a categoria Modelo, no painel Propriedades e localize um modelo a

ser aplicado.

Siga um dos procedimentos abaixo:

Arraste o modelo do painel para a visualizao do projeto.

Selecione o modelo e clique no boto Aplicar.

242

Captulo 9

Como alterar a ordem das propriedades

Como padro, as propriedades em uma determinada categoria so listadas por
nomes em ordem alfabtica. O nome da propriedade pode ser um nome de
arquivo (como no caso das imagens), um nmero hexadecimal (por exemplo: as
cores) ou uma URL. As propriedades tambm podem ser listadas por qualquer um
dos vrios outros critrios.
Para listar as propriedades em uma ordem diferente:

Clique em um dos cabealhos de colunas.

Por exemplo: para classificar a lista de imagens por tipo (a fim de que todas as
imagens GIF, todas as JPEG, etc. estejam agrupadas), clique no cabealho de
coluna Tipo.
Para alterar a largura de uma coluna:

Posicione o cursor sobre a linha que separa dois cabealhos de colunas.

Arraste esta linha para alterar a largura da coluna.

Como selecionar e editar as propriedades

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

Selecione uma das propriedades clicando nesse item. Em seguida, escolha as

outras propriedades de uma das seguintes maneiras:

Pressione a tecla Shift e clique, para selecionar uma srie consecutiva de

propriedades.

Pressione a tecla Control (no Windows), ou a tecla Command (no Macintosh)

e clique, para adicionar uma propriedade individual seleo (seja ela adjacente
ou no seleo existente). Pressione a tecla Control ou Command e clique em
uma propriedade escolhida, para cancelar a sua seleo.

Como gerenciar e inserir propriedades

243

Para editar uma propriedade:

Siga um dos procedimentos abaixo:

Clique duas vezes na propriedade.

Selecione a propriedade e, em seguida, clique em Editar.
No caso de alguns tipos de propriedades (imagens, por exemplo), a edio da
propriedade ser iniciada em um aplicativo de edio externo. Quanto s cores
e URLs, a edio da propriedade permite alterar o valor desta apenas na lista
Favoritos. As cores e URLs no podem ser editadas na lista Site. No caso dos
modelos e itens de biblioteca, a edio da propriedade permite alter-la no
Dreamweaver.
Se um editor externo no for aberto para uma propriedade que deveria utilizlo, escolha Editar > Preferncias, selecione a categoria Tipos de arquivos /
editores, e certifique-se de que haja um editor externo definido para o tipo de
arquivo da propriedade. Consulte Como iniciar um editor externo na
pgina 326.
2

Altere a propriedade.

Ao concluir a edio da propriedade, siga um dos procedimentos abaixo:

Se a propriedade estiver na forma de um arquivo (qualquer uma diferente de

cor ou URL), salve-a (utilizando qualquer editor empregado para edit-la) e
feche a propriedade.

Se a propriedade for uma URL, clique em OK, ao terminar a edio na caixa de

dilogo Editar a URL.
Se a propriedade for uma cor, o seletor de cores do Dreamweaver se fechar
automaticamente quando uma cor for escolhida. Para fechar o seletor de cores
sem escolher uma cor, pressione a tecla Esc.
Como trabalhar com propriedades e sites
Talvez seja conveniente procurar um arquivo na janela do site que corresponde a
uma propriedade no painel Propriedades. Esse procedimento pode ser til, por
exemplo, durante a transferncia de uma propriedade para ou de um site remoto.
O painel Propriedades mostra todas as propriedades (dos tipos reconhecidos) no
site atual. O site atual aquele que contm o documento ativo. Para utilizar uma
propriedade do site atual em outro site, copie-a no outro site. possvel copiar
uma propriedade individual, um conjunto de propriedades ou uma pasta
Favoritos inteira, de uma s vez.
Nota: A janela do site pode exibir um site diferente daquele mostrado no painel
Propriedades. Isso ocorre porque o painel Propriedade est associado ao documento
ativo. Para determinar qual site do painel Propriedades est em exibio, olhe para a barra
de ttulo do painel.

244

Captulo 9

Para localizar um arquivo de propriedade na janela do site:

Clique com o boto direito do mouse (no Windows), ou pressione a tecla Control
e clique (no Macintosh) no nome da propriedade ou no cone correspondente no
painel Propriedades, e escolha Localizar no site, no menu contextual.
Aparecer a janela do site, com o arquivo de propriedade selecionado.
Localizar no site no estar disponvel para cores e URLs que no correspondam
aos arquivos no site.
Observe que Localizar no site procura o arquivo correspondente propriedade e
no um arquivo que a utiliza.
Para copiar as propriedades da lista Site ou Favoritos em outro site:

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

Control e clique (no Macintosh) no cone ou no nome de uma ou mais
propriedades, para copi-la(s).
Na lista Favoritos, pode ser copiada uma pasta Favoritos, bem como
propriedades individuais.

No menu contextual, escolha Copiar para o site, e escolha o nome do site de

destino no submenu. O submenu listar todos os sites que o usurio tiver
definido.
As propriedades so copiadas no site especificado, nas localizaes
correspondentes quelas no site atual. O Dreamweaver cria novas pastas na
hierarquia do site de destino, conforme necessrio.
As propriedades tambm so adicionadas lista Favoritos do site especificado.
Quando um documento for aberto no site de destino, o painel Propriedades
alternar para esse site e mostra a propriedade copiada.
Nota: Se a propriedade copiada for uma cor ou URL, ela aparecer na lista Favoritos, e
no na lista Site, do outro site. Isso ocorre porque no h qualquer arquivo
correspondente cor ou URL. Por conseguinte, nenhum arquivo poder ser copiado
no outro site.

Como gerenciar e inserir propriedades

245

Como utilizar as propriedades favoritas

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

Como adicionar e remover as propriedades da lista Favoritos

H vrias maneiras de adicionar propriedades lista Favoritos do site.
Para adicionar propriedades lista Favoritos, siga um dos procedimentos abaixo:

Selecione uma ou mais propriedades na lista Site, e clique no boto Adicionar

pasta Favoritos.

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

Favoritos, no menu contextual.

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

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

Selecione um ou mais arquivos na janela do site e escolha Adicionar pasta

Favoritos, no menu contextual. Os arquivos que no se enquadrarem em uma
categoria no painel Propriedades sero ignorados.
Independentemente do mtodo escolhido, as propriedades sero adicionadas
lista Favoritos e o painel Propriedades exibir essa lista.
Nota: No h listas Favoritos para os modelos e itens de biblioteca.

246

Captulo 9

Para remover propriedades da lista Favoritos:

Selecione uma ou mais propriedades (ou uma pasta Favoritos) na lista

Favoritos.

Clique no boto Remover da pasta Favoritos, na parte inferior do painel

Propriedades.
As propriedades sero removidas da lista Favoritos, mas ainda aparecero na
lista Site. Se uma pasta Favoritos for removida, essa pasta e todas as
propriedades nela contidas sero excludas da lista Favoritos.

Como criar um apelido para uma propriedade favorita

As propriedades na lista Favoritos podem ter apelidos. O apelido mostrado no
lugar do nome do arquivo ou do valor da propriedade. Por exemplo: se uma cor
for chamada de #999900, dever ser utilizado um apelido mais descritivo,
Cor_de_Fundo_da_Pgina ou Cor_de_Texto_Importante.
Apenas as propriedades da lista Favoritos podem ter apelidos. Na lista Site, as
propriedades so listadas pelos seus nomes de arquivos reais (ou seus valores, no
caso das cores e URLs).
Para apelidar uma propriedade favorita:

Clique na categoria que contm a propriedade escolhida.

Clique em Favoritos, para exibir a lista Favoritos.

Siga um dos procedimentos abaixo:

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

Control e clique (no Macintosh) no nome da propriedade ou no cone
correspondente no painel Propriedades, e escolha Editar o apelido, no menu
contextual.

Clique uma vez no nome da propriedade, faa uma pausa e clique nele
novamente. No clique duas vezes de uma s vez.
4

Digite um apelido para a propriedade, em seguida, pressione a tecla Enter (no

Windows), ou a tecla Return (no Macintosh).
O apelido aparecer na coluna Apelido.

Como gerenciar e inserir propriedades

247

Como agrupar as propriedades na pasta Favoritos

Em uma categoria da lista Favoritos, possvel criar e denominar grupos de
propriedades, chamados de pastas Favoritos. Por exemplo: se houver um conjunto
de imagens que so utilizadas em vrias pginas de catlogos em um site de
comrcio eletrnico, elas podero ser agrupadas em uma pasta chamada
Imagens_de_Catlogo.
Nota: A insero de uma propriedade em uma pasta Favoritos no alterar a localizao
do arquivo da propriedade no disco rgido.
Para criar uma pasta Favoritos:

Clique em Favoritos (no alto do painel Propriedades), para exibir a lista

Favoritos.

Clique no boto Nova pasta Favoritos.

Denomine a pasta.

Arraste as propriedades para a pasta.

Como criar uma nova cor, URL, modelo ou item de biblioteca

O painel Propriedades pode ser utilizado para criar, cores, URLs, modelos e itens
de biblioteca. Observe que novas cores ou URLs podem ser adicionadas lista
Site, que contm apenas as propriedades que j estiverem em uso no site.
Para criar uma nova cor:

Clique no boto de categoria Cores.

Clique em Favoritos, para mostrar a lista Favoritos.

Clique no boto Nova cor.

Selecione uma cor utilizando o seletor de cores.

Para sair do seletor de cores sem escolher uma cor, pressione a tecla Esc ou
clique na barra cinza, no alto do seletor. Para obter mais informaes sobre o
uso do seletor de cores, consulte Como trabalhar com as cores na pgina 91.

248

Captulo 9

Se desejar, d um apelido cor.

Para criar uma nova URL:

Clique no boto de categoria URLs.

Clique em Favoritos, para mostrar a lista Favoritos.

Clique no boto Nova URL.

Digite uma URL e um apelido na caixa de dilogo Adicionar URL, e clique em

OK.

Para criar um novo modelo:

Clique no boto de categoria Modelos.

Clique no boto Novo modelo.

Para obter mais informaes sobre a criao de novos modelos, consulte Como
reutilizar o contedo com os modelos e bibliotecas na pgina 409.

Para criar um novo item de biblioteca, siga um dos procedimentos abaixo:

Clique no boto de categoria Biblioteca e, em seguida, clique no boto Novo

item de biblioteca.

Selecione um elemento ou texto na visualizao do projeto da janela do

documento e, em seguida, arraste-o at o painel Propriedades.
Independentemente do tipo do elemento que seja arrastado, ser criado um
novo item de biblioteca que o contm.
Para obter mais informaes sobre a criao de novos itens de biblioteca, consulte
Como reutilizar o contedo com os modelos e bibliotecas na pgina 409.

Como gerenciar e inserir propriedades

249

250

Captulo 9

10

CAPTULO 10

Como inserir e formatar texto

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

A formatao no Dreamweaver semelhante de um processador de texto padro.

No inspetor de propriedades, utilize o submenu Texto > Formato do pargrafo ou
o menu suspenso Formato, para definir o estilo de formatao padro (Pargrafo,
Pr-formatado, Cabealho 1, Cabealho 2, etc.) para um bloco de texto. Para
alterar a fonte, o tamanho, a cor e o alinhamento do texto selecionado, use o
menu Texto ou o inspetor de propriedades. Para aplicar as formataes negrito,
itlico, cdigo, sublinhado, etc., use o submenu Texto > Estilo.
possvel tambm combinar vrios tags HTML padro para formar um nico
estilo, denominado estilo HTML. Por exemplo: a formatao HTML pode ser
aplicada manualmente utilizando uma combinao de tags e atributos, que ser
salva como um estilo HTML; essa formatao salva no painel Estilos HTML.
Na prxima vez que o usurio desejar formatar texto utilizando essa combinao
de tags HTML, bastar selecionar o estilo salvo no painel Estilos HTML. Os
estilos HTML contam com suporte de todos os navegadores da Web e
economizam tempo em relao formatao manual de texto.
Outro tipo de estilo, denominado folhas de estilos em cascata (Cascading Style
Sheets CSS), permite formatar as pginas e o texto, com a vantagem da
atualizao automtica. Os estilos CSS podem ser armazenados diretamente
no documento ou, para se obter mais capacidade e flexibilidade, em uma folha de
estilos externa. Se uma folha de estilos externa for anexada a vrias pginas da
Web, todas as pginas iro refletir quaisquer alteraes feitas na folha de estilos.
Para acessar os estilos CSS, utilize o painel Estilos CSS.
A formatao HTML manual e os estilos HTML aplicam a formatao usando os
tags HTML padro (por exemplo: b, font e code) que recebem suporte de todos os
navegadores da Web mais populares. Os estilos CSS definem a formatao para o
texto inteiro em uma determinada classe ou redefinem a formatao para um tag
especfico (por exemplo: h1, h2, p ou li). As CSS recebem suporte apenas dos
seguintes navegadores da Web: Netscape Navigator 4.0 e Microsoft Internet
Explorer 4.0, e de suas verses mais avanadas.

251

Em uma mesma pgina, podem ser utilizados os estilos CSS e HTML, bem como
a formatao HTML manual. A formatao HTML manual anula a formatao
aplicada por um estilo HTML ou CSS; assim, embora seja trabalhosa, poder ser
utilizada como um mtodo conveniente de modificao da formatao aplicada
com os estilos HTML ou CSS. Alm disso, os estilos CSS da pgina anulam os
estilos CSS externos. Consulte Como utilizar as folhas de estilos CSS na
pgina 267.

Como inserir texto e objetos

O contedo das pginas pode ser adicionado atravs da digitao e colagem de
texto, e da insero de objetos (imagens, tabelas e camadas, por exemplo).
Para adicionar texto a um documento, siga um dos procedimentos abaixo:

Digite o texto diretamente na janela do documento.

Copie o texto de outro aplicativo, alterne para o Dreamweaver, posicione o
ponto de insero na visualizao do projeto da janela do documento e escolha
Editar > Colar. O Dreamweaver no manter a formatao de texto que foi
aplicada no outro programa, mas preservar as quebras de linha.
Para inserir tabelas, dados tabulares, imagens e outros objetos em um documento,
proceda da seguinte maneira:

Utilize os comandos no menu Inserir para incluir os objetos especificados no

seu documento, no ponto de insero.

Escolha Janela > Objetos, para abrir o painel Objetos. Localize o tipo de objeto
desejado e clique ou arraste-o, para inserir o objeto na janela do documento.
Para a maioria dos objetos, aparecer uma caixa de dilogo, solicitando a
escolha de opes ou de um arquivo. Para ignorar essas caixas de dilogo,
escolha Editar > Preferncias, selecione Geral e, em seguida desmarque a opo
Mostrar a caixa de dilogo quando inserir objetos.
Nota: Para inserir vrios espaos consecutivos, utilize Inserir > Caracteres especiais >
Espao no-separvel (teclas Control, Shift e barra de espao) ou pressione a tecla Enter/
Return. Mas, se desejar enfileirar itens em colunas, utilize uma tabela.

Os dados tabulares podem ser importados para um documento atravs do

salvamento inicial desses arquivos (por exemplo: arquivos do Microsoft Excel ou
um banco de dados) como arquivos de texto delimitados.

252

Captulo 10

Para importar dados tabulares:

Escolha Arquivo > Importar > Importar os dados tabulares, ou selecione Inserir
> Dados tabulares.
Aparecer a caixa de dilogo Importar os dados da tabela.

Procure o arquivo desejado ou digite o seu respectivo nome no campo de texto.

Selecione o delimitador utilizado quando o arquivo foi salvo como texto

delimitado. As opes disponveis so Tabulao, Vrgula, Ponto-e-vrgula,
Dois pontos e Outro.

Se for selecionado Outro, aparecer um campo em branco ao lado da opo.

Digite o caractere que foi utilizado como delimitador.
4

Utilize as demais opes para formatar ou definir a tabela para a qual os dados
sero importados.

Clique em OK quando terminar.

Como inserir datas

O Dreamweaver fornece um objeto Data conveniente, que insere a data atual em
qualquer formato preferido (com ou sem a hora) e d ao usurio a opo de
atualizar a data sempre que o arquivo for salvo.
Nota: Lembre-se de que as datas e horas mostradas na caixa de dilogo Inserir data no
representam a data atual nem refletem as datas/horas vistas por um visitante quando ele
exibe o seu site. Estes so apenas exemplos da maneira de mostrar essas informaes.
Para inserir a data atual em um documento:

Na janela do documento, coloque o ponto de insero onde a data dever ser

inserida.

Siga um dos procedimentos abaixo:

Escolha Inserir > Data.

Abra o painel Objetos, escolhendo Janela > Objetos e, em seguida, abra a
categoria Comuns e clique no boto Data.
3

Na caixa de dilogo que aparecer, selecione os formatos para o nome do dia da

semana, a data e a hora.

Para que a hora inserida seja atualizada sempre que o documento for salvo, selecione
Atualizar automaticamente ao salvar. Para transformar a data em texto simples,
quando for inserida, e nunca atualiz-la automaticamente, desmarque esta opo.

Clique em OK, para inserir a data.

Sugesto: Se for escolhida a opo Atualizar automaticamente ao salvar, possvel editar

o formato da data aps ter sido inserida no documento, atravs do clique no texto
formatado e da seleo de Editar o formato da data, no inspetor de propriedades.

Como inserir e formatar texto

253

Sobre os caracteres especiais

Alguns caracteres especiais so representados em HTML por um nome ou
nmero, referenciado como uma entidade. O HTML inclui nomes de entidades
para caracteres como smbolo de copyright (&copy;), o "e" comercial (&amp;) e o
smbolo de marca registrada (&reg;). Cada entidade contm um nome (por
exemplo: &mdash;) e um equivalente numrico (por exemplo: &#151;).
Sugesto: O HTML utiliza chaves <> no seu cdigo, mas talvez seja necessrio expressar
os caracteres especiais correspondentes a maior ou menor do que, sem que o
Dreamweaver os interprete como cdigo. Nesse caso, utilize &gt; para maior do que (>) e
&it; para menor do que (<).

Infelizmente, muitos navegadores (especialmente, os mais antigos e aqueles

diferentes do Navigator e Internet Explorer) no exibem corretamente muitas das
entidades denominadas. A maioria dos navegadores exibe muitas das entidades
numricas mais comuns, porm lembrar de um nmero de entidade mais difcil
do que lembrar de um nome.
Como inserir caracteres de texto especiais
Vrios caracteres especiais podem ser inseridos (na forma de entidades HTML)
atravs da escolha da categoria Caracteres, no menu suspenso do painel Objetos.
Para inserir um caractere especial em um documento:

Na janela do documento, coloque o ponto de insero onde o caractere especial

dever ser inserido.

Siga um dos procedimentos abaixo:

Escolha o nome do caractere no submenu Inserir > Caracteres.

Abra o painel Objetos (escolhendo Janela > Objetos), selecione a categoria
Caracteres no menu suspenso e escolha o caractere desejado.
H muitos outros caracteres especiais disponveis; para selecionar um deles,
escolha Inserir > Caracteres > Mais e escolha um caractere. Em seguida, clique em
OK.

254

Captulo 10

Como copiar e colar o cdigo-fonte HTML no Dreamweaver

O cdigo-fonte HTML pode ser copiado e colado de outro aplicativo ou da
visualizao de cdigo. possvel escolher se o cdigo HTML ser copiado e
colado como texto ou cdigo com tags intactos, dependendo do modo de copiar e
colar.
Para copiar o cdigo-fonte HTML e col-lo na visualizao de cdigo:

Copie o cdigo de outro aplicativo (por exemplo: BBEdit ou HomeSite), da

visualizao de cdigo ou do inspetor de cdigo no Dreamweaver, e coloque o
ponto de insero na visualizao de cdigo.

Escolha Editar > Colar, e selecione Atualizar a visualizao do projeto, na barra

de ferramentas.
Por exemplo: copie do BBEdit o cdigo-fonte HTML para uma tabela e cole-o
na visualizao de cdigo do Dreamweaver, para que ele aparea como uma
tabela na visualizao de projeto.

Se desejar que o cdigo-fonte HTML aparea como texto, coloque o ponto de

insero diretamente na visualizao do projeto e escolha Editar > Colar, para
colar o cdigo como texto. Esta opo poder ser escolhida quando o documento
do Dreamweaver contiver instrues sobre a gravao de HTML e o usurio
quiser que o cdigo aparea como texto no documento.
Para copiar e colar como um cdigo-fonte HTML:

Selecione e copie o cdigo de outro aplicativo.

Coloque o ponto de insero na visualizao do projeto e escolha

Editar > Colar como HTML.

Tambm possvel selecionar um item na visualizao do projeto (uma tabela, por

exemplo) e escolher Editar > Copiar como HTML. Esse item podem ser colado,
em seguida, em outro aplicativo como um cdigo-fonte HTML. Para obter mais
informaes sobre edio do cdigo-fonte HTML, consulte Como gravar e editar
o cdigo na pgina 365.

Como inserir e formatar texto

255

Como criar listas

medida que voc digita na janela do documento, podem ser criadas listas
numeradas (ordenadas), listas com marcadores (no-ordenadas) e listas de
definies a partir de um texto existente ou de um novo texto. As listas de
definies no utilizam caracteres esquerda, como marcadores ou nmeros,
porm estes so utilizados freqentemente em glossrios ou descries. As listas
tambm podem ser aninhadas. As listas aninhadas so aquelas que contm outras
listas. Por exemplo: o usurio poder querer aninhar uma lista ordenada ou com
marcadores em uma outra lista numerada ou ordenada.
Para criar uma nova lista:

Na visualizao do projeto, coloque o ponto de insero na linha onde a lista de

novos itens ser adicionada.

Clique nos botes Lista com marcadores ou Lista numerada, no inspetor de

propriedades, ou escolha Texto > Lista e selecione o tipo de lista desejado: Lista
no-ordenada (com marcadores), Lista ordenada (numerada) ou Lista de
definies.
Uma lista pode ser inserida na visualizao do cdigo, usando o menu Texto,
mas o Dreamweaver adicionar apenas o primeiro e o ltimo tags da lista
HTML, em seguida, necessrio colocar manualmente os cdigos nos itens
individuais da lista.

Comece digitando a lista, pressionando Enter (no Windows) ou Return (no

Macintosh) para iniciar outro item da lista.

Para concluir a lista, pressione duas vezes Enter (no Windows) ou Return (no
Macintosh).

Para criar uma lista usando texto j existente:

Escolha uma srie de pargrafos para transform-los em uma lista.

Clique nos botes Lista com marcadores ou Lista numerada, no inspetor de

propriedades, ou escolha Texto > Lista e selecione o tipo de lista desejado: Lista
no-ordenada, Lista ordenada ou Lista de definies.

Para criar uma lista aninhada:

Selecione os itens da lista a serem aninhados.

Clique no boto Recuo, no inspetor de propriedades, ou escolha Texto > Recuo.

O Dreamweaver recuar o texto e criar uma lista separada com os atributos
HTML da lista original.

256

Captulo 10

Aplique um novo estilo ou tipo de lista ao texto recuado, seguindo o mesmo

procedimento utilizado acima.

Como configurar as fontes, estilos, cor e

alinhamento
Pode-se aplicar formatao de texto HTML a uma letra ou criar um site inteiro,
utilizando os comandos Texto > Formato do pargrafo ou as opes no inspetor de
propriedades. Esse tipo de formatao manual substitui ou anula a formatao
configurada por um estilo HTML ou CSS.
Para aplicar a formatao de texto HTML, utilize o inspetor de propriedades e os
comandos no menu Texto. Por exemplo: Texto > Formato do pargrafo, e Texto >
Estilo.
Como definir e alterar as fontes e estilos
Utilize o inspetor de propriedades ou o menu Texto, para definir ou alterar as
caractersticas da fonte de um texto selecionado.
Para definir ou alterar as caractersticas da fonte:

Selecione o texto. Se nenhum texto for selecionado, a alterao ser aplicada ao

texto subseqente ao que for digitado.

Escolha dentre as seguintes opes:

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 da combinao que
estiver instalada no sistema do usurio. Se nenhuma das fontes na combinao
estiver instalada, o navegador exibir o texto conforme as especificaes de
preferncias do navegador. Consulte tambm Como modificar as combinaes
de fontes na pgina 260. Escolha Padro, para remover as fontes aplicadas
anteriormente; Padro aplica a fonte padro ao texto selecionado (a fonte
padro do navegador ou aquela designada para esse tag na folha de estilos CSS).

Para alterar o estilo de fonte, clique em Negrito ou Itlico, no inspetor de

propriedades, ou escolha um estilo de fonte (Negrito, Itlico, Sublinhado, etc.)
no submenu Texto > Estilo.

Para alterar o tamanho da fonte, escolha um tamanho (1 a 7), no inspetor de

propriedades ou no submenu Texto > Tamanho.
Os tamanhos de fontes HTML so pontos de tamanho relativo e no
especficos. Os usurios definem o tamanho do ponto da fonte padro para os
seus navegadores; esse tamanho de fonte ser visto quando for selecionado
Padro ou 3, no inspetor de propriedades ou no submenu Texto > Tamanho.
Os tamanhos 1 e 2 aparecero menores do que o tamanho padro de fonte; os
tamanhos 4 a 7 aparecero maiores. Alm disso, as fontes geralmente parecem
maiores no Windows do que no Macintosh, apesar de, no Macintosh, o
Internet Explorer 5 utilizar o mesmo tamanho de fonte que no Windows.

Como inserir e formatar texto

257

 Para aumentar ou diminuir o tamanho do texto selecionado, escolha um

tamanho relativo (+1 a + 4 ou 1 a 3), no inspetor de propriedades ou no
submenu Texto > Alterar o tamanho.
Sugesto: Um modo de garantir a consistncia com o tamanho da fonte utilizar os
estilos CSS com o tamanho da sua fonte definido em pixels. Para obter mais
informaes sobre as CSS, consulte Como utilizar as folhas de estilos CSS na
pgina 267.

Esses nmeros indicam uma diferena relativa do tamanho da fonte bsica. O

valor padro da fonte bsica 3. Assim, um valor +4 resulta em um tamanho de
fonte 3 + 4, ou 7. 7 a soma mxima para os seus valores de tamanho da fonte.
Se o usurio tentar utilizar valores mais altos, eles sero mostrados como 7. O
Dreamweaver no exibe o tag basefont (que inserido na seo head ), embora
o tamanho da fonte deva ser exibido corretamente em um navegador. Para
testar esse procedimento, compare textos definidos para 3 e +3.
Como utilizar os pargrafos e cabealhos
Utilize o menu pop-up Formato, no inspetor de propriedades, ou o submenu
Texto > Formato do pargrafo, para aplicar os tags de cabealho e pargrafo
padro. Para redefinir a aparncia dos tags de cabealho e pargrafo, utilize as
folhas de estilos CSS; consulte Como utilizar as folhas de estilos CSS na
pgina 267.
Para aplicar um tag de cabealho ou pargrafo:

Coloque o ponto de insero no pargrafo ou selecione uma parte do texto

no pargrafo.

No submenu Texto > Formato do pargrafo ou no menu suspenso Formato, no

inspetor de propriedades, escolha uma opo:

Selecione um formato de pargrafo (por exemplo: Cabealho 1, Cabealho 2,

Texto pr-formatado, etc.). O tag HTML associado ao estilo selecionado (por
exemplo: h1 para Cabealho 1, h2 para Cabealho 2, pre para Texto prformatado, etc.) ser aplicado ao pargrafo inteiro.

Escolha Nenhum, para remover um formato de pargrafo.

Como alterar a cor do texto
possvel alterar a cor do texto selecionado, para que a nova cor anule a cor do
texto definida em Propriedades da pgina. Se nenhuma cor tiver sido configurada
em Propriedades da pgina, a cor de pgina padro ser preto.

258

Captulo 10

Para alterar a cor do texto:

Selecione o texto.

Escolha dentre as seguintes opes:

Escolha uma cor na paleta de cores aceitas pelo navegador, clicando no seletor
de cores, no inspetor de propriedades.

Escolha Texto > Cor. Aparecer a caixa de dilogo Seletor de cores do sistema.
Selecione uma cor e clique em OK.

Digite o nome da cor ou um nmero hexadecimal diretamente no campo do

inspetor de propriedades.

Para definir a cor padro do texto, utilize o comando Modificar > Propriedades
da pgina. Consulte Como definir as cores padro do texto na pgina 162.
Para retornar o texto cor padro:

No inspetor de propriedades, clique na caixa de cores para abrir a paleta decores

aceitas pelo navegador .

Clique no boto Riscado (o boto quadrado branco com uma linha vermelha
cortando-o, situado no canto superior direito).

Como alinhar o texto

Alinhe o texto na pgina usando o inspetor de propriedades ou o submenu Texto >
Alinhar. Centralize qualquer elemento na pgina utilizando o comando Texto >
Alinhar > No centro.
Para alinhar o texto:

Selecione o texto a ser alinhado ou simplesmente insira o indicador no incio do

texto.

Clique em uma opo de alinhamento ( esquerda, direita, No centro), no

inspetor de propriedades, ou escolha Texto > Alinhar e selecione um comando
de alinhamento.

Para centralizar os elementos:

Selecione o elemento (imagem, plug-in, tabela ou um outro elemento da

pgina) a ser centralizado.

Escolha Texto > Alinhar > No centro.

Nota: Blocos inteiros de texto podem ser alinhados e centralizados; no possvel alinhar
ou centralizar parte de um cabealho ou de um pargrafo.

Como inserir e formatar texto

259

Para recuar o texto e remover o recuo:

Selecione o texto desejado.

Clique no boto Recuo ou Remover o recuo, no inspetor de propriedades,

escolha Texto > Recuo ou Remover o recuo, ou selecione Lista > Recuo ou
Remover o recuo, no menu contextual.
Esse procedimento aplica ou remove o tag blockquote quando o texto
selecionado for um pargrafo ou cabealho; se o texto for uma lista, ser
adicionado ou removido um tag ul ou ol extra.

Como modificar as combinaes de fontes

Utilize o comando Editar a lista de fontes para definir as combinaes de fontes
que aparecem no inspetor de propriedades e no submenu Texto > Fonte.
As combinaes de fontes determinam como um navegador exibir o texto de
uma pgina da Web. O navegador utiliza a primeira fonte na combinao que
estiver instalada no sistema do usurio; se nenhuma das fontes na combinao
estiver instalada, ele exibir o texto conforme a especificao das preferncias do
navegador do usurio.
Para modificar as combinaes de fontes:

Escolha Texto > Fonte > Editar a lista de fontes.

Selecione a combinao de fontes na lista situada no alto da caixa de dilogo.

As fontes na combinao selecionada esto relacionadas na lista Fontes
escolhidas, no canto inferior esquerdo da caixa de dilogo. direita, h uma
lista com todas as fontes disponveis, instaladas no seu sistema.

Escolha dentre as seguintes opes:

Para adicionar ou remover fontes de uma combinao de fontes, clique no

boto << ou >>, entre as listas Fontes escolhidas e Fontes disponveis.

Para adicionar ou remover uma combinao de fontes, clique nos botes com
sinal de adio (+) e de subtrao (), no alto da caixa de dilogo.

Para adicionar uma fonte que no esteja instalada no sistema, digite o nome da
fonte no campo de texto abaixo da lista Fontes disponveis e clique no boto <<
para inclu-la na combinao. A incluso de uma fonte no instalada no sistema
til, por exemplo, para designar uma fonte especfica do Windows, quando o
usurio estiver criando algo em um Macintosh.

Para mover a combinao de fontes para cima ou para baixo em uma lista,
clique nos botes de seta, no alto da caixa de dilogo.

260

Captulo 10

Para adicionar uma nova combinao a uma lista de fontes:

Escolha Texto > Fonte > Editar a lista de fontes.

Selecione uma fonte na lista Fontes disponveis e clique no boto << para
mover a fonte para a lista Fontes escolhidas.

Repita a etapa 2 para cada fonte subseqente na combinao.

Para adicionar uma fonte que no esteja instalada no sistema, digite o nome da
fonte no campo de texto abaixo da lista Fontes disponveis e clique no boto <<
para inclu-la na combinao de fontes. A incluso de uma fonte no instalada
no sistema til, por exemplo, para designar uma fonte especfica do Windows,
quando o usurio estiver criando algo em um Macintosh.

Ao terminar a seleo das fontes especficas, selecione uma famlia de fontes

genrica no menu Fontes disponveis e clique no boto <<, para mover a famlia
genrica para a lista Fontes escolhidas.
As famlias de fontes genricas incluem cursivas, fantasia, monoespaadas, sansserif e serif. Se nenhuma das fontes na lista Fontes escolhidas estiver disponvel
no sistema do usurio, o texto aparecer na fonte padro associada famlia de
fontes genrica. Por exemplo: a fonte monoespaada padro na maioria dos
sistemas Courier.

Como utilizar as rguas horizontais

As rguas horizontais (linhas) so teis para organizar informaes. Em uma
pgina, o texto e os objetos podem ser separados visualmente por meio de uma ou
mais rguas.
Para criar uma rgua horizontal:

Na janela do documento, coloque o ponto de insero onde ser inserida uma

rgua horizontal.

Siga um dos procedimentos abaixo:

Escolha Inserir > Rgua horizontal.

Escolha Janela > Objetos, para abrir o painel Objetos e, em seguida, clique no
boto Rgua horizontal, na categoria Comuns.
Para modificar uma rgua horizontal:

Na janela do documento, selecione uma rgua horizontal.

Escolha Janela > Propriedades, para abrir o inspetor de propriedades, e

modifique as propriedades conforme desejar.

Como inserir e formatar texto

261

Como utilizar os estilos HTML para

formatar o texto
Um estilo HTML definido por um ou mais tags HTML (por exemplo: b, i, font
e center) que aplicam a formatao ao texto. A especificao HTML 4.0 lanada
pelo World Wide Web Consortium (W3C), no incio de 1998, recomenda a
utilizao das folhas de estilos CSS em vez dos tags de formatao HTML. Na
prtica, contudo, os tags de formatao HTML embora ofeream um controle
mais limitado sobre a aparncia do que as folhas de estilos CSS, alm da demora
para serem carregados recebem suporte de uma gama mais ampla de
navegadores do que as folhas de estilos CSS e, provavelmente, iro se manter como
parte das ferramentas dos programadores da Web, enquanto os navegadores 3.0 e
menos avanados ainda se constituam em uma parte significativa do trfego de
rede.
Para obter informaes especficas sobre a formatao com os tags HTML,
consulte um dos seguintes tpicos:

Como definir e alterar as fontes e estilos na pgina 257

Como alterar a cor do texto na pgina 258
Como alinhar o texto na pgina 259
Os tags HTML que definem a estrutura do documento, muito antes do que a sua
aparncia por exemplo: cabealhos, pargrafos e listas ainda so parte
integrante da especificao de HTML. De fato, se voc estiver planejando utilizar
folhas de estilos CSS para definir as caractersticas da fonte para a sua pgina,
importante utilizar os tags de cabealho padro, porque eles ajudam a preservar a
estrutura da pgina nos navegadores que no oferecem suporte s folhas de estilos
CSS. Para ver um exemplo de como isto funciona, experimente visualizar a Ajuda
do Dreamweaver em um navegador 3.0. Consulte Como utilizar os pargrafos e
cabealhos na pgina 258.

262

Captulo 10

Como utilizar os estilos HTML

Utilize os estilos HTML para salvar a formatao de texto e pargrafo, a fim de
utiliz-la em outros documentos. Quando tiver sido criado um estilo HTML com
base em um ou mais tags HTML, possvel reaplicar essa formatao a textos em
quaisquer documentos, usando o painel Estilos HTML.
Menu contextual

Excluir o estilo
Aplicao
automtica

Novo estilo

Diferentemente dos estilos CSS, a formatao com o estilo HTML afeta apenas o
texto ao qual foi aplicada ou o texto que tiver sido criado com um estilo HTML
selecionado. Se a formatao de um estilo HTML criado por voc for alterada, o
texto originalmente formatado com esse estilo no ser atualizado. Para ter a
possibilidade de alterar a formatao e, automaticamente, atualizar todas as
ocorrncias dessa formatao, utilize os estilos CSS; consulte Como utilizar as
folhas de estilos CSS na pgina 267.
Para exibir o guia OReilly de referncia de HTML, distribudo com o
Dreamweaver, clique no boto Referncia, na barra de ferramentas, e escolha
Referncia de HTML OReilly, no menu suspenso.
O painel Estilos HTML pode servir para registrar os estilos HTML utilizados em
um site, a fim de poderem ser compartilhados com outros usurios, sites locais ou
remotos.
Para exibir o painel Estilos HTML, siga um dos procedimentos abaixo:

Escolha Janela > Estilos HTML.

Clique no cone de Estilos HTML, na barra do Iniciador ou no Iniciador.

Como inserir e formatar texto

263

Para visualizar um estilo HTML existente:

No painel Estilos HTML, selecione um estilo.

Observe que Limpar o estilo do pargrafo e Limpar o estilo da seleo so
utilizados no texto que contm um estilo aplicado, mas que em si no se
constitui em um estilo, no podendo assim ser visualizado ou editado.

No painel Estilos HTML, clique com o boto direito do mouse (no Windows),
ou pressione a tecla Control e clique (no Macintosh), e escolha Editar, no menu
contextual, ou clique duas vezes no estilo HTML e selecione Editar, no menu
contextual.

Na caixa de dilogo Definir o estilo HTML, especifique as definies 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 configuraes para o estilo sero adicionadas formatao
original do texto (Adicionar ao estilo existente) ou removidas da formatao
existente e substitudas pelas novas configuraes (Limpar o estilo existente).

Para aplicar um estilo HTML existente:

No painel Estilos HTML, selecione um estilo.

Se a caixa de seleo Aplicao automtica, na parte inferior do painel, estiver

selecionada, clique uma vez no estilo.

Se a caixa de seleo Aplicao automtica no estiver selecionada, clique no

estilo e, depois, em Aplicar.
Para limpar a formatao do texto no documento:

Selecione o texto formatado.

No painel Estilos HTML, clique em Limpar o estilo do pargrafo ou Limpar o

estilo da seleo.
Limpar o estilo do pargrafo remove a formatao do bloco de texto atual
no documento. Limpar o estilo da seleo remove a formatao do texto
selecionado.

Nota: As opes Limpar o estilo do pargrafo e Limpar o estilo da seleo podem ser
utilizadas para remover qualquer formatao (exceto CSS), independentemente de como
a formatao original tenha sido aplicada (por exemplo: atravs do painel Estilos HTML ou
do inspetor de propriedades).
Para remover um estilo do painel Estilos HTML:

264

Captulo 10

No painel Estilos HTML, desmarque a caixa de seleo para desativar a opo

Aplicao automtica.

Selecione um estilo HTML.

Clique no cone de Excluir o estilo (lixeira), na parte inferior direita do painel.

Para criar um novo estilo HTML com base em um texto existente:

No documento, selecione ou crie o texto que contm a formatao a ser

utilizada como base do novo estilo HTML. O inspetor de propriedades pode
ser utilizado para exibir e aplicar a formatao.

No painel Estilos HTML, clique no cone de Novo estilo (sinal de adio), no

canto inferior direito.

Na caixa de dilogo Definir o estilo HTML, nomeie o estilo e ajuste a

formatao, se for necessrio.

Escolha se deseja aplicar o estilo HTML ao texto selecionado ou ao pargrafo

inteiro. Note que o estilo de pargrafo ser aplicado ao bloco inteiro de texto,
no qual estiver o ponto de insero, independentemente do texto que estiver
selecionado.

Escolha se o estilo HTML ser acrescentado ao estilo j existente (CSS ou HTML)

do texto ou pargrafo selecionado, ou para substituir a formatao da seleo ou do
pargrafo pelo novo estilo HTML. Lembre-se da hierarquia para aplicar os estilos:
os estilos HTML precedem os estilos CSS, que prevalecem sobre os estilos CSS
externos. Consulte Como utilizar as folhas de estilos CSS na pgina 267.
Observe que as opes de formatao no painel Estilos HTML correspondem
s do inspetor de propriedades.
4

Clique em OK.

Para criar um novo estilo HTML com base em um estilo HTML existente:

Certifique-se de que no haja texto selecionado na janela do documento.

No painel Estilos HTML, selecione um estilo e, em seguida, siga um dos

procedimentos abaixo:

Clique no tringulo, no canto superior direito do painel, para exibir o menu

contextual suspenso.

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

Control e clique (no Macintosh). Em seguida, escolha Duplicar, no menu
contextual.
Aparecer a caixa de dilogo Definir o estilo HTML. Para redefini-lo com as
opes padro, clique em Limpar.
3

Conclua as etapas 3 e 4 das instrues, para criar um novo estilo com base em
um texto existente.

Como inserir e formatar texto

265

Para criar um novo estilo HTML a partir do zero:

No painel Estilos HTML, clique no cone de Novo estilo; possvel tambm

escolher Texto > Estilos HTML > Novo estilo.
Aparecer a caixa de dilogo Definir o estilo HTML.

Conclua as etapas 3 e 4 das instrues para criar um novo estilo com base em
um texto existente.
Clique em Limpar, para redefinir a caixa de dilogo com as opes padro.

Clique em OK.

Para editar um estilo HTML existente:

Certifique-se de que no haja texto selecionado na janela do documento.

No painel Estilos HTML, verifique se a caixa de seleo Aplicao automtica

est desmarcada.
Se a opo Aplicao automtica estiver ativada, o estilo HTML ser aplicado
quando este for escolhido no painel Estilos HTML.

No painel Estilos HTML, clique com o boto direito do mouse (no Windows)
ou pressione Control e clique (no Macintosh) no estilo. Em seguida, escolha
Editar, no menu contextual.
Aparecer a caixa de dilogo Definir o estilo HTML. Para redefini-lo com as
opes padro, clique em Limpar.
Quando um estilo HTML editado, o Dreamweaver no atualiza
automaticamente o texto que tenha sido formatado previamente utilizando este
estilo. Se desejar atualizar a formatao aplicada com um estilo, utilize uma
folha de estilos CSS; consulte Como utilizar as folhas de estilos CSS na
pgina 267.

Para compartilhar os estilos HTML com outros sites ou usurios:

Escolha Janela > Arquivos do site, para abrir a janela do site na visualizao dos
arquivos do site.

No painel direita, abra a pasta raiz do site e, em seguida, abra a pasta

Biblioteca.
H um arquivo chamado styles.xml. Esse arquivo contm todos os estilos
HTML do site. Ele pode ser colocado, obtido, devolvido, retirado e copiado
como qualquer outro no site. Tambm possvel criar Design Notes para o
arquivo styles.xml. Observe que, para criar ou editar um estilo para um site
remoto, necessrio retirar primeiro o arquivo styles.xml.
Para obter mais informaes sobre o uso dessas opes, consulte Como
configurar um site remoto na pgina 131.

266

Captulo 10

Como utilizar as folhas de estilos CSS

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

Como inserir e formatar texto

267

H trs tipos disponveis de folhas de estilos CSS no Dreamweaver:

Os estilos CSS personalizados so semelhantes queles utilizados em um

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

Os estilos de tags HTML redefinem a formatao de um tag especfico, como

h1.

Quando for criado ou alterado um estilo CSS para o tag h1, todos os textos
formatados com o tag h1 sero imediatamente atualizados.

Nota: Tenha cuidado ao redefinir os tags em uma CSS vinculada, pois isto poder alterar o
layout de muitas pginas. Por exemplo: se o tag table for redefinido de modo a ter uma
determinada aparncia, ele ir alterar o layout de outras pginas que utilizarem tabelas.

Os estilos do seletor CSS redefinem a formatao de uma determinada

combinao de tags (por exemplo: td h2 ser aplicado sempre que um
cabealho h2 aparecer em uma clula de tabela) ou de todos os tags que
contiverem um atributo id (por exemplo: #myStyle ser aplicado a todos os tags
que contiverem o par atributo-valor ID="myStyle").
A formatao HTML manual anula a formatao aplicada com os estilos CSS (ou
HTML). Para que os estilos CSS controlem a formatao de um pargrafo,
remova toda a formatao HTML manual ou os estilos HTML.
Embora seja possvel configurar um nmero ilimitado de atributos de estilo CSS
definidos pela especificao CSS1 no Dreamweaver, nem todos os atributos
aparecero na janela do documento. Os atributos ocultos so marcados com um
asterisco (*) na caixa de dilogo Definio de estilo. Observe tambm que alguns
dos atributos de estilo CSS, que podem ser definidos no Dreamweaver, tm uma
aparncia diferente no Microsoft Internet Explorer 4.0 e no Netscape Navigator
4.0, e alguns no contam atualmente com suporte de nenhum navegador.
Nota: Para exibir o guia OReilly de referncia de CSS, distribudo com o Dreamweaver,
clique no boto Referncia, na barra de ferramentas e escolha Referncia de HTML
O'Reilly, no menu pop-up.

268

Captulo 10

Sobre as propriedades dos estilos CSS

A especificao Cascading Style Sheets (CSS1), que administrada pelo World
Wide Web Consortium, define as propriedades dos estilos CSS (por exemplo:
fonte, cor, preenchimento, margem, espaamento entre as palavras) que
controlam a aparncia dos elementos na pgina da Web. O Dreamweaver permite
definir qualquer propriedade CSS1.
No Internet Explorer 4.0 e mais avanado, podem ser utilizadas as linguagens de
script, como JavaScript ou VBScript, para alterar as propriedades de
posicionamento e estilos CSS dos elementos aps a carga da pgina. No Netscape
Navigator 4.0 e mais avanado, as propriedades dos estilos CSS no podem ser
alteradas depois que a pgina tiver sido carregada, apenas as propriedades de
posicionamento.
Como criar ou vincular uma folha de estilos CSS externa
Uma folha de estilos CSS um arquivo de texto externo que contm
especificaes de estilos e formatao. Quando uma folha de estilos CSS externa
for editada, todos os documentos a ela vinculados sero atualizados com essas
alteraes. Os estilos CSS de um documento podem ser exportados para criar uma
nova folha de estilos CSS e, em seguida, anexados ou vinculados a uma folha de
estilos externa, a fim de aplicar os estilos nela contidos.

A Ajuda do Dreamweaver consiste de pginas HTML que utilizam uma folha de

estilos CSS vinculada, chamada help.css. Para examinar a aparncia do cdigo para
uma definio de folha de estilos, abra o arquivo help.css (na pasta Help/html) em
um editor de texto. Abra qualquer um dos arquivos de tpicos (aqueles iniciados
por um nmero) para ver como a folha de estilos CSS est vinculada ao
documento atravs de um tag link, e tambm como os estilos CSS especficos
so aplicados. Voc tambm pode copiar o help.css para a sua pasta raiz local e
aplicar os seus estilos a uma pgina de teste.

Como inserir e formatar texto

269

Para anexar uma folha de estilos CSS externa:

Escolha Janela > Estilos CSS, ou clique no cone de Estilos CSS, no Iniciador.

No painel Estilos CSS, clique com o boto direito (no Windows), ou pressione
a tecla Control e clique (no Macintosh), e escolha Anexar a folha de estilos, no
menu pop-up. Tambm possvel clicar no cone de Anexar a folha de estilos,
na parte inferior do painel Estilos CSS.

Na caixa de dilogo Selecionar a folha de estilos, digite o nome do arquivo em

um campo URL ou procure o arquivo desejado.

Selecione um documento ou caminho relativo raiz do site. Consulte Sobre as

localizaes e os caminhos dos documentos na pgina 386.

Clique em Abrir. A folha de estilos ser anexada ao documento do

Dreamweaver e os seus estilos aparecero no painel Estilos CSS.

Para vincular ou criar uma folha de estilos CSS externa

Escolha Janela > Estilos CSS, ou clique no cone de Estilos CSS, no Iniciador.

No painel Estilos CSS, clique com o boto direito (no Windows), ou pressione
a tecla Control e clique (no Macintosh), e escolha Editar a folha de estilos, no
menu suspenso.

Na caixa de dilogo Editar a folha de estilos, clique em Vincular.

Na caixa de dilogo Vincular a folha de estilos externa, siga um dos

procedimentos abaixo:

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. A busca recomendada porque garante que ser digitado o
caminho correto da folha de estilos.

Crie uma nova folha de estilos CSS externa, digitando um novo nome de
arquivo (que ainda no exista no local especificado). O nome do arquivo deve
conter a extenso .css.
5

Selecione a opo Vincular ou Importar, para especificar e criar o tag utilizado

para anexar a folha de estilos CSS externa ao documento e, em seguida, clique
em OK.
A opo Importar insere no documento atual as informaes contidas no
arquivo da folha de estilos CSS externa, enquanto Vincular acessa e reserva as
informaes sem transferi-las. Embora ambas as opes passem todos os estilos
da folha de estilos CSS externa para o documento atual, Vincular oferece mais
recursos e funciona com mais navegadores.
O nome da folha de estilos CSS externa aparecer com o identificador (vincular ou
importar) na lista de estilos, na caixa de dilogo Editar os estilos. Conclua as etapas
abaixo para criar ou editar os estilos definidos na folha de estilos CSS externa.

270

Captulo 10

Na caixa de dilogo Editar a folha de estilos, selecione o nome da folha de

estilos externa e clique em Editar.
Aparecer a caixa de dilogo Editar a folha de estilos para essa folha de estilos.

Clique em Novo, para definir os estilos na folha de estilos CSS externa.

Na caixa de dilogo Novo estilo, defina o novo estilo. Consulte Como criar
um estilo CSS no Dreamweaver na pgina 272.

Ao terminar de definir os estilos, clique em Salvar.

Como editar uma folha de estilos CSS externa:

Quando uma folha de estilos CSS que controla o texto no documento for editada,
o texto inteiro ser reformatado instantaneamente. As edies afetam todos os
documentos vinculados folha de estilos.
Para editar uma folha de estilos CSS externa:

Abra qualquer documento que esteja vinculado folha de estilos CSS externa a
ser alterada.

Siga um dos procedimentos abaixo:

Escolha Janela > Estilos CSS, ou clique no cone de Estilos CSS, no Iniciador.
No painel Estilos CSS, clique com o boto direito (no Windows), ou pressione
a tecla Control e clique (no Macintosh), e escolha Editar a folha de estilos, no
menu suspenso.

Escolha Texto > Estilos CSS > Editar a folha de estilos.

3

Na caixa de dilogo Editar a folha de estilos, selecione o nome da folha de

estilos externa e clique em Editar.
Aparecer uma segunda caixa de dilogo Editar a folha de estilos, exibindo os
estilos na folha externa. Escolha os estilos a serem editados.

Edite o estilo. Consulte Como criar um estilo CSS no Dreamweaver na

pgina 272.

Ao terminar a edio dos estilos, clique em Salvar.

Como inserir e formatar texto

271

Como criar um estilo CSS no Dreamweaver

Crie um estilo CSS para automatizar a formatao dos tags HTML ou uma faixa
de texto identificada por um atributo class.
Para criar um estilo CSS:

Escolha Janela > Estilos CSS e, no painel Estilos CSS, clique com o boto
direito do mouse (no Windows) ou pressione a tecla Control e clique (no
Macintosh), e escolha Novo estilo, no menu pop-up. Tambm possvel clicar
no cone de Novo estilo, na parte inferior do painel Estilos CSS.

Escolha dentre as seguintes opes de estilos CSS:

cria um estilo que pode ser aplicado como
um atributo class a uma faixa ou bloco de texto.
Criar estilo personalizado (classe)

redefine a formatao padro de um tag HTML

especificado. Lembre-se que possvel alterar o layout de muitas pginas
quando um tag for redefinido.
Redefinir o tag HTML

define a formatao para uma determinada combinao

de tags ou para todos os tags que contm um atributo 1d especfico.
Utilizar o seletor CSS

Digite um nome, tag ou seletor para o novo estilo:

Os nomes de estilos CSS (classe) personalizados devem iniciar com um ponto.

Caso o ponto no seja includo, o Dreamweaver o digitar. Esses nomes podem
conter qualquer combinao de letras e nmeros, mas deve ser colocada uma
letra aps o ponto. Por exemplo: .cabealhocomercial1.

Para redefinir um estilo de tag HTML, digite um tag HTML ou escolha algum
no menu pop-up .

Para um seletor CSS, digite qualquer critrio vlido para um seletor (por
exemplo: td ou #myStyle), ou escolha um seletor no menu pop-up. Os seletores
disponveis no menu so a:active, a:hover, a:link e a:visited.
4

Selecione o local onde o estilo ser definido: Novo arquivo de folha de estilos
(externa) ou Apenas este documento.

Clique em OK. Aparecer a caixa de dilogo Definio de estilo.

Escolha as definies de formatao para o novo estilo CSS. Mantenha os

atributos em branco, caso no sejam importantes para o estilo.
Os atributos que no aparecem na janela do documento so marcados com um
asterisco (*) na caixa de dilogo Definio de estilo. Alguns dos atributos de
estilo CSS que podem ser definidos no Dreamweaver tm uma aparncia
diferente no Microsoft Internet Explorer 4.0 e no Netscape Navigator 4.0, e
alguns no contam atualmente com suporte de nenhum navegador.

272

Captulo 10

Clique em OK ou Aplicar.

Consulte os tpicos seguintes na Ajuda do Dreamweaver, para obter informaes

sobre definies especficas:

painel Definio de estilo do tipo

painel Definio de estilo do fundo
painel Definio de estilo de bloco
painel Definio de estilo de caixa
painel Definio de estilo de borda
painel Definio de estilo de lista
painel Definio de estilo de posicionamento
painel Definio de estilo de extenses

Quando for criado um estilo (classe) personalizado, ele aparecer no painel Estilos
CSS e no submenu Texto > Estilos CSS. Os estilos de tags HTML e do seletor
CSS no aparecem no painel Estilos CSS, porque no podem ser aplicados, mas
so representados automaticamente na janela do documento, onde ocorrer o tag
ou seletor.
Como aplicar um estilo (classe) CSS personalizado
Os estilos (classes) personalizados so o nico tipo de estilo CSS que pode ser
aplicado a qualquer texto em um documento, sem levar em considerao os tags
que o controlam. O painel Estilos CSS exibe os nomes de todos os estilos
disponveis.
No confunda os estilos CSS com as opes como Negrito ou Varivel do
submenu Texto > Estilo; essas opes so atributos de formatao predefinidos,
que correspondem a tags HTML especficos.
Quando dois ou mais estilos CSS forem aplicados ao mesmo texto, estes podero
se tornar conflitantes e produzir resultados inesperados. Consulte Sobre os estilos
conflitantes na pgina 275.

Como inserir e formatar texto

273

Para aplicar um estilo CSS personalizado:

Escolha Janela > Estilos CSS.

Selecione o texto ao qual ser aplicado um estilo CSS.

Coloque o ponto de insero em um pargrafo, para aplicar o estilo ao
pargrafo inteiro.
Para especificar o tag exato ao qual o estilo CSS deve ser aplicado, escolha o
tag com o seletor, na parte inferior esquerda da janela do documento. Tambm
possvel selecionar o tag exato no seletor de tags, clique com o boto direito
do mouse (no Windows) ou pressione a tecla Control e clique (no Macintosh),
para mostrar um menu contextual, e escolha Set Class, para examinar uma lista
de estilos CSS a serem aplicados.
Se for selecionada uma faixa de texto em um nico pargrafo, o estilo CSS
afetar apenas a faixa selecionada.

Clique em um nome de estilo no painel Estilos CSS.

Um estilo CSS tambm pode ser aplicado escolhendo um nome de estilo no

submenu Texto > Estilos CSS, ou clicando com o boto direito do mouse (no
Windows), ou pressionando a tecla Control e clicando (no Macintosh) para
escolher o nome do estilo no submenu Estilos CSS do menu contextual. O tag da
seleo atual aparecer ao lado do comando Estilo personalizado.
Como exportar os estilos para criar uma folha de estilos CSS
Os estilos de um documento podem ser exportados para criar uma nova folha de
estilos CSS. Em seguida, ela pode ser vinculada a outros documentos, para que os
estilos sejam aplicados.
Para exportar os estilos CSS de um documento e criar uma folha de estilos CSS:

274

Captulo 10

Escolha Arquivo > Exportar > Exportar os estilos CSS, ou selecione Texto >
Exportar a folha de estilos. Aparecer a caixa de dilogo Exportar os estilos
como um arquivo CSS.

Digite um nome para o estilo e clique em Salvar. O estilo ser salvo como uma
folha de estilos CSS.

Sobre os estilos conflitantes

Quando dois ou mais estilos CSS forem aplicados ao mesmo texto, estes podero
se tornar conflitantes 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 especficos sejam
conflitantes. Por exemplo: um estilo pode especificar azul para a cor do texto e
outro definir vermelho.

Se os atributos de dois estilos aplicados ao mesmo texto forem conflitantes, o

navegador exibir o atributo do estilo mais prximo (quele do texto).

Se houver um conflito direto, os atributos dos estilos CSS (aplicados com o

atributo class ) anularo aqueles dos estilos de tags HTML.
No exemplo seguinte, o estilo definido para h1 deve especificar a fonte, o tamanho
e a cor para todos os pargrafos h1, mas o estilo CSS personalizado .Blue aplicado
a esse pargrafo anula a definio de cor no estilo H1. O segundo estilo CSS
personalizado .Red anula o .Blue porque ele est contido no estilo .Blue.
<h1><span class="Blue">Este pargrafo est controlado pelo estilo
personalizado .Blue e pelo estilo h1
de tag HTML.<span class="Red">Exceto pelo fato de esta sentena ser controlada
pelo estilo .Red.
</span>
Agora, estamos de volta ao estilo .Blue.</span></h1>

Como utilizar o painel Estilos CSS

Utilize o painel Estilos CSS para aplicar os estilos CSS personalizados seleo atual.
O painel Estilos CSS exibe apenas os estilos CSS (classes) personalizados; os estilos
redefinidos de tags HTML e de seletor CSS no aparecem no painel Estilos CSS,
porque so aplicados automaticamente a qualquer texto controlado pelo tag ou seletor
especificado. (Caso seja conveniente recortar e colar estilos que podem ser reutilizados,
mas no atualizados e personalizados, utilize o painel Estilos HTML.)
Escolha Janela > Estilos CSS, para exibir o painel Estilos CSS.
exibe o tag da seleo atual. Escolha um tag no menu pop-up para
selecionar uma opo diferente.

Aplicar

abre a caixa de dilogo Novo estilo. Crie um novo estilo para um

determinado documento ou crie uma nova folha de estilos externa.
Novo estilo

Anexar a folha de estilos abre a caixa de dilogo Selecionar o arquivo de folha de

estilos. Selecione uma folha de estilos externa para anexar ao documento atual.

abre a caixa de dilogo Editar a folha de estilos. Edite

qualquer um dos estilos no documento atual ou em uma folha de estilos externa.
Editar a folha de estilos

Consulte tambm Como utilizar as folhas de estilos CSS na pgina 267.

Como inserir e formatar texto

275

Nota: Clique com o boto direito do mouse (no Windows), ou pressione a tecla Control e
clique (no Macintosh) no painel Estilos CSS, para abrir um menu contextual que inclui os
comandos Editar, Duplicar, Excluir, Aplicar o novo estilo, Editar a folha de estilos e Anexar
a folha de estilos.

Como definir as preferncias de estilos CSS

As preferncias de estilos CSS controlam a maneira pela qual o Dreamweaver
grava o cdigo que define 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 prefira que o Dreamweaver grave os estilos de forma
abreviada, no h razo para alterar qualquer uma das preferncias de estilos CSS.
Escolha Editar > Preferncias, e clique em Estilos CSS, para exibir as preferncias
de formato da folha de estilos CSS. Consulte tambm Como utilizar as folhas de
estilos CSS na pgina 267.
Utilizar o formato abreviado para determina quais atributos de estilo CSS o
Dreamweaver gravar em formato abreviado.
Ao editar os estilos CSS, utilize o formato abreviado controla se o Dreamweaver
regravar os estilos existentes no formato abreviado. Escolha a opo Se o formato
original for abreviado, para fazer com que o Dreamweaver mantenha todos os
estilos originais. Escolha De acordo com as definies acima, para que o
Dreamweaver reescreva os estilos em formato abreviado, segundo os atributos
especificados nas caixas de seleo Utilizar o formato abreviado de.

276

Captulo 10

Como converter os estilos CSS em tags

HTML
Se voc utilizar os estilos CSS para especificar a formatao do texto (como
famlia, tamanho, cor e decorao das fontes) e, posteriormente, decidir tornar a
formatao visvel em um navegador 3.0, utilize o comando Arquivo > Converter
> Compatvel com navegador 3.0, para converter o maior nmero de informaes
possveis sobre os estilos para os tags HTML.
Nota: Nem todos os estilos CSS podem ser convertidos em HTML, porque os tags HTML
no abrangem ou oferecem suporte a todos os atributos possveis nas CSS.
Para converter um arquivo que utiliza os estilos CSS em um arquivo compatvel
com navegador 3.0:

Escolha Arquivo > Converter > Compatvel com navegador 3.0.

Na caixa de dilogo que aparecer, escolha Estilos CSS em markup de HTML.

Quando a opo Camadas em tabelas for selecionada, o Dreamweaver
substituir todas as camadas por uma tabela e manter o posicionamento
original.
Os estilos CSS sero substitudos, onde for possvel, pelos tags HTML, como b
e font. Qualquer markup CSS que no puder ser convertido em HTML ser
removido. Consulte Tabela de converso de CSS em markup de HTML na
pgina 278 para obter informaes sobre quais estilos sero convertidos e quais
sero removidos.

Clique em OK. O Dreamweaver abrir o arquivo convertido em uma nova

janela sem ttulo.

Nota: Este procedimento de converso dever ser efetuado sempre que o arquivo original
for alterado, para atualizar o arquivo compatvel com os navegadores da verso 3.0. Por
esse motivo, recomendamos que isto seja efetuado apenas depois que voc estiver
inteiramente satisfeito com o arquivo original.

Como inserir e formatar texto

277

Tabela de converso de CSS em markup de HTML

Os atributos CSS relacionados na tabela abaixo so convertidos em markup de
HTML utilizando o comando Arquivo > Converter > Compatvel com navegador
3.0. Consulte Como converter os estilos CSS em tags HTML na pgina 277.
Os atributos no contidos na tabela sero removidos.

278

Captulo 10

atributo CSS

Convertido em

color

FONT COLOR

font-family

FONT FACE

font-size

FONT SIZE="[1-7]"

font-style: oblique

font-style: italic

font-weight

list-style-type: square

UL TYPE="square"

list-style-type: circle

UL TYPE="circle"

list-style-type: disc

UL TYPE="disc"

list-style-type: upper-roman

OL TYPE="I"

list-style-type: lower-roman

OL TYPE="i"

list-style-type: upper-alpha

OL TYPE="A"

list-style-type: lower-alpha

OL TYPE="a"

list-style

UL ou OL com TYPE, conforme for

adequado

text-align

P ALIGN ou DIV ALIGN, conforme for

adequado

text-decoration: underline

text-decoration: line-through

STRIKE

Como verificar a ortografia

Utilize o comando Verificar a ortografia, no menu Texto, para corrigir a ortografia
no documento. Esse comando ignora os tags HTML e valores de atributos.
Como padro, a verificao ortogrfica utiliza o dicionrio ortogrfico de ingls
dos EUA. Para alterar o dicionrio, escolha Editar > Preferncias > Geral, e
selecione um outro dicionrio no menu pop-up. Os dicionrios dos idiomas
adicionais esto disponveis para download no Centro de suporte do
Dreamweaver.
Como verificar a ortografia utilizando a caixa de dilogo
Verificar a ortografia
Utilize as seguintes opes da caixa de dilogo Verificar a ortografia para examinar
a ortografia no documento: Para exibir a caixa de dilogo, escolha Texto > Verificar
a ortografia.
Adicionar ao dicionrio pessoal adiciona

a palavra no-reconhecida ao seu

dicionrio pessoal. Para remover as palavras do dicionrio pessoal, edite o arquivo
Personal.dat em um editor de texto. Esse arquivo est em Dreamweaver 4/
Configuration/Dictionaries.
Ignorar ignora

a ocorrncia de uma palavra no-reconhecida.

Ignorar todas ignora

todas as ocorrncias de uma palavra no-reconhecida.

Alterar substitui

a ocorrncia da palavra no-reconhecida pelo texto digitado na

caixa Alterar para, ou pela seleo na lista Sugestes.
Alterar todas substitui

todas as ocorrncias da palavra no-reconhecida.

Como inserir e formatar texto

279

Como procurar e substituir texto, tags e

atributos
possvel realizar uma busca de texto, texto circundado por determinados tags ou
tags e atributos HTML no documento atual, em arquivos especficos, em um
diretrio ou no site inteiro. Observe que sero utilizados comandos diferentes para
procurar arquivos e texto (e/ou tags HTML 1) nos arquivos: Localizar no site local
e Localizar no site remoto buscam arquivos, enquanto que Editar > Localizar e
substituir procuram texto e tags nos arquivos.
Para procurar texto e/ou HTML nos documentos:

Escolha dentre as seguintes opes:

Na visualizao do projeto, na janela do documento ou do site, escolha Editar >

Localizar e substituir.

Na visualizao de cdigo, clique com o boto direito do mouse (no Windows),

ou clique mantendo a tecla Control pressionada (no Macintosh), e escolha
Localizar e substituir no menu contextual.
2

Na caixa de dilogo Localizar e substituir que aparecer, utilize a opo Localizar

em, para especificar os arquivos a serem localizados:

Documento atual restringe a busca ao documento ativo. Esta opo estar

disponvel apenas quando for escolhida Localizar ou substituir, na janela ativa
do documento ou no menu contextual, no inspetor de cdigo.

A escolha de Todo o site local expande a busca para todos os documentos

HTML, arquivos de biblioteca e documentos de texto localizados no site. Aps
a escolha de Site atual, o nome deste aparecer direita do menu pop-up. Se
este no for o site no qual deseja efetuar a busca, escolha um outro site no menu
pop-up Sites atuais, na janela do site.

Arquivos selecionados do site restringe a busca aos arquivos e pastas que

estiverem selecionados na janela do site. Esta opo est disponvel apenas
quando Localizar ou substituir tiver sido escolhida na janela do site ativa (isto ,
na frente da janela do documento).

A escolha de Pasta restringe a busca a um grupo especfico de arquivos. Aps

escolher a pasta, clique no cone correspondente pasta, para procurar e
selecionar o diretrio no qual ser efetuada a busca.

280

Captulo 10

Utilize a opo Procurar, para especificar o tipo de busca a ser efetuada.

A escolha de Cdigo-fonte permite procurar determinadas seqncias de texto

no cdigo-fonte HTML. Consulte Sobre as buscas de cdigo-fonte HTML
na pgina 282.

A escolha de Texto permite procurar determinadas seqncias de texto na janela

do documento. Uma busca de texto ignora qualquer HTML que interrompa a
seqncia. Por exemplo: uma busca de o co preto coincidiria com o co preto
e o <i>co</i> preto..

A escolha de Texto avan. permite procurar determinadas seqncias de texto

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

especficos na pgina 284.

A escolha de Tag especfico permite procurar determinados tags, atributos e

valores de atributo, como todos os tags td com a definio de valign para top.
Consulte Como procurar os tags e atributos HTML na pgina 282.
Nota: A ativao atravs das teclas Control e Enter ou Shift e Enter (no Windows), ou
Control e Return, Shift e Return ou Command e Return (no Macintosh) adiciona
quebras de linha nos campos de busca de texto, permitindo a procura de um caractere
de retorno. Verifique se a opo Ignorar os diferentes espaos em branco est
desmarcada ao fazer essa busca, quando no forem utilizadas as expresses regulares.
Observe que esse procedimento localiza um determinado caractere de retorno, mas
no apenas uma quebra de linha; por exemplo: no localizar um tag <br> ou <p>. Os
caracteres de retorno aparecem como espaos na visualizao do projeto e no como
quebras de linha.

Utilize uma das seguintes opes para expandir ou limitar a busca:

A opo Coincidir maisc./minsc restringe a busca ao texto que coincidir

exatamente com a caixa do texto a ser localizado. Por exemplo: se voc tentar
localizar o chapu marrom, no encontrar O chapu marrom.
Nota: A opo Ignorar os diferentes espaos em branco trata qualquer espao em
branco como espao simples, com o intuito de coincidir com a busca. Por exemplo:
com esta opo selecionada, este texto coincidiria com este texto, porm no
com estetexto. Esta opo no estar disponvel quando Utilizar expresses regulares
estiver selecionada; neste caso, ser necessrio escrever textualmente a expresso
normal, a fim de ignorar qualquer espao em branco Observe que os tags <p> e <br>
no so considerados espao em branco.

A opo Utilizar expresses regulares acarreta a interpretao de certos

caracteres e cadeias de caracteres pequenas (como ?, *, \w e \b) da seqncia de
busca como operadores comuns de expresses. Por exemplo: a busca de o co
b\w*\b coincidir com o co preto e o co policial. Consulte Sobre as
expresses regulares na pgina 286.

Como inserir e formatar texto

281

Nota: Se voc estiver trabalhando na visualizao de cdigo, fizer alteraes no seu

documento e tentar localizar e substituir qualquer item que no seja cdigo-fonte,
aparecer uma caixa de dilogo informando que o Dreamweaver est sincronizando as
duas visualizaes antes de efetuar a busca. Para obter mais informaes sobre a
sincronizao de visualizaes, consulte Como utilizar a visualizao de cdigo (ou o
inspetor de cdigo) na pgina 361.

Sobre as buscas de cdigo-fonte HTML

Utilize a opo Cdigo-fonte HTML, na caixa de dilogo Localizar e substituir,
para procurar seqncias especficas de texto no cdigo-fonte HTML. Por
exemplo: uma busca de co preto no seguinte cdigo coincidiria com duas
instncias (no atributo alt e na primeira frase):
<img src="barnaby.gif" width="100" height="100"
alt=Barnab, um co preto.><br>
Ontem, vimos vrios ces pretos no parque. O co
<a href=barnab.html>preto</a> de que mais gostamos se chama Barnab.

A frase co preto tambm aparece na segunda orao, porm ela no coincide com
a busca, pois interrompida por um link.
Consulte Como procurar e substituir texto, tags e atributos na pgina 280 para
obter instrues passo a passo que explicam como iniciar uma busca.
Como procurar os tags e atributos HTML
Utilize a opo Tag especfico, na caixa de dilogo Localizar e substituir, para
procurar tags, atributos e valores de atributos especficos. Por exemplo: possvel
procurar todos os tags img sem o atributo alt. Consulte Como procurar e
substituir texto, tags e atributos na pgina 280 para obter informaes sobre os
vrios tipos de buscas.
Para realizar uma busca de tag:

Escolha Editar > Localizar e substituir, e especifique em quais arquivos dever

ser feita a busca, conforme a explicao em Como procurar e substituir texto,
tags e atributos na pgina 280.

Escolha Tag especfico, no menu pop-up Procurar.

Escolha um tag especfico no menu pop-up ao lado do menu pop-up Procurar,

ou selecione [qualquer tag].
Se desejar apenas procurar todas as ocorrncias do tag especificado, pressione o
boto com o sinal de subtrao (-) e passe etapa 6. Caso contrrio, prossiga na
etapa 4.

282

Captulo 10

Limite a busca, utilizando um dos seguintes modificadores de tags:

Escolha Com atributo, para selecionar um atributo que deva estar no tag, para
que este coincida com o critrio de busca. possvel especificar um
determinado valor deste atributo ou escolher [qualquer valor].

Escolha Sem atributo, para selecionar um atributo que no deva estar no tag,
para que este coincida com o critrio de busca. Por exemplo: escolha esta opo
para procurar todos os tags IMGsem o atributo ALT.

Escolha Contendo, para especificar um texto ou tag que deve estar contido
no tag original para que haja coincidncia. Por exemplo: no cdigo <b><font
face="Arial">Cabealho 1</font></b>, o tag font est contido no tag b.

Escolha No contendo, para especificar um texto ou tag que no deve estar

contido no tag original, para que haja coincidncia.

Escolha Dentro do tag, para especificar um tag dentro do qual deve estar o tag
de destino, para que haja coincidncia.

Escolha Fora do tag, para especificar um tag dentro do qual no deve estar o tag
de destino, para que haja coincidncia.
5

Clique no boto com o sinal de adio (+) e repita a etapa 4, a fim de restringir
mais ainda a busca.

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.

Clique em Localizar o prximo para realar a prxima instncia do texto da

busca no documento atual ou, caso haja algum, abra o prximo documento
que contenha o texto da busca.

Escolha Localizar todos, para gerar uma lista de todas as instncias do texto da
busca no documento atual ou, se voc estiver procurando um diretrio ou site,
gerar uma lista de documentos que contenham o texto da busca.

Como inserir e formatar texto

283

Como procurar texto contido em tags especficos

Utilize a opo Texto avan., na caixa de dilogo Localizar e substituir, para
procurar determinadas seqncias de texto que podero estar ou no em um
conjunto de tags de conteno. Por exemplo: possvel procurar a expresso Sem
ttulo entre os tags <title>, a fim de localizar todas as pginas sem ttulo no site.
Consulte Como procurar e substituir texto, tags e atributos na pgina 280 para
obter informaes sobre os vrios tipos de buscas.
Para realizar uma busca de texto avanada:

Escolha Editar > Localizar e substituir, e especifique em quais arquivos dever

ser feita a busca, conforme a explicao em Como procurar e substituir texto,
tags e atributos na pgina 280.

No menu pop-up Localizar, selecione Texto avan.

Digite o texto a ser localizado no campo de texto adjacente ao menu pop-up

Procurar.
Por exemplo: digite a expresso Sem ttulo.

Escolha Dentro do tag ou Fora do tag e, em seguida, escolha um tag no menu

pop-up adjacente.
Por exemplo: escolha Dentro do tag e, em seguida title.

Clique no boto com o sinal de adio (+), a fim de restringir mais ainda a
busca dos tags com um ou mais atributos especficos.
Uma vez que o tag <title> no possui atributos, no ser necessrio utilizar esta
opo para localizar todas as pginas sem ttulo no site.

284

Captulo 10

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.

Como salvar os padres de busca

possvel salvar os padres de busca para uso posterior clicando no boto Salvar a
consulta, na caixa de dilogo Localizar e substituir. O salvamento de uma consulta
conveniente se esta for realizada com freqncia e se voc no quiser reconstruir
vrias vezes esse padro de busca. Por exemplo: para retirar tags no-padronizados
de documentos criados com um outro editor visual de HTML ou para confirmar
se todas as imagens contidas em um arquivo possuem os atributos height, width e
alt, antes que o documento seja publicado na Web.
Para salvar um padro de busca:

Defina os parmetros da busca, seguindo as etapas descritas em Como

procurar e substituir texto, tags e atributos na pgina 280.
Se estiver realizando uma busca de tag ou texto avanado, consulte Como
procurar os tags e atributos HTML na pgina 282 ou Como procurar texto
contido em tags especficos na pgina 284, para obter informaes sobre a
definio de parmetros adicionais de busca.

Clique no boto Salvar a consulta (identificado por um cone em forma de disco).

O local padro onde as consultas so salvas a pasta Configuration/Queries,
contida na pasta do aplicativo do Dreamweaver.

Na caixa de dilogo que aparecer, digite o nome do arquivo que identificar a

consulta e clique em Salvar.
Por exemplo: se o padro de busca envolver a localizao de tags img sem o
atributo alt, a consulta poder se chamar img_no_alt.dwr. As consultas de
localizao terminam com a extenso dwq, enquanto que as consultas de
substituio terminam com a extenso dwr.

Para chamar um padro de busca novamente:

Escolha Editar > Localizar e substituir.

Clique no boto Carregar a consulta (identificado por um cone em forma de

pasta).
A caixa de dilogo Carregar a consulta ser aberta automaticamente na pasta
Configuration/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.

Como inserir e formatar texto

285

Sobre as expresses regulares

As expresses regulares consistem de padres que descrevem as combinaes de
caracteres no texto. Utilize essas expresses em suas buscas, para que o auxiliem a
descrever conceitos como frases iniciadas com O e valores de atributo que
contenham um nmero. A tabela a seguir lista os caracteres especiais em
expresses regulares, bem como seus significados e exemplos de uso.
Para localizar o texto contendo um dos caracteres especiais da tabela, preceda o
caractere especial com uma barra invertida. Por exemplo: para localizar o asterisco
na frase 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

Exemplo

Incio da entrada ou linha.

^T coincidir com T em
Terracota, mas no em Cabana
do Pai Toms

Final da entrada ou linha.

o$ coincidir com o em nmero,

mas no em nmeros

O caractere precedente zero ou

mais vezes.

um* coincidir com um em rum,

O caractere precedente uma ou

mais vezes.

um+ coincidir com um em rum e

umi em luminoso e u em
azul
umi em luminoso, porm no
coincidir com qualquer ocorrncia
de azul

O caractere precedente no mximo re?ta coincidir com rta em

curta e reta em preta, porm
uma vez (isto , indica que o
caractere precedente opcional). no coincidir com qualquer
ocorrncia de caneta ou brotar

Qualquer caractere, exceto nova

linha.

.pr coincidir com propriedades

x ou y.

FF0000|0000FF coincide com

FF0000 em bgcolor=#FF0000
e 0000FF em font

x|y

e programa na frase
propriedades do programa

color=#0000FF
{n}

{n,m}

286

Captulo 10

Exatamente 'n' ocorrncias do

caractere precedente.

r{2} coincidir com rr em carro

Pelo menos 'n' e, no mximo,

'm' ocorrncias do
caractere precedente.

F{2,4} coincidir com FF em

e com os primeiros dois erres em

brrrrrr, porm no coincidir com
qualquer ocorrncia de for
#FF0000 e com os primeiros
quatro efes em #FFFFFF

Caractere

Coincidir com

[abc]

Qualquer um dos caracteres dentro [e-g] coincidir com e em

dos colchetes. Especifique
tabela, f em fraude e g" em
uma faixa de caracteres com um
Aguarde
hfen ([a-f] equivale a [abcdef], por
exemplo).

[^abc]

Qualquer um dos caracteres que

no esteja dentro dos colchetes.
Especifique uma faixa de
caracteres com um hfen ([^a-f]
equivale a [^abcdef], por
exemplo]).

[^aeiou] coincidir inicialmente

Um limite de palavra (como um

espao ou retorno de carro).

\bb coincidir com b em

Um limite sem palavra.

\Bb coincidir com b em

\b

\B

Exemplo

com r em cravo, b em
biblioteca e f em OFF!

blasfmia, porm no coincidir

com qualquer ocorrncia de abrir
ou liberdade
liberdade, porm no coincidir
com blasfmia

\d

Qualquer caractere numrico.

Equivale a [0-9].

\d coincidir com 3 em C3PO e

2 em apartamento 2G

\D

Qualquer caractere no numrico.

Equivale a [^0-9].

\D coincidir com S em 900S e

Q em Q45

\f

Alimentao de formulrio.

\n

Alimentao de linha.

\r

Retorno de carro.

\s

\scoluna coincidir com coluna

Qualquer caractere contendo
em 100 colunas, porm no
espaos em branco, inclusive
espaos, tabulaes, alimentaes coincidir com colunas
de formulrio ou de linha.

\S

Qualquer caractere que no

contenha espaos em branco.

\Scoluna coincidir com coluna

\t

Uma tabulao.

\w

Qualquer caractere alfanumrico,

inclusive o sinal de sublinhado.
Equivale a [A-Za-z0-9_].

b\w* coincidir com Alfabeto em

Alfabeto cirlico e com objeto e
abstrato em nenhum objeto
abstrato

em colunas:, porm no
coincidir com 100 colunas

Como inserir e formatar texto

287

Caractere

Coincidir com

Exemplo

\W

Qualquer caractere que no seja

alfanumrico. Equivale a [^A-Zaz0-9_].

\W coincidir com & em Joca &

Mateus e com % em 100%

Control e Enter
ou Shift e Enter
(no Windows),
ou Control e
Return, Shift e
Return ou
Command e
Return (no
Macintosh)

Caractere de retorno. Verifique se a opo Ignorar os diferentes

espaos em branco est
desmarcada ao efetuar essa busca,
quando no forem utilizadas as
expresses regulares. Observe que
esse procedimento coincidir com
um determinado caractere, mas
no a noo geral de quebra de
pgina; por exemplo: no coincidir
com um tag <br> ou <p>. Os
caracteres de retorno aparecem
como espaos na janela do
documento e no como quebras de
linha.

Utilize parnteses para definir grupos nas expresses regulares que sero
mencionadas posteriormente; utilize $1, $2, $3, etc. (utilize ($) no campo
Localizar e (\) no campo Substituir para referir-se ao primeiro, segundo, terceiro,
etc. grupos de parnteses. Por exemplo: a busca de (\d+)\/(\d+)\/(\d+) e sua
substituio por $2/$1/$3 troca o dia e o ms em uma data separada por barras
inclinadas (na converso entre o formato de datas americanas e europias).

288

Captulo 10

11

CAPTULO 11

Como inserir imagens

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Em geral, so utilizados trs formatos de arquivos grficos nas pginas da Web:

GIF, JPEG e PNG. Atualmente, apenas os formatos GIF e JPEG recebem suporte
total da maioria dos navegadores. O Microsoft Internet Explorer 4.0 ou mais
avanado, e o Netscape Navigator 4.04 ou mais avanado tambm oferecem
suporte parcial exibio de imagens PNG. A menos que o um site destine-se a
usurios com navegadores que oferecem suporte ao formato PNG, utilize os GIFs
ou JPEGs para atingir um pblico maior.
Os arquivos GIF (Graphic Interchange Format) so aqueles que utilizam 256 cores
no mximo. Os GIFs so mais apropriados para exibir imagens em tons
descontnuos ou aquelas que contm grandes superfcies de cores slidas (barras de
navegao, botes, cones, logotipos ou outras imagens com matizes e cores
uniformes, por exemplo). Podem ser criados GIFs com fundo transparente; GIFs
entrelaados, que entram em foco lentamente medida que uma imagem
carregada no navegador; ou GIFs animados, que so vrios GIFs salvos como um
nico arquivo.
O formato de arquivo JPEG (Joint Photographic Experts Group) a opo mais
avanada para imagens fotogrficas ou de tons contnuos, porque os arquivos
JPEG podem conter milhes de cores. Esses arquivos tendem a ser maiores do que
os GIFs e PNGs. Como a qualidade do arquivo JPEG maior, tambm aumenta
o tamanho do arquivo e o tempo de download. Tente equilibrar a qualidade da
imagem e o tamanho do arquivo, compactando o arquivo JPEG.
O formato de arquivo PNG (Portable Network Group) um substituto livre de
patentes ao GIF, que inclui suporte para as imagens que tiverem as cores
indexadas, escala de cinza e true-color, alm de suporte ao canal alfa de
transparncia. PNG o formato de arquivo original do Macromedia Fireworks.
Os arquivos PNG retm todas as informaes sobre camadas, vetores, cores e
efeitos originais (por exemplo: aplicao de sombra) e, a qualquer momento, todos
os elementos so editveis. Os arquivos devem ter a mesma extenso .png, para
que possam ser reconhecidos como PNG pelo Macromedia Dreamweaver.

289

Os GIFs, JPEGs e PNGs podem ser inseridos em documentos do Dreamweaver.

Alm da insero de uma imagem na pgina, possvel tambm coloc-la em uma
tabela, formulrio ou camada.
Durante a incluso das imagens, estas podem ser selecionadas e modificadas
diretamente na janela do documento. Por exemplo: o inspetor de propriedades
pode ser utilizado para adicionar links a uma imagem, incluir uma borda ao redor
de uma imagem, definir o tamanho da imagem, inserir espao ao redor de uma
imagem e definir o alinhamento. Para criar imagens interativas (imagens
cambiveis, barras de navegao ou mapas de imagens, por exemplo), utilize os
comportamentos do Dreamweaver.
Para configurar um fluxo de trabalho de produo eficiente, utilize a caixa de
dilogo Preferncias do Dreamweaver para definir um editor de imagens preferido
(o Fireworks, por exemplo). A definio de um editor de imagens permite inici-lo
e editar uma imagem durante o trabalho no Dreamweaver. Se o Fireworks for
escolhido como editor preferido, as edies podem ser feitas nesse programa e,
com um clique, a imagem ser automaticamente atualizada no arquivo do
Dreamweaver. Para obter mais informaes sobre como utilizar o Fireworks no
Dreamweaver, consulte Utilizao do Dreamweaver e do Fireworks juntos na
pgina 307.
Alm da insero de imagens em uma pgina, possvel definir uma imagem de
fundo; consulte Como definir uma imagem ou cor de fundo da pgina na
pgina 161. Para sobrepor as imagens, insira-as em camadas; consulte Como
utilizar as camadas na pgina 439.

290

Captulo 11

Como inserir uma imagem

Quando uma imagem for inserida em um documento do Dreamweaver, o
programa ir gerar automaticamente uma referncia desse arquivo no cdigo-fonte
HTML. Para assegurar que essa referncia est correta, o arquivo de imagem deve
estar no site. Caso no esteja, o Dreamweaver perguntar se o arquivo deve ser
copiado na pasta raiz.
Para inserir uma imagem:

Siga um dos procedimentos abaixo:

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
imagem, na categoria Comuns do painel Objetos.

Coloque o ponto de insero onde a imagem dever aparecer na janela do

documento e, em seguida, pressione as teclas Control, Alt e I (no Windows), ou
Command, Option e I (no Macintosh).

Arraste o boto Inserir imagem, do painel Objetos at a localizao na janela do

documento.

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

documento; em seguida, v para a etapa 3.

Arraste uma imagem da janela do site at a localizao na janela do documento;

em seguida, v para a etapa 3.

Arraste uma imagem da rea de trabalho at a localizao na janela do

documento e, em seguida, v para a etapa 3.
2

Na caixa de dilogo que aparecer, clique em Procurar, para escolher um

arquivo, ou digite o caminho do arquivo de imagem.
Se voc estiver trabalhando em um documento que no foi salvo, o
Dreamweaver ir gerar uma referncia file:// 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.

Defina as propriedades da imagem no inspetor de propriedades.

Consulte Como definir as propriedades da imagem na pgina 292.

Como inserir imagens

291

Como definir as propriedades da imagem

Para definir as seguintes propriedades da imagem, selecione uma imagem na janela
do documento e, em seguida, escolha Janela > Propriedades, para exibir o inspetor
de propriedades. O inspetor exibir inicialmente as propriedades mais comumente
utilizadas. Clique na seta de expanso, situada no canto inferior direito, para
examinar todas as propriedades.

Utilize o campo de texto abaixo da imagem em miniatura para definir uma

imagem que sirva de referncia, quando voc estiver utilizando um
comportamento do Dreamweaver (por exemplo: permuta de imagens) ou uma
linguagem de script, como JavaScript ou VBScript.
L e U reservam

espao para uma imagem em uma pgina durante o carregamento

desta em um navegador. O Dreamweaver preencher automaticamente esses
campos com o tamanho original da imagem. Os valores padro e noidentificados so pixels. Tambm possvel especificar as seguintes unidades: pc
(paicas), pt (pontos), pol (polegadas), mm (milmetros) e cm (centmetros), alm
de suas combinaes. Por exemplo: 2pol+5mm; o Dreamweaver converter os
valores em pixels no cdigo-fonte HTML.
Se forem definidos valores para L e U que no correspondem s reais largura e
altura da imagem, esta poder no ser exibida corretamente no navegador. Para
restaurar os valores originais, clique nos identificadores dos campos. Esses valores
podem ser alterados, a fim de redimensionar essa instncia da imagem, mas esse
procedimento no reduzir o tempo de download, porque o navegador efetuar o
download de todos os dados da imagem antes de redimension-la. Para reduzir
esse tempo e assegurar que todas as instncias de uma imagem apaream com o
mesmo tamanho, utilize um aplicativo de edio de imagens para redimensionlas.
Orig. especifica o arquivo de origem da imagem. Clique no cone correspondente
pasta, para procurar o arquivo de origem, ou digite o caminho. Para obter
informaes sobre a insero de caminhos, consulte Caminhos absolutos na
pgina 386.
Link especifica

um hyperlink para a imagem. Arraste o cone do indicador de

arquivos at um arquivo na janela do site ou clique no cone correspondente
pasta, para procurar um documento no seu site, ou digite a URL.
Alinhar coloca uma imagem e o texto na mesma linha. Consulte Como alinhar os

elementos na pgina 294.

292

Captulo 11

Alt. especifica um texto alternativo que aparecer no lugar da imagem para os

navegadores somente de texto ou para aqueles definidos para download manual de
imagens. Para os usurios com deficincia visual, que utilizam sintetizadores de
fala com navegadores somente de texto, o texto falado em voz alta. Em alguns
navegadores, esse texto tambm aparecer quando o ponteiro estiver sobre a
imagem.
Campo de nome do mapa possibilita a criao de mapas de imagens do cliente.
Consulte Como criar os mapas de imagens na pgina 296.
Espao V e Espao H adicionam

espao, em pixels, acima, abaixo e em ambos os

lados da imagem. Espao V adiciona espao nas partes superior e inferior de uma
imagem. Espao H adiciona espao nos lados direito e esquerdo de uma imagem.

Destino especifica

a moldura ou janela na qual a pgina vinculada dever ser

carregada. Esta opo no estar disponvel quando a imagem no estiver
vinculada a outro arquivo. Os nomes de todas as molduras no documento atual
aparecero na lista Destino. possvel tambm escolher entre os seguintes nomes
de destino reservados:

_blank

carrega o arquivo vinculado em uma janela do navegador nova e sem

nome.

_parent

_self

_top carrega o arquivo vinculado na janela inteira do navegador, removendo

todas as molduras.

carrega o arquivo vinculado em um conjunto-pai de molduras ou na

janela da moldura que contm o link. Se a moldura que contm o link no
estiver aninhada, o arquivo vinculado ser carregado na janela inteira do
navegador.
carrega o arquivo vinculado na mesma moldura ou janela que o link.
Esse destino o padro, portanto geralmente no necessrio especific-lo.

Orig. baixa especifica

a imagem que deve ser carregada antes da imagem principal.

Muitos designers utilizam uma verso de 2 bits (em preto e branco) da imagem
principal, porque carregada rapidamente, e d uma idia aos visitantes do que
eles iro ver.
Borda define

a largura, em pixels, da borda em volta da imagem. Insira 0 (zero),

para que no haja uma borda. A borda pode ser aplicada a imagens que estejam ou
no vinculadas. A cor do link definida na caixa de dilogo Propriedades da
pgina. Se for definida uma borda para uma imagem sem links, a borda ter a
mesma cor do texto no pargrafo no qual a imagem ser inserida.
Editar inicia

o editor de imagens especificado nas preferncias de editores externos

e abre a imagem selecionada. Quando voc salvar a imagem e retornar ao
Dreamweaver, este programa atualizar a janela do documento com a imagem
editada. Consulte Como utilizar um editor de imagens externo na pgina 301.

Redefinir o tamanho redefine

os valores L e U do tamanho original da imagem.

Como inserir imagens

293

Como alinhar os elementos

Utilize o inspetor de propriedades para definir o alinhamento de uma imagem em
relao a outros elementos na mesma linha ou pargrafo. O HTML no fornece
um modo de colocar texto ao redor dos limites da imagem, como possvel faz-lo
com alguns aplicativos de processamento de texto. Uma imagem pode ser alinhada
a um texto, a outra imagem, a um plug-in ou a outros elementos na mesma linha.
Os botes de alinhamento ( esquerda, direita e No centro) tambm podem ser
utilizados para definir o alinhamento horizontal de uma imagem.

Padr. do navegador especifica

genericamente um alinhamento na linha de base.

O padro pode ser diferente, dependendo do navegador do visitante do site.

Linha de base e Embaixo alinham a parte inferior do objeto selecionado com a

linha de base do texto (ou de outro elemento).
No alto alinha

uma imagem parte superior do item mais alto (imagem ou texto)

na linha.
No meio alinha

a metade do objeto selecionado com a linha de base do texto.

Alto do texto alinha

o objeto selecionado parte superior do caractere mais alto na

linha do texto.
No meio absoluto alinha

no meio absoluto da linha.

O mais abaixo alinha

a parte de baixo absoluta (incluindo as hastes descendentes,

como na letra g) com a base do objeto selecionado.
esquerda coloca

o objeto selecionado na margem esquerda, quebrando

automaticamente as linhas do texto em volta dele direita. Se o texto alinhado
esquerda preceder o objeto na linha, ele geralmente forar os objetos alinhados
esquerda a passarem para a prxima linha.

direita coloca o objeto na margem direita, quebrando automaticamente as linhas

do texto em volta dele esquerda. Se o texto alinhado direita preceder o objeto

na linha, ele geralmente forar os objetos alinhados direita a passarem para a
prxima linha.

294

Captulo 11

Como redimensionar as imagens e os outros elementos

Os elementos, como as imagens, plug-ins, filmes Macromedia Shockwave ou
Flash, miniaplicativos e controles ActiveX podem ser visualmente
redimensionados na janela do documento do Dreamweaver. O
redimensionamento visual ajuda a determinar como um elemento afetar o layout
em diferentes dimenses.
O redimensionamento redefine 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 filmes Macromedia Flash e os outros elementos que se baseiam em vetores so
inteiramente redimensionveis e no perdem a qualidade quando a sua escala for
modificada. Os elementos dos mapas de bits, como as imagens GIF, JPEG e PNG,
podem tornar-se mal definidos ou distorcidos, caso os atributos width e height
sejam redefinidos. 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 especificado
o tamanho da imagem, edite o arquivo em um aplicativo de edio de imagens. A
edio da imagem tambm poder reduzir o seu respectivo tamanho de arquivo e,
por conseqncia, o tempo de download.
Para redimensionar um elemento:

Selecione o elemento (uma imagem ou filme Shockwave, por exemplo) na

janela do documento.
Aparecero as alas de redimensionamento na parte de baixo, no lado direito do
elemento e no canto inferior direito. Se as alas de redimensionamento no
aparecerem, clique fora do elemento a ser redimensionado e, em seguida,
escolha-o novamente ou clique em <img>, no seletor de tags, para selecionar o
elemento.

Redimensione o elemento, seguindo um dos procedimentos abaixo:

Para ajustar a largura do elemento, arraste a ala de seleo no lado direito.

Para ajustar a altura do elemento, arraste a ala de seleo da parte de baixo.
Para ajustar a largura e altura do elemento simultaneamente, arraste a ala de
seleo do canto.

Pressione a tecla Shift e arraste a ala de seleo do canto para preservar as

propores (entre largura e altura) do elemento enquanto ajusta as suas
dimenses.

Como inserir imagens

295

Os elementos podem ser redimensionados visualmente at um mnimo de 8 pixels

por 8. Para ajustar a largura e a altura de um elemento a um tamanho menor (por
exemplo: 1 pixel por 1), utilize o inspetor de propriedades, a fim de digitar um
valor numrico.
Para retornar um elemento redimensionado s suas escalas originais, no inspetor
de propriedades, exclua os valores nos campos L e U, ou clique no boto
Redimensionar o tamanho.

Como criar os mapas de imagens

Um mapa de imagens uma imagem que foi dividida em regies, ou pontos
ativos; quando um ponto ativo for clicado, ocorrer uma ao (um novo arquivo
ser aberto, por exemplo). Utilize o inspetor de propriedades da imagem para criar
e editar graficamente os mapas de imagens do cliente.
Os mapas de imagens do cliente armazenam as informaes sobre hyperlinks no
documento HTML, mas no em um arquivo de mapa separado, como no caso
dos mapas de imagens do servidor. Quando um visitante do site clicar em um
ponto ativo na imagem, a URL a ela associada ser enviada diretamente ao
servidor. Isso torna os mapas de imagens de clientes mais rpidos que os do
servidor, porque o servidor no precisar interpretar onde o usurio clicou. Os
mapas de imagens de clientes contam com suporte do Netscape Navigator 2.0 e
mais avanado, NCSA Mosaic 2.1 e 3.0, e de todas as verses do Microsoft
Internet Explorer.
O Dreamweaver no altera as referncias de mapas de imagens do servidor nos
documentos existentes; possvel utilizar mapas de imagens de cliente e de
servidor em um mesmo documento. Contudo, os navegadores que oferecem
suporte a ambos os tipos de mapas priorizam os do cliente. Para incluir um mapa
de imagens do servidor em um documento, necessrio gravar o cdigo HTML
adequado.
Para criar um mapa de imagens do cliente:

Selecione a imagem.

Clique na seta de expanso, no canto inferior direito do inspetor de

propriedades, para examinar todas as propriedades.

No campo Nome do mapa, digite um nome exclusivo para o mapa de imagens.

Nota: Caso sejam utilizados vrios mapas de imagens no mesmo documento, d um
nome exclusivo a cada mapa.

296

Captulo 11

Para definir as reas do mapa de imagens, siga um dos procedimentos abaixo:

Selecione a ferramenta de crculo e arraste o cursor sobre a imagem para criar

um ponto ativo circular.

Selecione a ferramenta de retngulo e arraste o cursor sobre a imagem para criar

um ponto ativo retangular.

Selecione a ferramenta de polgono e defina um ponto ativo com forma

irregular, clicando uma vez em cada canto. Clique na ferramenta de seta para
fechar o formato.
Quando um ponto ativo for criado, aparecer um inspetor de propriedades de
pontos ativos. Para obter informaes sobre o inspetor de propriedades de
pontos ativos, consulte Como definir as propriedades dos pontos ativos na
pgina 297.
5

No campo Link do inspetor de propriedades de pontos ativos, clique no cone

correspondente pasta, para procurar o arquivo que ser aberto quando o
ponto ativo for clicado. Uma alternativa digitar o nome do arquivo.

Para definir onde o arquivo vinculado ser aberto, digite o nome da janela, no
campo Destino. possvel tambm escolher um nome de moldura no menu
pop-up Destino.

No campo Alt., digite o texto alternativo que aparecer nos navegadores

somente de texto.
Alguns navegadores exibem esse texto como uma dica de ferramenta, quando o
usurio parar o mouse sobre o ponto ativo.

Repita as etapas 4 a 7, para definir outros pontos ativos no mapa de imagens.

No final do mapeamento da imagem, clique em uma rea em branco no

documento para alterar o inspetor de propriedades.

Como definir as propriedades dos pontos ativos

As propriedades listadas abaixo aparecero no inspetor de propriedades quando
um ponto ativo for selecionado.
especifica o nome do mapa de imagens. Crie um nome exclusivo para cada
mapa de imagens de um documento.
Mapa

especifica o arquivo ou URL a ser exibido quando o usurio clicar no ponto

ativo. Se o link for estabelecido a um arquivo no mesmo site, digite um caminho
que seja relativo ao documento. Os nomes de arquivos iniciados por file:// no so
relativos.
Link

Destino especifica

a moldura ou janela na qual a pgina vinculada dever ser

carregada. A opo Destino no estar disponvel enquanto o ponto ativo
selecionado no contiver um link.

Como inserir imagens

297

Os nomes de todas as molduras no documento atual aparecero na lista. Se a

moldura especificada 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 especificou. possvel tambm escolher entre os seguintes nomes de
destino reservados:

_blank

carrega o arquivo vinculado em uma janela do navegador nova e sem

nome.

_parent

_self

_top carrega o arquivo vinculado na janela inteira do navegador, removendo

todas as molduras.

carrega o arquivo vinculado em um conjunto-pai de molduras ou na

janela da moldura que contm o link. Se a moldura que contm o link no
estiver aninhada, o arquivo vinculado ser carregado na janela inteira do
navegador.
carrega o arquivo vinculado na mesma moldura ou janela que o link.
Esse destino o padro, portanto geralmente no necessrio especific-lo.

Alt. especifica um texto alternativo que aparece no lugar da imagem para os

navegadores somente de texto ou para aqueles definidos para download manual de
imagens.

Como modificar um mapa de imagens

Os pontos ativos criados em um mapa de imagens podem ser facilmente editados.
possvel mover uma rea de ponto ativo, redimensionar pontos ativos e mov-los
para frente ou para trs em uma camada.
possvel copiar uma imagem com pontos ativos de um documento para outro,
ou copiar um ou mais pontos ativos de uma imagem e col-los em outra; os
pontos ativos associados a uma imagem tambm sero copiados no novo
documento.
Para selecionar vrios pontos ativos em um mapa de imagens:

Utilize a ferramenta de indicador de ponto ativo para selecionar um ponto

ativo.

Siga um dos procedimentos abaixo:

Pressione a tecla Shift e clique nos outros pontos ativos a serem selecionados
Pressione as teclas Control e A (no Windows), ou Command e A (no
Macintosh), para selecionar todos os pontos ativos.

298

Captulo 11

Para mover um ponto ativo:

Utilize a ferramenta de indicador de ponto ativo, para selecionar o ponto ativo

a ser movido.

Siga um dos procedimentos abaixo:

Arraste o ponto ativo para uma nova rea.

Utilize a tecla Shift e as teclas de seta para mover o ponto ativo 10 pixels na
direo selecionada.

Utilize as teclas de seta para mover um ponto ativo um pixel na direo

selecionada.
Para redimensionar um ponto ativo:

Utilize a ferramenta de indicador de ponto ativo para selecionar o ponto ativo a

ser redimensionado.

Arraste uma ala do seletor de pontos ativos para alterar o tamanho ou a forma
do ponto ativo.

Como criar uma imagem cambivel

Uma imagem cambivel aquela que se altera quando o cursor for movido sobre a
mesma. Esse tipo de imagem consiste, de fato, em duas imagens: a imagem
primria (exibida quando a pgina for carregada pela primeira vez) e a imagem
cambivel (que aparecer quando o cursor for deslizado sobre a imagem primria).
Ambas as imagens devero ter o mesmo tamanho; caso contrrio, o Dreamweaver
redimensionar automaticamente a segunda imagem para que coincida com as
propriedades da primeira.
As imagens cambiveis so automaticamente definidas para responder ao evento
MouseOver. Para obter informaes sobre a definio de uma imagem que
responda a um evento diferente (um clique do mouse, por exemplo) ou sobre a
edio de uma imagem cambivel para que exiba uma imagem diferente, consulte
Permutar a imagem na pgina 503.
A barra de navegao uma forma mais complexa de imagem cambivel. Para
criar uma barra de navegao, utilize o comando Inserir > Imagens interativas >
Barra de navegao; consulte Como inserir uma barra de navegao na
pgina 405.

Como inserir imagens

299

Para criar uma imagem cambivel:

Na janela do documento, coloque o ponto de insero no local onde dever

aparecer a imagem cambivel.

Insira a imagem cambivel, utilizando um dos seguintes mtodos:

Na categoria Comuns do painel Objetos, clique no cone de Inserir imagem

cambivel.

Na categoria Comuns do painel Objetos, arraste o cone de Inserir imagem

cambivel para o local desejado na janela do documento.

Escolha Inserir > Imagens interativas > Imagem cambivel.

Aparecer a caixa de dilogo Inserir imagem cambivel.
3

No campo Nome da imagem, digite um nome para a imagem cambivel.

No campo Imagem original, clique em Procurar e selecione a imagem ou digite

o caminho da imagem a ser exibida quando a pgina for carregada.

No campo Imagem cambivel, clique em Procurar e selecione a imagem ou

digite o caminho da imagem a ser exibida quando o cursor for deslizado sobre a
imagem original.

Para que as imagens sejam pr-carregadas no cache do navegador a fim de que

sejam carregadas mais rapidamente, selecione a opo Pr-carregar a imagem
cambivel.

No campo Quando tiver clicado, v para a URL, clique em Procurar e selecione

o arquivo, ou digite o caminho do arquivo a ser aberto quando um usurio
clicar na imagem cambivel.
Nota: Se no for definido um link para a imagem, o Dreamweaver inserir um link nulo
(#) no cdigo-fonte HTML ao qual o comportamento de imagem cambivel estiver
anexado. Se o link nulo for removido, a imagem cambivel no funcionar.

Clique em OK, para fechar a caixa de dilogo Inserir imagem cambivel.

Para testar uma imagem cambivel:

Escolha Arquivo > Visualizar no navegador, ou pressione a tecla F12.

No navegador, passe o cursor sobre a imagem original.

A exibio alternar para a imagem cambivel.

300

Captulo 11

Como utilizar um editor de imagens externo

O Dreamweaver facilita a criao de pginas HTML e o trabalho em um editor de
imagens para editar as suas ilustraes. No Dreamweaver, possvel abrir uma
imagem selecionada em um editor de imagens externo; ao retornar para o
Dreamweaver, aps salvar o arquivo de imagem, as alteraes feitas nesse arquivo
estaro visveis na janela do documento.
O Macromedia Fireworks pode ser utilizado como um editor de imagens externo.
O Fireworks 3 e Fireworks 4 utilizam as Design Notes para controlar onde o
arquivo PNG original ser armazenado no disco rgido local.
O Fireworks 2 no utiliza as Design Notes, mas perguntar ao usurio onde ser
colocado o arquivo PNG original. O Fireworks 1 procura automaticamente, na
pasta que contm o arquivo selecionado, um arquivo PNG com o mesmo nome.
Por exemplo: se for selecionada uma imagem cujo arquivo de origem seja images/
myPhoto.gif e a pasta de imagens tambm contiver um arquivo chamado
myPhoto.png, o Fireworks abrir o arquivo PNG.
Para obter mais informaes sobre como utilizar o Fireworks em conjunto com o
Dreamweaver, consulte Utilizao do Dreamweaver e do Fireworks juntos na
pgina 307.
Caso qualquer outro aplicativo tenha sido escolhido como editor de imagens
externo e iniciado a partir do Dreamweaver, o aplicativo abrir a imagem
selecionada (images/myPhoto.gif, por exemplo). Utilize o editor de imagens para
modificar a imagem, salve as alteraes e, em seguida, exiba a imagem modificada
e atualizada no Dreamweaver.
Se preferir, abra manualmente o arquivo original a partir do qual o GIF foi
produzido (por exemplo: mylogo.png deve ser o arquivo original do Fireworks),
faa as alteraes e salve a imagem modificada. O Dreamweaver ainda atualizar a
imagem na janela do documento no retorno ao programa.
Caso a imagem no aparea quando voc voltar janela do Dreamweaver,
selecione a imagem e, em seguida, clique no boto Atualizar, no inspetor de
propriedades.

Como inserir imagens

301

Como definir as preferncias do editor de imagens externo

A caixa de dilogo Preferncias do Dreamweaver pode ser utilizada para especificar
qual editor de imagens ser iniciado para editar imagens com extenses de arquivo
especficas. Por exemplo: o Dreamweaver pode ser informado a iniciar o
Fireworks, quando o usurio quiser editar um arquivo GIF, e a iniciar um editor
de imagens diferente, para a edio de um arquivo JPEG.
Pode ser definido mais de um editor de imagens externo para uma extenso de
arquivo; em seguida, quando voc estiver pronto para editar a imagem, poder
utilizar o menu contextual para escolher qual editor ser iniciado.

Para definir um editor de imagens externo para um tipo especfico de arquivo:

Abra a caixa de dilogo Tipos de arquivos / editores, seguindo um dos

procedimentos abaixo:

Escolha Editar > Preferncias e selecione Tipos de arquivos / editores.

Escolha Editar > Editar com editor externo e selecione Tipos de arquivos /
editores.

302

Captulo 11

Na lista de extenses, selecione o tipo de arquivo para o qual ser definido o

editor externo.

Clique no boto com o sinal de adio (+), acima da lista de editores.

Na caixa de dilogo Selecionar o editor externo, procure o aplicativo a ser

iniciado como editor para esse tipo de arquivo.

Na caixa de dilogo Preferncias, clique em Tornar primrio, se esse editor for o

principal para esse tipo de arquivo.

Para configurar um editor adicional para esse tipo de arquivo, repita as etapas 3 e 4.
O Dreamweaver utiliza automaticamente este editor primrio quando esse tipo
de imagem for escolhido para edio. Os outros editores da lista podem ser
escolhidos no menu contextual para a imagem na janela do documento.

Para adicionar um novo tipo de arquivo lista de extenses:

Abra a caixa de dilogo Tipos de arquivos / editores, seguindo um dos

procedimentos abaixo:

Escolha Editar > Preferncias e selecione Tipos de arquivos / editores.

Escolha Editar > Editar com editor externo e selecione Tipos de arquivos /
editores.
2

Clique no boto com o sinal de adio (+), acima da lista de extenses.

Digite a extenso do tipo de imagem a ser editada (JPEG, por exemplo).

Para definir um editor externo, clique no boto com o sinal de adio (+),
acima da lista de editores.

Na caixa de dilogo que aparecer, escolha o aplicativo a ser utilizado para editar
esse tipo de imagem.

Clique em Tornar primrio, se desejar que este editor seja o primrio para o
tipo de imagem.

Para alterar uma preferncia de editor existente:

Nas preferncias de editores externos, clique na extenso de arquivo cujo editor

ser alterado.

Utilize os botes com o sinal de adio (+) ou de subtrao (), acima da lista
de editores, para adicionar ou remover um editor.

Para obter mais informaes sobre as outras opes nas preferncias de editores
externos, consulte Como iniciar um editor externo na pgina 326.

Como inserir imagens

303

Como iniciar um editor de imagens externo

Escolha Editar > Preferncias > Tipos de arquivos / editores para definir um editor
de imagens externo para os tipos de imagens especificados. Aps a seleo do
editor, ele poder ser iniciado para editar imagens durante o trabalho no
documento do Dreamweaver.
Para iniciar o editor de imagens externo, siga um dos procedimentos abaixo:

Clique duas vezes nas imagens a serem editadas.

Clique com o boto direito do mouse (no Windows), ou pressione a tecla
Control e clique (no Macintosh) na imagem a ser editada e, em seguida, escolha
Editar com, no menu contextual, para selecionar um editor previamente
definido, ou escolha Procurar e escolha um editor.

Selecione a imagem a ser editada e clique em Editar a imagem, no inspetor

de propriedades.

Clique duas vezes no arquivo de imagem, na janela do site, para iniciar o editor
de imagens primrio. Se no for especificado um editor de imagens, o
Dreamweaver iniciar o editor padro para o tipo de arquivo.
Nota: Quando uma imagem for aberta na janela do site, os recursos de integrao do
Fireworks descritos acima no estaro em vigor e o Fireworks no abrir o arquivo PNG
original. Para poder utilizar os recursos de integrao do Fireworks, abra as imagens a
partir da janela do documento.

Como aplicar comportamentos a imagens

possvel aplicar qualquer comportamento disponvel a uma imagem ou ponto
ativo de imagem. Quando um comportamento for aplicado a um ponto ativo, o
Dreamweaver inserir o cdigo-fonte HTML ao tag area. Trs comportamentos
se aplicam especificamente s imagens: Pr-carregar as imagens, Permutar a
imagem e Restaurar a imagem permutada.
carrega as imagens que no aparecem na pgina
imediatamente (como aquelas que sero permutadas com as linhas de tempo,
comportamentos, camadas ou JavaScript) no cache do navegador. Este processo
evita as demoras causadas pelo download quando as imagens tiverem que ser
exibidas. Consulte Pr-carregar as imagens na pgina 495.
Pr-carregar as imagens

troca uma imagem por outra, alterando o atributo SRC do tag

Utilize esta ao para criar botes cambiveis e outros efeitos em imagens
(inclusive a permuta simultnea de mais de uma imagem). Consulte Permutar a
imagem na pgina 503.
Permutar a imagem

img.

304

Captulo 11

Restaurar a imagem permutada restaura o ltimo conjunto de imagens

permutadas aos seus arquivos de origem anteriores. Esta ao ser adicionada
automaticamente, sempre que voc anexar a ao Permutar a imagem a um objeto,
como padro; no ser necessrio selecion-la manualmente. Consulte Restaurar
a imagem permutada na pgina 504.

Os comportamentos tambm podem ser utilizados para criar sistemas de

navegao mais sofisticados, como uma barra de navegao ou um menu de salto.
Consulte Como criar as barras de navegao na pgina 404 e Como criar
menus de salto na pgina 401.

Como inserir imagens

305

306

Captulo 11

12

CAPTULO 12

Utilizao do Dreamweaver e do
Fireworks juntos
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Recursos exclusivos de integrao tornam fcil trabalhar em arquivos no

Macromedia Dreamweaver 4 e no Macromedia Fireworks 4 de maneira
permutvel. O Dreamweaver e o Fireworks reconhecem e compartilham muitas
das edies de arquivos, incluindo alteraes e links, mapas de imagens, fatias de
tabelas e mais. Juntas, as duas aplicaes fornecem um fluxo de trabalho
aerodinmico para edio, otimizao e colocao de arquivos grficos da Web em
pginas HTML.
Se voc quiser modificar imagens e tabelas do Fireworks em um documento do
Dreamweaver, voc pode iniciar o Fireworks para fazer edies e, em seguida,
retornar ao documento atualizado no Dreamweaver. Se voc quiser fazer edies
rpidas de otimizao para imagens e animaes colocadas no Fireworks, voc
pode iniciar a caixa de dilogo otimizao do Fireworks e informar as
configuraes atualizadas. Em ambos os casos, as atualizaes so feitas aos
arquivos colocados no Dreamweaver, assim como aos arquivos de origem do
Fireworks, se os arquivos fonte tiverem sido iniciados.

Obteno de arquivos do Fireworks no

Dreamweaver
Voc pode colocar imagens e cdigo HTML do Fireworks no Dreamweaver de
vrias maneiras diferentes. No Dreamweaver, voc pode usar os recursos de
insero para colocar arquivos do Fireworks em documentos. A partir do
Fireworks, voc pode exportar os arquivos diretamente para a pasta de um site do
Dreamweaver, ou voc pode copiar e colar cdigo HTML em um documento
Dreamweaver.

307

Colocao de imagens do Fireworks no Dreamweaver

Voc pode colocar imagens GIF, JPEG, ou PNG geradas pelo Fireworks
diretamente em um documento Dreamweaver.
Para inserir uma imagem Fireworks em um documento Dreamweaver:

Posicione o ponto de insero onde deseja que a imagem aparea na janela do

documento Dreamweaver.

Siga uma das seguintes opes:

Selecione Inserir > Imagem.

Clique no boto Inserir imagem na categoria Comum do painel Objetos.
3

Navegue para o arquivo Fireworks desejado e clique em Abrir.

Se o arquivo do Fireworks no estiver no site atual do Dreamweaver, uma
mensagem exibida, perguntando se deseja copiar o arquivo para a pasta raiz.

Insero de cdigo HTML do Fireworks no Dreamweaver

O Dreamweaver permite inserir cdigo HTML gerado pelo Fireworks, completo
com imagens associadas, fatias e JavaScript, em um documento. Este recurso de
insero torna fcil adicionar tabelas ou mapas de imagens criados no Fireworks
em um documento Dreamweaver.
Para inserir HTML do Fireworks em um documento Dreamweaver:

No Dreamweaver, salve o documento em um site definido.

Posicione o ponto de insero no documento onde deseja que o cdigo HTML

inserido comece.

Siga uma das seguintes opes:

Selecione Inserir > Imagens interativas > HTML do Fireworks.

Clique no boto HTML do Fireworks na categoria Comum do painel Objetos.
4

Na caixa de dilogo que exibida, clique em Procurar para selecionar o arquivo

HTML do Fireworks desejado.

Selecione a opo Excluir arquivo aps a insero para mover o arquivo HTML
para a Lixeira (Windows) ou Lixeira (Macintosh) quando a operao tiver
terminado.
Use esta opo se no precisar mais do arquivo HTML do Fireworks aps inseri-lo.
Esta opo no afeta o arquivo PNG de origem associado ao arquivo HTML.
Nota: Se o arquivo HTML estiver em uma unidade de rede, ele permanentemente
excludo, ao invs de movido para a Lixeira.

308

Captulo 12

Clique em OK para inserir o cdigo HTML, junto com suas imagens, fatias e
JavaScript associados, no documento Dreamweaver.

Como copiar e colar HTML do Fireworks no Dreamweaver

Uma maneira rpida de colocar imagens e tabelas geradas pelo Fireworks no
Dreamweaver envolve copiar e colar o cdigo HTML do Fireworks diretamente
no documento Dreamweaver.
Para copiar e colar o HTML do Fireworks no Dreamweaver:

No Fireworks, selecione Editar > Copiar cdigo HTML.

Siga a orientao do assistente durante a configurao da exportao do seu

cdigo HTML e das imagens. Quando perguntado, especifique a pasta do site
do Dreamweaver como destino para as imagens exportadas.
O assistente exporta as imagens para o destino especificado e copia o cdigo
HTML para a rea de transferncia.

No Dreamweaver, posicione o ponto de insero no documento onde deseja

colar o cdigo HTML e selecione Editar > Colar.
Todo o cdigo HTML e JavaScript associado aos arquivos Fireworks
exportados copiado para o documento Dreamweaver e todos os links para
imagens so atualizados.

Para exportar e colar HTML do Fireworks no Dreamweaver:

No Fireworks, selecione Arquivo > Exportar.

Na caixa de dilogo Exportar, especifique a pasta do site do Dreamweaver como

destino para as imagens exportadas.

Selecione HTML e imagens no menu pop-up Salvar como tipo.

Selecione Copiar para rea de transferncia a partir do menu pop-up e clique

em Salvar.

No Dreamweaver, posicione o ponto de insero no documento onde deseja

colar o cdigo HTML e selecione Editar > Colar.
Todo o cdigo HTML e JavaScript associado aos arquivos Fireworks
exportados copiado para o documento Dreamweaver e todos os links para
imagens so atualizados.

Utilizao do Dreamweaver e do Fireworks juntos

309

Exportao de arquivos do Fireworks para o Dreamweaver

O comando Arquivo > Exportar no Fireworks permite exportar e salvar imagens
otimizadas e arquivos HTML para um local dentro da pasta do site Dreamweaver
desejado. Voc pode ento abrir os arquivos para edio no Dreamweaver.
Alternativamente, voc pode exportar o arquivo Fireworks como camadas Folha
de Estilos em Cascata (CSS) ou itens de biblioteca do Dreamweaver. Os itens de
biblioteca do Dreamweaver simplificam o processo de edio e atualizao de um
componente freqentemente usado no site da Web como, por exemplo, uma srie
de links no rodap ou uma barra de navegao. Um item de biblioteca uma parte
de um arquivo HTML localizado em uma pasta de nome Biblioteca na raiz do seu
site. Voc pode arrastar cpias de um item de biblioteca para qualquer pgina no
seu site da Web.
Para exportar imagens e HTML do Fireworks para o Dreamweaver:

No Fireworks, selecione Arquivo > Exportar.

Selecione HTML e imagens no menu pop-up Salvar como tipo.

Selecione Exportar arquivo HTML no menu pop-up HTML.

Especifique uma pasta de destino dentro da pasta do site do Dreamweaver.

Clique em Salvar para exportar os arquivos.

Para exportar arquivos Fireworks como camadas CSS:

310

Captulo 12

No Fireworks, selecione Arquivo > Exportar.

Selecione Camadas CSS (.htm) no menu pop-up Salvar como tipo.

Especifique uma pasta de destino dentro da pasta do site do Dreamweaver.

Clique em Salvar para exportar os arquivos.

Para exportar um arquivo do Fireworks como um item de biblioteca do

Dreamweaver:

No Fireworks, selecione Arquivo > Exportar.

Selecione Biblioteca Dreamweaver (.lbi) no menu pop-up Salvar como tipo.

Nomeie o arquivo e especifique uma pasta de destino chamada Biblioteca na

raiz do site do Dreamweaver.
Se necessrio, o Fireworks solicitar a criao desta pasta.

Clique em Salvar para exportar o arquivo.

Utilizao do Dreamweaver e do Fireworks juntos

311

Execuo do Fireworks a partir do

Dreamweaver
Voc pode iniciar o Fireworks diretamente a partir de um documento
Dreamweaver selecionando uma imagem Fireworks, fatia de tabela ou tabela
posicionada para edio ou otimizao. Para que estes recursos de iniciar-e-editar
funcionem corretamente, voc deve designar o Fireworks como o editor de
imagem externo primrio no Dreamweaver.
Designao do Fireworks como editor externo de imagens
primrio do Dreamweaver
O Dreamweaver 4 fornece preferncias para iniciar automaticamente aplicaes
especficas para editar tipos especficos de arquivo. Para utilizar os recursos iniciare-editar do Fireworks, certifique-se de que o Fireworks 4 est definido como editor
primrio para arquivos GIF, JPEG e PNG no Dreamweaver.
Embora voc possa usar verses anteriores do Fireworks como editores externos de
imagens, estas verses oferecem capacidade limitada de iniciar-e-editar. O
Fireworks 3 no suporta completamente a execuo e edio de tabelas
posicionadas e fatias em tabelas, enquanto o Fireworks 2 no suporta a execuo e
edio de arquivos PNG de origem para imagens colocadas.
Para definir o Fireworks 4 como o editor externo de imagens primrio no
Dreamweaver 4:

312

Captulo 12

No Dreamweaver, selecione Editar > Preferncias e selecione Tipos de arquivos/

editores.

Na lista Extenses, selecione uma extenso de arquivo da Web (.gif, .jpg,

ou .png).

Na lista editores, selecione Fireworks 4 e clique em Tornar primrio.

Repita os passos 2 e 3 para definir o Fireworks 4 como o editor primrio para

outras extenses de arquivos da Web.

Sobre Notas de Design e arquivos fonte

Sempre que voc exporta um arquivo do Fireworks a partir de uma origem PNG
salva para o site do Dreamweaver, o Fireworks escreve uma Nota de Design que
contm informao sobre o arquivo. Por exemplo, quando voc exporta uma
tabela do Fireworks, o Fireworks escreve uma Nota de Design para cada arquivo
de fatia exportado e para o arquivo HTML que rene as fatias da tabela. Estas
Notas de Design contm referncias para o arquivo PNG de origem que gerou os
arquivos exportados.
Quando voc inicia e edita uma imagem do Fireworks a partir do Dreamweaver, o
Dreamweaver usa a Nota de Design para localizar um arquivo PNG de origem
para aquele arquivo. Para obter melhores resultados, sempre salve o arquivo PNG
de origem do Fireworks e os arquivos exportados em um site do Dreamweaver.
Isto garante que qualquer usurio que compartilhe o site poder localizar o PNG
de origem ao iniciar o Fireworks a partir do Dreamweaver.
Especificao de preferncias iniciar-e-editar para os
arquivos fonte do Fireworks
As preferncias de iniciar-e-editar do Fireworks permitem especificar como
manipular arquivos PNG de origem ao iniciar arquivos Fireworks a partir de outra
aplicao, como o Macromedia Director ou o Dreamweaver.
O Dreamweaver reconhece as preferncias iniciar-e-editar do Fireworks apenas em
certos casos em que voc inicia e otimiza uma imagem do Fireworks.
Especificamente, voc deve iniciar e otimizar uma imagem que no seja parte de
uma tabela do Fireworks e que no contenha um caminho correto Nota Design para
um arquivo PNG de origem. Em todos os outros casos, inclusive todas os casos de
iniciar-e-editar de imagens do Fireworks, o Dreamweaver automaticamente executa
o arquivo PNG de origem, pedindo-lhe para localizar o arquivo de origem se este
no puder ser encontrado.

Utilizao do Dreamweaver e do Fireworks juntos

313

Para especificar preferncias iniciar-e-editar para o Fireworks:

No Fireworks, selecione Editar > Preferncias e clique na guia Iniciar e editar

(Windows) ou selecione Executar e editar a partir do menu pop-up
(Macintosh).

Especifique as opes de preferncia a serem usadas ao editar ou otimizar

imagens do Fireworks colocadas em uma aplicao externa:
executa automaticamente o arquivo PNG do
Fireworks que est definido na Nota de Design como a origem para a imagem
colocada. As atualizaes so feitas tanto para o PNG de origem quanto para
sua imagem correspondente.
Usar sempre o PNG de origem

Nunca usar o PNG de origem executa automaticamente a imagem colocada do

Fireworks, independente da existncia de um arquivo PNG de origem. As
atualizaes so feitas apenas na imagem colocada.

permite especificar toda vez se deseja ou no iniciar o

arquivo PNG de origem. Quando voc edita ou otimiza uma imagem colocada,
o Fireworks exibe uma mensagem perguntando se deseja tomar uma deciso
iniciar-e-editar. Voc tambm pode especificar preferncias globais de iniciar-eeditar a partir desta mensagem.

Perguntar quando iniciar

Edio de arquivos do Fireworks colocados

no Dreamweaver
A integrao iniciar-e-editar permite usar o Fireworks para editar imagens e tabelas
geradas pelo Fireworks colocadas em um documento Dreamweaver. O
Dreamweaver inicia automaticamente o Fireworks, permitindo fazer as edies
desejadas na imagem. As atualizaes feitas no Fireworks so automaticamente
aplicadas imagem colocada no Dreamweaver.
O Fireworks reconhece e preserva muitas edies feitas ao documento no
Dreamweaver, incluindo links alterados, mapas de imagens editados e texto
editado em fatias de texto. O Inspetor de propriedades no Dreamweaver ajuda a
identificar imagens, fatias de tabelas e tabelas geradas pelo Fireworks em um
documento.

314

Captulo 12

Edio de imagens do Fireworks

Voc pode iniciar o Fireworks para editar imagens individuais colocadas em um
documento Dreamweaver.
Para iniciar e editar uma imagem do Fireworks colocada no Dreamweaver:

No Dreamweaver, selecione Janela > Propriedades para abrir o Inspetor de

propriedades se necessrio.

Siga uma das seguintes opes:

Selecione a imagem desejada. O Inspetor de propriedades identifica a seleo

como uma imagem do Fireworks e exibe o nome do arquivo PNG de origem
conhecido para a imagem.) Em seguida clique em Editar no Inspetor de
propriedades.

Mantenha pressionada a tecla Control (Windows) ou Command (Macintosh) e

clique duas vezes na imagem que deseja editar.

Clique com o boto direito do mouse (Windows) ou clique com Control

(Macintosh) na imagem desejada e selecione Editar com Fireworks 4 no menu
de contexto.
O Dreamweaver inicia o Fireworks, se este ainda no estiver aberto.
3

Se perguntado, especifique se deseja iniciar um arquivo de origem do Fireworks

para a imagem colocada.

Utilizao do Dreamweaver e do Fireworks juntos

315

No Fireworks, edite a imagem. A janela do documento indica que voc est

modificando uma imagem a partir do Dreamweaver.
O Dreamweaver reconhece e preserva todas as edies aplicadas imagem no
Fireworks.
Quando tiver terminado de fazer as edies, clique em Concludo na janela do
documento.
Clicar em Concludo exporta a imagem utilizando as configuraes atuais de
otimizao para o arquivo PNG de origem, atualiza o GIF ou JPEG usado pelo
Dreamweaver e salva o arquivo de origem PNG se tiver sido selecionado um
arquivo de origem.
Nota: Quando voc abre uma imagem a partir da janela do site Dreamweaver, os
recursos de integrao do Fireworks descritos acima no esto ativos; o Fireworks no
abre o arquivo PNG original. Para usar os recursos de integrao com o Fireworks, abra
as imagens a partir da janela do documento Dreamweaver.

Edio de tabelas do Fireworks

Quando voc inicia e edita uma fatia de imagem que parte de uma tabela
colocada do Fireworks, o Dreamweaver automaticamente inicia o arquivo PNG
de origem para toda a tabela.
Para iniciar e editar uma tabela do Fireworks colocada no Dreamweaver:

1
2

316

Captulo 12

No Dreamweaver, selecione Janela > Propriedades para abrir o Inspetor de

propriedades se necessrio.
Siga uma das seguintes opes:
Clique dentro da tabela e clique na tag TABLE na barra de status para selecionar
toda a tabela. O Inspetor de propriedades identifica a seleo como uma tabela
do Fireworks e exibe o nome do arquivo PNG de origem conhecido para a
tabela.) Em seguida clique em Editar no Inspetor de propriedades.
Clique no canto superior esquerdo da tabela para selecion-la e, em seguida,
clique em Editar no Inspetor de propriedades.
Selecione a fatia de tabela desejada e clique em editar no Inspetor de
propriedades.
Mantenha pressionada a tecla Control (Windows) ou Command (Macintosh) e
clique duas vezes na imagem que deseja editar.
Clique com o boto direito do mouse (Windows) ou clique com Control
(Macintosh) na tabela desejada e selecione Editar com Fireworks 4 no menu de
contexto.
O Dreamweaver inicia o Fireworks, se este ainda no estiver aberto. O arquivo
de origem PNG para toda a tabela aparece na janela do documento.

No Fireworks, edite a imagem da tabela.

O Dreamweaver reconhece e preserva todas as edies aplicadas imagem no
Fireworks.

Quando tiver terminado de fazer as edies, clique em Concludo na janela do

documento.
Clicar em Concludo exporta o HTML e os arquivos de fatia da imagem para a
tabela utilizando as configuraes atuais de otimizao, atualiza a tabela
colocada no Dreamweaver e salva o arquivo de origem PNG. O Fireworks
exporta e substitui apenas o HTML e os arquivos de fatia de imagem
necessrios para atualizar a tabela no Dreamweaver.

Otimizao de imagens e animaes do

Fireworks colocadas no Dreamweaver
Voc pode iniciar o Fireworks a partir do Dreamweaver para fazer alteraes
rpidas de exportao, como fazer novo exemplo ou alterar o tipo do arquivo, para
imagens e animaes colocadas do Fireworks. O Fireworks permite fazer alteraes
nas configuraes de otimizao, nas configuraes de animao e no tamanho e
rea da imagem exportada.
Para alterar as configuraes de otimizao para uma imagem do Fireworks
colocada no Dreamweaver:

No Dreamweaver, selecione a imagem desejada e selecione

Comandos > Otimizar a imagem no Fireworks.

Se perguntado, especifique se deseja iniciar um arquivo de origem do Fireworks

para a imagem colocada.

Utilizao do Dreamweaver e do Fireworks juntos

317

No Fireworks, faa as edies desejadas na caixa de dilogo otimizao:

Para editar as configuraes de otimizao, clique na guia Opes. Para obter

mais informaes, consulte Utilizao Fireworks.

Para editar o tamanho e rea da imagem exportada, clique na guia Arquivo.

Para obter mais informaes, consulte Redimensionamento de arquivos
colocados do Fireworks na pgina 319.

Para editar configuraes de animao para a imagem, clique na guia

Animao. Para obter mais informaes, consulte Edio de animaes
colocadas no Fireworks na pgina 320.
4

Quando terminar de editar a imagem, clique em Atualizar.

Clicar em Atualizar exporta a imagem utilizando as novas configuraes de
otimizao, atualiza o GIF ou JPEG colocado no Dreamweaver e salva o
arquivo PNG de origem se tiver sido selecionado um arquivo de origem.
Se voc alterou o formato da imagem, o verificador de links do Dreamweaver
solicita a atualizao das referncias para a imagem. Por exemplo, se voc
alterou o formato de uma imagem chamada minha_imagem de GIF para
JPEG, clicar em OK neste aviso altera todas as referncias para
minha_imagem.gif no seu site para minha_imagem.jpg.

318

Captulo 12

Redimensionamento de arquivos colocados do Fireworks

Ao iniciar e otimizar uma imagem do Fireworks a partir do Dreamweaver, voc
pode redimensionar a imagem e selecionar uma rea especfica da imagem a ser
exportada.
Para especificar as dimenses da imagem exportada:

No Fireworks, na caixa de dilogo otimizao, clique na guia Arquivo.

Para alterar a escala de uma imagem quando ela exportada, especifique uma
porcentagem de escala ou digite a largura e a altura desejadas em pixels.
Selecione Limitar para colocar em escala a largura e a altura proporcionalmente.

Para exportar uma rea selecionada da imagem, selecione a opo rea de

exportao e especifique a rea de exportao:

Arraste a borda pontilhada que aparece em volta da visualizao at que ela

circunde a rea de exportao desejada. (Arraste dentro da visualizao para
mover reas ocultas na exibio.)

Digite as coordenadas de pixel para os limites da rea de exportao.

Utilizao do Dreamweaver e do Fireworks juntos

319

Edio de animaes colocadas no Fireworks

Se estiver iniciando e otimizando uma animao colocada do Fireworks, voc
tambm pode editar as configuraes da animao. As opes de animao na
caixa de dilogo otimizao so similares quelas disponveis no painel Molduras
do Fireworks.
Para editar uma imagem animada:

No Fireworks, na caixa de dilogo otimizao, clique na guia Animao.

Use as seguintes tcnicas para visualizar molduras de animao a qualquer

momento:

Para exibir uma nica moldura, selecione a moldura desejada na lista do lado
esquerdo da caixa de dilogo, ou use os controles de moldura na rea inferior
direita da caixa de dilogo.

Para exibir a animao, clique no controle Reproduzir/Parar na rea inferior

direita da caixa de dilogo.
3

Faa as edies na animao:

Para especificar o mtodo de eliminao da moldura, selecione a moldura

desejada na lista e escolha uma opo no menu pop-up (indicado pelo cone de
lixeira).

Para definir a exibio, selecione a moldura desejada na lista e digite o tempo de

retardo em centsimos de segundo.

Para configurar a animao para reproduzir repetidamente, clique no boto

Ciclos e selecione o nmero desejado de repeties a partir do menu pop-up.

Selecione a opo Cortar automtico para cortar cada moldura como uma rea
retangular, de modo que apenas a rea de imagem que difere entre as molduras
seja exportada. Selecionar esta opo reduz o tamanho do arquivo.

Selecione a opo Diferena automtica para exportar apenas os pixels que se

alteram entre molduras. Selecionar esta opo reduz o tamanho do arquivo.

320

Captulo 12

Atualizao do HTML do Fireworks

colocado no Dreamweaver
O comando Arquivo > Atualizar HTML no Fireworks fornece uma alternativa
para a tcnica iniciar-e-editar para a atualizao de arquivos do Fireworks
colocados no Dreamweaver. Com Atualizar HTML, voc pode editar uma
imagem PNG de origem no Fireworks e, em seguida, automaticamente atualizar
todo o cdigo HTML exportado e os arquivos de imagem colocados em um
documento do Dreamweaver. Este comando permite atualizar arquivos do
Dreamweaver mesmo quando o Dreamweaver no est sendo executado.
Para atualizar o HTML do Fireworks no Dreamweaver:

No Fireworks, selecione Arquivo > Atualizar HTML.

Navegue para o arquivo Dreamweaver que contm o HTML que deseja

atualizar e clique em Abrir.

Navegue at a pasta de destino onde deseja colocar os arquivos de imagens

atualizados e clique em Selecionar.
O Fireworks atualiza o cdigo HTML e JavaScript no documento
Dreamweaver. O Fireworks tambm exporta as imagens associadas com o
HTML e coloca as imagens na pasta de destino especificada.
Se o Fireworks no conseguir encontrar o HTML correspondente para
atualizar, voc ter a opo de inserir o novo HTML no documento
Dreamweaver. O Fireworks coloca a seo JavaScript do novo cdigo no incio
do documento e coloca a tabela HTML ou link para a imagem no final.

Criao de lbuns de fotografias na Web

O comando Criar lbum de fotografias na Web no Dreamweaver permite gerar
automaticamente um site da Web que exibe um lbum de imagens de uma dada
pasta. Este comando usa JavaScript para chamar o Fireworks, que cria uma
miniatura e uma imagem de tamanho maior para cada uma das imagens da pasta.
O Dreamweaver ento cria uma pgina da Web que contm todas as miniaturas e
links para as imagens maiores. Para usar Criar lbum de fotografias na Web, voc
deve ter tanto o Dreamweaver quanto o Fireworks instalados no seu sistema.
Antes de comear, coloque todas as imagens para seu lbum de fotografias em uma
nica pasta. (A pasta no precisa estar em um site.) Alm disso, certifique-se de
que os nomes de arquivo de imagem terminem em extenses reconhecidas pelo
comando Criar lbum de fotografias na Web (.gif, .jpg, .jpeg, .png, .psd, .tif, ou
.tiff ).As imagens com extenso de arquivo no reconhecidas no so includas no
lbum de fotografias.

Utilizao do Dreamweaver e do Fireworks juntos

321

Para criar um lbum de fotografias na Web:

No Dreamweaver, selecione Comandos > Criar lbum de fotografias na Web.

No campo de texto Ttulo do lbum de fotografias, digite um ttulo. O ttulo

ser exibido em um retngulo cinza no topo da pgina que contm as
miniaturas.
Se desejado, voc pode digitar at duas linhas de texto adicional para aparecer
diretamente abaixo do ttulo, nos campos de texto Informaes do subcabealho e Outras informaes.

Selecione a pasta que contm as imagens de origem clicando no boto Procurar

prximo ao campo de texto Pasta das imagens de origem. Em seguida selecione
(ou crie) uma pasta de destino na qual colocar as imagens e arquivos HTML
exportados clicando no boto Procurar prximo ao campo de texto Pasta de
destino.
A pasta de destino no deve j conter um lbum de fotografias; se contiver, e se
alguma das imagens novas tiver o mesmo nome da imagem usada
anteriormente, voc pode sobrescrever os arquivos de imagem e miniaturas
existentes.

Especifique as opes de exibio para as imagens miniatura:

Selecione um tamanho para as imagens miniatura a partir do menu pop-up

Tamanho da miniatura. As imagens so postas em escala proporcionalmente
para criar miniaturas que caibam em um quadrado que tenha as dimenses
indicadas de pixels.

Para exibir o nome do arquivo de cada imagem original abaixo da miniatura

correspondente, selecione Mostrar os nomes dos arquivos.

Digite o nmero de colunas para a tabela que exibe as miniaturas.

5

Selecione um formato para as imagens miniatura a partir do menu pop-up

Formato da miniatura:
GIF WebSnap 128 cria miniaturas GIF que usam uma paleta adaptativa da
Web de at 128 cores.

cria miniaturas GIF que usam uma paleta adaptativa da

Web de at 256 cores.
GIF WebSnap 256

JPEG - Melhor qualidade cria miniaturas JPEG com qualidade relativamente

maior e tamanhos de arquivo maiores.

cria miniaturas JPEG com qualidade relativamente

menor e tamanhos de arquivo menores.

JPEG - Arquivo menor

322

Captulo 12

Selecione um formato para imagens de tamanho maior a partir do menu popup Formato da fotografia. Uma imagem de tamanho maior do formato
especificado criada para cada uma das imagens originais. Voc pode
especificar um formato para as imagens de tamanho maior diferente do formato
especificado para as miniaturas.
Nota: O comando Criar lbum de fotografias na Web no permite usar os arquivos de
imagem originais como as imagens de tamanho maior, porque os formatos originais de
imagem diferentes de GIF e JPEG podem no ser exibidos adequadamente em todos
os navegadores. Note que se as imagens originais forem arquivos JPEG, as imagens de
tamanho maior geradas podem ter tamanho de arquivo maior ou menor qualidade que
os arquivos originais.

Selecione uma Porcentagem de escala para as imagens de tamanho maior.

Definir Escala como 100% cria imagens de tamanho maior do mesmo
tamanho que as originais. Note que a porcentagem de escala aplicada a todas
as imagens; se as imagens originais no forem todas do mesmo tamanho,
coloc-las em escala pela mesma porcentagem pode no produzir os resultados
desejados.

Selecione criar pgina de navegao para cada fotografia para criar uma pgina
da Web individual para cada imagem de origem, contendo links de navegao
rotulados como Voltar, Incio e Prximo.
Se voc selecionar esta opo, as miniaturas so vinculadas s pginas de
navegao. Se voc no selecionar esta opo, as miniaturas so vinculadas
diretamente s imagens de tamanho maior.

Clique em OK para criar os arquivos HTML e de imagem para o lbum de

fotografias da Web.
O Fireworks inicia (se j no estiver sendo executado) e cria as miniaturas e as
imagens de tamanho maior. Isso pode levar vrios minutos se voc tiver
includo um nmero grande de arquivos e imagem. Quando o processamento
estiver completo, o Dreamweaver fica novamente ativo e cria a pgina que
contm as miniaturas.

Utilizao do Dreamweaver e do Fireworks juntos

323

10

Quando for exibido um dilogo que diz lbum criado, clique em OK. Voc
pode ter que esperar alguns segundos para que a pgina de lbum de fotografias
aparea. As miniaturas so exibidas em ordem alfabtica por nome de arquivo.

Nota: Clicar no boto Cancelar na caixa de dilogo do Dreamweaver aps o

processamento ter comeado no interrompe o processo de criao do lbum de
fotografias; meramente faz com que o Dreamweaver no exiba a pgina principal do lbum
de fotografias.

324

Captulo 12

13

CAPTULO 13

Como inserir mdia

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

O Macromedia Dreamweaver permite adicionar som ou filmes aos sites da Web de

maneira rpida e fcil. possvel incorporar ou editar os arquivos e objetos
multimdia, como, por exemplo, miniaplicativos Java, filmes Quicktime, Flash e
Shockwave, alm de arquivos de udio MP3. Tambm possvel anexar Design
Notes a estes objetos. Agora possvel inserir objetos de boto e texto Flash dentro
do prprio Dreamweaver.

Como inserir objetos de mdia

possvel inserir um miniaplicativo Java, um filme QuickTime ou Shockwave,
filme ou objeto Flash, controle ActiveX ou outros objetos de udio ou vdeo em
uma pgina.
Para inserir um objeto de mdia em uma pgina, siga um dos procedimentos
abaixo:

Posicione o ponto de insero no local onde deseja inserir o objeto e, em

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

Arraste o boto apropriado, do painel Objetos at o local onde deseja que o

objeto aparea na janela do documento.

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

inserir o objeto e, em seguida, escolha o objeto apropriado nos submenus
Inserir > Mdia, ou Inserir > Imagens interativas.

325

Na maioria dos casos, aparecer uma caixa de dilogo, que permite escolher um
arquivo de origem e especificar certos parmetros do objeto de mdia.
Sugesto: Para evitar que certas caixas de dilogo apaream, escolha Editar >
Preferncias > Geral e cancele a seleo da opo Mostrar a caixa de dilogo quando
inserir objetos. Para anular qualquer preferncia definida para exibir caixas de dilogo,
mantenha pressionada a tecla Control (no Windows), ou Option (no Macintosh), enquanto
estiver inserindo o objeto. Por exemplo: para inserir um alocador de espao para um filme
Shockwave sem especificar o arquivo, mantenha pressionada a tecla Control ou Option e
clique no boto Shockwave.

Cada boto deste painel insere o cdigo-fonte HTML necessrio ao aparecimento

do objeto ou alocador de espao na pgina. Para especificar o arquivo de origem,
definir as dimenses, outros parmetros e atributos, utilize o inspetor de
propriedades correspondente a cada objeto.

Como iniciar um editor externo

possvel clicar duas vezes na maioria dos arquivos na janela do site para edit-los
diretamente. Se o arquivo for um arquivo HTML, ele ser aberto no
Dreamweaver. Se ele for de outro tipo, como um arquivo de imagem, ele ser
aberto em um editor externo apropriado, como o Macromedia Fireworks.
Cada tipo de arquivo com que o Dreamweaver no lida diretamente pode ser
associado a um ou mais editores externos do seu sistema. O editor que for iniciado
quando voc clicar duas vezes no arquivo na janela do site denominado
editor primrio. possvel definir qual editor ser associado a que tipo de arquivo
nas preferncias dos tipos de arquivos / editores.
Se houver mais de um editor associado ao tipo de arquivo, ser possvel iniciar um
editor secundrio para um determinado arquivo: clique com o boto direito do
mouse (no Windows) ou, mantendo a tecla Control pressionada (no Macintosh),
clique no nome do arquivo na janela do site e escolha um editor no submenu
Abrir com, do menu contextual.
Na maioria das vezes, o editor primrio o mesmo aplicativo que seria iniciado se
voc clicasse no cone correspondente ao arquivo na rea de trabalho. Para
especificar explicitamente os editores externos que devero ser iniciados para um
determinado tipo de arquivo, escolha Editar > Preferncias e, na lista de categorias,
selecione Tipos de arquivos / editores. As extenses dos nomes de arquivos, como
.gif, .wav e .mpg, encontram-se listadas esquerda, abaixo de Extenses. Os
editores associados extenso selecionada encontram-se listados direita, abaixo
de Editores.
Tambm possvel procurar um editor externo para editar o arquivo. Clique com
o boto direito do mouse (no Windows) ou, mantendo a tecla Control
pressionada (no Macintosh), clique no arquivo na visualizao do projeto da janela
do documento e escolha Editar com > Procurar, ou selecione o arquivo e escolha >
Editar > Editar com editor externo.

326

Captulo 13

Para adicionar um tipo de arquivo lista de extenses nas preferncias dos tipos
de arquivos / editores:

Clique no boto de adio (+), situado acima da lista de extenses.

Digite a extenso do tipo de arquivo (incluindo o ponto no incio da extenso),

ou diversas extenses relacionadas, separadas por espaos.
Por exemplo: possvel digitar .png .jpg.

Para adicionar um editor a um determinado tipo de arquivo:

Selecione a extenso do tipo de arquivo na lista de extenses.

Clique no boto de adio (+), situado acima da lista de editores.

Na caixa de dilogo que aparecer, escolha o aplicativo a ser adicionado lista de

editores.
Por exemplo, escolha o cone do aplicativo Excel, para adicion-lo sua lista de
editores.

Para remover um tipo de arquivo da lista:

Selecione o tipo de arquivo na lista de extenses.

Nota: No possvel desfazer a ao depois de remover um tipo de arquivo, portanto
certifique-se que deseja remov-lo.

Clique no boto de subtrao (), situado acima da lista de extenses.

Para tornar um editor o editor primrio de um tipo de arquivo:

Selecione o tipo de arquivo.

Selecione o editor (ou adicione-o, se j no estiver na lista).

Clique no boto Tornar primrio.

Para dissociar um editor de um tipo de arquivo:

Selecione o tipo de arquivo na lista de extenses.

Selecione o editor na lista de editores.

Clique no boto de subtrao (), situado acima da lista de editores.

Como inserir mdia

327

Como utilizar as Design Notes com objetos

de mdia
Do mesmo modo que faria com outros objetos no Dreamweaver, voc poder
adicionar Design Notes a um objeto de mdia.
Para adicionar Design Notes a um objeto de mdia:

Clique com o boto direito do mouse no objeto (no Windows), ou pressione a

tecla Control e clique no objeto (no Macintosh) na janela do documento.
Nota: necessrio definir o site antes de adicionar Design Notes a qualquer objeto.
Consulte Sobre as Design Notes na pgina 142.

No menu contextual, escolha Design Notes.

Digite as informaes que deseja na Design Note.

Tambm possvel adicionar uma Design Note a um objeto de mdia na janela do

site, ao selecionar o arquivo, exibir o menu contextual e selecionar as Design
Notes neste menu.
Para obter mais detalhes, consulte Sobre as Design Notes na pgina 142.

Sobre o contedo Flash

A tecnologia do Macromedia Flash constitui a soluo mais eficiente para a
produo de grficos e animaes com base em vetores. O Flash Player est
disponvel tanto como um plug-in do Netscape Navigator quanto um controle
ActiveX para o Internet Explorer no PC, tendo sido includo nas verses
mais recentes do Netscape Navigator, Microsoft Windows e America Online.
Antes de utilizar os comandos Flash disponveis no Dreamweaver, revise os trs
tipos diferentes de arquivos Flash.
O arquivo Flash (.fla)

uma arquivo-fonte para qualquer projeto e criado no

programa de mesmo nome. Este tipo de arquivo pode ser aberto apenas no Flash,
no no Dreamweaver ou em navegadores. possvel abrir o arquivo Flash no Flash
e, subseqentemente, export-lo como um arquivo SWF ou SWT para ser
utilizado nos navegadores. Para obter mais informaes, consulte Como utilizar
os objetos boto Flash na pgina 329 e Como criar novos modelos de boto na
pgina 335.

O arquivo de filmeFlash (.swf)

uma verso comprimida do arquivo Flash (.fla),

otimizado para visualizao na Web. Este arquivo pode ser executado em
navegadores e visualizado no Dreamweaver, mas no pode ser editado no Flash.
Este o tipo de arquivo criado quando se utiliza o objetos de boto e texto Flash.
Para obter mais informaes, consulte Como utilizar os objetos boto Flash na
pgina 329 e Como utilizar os objetos de texto Flash na pgina 332.

328

Captulo 13

Os arquivos do modelo Flash Generator (.swt) possibilitam a modificao e

substituio de informaes num arquivo de filme Flash. Estes arquivos so
utilizados no objeto de boto Flash, permitindo a modificao do modelo com os
seus prprios textos ou links, a fim de criar um SWF personalizado para inserir no
seu documento. No Dreamweaver, estes arquivos de modelo podem ser
encontrados nas pastas Dreamweaver/Configuration/Flash Objects/Flash Buttons
e Flash Text.

Se voc utilizar Flash para projetar os seus prprios arquivos de modelos

Generator (consulte Como criar novos modelos de boto na pgina 335), estes
modelos podero ser distribudos aos membros da sua equipe de design da Web.
Os membros, por sua vez, podero salvar estes arquivos na pasta Configuration/
Flash Objects/Flash Buttons e acess-los utilizando o objeto de boto Flash.

Como utilizar os objetos boto Flash

O objeto de boto Flash permite personalizar e inserir um conjunto de botes
Flash predefinidos.
Nota: necessrio salvar os documentos antes de inserir um objeto de boto ou texto
Flash.

Para inserir um objeto de boto Flash:

Na visualizao do projeto da janela do documento, selecione Inserir boto

Flash, no painel Objetos, ou selecione Inserir > Imagens interativas > Boto
Flash. Tambm possvel arrastar o cone do boto Flash at a janela do
documento.
Aparecer a caixa de dilogo Inserir boto Flash.

Como inserir mdia

329

Na lista de estilos, selecione o estilo de boto que deseja.

Ser mostrado um exemplo de boto no campo Amostra. possvel clicar nesta
amostra, para verificar como funcionar no navegador. Entretanto, o campo
Amostra ser atualizado automaticamente, mostrando as alteraes de texto ou
fonte que tiverem sido efetuadas. Estas alteraes aparecero na visualizao do
projeto.

No campo Texto do boto (opcional), digite o texto que dever aparecer.

Por exemplo, digite Pressione-me! Este campo aceitar alteraes apenas se o
boto selecionado possuir um parmetro {Button Text} definido. Isto ser
mostrado no campo Amostra. O texto que digitar substituir o parmetro
{Button Text} quando voc visualizar o arquivo.

No campo Fonte, especifique o tamanho e tipo de fonte que deseja, no menu

pop-up.
S necessrio selecionar fontes e tamanhos se os parmetros de texto do boto
estiverem definidos. Se a fonte padro de um boto no estiver disponvel no
sistema, selecione uma outra fonte no menu pop-up. Lembre-se de que a fonte
selecionada no ser vista no campo Amostra, mas possvel clicar em Aplicar,
para inserir o boto na pgina, para examinar a aparncia do texto.

No campo Link (opcional), digite um link relativo a documento ou absoluto

para o boto.
Os links relativos a site no so aceitos porque os navegadores no os
reconhecem nos filmes Flash. Se utilizar um link relativo a documento,
assegure-se de salvar o arquivo SWF no mesmo diretrio que o arquivo HTML.
A interpretao de links relativos a documento varia nos navegadores e, para se
assegurar de que os links funcionaro corretamente, salve o arquivo no mesmo
diretrio.

No campo Destino (opcional), especifique uma moldura ou janela de destino

onde colocar o link do boto Flash.

No campo Cor de fundo (opcional), defina a cor de fundo para o filme Flash.
Utilize o seletor de cores ou digite um valor hexadecimal da Web (como, por
exemplo, #FFFFFF).

No campo Salvar como, digite o nome do novo arquivo SWF.

possvel utilizar o nome de arquivo padro (por exemplo: boto1.swf ) ou
digitar um novo nome. Se o arquivo contiver um link relativo a documento,
ser necessrio salvar o arquivo no mesmo diretrio que o documento HTML
atual, para manter os links relativos a documento

330

Captulo 13

Clique em Obter mais estilos, para ir para o site de intercmbio da Macromedia

e efetuar o download de mais estilos de botes.
Para obter mais informaes, consulte Como adicionar extenses ao
Dreamweaver na pgina 98.

10

Clique em Aplicar, ou OK, para inserir o boto Flash na janela do documento.

Sugesto: Selecione Aplicar, para examinar as alteraes na visualizao do projeto

enquanto mantm a caixa de dilogo aberta. possvel continuar alterando o boto.
Para modificar um objeto de boto Flash:

Enquanto estiver na visualizao do projeto, selecione um objeto de boto

Flash.

O inspetor de propriedades exibir as propriedades do boto Flash. possvel

fazer alteraes no inspetor de propriedades. Estas alteraes modificaro
apenas os atributos HTML, como largura, altura e cor de fundo.

Para alterar o contedo, exiba a caixa de dilogo Inserir boto Flash, utilizando
um dos seguintes mtodos:

Clique duas vezes no objeto de boto Flash.

No inspetor de propriedades, clique em Editar.
Clique com o boto direito do mouse (no Windows), ou pressione a tecla
Control e clique (no Macintosh) e, no menu contextual, escolha Editar.
4

Na caixa de dilogo Inserir boto Flash, efetue as edies desejadas nos campos
descritos no procedimento anterior.
Na visualizao do projeto, possvel redimensionar o objeto facilmente
utilizando as alas de redimensionamento. Para redimensionar o objeto ao seu
tamanho original, selecione Redefinir o tamanho, no inspetor de propriedades.
Consulte Como redimensionar as imagens e os outros elementos na
pgina 295.

Para visualizar a execuo do objeto de boto Flash na janela do documento:

Na visualizao do projeto, selecione um objeto de boto Flash.

No inspetor de propriedades, clique no boto verde Executar.

Para finalizar a visualizao, clique no boto vermelho Parar.

Nota: No possvel editar o objeto de boto Flash enquanto o estiver executando.

conveniente visualizar o documento no navegador, para examinar a aparncia

exata do boto Flash.

Como inserir mdia

331

Como utilizar os objetos de texto Flash

O objeto de texto Flash permite criar e inserir um filme Flash que contm
somente texto. Isto permite criar um pequeno filme grfico com base em vetores
com as fontes de designer e o texto de sua escolha.

Para inserir um objeto de texto Flash:

Na visualizao do projeto da janela do documento, selecione Inserir texto

Flash, no painel Objetos, ou selecione Inserir > Imagens interativas > Texto
Flash.
Aparecer a caixa de dilogo Inserir texto Flash.

No menu pop-up Fontes, selecione uma fonte.

Este menu contm uma lista de todas as fontes TrueType contidas no sistema.

Digite um tamanho de fonte no campo Tamanho. Os tamanhos so pontos

com tamanhos especificados.

Especifique os atributos de estilo (negrito ou itlico) e alinhamento do texto,

clicando nos boto de estilo apropriados.

No campo Cor, defina a cor do texto, utilizando o seletor de cores ou digitando

o valor hexadecimal da Web (#FFFFFF, por exemplo).

No campo Cor da imagem cambivel, defina a cor que aparecer quando o

ponteiro for passado sobre o objeto de texto Flash. Utilize o seletor de cores ou
digite um valor hexadecimal da Web (#FFFFFF, por exemplo).

Digite o texto desejado no campo Texto.

Para examinar o estilo da fonte que est sendo exibido no campo Texto,
selecione Mostrar a fonte.

332

Captulo 13

Se desejar associar um link ao objeto de texto Flash, digite um link absoluto ou

relativo a documento no campo Link.
Os links relativos a site no so aceitos porque os navegadores no os
reconhecem nos filmes Flash. Se utilizar um link relativo a documento,
assegure-se de salvar o arquivo SWF no mesmo diretrio que o arquivo HTML.
A interpretao de links relativos a documento varia nos navegadores e, para se
assegurar de que os links funcionaro corretamente, salve o arquivo no mesmo
diretrio.

Se tiver digitado um link, especifique uma moldura ou janela de destino onde

colocar o link no campo Destino.

10

No campo Cor de fundo, escolha uma cor de fundo para o texto. Utilize o
seletor de cores ou digite um valor hexadecimal da Web (#FFFFFF, por
exemplo).

11

No campo Salvar como, digite um nome para o arquivo.

possvel utilizar o nome de arquivo padro (por exemplo: texto1.swf ) ou
digitar um novo nome. Se o arquivo contiver um link relativo a documento,
ser necessrio salvar o arquivo no mesmo diretrio que o documento HTML
atual, para manter os links relativos a documento

12

Clique em Aplicar, ou OK, para inserir o texto Flash na janela do documento.

Se clicar em Aplicar, a caixa de dilogo permanecer aberta e ser possvel
visualizar o texto no documento.

Para modificar ou executar o objeto de texto Flash, utilize o mesmo procedimento

adotado para o boto Flash. Consulte Como utilizar os objetos boto Flash na
pgina 329.

Como definir as propriedades dos objetos

Flash
Inicialmente, o inspetor de propriedades dos objetos Flash exibir as propriedades
mais comumente utilizadas. Clique na seta de expanso, situada no canto inferior
direito, para examinar outras propriedades.
O inspetor de propriedades tambm contm um boto Executar, que permite a
visualizao dos objetos Flash na janela do documento. Ao clicar no boto verde
Executar, voc ver a aparncia do objeto como num navegador.
Nome especifica

o nome que identificar o boto para a criao de scripts. Digite

um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades.
L e U especificam

a largura e altura do objeto, em pixels. Tambm possvel

especificar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm
(milmetros), cm (centmetros) ou % (percentagem da largura ou altura do objetopai). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm.

Como inserir mdia

333

Arquivo especifica

o caminho at o arquivo do objeto Flash. Clique no cone

correspondente pasta, para procurar um arquivo, ou digite um caminho.
Alinhar determina

como o objeto ser alinhado na pgina. Para obter uma

descrio de cada opo, consulte Como alinhar os elementos na pgina 294.
Bg especifica
Editar

a cor de fundo do objeto.

acessa a caixa de dilogo do objeto Flash.

Redefinir o tamanho

retorna o boto selecionado ao tamanho original do filme.

Executar / Parar permitem

visualizar o objeto Flash na janela do documento.

Clique no boto verde Executar, para examinar o objeto no modo Executar.
Clique no boto vermelho Parar, para finalizar o filme e poder editar o objeto.

ID define

o parmetro opcional ID do ActiveX. Este parmetro utilizado mais

freqentemente para passar informaes entre os controles ActiveX.
Espao V e Espao H especificam o nmero de pixels de espao em branco acima,
abaixo e em ambos os lados do boto.
Qualidade define o parmetro quality dos tags object e embed que definem o boto.
Um filme ter uma aparncia melhor com uma configurao elevada, mas
necessitar de um processador rpido para fazer uma apresentao correta na tela.
Baixa enfatiza a velocidade e desenfatiza a aparncia, enquanto Alta favorece a
aparncia em detrimento da velocidade. Baixa automtica enfatiza a velocidade de
incio, mas melhora a aparncia se possvel. Alta automtica enfatiza ambas as
qualidades inicialmente, mas sacrifica a aparncia em funo da velocidade, se
necessrio.
Escala define o parmetro scale dos tags object e embed que definem o objeto de
boto ou texto. Este parmetro define como o filme ser exibido dentro da rea
definida para o ele pelos valores width e height. As opes so Padro (mostrar
todas), Sem bordas e Ajuste exato. A opo Mostrar todas torna visvel o filme
inteiro na rea especificada, mantendo as mesmas propores do filme e evitando a
sua distoro. As bordas podero aparecer nos dois lados do filme. A opo Sem
bordas semelhante a Mostrar todas, exceto que partes do filme podem estar
cortadas. Com a opo Ajuste exato, o filme inteiro preencher a rea especificada,
mas no sero mantidas as propores do filme, podendo ocorrer algumas
distores.
Parmetros abre

uma caixa de dilogo, na qual podem ser digitados outros

parmetros. Consulte Como utilizar os parmetros na pgina 348.

334

Captulo 13

Como criar novos modelos de boto

Utilize o Flash em conjunto com os os modelos gratuitos de autoria do Generator para
criar novos modelos de boto, que incluem objetos de texto do Generator. Tambm
possvel fazer o download de novos modelos de boto no site de intercmbio da
Macromedia para o Dreamweaver na Web e coloc-los na pasta do boto Flash. Para
obter mais informaes sobre como criar novos modelos de boto, leia o artigo sobre
este assunto, no site da Macromedia: http://www.macromedia.com/support/
dreamweaver/insert_media.html. Para obter mais informaes sobre como utilizar as
extenses, consulte Como adicionar extenses ao Dreamweaver na pgina 98.

Como inserir filmes Flash

Quando voc inserir um filme Flash em um documento, o Dreamweaver utilizar
os tags object (definido pelo Internet Explorer para os controles ActiveX) e embed
(definido pelo Netscape Navigator), a fim de obter os melhores resultados em
todos os tipos de navegadores. Quando voc fizer alteraes ao filme no inspetor
de propriedades, o Dreamweaver mapear as entradas dos parmetros apropriados
aos tags object e embed.
Nota: Se inserir um filme utilizando o objeto de filme Flash, ser inserido um parmetro
codebase, que instrui o Internet Explorer para o Windows a fazer o download automtico
do controle ActiveX necessrio (Flash 4 e mais recente). Voc poder alterar o atributo, se
no desejar que isto acontea.
Para inserir e visualizar um filme Flash:

Na visualizao do projeto, na janela do documento, coloque o ponto de

insero onde deseja inserir o filme.

Insira o filme de uma das seguintes maneiras:

Clique no cone de Inserir Flash, no painel Objetos.

Escolha Inserir > Mdia > Flash.
Arraste o cone de Inserir Flash, do painel Objetos at o ponto de insero no
documento.
3

Na caixa de dilogo que aparecer, selecione um arquivo de filme Flash (.swf ).

Aparecer um alocador de espao Flash na janela do documento
(diferentemente dos objetos de boto e texto Flash).

Para visualizar o filme Flash na janela de documento, clique no boto verde

Executar, no inspetor de propriedades. Clique em Parar, para terminar a
visualizao. Tambm possvel visualizar o filme Flash em um navegador,
pressionando a tecla F12.

Sugesto: Para visualizar todo contedo Flash numa pgina, pressione simultaneamente
as teclas Control, Alt, Shift e P (no Windows), ou Shift, Option, Command e P (no
Macintosh). Todos os objetos e filmes Flash esto definidos para Executar.

Como inserir mdia

335

Como definir as propriedades dos filmes Flash

Para exibir as seguintes propriedades no inspetor de propriedades, selecione um
filme Flash.
Inicialmente, o inspetor de propriedades exibir as propriedades mais comumente
utilizadas. Clique na seta de expanso, situada no canto inferior direito, para
examinar todas as propriedades.
Nome especifica um nome que identificar o filme para a criao de scripts. Digite
um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades.
L e U especificam

a largura e altura do filme, em pixels. Tambm possvel

especificar 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 especifica

o caminho at o arquivo do filme Flash. Clique no cone

correspondente pasta, para procurar um arquivo, ou digite um caminho.
Alinhar determina como o filme ser alinhado na pgina. Para obter uma descrio

de cada opo, consulte Como alinhar os elementos na pgina 294.

Fundo especifica

uma cor de fundo para a rea do filme. Esta cor tambm

aparecer enquanto o filme no estiver sendo executado (durante a carga e aps a
sua execuo).
ID define

o parmetro opcional ID do ActiveX. Este parmetro utilizado mais

freqentemente para passar informaes entre os controles ActiveX.
Espao V e Espao H especificam o nmero de pixels de espao em branco acima,
abaixo e em ambos os lados do filme.
Parmetros abre

uma caixa de dilogo na qual podem ser digitados parmetros

adicionais a serem passados ao filme. Consulte Como utilizar os parmetros na
pgina 348. O filme deve ser projetado para poder admitir estes parmetros
adicionais.

Qualidade define o parmetro quality dos tags object e embed que executam o
filme. As configuraes se relacionam ao nvel anti-lias utilizado durante a
execuo do filme. A aparncia do filme ser melhor com uma configurao
elevada, mas necessitar de um processador mais rpido para ser apresentado
corretamente na tela. Baixa enfatiza a velocidade e desenfatiza a aparncia,
enquanto Alta favorece a aparncia em detrimento da velocidade. Baixa
automtica enfatiza a velocidade de incio, mas melhora a aparncia se possvel.
Alta automtica enfatiza ambas as qualidades inicialmente, mas sacrifica a
aparncia em funo da velocidade, se necessrio.
Escala define o parmetro scale dos tags object e embed que executam o filme. Para

obter mais informaes, consulte Como definir as propriedades dos objetos

Flash na pgina 333.

336

Captulo 13

Execuo automtica executa

o filme automaticamente quando a pgina for

carregada.
Loop repete

o filme indefinidamente.

Redefinir o tamanho

retorna o filme selecionado ao seu tamanho original.

Como inserir objetos Generator

O Macromedia Generator possibilita uma maneira de lidar com o contedo
dinmico na Web. Os arquivos do Generator podem ser criados com o Flash 4 ou
5, utilizando os modelos gratuitos de autoria do Generator; os arquivos passam a
ser veiculados por um servidor da Web que executa o software de servidor do
Generator. possvel inserir um objeto Generator em um documento do
Dreamweaver.
Para inserir um objeto Generator:

Na janela do documento, coloque o ponto de insero onde deseja inserir o

objeto.

Clique no boto Generator, no painel Objetos.

Na caixa de dilogo que aparecer, selecione o arquivo de modelo do Generator

(.swt).

Se desejar, clique no boto de adio (+), para adicionar um par de parmetros

name=value. Em seguida, digite o nome do parmetro no campo Nome e o valor
do parmetro no campo Valor. Repita esta etapa para cada parmetro.

Para remover um parmetro, selecione-o na lista Parmetros e clique no

boto de subtrao ().

Quando terminar de digitar os parmetros, clique em OK, para inserir o objeto

Generator.

Para editar os parmetros depois que o objeto Generator tiver sido inserido, utilize
o inspetor de cdigo ou a visualizao de cdigo, na janela do documento.
Os pares name=value so utilizados pelo servidor do Generator, em conjuno com
outras fontes de dados, para criar dinamicamente o filme ou arquivo de imagem
Flash.

Como inserir mdia

337

Sobre os filmes Shockwave

Shockwave, o padro da Macromedia para multimdia interativa na Web, um
formato compactado que permite o download rpido dos arquivos de mdia
criados no Macromedia Director, para que sejam executados pela maior parte dos
navegadores mais comuns.
Como inserir filmes Shockwave
O software que executa os filmes Shockwave est disponvel como um plug-in do
Netscape Navigator e um controle ActiveX. Quando voc inserir um filme
Shockwave, o Dreamweaver utilizar os tags object (para o controle ActiveX) e
embed (para o plug-in), a fim de obter os melhores resultados em todos os
navegadores. Quando voc fizer alteraes ao filme no inspetor de propriedades, o
Dreamweaver mapear as entradas dos parmetros apropriados aos tags object e
embed.
Para inserir um filme Shockwave:

Na visualizao do projeto da janela do documento, coloque o ponto de

insero onde deseja inserir o filme Shockwave.

Clique no boto Shockwave, no painel Objetos, ou selecione Inserir > Mdia >
Shockwave, ou arraste o boto Shockwave para o documento.

Na caixa de dilogo que aparecer, selecione um arquivo de filme.

No inspetor de propriedades, digite a largura e altura do filme, nas caixas L e U.

Como definir as propriedades Shockwave

Para garantir os melhores resultados, tanto no Internet Explorer da Microsoft
como no Netscape Navigator, o Dreamweaver insere os filmes Shockwave
utilizando os tags object e embed. (object o tag definido pela Microsoft para os
controles ActiveX, enquanto que embed o tag definido pela Netscape Navigator
para os plug-ins). Para exibir as propriedades no inspetor de propriedades,
selecione um filme Shockwave.
Inicialmente, o inspetor de propriedades exibir as propriedades mais comumente
utilizadas. Clique na seta de expanso, situada no canto inferior direito, para
examinar todas as propriedades.
Nome especifica um nome que identificar o filme para a criao de scripts. Digite
um nome no campo sem ttulo, extrema esquerda do inspetor de propriedades.
L e U especificam

a largura e altura do filme, em pixels. Tambm possvel

especificar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm
(milmetros), cm (centmetros) ou % (percentagem da largura ou altura do objetopai). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm.

338

Captulo 13

Arquivo especifica

o caminho at o arquivo do filme Shockwave. Clique no cone

correspondente pasta, para procurar um arquivo, ou digite um caminho.
Alinhar determina como o filme ser alinhado na pgina. Para obter uma descrio

de cada opo, consulte Como alinhar os elementos na pgina 294.

Fundo especifica

uma cor de fundo para a rea do filme. Esta cor tambm

aparecer enquanto o filme no estiver sendo executado (durante a carga e aps a
sua execuo).
Executar permite que visualize o filme na visualizao do projeto da janela do
documento. Clique no boto Parar, para interromper o filme e retornar ao
alocador de espao Shockwave.
Parmetros abre

uma caixa de dilogo na qual podem ser digitados outros

parmetros a serem passados ao filme Shockwave. Consulte Como utilizar os
parmetros na pgina 348. O filme Shockwave deve ter sido projetado para poder
admitir estes parmetros.

ID define

o parmetro opcional ID do ActiveX. Este parmetro utilizado mais

freqentemente para passar informaes entre os controles ActiveX.
Espao V e Espao H especificam o nmero de pixels de espao em branco acima,
abaixo e em ambos os lados do filme.

Como adicionar som a uma pgina

H vrios tipos diferentes de arquivos e formatos de som, assim como diferentes
maneiras de adicionar som s pginas da Web. Dentre os fatores a serem
considerados antes de decidir qual formato e mtodo sero utilizados para
adicionar o som, esto o objetivo, o seu pblico, o tamanho do arquivo, a
qualidade do som e as diferenas entre os navegadores.
Nota: Os arquivos sonoros so tratados de forma diferente e inconsistente pelos diversos
navegadores. Pode-se desejar salvar arquivos sonoros como SWFs, para melhorar a sua
consistncia.

Sobre os formatos de arquivos de udio

A seguinte lista descreve os formatos de arquivos de udio mais comuns,
juntamente com algumas das vantagens e desvantagens de cada um para os
projetos da Web.
O formato .midi ou .mid (interface digital de instrumento musical) destina-se
msica instrumental. Os arquivos MIDI contam com suporte de vrios
navegadores e no necessitam de plug-ins. Apesar de sua qualidade de som ser
muito boa, esta tambm pode depender da placa de som do visitante. Um arquivo
MIDI pequeno pode oferecer um clipe de som longo. Os arquivos MIDI no
podem ser gravados e devem ser sintetizados num computador com hardware e
software especiais.

Como inserir mdia

339

Os arquivos no formato .wav (extenso Waveform) possuem uma qualidade de

som boa, contam com suporte de vrios navegadores e no necessitam de plug-ins.
possvel gravar os seus prprios arquivos WAV a partir de um CD, fita,
microfone etc. No entanto, o grande tamanho dos arquivos limita seriamente o
comprimento dos clipes de som que podem ser utilizados nas pginas da Web.
O formato .aif (formato de arquivo de intercmbio de udio - AIFF) , assim como o
formato WAV, possui uma qualidade de som boa, pode ser executado pela maioria dos
navegadores, e no necessita de plug-ins. possvel gravar arquivos AIFF a partir de um
CD, fita, microfone etc. No entanto, o grande tamanho dos arquivos limita seriamente o
comprimento dos clipes de som que podem ser utilizados nas pginas da Web.
O formato .mp3 (udio do Motion Picture Experts Group ou Camada-3 de udio
um formato compactado que torna os arquivos de som
consideravelmente menores. A qualidade som muito boa. Se um arquivo MP3
tiver sido gravado e compactado corretamente, a sua qualidade pode competir
com a de um CD. Novas tecnologias permitem transferir o arquivo gradualmente,
para que o visitante no precise esperar pelo download do arquivo inteiro at
poder ouvi-lo. No entanto, o tamanho do arquivo maior do que um arquivo
Real Audio. Por isso, possvel que o download de uma msica inteira em uma
conexo de linha telefnica comum ainda demore um pouco. Para executar os
arquivos MP3, os visitantes devem fazer o download e instalar um aplicativo
auxiliar ou plug-in, como QuickTime, Windows Media Player ou RealPlayer.

MPEG)

O grau de compactao do formato .ra, .ram, .rpm, ou Real Audio muito alto e os
tamanhos de arquivos so menores do que os arquivos no formato MP3.
possvel efetuar o download de arquivos de msica completos num perodo de
tempo razovel. Como os arquivos podem ser transferidos gradualmente de um
servidor da Web normal, os visitantes podem comear a ouvir o som antes que o
download do arquivo tenha sido concludo. A qualidade de som inferior dos
arquivos MP3, mas novos aparelhos de reproduo e codificadores melhoraram a
sua qualidade consideravelmente. Para poder executar estes arquivos, os visitantes
devero efetuar o download e instalar o aplicativo auxiliar ou plug-in RealPlayer.
Como vincular a um arquivo de udio
A vinculao a um arquivo de udio uma maneira simples e efetiva de adicionar
som s pginas da Web. Este mtodo de incorporar arquivos de som permite aos
visitantes escolher se desejam ouvir o arquivo e coloca o arquivo disposio de
um pblico maior. Alguns navegadores no contam com o suporte a arquivos de
som incorporados.
Para criar um link a um arquivo de udio:

340

Captulo 13

Selecione o texto ou a imagem que deseja utilizar como link ao arquivo de udio.

No inspetor de propriedades, clique no cone correspondente pasta, para

procurar o arquivo de udio, ou digite o caminho e o nome do arquivo no
campo Link.

Como incorporar udio

A incorporao de udio encaixa o aparelho de reproduo de som diretamente na
pgina, mas o som s ser executado se os visitantes do seu site contarem com o
plug-in apropriado ao arquivo escolhido. Incorpore os arquivos, se desejar utilizar
o som como msica de fundo ou se desejar mais controle sobre a prpria
apresentao de som. Por exemplo: possvel ajustar o volume, a aparncia do
aparelho de reproduo na pgina e os pontos de incio e fim do arquivo de som.
Para incorporar um arquivo de udio

Na visualizao do projeto, coloque o ponto de insero onde deseja incorporar

o arquivo.

Clique no boto Plug-in, no painel Objetos, ou selecione Inserir > Mdia >
Plug-in.
Para obter mais informaes sobre o objeto de plug-in, consulte Como inserir
o contedo de plug-ins do Netscape Navigator na pgina 341.

No inspetor de propriedades, clique no cone correspondente pasta, para

procurar o arquivo de udio, ou digite o caminho e o nome do arquivo no
campo Link.

Digite a largura e a altura, inserindo os valores nos campos apropriados ou

redimensionando o alocador de espao de plug-in, na janela do documento.
Estes valores determinam o tamanho com o qual os controles de udio sero
exibidos no navegador. Por exemplo: tente uma largura de 144 pixels e uma
altura de 60 pixels, para examinar como o aparelho de reproduo de udio
aparecer no Netscape Navigator e no Internet Explorer.

Como inserir o contedo de plug-ins do

Netscape Navigator
Os plug-ins aprimoram o funcionamento do Netscape Navigator, possibilitando
maneiras de exibir o contedo de mdia em diversos formatos. Os plug-ins so os
meios atravs dos quais os arquivos de contedo so executados e exibidos nos
sites da Web. Por exemplo: dentre os plug-ins mais freqentes esto o RealPlayer e
QuickTime, enquanto alguns arquivos de contedo incluem os filmes MP3s e
QuickTime.
Depois de criar o contedo de um plug-in do Navigator, possvel utilizar o
Dreamweaver para inseri-lo em um documento HTML. O Dreamweaver utiliza o
tag embed para marcar a referncia ao arquivo de contedo.

Como inserir mdia

341

Para inserir o contedo de plug-ins do Navigator:

Na visualizao do projeto, na janela do documento, coloque o ponto de

insero onde deseja inserir o contedo.

Clique no boto Plug-in, no painel Objetos.

Na caixa de dilogo que aparecer, selecione um arquivo de contedo para o

plug-in do Navigator.

Como definir as propriedades dos plug-ins do Netscape

Navigator
Aps ter inserido o contedo de um plug-in do Netscape Navigator, utilize o
inspetor de propriedades para definir os parmetros do contedo. Para exibir as
seguintes propriedades no inspetor de propriedades, selecione um objeto de plugin do Netscape Navigator.
Inicialmente, o inspetor de propriedades exibir as propriedades mais comumente
utilizadas. Clique na seta de expanso, situada no canto inferior direito, para
examinar todas as propriedades.
Nome especifica

um nome que identificar o plug-in para a criao de scripts.

Digite um nome no campo sem ttulo, extrema esquerda do inspetor de
propriedades.
L e U especificam

a largura e altura, em pixels, alocadas ao objeto na pgina.

Tambm possvel especificar as seguintes unidades: pc (paicas), pt (pontos), pol
(polegadas), mm (milmetros), cm (centmetros) ou % (percentagem da largura e
altura do objeto-pai). As abreviaturas devem se seguir ao valor, sem um espao:
por exemplo: 3mm.
Orig especifica

o arquivo de origem dos dados. Clique no cone correspondente

pasta, para procurar um arquivo, ou digite um nome de arquivo.
URL do Plg especifica

a URL do atributo pluginspage. Digite a URL completa do

site onde os usurios podero efetuar o download do plug-in. Se o usurio que
estiver visualizando a pgina no contar com o plug-in, o navegador tentar
efetuar o seu download a partir desta URL.
Alinhar determina

como o objeto ser alinhado na pgina. Para obter uma

descrio de cada opo, consulte Como alinhar os elementos na pgina 294.
Espao V e Espao H especificam o nmero de pixels de espao em branco acima,
abaixo e em ambos os lados do plug-in.
Borda especifica

342

Captulo 13

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 Como
utilizar os parmetros na pgina 348. Muitos plug-ins respondem a parmetros
especiais. O plug-in Flash, por exemplo, inclui parmetros relacionados a bgcolor,
salign e scale.
Tambm possvel visualizar os atributos designados ao plug-in selecionado,
clicando no boto Atributo. possvel editar, adicionar e excluir os atributos
(como a largura e a altura) nesta caixa de dilogo.
Como executar os plug-ins na janela do documento
possvel visualizar filmes e animaes que dependem dos plug-ins do Navigator
(elementos que utilizam o tag embed) diretamente na janela do documento. No
possvel visualizar na janela do documento os filmes ou animaes que dependem
dos controles ActiveX. possvel executar todos os elementos de plug-in
simultaneamente, a fim 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 filmes, 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
Configuration/Plugins e, em seguida, nas pastas de plug-ins de todos os
navegadores que estiverem instalados.
Para executar o contedo de plug-ins na janela do documento:

Insira um ou mais elementos de mdia, escolhendo Inserir > Mdia >

Shockwave, Inserir > Imagens interativas > Flash, ou Inserir > Mdia > Plug-in.

Execute o contedo do plug-in:

Selecione um dos elementos de mdia que tiver inserido e escolha Exibir >
Plug-ins > Executar, ou clique no boto Executar, no inspetor de propriedades.

Escolha Exibir > Plug-ins > Executar todos, para executar todos os elementos de
mdia na pgina selecionada que dependerem de plug-ins.
Nota: A opo Executar todos se aplica ao documento atual e no a outros documento
num conjunto de molduras, por exemplo.
Para interromper a execuo do contedo de plug-ins:

Selecione um elemento de mdia e escolha Exibir > Plug-ins > Parar, ou clique no
boto Parar, no inspetor de propriedades.
Tambm possvel selecionar Exibir > Plug-ins > Parar todos, para interromper a
execuo de todos os contedos de plu-gin.

Como inserir mdia

343

Resoluo de problemas relacionados aos plug-ins do

Navigator
Se, aps ter seguido estas etapas para executar o contedo do plug-in na janela do
documento, alguns elementos do contedo do plug-in no forem executados,
tente um dos seguintes procedimentos:

Certifique-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 Configuration/Plugins/UnsupportedPlugins.txt em um editor

de texto e procure o plug-in com problemas na lista. Este arquivo mantm um
registro dos plug-ins que causam problemas no Dreamweaver e, por isso, no
contam com suporte. Se houver problemas com qualquer outro plug-in,
adicione-o a este arquivo.

Certifique-se de contar com memria suficiente (e, no Macintosh, que haja

memria suficiente alocada ao Dreamweaver). Alguns plug-ins exigem entre 2
MB e 5 MB a mais de memria, para que sejam executados.

Como inserir um controle ActiveX

Os controles ActiveX (anteriormente conhecidos como controles OLE) so
componentes reutilizveis semelhantes a mini-aplicativos que podem funcionar
como plug-ins dos navegadores. Eles so executados no Internet Explorer com o
Windows, porm no so executados no Macintosh ou no Netscape Navigator.
No Dreamweaver, o objeto ActiveX permite fornecer atributos e parmetros para
um controle ActiveX no navegador do visitante.
O Dreamweaver utiliza o tag object para marcar o local na pgina onde o controle
ActiveX aparecer e para fornecer parmetros ao controle ActiveX.
Para inserir o contedo de controles ActiveX:

Na janela do documento, coloque o ponto de insero onde deseja inserir o

contedo e siga um dos procedimentos abaixo:

Clique no boto ActiveX, no painel Objetos.

Escolha Inserir > Mdia > ActiveX.
Arraste e sollte o cone ActiveX.
Um cone marca o local onde o controle ActiveX aparecer na pgina no
Internet Explorer.

344

Captulo 13

Como configurar as propriedades dos controles ActiveX

Aps ter inserido um objeto ActiveX, utilize o inspetor de propriedades para
definir os atributos do tag object e parmetros do controle ActiveX. Clique em
Parmetros, no inspetor de propriedades, para digitar os nomes e valores relativos
s propriedades que no aparecem no inspetor de propriedades. No h um
formato padro universalmente aceito para os parmetros dos controles ActiveX;
para estabelecer os parmetros a serem empregados, consulte a documentao
relativa ao controle ActiveX a ser utilizado.
Inicialmente, o inspetor de propriedades exibir as propriedades mais comumente
utilizadas. Clique na seta de expanso, situada no canto inferior direito, para
examinar todas as propriedades.
Nome especifica

um nome que identificar o objeto ActiveX para a criao de

scripts. Digite um nome no campo sem ttulo, extrema esquerda do inspetor de
propriedades.
L e U especificam

a largura e altura do objeto, em pixels. Tambm possvel

especificar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas), mm
(milmetros), cm (centmetros) ou % (percentagem da largura e altura do objetopai). As abreviaturas devem se seguir ao valor, sem um espao: por exemplo: 3mm.
Class ID identifica

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
especificado, ele tentar efetuar o seu download a partir do local especificado em
Base.
Incorporar faz

com que o Dreamweaver adicione um tag embed dentro do tag

object do controle ActiveX. Se o controle ActiveX possuir um equivalente ao plugin do Netscape Navigator, o tag embed ativar este plug-in. O Dreamweaver
atribuir os valores digitados como propriedades ActiveX aos equivalentes do
plug-in do Netscape Navigator.
Alinhar determina

como o objeto ser alinhado na pgina. Para obter uma

descrio de cada opo, consulte Como alinhar os elementos na pgina 294.
Parmetros abre

uma caixa de dilogo na qual podero ser digitados parmetros

adicionais, a serem passados ao objeto ActiveX. Consulte Como utilizar os
parmetros na pgina 348. Muitos controles ActiveX respondem a parmetros
especiais.

Orig define

o arquivo de origem dos dados a ser utilizado para um plug-in do

Netscape Navigator, se a opo Incorporar estiver ativa. Se voc no digitar um
valor, o Dreamweaver tentar determinar o valor a partir das propriedades do
ActiveX que j tiverem sido digitadas.
Espao V e Espao H especificam o nmero de pixels de espao em branco acima,
abaixo e em ambos os lados do objeto.

Como inserir mdia

345

Base especifica

a URL que contm o controle ActiveX. O Internet Explorer

efetuar o download do controle ActiveX deste local, se ainda no tiver sido
instalado no sistema do usurio. Se voc no especificar um parmetro Base e o
visitante ainda no dispuser do controle ActiveX necessrio, o navegador no
poder exibir o objeto ActiveX.
Imagem alt especifica

uma imagem a ser exibida, se o navegador no oferecer

suporte ao tag object. Esta opo estar disponvel apenas quando a opo
Incorporar no estiver selecionada.
ID define

o parmetro opcional ID do ActiveX. Este parmetro utilizado mais

freqentemente para passar informaes entre os controles ActiveX.
Dados especifica

um arquivo de dados a ser carregado pelo controle ActiveX.

Muitos controles ActiveX, como o Shockwave e o RealPlayer, no utilizam este
parmetro.

Bordas especifica

a largura da borda ao redor do objeto.

Como inserir um miniaplicativo Java

Java uma linguagem de programao que permite o desenvolvimento de
aplicativos pequenos (miniaplicativos) que podem ser incorporados s pginas da
Web.
Depois de criar o miniaplicativo Java, possvel inseri-lo em um documento
HTML atravs do Dreamweaver. O Dreamweaver utiliza o tag applet para marcar
a referncia ao arquivo do miniaplicativo.
Para inserir um miniaplicativo Java:

346

Captulo 13

Na janela do documento, coloque o ponto de insero onde deseja inserir o

miniaplicativo.

Clique no boto Miniaplicativo, no painel Objetos.

Na caixa de dilogo que aparecer, selecione um arquivo que contenha o

miniaplicativo Java.

Como configurar as propriedades dos miniaplicativos Java

Aps ter inserido um miniaplicativo Java, utilize o inspetor de propriedades para
definir os parmetros. Para exibir as seguintes propriedades no inspetor de
propriedades, selecione um miniaplicativo Java.
Inicialmente, o inspetor de propriedades exibir as propriedades mais comumente
utilizadas. Clique na seta de expanso, situada no canto inferior direito, para
examinar todas as propriedades.
Nome especifica

um nome que identificar o miniaplicativo para a criao de

scripts. Digite um nome no campo sem ttulo, extrema esquerda do inspetor de
propriedades.
L e U especificam

a largura e altura do miniaplicativo, em pixels. Tambm

possvel especificar as seguintes unidades: pc (paicas), pt (pontos), pol (polegadas),
mm (milmetros), cm (centmetros) ou % (percentagem da largura ou altura do
objeto-pai). As abreviaturas devem se seguir ao valor, sem um espao: por
exemplo: 3mm.
Cdigo especifica

o arquivo contendo o cdigo Java do miniaplicativo. Clique no

cone correspondente pasta, para procurar um arquivo, ou digite um nome de
arquivo.

Base identifica

a pasta que contm o miniaplicativo selecionado. Quando voc

escolher um miniaplicativo, este campo ser preenchido automaticamente.
Alinhar determina

como o objeto ser alinhado na pgina. Para obter uma

descrio de cada opo, consulte Como alinhar os elementos na pgina 294.
Alt especifica

um contedo alternativo (geralmente uma imagem) que ser exibido

se o navegador do usurio no oferecer suporte aos miniaplicativos Java ou estiver
com o Java desativado. Se voc digitar texto, o Dreamweaver o interpretar atravs
da utilizao do atributo alt do tag applet. Se voc escolher uma imagem, o
Dreamweaver inserir um tag img entre os tags applet de abertura e finalizao.
Nota: Para especificar um contedo alternativo que possa ser exibido tanto no Netscape
Navigator (com o Java desativado) como no Lynx (um navegador com base em texto),
selecione uma imagem e adicione manualmente um atributo alt ao tag img no inspetor de
cdigo.
Espao V e Espao H especificam

o nmero de pixels de espao em branco acima,

abaixo e em ambos os lados do miniaplicativo.
Parmetros abre

uma caixa de dilogo na qual podem ser digitados parmetros

adicionais a serem passados ao miniaplicativo. Muitos miniaplicativos respondem
a parmetros especiais.

Como inserir mdia

347

Como utilizar os parmetros

Utilize a caixa de dilogo Parmetros para digitar valores relacionados aos
parmetros especiais definidos para os filmes Shockwave e Flash, controles
ActiveX, plug-ins do Netscape Navigator e miniaplicativos Java. Os parmetros
so utilizados com os tags object, embed e applet. Os parmetros definem
atributos especficos para o tipo de objeto a ser inserido. Por exemplo: um objeto
de filme Flash pode possuir um parmetro de qualidade <param name=quality
value=best> para o tag do objeto. A caixa de dilogo Parmetro est disponvel
no inspetor de propriedades. Consulte a documentao do objeto que estiver
utilizando, para obter informaes sobre os parmetros que ele requer.
Nota: No h um padro universalmente aceito para identificar os arquivos de dados dos
controles ActiveX. Consulte a documentao relativa ao controle ActiveX a ser utilizado,
para estabelecer os parmetros a serem empregados.
Para abrir a caixa de dilogo Parmetros:

Selecione um objeto que possa admitir parmetros (como um filme Shockwave,

um controle ActiveX, um plug-in do Navigator ou um miniaplicativo Java) na
janela do documento.

Abra a caixa de dilogo utilizando um dos seguintes mtodos:

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, se ainda no tiver sido aberto, e clique no

boto Parmetros, localizado na parte inferior do inspetor de propriedades.
Certifique-se de que o inspetor de propriedades esteja aberto.
Para digitar um valor de um parmetro na caixa de dilogo Parmetros:

Clique no boto com o sinal de adio (+).

Na coluna Parmetro, digite o nome do parmetro.

Na coluna Valor, digite o valor do parmetro.

Para remover os parmetros:

Selecione um parmetro e pressione o boto com o sinal de subtrao (-).

Para reordenar os parmetros:

Selecione um parmetro e utilize os botes de seta acima e abaixo.

348

Captulo 13

Como utilizar os comportamentos para

controlar os elementos de mdia
possvel adicionar comportamentos pgina, a fim de iniciar e interromper
diversos objetos de mdia.
Controlar o Shockwave ou Flash permite executar, parar, rebobinar ou ir para um
quadro de um filme Shockwave ou Flash. Consulte Controlar o Shockwave ou
Flash na pgina 485.

permite executar um som. Por exemplo: possvel executar um

efeito sonoro sempre que o usurio passar o ponteiro do mouse sobre um link.
Consulte Executar o som na pgina 494.
Executar o som

Verificar o plug-in permite verificar se os visitantes ao seu site j possuem o plug-in

necessrio instalado, em seguida os direciona para outras URLs, dependendo de

eles contarem com o plug-in correto. Isto se aplica somente aos plug-ins do
Netscape, pois o comportamento Verificar o plug-in no verifica os controles
ActiveX. Consulte Verificar o plug-in na pgina 483.

Como inserir mdia

349

350

Captulo 13

14

CAPTULO 14

Como editar o HTML no Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Embora o Macromedia Dreamweaver permita criar e editar visualmente as pginas

da Web, sem a necessidade de o usurio preocupar-se com o cdigo-fonte HTML,
s vezes necessrio acessar o HMTL subjacente da pgina. A possibilidade de
editar o HTML pode lhe proporcionar mais controle ao modificar e solucionar
problemas na pgina da Web.
Por exemplo: suponha que voc selecionou um texto no seu documento e aplicou
uma nova fonte, mas esta apareceu apenas na metade da frase. Ao examinar o
cdigo HTML na visualizao de cdigo do Dreamweaver (ou no inspetor de
cdigo), voc descobre que o tag de finalizao </font> est no meio da frase; basta
mover </font> para o final da frase e o problema ser corrigido.
Uma boa maneira de aprender como funciona o HTML utilizar os recursos de
edio visual, juntamente com a visualizao de cdigo (ou inspetor de cdigo) do
Dreamweaver. possvel comparar o cdigo HTML exibio visual para
examinar como correspondem.
O Dreamweaver fornece acesso ao cdigo HTML atravs da visualizao de
cdigo, do inspetor de cdigo e do Quick Tag Editor. Para obter ajuda na
compreenso e gravao do cdigo HTML, utilize o painel Referncia do
Dreamweaver.
O Dreamweaver tambm permite abrir os arquivos HTML gravados em outro
local, sem a preocupao com o comprometimento do cdigo. O Dreamweaver
utiliza o Roundtrip HTML para garantir que o contedo e a estrutura do HTML
no seja alterada durante a alternncia entre o Dreamweaver e um editor de
HTML externo. Alm disso, o Dreamweaver pode ser utilizado para limpar os
arquivos HTML que contm cdigo ilegvel ou confuso.

351

Como compreender os tags HTML bsicos

Pode ser til ter uma compreenso bsica do HTML ao utilizar o Dreamweaver.
O cdigo HTML e o projeto visual podem ser vistos simultaneamente com
facilidade; isso d ao usurio a oportunidade de entender como funciona o cdigo
HTML. A compreenso e a possibilidade de modificar o cdigo podem ajud-lo a
solucionar problemas em suas pginas da Web. Se voc for iniciante em HTML, as
explicaes abaixo fornecem uma viso geral resumida. Caso voc j conhea o
HTML, passe para a prxima seo.
O HTML uma linguagem de markup de texto. Isto significa que os documentos
HTML contm texto simples com tags de markup especficos, que informam ao
navegador da Web como exibir o texto.
Por exemplo: o tag i controla o texto em itlico. A colocao de <i> no HTML
informa ao navegador que o texto subseqente deve estar em itlico. A colocao
de </i> no HTML informa ao navegador que o texto subseqente deve ser
revertido para o texto padro. O tag com uma barra inclinada para a direita (/)
chamado de tag de finalizao.
Os navegadores da Web interpretam esses tags no documento HTML e exibem o
texto com a formatao adequada. Alguns tags contm atributos que podem
acompanh-los. O alinhamento de uma imagem pode ser especificado dentro do
tag da imagem. Por exemplo: <IMG SRC="image.gif" align="left">. align um
atributo do tag da imagem.
Estrutura de um documento
Cada documento HTML (pgina da Web) deve conter determinados tags padro
head e body. A seo head contm o ttulo da pgina da Web (e os scripts) e na
seo body est o texto que aparecer na pgina, conforme ser exibida no
navegador.
Abaixo, mostrada a estrutura de um documento de amostra:
<html>
<head>
<title>Title goes here</title>
</head>
<body>
<center>
<p>
<font size=+2>Welcome to my page</font>
</p>
<p>
The p is a paragraph tag, which tells the browser that this is all one
paragraph.
</p>
</center>
</body>
</html>

352

Captulo 14

Os tags necessrios para cada documento HTML so html, head e body.

Tags do cabealho
A seo head (envolta por tags head) contm apenas o ttulo da pgina (envolto
pelos tags title ) e os scripts de programao. Por exemplo: cdigo JavaScript que
implementa um cmbio de imagens usando o mouse na pgina.
O texto colocado entre <title> e </title> aparecer no alto da barra de ttulo da
janela do navegador. Mas no ser mostrado na pgina.
Por exemplo: o HTML seguinte resulta na pgina mostrada abaixo:
<html>
<head>
<title>Purcy the cat</title>
</head>

Como editar o HTML no Dreamweaver

353

Tags de corpo do texto

O corpo do texto do documento acomoda o contedo da pgina. Todo o texto,
imagens, tabelas e qualquer outro contedo devem ser colocados entre <body> e </
body>.
<html>
<head>
<title>Purcy the cat</title>
</head>
<body>
<center>
<h2>
Welcome to my home page.
</h2>
<p>
I am a two-year-old part Siamese cat who lives in
San Francisco with my two owners.
</p>
<br>
<img src="cat.gif" width="400" height="250 align=center>
<br>
<p>
I like to eat all kinds of food, especially cheese.
</p>
</center>
</body>
</html>

Todos os tags na seo body do exemplo podem ser utilizados para formatar o
contedo.

354

Captulo 14

Os tags de cabealho ou seja, h1 a h6 marcam o texto como cabealho.

Normalmente, os cabealhos so exibidos na pgina da Web com texto maior ou
mais escuro do que o corpo do texto comum; h1 o tamanho maior e h6 o menor.
necessrio colocar sempre o tag de abertura antes do contedo, seguido de um
tag de finalizao, no final do contedo, como no exemplo abaixo:
<h1>Este um cabealho 1</h1>
Tags de pargrafo (p)

separam o texto em pargrafos. Como os navegadores da

Web quebram automaticamente as linhas e ignoram os retornos de carro, os tags p
devem ser utilizados para evitar que os navegadores exibam o texto inteiro sem
nenhuma separao. O tag p adiciona espao em branco extra entre as linhas.
necessrio colocar sempre o tag de abertura antes do contedo do pargrafo,
seguido do tag de finalizao no final do contedo, como neste exemplo:
<p>
I am a two-year-old Siamese cat who lives in San Francisco with my two owners.
</p>
<p>
I like to eat all kinds of food, especially cheese.
</p>
Tags de quebra de linha (br) foram as quebras de linha na pgina, em vez de
adicionar espao em branco extra, como o tag de pargrafo. Como o tag br insere
uma nica quebra de linha, no necessrio incluir um tag de finalizao.

Tags de quebra
de linha

Espao criado pelas

quebras de linha

Como editar o HTML no Dreamweaver

355

Tags de imagem inserem

imagens na pgina. Um tag de imagem segue o formato

<img src="imagefilename">; o nome do arquivo de imagem deve ser colocado entre

aspas. Os tags de imagem tambm contam com atributos que podem acompanhlos. Por exemplo: width, height, border, align e valign. Os atributos width e height
especificam o tamanho da imagem a ser interpretado pelo navegador; a largura da
borda pode ser definida como 0 ou um nmero maior (como padro, as imagem
contm uma borda quando so utilizadas como links). Os atributos align e valign
definem o alinhamento da imagem: align (para alinhamento horizontal) pode ser
definido como left, right ou center, e valign (alinhamento vertical) como top,
bottom ou middle.
O exemplo a seguir mostra um tag de imagem completo:
<img src="cat.gif" width="400" height="250 align=center>

356

Captulo 14

Tags de formatao de texto

O cdigo-fonte HTML pode ser utilizado para formatar o texto em uma pgina
da Web. possvel especificar negrito ou itlico para o texto, e exibi-lo com uma
determinada fonte. Por exemplo:
<b>This text will appear bold in the Web page</b>.
<i>This text will appear italic in the Web page</i>.
<font face=verdana size=2>This text will display with the
Verdana font face and will be larger than the other text.</font>

Como inserir os comentrios

Um comentrio um texto descritivo, inserido no cdigo HTML para explic-lo
ou fornecer outras informaes. O comentrio aparecer apenas na visualizao de
cdigo (ou no inspetor de cdigo) e no ser exibido na pgina da Web, no
navegador.
Para inserir um comentrio:

Coloque o ponto de insero onde deve ser adicionado o comentrio, na

visualizao de cdigo (ou no inspetor de cdigo) ou na visualizao do projeto.
Consulte Como utilizar a visualizao de cdigo (ou o inspetor de cdigo) na
pgina 361.

Clique no boto Comentrio, na categoria Invisveis do painel Objetos, ou

escolha Inserir > Tags invisveis > Comentrio.

A criao de um comentrio gera o cdigo HTML seguinte:

<!-- Comment text-->

Para exibir os marcadores de comentrios na visualizao do projeto, escolha

Exibir > Auxlios visuais > Elementos invisveis. Certifique-se de que os
comentrios estejam selecionados nas preferncias de elementos invisveis, caso
contrrio, o marcador no aparecer. Para obter mais informaes, consulte
Como definir as preferncias de elementos invisveis na pgina 164.

Como editar o HTML no Dreamweaver

357

Para adicionar um comentrio existente, siga um dos procedimentos abaixo:

Selecione o marcador Comentrios, na visualizao do projeto e digite o texto

no inspetor de propriedades.

Localize o comentrio no cdigo (consulte o exemplo anterior) e adicione o

texto diretamente nesta posio.

Como utilizar o painel Referncia do

Dreamweaver
O painel Referncia uma ferramenta de referncia rpida para os tags HTML,
objetos JavaScript, estilos CSS e seus atributos. Esse painel contm informaes
relativas a tags, objetos ou estilos especficos, utilizados na visualizao de cdigo
(ou no inspetor de cdigo).
Para abrir o painel Referncia:

Selecione o tag, objeto ou estilo na visualizao de cdigo ou do projeto, sobre

o qual devem ser obtidas informaes.

Clique no boto Referncia, na barra de ferramentas (Exibir > Barra de

ferramentas) ou escolha Janela > Referncia.

O painel Referncia aberto e exibe as informaes sobre o tag, objeto ou estilo

selecionado. Para ajustar o tamanho do texto no painel Referncia, selecione Fonte
grande, Fonte mdia ou Fonte pequena, no menu de opes (a seta pequena na
parte superior direita do painel).

358

Captulo 14

O menu pop-up Livro exibe o nome do livro que originou o material de

referncia: OReilly HTML Reference, JavaScript Reference ou CSS Reference.
Para exibir os tags, objetos ou estilos de outro livro, escolha uma opo no menu
Livro.

O menu pop-up Tag, Objeto ou Estilo (dependendo do livro selecionado) exibe o

tag, objeto ou estilo escolhido na visualizao de cdigo (ou no inspetor de
cdigo). Para exibir outras informaes sobre outro tag, objeto ou estilo, selecione
uma nova opo no menu.
Ao lado do menu pop-up Tag, Objeto ou Estilo, h um outro menu que contm
uma lista de atributos para o tag escolhido. A escolha padro Descrio, que
exibe uma descrio do tag selecionado. Pode ser escolhido tambm um atributo
no menu para que sejam exibidas mais informaes sobre essa opo. Os atributos
so utilizados para formatar o contedo no tag. O atributo align pode ser
utilizado para especificar o alinhamento de uma imagem no tag de imagem. Por
exemplo: <img src="image.gif" align="left">.

Como editar o HTML no Dreamweaver

359

Sobre o Roundtrip HTML

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

Como padro, o Dreamweaver regravar os ttulos sobrepostos, fechar os tags

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

Quando a opo Realar o HTML incorreto estiver ativada, o Dreamweaver

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

O Dreamweaver no altera os tags no-reconhecidos incluindo XML

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

O Dreamweaver no altera os tags ColdFusion Markup Language (CFML) ou

Active Server Pages (ASP) da Microsoft, e exibe cones para identificar os blocos
de cdigo CFML ou ASP na janela do documento, quando for possvel.
Consulte Como editar os arquivos ColdFusion e Active Server no
Dreamweaver na pgina 383.

360

Captulo 14

 O Dreamweaver permite iniciar um editor de HTML com base em texto para

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

Como utilizar a visualizao de cdigo (ou o

inspetor de cdigo)
O cdigo-fonte HTML do documento pode ser exibido de vrias maneiras:
apenas a visualizao de cdigo na janela do documento, a janela do documento
pode ser dividida de modo a exibir a visualizao de cdigo e a visualizao do
projeto, ou pode ser aberto o inspetor de cdigo. A visualizao de cdigo e o
inspetor de cdigo funcionam exatamente da mesma maneira, a nica diferena
que o inspetor de cdigo est em uma janela separada. A diviso da janela do
documento para exibir o cdigo facilita a visualizao do projeto, durante a
implementao de alteraes no cdigo HTML.
medida que for adicionado ou alterado o contedo na visualizao do projeto, o
Dreamweaver exibe imediatamente as modificaes na visualizao de cdigo ou
no inspetor de cdigo. Essa caracterstica torna a visualizao de cdigo ou o
inspetor de cdigo uma ferramenta til para aprender o HTML, caso voc ainda
no o conhea, ou para ajud-lo a lembrar da sintaxe ou dos valores corretos para
tags ou atributos especficos. Os tags e scripts HTML so codificados por cores e
podem ser ajustados nas definies de preferncias.
As alteraes ou incluses feitas no cdigo aparecem na visualizao do projeto
somente depois da sincronizao das visualizaes de cdigo e do projeto.
Para sincronizar as visualizaes de cdigo e do projeto:

Clique na visualizao do projeto aps trabalhar em um editor de cdigo, ou

clique no boto Atualizar a visualizao do projeto, na barra de ferramentas.
Escolha Exibir > Barra de ferramentas, para exibir essa barra.
O Dreamweaver nunca regrava o HTML digitado diretamente em um editor de
cdigo. Se for digitado um cdigo invlido e a opo Realar o HTML incorreto
estiver ativada, o Dreamweaver realar o cdigo invlido no editor de cdigo.
Como padro, o realce de erros est ativado nos editores de cdigo. O realce de
erros sempre aparece na visualizao do projeto, mesmo quando Realar o HTML
incorreto estiver desativado na visualizao de cdigo.

Como editar o HTML no Dreamweaver

361

Como abrir a visualizao de cdigo (ou o inspetor de cdigo)

O cdigo-fonte HTML pode ser exibido de vrias maneiras: atravs da exibio do
cdigo e do projeto na janela do documento, da exibio apenas do cdigo e da
abertura do inspetor de cdigo.
Para exibir as visualizaes de cdigo e do projeto:

Escolha Exibir > Cdigo e projeto, ou clique no boto Mostrar as visualizaes de

cdigo e do projeto, na barra de ferramentas.
O cdigo HTML aparece no painel superior e a visualizao do projeto no painel
inferior.
O tamanho dos painis pode ser ajustado arrastando a barra de diviso.

362

Captulo 14

Para ajustar a diviso das visualizaes de cdigo e do projeto, siga um dos

procedimentos abaixo:

Para exibir a visualizao do projeto na parte superior, escolha Exibir >

Visualizao do projeto no alto. Uma alternativa selecionar visualizao do
projeto no alto, no menu pop-up Opes da barra de ferramentas.

Para exibir apenas o cdigo HTML na janela do documento, escolha Exibir >
Cdigo, ou clique no boto Mostrar a visualizao de cdigo, na barra de
ferramentas .

Para exibir apenas o projeto visual, escolha Exibir > Projeto, ou clique no boto
Mostrar a visualizao do projeto, na barra de ferramentas.
Se voc preferir trabalhar com o cdigo HTML em uma janela separada, utilize o
inspetor de cdigo para exibi-lo.
Para abrir o inspetor de cdigo, siga um dos procedimentos abaixo:

Escolha Janela > Inspetor de cdigo.

Clique no cone de inspetor de cdigo, na barra do Iniciador (no canto inferior
direito da janela do documento).

Pressione a tecla F10.

Para alternar entre a janela do documento e o inspetor de cdigo:

Pressione as teclas Control e de tabulao (no Windows), ou Option e de

tabulao (no Macintosh).

Como editar o HTML no Dreamweaver

363

Como definir as opes da visualizao de cdigo (ou do

inspetor de cdigo)
No menu Opes dos editores de cdigo, podem ser definidos a quebra
automtica de linhas, o recuo do cdigo, a sinalizao da sintaxe por cores e muito
mais.
Para acessar o menu Opes, a visualizao de cdigo (ou o inspetor de cdigo)
deve estar ativa. Clique na visualizao de cdigo (ou no inspetor de cdigo) para
ativ-la.

Para definir as opes da visualizao de cdigo (ou do inspetor de cdigo):

Acesse as opes seguindo um dos procedimentos abaixo:

Clique no menu pop-up Opes, na barra de ferramentas. Escolha Exibir >

Barra de ferramentas, para exibir essa barra.

Escolha Exibir > Opes da visualizao de cdigo.

O menu Opes tambm est disponvel no alto do inspetor de cdigo.
2

Defina as opes desejadas:

Quebra automtica de linha, segmenta o texto de modo que esteja visvel sem a
necessidade de rolagem horizontal. Essa definio no insere quebras de linha,
mas facilita a exibio do cdigo.

Nmeros de linhas adiciona nmeros s linhas lateralmente.

Realar o HTML incorreto ativa o realce de erros. Quando Realar o HTML
incorreto est ativado, o Dreamweaver reala o HTML invlido (isto , que o
programa no oferece suporte) em amarelo. Quando um tag invlido for
selecionado, o Dreamweaver informar como corrigir o erro no inspetor de
propriedades.

Sinalizao da sintaxe por cores marca as diferentes partes do cdigo com cores,
de modo que os vrios elementos possam ser identificados rapidamente. Para
alterar as cores, consulte Preferncias de cores de cdigo na pgina 374.

Recuo automtico recua automaticamente o cdigo. Para alterar o espaamento

do recuo ou os tags que produzem recuo automtico, consulte Preferncias de
formato de cdigo na pgina 375.

364

Captulo 14

Como gravar e editar o cdigo

Durante a gravao e edio do cdigo na visualizao de cdigo (ou no inspetor
de cdigo), linhas especficas do cdigo podem ser recuadas ou verificados os tags
para garantir que esto ajustados. O recuo de uma linha ou seo especfica do
cdigo ajuda a separ-lo do restante, facilitando a sua localizao. A verificao dos
tags para ver se esto ajustados ajuda a garantir que todos contm tags de abertura
e finalizao. Esse procedimento especialmente til quando diversos nveis de
alinhamento forem utilizados no cdigo por exemplo: quando vrias tabelas
forem aninhadas em outras tabelas.
Para recuar o cdigo selecionado:

Escolha uma ou mais linhas de cdigo a serem recuadas.

Para que o recuo funcione, a linha inteira deve estar selecionada.

Escolha Editar > Recuar o cdigo.

O cdigo ser recuado. Escolha Editar > Remover o recuo do cdigo para retornar
o cdigo recuado posio inicial.
Para verificar o ajuste dos tags:

Coloque o ponto de insero no cdigo aninhado a ser verificado.

Escolha Editar > Selecionar o tag-pai.

Os tags correspondentes de abertura e finalizao sero realados no cdigo. A
nova escolha de Editar > Selecionar o tag-pai realar os tags correspondentes
que envolvem a seleo anterior.

Como inserir os scripts

Os scripts podem ser gravados ou inseridos na visualizao de cdigo (ou no
inspetor de cdigo), ou JavaScript e VBScript serem digitados na visualizao do
projeto sem precisar utilizar a visualizao de cdigo. Os arquivos de script podem
ser abertos na visualizao de cdigo do Dreamweaver. O Dreamweaver no altera
nem regrava o arquivo. Para obter mais informaes, consulte Como abrir e
editar os arquivos no-HTML no Dreamweaver na pgina 368.
Para exibir os marcadores de script na janela do documento, escolha Exibir >
Auxlios visuais > Elementos invisveis. Consulte tambm Como definir as
preferncias de elementos invisveis na pgina 164.

Como editar o HTML no Dreamweaver

365

Para inserir um script na visualizao de cdigo ou do projeto:

Coloque o ponto de insero onde o script deve ser colocado.

Clique no boto Script, no painel Objetos, ou escolha Inserir > Tags invisveis >
Script.

Na caixa de dilogo que aparecer, escolha a linguagem de script no menu popup Linguagem.
Se voc utilizar o JavaScript e no tiver certeza de sua verso, escolha JavaScript
em vez de JavaScript1.1 ou JavaScript1.2.

Digite o cdigo do script na caixa de texto Contedo.

Para vincular a um arquivo de script externo:

Siga as etapas 1 a 3 acima.

Clique em OK, deixando em branco a caixa de texto Contedo.

Selecione o marcador de script na visualizao do projeto, na janela do

documento.
Escolha Exibir > Auxlios visuais > Elementos invisveis para exibir o marcador.
Verifique se os scripts esto selecionados nas preferncias de elementos
invisveis, caso contrrio, o marcador de script no aparecer. Para obter mais
informaes, consulte Como definir as preferncias de elementos invisveis na
pgina 164.

No inspetor de propriedades, clique no cone de pasta para procurar e

selecionar o arquivo de script externo, ou digite o nome do arquivo na caixa
Orig.

Como editar um script

Um script pode ser editado em um editor de cdigo ou na visualizao do projeto.
Para editar o script na visualizao de cdigo:

Localize o script na visualizao de cdigo e edite-o diretamente. A seleo do

marcador de script na visualizao do projeto realar o script na visualizao de
cdigo.
Para editar o script na visualizao do projeto:

366

Captulo 14

Selecione o marcador de script.

No inspetor de propriedades, clique no boto Editar.

Se tiver sido estabelecido um link com um arquivo de script externo, o arquivo

ser aberto automaticamente na visualizao de cdigo, onde podem ser feitas as
edies. Caso contrrio, a caixa de dilogo Propriedades do script ser aberta e o
script poder ser editado na caixa de texto Script.
Nota: Se no houver nenhum cdigo entre os tags script, a caixa de dilogo
Propriedades do script ser aberta, mesmo que haja tambm um link para um arquivo de
script externo.

As propriedades seguintes aparecem na caixa de dilogo Propriedades do script (e

no inspetor de propriedades) quando um marcador de script for selecionado:

Linguagem especifica JavaScript ou VBScript como a linguagem do script.

Tipo especifica o tipo de script, de cliente ou de servidor.
Origem especifica um arquivo de script vinculado externamente. Clique no
cone de pasta para escolher o arquivo ou digite o caminho.

Script especifica onde o script ser editado/gravado.

Para verificar se as chaves esto ajustadas:

Coloque o ponto de insero no cdigo aninhado a ser verificado.

Escolha Editar > Ajustar as chaves.

Os tags correspondentes de abertura e finalizao sero realados no cdigo. A
nova escolha de Editar >Ajustar as chaves realar os tags correspondentes que
envolvem a seleo anterior.

Como editar o HTML no Dreamweaver

367

Como exibir as funes de script

Todas as funes de script JavaScript ou VB Script no cdigo podem ser exibidas
no menu pop-up Navegao do cdigo, na barra de ferramentas (Exibir > Barra de
ferramentas).
Para exibir as funes de script:

Clique no boto Navegao do cdigo, na barra de ferramentas.

Se o cdigo contiver funes JavaScript ou VB Script, elas aparecero no menu.

Para ver a lista de funes em ordem alfabtica, mantenha pressionado Control
(no Windows), ou Option (no Macintosh) e clique no boto Navegao do
cdigo.
Para ir at uma funo no cdigo:

Selecione uma funo no menu pop-up Navegao do cdigo. A funo ser

realada na visualizao de cdigo (ou no inspetor de cdigo).

Como abrir e editar os arquivos no-HTML

no Dreamweaver
Quando aberto um arquivo no-HTML (.js, por exemplo) no Dreamweaver, o
programa no o altera. Esses arquivos so abertos na visualizao de cdigo (ou no
inspetor de cdigo), com a visualizao do projeto desativada. O arquivo pode ser
editado e salvo como um arquivo HTML ou no-HTML.
O Dreamweaver pode ser definido para abrir automaticamente os arquivos noHTML com determinadas extenses, como padro. Por exemplo: as preferncias
podem ser definidas de modo a que os arquivos .js sejam abertos automaticamente
na visualizao de cdigo (ou no inspetor de cdigo).

368

Captulo 14

Para definir as preferncias padro para os arquivos no-HTML:

Escolha Editar > Preferncias, em seguida, selecione Tipos de arquivos/editores.

No campo Abrir da visualizao de cdigo, digite as extenses de nome de

arquivo que sero abertas automaticamente nessa visualizao. Coloque um
espao entre cada tipo de arquivo.

As extenses de arquivo padro listadas so .js, .txt e .asa. Podem ser includas
quantas o usurio quiser.

Como editar um tag HTML na visualizao

do projeto
Utilize o Quick Tag Editor para verificar e editar rapidamente a origem de HTML
de um nico tag na visualizao do projeto, sem ter de alternar para a visualizao
de cdigo e voltar. A maneira mais fcil de abrir o Quick Tag Editor
pressionando as teclas Control e T (no Windows), ou Command e T (no
Macintosh).
O Quick Tag Editor dispe de trs modos:

Inserir o HTML, utilizado para incluir o novo cdigo HTML

Editar o tag, utilizado para editar um tag existente
Colocar o tag ao redor, utilizado para envolver com um novo tag a seleo
Na visualizao do projeto, a seleo determinar o modo de abertura do Quick
Tag Editor. Nos trs modos, a operao bsica do Quick Tag Editor a mesma:
abra o editor, digite ou edite os tags e atributos e, em seguida, feche-o.
Se for utilizado qualquer HTML invlido no Quick Tag Editor, o Dreamweaver
tentar corrigi-lo, inserindo aspas de finalizao e sinais de maior, onde for
necessrio.
Para executar uma edio de HTML mais extensa, utilize a visualizao de cdigo
(ou o inspetor de cdigo).

Como editar o HTML no Dreamweaver

369

Para abrir o Quick Tag Editor no modo Inserir o HTML:

Clique na visualizao do projeto, para colocar o ponto de insero onde o

cdigo dever ser includo.

Pressione as teclas Control e T (no Windows), ou Command e T (no

Macintosh), ou clique no boto Quick Tag Editor, no inspetor de propriedades.
O Quick Tag Editor aberto.

Digite o tag HTML e, em seguida, pressione Enter.

O tag inserido no cdigo. Pressione a tecla Esc, para sair sem fazer alteraes.

Para abrir o Quick Tag Editor no modo Editar o tag:

Selecione o texto ou objeto que est sendo editado na visualizao do projeto.

O tag a ser editado tambm pode ser selecionado no seletor de tags, na parte
inferior da janela do documento.

Pressione as teclas Control e T (no Windows), ou Command e T (no

Macintosh), ou clique no boto Quick Tag Editor, no inspetor de propriedades.
O Quick Tag Editor aberto.

Digite atributos novos ou edite os j existentes, ou edite o nome do tag e, em

seguida, pressione Enter.
O tag editado inserido no cdigo. Pressione a tecla Esc, para sair sem fazer
alteraes.

370

Captulo 14

Para abrir o Quick Tag Editor no modo Colocar o tag ao redor:

Selecione um texto ou objeto no formatado.

Se for selecionado um texto ou objeto que inclua um tag HTML de abertura
ou finalizao, o Quick Tag Editor ser aberto no modo Editar o tag.

Pressione as teclas Control e T (no Windows), ou Command e T (no

Macintosh), ou clique no boto Quick Tag Editor, no inspetor de propriedades.
O Quick Tag Editor aberto.

Digite um nico tag de abertura <font="verdana">, por exemplo, e pressione a

tecla Enter.
O tag inserido no incio da seleo e o tag de finalizao correspondente
colocado no final. Pressione a tecla Esc, para sair sem fazer alteraes.

Para aplicar imediatamente as alteraes:

Aps a edio de um tag, pressione a tecla de tabulao ou as teclas Shift e de

tabulao. As alteraes so aplicadas imediatamente, ao invs de quando o
usurio sai do Quick Tag Editor.
Para evitar esse comportamento, desmarque a opo Aplicar as alteraes durante
a edio nas preferncias do Quick Tag Editor. Consulte Como definir as
preferncias do Quick Tag Editor na pgina 373.
Nota: Quando a seleo da opo Aplicar a alteraes ao editar cancelada, vrias
alteraes aplicadas de uma s vez aparecem como uma nica etapa no painel Histrico e
so desfeitas com apenas uma operao Refazer.
Para alternar entre os modos do Quick Tag Editor:

Com o Quick Tag Editor ativo, pressione as teclas Control+T (no Windows), ou
Command+T (no Macintosh).
O Quick Tag Editor altera os modos Inserir o HTML, Editar o tag e Colocar o tag
ao redor, sempre que o atalho de teclado for utilizado.
Para mover o Quick Tag Editor na tela:

Arraste a ala do editor (onde aparece o nome do modo).

Como editar o HTML no Dreamweaver

371

Como utilizar o menu de sugestes

No Quick Tag Editor, possvel acessar um menu de sugestes de atributos que
lista todos os atributos vlidos do tag que est sendo editado ou inserido. Se o
Dreamweaver no reconhecer o tag que estiver sendo editado, o menu de
sugestes conter todos os atributos que o Dreamweaver reconhece para qualquer
tag. O menu de sugestes no aparecer, caso a opo Ativar a sugesto de tags
estiver desmarcada nas preferncias do Quick Tag Editor.

Para ver uma lista dos atributos vlidos para um tag que est sendo editado:

Faa uma pausa de alguns segundos durante a edio de um nome de atributo.

Aparecer um menu de sugestes, que lista todos os atributos vlidos para o tag
que est sendo editado. Controle o menu de sugestes das seguintes maneiras:

Quando a digitao de um nome de atributo iniciada, o menu de sugestes

rolado e reala o primeiro nome de atributo que comece com as letras digitadas.

Para mover o realce para cima ou para baixo no menu, utilize as teclas de seta
para cima e para baixo, ou a barra de rolagem.

Para escolher o nome do atributo realado, pressione a tecla Enter (no

Windows), ou a tecla Return (no Macintosh). Uma alternativa clicar duas
vezes em um nome de atributo no menu.

Para fechar a lista de sugestes sem escolher qualquer entrada, pressione Esc, ou
continue a digitao.
Quando ocorrer uma pausa durante a digitao ou edio de um nome de tag,
aparecer um menu suspenso de sugestes semelhante, com uma lista de nomes
de tags, em vez de nomes de atributos.
Os tags e atributos que aparecem no menu de sugestes tm origem no arquivo
TagAttributeList.txt, que est na pasta Dreamweaver/Configuration. Se voc for
um usurio experiente no Dreamweaver e quiser adicionar ou remover tags do
menu de sugestes, possvel editar esse arquivo. Consulte Como abrir e editar
os arquivos no-HTML no Dreamweaver na pgina 368.
Para editar os valores de atributos existentes no modo Editar o tag:

Pressione a tecla de tabulao para mover-se para frente, de um item para outro,
at que o atributo (ou tag) a ser editado aparea selecionado. Pressione as teclas
Shift e de tabulao, para voltar ao nome do atributo, valor do atributo ou nome
do tag anterior.

372

Captulo 14

Para adicionar um novo atributo ao tag:

Utilize a tecla de tabulaao, as teclas de seta e a barra de espao para mover o

ponto de insero at a posio na qual o atributo ser inserido.

Digite um nome de atributo vlido para o tag.

Se ocorrer uma pausa na digitao, aparecer o menu de sugestes.

Como remover um tag

O tag de um documento pode ser removido, mantendo o seu contedo (se
houver) na mesma posio.
Para remover um tag:

Siga um dos procedimentos abaixo:

Selecione o tag, no seletor de tags, no canto inferior esquerdo da janela do

documento.

Selecione algo na janela do documento, ou clique, para colocar o ponto de

insero na janela.
2

Clique com o boto direito do mouse (no Windows), ou pressione Control e

clique (no Macintosh) na visualizao do projeto, e escolha Remover o tag, no
menu contextual.

Como definir as preferncias do Quick Tag Editor

As preferncias do Quick Tag Editor permitem controlar se as edies feitas
utilizando esse editor so atualizadas automaticamente na janela do documento.
Os controles para o menu de sugestes tambm podem ser ajustados. Para exibir
essas preferncias, escolha Editar > Preferncias e selecione Quick Tag Editor.
Aplicar as alteraes durante a edio controla

se as alteraes do Quick Tag

Editor sero atualizadas automaticamente no documento, enquanto voc percorre
os atributos, no modo Editar o tag. Se esta opo for desativada, ser necessrio
pressionar a tecla Enter, para aplicar as alteraes no documento. Esta opo
ignorada nos modos Inserir o HTML e Colocar o tag ao redor; nesses modos, a
tecla Enter deve sempre ser pressionada, para aplicar as alteraes no documento.

Ativar a sugesto de tags controla se o menu de sugestes ser exibido durante a

digitao no Quick Tag Editor. O limite de tempo tambm pode ser ajustado
antes da exibio do menu para o tag ou atributo.

Como editar o HTML no Dreamweaver

373

Como definir as preferncias de formatao

de cdigo
As seguintes preferncias de formatao de cdigo-fonte HTML podem ser
definidas no Deamweaver:

As preferncias de cores de cdigo controlam como os tags HTML (e o texto

entre eles) e os scripts sero codificados utilizando cores na visualizao de
cdigo ou no inspetor de cdigo. Consulte Preferncias de cores de cdigo na
pgina 374.

As preferncias de formato de cdigo determinam as opes comuns de

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

As preferncias de regravao de cdigo determinam quais alteraes, se houver,

o Dreamweaver far no cdigo quando um documento HTML ou de script for
aberto. Consulte Preferncias de regravao de cdigo na pgina 377.

As preferncias de fontes/codificao permitem especificar a fonte com a qual o

cdigo aparecer na visualizao de cdigo (ou no inspetor de cdigo).
Consulte Como definir as preferncias de fontes/codificao na pgina 93.
Finalmente, o arquivo SourceFormat.txt (na pasta Dreamweaver/Configuration)
fornece especificaes precisas para a formatao de cdigo. A edio desse arquivo
em um editor de texto lhe possibilita o mais alto grau de controle sobre a maneira
pela qual o Dreamweaver grava o cdigo; possvel alterar determinadas opes
especficas a tags nesse arquivo, que no poderiam ser modificadas utilizando as
preferncias de formato de cdigo. Contudo, no edite esse arquivo a menos que
voc seja um usurio ou programador avanado do Dreamweaver, porque poderia
produzir erros no programa. Consulte Como alterar a formatao HTML
padro na pgina 569.
Preferncias de cores de cdigo
Utilize as preferncias de cores de cdigo para controlar as cores de fundo, texto,
tag e das palavras-chave reservadas na visualizao de cdigo (ou no inspetor de
cdigo). Para trabalhar com essas preferncias, escolha Editar > Preferncias e
selecione Cores de cdigo.
Fundo especifica

a cor de fundo da visualizao de cdigo (ou do inspetor de

cdigo). Essa cor aparecer apenas quando o usurio clicar ou digitar na
visualizao de cdigo ou no inspetor de cdigo.
Texto especifica

a cor do texto que aparece entre os tags. Por exemplo: no

cdigo <b>algum texto</b>, a palavra texto aparece na cor especificada para o
texto, mas no os tags. Para anular a cor do texto de um tag especfico, selecione a
opo Incluir o contedo.

374

Captulo 14

Comentrios especifica

a cor para os tags de comentrios (<!--

-->)

e seus

contedos.
Padro do tag especifica

a cor para todos os tags exceto os de comentrios. Para

anular essa cor, defina a opo Especfico ao tag.
Palavras-chave reservadas especifica a cor de todas as palavras-chave reservadas.
Para anular essa cor, defina a opo Especfico ao tag.
Outras palavras-chave especifica a cor de todas as outras palavras-chave. Para
anular essa cor, defina a opo Especfico ao tag.
Seqncias de caracteres especifica

a cor de todas as seqncias no cdigo. Para

anular essa cor, defina a opo Especfico ao tag.
permite anular as outras definies de cores, especificando cores
para tags especficos.
Especfico ao tag

Para definir uma cor de um tag especfico:

Selecione um tag, na caixa Especfico ao tag.

Pressione a tecla Shift e clique para selecionar tags adjacentes. Para selecionar
tags no-adjacentes, mantenha pressionada a tecla Control (no Windows), ou a
tecla Command (no Macintosh) e, em seguida, clique.

Clique no boto de opo ao lado da amostra de cor, na parte inferior do

painel, e utilize um dos seguintes mtodos para escolher um novo valor de cor:

Clique na amostra de cor e selecione outra cor na paleta de cores aceitas pelo
navegador ou no seletor de cores do sistema.

No campo de texto ao lado da amostra, digite um valor hexadecimal.

3

Para colorir o texto entre os tags de abertura e de finalizao, selecione Aplicar a

cor ao contedo do tag.

Preferncias de formato de cdigo

Utilize as seguintes preferncias de formato de cdigo para controlar a formatao
de cdigo, como recuo, tamanho da linha, e caixa alta ou baixa para os nomes de
tags e atributos. Para obter informaes sobre os controles de formatao de
cdigo adicionais, consulte Como alterar a formatao HTML padro na
pgina 569.
Observe que todas as preferncias, exceto Anular a caixa de, afetam apenas os
novos documentos e incluses feitas nos documentos existentes. Ou seja, quando
um documento HTML que tiver sido criado anteriormente for aberto, estas
opes de formatao no sero aplicadas a ele; para reformatar os documentos
HTML existentes, utilize o comando Aplicar a formatao de origem. Consulte
Como formatar o cdigo-fonte HTML nos documentos existentes na
pgina 379.

Como editar o HTML no Dreamweaver

375

Recuo ativa

o recuo de todos os tags marcados com indent no arquivo

SourceFormat.txt. Consulte Como alterar a formatao HTML padro na
pgina 569.
Utilizar especifica

se os recuos sero feitos com espaos ou tabulaes.

Linhas e colunas da tabela recua

automaticamente os tags tr e td para facilitar a

leitura do cdigo da tabela. A opo Recuo deve estar selecionada para que
funcione.
Molduras e conjuntos de molduras recua automaticamente os tags frame e frameset

aninhado para facilitar a leitura dos arquivos de conjunto de molduras. A opo

Recuo deve estar selecionada para que esta opo funcione.
Tamanho do recuo determina o tamanho dos recuos. O tamanho medido em
espaos se a opo Utilizar estiver definida para espaos ou tabulaes,
respectivamente.
Tamanho da tabulao determina

o tamanho das tabulaes (medido em

caracteres de espaos).
Quebra automtica de linha adiciona

uma quebra de linha incondicional quando

uma linha atinge a largura de coluna especificada. 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 especificao na opo Quebra automtica de linha.
De modo contrrio, a caixa de seleo Quebra automtica de linha, na
visualizao de cdigo (ou no inspetor de cdigo), adiciona uma quebra
condicional s linhas que ultrapassarem a largura da janela.

Quebras de linha especifica

o tipo de servidor remoto (Windows, Macintosh ou

UNIX) que serve de host para o site remoto. A escolha do tipo adequado dos
caracteres de quebra de linha assegura que o cdigo-fonte HTML aparecer
corretamente quando exibido no servidor remoto. Observe que, para o FTP, essa
definio aplica-se apenas ao modo de transferncia binria; o modo de
transferncia ASCII do Dreamweaver ignora esse parmetro. Quando efetuado o
download dos arquivos no modo ASCII, o Dreamweaver define as quebras de
linha com base no sistema operacional do computador; se for efetuado upload dos
arquivos no modo ASCII, todas as quebras de linha sero definidas para CR LF.
Essa definio tambm til quando se est trabalhando com um editor de texto
externo que reconhece apenas determinados tipos de quebras de linha. Por
exemplo: utilize CR LF (no Windows), se o Bloco de Notas for o editor externo e,
no Macintosh, utilize CR, no caso do SimpleText.
Caixa dos tags e Caixa dos atributos controlam

a caixa alta ou baixa dos nomes de

tags e atributos. Estas opes so aplicadas a tags e atributos inseridos ou editados
na janela do documento, mas no aos inseridos diretamente na visualizao de
cdigo (ou no inspetor de cdigo), ou queles inseridos em um documento
quando este for aberto (a menos que uma ou ambas as opes em Ignorar a caixa
de estejam selecionadas).

376

Captulo 14

Ignorar a caixa de: Tags e Atributos especifica se as opes de caixa definidas sero
implementadas sempre, inclusive quando for aberto um documento HTML
existente. Quando uma destas opes for selecionada, todos os tags ou atributos
nos documentos abertos sero imediatamente convertidos para a caixa
especificada, bem como todos os tags ou atributos abertos daqui em diante (at
que seja cancelada novamente esta opo). Os tags ou atributos digitados na
visualizao de cdigo (ou no inspetor de cdigo) e no Quick Tag Editor tambm
sero convertidos para a caixa especificada, da mesma forma que os tags e atributos
inseridos utilizando o painel Objetos. Por exemplo: se desejar que os nomes de
tags sejam convertidos sempre em letras minsculas, especifique minsculas, em
Caixa do tag e, em seguida, selecione a opo Ignorar a caixa de: Tags. Em seguida,
quando for aberto um documento que contenha nomes de tags em maisculas, o
Dreamweaver os converter em minsculas.
Centralizao especifica

se os elementos devem ser centralizados utilizando div

ou center. Ambos fazem parte da especificao HTML 4.0
Transitional, mas center conta com suporte de um nmero maior de navegadores.
align="center"

Preferncias de regravao de cdigo

As preferncias de regravao de HTML determinam as aes do Dreamweaver
quando abre os documentos HTML ou de script. Essas preferncias no tm
efeito quando o HTML ou os scripts so editados na visualizao de cdigo ou no
inspetor de cdigo. Se estas opes forem desativadas, o Dreamweaver exibir itens
de markup invlidos na janela do documento para o HTML que seria regravado.
Se um documento HTML for importado do Microsoft Word, poder ser utilizado
o comando Limpar o HTML do Word, para remover os cdigos HTML
desnecessrios. Para obter mais informaes, consulte Como limpar o HTML do
Microsoft Word na pgina 379.
Ajustar os tags abertos e aninhados incorretamente regrava

os tags sobrepostos.
Por exemplo: <b><i>text</b></i> ser regravado como <b><i>text</i></b>. Esta
opo tambm inserir aspas e colchetes de finalizao, se estiverem faltando.
Remover os tags adicionais de finalizao exclui

os tags de finalizao sem os

correspondentes de abertura.
Advertir quando resolver ou remover tagsexibe

um resumo dos HTMLs

tecnicamente invlidos que o Dreamweaver tentou corrigir. O resumo contm o
local do problema (sob a forma de nmeros de linha e coluna), para que seja
localizada a correo e assegurada a sua interpretao adequada.
Nunca regravar o HTML: Em Arquivos com extenses permite

fazer com que o

Dreamweaver no regrave o HTML nos arquivos com a extenso de nome de
arquivo especificada. Esta opo particularmente til para os tipos de arquivos
que contm tags de outros fabricantes (como os tags ASP). Para obter mais
informaes, consulte Como impedir a regravao de tags de outros fabricantes
na pgina 582.

Como editar o HTML no Dreamweaver

377

As duas opes de Caracteres especiais permitem controlar a codificao do

Dreamweaver de certos caracteres em determinados contextos. Em geral, melhor
manter essas opes selecionadas, a menos que os arquivos contenham tags
especficos de outros fabricantes, que utilizam esses caracteres. Para obter mais
informaes sobre estas opes, consulte Como impedir a regravao de tags de
outros fabricantes na pgina 582.

Como limpar o cdigo-fonte HTML

Utilize o comando Limpar o HTML, para remover os tags vazios, combinar os
tags font aninhados e aprimorar o cdigo HTML confuso ou ilegvel.
Para limpar o cdigo-fonte HTML:

Abra um documento existente e escolha Comandos > Limpar o HTML.

Na caixa de dilogo que aparecer, escolha dentre as seguintes opes:

Remover os tags vazios remove os tags sem contedo entre eles. Por exemplo:
<b></b> e <font color="FF0000"></font> so considerados tags vazios, mas no o
tag <b> em <b>algum texto</b>.

Remover os tags aninhados redundantes remove todas as ocorrncias

redundantes de um tag. Por exemplo: no cdigo <b>Isto <b>exatamente </b>
os tags b em volta da palavra exatamente so
redundantes e seriam removidos.

o que gostaria de dizer</b>,

Remover os comentrios de HTML no pertencentes ao Dreamweaver remove

todos os comentrios que no tiverem sido inseridos pelo Dreamweaver. Por
exemplo: <!--begin body text--> seria removido, mas no <!-- #BeginEditable
"doctitle" --> (porque um comentrio do Dreamweaver que marca o incio
de uma regio editvel em um modelo).

Remover os comentrios de HTML pertencentes ao Dreamweaver remove

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

Remover tag(s) especfico(s) remove os tags especificados no campo de texto

adjacente. Utilize esta opo para remover os tags personalizados, inseridos por
outros editores visuais, e outros tags, que voc no deseja que apaream no seu
site (por exemplo: blink). Separe vrios tags com vrgulas (por exemplo: font,
blink).

378

Captulo 14

 Combinar os tags <font> aninhados sempre que possvel consolida dois ou mais
tags font, quando eles controlarem a mesma faixa de texto. Por exemplo: <font
size="7"><font color="#FF0000">grande e vermelho</font></font> seria alterado
para <font size="7" COLOR="#FF0000">grande e vermelho</font>.

Mostrar o registro quando concluir exibe uma caixa de alerta com os detalhes
sobre as alteraes feitas no documento logo que a limpeza terminar.
3

Clique em OK.
Dependendo do tamanho do documento e do nmero de opes selecionadas,
a limpeza poder demorar alguns segundos.

Como formatar o cdigo-fonte HTML nos documentos

existentes
As opes de formatao da origem de HTML especificadas nas preferncias de
formato HTML e no arquivo SourceFormat.txt sero aplicadas apenas aos novos
documentos criados com o Dreamweaver subseqentemente. Para aplicar as
opes de formatao nos documentos HTML existentes, utilize o comando
Aplicar a formatao de origem..
Para aplicar as opes de formatao da origem de HTML a um documento j
existente:

Escolha Arquivo > Abrir, para abrir um arquivo HTML existente na janela do
documento.

Escolha Comandos > Aplicar a formatao de origem.

Como limpar o HTML do Microsoft Word

Os documentos salvos como arquivos HTML no Microsoft Word podem ser
abertos no Dreamweaver e, em seguida, possvel utilizar o comando Limpar o
HTML do Word, para remover o cdigo HTML no correspondente, gerado pelo
Word. O cdigo que o Dreamweaver remove basicamente utilizado pelo Word
para formatar e exibir os documentos no Word, no sendo necessrio exibio do
arquivo HTML. Guarde uma cpia de segurana do arquivo original do Word
(.doc), porque talvez no seja possvel reabrir o documento HTML no Word aps
a aplicao do recurso Limpar o HTML do Word. O comando Limpar o HTML
do Word est disponvel para os documentos salvos como arquivos HTML no
Word 97 ou mais avanado.

Como editar o HTML no Dreamweaver

379

Para limpar o HTML do Word:

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, se a
opo Advertir ao ajustar ou remover os tags estiver selecionada nas preferncias
de regravao de HTML. Isso no faz parte do recurso Limpar o HTML do
Word. Clique em Continuar, para sair da caixa de dilogo. No Dreamweaver,
escolha Comandos >Limpar o HTML do Word.
3

Qualquer um dos mtodos produzir uma pequena demora enquanto o

Dreamweaver tenta determinar a verso do Word utilizada para salvar o
arquivo. Se o Dreamweaver no puder detect-la, selecione a verso correta
utilizando o menu pop-up.

Escolha quais opes o recurso Limpar o HTML do Word deve utilizar. A guia
Bsica exibe as seguintes opes:

Remover todo o markup especfico ao Word remove todo o HTML especfico

ao Word, inclusive o XML dos tags html, os dados meta personalizados do
Word e os tags de links no cabealho do documento, o markup XML do Word,
os tags condicionais e seus contedos, alm dos pargrafos vazios e margens dos
estilos. Cada uma dessas opes pode ser escolhida individualmente usando a
guia Detalhes.

Limpar as CSS remove todas as CSS especficas 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 definies de estilo no utilizadas do cabealho. Esta opo pode ser
ainda mais personalizada usando a guia Detalhes.

Limpar os tags <font> remove os tags HTML, convertendo o corpo do texto

padro para o tamanho 2 HTML.

Ajustar os tags aninhados incorretamente remove os tags do markup font

inseridos pelo Word, fora dos tags de pargrafo e cabealho (nvel de bloco).

Definir a cor do fundo insere um valor hexadecimal, para definir a cor do

fundo do documento. Se no for definida uma cor de fundo, o documento
HTML do Word ter um fundo cinza. O valor hexadecimal padro definido
pelo Dreamweaver branco.

380

Captulo 14

 Aplicar a formatao de origem aplica no documento as opes de formatao

da origem especificadas nas preferncias de formato HTML e no
SourceFormat.txt..

Mostrar o registro quando concluir exibe uma caixa de alerta com os detalhes
sobre as alteraes feitas no documento logo que a limpeza terminar.
5

Clique em OK.
Dependendo do tamanho do documento e do nmero de opes selecionadas,
a limpeza poder demorar alguns segundos. As preferncias escolhidas sero
automaticamente salvas como definies padro de Limpar o HTML do Word.

Como utilizar os editores de HTML externos

Talvez seja conveniente utilizar um editor de texto para colocar manualmente os
cdigos em grande quantidades de HTML, JavaScript ou VBScript. Qualquer
editor de texto externo pode ser utilizado com o Dreamweaver, incluindo o Bloco
de Notas (incorporado ao Windows 95 e NT) ou o SimpleText (incorporado ao
Macintosh), BBEdit, HomeSite, vi, emacs e TextPad. Consulte Como utilizar um
editor de texto externo com o Dreamweaver na pgina 381 e Como utilizar o
BBEdit com o Dreamweaver (apenas no Macintosh) na pgina 382.
Como utilizar um editor de texto externo com o Dreamweaver
possvel iniciar o editor de texto externo principal a partir do Dreamweaver, para
editar o HTML de origem no documento e, em seguida, voltar ao Dreamweaver a
fim de continuar a edio graficamente. O Dreamweaver detecta as alteraes que
foram salvas no documento externamente e lhe avisa para recarreg-lo ao retornar.
Se o BBEdit for utilizado no Macintosh, siga as etapas em Como utilizar o
BBEdit com o Dreamweaver (apenas no Macintosh) na pgina 382, em vez das
expostas abaixo.
Para configurar os editores externos para os tipos de arquivos diferentes de texto e
HTML, consulte Como iniciar um editor externo na pgina 326.
Para escolher um editor de HTML externo:

Escolha Editar > Preferncias, em seguida, selecione Tipos de arquivos/editores.

Apenas no Macintosh: cancele a seleo da opo Ativar a integrao com o

BBEdit, para poder utilizar um outro editor de HTML. Para utilizar o BBEdit,
mantenha selecionada a opo Ativar a integrao com o BBEdit e ignore as
etapas restantes.

Clique no boto Procurar, ao lado da caixa Editor de cdigo externo, para

escolher um editor de texto.

Como editar o HTML no Dreamweaver

381

Na opo Recarregar os arquivos modificados, especifique o que o

Dreamweaver dever fazer ao detectar alteraes externas em um documento
aberto no Dreamweaver.

Na opo Salvar na iniciao, especifique se o Dreamweaver deve sempre salvar

o documento antes de iniciar o editor, nunca salvar o documento ou lhe
perguntar se salvar ou no o documento quando o editor de texto externo for
iniciado.

Para iniciar o editor de HTML externo:

Escolha Editar > Editar com (nome do editor).

Como utilizar o BBEdit com o Dreamweaver (apenas no
Macintosh)
Quando a integrao com o BBEdit estiver ativada, uma vez que um documento
estiver aberto no BBEdit e no Dreamweaver, a alternncia de um aplicativo para
outro atualizar automaticamente o documento com as alteraes mais recentes.
Alm disso, ambos os programas controlam a seleo; por exemplo: possvel fazer
uma seleo no Dreamweaver e, em seguida, alternar para o BBEdit, onde o
mesmo elemento estar selecionado.
A integrao com o BBEdit pode ser desativada, se for mais conveniente trabalhar
com uma verso mais antiga do BBEdit ou com um outro editor de texto HTML.
As selees no sero controladas se a integrao com o BBEdit estiver desativada.
Para utilizar o BBEdit com o Dreamweaver:

Escolha Editar > Editar com o BBEdit.

Edite o documento no BBEdit.

Clique no boto Dreamweaver, na paleta de ferramentas de HTML, no

BBEdit, para retornar ao Dreamweaver.

Para desativar a integrao com o BBEdit:

382

Captulo 14

Escolha Editar > Preferncias e selecione Tipos/editores de arquivos.

Cancele a seleo de Ativar a integrao com o BBEdit e clique em OK.

Como editar os arquivos ColdFusion e Active Server no

Dreamweaver
O Dreamweaver exibe cones que identificam os blocos de cdigo Cold Fusion
Markup Language (CFML) ou Active Server Page (ASP) na visualizao do
projeto, sempre que possvel.
Nota: Como padro, o Dreamweaver nunca regrava o HTML encontrado nos
arquivos ColdFusion e ASP.
Para editar um bloco de cdigo ASP na visualizao do projeto:

Clique no marcador amarelo de ASP, para selecion-lo.

No inspetor de propriedades, clique no boto Editar.

Edite o cdigo ASP na caixa de dilogo que parecer e, em seguida, clique em

OK.

Para editar um bloco de cdigo CFML na visualizao do projeto:

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 tag e seus

valores, ou para adicionar novos.

Clique no boto Contedo, para editar o contedo que aparecer entre os tags
CFML de abertura e finalizao. Se o tag selecionado estiver vazio (ou seja, no
houver um tag de finalizao), o boto Contedo estar desativado.
Caso no haja marcadores ou texto realado onde existe cdigo ASP ou CFML,
primeiro certifique-se de que a opo Exibir > Auxlios visuais > Elementos
invisveis esteja ativada. Se esta opo estiver selecionada e, mesmo assim, os
cones no aparecerem, o Dreamweaver no poder exibir o cdigo como CFML
ou ASP. Isto pode acontecer, por exemplo, quando tags condicionais forem
inseridos em tags HTML, como no cdigo ASP seguinte:
<input type="checkbox" name="month" value="October"
<% if month="October" then %>checked<% end if %>
>
Para editar cdigo CFML ou ASP nos editores de cdigo, siga um dos
procedimentos abaixo:

Localize o cdigo na visualizao de cdigo ou no inspetor de cdigo, e edite-o

diretamente.

Como editar o HTML no Dreamweaver

383

Para localizar o cdigo CFML ou ASP:

Posicione o ponto de insero prximo ao local do cdigo CFML ou ASP na

visualizao do projeto. O cdigo CFML ou ASP ser realado na visualizao de
cdigo ou no inspetor de cdigo, e poder ser editado diretamente.
Para obter informaes sobre o processamento de cdigos CFML ou ASP, e exibir
os resultados na janela do documento, consulte Como personalizar a
interpretao dos tags de outros fabricantes na pgina 576.

384

Captulo 14

15

CAPTULO 15

Links e navegao

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Aps especificar um site local para armazenar os documentos do site da Web e

criar as pginas HTML, talvez seja conveniente estabelecer conexes entre os seus
e outros documentos ou tipos de arquivos. Para obter mais informaes sobre a
configurao de um site local, consulte Como utilizar o Dreamweaver para
definir um novo site na pgina 108.
O Macromedia Dreamweaver oferece diversos modos de criar links de hipertexto
para documentos, imagens, arquivos de multimdia ou programas dos quais se
pode efetuar o download. Podem ser estabelecidos links com qualquer texto ou
imagem em qualquer parte de um documento, inclusive texto ou imagens
localizados em um cabealho, lista, tabela, camada ou moldura. Para obter
detalhes sobre a criao de links, consulte Como criar os links na pgina 390.
Para exibir uma representao visual de como os arquivos so vinculados, utilize o
mapa do site. Nesse mapa, possvel adicionar novos documento ao site, criar e
remover links ao documento e verificar os links aos arquivos dependentes.
Consulte Como utilizar o mapa do site na pgina 124.
H vrias maneiras diferentes de criar e gerenciar os links. Alguns designers da
Web preferem criar links a pginas ou arquivos inexistentes, medida que
trabalham, enquanto outros acham mais conveniente criar primeiro todos os
arquivos e pginas e, em seguida, adicionar os links. Outra maneira de gerenciar os
links criar pginas alocadoras de espao, que representam o arquivo final e
permitem adicionar links rapidamente e verific-los, antes que as pginas tenham
sido realmente concludas. Consulte Como verificar links numa pgina ou site
na pgina 546.

385

Sobre as localizaes e os caminhos dos

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

Caminhos absolutos (por exemplo: http://www.macromedia.com/support/

dreamweaver/contents.html).

Caminhos relativos a documento (por exemplo: dreamweaver/contents.html).

Caminhos relativos raiz (por exemplo: /support/dreamweaver/contents.html).
Com o Dreamweaver, possvel selecionar facilmente o tipo de caminho de
documento a ser criado para os links. Consulte Como vincular documentos
utilizando o inspetor de propriedades e o cone do indicador de arquivos na
pgina 391.
Nota: melhor utilizar o tipo de link preferido ou mais confortvel, relativo ao documento
ou ao site. A busca de links, ao contrrio da digitao de caminhos, garante que o caminho
inserido estar sempre correto.

Caminhos absolutos
Caminhos absolutos fornecem a URL completa do documento vinculado,
inclusive o protocolo a ser utilizado (normalmente http:// para as pginas da
Web). Por exemplo:
http://www.macromedia.com/support/dreamweaver/contents.html um caminho
absoluto. Deve ser utilizado um caminho absoluto para estabelecer um link a um
documento em outro servidor. Os links de caminho absoluto tambm podem ser
utilizados para os links locais (a documentos no mesmo site), mas essa abordagem
no recomendada; se o site for deslocado para outro domnio, todos os seus links
de caminho absoluto iro se partir. Alm disso, a utilizao de caminhos relativos
para os links locais possibilita maior flexibilidade quando for necessrio mover os
arquivos no site.
Nota: Ao inserir imagens (mas no links): se for utilizado um caminho absoluto a uma
imagem que resida em um servidor remoto e que no esteja disponvel no disco rgido
local, no ser possvel exibi-la na janela do documento. Em vez disso, o documento deve
ser visualizado em um navegador. Se for possvel, utilize os caminhos relativos a
documento ou raiz para as imagens. Para obter mais informaes, consulte Como inserir
uma imagem na pgina 291.

386

Captulo 15

Caminhos relativos a documento

Caminhos relativos a documentos so os mais apropriados para os links locais na
maioria dos sites da Web. Eles so particularmente teis quando o documento
atual e o vinculado esto na mesma pasta, e possivelmente permanecero juntos.
O caminho relativo a documento tambm utilizado para estabelecer um link a
um documento em outra pasta, especificando o caminho atravs da hierarquia de
pastas, do documento atual ao vinculado. Na especificao desse caminho, no
consta a parte da URL absoluta, que a mesma para ambos os documentos.
fornecido apenas o segmento do caminho que diferente.

Para estabelecer um link a outro arquivo na mesma pasta que o documento

atual, basta indicar o nome do arquivo.

Para vincular a um arquivo em uma subpasta da pasta do documento atual,

fornea o nome da subpasta, coloque uma barra inclinada para a direita e, em
seguida, o nome do arquivo.

Para vincular a um arquivo em uma pasta-me daquela onde est o documento

atual, preceda o nome do arquivo por ../ (onde .. significa um nvel acima na
hierarquia de pastas).
Por exemplo: suponha que o site tenha esta estrutura:
meu_site (pasta raiz)

suporte

contedo.html

horas.html

recursos

dicas.html

produtos

catlogo.html

ndice.html (home page)

Links e navegao

387

Para estabelecer um link de contents.html a outros arquivos:

Para estabelecer um link de contents.html a hours.html (ambos os arquivos

esto na mesma pasta), o nome do arquivo o caminho relativo: hours.html.

Para vincular a tips.html (na subpasta chamada resources), utilize o caminho

relativo resources/tips.html.
Cada barra inclinada (/) representa mover um nvel abaixo na hierarquia de
pastas.

Para vincular a index.html (na pasta-me, um nvel acima de contents.html),

utilize o caminho relativo ../index.html.
Cada ../ representa mover um nvel acima na hierarquia de pastas.

Para vincular a catalog.html (em uma subpasta da pasta-me), utilize o

caminho relativo ../products/catalog.html.
A ../ move um nvel acima em direo pasta-me; products/ move um nvel
para baixo na subpasta products.
Nota: Salve sempre um novo arquivo antes de criar um caminho relativo a documento, j
que esse caminho no ser vlido sem um ponto de partida definido. Se voc criar um
caminho relativo a documento antes de salvar o arquivo, o Dreamweaver utilizar
temporariamente um caminho absoluto iniciado por file://, at que o arquivo seja salvo e,
em seguida, o programa converter o caminho file:// em um caminho relativo.

Quando um grupo de arquivos for movido em conjunto por exemplo: quando

uma pasta for transferida inteira, de maneira que os arquivos dentro dela
mantenham os mesmos caminhos relativos entre si os links relativos a
documento no precisaro ser atualizados entre esses arquivos. Contudo, quando
um arquivo individual que contm links relativos a documento ou que est
vinculado por esse mesmo tipo de ligao for movido, torna-se absolutamente
necessrio atualizar esses links. Se os arquivos forem movidos ou renomeados
utilizando a janela do site, o Dreamweaver atualizar automaticamente todos os
links relevantes.
Caminhos relativos raiz
Caminhos relativos raiz fornecem o caminho da pasta raiz do site a um
documento. Pode ser conveniente utilizar esses tipos de caminhos ao trabalhar em
um site grande da Web, que use vrios servidores, ou um servidor que hospede
diversos sites diferentes. Contudo, se voc no estiver familiarizado com esse tipo
de caminho, pode ser melhor continuar usando os caminhos relativos a
documento.
Um caminho relativo raiz inicia com uma barra inclinada para a direita, que
representa a pasta raiz do site. Por exemplo: /support/tips.html um caminho
relativo raiz para um arquivo (tips.html) na subpasta support, dentro da pasta
raiz do site.

388

Captulo 15

Um caminho relativo raiz , normalmente, o melhor modo de especificar links

em um site da Web, no qual os arquivos HTML precisam ser movidos com
freqncia de uma pasta para outra. Quando um documento que contm links
relativos raiz for movido, no necessrio alter-los; por exemplo: quando os
arquivos HTML utilizam links relativos raiz para os arquivos dependentes
(como as imagens), se um arquivo HTML for movido, os seus links dos arquivos
dependentes ainda sero vlidos. Contudo, quando os links dos documentos
forem relativos raiz e estes forem movidos ou renomeados, absolutamente
necessrio atualizar esses links, mesmo que os caminhos dos documentos relativos
entre si no tenham sido alterados. Por exemplo: se uma pasta for movida, todos
os links relativos raiz para os arquivos nessa pasta devem ser atualizados. Se os
arquivos forem movidos ou renomeados utilizando a janela do site, o
Dreamweaver atualizar automaticamente todos os links relevantes.

Para utilizar os caminhos relativos raiz, defina primeiro um site local no

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

Coloque os arquivos em um servidor remoto e exiba-os nesse local.

(Apenas no Windows) Escolha Editar > Preferncias, e nas Preferncias de
visualizao no navegador, selecione Visualizar utilizando o servidor local. Para
usar essa opo, necessrio que um servidor da Web esteja em execuo no seu
computador local.

Links e navegao

389

Como criar os links

O tag HTML para criar um link de hipertexto chamado de tag de ncora ou de
tag a. O Dreamweaver cria um par de tags de ncora para objetos, texto ou
imagens criados para serem vinculados. Podem ser criados links para outros
documentos e arquivos, e para locais especficos em um nico documento usando
o tag a href.
Por exemplo: se for selecionado na janela do documento o texto Home Page e, em
seguida, for criado um link a um arquivo denominado home.htm, o cdigo-fonte
HTML para o link deve ter a aparncia abaixo:
<a href="home.htm">Home Page</a>

Se um link for criado para um local especfico de um documento, necessrio

criar primeiro uma ncora com nome. Por exemplo: a name="MainMenu". Em
seguida, crie um link dentro da pgina que se refira ncora com nome. Por
exemplo: a href="#MainMenu".
Antes de criar os links, certifique-se de ter compreendido como funcionam os
caminhos relativos a documento, relativos raiz e absolutos. Consulte Sobre as
localizaes e os caminhos dos documentos na pgina 386.
Podem ser criados diversos tipos de links em um documento.

Um link a outro documento ou arquivo, como um arquivo de imagem, filme,

PDF ou som.

Um link de ncora com nome, que salta para uma localizao especfica em um
documento.

Um link de correio eletrnico, que cria uma nova mensagem com o endereo
do destinatrio j preenchido.

Os links nulos e de script, que permitem anexar comportamentos a um objeto

ou criar um link que execute cdigo JavaScript.
Com o Dreamweaver, h diversas maneiras de criar facilmente links locais (entre
os documentos de um mesmo site):

Utilize a janela do mapa do site para exibir, criar, alterar ou excluir links.
Na janela do documento, utilize Modificar > Criar link, para selecionar um
arquivo a ser vinculado.

Utilize o inspetor de propriedades para estabelecer o link a um arquivo,

utilizando o cone da pasta, para procurar e selecionar um arquivo atravs do
cone do indicador de arquivos, para selecionar um arquivo ou digitar o seu
caminho.
Nota: A digitao de URLs ou caminhos a um arquivo pode produzir links e caminhos
incorretos que no funcionam. Para garantir um caminho correto, utilize o cone
correspondente pasta para procurar o link.

390

Captulo 15

 No menu contextual, escolha Criar link e, em seguida, selecione um arquivo a

ser vinculado.
Para criar um link externo (a um documento em outro site), digite um caminho
absoluto (com o protocolo adequado) no inspetor de propriedades. Ao criar links
externos, verifique se foi digitado o caminho completo (incluindo http://).
Como vincular documentos utilizando o inspetor de
propriedades e o cone do indicador de arquivos
Utilize o inspetor de propriedades e o cone do indicador de arquivos para criar
links de uma imagem, objeto ou texto para outro documento ou arquivo.
Para obter mais informaes, consulte Como criar e modificar os links no mapa
do site na pgina 399.
Para criar links entre documentos usando o cone correspondente pasta ou a
caixa de texto do link:

Selecione o texto ou uma imagem na visualizao do projeto, na janela do

documento.

Abra o inspetor de propriedades (Janela > Propriedades) e siga um

dos procedimentos abaixo:

Clique no cone correspondente pasta, direita do campo Link, para procurar

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

No campo Link, digite o caminho e o nome do arquivo do documento.

Para criar um link a um documento no site, digite um caminho relativo a
documento ou raiz. Para criar um link a um documento fora do site, digite
um caminho absoluto que inclua o protocolo (por exemplo: http://). Esse
procedimento pode ser utilizado para digitar um link a um arquivo que ainda
no foi criado.

Links e navegao

391

Selecione a localizao na qual o documento ser aberto.

Para que o documento vinculado aparea em um local diferente da janela ou
moldura atual, selecione uma opo no menu pop-up Destino, no inspetor de
propriedades.
Sugesto: Se todos os links da pgina forem definidos para o mesmo destino,
possvel especific-lo uma vez, escolhendo Inserir > Tag do cabealho > Base e
selecionando as informaes do destino.

Para obter informaes sobre a maneira de designar molduras, consulte Como

controlar o contedo de molduras com os links na pgina 233.
Para estabelecer um link a um documento usando o cone do indicador de
arquivos:

Selecione o texto ou uma imagem na visualizao do projeto, na janela do

documento.

Arraste o cone do indicador de arquivos, direita do campo Link, no inspetor

de propriedades, e indique um outro documento aberto, uma ncora visvel em
um documento aberto ou um documento na janela do site.
O campo Link ser atualizado para mostrar o link.
Nota: O documento aberto na janela do documento ou do site, que est sendo
indicado, ser movido para o primeiro plano da tela, durante a seleo.

Solte o boto do mouse.

Como arrastar o cone do indicador de arquivos do inspetor de propriedades at um

arquivo na janela do site.

392

Captulo 15

Para criar um link a partir de uma seleo em um documento aberto:

Selecione o texto na visualizao do projeto, na janela do documento.

Mantenha a tecla Shift pressionada e arraste a partir da seleo.

O cone do indicador de arquivos aparecer medida que o cursor for
arrastado.

Indique um outro documento aberto, uma ncora visvel de um documento

aberto ou um documento na janela do site.

Solte o boto do mouse.

Pressione a tecla Shift e arraste o cone do indicador de arquivos, do texto na janela

do documento at um arquivo na janela do site.
Para criar um link usando o mapa do site e o cone do indicador de arquivos:

Na janela do site, exiba as visualizaes de arquivos do site e de mapa do site

mantendo pressionado o cone de mapa do site e escolhendo Mapa e arquivos.

Selecione um arquivo HTML no mapa do site.

O cone do indicador de arquivos aparecer ao lado do arquivo.

Arraste o cone indicador de arquivos e aponte-o para outro arquivo no mapa

do site ou para um arquivo local na visualizao dos arquivos do site.

Links e navegao

393

Solte o boto do mouse.

Um link de hipertexto com o nome do arquivo vinculado ser colocado na
parte inferior do arquivo HTML selecionado. Esse mtodo funciona bem
quando um site est sendo construdo e se deseja criar links no site inteiro
rapidamente.

Para obter informaes sobre a exibio de um mapa de site, consulte Como

utilizar o mapa do site na pgina 124.
Como estabelecer um link a um local especfico de um
documento
O inspetor de propriedades pode ser utilizado para estabelecer um link a uma
determinada seo de um documento, criando primeiro as ncoras com nomes.
Essas ncoras permitem definir marcadores em um documento e so colocadas,
freqentemente, em um tpico especfico ou no alto do documento. Podem ser
criados links para essas ncoras com nome, que levam rapidamente o visitante at
a posio especificada.
A criao de um link a uma ncora com nome um processo em duas etapas.
Primeiro, crie uma ncora com nome e, em seguida, crie um link a essa ncora.
Para criar uma ncora com nome:

Na visualizao do projeto, na janela do documento, posicione o ponto de

insero no local onde deseja inserir a ncora com nome.

Siga um dos procedimentos abaixo:

Escolha Inserir > Tags invisveis > ncora com nome.

Pressione as teclas Control, Alt e A (no Windows), ou Command, Option e A
(no Macintosh).

Na categoria Invisveis do painel Objetos, clique no boto ncora com nome.

394

Captulo 15

No campo Nome da ncora da caixa de dilogo Inserir ncora com nome,

digite o nome da ncora.
Se no aparecer um marcador da ncora no local do ponto de insero, escolha
Exibir > Auxlios visuais >Elementos invisveis.

Nota: Os nomes de ncoras no podem conter espaos nem devem ser colocados dentro
de uma camada.
Para estabelecer um link a uma ncora com nome:

Na visualizao do projeto, na janela do documento, selecione um texto ou

uma imagem da qual ser criado um link.

No campo Link, no inspetor de propriedades, digite um sinal de nmero (#) e

o nome da ncora. Por exemplo:

Para estabelecer um link a uma ncora com o nome "alto" no arquivo atual,
digite #alto.

Para estabelecer um link a uma ncora com o nome alto em um documento

diferente, na mesma pasta, digite nomedoarquivo.html#alto.
Nota: Os nomes de ncoras so sensveis a maisculas e minsculas.
Para estabelecer um link a uma ncora utilizando o mtodo de indicao de
arquivos:

Abra o documento que contm a ncora com nome escolhida.

Escolha Exibir > Auxlios visuais >Elementos invisveis, para tornar a ncora
visvel.

Na visualizao do projeto, na janela do documento, selecione um texto ou

uma imagem da qual ser criado um link. Se este for outro documento aberto,
alterne para ele.

Siga um dos procedimentos abaixo:

Clique no cone do indicador de arquivos, direita do campo Link, no inspetor

de propriedades, e arraste-o at a ncora que ser vinculada: uma ncora no
mesmo documento ou em outro documento aberto.

Pressione a tecla Shift e arraste o cursor na janela do documento, a partir do

texto ou imagem selecionada at a ncora que ser vinculada: uma ncora no
mesmo documento ou em outro documento aberto.

Links e navegao

395

Como criar um link de correio eletrnico

Um link de correio eletrnico abrir uma nova janela de mensagem (utilizando o
programa de correio eletrnico associado ao navegador do usurio) sempre que for
clicado. Na janela de mensagem eletrnica, o campo Para ser atualizado
automaticamente com o endereo especificado no link de correio eletrnico.
Para criar um link de correio eletrnico utilizando o comando Inserir link de correio
eletrnico:

Na visualizao do projeto, na janela do documento, posicione o ponto de

insero onde dever aparecer o link de correio eletrnico ou selecione o texto a
ser mostrado neste lugar. Siga um dos procedimentos abaixo:

Escolha Inserir > Link de correio eletrnico.

Na categoria Comuns do painel Objetos, selecione Inserir link de correio
eletrnico.
2

No campo Texto, na caixa de dilogo Inserir link de correio eletrnico, digite

ou edite o texto que aparecer no documento como um link de correio
eletrnico.

No campo Correio eletrnico, digite o endereo eletrnico do destinatrio.

Clique em OK.

Para criar um link de correio eletrnico utilizando o inspetor de propriedades:

Selecione o texto ou uma imagem na visualizao do projeto, na janela do

documento.

No campo Link, no inspetor de propriedades, digite mailto: seguido de um

endereo de correio eletrnico.
No digite espaos entre os dois pontos e o endereo eletrnico. Por exemplo:
digite mailto:jdoe@macromedia2.com.

396

Captulo 15

Como criar links nulos e de script

Os tipos mais comuns de links ocorrem entre documentos e ncoras com nome
(descritos em Como vincular documentos utilizando o inspetor de propriedades
e o cone do indicador de arquivos na pgina 391 e Como estabelecer um link a
um local especfico de um documento na pgina 394, respectivamente), mas h
tambm outros tipos de links.
aquele no designado. Utilize esse tipo de link para anexar
comportamentos a objetos ou texto em uma pgina. Aps a criao de um link
nulo, a ele poder ser anexado a um comportamento para permutar uma imagem
ou exibir uma camada, quando o cursor for movido sobre o link. Para obter
informaes sobre a anexao de comportamentos a objetos, consulte Como
anexar um comportamento na pgina 473.
Um link nulo

Links de scripts executam o cdigo JavaScript ou chamam uma funo JavaScript,

sendo teis para fornecer informaes adicionais ao usurio sobre um item, sem
sair da pgina atual da Web. Os links de scripts tambm podem ser utilizados para
clculos, validaes de formulrios e outras tarefas de processamento, quando um
usurio clicar em um determinado item.
Para criar um link nulo:

Selecione o texto, uma imagem ou um objeto na visualizao do projeto, na

janela do documento.

No inspetor de propriedades, digite um sinal de nmero (#) no campo Link.

Para criar um link de script:

Selecione o texto, uma imagem ou um objeto na visualizao do projeto, na

janela do documento.

No campo Link, no inspetor de propriedades, digite javascript: seguido de

cdigo JavaScript ou de uma chamada a funo.
Por exemplo: a digitao de javascript:alert('Este link conduz ao ndice') no
campo Link produz um link que, quando clicado, exibe uma caixa de alerta
JavaScript com a mensagem Este link conduz ao ndice.
Nota: Como o cdigo JavaScript aparece entre aspas duplas no HTML (assim como o
valor do atributo href ), necessrio utilizar aspas simples no cdigo do script ou
preceder as aspas duplas por barras invertidas (por exemplo: \"Este link conduz
ao ndice\").

Links e navegao

397

Como gerenciar os links

O Dreamweaver pode atualizar os links de e para um documento, sempre que este
for movido ou renomeado em um site local. Esse recurso funciona melhor quando
o site inteiro (ou toda uma seo autnoma deste) estiver armazenado na unidade
local. Nenhuma alterao ser feita nos arquivos que estiverem no site remoto, at
que os arquivos locais sejam colocados ou devolvidos ao servidor remoto.
Para ativar o gerenciamento de links no Dreamweaver:

Escolha Editar > Preferncias e, em seguida, selecione a categoria Geral.

Selecione Sempre, ou Solicitar, no menu pop-up Atualizar os links ao mover os

arquivos, e clique em OK.
Se for escolhida a opo Sempre, o Dreamweaver atualizar automaticamente
todos os links para e de um documento selecionado sempre que este for movido
ou renomeado. (Para obter instrues especficas sobre o que fazer quando um
arquivo for excludo, consulte Como alterar um link no site inteiro na
pgina 400). Quando for escolhida a opo Solicitar, o Dreamweaver exibir
primeiramente uma caixa de dilogo que contm uma lista de todos os arquivos
afetados pela alterao. Clique em Atualizar, para atualizar os links nestes
arquivos, ou em No atualizar, para deix-los inalterados.

Para tornar mais rpido o processo de atualizao, o Dreamweaver pode criar um

arquivo de cache, no qual ele armazenar informaes sobre todos os links do site
local. Esse arquivo de cache ser criado quando a opo Cache estiver selecionada
na caixa de dilogo Definio do site, e ser atualizado imperceptivelmente
durante a utilizao do Dreamweaver para adicionar, alterar ou excluir links a
arquivos no site local.
Para criar um arquivo de cache do site:

Escolha Site > Definir os sites.

Selecione o site na caixa de dilogo Definir os sites e, em seguida, clique em

Editar. Na categoria Informaes locais, marque a caixa de seleo Ativar o
cache.

Na primeira vez em que os links a arquivos forem alterados ou excludos no site

local, aps ter iniciado o Dreamweaver, este aplicativo lhe solicitar a carga do
cache. Se voc clicar em Sim, o cache ser carregado e todos os links ao arquivo
alterado sero automaticamente atualizados. Se escolher No, as alteraes
podero ser observadas no cache, porm este no ser carregado e os links no
sero atualizados.

398

Captulo 15

 possvel que o cache demore alguns minutos para ser carregado nos sites
maiores; a maior parte deste perodo gasta na comparao entre os horrios dos
arquivos no site local e aqueles registrados no cache, a fim de verificar se este est
desatualizado. Se nenhum arquivo tiver sido alterado fora do Dreamweaver, no
haver problemas em clicar em Parar, quando o boto aparecer.
Para criar novamente o cache do site:

Na janela do site, escolha Recriar o cache do site.

Como criar e modificar os links no mapa do site
possvel modificar a estrutura do site no respectivo mapa adicionando, alterando
e removendo links. O mapa do site ser atualizado automaticamente, exibindo as
alteraes feitas no site.
Para adicionar um link, siga um dos procedimentos abaixo:

Arraste uma pgina do Windows Explorer ou do Localizador do Macintosh, e

solte-a em uma pgina do mapa do site.

Selecione uma pgina HTML e escolha Site > Link a um arquivo existente (no
Windows), ou Site > Visualizao do mapa do site > Link a um arquivo
existente (no Macintosh), ou escolha Link a um arquivo existente, no menu
contextual.

Selecione uma pgina HTML no mapa do site. Aparecer o cone do indicador

de arquivos. Arraste o cone at o objeto a ser vinculado: um arquivo na
visualizao dos arquivos do site, um documento do Dreamweaver aberto ou
uma ncora com nome em um documento aberto na rea de trabalho. Consulte
Como vincular documentos utilizando o inspetor de propriedades e o cone
do indicador de arquivos na pgina 391.
Para alterar um link:

No mapa do site, selecione a pgina cujo link est sendo alterado e escolha Site
> Alterar o link (no Windows), ou Site > Visualizao do mapa do site > Alterar
o link (no Macintosh).

Procure o arquivo ou digite uma URL.

Para remover um link, siga um dos procedimentos abaixo:

Selecione a pgina no mapa do site e escolha Site > Remover o link (no
Windows), ou Site > Visualizao do mapa do site > Remover o link (no
Macintosh).

Selecione a pgina no mapa do site e escolha Remover o link, no

menu contextual. A remoo de um link no exclui o arquivo, mas remove o
link da origem de HTML na pgina que est indicando o link.

Links e navegao

399

Para abrir a origem de um link:

Selecione um arquivo no mapa do site.

Escolha Site > Abrir a origem do link (no Windows), ou Site > Visualizao do
mapa do site > Abrir a origem do link (no Macintosh).
O inspetor de propriedades e o arquivo de origem que contm o link sero
abertos. O link ser realado.

Como alterar um link no site inteiro

Alm de o Dreamweaver atualizar os links de modo automtico sempre que um
arquivo for movido ou renomeado, tambm possvel alterar manualmente todos
os links (inclusive os de correio eletrnico, FTP, nulos e de scripts) para que estes
indiquem outras localizaes. Esta opo pode ser utilizada a qualquer momento
(por exemplo: as palavras os filmes deste ms podem ser vinculadas a /movies/
julho.html no site inteiro e, em primeiro de agosto, esses links devem ser alterados
para indicar /movies/agosto.html), mas particularmente til quando for
necessrio excluir um arquivo vinculado a outros arquivos.
Para alterar um link no site inteiro:

Selecione um arquivo no painel Pasta local, na janela de site.

Escolha Site > Alterar o link no site inteiro.

Na caixa de dilogo que aparecer, clique no cone de pasta para procurar e

selecionar um arquivo. possvel tambm digitar o caminho e o nome do
arquivo no campo Em links a.

Clique em OK.
O Dreamweaver atualizar os documentos que se vincularem ao arquivo
selecionado, de maneira que indiquem o novo arquivo, utilizando o formato de
caminho existente no documento (por exemplo: se o caminho antigo for
relativo a documento, o novo caminho tambm ser do mesmo tipo). O tipo de
link, relativo a documento ou raiz, no importante. O link ser atualizado
automaticamente.

Aps a alterao de um link no site inteiro, o arquivo selecionado se tornar rfo

(ou seja, nenhum arquivo na unidade local o indicar). A excluso do mesmo no
causar problemas, pois no romper quaisquer links existentes no site local.
Nota: Como todas as alteraes esto ocorrendo localmente, ser necessrio excluir
manualmente o arquivo rfo correspondente no site remoto e colocar ou devolver
quaisquer arquivos nos quais tiverem ocorrido alteraes nos links para que os visitantes
do seu site possam visualiz-las.

400

Captulo 15

Para alterar os links de correio eletrnico, FTP, nulos ou de scripts no site inteiro:

Escolha Site > Alterar o link no site inteiro.

Na caixa de dilogo Alterar o link no site inteiro, digite as seguintes

informaes:

No campo Alterar todos os links a, digite o texto completo do link que est
sendo alterado.

No campo Em links a, digite o texto completo do link de substituio.

3

Clique em OK.

Por exemplo: para atualizar todos os links de correio eletrnico que levam ao seu
endereo antigo, digite mailto:juser@isp.com na caixa Alterar todos os links a, e
digite mailto:juser-interface@isp.com na caixa Em links a.

Como criar menus de salto

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

Um aviso de seleo no menu, como uma descrio da categoria para os itens

do menu, ou instrues. Por exemplo: Escolha uma opo. (Opcional)

Uma lista de itens de menu vinculados: um usurio escolhe uma opo e um

documento ou arquivo vinculado aberto. (Necessrio)

Um boto Ir. (Opcional)

Links e navegao

401

Como inserir um menu de salto

Para inserir um menu de salto no documento, utilize o objeto formulrio Menu de
salto.
Para criar um menu de salto:

Escolha Inserir > Objeto formulrio > Menu de salto.

Aparecer a caixa de dilogo Menu de salto.

Para criar um aviso de seleo, digite o texto do aviso no campo Texto da caixa
de dilogo. Em Opes, marque a caixa de seleo Selecionar o primeiro item
aps a alterao da URL e, em seguida, clique no boto com o sinal de adio
(+) para incluir um item de menu.

No campo Texto, da caixa de dilogo Inserir o menu de salto, digite o texto que
aparecer na lista do menu.

No campo Aps selecionar, v para a URL, selecione o arquivo a ser aberto e

siga o procedimento abaixo:

Clique em Procurar e, em seguida, selecione o arquivo a ser aberto.

Digite o caminho do arquivo a ser aberto.
5

No menu pop-up Abrir as URLs em, selecione uma localizao onde o arquivo
ser aberto:

Selecione Janela principal, para abrir o arquivo na mesma janela.

Selecione uma moldura onde ser aberto o arquivo.
Nota: Se a moldura a ser designada no aparecer no menu pop-up Abrir as URL em,
feche a caixa de dilogo Inserir o menu de salto, e digite o nome da moldura. Para obter
mais informaes sobre a maneira de designar uma moldura, consulte Como definir as
propriedades das molduras na pgina 227.

402

Captulo 15

Para adicionar um boto Ir em vez de um aviso de seleo no menu: Em

Opes, selecione a opo Inserir o boto Ir aps o menu.

Para incluir itens de menu adicionais, clique no boto com o sinal de adio (+)
e repita as etapas 3 a 6 desse procedimento.

Clique em OK.

Como editar os itens do menu de salto

Para alterar os itens do menu de salto, utilize o inspetor de propriedades ou o
painel Comportamentos. possvel alterar a ordem da lista ou o arquivo ao qual
um item est vinculado, ou adicionar, excluir ou renomear um item.
Para alterar a localizao na qual um arquivo vinculado aberto, ou adicionar ou
alterar um aviso de seleo no menu, deve ser utilizado o painel Comportamentos;
consulte Menu de salto na pgina 491.
Para editar um item do menu de salto com o inspetor de propriedades:

No inspetor de propriedades, escolha Janela > Propriedades.

Na visualizao do projeto da janela do documento, clique no objeto menu de

salto para selecion-lo.
Aparecer o cone de menu de lista, no inspetor de propriedades.

No inspetor de propriedades, clique no boto Valores da lista.

Altere os itens do menu e, em seguida, clique em OK.

Como solucionar problemas nos menus de salto

Quando os usurios escolhem um item de menu de salto, no possvel selecionlo novamente, caso eles retornem a essa pgina ou se o campo Abrir a URL em
especificar uma moldura. H duas maneiras de contornar esse problema:

Utilize um aviso de seleo no menu, como uma categoria ou instruo do

usurio, por exemplo: Escolha uma opo. O aviso de seleo no menu
escolhido novamente aps cada seleo no menu.

Utilize um boto Ir, que permite ao usurio visitar de novo o link que estiver
selecionado.
Nota: Selecione apenas uma destas opes por menu de salto, porque elas se aplicam
a todo um menu de salto.

Links e navegao

403

Como criar as barras de navegao

Uma barra de navegao composta por uma ou um conjunto de imagens, que
exibe as alteraes com base nas aes de um usurio. As barras de navegao so,
com freqncia, um modo fcil de se mover entre as pginas e arquivos de um site.

Antes de utilizar o comando Inserir a barra de navegao, crie um conjunto de

imagens para exibir os estados de cada elemento de navegao. Pode ser mais fcil
imaginar um elemento da barra de navegao como um boto porque, quando
clicado, ele conduzir o usurio a outra pgina.
Um elemento da barra de navegao pode apresentar quatro estados:

Ativa: a imagem que aparece quando o usurio ainda no clicou ou interagiu

com o elemento. Por exemplo: o elemento nesse estado parece que no foi
clicado.

Sobreposta: a imagem que aparecer quando o cursor for movido sobre uma
imagem ativa. A aparncia do elemento alterada (por exemplo: poder ficar
mais clara) para informar aos usurios que eles no podem interagir com o
elemento.

Inativa: a imagem que aparece aps o clique no elemento. Por exemplo: quando
um usurio clica em um elemento, uma nova pgina carregada e a barra de
navegao ainda estar em exibio, mas o elemento clicado estar escurecido
para mostrar que foi selecionado.

Imagem sobreposta enquanto inativa: a imagem que aparecer quando o cursor

for deslizado sobre a imagem inativa, aps o clique do usurio. Por exemplo: o
elemento dever aparecer esmaecido ou cinza. Esse estado pode ser utilizado
como uma informao visual aos usurios de que esse elemento no pode ser
clicado novamente enquanto estiverem nesta parte do site.
No necessrio incluir imagens de barra de navegao para os quatro estados; por
exemplo: talvez sejam escolhidos apenas os estados Ativa e Inativa.

404

Captulo 15

Voc pode criar uma barra de navegao, copi-la em outra pginas no seu site,
utiliz-la com molduras e editar os comportamentos da pgina, para mostrar os
diferentes estados medida que as pginas so acessadas.
Como inserir uma barra de navegao
Quando uma barra de navegao inserida, os nomes dos elementos da barra
recebem nomes e so escolhidas imagens que os representem.
Para criar uma barra de navegao:

Siga um dos procedimentos abaixo:

Escolha Inserir > Imagens interativas > Barra de navegao.

Na categoria Comuns do painel Objetos, selecione Inserir a barra de navegao.
Aparecer a caixa de dilogo Inserir a barra de navegao.

No campo Nome do elemento, digite o nome do elemento da barra de

navegao por exemplo: Home.
Cada elemento corresponde a um boto com um conjunto de at quatro
imagens de estados. Os nomes dos elementos aparecero na lista Elementos da
barra de navegao. Utilize os botes de seta para organizar os elementos na
barra de navegao.

Links e navegao

405

Selecione as opes de estado da imagem para esse elemento (voc deve escolher
uma Imagem ativa; os outros estados da imagem so opcionais):

No campo Imagem ativa, clique em Procurar, para selecionar a imagem inicial.

No campo Imagem sobreposta, clique em Procurar, para selecionar a imagem a
ser mostrada quando o usurio mover o cursor sobre o elemento, quando a
imagem ativa estiver em exibio.

No campo Imagem inativa, clique em Procurar, para selecionar a imagem a ser

exibida depois que o usurio clicar no elemento.

No campo Imagem sobreposta enquanto inativa, clique em Procurar, para

selecionar a imagem a ser exibida quando o usurio mover o cursor sobre a
imagem inativa.

No campo Quando clicado, v para a URL, selecione uma localizao na qual o

arquivo vinculado ser aberto e siga um dos procedimentos abaixo:

Selecione Janela principal, para abrir o arquivo na mesma janela.

Selecione uma moldura na qual o arquivo ser aberto.
Nota: Se a moldura a ser designada no aparecer no menu pop-up, saia da caixa de
dilogo Inserir a barra de navegao e digite o nome da moldura. Para obter
informaes sobre a maneira de denominar uma moldura, consulte Como definir as
propriedades das molduras na pgina 227.

Selecione as opes de carga da imagem:

Pr-carregar as imagens efetua o download das imagens quando a pgina

carregada. Se esta opo no estiver selecionada, pode haver uma demora
quando o usurio mover o cursor do mouse sobre a imagem cambivel.

Selecione Mostrar a imagem inativa inicialmente, para exibir o elemento

escolhido em seu estado inativo, quando a pgina for exibida. Por exemplo:
quando a home page for carregada, o elemento Home na barra de navegao
dever estar no estado inativo.
Quando esta opo for selecionada, aparecer um asterisco aps o elemento na
lista Elementos da barra de navegao.
5

Em Inserir, selecione uma destas opes:

Para escolher se os elementos da barra de navegao sero inseridos vertical ou

horizontalmente no documento, utilize o menu pop-up Inserir.

Para inserir os elementos da barra de navegao como uma tabela, marque a

caixa de seleo Utilizar as tabelas.

406

Captulo 15

Clique no boto com o sinal de adio (+) para adicionar outro elemento
barra de navegao e, em seguida, repita as etapas 2 a 5 at terminar de definir
todos os elementos.

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 do comando Modificar a barra de
navegao. Esse comando serve para alterar uma imagem ou um conjunto de
imagens, mudar o arquivo que ser aberto quando um boto for clicado,
selecionar uma janela ou moldura diferente na qual abrir um arquivo, e reordenar
a posio das imagens.
Para modificar uma barra de navegao:

Escolha Modificar > Barra de navegao.

Na lista Elementos da barra de navegao, selecione o elemento a ser editado.

Edite-o e, em seguida, clique em OK.

Como anexar comportamentos aos links

Um comportamento pode ser anexado a qualquer link em um documento.
Considere a possibilidade de utilizar os seguintes comportamentos ao inserir
elementos vinculados em seus documentos. Para obter mais informaes, consulte
Como anexar um comportamento na pgina 473.
Definir a mensagem de status mostra uma mensagem na barra de status, na parte
inferior esquerda da janela do navegador. Por exemplo: possvel utilizar esta ao
para descrever o destino de um link na barra de status, em vez de mostrar a URL a
ele associada. Consulte Definir a mensagem de status na pgina 499.
Abrir a janela do navegador utilizado para abrir uma URL em uma nova janela.
possvel especificar as propriedades da nova janela, inclusive o seu tamanho,
nome e atributos (se ela ser redimensionvel, possuir uma barra de menus e
assim por diante). Consulte Abrir a janela do navegador na pgina 492.
Menu de salto utilizado para editar um menu de salto. possvel alterar a lista de

menus, especificar um arquivo vinculado diferente ou modificar o local do

navegador no qual os documentos vinculados sero abertos. Consulte Menu de
salto na pgina 491.
Definir a imagem da barra de navegaopermite alterar o comportamento da
barra de navegao. Utilize esse comportamento para personalizar a maneira como
as imagens sero exibidas na barra de navegao. Por exemplo: quando o ponteiro
estiver sobre uma parte da barra de navegao, a exibio das outras imagens na
barra ou no documento ser alterada. Consulte Definir a imagem da barra de
navegao na pgina 496.

Links e navegao

407

408

Captulo 15

16

CAPTULO 16

Como reutilizar o contedo com os

modelos e bibliotecas
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

O painel Propriedades (consulte Como gerenciar e inserir propriedades na

pgina 237) fornece acesso a todas as propriedades do site. O Dreamweaver
oferece duas categorias vinculadas especiais de propriedades: modelos e
bibliotecas. Uma pgina que utiliza uma propriedade vinculada ser atualizada
automaticamente quando a propriedade vinculada for alterada.
Os modelos e bibliotecas do Dreamweaver podem auxili-lo a criar pginas da
Web com um desenho consistente. A utilizao de modelos e bibliotecas tambm
facilita a manuteno do site da Web, j que possvel redesenh-lo e alterar
centenas de pginas em segundos.
Um modelo um documento que pode ser utilizado para criar diversas pginas com o
mesmo layout. Quando um modelo criado, possvel indicar quais elementos de
uma pgina devero permanecer inalterados (no-editveis ou bloqueados), em
documentos baseados neste modelo, e quais podero ser alterados.
Por exemplo: caso voc esteja publicando uma revista on-line, o nome e a
aparncia geral do layout provavelmente no sero alterados de uma edio para
outra, ou at mesmo de uma matria para outra, mas o ttulo e o contedo da
matria sero diferentes. Um designer poder criar o layout da pgina de matria
de uma revista, com texto do alocador de espao, onde o ttulo da matria e seu
contedo estaro (e com aquelas regies marcadas para a edio); o designer
poder, ento, salvar este layout como um modelo. A pessoa responsvel pela nova
edio da revista criar uma nova pgina com base no modelo e substituir o texto
do alocador de espao pelo ttulo e texto real da nova matria.
Um modelo pode ser modificado mesmo depois da criao de documentos que
tiverem se baseado nele. Ao modificar um modelo, as regies bloqueadas (no
editveis) dos documentos que se basearem no modelo sero atualizadas para
corresponder s alteraes ao modelo.

409

Nota: Se abrir um arquivo de modelo, voc pode editar qualquer elemento deste arquivo,
independente de estar marcado como editvel ou bloqueado. Se abrir um documento que
se baseia num arquivo de modelo, apenas as regies que estiverem marcadas como
editveis podero ser editadas. Portanto, os termos editvel e bloqueado se referem ao
fato de a regio ser editvel nos documentos com base em modelo, e no no arquivo do
modelo.

Os modelos so os melhores instrumentos nas situaes em que voc desejar

impor um layout idntico a um grupo de pginas. Nestes casos, projete
inicialmente o layout final completo do conjunto de pginas e, em seguida,
adicione o contudo s pginas. Se voc desejar apenas que as pginas tenham os
mesmos cabealhos e rodaps, com layouts variveis, utilize os itens de biblioteca
para armazenar os cabealhos e rodaps. Os itens de biblioteca so elementos de
pgina armazenados que podem ser reutilizados em diversas pginas; da mesma
maneira que os modelos, possvel atualizar todas as pginas que utilizarem um
item de biblioteca, sempre que desejar alterar o contedo do item. Para obter mais
informaes, consulte Como criar, gerenciar e editar os itens de biblioteca na
pgina 429. importante observar que nas pginas criadas com modelos, no
possvel converter as tabelas em camadas ou vice-versa.
Nota: A utilizao de um modelo pode limitar as alteraes posteriores ao projeto e ao
layout. Se, posteriormente, voc pretender efetuar grandes alteraes de layout s
pginas, utilize os itens de biblioteca, ao invs de modelos.

Os modelos so partircularmente teis num ambiente de colaborao, nos quais o

designer controla os layouts de pgina e outras pessoas, que no contam com
autorizao para alterar o layout, adicionam contedo s pginas.
O Dreamweaver tambm oferece outros tipos de contedo reutilizvel: as serverside includes (incluses do servidor) e os itens de biblioteca. Voc poder utilizar
estes elementos para o contedo que se repetir em todas as pginas do site (os
cabealhos e rodaps, por exemplo) ou que aparecer apenas em algumas pginas,
mas que deve ser atualizado freqentemente (como as manchetes de notcias ou
descontos nas vendas). Estas abordagens so apropriadas para tipos diversos de
sites:

As server-side includes (incluses do servidor) podem ser utilizadas apenas nos

sites que forem exibidos a partir de um servidor, e no nos sites que forem
exibidos num sistema local sem um servidor. Elas podem ser vistas apenas nos
servidores que estiverem configurados para process-las. Pergunte ao seu
webmaster ou ao administrador da rede se o servidor da Web oferece suporte s
server-side includes. Consulte Como utilizar as server-side includes na
pgina 436.

Os itens de biblioteca podem ser utilizados nos sites que forem exibidos
localmente, assim como nos sites residentes em um servidor. Nos sites que
forem exibidos localmente, sem um servidor, necessrio utilizar os itens de
biblioteca, ao invs das server-side includes. Consulte Como criar, gerenciar e
editar os itens de biblioteca na pgina 429.

410

Captulo 16

Como criar os modelos

Um modelo pode ser criado a partir de um documento HTML j existente e, em
seguida, ser modificado para que atenda s suas exigncias, ou ser criado a partir
do zero, com base em um documento HTML em branco.
O Dreamweaver salva os modelos com a extenso .dwt em uma pasta chamada
Templates, na pasta raiz local do site. Se a pasta Templates ainda no existir, o
Dreamweaver a criar quando voc salvar um novo modelo.
Nota: No retire os modelos da pasta Templates e no coloque arquivos diferentes de
modelos nesta pasta. Tambm no mova pasta Templates para fora da pasta raiz local. Ao
fazer isto, voc estar provocando erros nos caminhos dos modelos.

Se desejar armazenar informaes adicionais sobre um modelo como, por exemplo, o

autor do modelo, a data da ltima alterao ou o motivo de certas decises de layout,
voc poder criar um arquivo Design Notes para o modelo. Os documentos que se
basearem no modelo no herdaro as Design Notes do mesmo. Para obter mais
informaes, consulte Sobre as Design Notes na pgina 142.
A maioria das operaes relacionadas aos modelos estaro disponveis somente
quando a visualizao do projeto estiver ativa. Se um comando relacionado a
modelo estiver esmaecido quando a visualizao de cdigo estiver ativa, clique na
visualizao do projeto.
Para salvar um documento j existente como um modelo:

Escolha Arquivo > Abrir, e selecione um documento.

Quando o documento for aberto, escolha Arquivo > Salvar como modelo.
Nota: Se o documento se basear em um modelo, voc dever desanex-lo deste
modelo, para poder salv-lo como um modelo.

Na caixa de dilogo que aparecer, selecione um site no menu pop-up e digite o

nome do modelo, na caixa Salvar como.

Clique em Salvar.
O arquivo de modelo ser salvo na pasta Templates do site, com a extenso
.dwt.

Para criar um novo modelo vazio:

Escolha Janela > Modelos.

O painel Propriedades aparecer com a categoria Modelos selecionada.

Na parte inferior do painel Propriedades clique no boto Novo modelo.

Um novo modelo vazio e sem ttulo ser adicionado lista de modelos no painel.

Com o modelo selecionado, digite um nome para ele.

Como reutilizar o contedo com os modelos e bibliotecas

411

Para editar o arquivo de modelo no qual um documento se baseia:

Escolha Modificar > Modelos > Abrir o modelo anexado.

Para editar um arquivo de modelo:

Escolha Janela > Modelos.

O painel Propriedades aparecer, aberto na categoria Modelos. O painel
inferior do painel Propriedades contm uma lista dos modelos disponveis para
o seu site. O painel superior exibe uma visualizao do modelo selecionado.

No painel Propriedades , siga um dos procedimentos abaixo:

Clique duas vezes no nome do modelo.

Na parte inferior do painel Propriedades, clique no boto Editar o modelo.
3

Edite o modelo na janela do documento. Crie regies editveis no modelo como

desejar (consulte Como definir as regies editveis de um modelo na pgina 415).

Salve o modelo editado, atravs da escolha de Arquivo >Salvar.

Nota: Se ainda no tiver definido qualquer regio editvel, voc ser advertido neste
ponto sobre o fato. Voc poder salvar o modelo de qualquer maneira e poder
modificar o arquivo do modelo, at mesmo se ele no contiver regies editveis, mas
no ser possvel modificar os documentos baseados no modelo, at ter criado uma
regio editvel no modelo.

Para renomear um modelo no painel Propriedades:

Clique no nome do modelo uma vez, para selecion-lo.

Aps uma pequena pausa, clique novamente.

Quando o nome se tornar editvel, digite um novo nome.

Nota: Este mtodo funciona da mesma forma que a renomeao de um arquivo no
Windows Explorer (no Windows) ou no Localizador (no Macintosh). Assim como no
Windows Explorer e no Localizador, assegure-se de fazer uma pequena pausa entre os
cliques. No clique duas vezes no nome; desta forma o modelo ser aberto para edio.

Clique em outro lugar ou pressione a tecla Enter (no Windows) ou Return (no
Macintosh).

O Dreamweaver perguntar se voc deseja atualizar os documentos que se

basearem neste modelo.

Para atualizar todos os documentos no site que se basearem neste modelo,

clique em Atualizar.

Para evitar a atualizao de todos os documentos que se baseiam neste modelo,

clique em No atualizar. Um documento que voc optar por no atualizar
continuar a se basear no modelo (no desanexado); para atualizar tal documento
posteriormente, abra o modelo e escolha Modificar >Modelos >Atualizar.

412

Captulo 16

Para excluir um arquivo de modelo:

Selecione o modelo no painel Propriedades.

Clique no boto Excluir e confirme que deseja excluir o modelo. Tenha

cuidado, pois aps excluir um arquivo de modelo, no ser possvel recuper-lo.
O arquivo de modelo ser excludo do site. Os documentos que se baseavam neste
modelo no sero desanexados do modelo. Eles conservaro a estrutura e as regies
editveis que o arquivo de modelo possua antes de ser excludo. Para transformar
tal documento em um arquivo HTML normal sem regies editveis ou bloqueadas,
utilize Modificar> Modelos > Desanexar do modelo. Para obter mais informaes,
consulte Como desanexar um documento de um modelo na pgina 424.

Como definir as propriedades da pgina do modelo

Os documentos criados a partir de um modelo herdaro as propriedades da pgina do
mesmo, com exceo do ttulo da pgina. Se um documento se basear num modelo,
possvel alterar o seu ttulo, porm quaisquer alteraes feitas s suas outras
propriedades da pgina sero ignoradas. Se aplicar um modelo a um documento e, em
seguida, necessitar modificar as propriedades da pgina do documento, voc dever
modificar as propriedades da pgina do modelo e atualizar as pginas que o utilizarem.
O que significa que as propriedades da pgina de todos os documentos que se
basearem naquele modelo sero modificadas.
Para modificar as propriedades da pgina do modelo:

Abra o arquivo do modelo e escolha Modificar > Propriedades da pgina.

Especifique as opes desejadas para a pgina e clique em OK.

Atualize as pginas que se basearem no modelo, se houver alguma. Para obter

mais informaes, consulte Como atualizar as pginas com base em um
modelo na pgina 424.

Para obter mais informaes sobre as propriedades da pgina, consulte Como

definir as propriedades do documento na pgina 160.

Como reutilizar o contedo com os modelos e bibliotecas

413

Sobre links em modelos

Para criar um link em um arquivo de modelo, utilize o cone de pasta ou o cone
do indicador de arquivos, no inspetor de propriedades. No digite o nome do
arquivo a ser vinculado. Se digitar o nome, o link no funcionar como esperado.
As seguintes informaes explicam porque este problema ocorre e oferecem um
exemplo de situao na qual isso pode ocorrer.
Quando voc criar um arquivo de modelo abrindo uma pgina existente e
salvando a pgina como um modelo, o Dreamweaver garantir que todos os links
na pgina continuaro a indicar os mesmos arquivos que indicavam
anteriormente. Como os modelos so salvos em uma pasta Templates especial, isto
significa que o caminho exibido de um link relativo ao documento se alterar
quando voc salvar a pgina como um modelo. No se preocupe com esta
alterao. Quando criar um documento com base em modelo e, em seguida, salvlo, todos os links relativos ao documento sero atualizados para continuar a
indicar os arquivos corretos, como era de se esperar.
Ao adicionar um link relativo a documento em um arquivo de modelo, mesmo se
digitar o caminho na caixa de de texto do link, no inspetor de propriedades, fcil
digitar um caminho incorreto por engano. O caminho correto o caminho da
pasta Templates ao documento que voc estiver vinculando, e no o caminho da
pasta do documento.
Para evitar este problema, utilize o cone de pasta ou o cone do indicador de
arquivos para selecionar os arquivos aos quais deseja vincular. Para obter mais
informaes sobre como vincular usando o cone do indicador de arquivos,
consulte Como vincular documentos utilizando o inspetor de propriedades e o
cone do indicador de arquivos na pgina 391.
O seguinte exemplo demonstra o problema. Suponha que voc possui um site no
qual algumas pginas de catlogo (denominadas aparelhos.html, apetrechos.html e
adicionais.html) se baseiam em um arquivo de modelo denominado
Pginas_de_catlogo.dwt. A estrutura da pasta do site ter a seguinte aparncia:

414

Captulo 16

Suponha que voc deseje que cada pgina se baseie em um modelo, para conter
um link que indique um arquivo home.html. Abra o modelo
Pginas_de_catlogo, para adicionar o link e selecione a imagem que gostaria de
anexar ao link. Mas, se digitar home.html na caixa de texto do link no inspetor de
propriedades, voc se deparar com o problema do link relativo a documento: ao
salvar o modelo editado, os documentos que se baseiam no modelo iro indicar o
local incorreto porque o link no arquivo de modelo ser interpretado como
relativo pasta Templates, em vez de ser relativo pasta Catalog. Isso significa que
o link home.html no arquivo de modelo indicar a home.html na pasta Templates,
ao invs de ../Catalog/home.html. Ao atualizar os documentos com base no
modelo, o Dreamweaver modificar os links relativos ao documento nos
documentos. Nos documentos da pasta Catalog, um link no arquivo de modelo
que indicar ../Catalog/home.html ser convertido em home.html, mas um link no
arquivo de modelo que indicar home.html ser convertido em ../Templates/
home.html.
Se voc selecionar o arquivo home.html, utilizando o cone de pasta ou o cone do
indicador de arquivos em vez de digitar manualmente o nome do arquivo, o
Dreamweaver atualizar automaticamente todos os documentos com base no
modelo, para utilizar os caminhos relativos corretos para home.html.
Nota: Em alguns casos (como, por exemplo, caminhos de arquivos em manipuladores de
eventos nos modelos) voc no poder utilizar o cone de pasta ou o cone do indicador de
arquivos. Assegure-se de digitar manualmente o caminho correto.

Como definir as regies editveis de um

modelo
Em um modelo, as regies editveis so partes da pgina que podem ser alteradas
nos arquivos com base no modelo. Por exemplo: o texto de um artigo em um
boletim apareceria em uma regio editvel, para que todo o artigo pudesse conter
um texto diferente. As regies bloqueadas (no editveis ) integram o layout de
pgina e permanecem constantes em todas as pginas.
Quando o modelo for criado, todas as suas regies sero bloqueadas. Para torn-lo
til, necessrio tornar algumas regies editveis, desbloqueando-as.
Enquanto o arquivo de modelo estiver sendo editado, possvel fazer alteraes
tanto s regies editveis quanto s bloqueadas. Em um documento com base no
modelo, no entanto, as modificaes podero ser feitas apenas nas regies editveis
do documento; as regies bloqueadas no podero ser alteradas.
Nota: Ao nomear uma regio, no possvel utilizar os seguintes caracteres: aspas
simples ou duplas (' e "), sinais de maior e menor (< >) e "e" comerciais (&).

Como reutilizar o contedo com os modelos e bibliotecas

415

Para definir o contedo de um modelo j existente como uma regio editvel:

No arquivo do modelo, selecione o texto ou contedo que deseja tornar uma

regio editvel.

Siga um dos procedimentos abaixo:

Escolha Modificar > Modelos > Nova regio editvel.

Clique com o boto direito do mouse (no Windows), ou pressione a tecla
Control e clique no texto selecionado (no Macintosh) e, no menu contextual,
escolha Nova regio editvel.
3

Na caixa de dilogo Nova regio editvel, digite um nome exclusivo para a

regio. Em um determinado modelo, no possvel utilizar o mesmo nome
para mais de uma regio editvel.
A regio editvel delimitada por um contorno retangular realado no modelo,
utilizando o conjunto de cores de realce em Preferncias. Uma guia no canto
superior esquerdo da regio exibir o nome da mesma.
possvel marcar como editvel uma tabela inteira ou uma clula de tabela; no
entanto, no possvel marcar vrias clulas de tabela como uma nica regio
editvel. Observe que o Dreamweaver no distinguir entre marcar uma clula
de tabela como editvel e marcar o contedo da clula como editvel.
As camadas e o seu contedo so elementos separados; quando uma camada for
transformada em editvel, a sua posio, assim como o seu contedo, podero
ser alterados; enquanto que a transformao do contedo em editvel permitir
alterar somente o contedo da camada, e no a sua posio. Para selecionar o
contedo da camada, clique na mesma e escolha Editar > Selecionar tudo. Para
selecionar a camada, certifique-se que os elementos invisveis estejam sendo
exibidos e, em seguida, clique no cone que representa a localizao da camada.
Para obter mais informaes sobre as camadas, consulte Como utilizar as
camadas na pgina 439.
Nota: Se o contedo da camada tiver sido transformado em editvel e, posteriormente,
voc desejar tornar editvel a posio do mesmo, remova a regio editvel ao redor do
contedo antes de marcar a camada como editvel. Consulte Como bloquear uma
regio editvel na pgina 421.

Para inserir uma regio editvel vazia em um modelo:

416

Captulo 16

No modelo, coloque o ponto de insero onde deseja incluir uma

regio editvel.

Escolha Modificar > Modelos > Nova regio editvel.

Na caixa de dilogo Nova regio editvel, digite o nome da regio.

O nome da regio, entre chaves ({}), ser inserido no modelo como um
alocador de espao, delimitado por um contorno retangular realado com a cor
de realce apropriada.
Quando o modelo for aplicado a um documento, as chaves e o nome da regio
podero ser selecionados e substitudos por texto, imagens ou qualquer outro
contedo.

Como definir as preferncias de modelo

possvel utilizar as preferncias de realce do Dreamweaver para personalizar as
cores de realce dos contornos em volta das regies editveis e bloqueadas de um
modelo. A cor da regio editvel aparecer no modelo, bem como nos documentos
que se basearem no mesmo. A cor da regio bloqueada aparecer somente nos
documentos que se basearem no modelo.
Para alterar as cores de realce do modelo:

Escolha Editar > Preferncias e, em seguida, selecione a categoria Realce.

Clique na caixa de cor Regies editveis e selecione a cor de realce, utilizando o

seletor de cores, ou digite o valor hexadecimal correspondente cor de realce na
caixa de texto. Faa o mesmo para as regies bloqueadas. Para obter
informaes sobre como utilizar o seletor de cores, consulte Como trabalhar
com as cores na pgina 91.

Clique na opo Mostrar, para ativar ou desativar a exibio dessas cores na

janela do documento.

Clique em OK.

Para exibir as cores de realce na janela do documento:

Escolha Exibir > Auxlios visuais> Elementos invisveis.

As cores de realce aparecero na janela do documento apenas quando a opo
Exibir > Auxlios visuais > Elementos invisveis estiver ativa e as opes
apropriadas estiverem ativas nas preferncias de realce.
Nota: Se os elementos invisveis forem exibidos mas as cores de realce no, escolha
Editar > Preferncias e certifique-se de que a opo Mostrar, ao lado da cor de realce
apropriada tenha sido selecionada. Assegure-se, tambm, de que a cor escolhida esteja
visvel em relao a cor de fundo da pgina. Caso seja daltnico, talvez tenha que alterar a
cor de realce, do padro para uma cor mais viva.

Como reutilizar o contedo com os modelos e bibliotecas

417

Como exibir as regies editveis e bloqueadas

Em arquivos de modelos e documentos com base nos modelos, as regies editveis
aparecero na visualizao do projeto da janela do documento entre contornos
retangulares, na cor de realce apropriada. Uma pequena guia aparecer no canto
superior esquerdo de cada regio editvel, exibindo o nome da mesma.
Nos arquivos de modelos, apenas as regies editveis estaro marcadas com
contornos realados. O contedo das regies editveis e bloqueadas pode ser
alterado.

Tanto as regies
bloqueadas
quanto as
editveis podem
ser modificadas.

As regies editveis
esto entre contornos
realados.

418

Captulo 16

Nos documentos com base em modelos, alm dos contornos de regies editveis, a
pgina inteira estar circundada por um contorno de cor diferente, com uma guia
no canto superior direito, mostrando o nome do modelo no qual o documento se
baseia. Este retngulo realado est presente para lembrar que o documento se
baseia em um modelo e que nada poder ser modificado fora das regies editveis.

Limite realado
ao redor da
pgina.

Apenas as regies
editveis podero
ser modificadas

Nota: Se tentar editar uma regio bloqueada em um documento com base em modelo
quando o realce estiver desativado, o ponteiro do mouse se modificar, indicando que no
possvel clicar na regio.

Como visualizar o cdigo-fonte HTML de regies editveis e

bloqueadas
O contedo editvel marcado no HTML pelos comentrios do Dreamweaver
#BeginEditable e #EndEditable. Tudo entre estes comentrios editvel. O cdigofonte HTML de uma regio editvel, denominado Edit_Region ter a seguinte
aparncia:
<!-- #BeginEditable "Edit_Region" -->
{Edit_Region}
<!-- #EndEditable -->

Como reutilizar o contedo com os modelos e bibliotecas

419

O HTML de uma tabela editvel denominada Editable_Table ter a seguinte

aparncia:
<!-- #BeginEditable "Editable_Table" -->
<table width="77%" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<!-- #EndEditable -->

Nos arquivos de modelo, as regies editveis no so realadas na visualizao de

cdigo da janela do documento (ou no inspetor de cdigo). possvel fazer
alteraes no cdigo-fonte HTML correspondente tanto s regies editveis
quanto s bloqueadas.
Nos documentos com base em modelos, se a sinalizao da sintaxe por cores
estiver ativa, as regies bloqueadas estaro realadas nos editores de cdigo. Para
obter mais informaes sobre a sinalizao da sintaxe por cores, consulte Como
definir as opes da visualizao de cdigo (ou do inspetor de cdigo) na
pgina 364. Apenas o cdigo-fonte HTML correspondente s regies editveis
(no-realadas) poder ser alterado.

O HTML das
regies bloqueadas
estar realado.

Apenas o HTML
correspondente s
regies editveis
poder ser
modificado.

420

Captulo 16

Nota: O Dreamweaver no impede que se digite em regies bloqueadas no inspetor de

cdigo ou na visualizao de cdigo da janela do documento. No entanto, o Dreamweaver
descarta todas as alteraes feitas nas regies bloqueadas. Portanto, seja cuidadoso,
digitando somente em regies editveis.

Como bloquear uma regio editvel

Caso tenha marcado uma regio do arquivo de modelo como editvel e,
subseqentemente, desejar bloque-la (torn-la no-editvel) novamente, utilize o
comando Remover a regio editvel.
Nota: No possvel bloquear uma regio em um arquivo com baseado em modelo. S
possvel bloquear uma regio em um arquivo de modelo.
Para bloquear uma regio (torn-la no-editvel) em um arquivo de modelo:

Escolha Modificar > Modelos > Remover a regio editvel.

Selecione o nome da regio na lista e clique em OK.

A regio ser bloqueada. Ela deixar de ter um nome, j que somente as regies
editveis possuem nome.

Como utilizar os estilos, linhas de tempo, comportamentos e

tags do cabealho nos modelos
Nos documentos com base em modelos, os estilos CSS, as linhas de tempo, os
comportamentos e os tags da seo head (cabealho) no contam com o suporte.
Todos estes elementos inserem informaes na seo head de um documento.
Como a seo head de um documento que se basear em modelo estar bloqueada
(com exceo do ttulo do documento), o Dreamweaver no poder inserir uma
folha de estilos ou cdigo JavaScript em tal documento. Para utilizar estes itens
num documento com base em modelo, necessrio adicion-los ao arquivo de
modelo no qual o documento se baseia. Para permitir que uma folha de estilos de
um arquivo de modelo seja editvel, sem ter que atualizar as pginas a cada vez que
alterar a folha de estilos, utilize uma folha de estilos externa.
Se no for possvel adicionar estes elementos ao arquivo de modelo, possvel
desanexar o documento do modelo, o que tornar editvel a seo head. No
entanto, aps desanexar o documento do modelo, o documento deixar de ser
atualizado quando o modelo for alterado. Consulte Como desanexar um
documento de um modelo na pgina 424.
Para obter mais informaes sobre estes elementos, consulte Como utilizar as
folhas de estilos CSS na pgina 267, Como animar as camadas na pgina 458 e
Como utilizar os comportamentos na pgina 469.

Como reutilizar o contedo com os modelos e bibliotecas

421

Como criar documentos a partir de modelos

Os modelos podem ser utilizados como ponto de partida para novos documentos
ou para serem aplicados a documentos existentes.
Ao criar um novo documento a partir de um modelo, voc poder escolher se o
documento dever permanecer anexado ao modelo. Como padro, quando um
modelo for alterado, o documento que se basear nele ser atualizado, refletindo as
alteraes no modelo. Mas, se voc cancelar a seleo da opo Atualizar a pgina
quando o modelo for alterado, na caixa de dilogo Novo a partir de modelo, o
novo documento ser criado como papel de carta: uma cpia do modelo, que
um arquivo HTML independente, sem regies bloqueadas ou editveis. Neste
caso, a atualizao do modelo no alterar o documento. Em outras palavras, o
cancelamento da seleo desta opo equivale a criar um novo documento a partir
de um modelo e, depois desanexar o documento do modelo.
Nota: A opo de no atualizar o documento quando o modelo for alterado oferecida
para os usurios que desejarem utilizar os modelos como arquivos de papel de carta, um
ponto de partida para criar documentos completamente independentes. Se desejar utilizar
o comportamento de modelo padro do Dreamweaver, no qual os documentos com base
em modelo so atualizados quando o modelo alterado, mantenha a opo selecionada.
Para criar um novo documento com base em modelo, siga um dos procedimentos
abaixo:

Escolha Arquivo > Novo a partir de modelo. Na caixa de dilogo que aparecer,
escolha um modelo. Se no desejar que o novo documento seja atualizado
quando o modelo for alterado, cancele a seleo Atualizar a pgina quando o
modelo for alterado. Em seguida, clique em Selecionar.

Escolha Arquivo > Novo, para criar um novo documento e, em seguida, aplique
nele um modelo, selecionando um modelo na categoria Modelos do painel
Propriedades e clique no boto Aplicar. De forma alternativa, possvel arrastar
um modelo do painel Propriedades para o documento.
Para aplicar um novo modelo a um documento j existente do Dreamweaver:

Abra o documento. Siga um dos procedimentos abaixo:

Clique na visualizao do projeto, na janela do documento e, em seguida,

escolha Modificar > Modelos > Aplicar o modelo pgina. Escolha um modelo
na lista e clique em Selecionar.

Selecione o modelo na categoria Modelos do painel Propriedades e clique no

boto Aplicar.

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

visualizao do projeto da janela do documento.
Nota: Dizer que um modelo foi aplicado a um documento equivale a dizer que um
documento se baseia em um modelo. Estas frases podem ser intercambiadas.

422

Captulo 16

Quando voc aplicar um modelo a um documento existente que ainda no se

baseia em um modelo, o Dreamweaver transformar o documento em uma cpia
do arquivo de modelo, colocando o material da seo existente body (corpo) do
documento em uma nica regio editvel de sua escolha.
Nota: Os comportamentos e outros scripts no documento existente que estiverem
associados ao contedo do body, permanecem na seo head do documento, aps a
aplicao do modelo. Outros itens da seo head do documento existente, como os tags
meta, sero descartados quando o modelo for aplicado.

Quando voc aplicar um novo modelo a um documento existente, que se baseia

em um outro modelo, o Dreamweaver transformar o documento em uma cpia
do novo modelo, colocando o material das regies editveis do documento
existente nas regies editveis correspondentes do novo modelo, sempre que
possvel. O Dreamweaver efetua esta operao comparando os nomes das regies
editveis no documento com os nomes das regies editveis no novo modelo. Para
cada nome de regio que coincidir, o Dreamweaver colocar o contedo existente
de tal regio na nova regio com o mesmo nome.
Por exemplo: suponha que voc deseje experimentar uma nova aparncia para o
site, mas ainda no esteja pronto para alterar todas as pginas. possvel criar um
novo modelo com layout e desenho novos, dando s regies editveis no novo
modelo os mesmos nomes que as do modelo antigo. A seguir, quando aplicar o
novo modelo a uma das pginas, o material das regies editveis da pgina ser
colocado nas regies editveis correspondentes do novo layout.
Se houver regies editveis no modelo antigo que no correspondem s regies no
novo modelo, a caixa de dilogo Escolher a regio editvel para o contedo rfo
indagar qual ser a nova regio editvel de destino do contedo rfo. Escolha
um nome de regio editvel. Todo o contedo das regies editveis sem
correspondncia ser anexado regio escolhida. Todo o contedo rfo do
documento existente dever ser inserido em uma nica regio editvel. Se
selecionar o item Nenhum, em vez do nome da regio, o contedo das regies sem
correspondncia no documento existente ser descartado.
Se voc acreditar que as regies editveis do documento correspondem s regies
editveis do novo modelo que estiver aplicando mas, mesmo assim, a caixa de
dilogo do contedo rfo aparecer, clique em Cancelar, e o novo modelo no ser
aplicado ao documento. Em seguida, possvel examinar as regies editveis do
documento e as regies editveis do modelo, para descobrir quais regies do
documento no aparecem no novo modelo. possvel, ento, adicionar novas
regies com aqueles nomes ao novo arquivo de modelo.
Todas as novas regies editveis que se encontrarem no novo modelo, mas no no
modelo antigo, sero adicionadas ao documento. As novas regies contm o texto
do alocador de espao padro existente no novo arquivo de modelo.
Aps aplicar um modelo a um documento, se os resultados no alcanarem as suas
expectativas, voc poder utilizar a opo Editar >Desfazer a aplicao do modelo,
para reverter ao estado do documento antes da aplicao do modelo.

Como reutilizar o contedo com os modelos e bibliotecas

423

Como localizar as regies editveis do documento

Todas as regies editveis no corpo de um modelo so mostradas em uma lista, na
parte inferior do submenu Modificar > Modelos. Utilize essa lista para selecionar e
editar as regies.
Para localizar uma regio editvel e selecion-la no documento:

Escolha Modificar > Modelos, e selecione o nome da regio na lista, na parte

inferior do submenu.
A regio ser selecionada no documento. possvel digitar texto novo na regio ou
clicar nela, para editar o contedo.
Como desanexar um documento de um modelo
Para alterar as regies editveis e bloqueadas de uma pgina que utiliza um
modelo, necessrio desanexar primeiramente a pgina do modelo. Quando a
pgina estiver desanexada, ela se transformar em um documento normal, sem
regies editveis ou bloqueadas, e perder a conexo a qualquer arquivo de
modelo. Observe que, com isso, a pgina no ser mais atualizada com o modelo.
Para desanexar um documento de um modelo:

Abra o documento a ser desanexado.

Escolha Modificar > Modelos > Desanexar do modelo.

A pgina ser desanexada do modelo e todas as regies se tornaro editveis.

Como atualizar as pginas com base em um

modelo
Quando for feita uma alterao a um modelo, o Dreamweaver solicitar a
atualizao das pginas que o utilizarem. Podem ser utilizados tambm os
comandos de atualizao, para atualizar manualmente a pgina atual ou o site
inteiro. A utilizao dos comandos de atualizao funciona da mesma maneira que
a reaplicao do modelo.
Para obter informaes sobre a edio de modelos, consulte Como criar os
modelos na pgina 411 e Como definir as regies editveis de um modelo na
pgina 415.

424

Captulo 16

Para abrir e modificar o modelo utilizado para criar o documento atual:

Escolha Modificar > Modelos > Abrir o modelo anexado.

Modifique o contedo do modelo como desejar. Para modificar as propriedades

da pgina do modelo, escolha Modificar > Propriedades da pgina. Os
documentos que se basearem em modelos herdaro as propriedades da pgina
dos mesmos, com exceo do ttulo da pgina.

Para atualizar o documento atual, para que utilize a verso mais recente de um
modelo:

Escolha Modificar > Modelos > Atualizar a pgina atual.

Para atualizar o site inteiro ou todos os documentos que utilizarem um modelo
especfico:

Escolha Modificar > 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, escolha o nome do site no menu pop-up

adjacente. Esse procedimento atualizar todas as pginas no site escolhido em
relao ao modelo.

Escolha Arquivos que utilizam e, em seguida, escolha o nome do modelo no

menu pop-up adjacente. Este procedimento atualizar todas as pginas no site
atual s quais tiver sido aplicado o modelo selecionado.
3

Verifique se a opo Modelos est selecionada na opo Atualizar. Para atualizar

os itens de biblioteca simultaneamente, assegure-se de que a opo Itens de
biblioteca esteja selecionada. Consulte Como criar, gerenciar e editar os itens
de biblioteca na pgina 429, para obter mais informaes.

Clique em Iniciar.
O Dreamweaver atualizar os arquivos conforme indicado. Caso voc tenha
selecionado a opo Mostrar o registro, o Dreamweaver fornecer informaes
sobre os arquivos que tentar atualizar, incluindo informaes sobre o xito em
sua atualizao.

Como reutilizar o contedo com os modelos e bibliotecas

425

Como exportar e importar o contedo XML

possvel pensar que um documento com base em modelo contenha um
conjunto de dados representados por pares nome/valor. Cada par consiste em um
nome de regio editvel e no respectivo contedo da regio. Por exemplo: suponha
que um modelo contenha trs regies editveis: nmero_do_item, preo_do_item
e cor_do_item. possvel descrever por completo um documento com base no
modelo, fornecendo o nome do modelo e os trs pares nome/valor
correspondentes s regies editveis.
O Dreamweaver permite exportar os pares nome/valor para um arquivo XML,
para que seja possvel trabalhar com os dados do documento fora do Dreamweaver
(num editor XML, por exemplo, ou num editor de texto, ou at mesmo num
aplicativo de banco de dados). Por outro lado, possvel importar os dados de um
documento XML que estiver estruturado adequadamente para um documento
com base em um modelo do Dreamweaver.
Para exportar as regies editveis do documento como XML:

Escolha Arquivo > Abrir, e abra um documento com base em modelo (que
contenha regies editveis).

Escolha Arquivo > Exportar > Exportar as regies editveis como XML.

Na caixa de dilogo XML, escolha uma notao de tag e clique em OK.

Consulte Como utilizar as notaes de tags XML na pgina 428, para obter
mais detalhes.

Na caixa de dilogo que aparecer, digite o nome do arquivo XML e clique em

Salvar.
O Dreamweaver gerar um arquivo XML contendo o material das regies
editveis do documento. O arquivo XML inclui o nome do modelo no qual o
documento se baseia, assim como o nome e o contedo de cada regio editvel.
Nota: O material nas regies bloqueadas no ser exportado para o arquivo XML.

Para importar um contedo XML:

Escolha Arquivo > Importar >Importar XML para o modelo.

Selecione o arquivo XML e clique em Abrir.

O Dreamweaver criar um novo documento a partir do modelo especificado no

arquivo XML. A seguir, ele preencher o contedo de cada regio editvel do
documento utilizando os dados do arquivo XML. O documento resultante ser
aberto na janela do documento. Se o modelo especificado no for localizado, o
Dreamweaver solicitar a escolha de outro modelo a ser utilizado.

426

Captulo 16

Observe que se o arquivo XML no estiver definido exatamente como o

Dreamweaver espera, talvez no seja possvel importar os dados. Uma soluo para
este problema exportar um arquivo XML fictcio do Dreamweaver, para que
exista um arquivo XML com a estrutura correta. Em seguida, copie os dados do
arquivo original XML para o arquivo XML exportado. O resultado um arquivo
XML com a estrutura correta que contm os dados apropriados, todos prontos
para serem importados.
Sobre o XML
XML significa Extensible Markup Language, uma linguagem de markup para
documentos estruturados. Ele se assemelha a uma generalizao de HTML, que
permite criar os seus prprios tags. XML deriva-se de SGML, a linguagem padro
de markup generalizado; assim como SGML, XML uma linguagem para definir
conjuntos de tags e as relaes entre os mesmos.
Os tags XML se assemelham aos tags HTML: eles consistem de um nome e de
atributos opcionais, delimitados por sinais de maior e menor. Assim como em
HTML, so utilizados um tag de abertura e outro de finalizao (nos quais o
nome do tag precedido por uma barra inclinada) para marcar o contedo entre
os tags. Uma diferena entre as sintaxes que, em XML, um tag vazio (que utiliza
um tag nico, como <img>, ao invs de um tag de abertura e um de finalizao,
contendo texto ou outro material) dever terminar com uma barra inclinada logo
antes do sinal de maior. Por exemplo: um tag <img> em XML poder ter a seguinte
aparncia:
<img src="test.png" />

Realmente, a sintaxe do XML mais rigorosa e estrita do que a do HMTL. Os

arquivos que no estiverem em conformidade rigorosa com a sintaxe do XML
sero rejeitados pelos analisadores XML.
O XML oferece uma maneira de marcar seqncias de caracteres literais, que
podem incluir tags que dispensam a anlise. um elemento denominado seo
CDATA, que inclui uma seqncia de caracteres literal entre colchetes. Qualquer
elemento contido pelos colchetes no ser analisado pelo analisador XML. O
XML exportado pelo Dreamweaver faz uso extensivo das sees CDATA.
Uma introduo completa ao XML no faz parte do escopo deste manual. Para
obter mais informaes sobre o XML, consulte Recursos de tecnologias da Web e
HTML na pgina 25.

Como reutilizar o contedo com os modelos e bibliotecas

427

Como utilizar as notaes de tags XML

O Dreamweaver permite exportar contedos XML utilizando uma das duas
notaes de tags: tags de nomes das regies editveis ou tags XML padro do
Dreamweaver. Escolha a notao que mais se adapte maneira como o contedo
XML ser incorporado ao site da Web.
A maneira mais fcil de examinar as diferenas entre as duas notaes de tags, se
voc compreender a sintaxe XML, confrontar os exemplos. O seguinte cdigo
XML foi exportado de um documento que se baseou em um modelo denominado
newstemplate. O documento contm uma regio editvel definida, conhecida
como News_Story e uma regio editvel padro (doctitle), que contm o tag
title).

Os tags dos nomes de regies editveis utilizam os nomes das regies editveis
do seu documento como tags XML. O contedo de cada regio editvel est
includo como uma seo CDATA. Neste exemplo, o tag doctitle identifica o
ttulo do documento, enquanto o tag News_Story refere-se regio editvel.
<?xml version="1.0"?>
<newstemplate template="/Templates/newstemplate.dwt">
<doctitle>
<![CDATA[<ttulo>Matria ttulo de hoje</ttulo>]]>
</doctitle>
<News_Story>
<![CDATA[<p>Aqui onde a matria deve ser includa.</p>]]>
</News_Story>
</newstemplate>

Os tags XML padro do Dreamweaver utilizam um tag denominado item. O

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

428

Captulo 16

Como criar, gerenciar e editar os itens de

biblioteca
As bibliotecas constituem uma maneira de armazenar elementos de pginas como,
por exemplo, imagens, texto e outros objetos, a serem reutilizados ou atualizados
com freqncia no site da Web. Estes elementos so denominados itens de
biblioteca.
Quando um item de biblioteca for colocado em um documento, o Dreamweaver
inserir uma cpia do cdigo-fonte HTML correspondente ao item no
documento e adicionar um comentrio HTML com uma referncia ao item
externo original. A referncia ao item externo da biblioteca possibilita a
atualizao simultnea do contedo de um site inteiro, por meio da alterao do
item de biblioteca e, em seguida, da utilizao dos comandos de atualizao no
submenu Modificar > Biblioteca.
O Dreamweaver armazena os itens de biblioteca na pasta Library, contida na pasta
raiz local de cada site. Todos os sites possuem a sua prpria biblioteca. Para copiar
um item de biblioteca de um site para outro, utilize o comando Copiar para o site,
no painel Propriedades. Consulte Como gerenciar e inserir propriedades na
pgina 237, para obter mais informaes. Observe que se um item de biblioteca
contiver links, estes ltimos podero no funcionar no novo site. Observe tambm
que as imagens de um item de biblioteca no sero copiadas para o novo site.
Segue um exemplo de utilizao de um item de biblioteca: suponha que esteja
criando um site grande para uma firma. A firma possui um slogan que deseja que
aparea em todas as pginas do site, mas o departamento de marketing ainda est
se decidindo quanto aos detalhes do contedo do slogan. Se criar um item de
biblioteca para conter o slogan e utiliz-lo em todas as pginas, quando o
departamento de marketing fornecer o slogan final, voc poder alterar o item de
biblioteca e automaticamente atualizar todas as pginas que o utilizarem.
Como criar um item de biblioteca
possvel criar um item de biblioteca a partir de qualquer elemento na seo body
de um documento, incluindo texto, tabelas, formulrios, applets de Java, plugins,
elementos ActiveX, barras de navegao e imagens.
No caso de itens vinculados, como as imagens, a biblioteca armazenar somente
uma referncia ao item. O arquivo original dever permanecer no local
especificado para que o item de biblioteca funcione corretamente. Mesmo assim,
ainda poder ser til armazenar uma imagem em um item de biblioteca; por
exemplo: voc poderia armazenar um tag img completo em um item de biblioteca,
que permitiria alterar facilmente o texto alt da imagem, ou at o seu atributo src,
pelo site inteiro. No entanto, no utilize esta tcnica para alterar os atributos de
width e height de uma imagem, a no ser que utilize tambm um editor de
imagens para alterar o tamanho real da imagem.

Como reutilizar o contedo com os modelos e bibliotecas

429

Os itens de biblioteca tambm podem conter comportamentos, porm h

requisitos especiais para a edio dos comportamentos nesses itens; consulte
Como editar um comportamento em um item de biblioteca na pgina 434. Os
itens de biblioteca no podem conter linhas de tempo ou folhas de estilos, porque
o cdigo correspondente a esses elementos integra a seo head (cabealho).
Nota: Em geral, seja cuidadoso quanto mistura de itens de biblioteca e modelos na
mesma pgina. Os resultados podem se tornar confusos.
Para criar um item de biblioteca:

Selecione uma parte de um documento, para salv-la como um item de

biblioteca.

Siga um dos procedimentos abaixo:

Escolha Janela > Biblioteca, e arraste a seleo para a categoria Biblioteca, no

painel Propriedades.

Na parte inferior do painel Propriedades (na categoria Biblioteca), clique no

boto Novo item de biblioteca.

Escolha Modificar > Biblioteca > Adicionar objeto biblioteca.

3

Digite um nome para o novo item de biblioteca.

Cada item de biblioteca ser salvo como um arquivo separado (com extenso
.lbi) na pasta Library da pasta raiz local do site.

Como definir as preferncias de biblioteca

A cor de realce dos itens de biblioteca pode ser personalizada, mostrada ou
ocultada, de acordo com a definio nas preferncias de realce.
Para alterar a cor de realce de itens de biblioteca:

430

Captulo 16

Escolha Editar > Preferncias e, em seguida, selecione a categoria Realce.

Clique na caixa de cor dos itens de biblioteca e selecione a cor de realce

utilizando o seletor de cores ou digite o valor hexadecimal correspondente cor
de realce na caixa de texto. Para obter informaes sobre como utilizar o seletor
de cores, consulte Como trabalhar com as cores na pgina 91.

Selecione Mostrar, para alternar a exibio da cor de realce da biblioteca.

Clique na opo Mostrar, para ativar ou desativar a exibio da cor de realce dos
itens de biblioteca na janela do documento.

Clique em OK, para fechar a caixa de dilogo Preferncias.

Para exibir as cores de realce na janela do documento:

Escolha Exibir > Auxlios visuais > Elementos invisveis.

As cores de realce aparecero na janela do documento, apenas quando a opo
Exibir > Auxlios visuais > Elementos invisveis estiver ativa e as opes
apropriadas estiverem ativas nas preferncias de realce.
Como inserir um item de biblioteca em um documento
Quando um item de biblioteca for adicionado a uma pgina, o contedo atual
ser inserido no documento juntamente com uma referncia ao item de biblioteca.
Para inserir um item de biblioteca em um documento:

Coloque o ponto de insero na janela do documento.

Escolha Janela > Biblioteca.

O painel Propriedades aparecer, exibindo a categoria Biblioteca.

Arraste um item de biblioteca do painel Propriedades at a janela do

documento, ou selecione um item e clique no boto Inserir.
Para inserir o contedo de um item de biblioteca sem criar uma referncia deste
no documento, pressione a tecla Control (no Windows) ou Option (no
Macintosh) enquanto arrasta um item para fora da categoria Biblioteca, no
painel Propriedades. Se inserir um item desta forma, voc poder edit-lo no
documento, mas o documento no ser atualizado quando atualizar as pginas
que utilizam o item de biblioteca.

Como alterar um item de biblioteca

Ao alterar um item de biblioteca, voc poder optar por atualizar todos os
documentos que o utilizam. Se preferir no atualizar, os documentos
permanecero associados ao item de biblioteca. possvel atualiz-los mais tarde,
escolhendo Modificar > Biblioteca > Atualizar as pginas.
Outros tipos de alteraes aos itens de biblioteca incluem a sua renomeao, para
romper a sua conexo com os documentos e modelos, a sua excluso da biblioteca
do site e a recriao de um item de biblioteca perdido.
Nota: Os painis de estilos CSS, de linhas de tempo e de comportamentos no estaro
disponveis durante a edio de um item de biblioteca porque esses itens podem conter
apenas os elementos body. O cdigo das linhas de tempo e das folhas de estilos CSS
integra a seo head, enquanto que o painel Comportamentos no estar disponvel
porque ele insere cdigo nas sees head e body. Para obter instrues sobre a edio de
comportamentos, consulte Como editar um comportamento em um item de biblioteca
na pgina 434. A caixa de dilogo Propriedades de pgina tambm no estar disponvel,
porque um item de biblioteca no pode incluir um tag body ou seus atributos.

Como reutilizar o contedo com os modelos e bibliotecas

431

Para editar um item de biblioteca:

Escolha Janela > Biblioteca.

Aparecer a categoria Biblioteca, no painel Propriedades.

Selecione um item de biblioteca.

Aparecer uma visualizao do item de biblioteca no alto do painel
Propriedades. No possvel editar qualquer elemento na visualizao.

Na parte inferior do painel Propriedades, clique no boto Editar. De maneira

alternativa, clique duas vezes no item de biblioteca.
O Dreamweaver abrir uma nova janela para a edio do item de biblioteca.
Esta janela semelhante a uma janela de documento, mas a sua visualizao do
projeto possui um fundo cinza, indicando a edio do item de biblioteca, ao
invs do documento.

Edite o item de biblioteca e, em seguida, salve as alteraes.

Na caixa de dilogo que aparecer, escolha se deseja atualizar os documentos no

site local que utilizam o item de biblioteca editado:

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 Modificar > Biblioteca > Atualizar a pgina atual, ou Atualizar
as pginas.
Para atualizar o documento atual, para que utilize a verso mais recente de todos
os itens de biblioteca:

Escolha Modificar > Biblioteca > Atualizar a pgina atual.

Para atualizar o site inteiro ou todos os documentos que utilizarem um item de
biblioteca especfico:

Escolha Modificar > Biblioteca > 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, escolha o nome do site no menu pop-up

adjacente. Este procedimento atualizar todas as pginas no site selecionado,
para que utilizem a verso atual de todos os itens de biblioteca.

Escolha Arquivos que utilizam e, em seguida, escolha um item de biblioteca no

menu pop-up adjacente. Este procedimento atualizar todas as pginas no site
atual que utilizarem o item de biblioteca selecionado.

432

Captulo 16

Verifique se a opo Itens de biblioteca est selecionada na opo Atualizar. Para

atualizar os modelos simultaneamente, assegure-se de que a opo Modelos
esteja selecionada. Consulte Como atualizar as pginas com base em um
modelo na pgina 424, para obter mais informaes.

Clique em Iniciar.
O Dreamweaver atualizar os arquivos conforme indicado. Caso voc tenha
selecionado a opo Mostrar o registro, o Dreamweaver fornecer informaes
sobre os arquivos que tentar atualizar, incluindo informaes sobre o xito em
sua atualizao.

Para renomear um item de biblioteca no painel Propriedades:

Clique no nome do item de biblioteca uma vez, para selecion-lo.

Aps uma pequena pausa, clique novamente.

Quando o nome se tornar editvel, digite um novo nome.

Nota: Este mtodo funciona da mesma forma que a renomeao de um arquivo no
Windows Explorer (no Windows) ou no Localizador (no Macintosh). Assim como no
Windows Explorer e no Localizador, assegure-se de fazer uma pequena pausa entre os
cliques. No clique duas vezes no nome; desta forma, o item de biblioteca ser aberto
para edio.

Clique em outro local ou pressione a tecla Enter (no Windows) ou Return (no
Macintosh).

O Dreamweaver indagar se voc deseja atualizar os documentos que utilizam

este item.

Para atualizar todos os documentos no site que utilizarem este item, clique em
Atualizar.

Para evitar a atualizao de qualquer documento que utilizar este item, clique
em No atualizar.
Para excluir um item de uma biblioteca:

Selecione o item na categoria Biblioteca, no painel Propriedades.

Clique no boto Excluir e confirme que deseja excluir o item.

Tenha cuidado, pois aps excluir um item de biblioteca, no ser possvel
utilizar o comando Refazer para recuper-lo. No entanto, talvez voc possa
recri-lo, como descrito no prximo procedimento.
A excluso de um item remove-o da biblioteca, mas no altera o contedo de
qualquer um dos documentos que utilizam o item.

Como reutilizar o contedo com os modelos e bibliotecas

433

Para recriar um item de biblioteca ausente ou excludo:

Selecione uma instncia do item em um documento.

Clique no boto Recriar, no inspetor de propriedades.

Como tornar editveis os itens de biblioteca de um

documento
Se tiver adicionado um item de biblioteca ao documento e desejar edit-lo
especificamente em uma pgina, ser necessrio romper o link entre o item do
documento e a biblioteca. Quando a ocorrncia do item de biblioteca tornar-se
editvel, essa instncia no poder ser atualizada quando o item de biblioteca tiver
sido modificado.
Para tornar editvel um item de biblioteca:

Selecione um item de biblioteca no documento atual.

Clique em Desanexar do original, no inspetor de propriedades.

A ocorrncia selecionada do item de biblioteca perder a cor de realce (se esta
estiver visvel) e no poder mais ser atualizada quando o item de biblioteca
original for alterado.

Como editar um comportamento em um item de biblioteca

Quando for criado um item de biblioteca que contm um elemento com um
anexo de comportamento, o Dreamweaver copiar o elemento e o seu
manipulador de evento o atributo que especifica o evento que disparar a ao
(como onClick, onLoad ou onMouseOver) e que ao dever ser chamada quando
ocorrer o evento para o arquivo do item de biblioteca. O programa no copiar
para o item de biblioteca as funes JavaScript associadas. Em vez disso, quando
voc inserir o item de biblioteca no documento, o Dreamweaver inserir
automaticamente as funes JavaScript apropriadas na seo head do documento
(se elas ainda no estiverem l).
Nota: Se codificar manualmente o JavaScript (se cri-lo sem utilizar os comportamentos
do Dreamweaver), voc poder integr-lo a um item de biblioteca, se utilizar o
comportamento Chamar o JavaScript para executar o cdigo. Se voc no utilizar um
comportamento do Dreamweaver para executar o cdigo, este no ser mantido como
parte do item de biblioteca.

434

Captulo 16

As funes JavaScript no sero armazenadas com o item de biblioteca porque so

elementos da seo head do documento, enquanto os itens de biblioteca podero
conter apenas elementos do body. Por isso, o painel Comportamentos no estar
disponvel durante a edio de um item de biblioteca, pois apenas parte do cdigo
do comportamento (o manipulador de evento) ser includo no item de
biblioteca. preciso inicialmente inserir o item de biblioteca em um documento,
para poder editar o comportamento na biblioteca e, em seguida, tornar editvel o
item no documento. Depois de fazer as alteraes desejadas, possvel recriar o
item de biblioteca, substituindo o item na biblioteca pelo item editado do
documento.
Para obter mais informaes sobre os comportamentos, consulte Como utilizar
os comportamentos na pgina 469.
Para editar um comportamento em um item de biblioteca:

Abra um documento que contenha o item de biblioteca.

Anote o nome do item, bem como os tags que ele contm. Essas informaes
sero necessrias nas etapas 8 e 9.

Selecione o item de biblioteca e clique em Desanexar do original, no inspetor

de propriedades.

Selecione o elemento que contm o comportamento anexado.

Escolha Janela > Comportamentos, para abrir o painel Comportamentos. No

painel Comportamentos, clique duas vezes na ao que deseja alterar.

Na caixa de dilogo que aparecer, faa as alteraes necessrias e clique em OK.

Escolha Janela > Biblioteca, para abrir a categoria Biblioteca, no painel

Propriedades.

Assegure-se de ter gravado o nome exato do item de biblioteca original. Em

seguida, selecione o item de biblioteca original e exclua-o, clicando no boto
Excluir, no painel Propriedades.

Na janela do documento, selecione todos elementos que compem o item de

biblioteca.
Selecione com cuidado exatamente os mesmos elementos contidos no item
de biblioteca original.

No painel Propriedades, clique no boto Novo item de biblioteca e denomine o

novo item com o mesmo nome do que foi excludo na etapa 7.
Certifique-se de utilizar exatamente a mesma grafia e caixa alta ou baixa.

10

Para atualizar o item de biblioteca nos outros documentos do site, escolha

Modificar > Biblioteca > Atualizar as pginas.

11

Na caixa de dilogo Atualizar as pginas, no menu pop-up Procurar em,

selecione Arquivos que utilizam.

Como reutilizar o contedo com os modelos e bibliotecas

435

12

Escolha o nome do item de biblioteca recm-criado no menu pop-up

adjacente.

13

Na opo Atualizar, certifique-se de que os itens de biblioteca tenham sido

selecionados e, em seguida, clique em Iniciar.

14

Quando tiver concludo as atualizaes, 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 especificar o arquivo de origem
de um item, torn-lo editvel, ou recriar um item de biblioteca original aps a
edio de uma ocorrncia dele no documento. Selecione um item de biblioteca no
documento, para abrir o inspetor de propriedades.
Orig. exibe

o nome e a localizao do arquivo de origem do item de biblioteca.

No possvel editar estas informaes.
Abrir abre

o arquivo de origem do item de biblioteca para edio. Isto equivale a

selecionar o item no painel Propriedades e cliquar no boto Editar.
Desanexar do original rompe

o link entre o item de biblioteca selecionado e o seu

arquivo de origem. Quando um item for desanexado, ele poder ser editado em
um documento, mas ele no mais um item de biblioteca e no poder ser
atualizado quando o item de biblioteca original for alterado.
Recriar substitui

o item de biblioteca original pela seleo atual. Utilize esta opo

para recriar itens de biblioteca, se o item de biblioteca original estiver faltando ou
tiver sido excludo acidentalmente.

Como utilizar as server-side includes

As server-side includes (incluses do servidor) so instrues destinadas ao
servidor para que ele inclua o arquivo especificado no documento atual, antes de
enviar o documento ao usurio que o requisitou. Elas se assemelham aos itens de
biblioteca veiculados pelo servidor.
Ao abrir um documento que se encontra no servidor, o servidor processa as
instrues das includes e cria um novo documento em que as instrues so
substitudas pelo contedo do arquivo includo. O servidor, ento, envia este novo
documento ao seu navegador. Ao abrir um documento local em um navegador, no
entanto, no h qualquer servidor para processar as instrues das includes no
documento. Por conseguinte, o navegador abrir o documento sem processar tais
instrues e o arquivo, que deveria ser includo, no aparecer no navegador. Sem
utilizar o Dreamweaver, poder ser difcil visualizar os arquivos locais e conferir a
aparncia que eles tero para os visitantes depois que forem colocados no servidor.

436

Captulo 16

Com o Dreamweaver, no entanto, possvel visualizar os documentos exatamente

como eles aparecero depois de sua colocao no servidor, tanto na visualizao do
projeto quanto na visualizao no navegador. Para poder exibir os arquivos
includos, o Dreamweaver utiliza um conversor que reflete a maneira que o
servidor utilizaria para processar as instrues contidas nas includes.
A colocao de uma server-side include em um documento inserir uma referncia
a um arquivo externo. O contedo do arquivo especificado no ser inserido no
documento. O Dreamweaver exibir o contedo do arquivo externo na janela do
documento, facilitando assim a criao das pginas, porm o arquivo includo no
poder ser editado diretamente em um documento. Para poder editar o contedo
de uma server-side include, voc dever editar diretamente o arquivo a ser
includo. Todas as alteraes feitas no arquivo externo sero automaticamente
transpostas para os documentos que o inclurem.
H dois tipos de server-side includes: Virtual e Arquivo. Escolha qual delas deseja
utilizar, dependendo do tipo de servidor da Web que estiver utilizando:

Se o servidor for um servidor Apache Web, escolha Virtual. Esta a opo

padro no Dreamweaver. No Apache, a opo Virtual funciona em todos os
casos, enquanto Arquivo funciona em apenas alguns casos.

Se o seu servidor for um servidor Microsoft IIS, escolha Arquivo. Virtual

funciona com o IIS somente em circunstncias especficas. Infelizmente, o IIS
no permite que se inclua um arquivo numa pasta acima da pasta atual na
hierarquia de pastas, a no ser que algum software especial tenha sido instalado
no servidor. Se necessitar incluir um arquivo de uma pasta acima na hierarquia
de pastas de um servidor IIS, pergunte ao administrador do sistema se o
software necessrio est instalado.

Para outros tipos de servidores, ou caso voc desconhea o tipo de servidor que
estiver utilizando, pergunte ao administrador do sistema qual opo dever ser
utilizada.
Alguns servidores so configurados para examinar todos os arquivos, verificando a
ocorrncia de server-side includes. Outros servidores so configurados para
examinar somente os arquivos com uma extenso especfica como, por exemplo,
.shtml, .shtm ou .inc. Se uma server-side include no estiver funcionando,
pergunte ao administrador do sistema se necessrio utilizar uma extenso
especial no nome do arquivo que utiliza a include. Por exemplo: se o arquivo se
chama canoa.html, talvez no seja possvel renome-lo como canoa.shtml. Se
desejar que os seus arquivos permaneam com as extenses .html ou .htm, pea ao
administrador do sistema para configurar o servidor para examinar todos os
arquivos (no apenas os arquivos com uma certa extenso) quanto ocorrncia de
server-side includes. Entretanto, a anlise de um arquivo quanto ocorrncia de
server-side includes consome mais tempo. Portanto, as pginas que o servidor
analisar sero veiculadas um pouco mais lentamente do que as outras pginas. Em
funo disso, alguns administradores de sistema no proporcionaro a opo de
anlise de todos os arquivos.

Como reutilizar o contedo com os modelos e bibliotecas

437

Para inserir uma server-side include:

Escolha Inserir > Server-side include, ou clique no boto SSI, na categoria

Comuns, do painel Objetos.

Na caixa de dilogo que aparecer, procure e selecione um arquivo.

Para alterar o arquivo que ser includo:

Selecione a server-side include na janela do documento.

Abra o inspetor de propriedades.

Siga um dos procedimentos abaixo:

Clique no cone correspondente pasta, procure e selecione um novo arquivo

para incluir.

Na caixa de texto, digite o caminho e o nome do novo arquivo para incluir.

Como editar o contedo de uma server-side include
Assim como os itens de biblioteca, as server-side includes so selecionadas como
uma unidade na janela do documento. Diferentemente dos itens de biblioteca, o
cdigo-fonte HTML das server-side includes contido no arquivo includo no
aparecer no inspetor de cdigo ou na visualizao de cdigo da janela do
documento. Em vez disso, ser mostrada a instruo do servidor, cuja aparncia se
assemelha do exemplo abaixo:
<!--#include virtual=/uber/html/footer.html -->

Para poder editar o contedo associado a este arquivo includo, abra o arquivo.
Nota: As server-side includes no podem conter tags head ou body.
Para editar uma server-side include:

Selecione a server-side include na janela do documento ou no inspetor de

cdigo e, em seguida, clique em Editar, no inspetor de propriedades.
O arquivo includo ser aberto na janela do documento.

Edite o arquivo e salve-o.

As alteraes sero transpostas imediatamente para o documento atual e em
qualquer documento subseqente que for aberto e incluir esse arquivo.

438

Captulo 16

17

CAPTULO 17

Como utilizar as camadas

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Uma camada um recipiente das pginas da Web que contm elementos de

pgina em HTML. Ao utilizar camadas na pgina, voc obtm mais controle e
flexibilidade, tornando a pgina dinmica. As camadas foram criadas para serem
utilizadas no desenho da Web, proporcionando aos designers o mesmo tipo de
controle e flexibilidade que eles possuem no design de impresso tradicional.
possvel empilhar uma camada em cima da outra, ocultar algumas enquanto
exibe outras, ou mover uma camada pela tela com uma linha de tempo. Por
exemplo: possvel empilhar uma camada contendo texto sobre uma camada que
apresente uma imagem de fundo. possvel provocar o aparecimento de imagens
na pgina para, subseqentemente, desvanecerem. Tudo isso pode ser feito
utilizando as camadas no Dreamweaver, sem ter que codificar nada em JavaScript
ou HTML.
Uma desvantagem de se utilizar as camadas nas pginas da Web que elas no so
completamente visveis nos navegadores da Web mais antigos. Somente o Internet
Explorer 4.0 e o Netscape 4.0, alm dos navegadores acima, exibem as camadas,
mas nem sempre de forma consistente. Para que todos possam visualizar a sua
pgina da Web, utilize as camadas juntamente com as tabelas. possvel projetar o
layout da pgina utilizando camadas e, depois, converter as camadas em tabelas.
Para obter mais informaes, consulte Como utilizar as tabelas e camadas para o
layout na pgina 455.
Nota: recomendvel utilizar a visualizao de layout para visualizar o layout de pgina
(consulte Como projetar o layout de pgina na pgina 177). A visualizao de layout
uma maneira fcil de implementar a pgina de layout com tabelas como estrutura
subjacente.

439

Sobre as camadas e o cdigo HTML

Quando voc inserir camadas nas pginas da Web, o Dreamweaver inserir o tag
HTML a elas correspondente no cdigo. possvel definir quatro tags diferentes
para as camadas: div, span, layer e ilayer. div e span so os tags mais comuns
e so recomendados, para que a maior parte dos usurios possa visualizar as
camadas. Tanto o Microsoft Internet Explorer 4.0 como o Netscape Navigator 4.0
oferecem suporte s camadas criadas com os tags div e span. Somente as verses
4.0 do Navigator oferecem suporte s camadas criadas com os tags layer e
ilayer (a Netscape no oferece mais suporte nas ltimas verses de navegadores).
As verses mais antigas dos dois navegadores exibiro o contedo de uma camada,
porm no exibiro o posicionamento.
Como padro, o Dreamweaver cria camadas com o tag div e insere o cdigo da
camada na posio do ponto de insero ou no alto da pgina, logo aps o tag
body. Se for criada uma camada aninhada, o Dreamweaver inserir o cdigo
dentro do tag que define a camada-me. Para alterar o tag padro, consulte
Preferncias de camada na pgina 444.
A seguir uma amostra de cdigo HTML para uma camada simples (com a
aparncia que teria no Dreamweaver):
<div id="Layer1" style="position:absolute; visibility:inherit;
width:200px; height:115px; z-index:1">
</div>

A seguir uma amostra de cdigo HTML para uma camada aninhada (com a
aparncia que teria no Dreamweaver):
<div id="Parent" style="position:absolute; left:56px; top:54px; width:124px;
height:158px; z-index:1;">
Contedo da camada-me.
<div id="Nested" style="position:absolute; left:97px; top:114px; width:54px;
height:69px; z-index:1;">
Contedo da camada aninhada.
</div>
</div>

possvel definir as propriedades para posicionar as camadas na pgina. Estas

propriedades incluem esquerda e No alto (coordenadas x e y, respectivamente),
ndice z (tambm denominado ordem de empilhamento) e Visibilidade. Para
obter mais informaes, consulte Como definir as propriedades de camada na
pgina 449.

440

Captulo 17

Como criar camadas na pgina

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

Para desenhar uma camada, clique no boto Desenhar camada, no painel

Objetos e, em seguida, arraste a camada para a janela do documento.

Para inserir uma camada, posicione o ponto de insero na janela do

documento, onde deseja posicionar a camada e, em seguida, escolha Inserir >
Camada.

Para arrastar e soltar uma camada, arraste o boto Desenhar camada, do painel
Objetos at a janela do documento.
Para desenhar mais de uma camada ao mesmo tempo, clique no boto Desenhar
camada, no painel Objetos, e mantenha pressionada a tecla Control (no
Windows), ou Command (no Macintosh), enquanto desenha todas as camadas.
Voc poder continuar a desenhar novas camadas, contanto que no solte a tecla
Control.
Se a opo Elementos invisveis estiver ativada, aparecer um marcador de camada
na janela do documento a cada vez que for desenhada uma camada na pgina. Se
os marcadores de camadas no estiverem visveis e desejar v-los, escolha Exibir >
Auxlios visuais> Elementos invisveis. Para obter mais informaes, consulte
Como definir as preferncias de elementos invisveis na pgina 164.

Como utilizar as camadas

441

Nota: Se a opo Elementos invisveis estiver ativa, os elementos na pgina podero

parecer deslocados. Os elementos invisveis podem ser exibidos apenas na janela do
documento. Portanto, quando a pgina for visualizada em um navegador, os outros
elementos aparecero em suas posies corretas.

Sobre o painel Camadas

O painel Camadas constitui um meio de gerenciar as camadas dos documentos.
Escolha
Janela > Camadas, ou pressione a tecla F11, para abrir o painel Camadas. As
camadas so exibidas como uma lista empilhada de nomes; a primeira camada
criada est na parte inferior da lista, enquanto que a camada criada mais
recentemente est no alto da lista. As camadas aninhadas so exibidas como nomes
conectados s camadas-me. Clique na seta de expanso, para mostrar ou ocultar
as camadas aninhadas.

Utilize o painel Camadas para evitar sobreposies, alterar a visibilidade das

camadas, aninhar ou empilhar camadas e selecionar uma ou mais camadas.

442

Captulo 17

Como aninhar as camadas

As camadas aninhadas foram criadas dentro de uma outra camada. Utilize o painel
Camadas ou as tcnicas de insero, arrastar e soltar ou de desenho para criar
camadas aninhadas.
O aninhamento utilizado regularmente para agrupar as camadas. Uma camada
aninhada se move com a sua camada-me e pode ser definida para herdar a
visibilidade da me.

Se deseja forar o aninhamento automtico das camadas, defina as preferncias das

camadas enquanto as desenha na pgina. Escolha Editar > Preferncias, selecione
Camadas e clique na caixa de seleo Aninhamento. Todas as camadas que forem
desenhadas dentro de outras camadas sero automaticamente aninhadas. Para
obter mais informaes, consulte Preferncias de camada na pgina 444.
Nota: Utilize o ajuste de redimensionamento da Netscape quando estiver utilizando
camadas aninhadas na pgina (Comandos > Adicionar/Remover o ajuste de
redimensionamento da Netscape). De outra forma, as camadas perdero a sua posio na
verso 4.0 da Netscape.
Para criar uma camada aninhada, siga um dos procedimentos abaixo:

Para inserir uma camada aninhada, posicione o ponto de insero dentro de

uma camada existente e escolha Inserir > Camada.

Para arrastar e soltar uma camada aninhada, arraste o boto Desenhar camada,
no painel Objetos e, em seguida, solte-o dentro de uma camada existente.

Para desenhar uma camada aninhada, clique no boto Desenhar camada, no

painel Objetos e, em seguida, arraste a camada para dentro de uma outra
camada. Se Aninhamento estiver desativado nas preferncias de camada,
mantenha pressionada a tecla Alt (no Windows), ou Option (no Macintosh),
para desenhar uma camada dentro de outra j existente.

Como utilizar as camadas

443

Para criar uma camada aninhada utilizando o painel Camadas:

Escolha Janela > Camadas, ou pressione a tecla F11, para abrir o painel
Camadas.

Selecione uma camada no painel Camadas e, em seguida, mantenha

pressionada a tecla Control (no Windows), ou Command (no Macintosh) e
arraste a camada at a camada de destino no painel Camadas.

Solte o boto do mouse quando aparecer uma caixa ao redor do nome da

camada de destino.

Preferncias de camada
Utilize as preferncias de camada para ajustar as definies padro das novas
camadas criadas. Escolha Editar > Preferncias e, em seguida, clique em Camadas,
para alterar as preferncias de camada.
Tag define

o tag HTML padro a ser utilizado na criao de camadas. As opes

so DIV (padro), span, layer ou ilayer. div ou span so recomendadas para
assegurar que as camadas funcionaro em todos os navegadores das verses 4.0 e
mais recentes. layer e ilayer funcionam apenas nos navegadores Netscape 4.x.
Visibilidade determina

se as camadas sero visveis como padro.

e altura definem a largura e altura padro das camadas criadas pelo

comando Inserir > Camada.
Largura

Cor de fundo determina

a cor de fundo padro. Selecione a cor no seletor de cores.

Imagem de fundo especifica

uma imagem de fundo padro. Clique em Procurar,

para localizar o arquivo no computador, ou digite o caminho at o arquivo de
imagem na caixa de texto.
Aninhamento torna

aninhada uma camada desenhada dentro dos limites de outra

j existente. Mantenha pressionada a tecla Alt (no Windows), ou Option (no
Macintosh), para alterar essa definio temporariamente enquanto desenha a
camada.
insere JavaScript no contedo head de um
documento e corrige um problema conhecido nos navegadores Netscape 4.x, que
acarreta a perda das coordenadas de posicionamento das camadas quando um
usurio redimensionar a janela do navegador. JavaScript fora a pgina a ser
recarregada a cada vez que a janela do navegador for redimensionada, atribuindo a
posio correta s camadas. O JavaScript tambm pode ser adicionado ou
removido, atravs da escolha de Comandos > Adicionar/remover o ajuste de
redimensionamento da Netscape.
Compatibilidade do Netscape 4

444

Captulo 17

Como manipular as camadas

As camadas podem ser selecionadas, redimensionadas ou ativadas durante o
trabalho no layout da pgina. necessrio selecionar uma camada, para poder
mov-la, redimension-la ou alinh-la. O redimensionamento das camadas
permite alterar as dimenses de uma nica camada ou tornar iguais as alturas e
larguras de duas ou mais camadas. A ativao das camadas permite apenas a
insero do seu contedo.
Para evitar que as camadas se sobreponham quando forem movidas ou
redimensionadas, utilize a opo Evitar sobreposies. Consulte Como evitar as
sobreposies de camadas na pgina 456.
Como selecionar as camadas
Selecione uma ou mais camadas, para tornar iguais as suas larguras e alturas,
reposicion-las, alinh-las, etc. Para obter uma lista completa de opes, consulte
Como definir as propriedades de camada na pgina 449.
Para selecionar uma camada, siga um dos procedimentos abaixo:

Clique no nome da camada, no painel Camadas.

Clique na ala de seleo da camada. Se a ala no estiver visvel, clique em
qualquer ponto dentro da camada para torn-la visvel.

Clique na borda de uma camada.

Se nenhuma camada estiver ativa ou selecionada, mantenha pressionada a tecla
Shift enquanto clica dentro de uma camada.

Se houver mltiplas camadas selecionadas, clique dentro de uma delas

enquanto mantm pressionadas as teclas Control e Shift (no Windows), ou as
teclas Command e Shift (no Macintosh). Esta opo ir cancelar a seleo de
todas as camadas e selecionar apenas aquela que foi escolhida.

Clique no marcador da camada, na janela do documento, que representa o local

da camada no cdigo HTML. Se o marcador da camada no estiver visvel,
escolha Exibir > Auxlios Visuais > Elementos invisveis.

Como utilizar as camadas

445

Para selecionar camadas mltiplas, siga um dos procedimentos abaixo:

Pressione a tecla Shift enquanto clica nos nomes de duas ou mais camadas, no
painel Camadas.

Pressione a tecla Shift e clique dentro ou na borda de duas ou mais camadas.

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

Para redimensionar arrastando o cursor, selecione a camada e arraste qualquer

uma das alas de redimensionamento.

Para redimensionar um pixel por vez, selecione a camada e pressione a tecla

Control e uma das teclas de seta (no Windows), ou a tecla Option e uma das
teclas de seta (no Macintosh).

Para redimensionar de acordo com o incremento de encaixe na grade, pressione

as teclas Shift, Control e uma das teclas de seta (no Windows), ou Option e
uma das teclas de seta (no Macintosh). Para obter informaes sobre a definio
de incrementos de encaixe na grade, consulte Como encaixar as camadas na
grade na pgina 448.

No inspetor de propriedades, digite os valores da largura e altura.

O redimensionamento de uma camada ir alterar a sua largura e altura. Ele no
definir a extenso do contedo da camada que estar visvel. Para definir a regio
visvel de uma camada, consulte Como definir as propriedades de camada na
pgina 449.

446

Captulo 17

Para redimensionar camadas mltiplas:

Na janela do documento, selecione duas ou mais camadas.

Siga um dos procedimentos abaixo:

Escolha Modificar > Alinhar > Tornar as larguras iguais, ou Modificar > Alinhar
> 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.
Como mover as camadas
Qualquer pessoa que j tenha trabalhado com aplicativos grficos bsicos estar
familiarizada com o procedimento de transferncia de camadas na janela do
documento.
Se a opo Evitar sobreposies estiver ativa, no ser possvel mover uma camada
para que se sobreponha a outra. Consulte Como evitar as sobreposies de
camadas na pgina 456.
Para mover uma ou mais camadas, siga um dos procedimentos abaixo:

Para mover arrastando, selecione as camadas e arraste a ala de seleo da ltima

camada selecionada (realada em preto).

Para mover um pixel por vez, selecione as camadas e utilize as teclas de seta.
Pressione a tecla Shift e uma das teclas de seta, para mover a camada de acordo
com o incremento de encaixe na grade. Para obter informaes sobre a
definio de incrementos de encaixe na grade, consulte Como encaixar as
camadas na grade na pgina 448.
Como alinhar as camadas
Utilize os comandos de alinhamento de camadas, para alinhar uma ou mais
camadas com uma borda da ltima camada selecionada.
Durante o alinhamento de camadas, quando uma camada-me for selecionada e
movida, possvel que as camadas-filhas que no estiverem selecionadas se
movam. Para evitar esse tipo de problema, no utilize camadas aninhadas.

Como utilizar as camadas

447

Para alinhar duas ou mais camadas:

Selecione as camadas.

Escolha Modificar > Alinhar e selecione uma opo de alinhamento.

Por exemplo: se voc selecionar No alto, todas as camadas se movero, de maneira

que as suas bordas superiores assumiro a mesma posio vertical que a borda
superior da ltima camada selecionada (realada em preto).
Como encaixar as camadas na grade
Utilize a grade como um guia visual para posicionar ou redimensionar as camadas
na janela do documento. possvel ativar esta grade para utiliz-la como um guia
enquanto estiver desenhando as camadas. possvel encaixar as camadas
automaticamente na grade e alter-la ou controlar o comportamento de encaixe,
atravs da especificao das definies de grade. O encaixe funcionar
independentemente da visibilidade da grade.
Para exibir a grade, siga um dos procedimentos abaixo:

Escolha Exibir > Grade > Mostrar a grade.

Escolha Exibir > Grade > Editar a grade, e selecione a opo Mostrar a grade.
Para encaixar uma camada:

Escolha Exibir > Grade > Encaixar na grade, para ativar (ou desativar) o encaixe.

Selecione a camada e arraste-a. A camada saltar para a posio de encaixe mais

prxima.

Para alterar as definies de grade:

Clique em Exibir > Grade > Editar a grade, para abrir a clula de dilogo
Definies de grade.

Siga qualquer um dos procedimentos abaixo:

Clique na seta prxima amostra de cor e selecione a cor na paleta ou digite o

nmero hexadecimal na clula. Este recurso controla a cor das linhas da grade.

Selecione Mostrar a grade, para mostrar a grade na janela do documento.

Selecione Encaixar na grade, para possibilitar o encaixe.
Digite o fator de espaamento que deseja e, no menu pop-up, selecione Pixels,
Polegadas ou Centmetros. Este recurso controla a distncia entre as linhas da grade.

Escolha linhas ou pontos para as linhas de grade.

3

448

Captulo 17

Clique em Aplicar, para visualizar as alteraes e, em seguida, em OK, para

fechar a caixa de dilogo.

Como tornar ativas as camadas

Antes de colocar objetos numa camada, esta deve ser ativada. A ativao de uma
camada coloca o ponto de insero em seu interior, reala a sua borda e exibe a
ala de seleo, mas no seleciona a camada.
Para ativar uma camada:

Clique em qualquer ponto dentro da camada.

Como definir as propriedades de camada

Utilize o inspetor de propriedades para especificar o nome e posio de uma
camada, assim como definir outras opes de camadas. Para exibir todas as
seguintes propriedades, clique na seta de expanso, localizada no canto inferior
direito do inspetor de propriedades.

Identidade da camada especifica

um nome que identificar a camada no painel

Camadas e como referncia de scripts. Digite um nome na caixa sem ttulo, no
lado esquerdo do inspetor de propriedades. Utilize apenas caracteres alfanumricos
padro no nome de uma camada. No utilize caracteres especiais, como espaos,
hfens, barras ou pontos. Cada camada deve possuir seu prprio nome exclusivo.
E e A (esquerda

e alto) especificam a posio da camada em relao ao canto

superior esquerdo da pgina ou camada-me (se aninhada).
L e U especificam

a largura e altura da camada. Esses valores sero ignorados se o

contedo da camada exceder o tamanho especificado.
Se div ou span forem definidos como tag padro, os valores padro para local e
tamanho sero expressos em pixels (px). Tambm possvel especificar 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 definio Estouro
controla como as camadas reagiro quando o contedo exceder o tamanho da
camada.

Como utilizar as camadas

449

ndice Z determina o ndice Z (ou ordem de empilhamento) da camada. As

camadas com nmeros mais elevados aparecero acima das camadas com nmeros
menores. Os valores podem ser positivos ou negativos. mais fcil alterar a ordem
de empilhamento das camadas utilizando o painel Camadas do que digitando
valores especficos ao ndice z. Consulte Como alterar a ordem de empilhamento
de camadas na pgina 453.

As camadas da Netscape (que contm os tags layer ou ilayer) tambm podem

ser empilhadas em relao a outras camadas na pgina. Quando voc selecionar
uma camada da Netscape, aparecero duas outras opes no canto inferior direito
do inspetor de propriedades. Utilize a opo A/B para selecionar uma posio de
empilhamento relativa e, em seguida, escolha o nome de outra camada no menu
pop-up direita. A especifica uma camada acima da atual; B especifica uma
camada abaixo da atual.
Vis determina

a condio inicial de exibio da camada (visvel ou no). Utilize

uma linguagem de criao de scripts, como JavaScript, para controlar a
propriedade de visibilidade e exibir dinamicamente o contedo das camadas.
Escolha dentre as seguintes opes:

Default (Padro) no especifica uma propriedade de visibilidade, porm a

maior parte dos navegadores interpreta essa opo como Inherit (Herdar).

Inherit (Herdar) utiliza a propriedade de visibilidade da camada-me.

Visible (Visvel) exibe o contedo da camada, independentemente do valor da
camada-me.

Hidden (Oculto) oculta o contedo da camada, independentemente do valor

da camada-me. Observe que as camadas ocultas criadas com o tag ilayer
ocuparo o mesmo espao, como se estivessem visveis.
Imagem de fundo especifica

a imagem de fundo da camada. Clique no cone

correspondente pasta, para procurar e selecionar um arquivo de imagem, ou
digite o caminho da imagem no campo de texto.
Cor de fundo especifica

a cor de fundo da camada. Deixe esta opo em branco

para especificar um fundo transparente.
Tag determina

o tag HTML a ser usado. span e div so recomendados. layer e

criam camadas no Netscape Navigator que, no entanto, s sero visveis
nos navegadores Netscape Navigator 4.

ilayer

450

Captulo 17

Estouro determina

o que ocorrer se o contedo exceder o tamanho da camada.

Escolha dentre as seguintes opes:

Visible (Visvel) aumenta o tamanho da camada, para que todo o seu contedo
esteja visvel. A camada se expandir para baixo e para a direita.

Hidden (Oculta) mantm o tamanho da camada e corta qualquer contedo

que no caiba na mesma. No so fornecidas barras de rolagem.

Paginao adiciona barras de rolagem camada, independentemente do

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

Automtico faz com que as barras de rolagem apaream apenas quando o

contedo da camada ultrapassar os seus limites.
Corte define

a rea visvel de uma camada e pode ser utilizada para retirar

contedo das margens da camada. Especifique os valores que representam a
distncia, em pixels, dos limites da camadas. As definies A (alto) e E (esquerda)
so relativas camada, e no pgina.
As opes esquerda, no alto e Pg. X, Pg. Y (apenas

com layer e ilayer)

permitem posicionar uma camada em relao sua camada-me. A opo
esquerda, no alto posiciona a camada em relao ao canto superior esquerdo da
camada-me. A opo Pg. X, Pg. Y posiciona a camada em um local absoluto
em relao ao canto superior esquerdo da pgina, independente da posio da
camada-me.

Orig (apenas com layer e ilayer) permite exibir um outro documento HTML
na camada. Clique no cone correspondente pasta, para procurar e selecionar o
documento, ou digite o caminho at o documento. Observe que o Dreamweaver
no exibir essa propriedade na janela do documento.
A/B (apenas

com layer e ilayer) especifica a camada acima (A) ou abaixo (B) da

camada atual, na ordem de empilhamento (ndice z). Somente as camadas
definidas previamente no documento aparecero na lista de nomes de camadas,
situada direita do menu A/B.

Como utilizar as camadas

451

Como definir as propriedades de camadas mltiplas

Quando duas ou mais camadas forem selecionadas, o inspetor de propriedades de
camadas exibir as propriedades de texto e um subconjunto das propriedades
comuns das camadas, que permitiro modificar vrias camadas simultaneamente.
Para selecionar camadas mltiplas, pressione a tecla Shift enquanto seleciona as
camadas. Consulte Como manipular as camadas na pgina 445.

E e A especificam

a posio das camadas em relao ao canto superior esquerdo da

pgina ou camada-me.
L e U especificam

a largura e altura das camadas. Esses valores sero ignorados se o

contedo da camada exceder o tamanho especificado.
Se div ou span forem definidos como tag padro, os valores padro para local e
tamanho sero expressos em pixels (px). Tambm possvel especificar as seguintes
unidades: pc (paicas), pt (pontos), pol (polegadas), mm (milmetros), cm
(centmetros) ou % (percentagem do valor da camada-me). As abreviaturas
devem se seguir ao valor, sem um espao: por exemplo: 3mm.
Vis determina

a condio inicial de exibio da camada. Escolha dentre as

seguintes opes:

Default (Padro) no especifica uma propriedade de visibilidade, porm a

maior parte dos navegadores interpreta essa opo como Inherit (Herdar).

Inherit (Herdar) utiliza a propriedade de visibilidade da camada-me.

Visible (Visvel) exibe o contedo da camada, independentemente do valor da
camada-me.

Hidden (Oculto) exibe o contedo da camada de forma transparente,

independentemente do valor da camada-me. Observe que as camadas ocultas
criadas com os tags layer e ilayer ocuparo o mesmo espao, como se
estivessem visveis.
Tag determina o tag HTML a ser utilizado. span e div so recomendados. layer
e ilayer criam camadas Netscape Navigator, mas sero visveis apenas nos
navegadores Netscape 4.
Imagem de fundo especifica

a imagem de fundo de uma camada. Clique no cone

correspondente pasta, para procurar e selecionar um arquivo de imagem, ou
digite o caminho da imagem no campo de texto.
Cor de fundo especifica

a cor de fundo de uma camada. Deixe esta opo em

branco para especificar um fundo transparente.

452

Captulo 17

Como alterar a ordem de empilhamento de

camadas
Utilize o inspetor de propriedades ou o painel Camadas para alterar a ordem de
empilhamento das camadas. A camada na parte superior do painel Camadas est
situada no alto da ordem de empilhamento.
Em cdigo HTML, a ordem de empilhamento, ou ndice z, determina a ordem
segundo a qual as camadas sero desenhadas em um navegador. O ndice z de cada
camada pode ser alterado no inspetor de propriedades ou no painel Camadas.
Para alterar a ordem de empilhamento das camadas no painel Camadas:

Escolha Janela > Camadas, para abrir o painel Camadas. Siga um dos
procedimentos abaixo:

Selecione e arraste uma camada para cima ou para baixo, de acordo com a
ordem de empilhamento desejada. Aparecer uma linha medida que a camada
for movida. Solte o boto do mouse quando a linha de colocao aparecer na
ordem de empilhamento desejada.

Na coluna Z, clique no nmero da camada que estiver sendo alterada. Digite

um nmero mais alto que o existente, para mover a camada para uma posio
superior na ordem de empilhamento, ou um nmero mais baixo, para mover a
camada at uma posio inferior na ordem de empilhamento.
Para alterar a ordem de empilhamento das camadas com o inspetor de
propriedades:

Escolha Janela > Camadas, para abrir o painel Camadas e examinar a ordem de
empilhamento atual.

Selecione uma camada no painel ou na janela do documento.

No inspetor de propriedades da camada, digite um nmero no campo ndice Z.

Digite um nmero mais alto, para mover a camada at uma posio superior na
ordem de empilhamento.

Digite um nmero mais baixo, para mover a camada at uma posio inferior
na ordem de empilhamento.

Como utilizar as camadas

453

Como alterar a visibilidade das camadas

Ao trabalhar em um documento, voc poder mostrar ou ocultar as camadas, a
fim de examinar a aparncia da pgina sob diversas condies. Utilize o painel
Camadas para alterar a visibilidade das camadas. Utilize o painel Preferncias de
camada para definir a visibilidade padro de novas camadas. Consulte
Preferncias de camada na pgina 444.
Para alterar a visibilidade de uma camada:

Escolha Janela > Camadas, para abrir o painel Camadas.

Na linha da camada que estiver sendo alterada, clique na coluna do cone

representando um olho, para definir a visibilidade desejada.

Um olho aberto significa que a camada est visvel.

Um olho fechado significa que a camada est invisvel.
Se no houver um cone representando um olho, a camada herdar as
definies de visibilidade da camada-me. Quando as camadas no estiverem
aninhadas, a camada-me ser o corpo do documento, que est sempre visvel.

Para alterar a visibilidade de todas as camadas simultaneamente:

454

Captulo 17

Escolha Janela > Camadas, para abrir o painel Camadas.

Clique no cone representando um olho, no alto da coluna do cabealho.

Como utilizar as tabelas e camadas para o

layout
Em vez de utilizar clulas e tabelas de layout na visualizao de layout para criar o
layout (consulte Como projetar o layout de pgina na pgina 177), alguns usurios
preferem trabalhar com camadas e tabelas. O Dreamweaver permite criar o layout
utilizando camadas e, em seguida, convert-las em tabelas, j que os navegadores 3.0
no oferecem suporte a camadas. possvel aprimorar o layout e otimizar o desenho
da pgina movimentando-se entre as diversas camadas e tabelas.
As camadas no podem ser convertidas em tabelas ou vice-versa em um modelo de
documento ou em um documento ao qual tiver sido aplicado um modelo. Crie o
layout original e converta-o antes de salv-lo como um modelo.
Uma tabela ou camada simples no pode ser convertida. S possvel converter
camadas em tabelas e vice-versa para uma pgina inteira.
Se desejar gerar arquivos compatveis com os navegadores das verses 3.0 a partir
do arquivo atual, utilize as opes de converso do menu Arquivo. Consulte
Como converter para obter compatibilidade com a verso 3.0 na pgina 457.
Como converter entre camadas e tabelas
Crie o layout utilizando camadas e, em seguida, converta as camadas em tabelas,
para que o layout possa ser visualizado na maioria dos navegadores.
Para converter camadas em uma tabela:

Escolha Modificar > Converter > Camadas em tabela.

Na caixa de dilogo que aparecer, selecione as opes de layout desejadas.

Mais preciso cria uma clula correspondente a cada camada, alm de quaisquer
outras clulas que forem necessrias manuteno do espao entre as camadas.
Menor: fechar as clulas vazias especifica que as margens das camadas devero
se alinhar se forem posicionadas, de acordo com o nmero especificado de
pixels. Se selecionar esta opo, a tabela resultante ter poucas linhas e colunas
vazias, mas poder no coincidir com o layout estipulado de forma precisa.
Utilizar GIFs transparentes preenche a ltima linha da tabela com GIFs
transparentes. Esse procedimento garante que a tabela ser exibida com as
mesmas larguras de coluna em todos os tipos de navegadores.
Quando esta opo estiver ativa, no ser possvel editar a tabela resultante
arrastando as suas colunas. Quando estiver desativada, a tabela resultante no
apresentar GIFs transparentes, porm a sua aparncia poder variar, de acordo
com o tipo de navegador utilizado.
Centralizar na pgina centraliza a tabela resultante na pgina.
Se esta opo estiver desativada, a tabela ser alinhada esquerda.

Selecione as ferramentas de layout e opes de grade desejadas e clique em OK.

Como utilizar as camadas

455

Para converter uma tabela em camadas:

Escolha Modificar > Converter > 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 448.

Evitar sobreposies de camadas restringe a posio das camadas ao serem

criadas, movidas e redimensionadas, para que no se sobreponham. Consulte
Como evitar as sobreposies de camadas na pgina 456.

Mostrar o painel Camadas exibe o painel Camadas. Consulte Sobre o painel

Camadas na pgina 442.
3

Clique em OK.

As tabelas sero convertidas em camadas. As clulas vazias no sero convertidas

em camadas, a no ser que elas tenham uma cor de fundo.
Nota: Os elementos de pgina que tiverem sido colocados fora das tabelas na pgina
tambm sero colocados em camadas.

Como evitar as sobreposies de camadas

Como as clulas de tabelas no podem se sobrepor, o Dreamweaver no poder
criar uma tabela a partir de camadas sobrepostas. Se estiver planejando converter
as camadas de um documento em tabelas para garantir a compatibilidade com os
navegadores da verso 3.0, utilize a opo Evitar sobreposies, que restringir o
movimento e posicionamento das camadas, de maneira que no haja sobreposio.
Para evitar que as camadas se sobreponham:

Escolha Modificar > Organizar > Evitar sobreposies de camadas, ou ative a

opo Evitar sobreposies, no painel Camadas.

456

Captulo 17

Quando esta opo estiver ativada, uma camada no poder ser criada na frente
de, movida ou redimensionada sobre ou aninhada dentro de uma camada
existente. Se esta opo for ativada depois da criao de camadas sobrepostas,
arraste a camada sobreposta e afaste-a da outra camada. O Dreamweaver no
corrigir as camadas sobrepostas automaticamente na pgina quando a opo
Evitar sobreposies de camadas for ativada.
Quando essa opo e o encaixe estiverem ativos, a camada no se encaixar
na grade, se isto acarretar a sobreposio de duas camadas. Em vez disso, ela se
encaixar na margem da camada mais prxima.
Nota: Certas aes permitem que as camadas se sobreponham, mesmo quando a opo
Evitar sobreposies estiver ativada. Se inserir uma camada a partir do menu, digite
nmeros no inspetor de propriedades ou reposicione as camadas editando o cdigo-fonte
HTML, no inspetor de HTML. possvel provocar a sobreposio ou o aninhamento de
camadas enquanto a opo estiver ativada. Se isto ocorrer, arraste as camadas
sobrepostas at a janela do documento, a fim de separ-las.

Como converter para obter compatibilidade com a verso 3.0

Utilize a opo Converter, no menu Arquivo, para criar uma verso de pgina
compatvel com navegador 3.0, que utiliza camadas. O Dreamweaver criar um
outro documento convertido, preservando o original.
Em geral, estas converses devero ser efetuadas apenas quando voc estiver
inteiramente satisfeito com o arquivo original, j que seria necessrio repetir a
converso a cada vez que esse arquivo for alterado.
Para converter um arquivo a ser utilizado com os navegadores da verso 3.0:

Escolha Arquivo > Converter > Compatvel com navegador 3.0.

Na clula de dilogo que aparecer, escolha se deseja converter camadas em

tabelas, estilos CSS em markup de HTML (estilos de caracteres), ou ambos.

Clique em OK.

O Dreamweaver abrir o arquivo convertido em uma nova janela sem ttulo.

Quando a opo Converter camadas em tabelas ou Ambos for selecionada, todas
as camadas sero substitudas por uma nica tabela, que manter o
posicionamento original.
Nota: No possvel converter as camadas sobrepostas ou fora da pgina, esquerda ou
no alto.

Se a opo Converter estilos CSS em markup de HTML ou Ambos for

selecionada, o markup de CSS ser substitudo, onde for possvel, por estilos de
caracteres HTML. Qualquer markup de CSS que no puder ser convertido em
HTML ser removido. Consulte a Tabela de converso de CSS em markup de
HTML na pgina 278 para obter mais informaes sobre os estilos que so
convertidos e os que so removidos.

Como utilizar as camadas

457

O cdigo de linhas de tempo que anima as camadas ser removido. O cdigo de

linhas de tempo que no estiver relacionado s camadas (comportamentos ou
alteraes origem da imagem, por exemplo) ser executado conforme
especificado. A linha de tempo ser automaticamente rebobinada at o quadro 1.
Para obter mais informaes sobre as linhas de tempo, consulte Como criar uma
animao de linha de tempo na pgina 461.

Como animar as camadas

O HTML dinmico, ou DHTML, refere-se possibilidade de alterar as
propriedades de estilo ou posicionamento de elementos HTML com uma
linguagem de criao de scripts. As linhas de tempo utilizam o HTML dinmico
para alterar as propriedades de camadas e imagens em uma srie temporal de
quadros. Utilize as linhas de tempo para criar animaes que dispensem quaisquer
controles ActiveX, plug-ins ou miniaplicativos de Java (mas no requerem
JavaScript).
As linhas de tempo criam animaes alterando com o tempo a posio, tamanho,
visibilidade e ordem de empilhamento de uma camada. As linhas de tempo
tambm so teis para outras aes que devero ocorrer aps o final da carga da
pgina. Por exemplo: as linhas de tempo podem alterar o arquivo de origem de um
tag de imagem, para que imagens diversas apaream na pgina durante um certo
perodo de tempo. As funes de camadas das linhas de tempo funcionam apenas
nos navegadores das verses 4.0 ou mais avanadas.
Abra o inspetor de HTML para examinar o cdigo de JavaScript gerado por uma
linha de tempo. O cdigo da linha de tempo est na funo MM_initTimelines
dentro de um tag script, no contedo head do documento.
Ao editar o HTML de um documento que contm linhas de tempo, tome
cuidado especial para no mover, renomear ou excluir qualquer elemento ao qual
se refere a linha de tempo.

458

Captulo 17

Painel Linhas de tempo

O painel Linhas de tempo representa a alterao das propriedades das camadas e
imagens ao longo do tempo. Escolha Janela > Linhas de tempo, para abrir o painel
Linhas de tempo.
Clique no painel Linhas de tempo com o boto direito do mouse (no Windows),
ou enquanto mantm pressionada a tecla Control (no Macintosh), para abrir um
menu contextual contendo todos os comandos relevantes.
Menu pop-up Linha de tempo
Cabeote de execuo
Nmeros de quadros

Canal de
comportamentos

Quadros primrios

Canais de animao

Barras de animao
Cabeote de execuo mostra

o quadro da linha de tempo que est em exibio

na pgina.
Menu pop-up Linha de tempo especifica

quais linhas de tempo do documento

esto exibidas no painel Linhas de tempo.
Canais de animao exibem

barras para animar as camadas e imagens.

Barras de animao mostram a durao de cada animao de objeto. Uma nica

linha pode incluir vrias barras, que representam diversos objetos. Barras
diferentes no podem controlar o mesmo objeto no mesmo quadro.
Quadros primrios so

quadros situados em uma barra na qual voc havia

especificado algumas propriedades (como a posio) do objeto. O Dreamweaver
calcula os valores intermedirios dos quadros situados entre os quadros primrios.
Os quadros primrios so indicados por pequenos crculos.
Canal de comportamentos o canal contendo os comportamentos que devero ser

executados em um determinado quadro da linha de tempo.

Como utilizar as camadas

459

Nmeros de quadros indicam

o nmero seqencial de quadros. O nmero entre

os botes Voltar e Executar representa o quadro atual. Controle a durao da
animao ao definir o nmero total de quadros e o nmero de quadros por
segundo (qps). A definio padro de 15 quadros por segundo constitui uma boa
taxa mdia, a ser utilizada na maior parte dos navegadores executados nos sistemas
mais comuns do Windows e Macintosh. possvel que as taxas mais rpidas no
melhorem o desempenho. Os navegadores sempre executam cada quadro
da animao, mesmo se no puderem atingir a taxa de quadros especificada
no sistema do usurio. A taxa de quadros ser ignorada se for mais alta do que o
navegador pode gerenciar.
Opes de execuo
Abaixo, est uma lista das opes de execuo para exibir a animao.

Rebobinar move

o cabeote de execuo at o primeiro quadro da linha de tempo.

Voltar 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.
Execuo automtica inicia a execuo automtica de uma linha de tempo
quando a pgina tiver sido carregada em um navegador. A execuo automtica
anexa um comportamento ao tag body da pgina, que executa a ao Executar a
linha de tempo quando a pgina for carregada.
Loop provoca

a repetio indefinida da linha de tempo quando a pgina estiver

aberta em um navegador. A opo Loop insere o comportamento Ir para o quadro
da linha de tempo, no canal de comportamentos, aps o ltimo quadro da
animao. Clique duas vezes no marcador deste quadro, para editar os parmetros
do comportamento e alterar o nmero de repeties.

460

Captulo 17

Como criar uma animao de linha de tempo

As linhas de tempo criam animaes alterando a posio, tamanho, visibilidade e
ordem de empilhamento das camadas. As linhas de tempo podem alterar tambm
os arquivos de origem de imagens. Assim, possvel criar uma apresentao de
slides de imagem com linhas de tempo.
As linhas de tempo podem mover apenas as camadas. Para mover imagens ou
texto, crie uma camada utilizando o boto Desenhar camada, no painel Objetos e,
em seguida, insira imagens, texto ou qualquer outro tipo de contedo na camada.
Consulte Como criar camadas na pgina na pgina 441.
Para criar uma animao de linha de tempo:

Se desejar animar uma camada, mova-a at o ponto inicial da animao.

Escolha Janela > Linhas de tempo.

Selecione a camada a ser animada.

Certifique-se de ter selecionado o elemento desejado. Para selecionar uma
camada, clique no marcador ou na ala de seleo da camada, ou utilize o
painel Camadas. Consulte tambm Como manipular as camadas na
pgina 445. Quando a camada estiver selecionada, aparecero alas ao seu
redor, como mostra a seguinte ilustrao.
Clique no marcador da camada
para selecion-la

boto Desenhar
camada

Camada selecionada contendo uma imagem

Ao clicar na camada, surgir um ponto de insero piscando dentro da mesma,

porm isto no indica que ela esteja selecionada.

Como utilizar as camadas

461

Escolha Modificar > Linha de tempo >Adicionar objeto linha de tempo, ou

simplesmente arraste o objeto selecionado at o painel Linhas de tempo.
Aparecer uma barra no primeiro canal da linha de tempo. O nome da camada
aparecer na barra.

Clique no marcador do quadro primrio, no final da barra.

Mova a camada na pgina para onde dever estar ao final da animao. Uma
linha aparecer exibindo o caminho da animao na janela do documento.

Se desejar que a camada se mova em uma curva, selecione a respectiva barra de

animao e clique mantendo pressionada a tecla Control (no Windows) , ou a
tecla Command (no Macintosh) e clique num quadro no meio da barra de
animao, para adicionar um quadro primrio na posio do cursor, ou clique
em um quadro no meio da barra de animao e, no menu de atalhos, escolha
Adicionar quadro primrio.
Repita essa etapa para definir 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 eficiente do que a criao
de quadros primrios individuais.
Para criar uma linha de tempo arrastando um caminho:

Selecione uma camada.

Mova a camada at o ponto inicial da animao.

Certifique-se de ter selecionado o elemento correto. Clique no marcador da
camada, na ala de seleo da camada ou utilize o painel Camadas para
selecionar uma camada. Consulte tambm Como manipular as camadas na
pgina 445.

Escolha Modificar > Linha do tempo > Gravar o caminho da camada.

Arraste a camada pela pgina para criar um caminho.

Solte o mouse no ponto em que a animao dever parar.

O Dreamweaver adicionar uma barra de animao linha de tempo com o
nmero apropriado de quadros primrios.

462

Captulo 17

No painel Linhas de tempo, clique no boto Rebobinar; em seguida, mantenha

pressionado o boto Executar, para visualizar a animao.

Como modificar as linhas de tempo

Aps ter definido os componentes bsicos de uma linha de tempo, faa alteraes,
como adicionar e remover quadros, alterar o incio da animao, etc.
Para modificar uma linha de tempo, siga um dos procedimentos abaixo:

Para tornar a animao mais longa, arraste o marcador do quadro final para a
direita. Todos os quadros primrios da animao sero acomodados no novo
espao, mantendo constantes as suas posies relativas. Pressione a tecla Alt (no
Windows), ou Option (no Macintosh) enquanto arrasta o marcador do quadro
final, para impedir que os outros quadros primrios se movam.

Para antecipar ou retardar a chegada da camada posio do quadro primrio,

mova o marcador do quadro primrio para a direita ou esquerda, ao longo da
barra.

Para alterar o incio de uma animao, selecione uma ou todas as barras

associadas animao (pressione a tecla Shift para selecionar mais de uma barra
simultaneamente) e arraste para a esquerda ou direita.

Para alterar a localizao de toda a animao, selecione a barra inteira e arraste

o objeto sobre a pgina. O Dreamweaver ajustar a posio de todos os quadros
primrios. Qualquer tipo de alterao feita com uma barra inteira selecionada
modificar todos os quadros primrios.

Para adicionar ou remover quadros da linha de tempo, escolha Modificar >

Linha de tempo > Adicionar quadro, ou Modificar > Linha de tempo >
Remover o quadro.

Para que a linha de tempo seja executada automaticamente quando a pgina for
aberta em um navegador, clique em Execuo automtica. Esta opo anexar
um comportamento pgina, que executar a ao Executar a linha de tempo
quando a pgina for carregada.

Para que a linha de tempo seja repetida continuamente, clique em Loop. Esta
opo inserir a ao Ir para o quadro da linha de tempo no canal de
comportamentos, aps o ltimo quadro da animao. possvel editar os
parmetros relacionados a esse comportamento, para definir o nmero
de repeties.

Como utilizar as camadas

463

Como alterar as propriedades das imagens e camadas com

as linhas de tempo
Alm de mover as camadas com as linhas de tempo, possvel alterar o arquivo de
origem de uma imagem e a visibilidade, tamanho e ordem de empilhamento de
uma camada.
Para alterar as propriedades de imagens e camadas com uma linha de tempo:

No painel Linhas de tempo, siga um dos procedimentos abaixo:

Selecione um quadro primrio na barra que controla o objeto a ser alterado. Os

quadros inicial e final so sempre primrios.

Para criar um novo quadro primrio, clique em um quadro no meio da barra de

animao e escolha Modificar > Linha de tempo > Adicionar quadro primrio,
ou clique em um quadro da barra de animao enquanto mantm pressionada a
tecla Control (no Windows) ou Command (no Macintosh).
2

Defina 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. Ou utilize os cones representando um olho, no painel
Camadas. Consulte Como alterar a visibilidade das camadas na pgina 454.

Para alterar o tamanho de uma camada, arraste suas alas de

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

Para alterar a ordem de empilhamento de uma camada, digite um novo valor

no campo ndice Z, ou utilize o painel Camadas. Consulte Como alterar a
ordem de empilhamento de camadas na pgina 453.
3

Mantenha pressionado o boto Executar, para examinar a animao.

A camada selecionada estar sempre visvel e no alto da ordem de empilhamento.

464

Captulo 17

Como utilizar mltiplas linhas de tempo

Em vez de tentar controlar todas as aes em uma pgina com uma linha de
tempo, mais fcil trabalhar com linhas de tempo individuais que controlam
partes distintas da pgina. Por exemplo: a pgina poder incluir elementos
interativos que acionam diversas linhas de tempo.
Para gerenciar vrias linhas de tempo, utilize as seguintes opes:

Para criar uma nova linha de tempo, escolha Modificar > Linha de tempo >
Adicionar linha de tempo.

Para remover a linha de tempo selecionada, escolha Modificar > Linha de

tempo > Remover a linha de tempo. Esta opo remover permanentemente
todas as animaes desta linha de tempo.

Para renomear a linha de tempo selecionada, escolha Modificar > Linha de

tempo > Renomear a linha de tempo, ou digite um novo nome no menu popup Linha de tempo, no painel Linhas de tempo.

Para exibir uma outra linha de tempo no painel Linhas de tempo, escolha uma
nova linha de tempo no menu pop-up Linha de tempo, no painel Linhas de
tempo.
Como copiar e colar as animaes
Quando a seqncia de animao o satisfizer, copie e cole-a em outra rea da linha
de tempo, em outra linha de tempo do mesmo documento ou em uma linha de
tempo de outro documento. Tambm possvel copiar e colar vrias seqncias
simultaneamente.
Para recortar ou copiar e colar seqncias de animao:

Clique em uma barra de animao para selecionar uma seqncia. Para

selecionar diversas seqncias, pressione a tecla Shift enquanto clica, ou
pressione a teclas Control e A (no Windows), ou Command e A (no
Macintosh), para selecionar todas as seqncias.

Copie ou recorte a seleo.

Siga um dos procedimentos abaixo:

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.

Como utilizar as camadas

465

Cole a seleo na linha de tempo.

As barras de animao de um mesmo objeto no podem se sobrepor porque
uma camada no pode ocupar dois lugares simultaneamente (nem uma imagem
pode ter duas origens diferentes ao mesmo tempo). Se a barra de animao a ser
colada se sobrepuser a uma outra do mesmo objeto, o Dreamweaver acomodar
automaticamente a seleo at o primeiro quadro sem sobreposio.

H dois princpios a serem levados em conta quando forem coladas seqncias de

animao em um outro documento:

Se voc copiar uma seqncia de animao de uma camada e o novo

documento j contiver uma camada com o mesmo nome, o Dreamweaver
aplicar as propriedades da animao camada existente no novo documento.

Se voc copiar uma seqncia de animao de uma camada e o novo

documento no contiver uma camada com o mesmo nome, o Dreamweaver
colar a camada e o seu contedo do documento original, juntamente com a
seqncia de animao. Para aplicar a seqncia de animao colada a uma
outra camada no novo documento, escolha Alterar o objeto, no menu
contextual e, no menu pop-up, selecione o nome da segunda camada. Se
desejar, exclua a camada colada. Consulte Como aplicar uma seqncia de
animao a um objeto diferente na pgina 466.
Como aplicar uma seqncia de animao a um objeto
diferente
Para economizar tempo, possvel criar uma seqncia de animao e aplic-la a
cada uma das camadas restantes do documento.
Para aplicar uma seqncia de animao existente a outros objetos:

No painel Linhas de tempo, selecione a seqncia de animao e copie-a.

Clique em qualquer quadro do painel Linhas de tempo e cole a seqncia no

quadro.

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

Control e clique (no Macintosh) na seqncia de animao colada e escolha
Alterar o objeto, no menu contextual.

Na caixa de dilogo que aparecer, escolha outro objeto no menu pop-up e

clique em OK.

Repita as etapas 2 a 4 para quaisquer outros objetos aos quais ser associada a
mesma seqncia de animao.

Depois de criada a seqncia de animao, ainda possvel mudar de opinio

sobre as camadas que devero ser animadas; basta seguir as etapas 3 e 4, acima,
(no necessrio copiar ou colar).

466

Captulo 17

Dicas de animao para as linhas de tempo

As seguintes sugestes podem melhorar o desempenho das animaes e facilitar a
sua criao:

Mostre e oculte as camadas, em vez de alterar o arquivo de origem nas

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

Estenda as barras de animao, para criar um movimento mais suave. Se a

animao e as imagens estiverem saltando entre as posies, arraste o quadro
final 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 final do movimento e tambm
provoca o movimento mais lento do objeto. Tente aumentar o nmero de
quadros por segundo (qps) para melhorar a velocidade, porm leve em conta
que a maioria dos navegadores executados nos sistemas mais comuns no
podem animar muito mais rpido do que 15 qps. Teste a animao em diversos
sistemas, com navegadores diferentes, para estabelecer as melhores definies.

No anime mapas de bits grandes. A animao de imagens grandes resulta em

animaes lentas. Em vez disso, crie imagens compostas e mova apenas
pequenas partes da imagem. Por exemplo: mostre o movimento de um carro
animando apenas as suas rodas.

Crie animaes simples. No crie animaes que exijam mais recursos do que
os navegadores atuais podem oferecer. Os navegadores sempre executam cada
quadro de uma animao de linha de tempo, mesmo quando o desempenho do
sistema ou da Internet diminuir.

Como utilizar as camadas

467

Aes de comportamentos para controlar

as linhas de tempo de camadas
Anexe as aes de comportamentos listadas abaixo a um link, boto ou outro
objeto, a fim de controlar as linhas de tempo e as camadas. Para criar efeitos
interessantes, coloque os comportamentos que contm estas aes no canal de
comportamentos. Por exemplo: faa com que uma linha de tempo interrompa a
execuo de si prpria. Para obter mais informaes, consulte Como anexar um
comportamento a uma linha de tempo na pgina 476 e Como utilizar os
comportamentos na pgina 469.
Arrastar a camada permite ao usurio arrastar uma camada. Utilize esta ao para
criar quebra-cabeas, controles deslizantes e outros elementos mveis da interface
do usurio. Consulte Arrastar a camada na pgina 486.
Mostrar/ocultar as camadas mostra, oculta ou restaura a visibilidade padro de
uma ou mais camadas. Esta ao til para mostrar informaes medida que o
usurio interagir com a pgina. Consulte Mostrar/ocultar as camadas na
pgina 501.
Executar a linha de tempo e Parar a linha de tempo permite aos usurios iniciar e
parar a linha de tempo clicando em um link ou boto. Estas aes tambm podem
iniciar e parar uma linha de tempo automaticamente quando o usurio passar o
cursor sobre um link, uma imagem ou outro objeto. Consulte Executar a linha de
tempo e Parar a linha de tempo na pgina 505.
Ir para o quadro da linha de tempo faz com que a linha de tempo salte para um
determinado quadro. A caixa de seleo Loop, no painel Linhas de tempo,
adiciona a ao Ir para o quadro da linha de tempo aps o ltimo quadro da
animao, retornando-a ao primeiro quadro e iniciando a animao novamente.
Consulte Ir para o quadro da linha de tempo na pgina 504.
Definir o texto da camada substitui o contedo e a formatao de uma camada em
uma pgina pelo contedo especificado. O contedo pode incluir qualquer
HTML vlido. Consulte Definir o texto da camada na pgina 498.

468

Captulo 17

18

CAPTULO 18

Como utilizar os comportamentos

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Os comportamentos permitem ao visitante interagir com pginas da Web de

diversas maneiras ou determinar a execuo de certas tarefas. Um comportamento
uma combinao entre um evento e uma ao por ele disparada. No painel
Comportamentos, possvel adicionar um comportamento a uma pgina ao
especificar uma ao e, subseqentemente, o evento que a ir disparar.
Na realidade, os eventos so mensagens geradas por navegadores, que indicam
algum tipo de interao do visitante com a sua pgina. Por exemplo: quando um
visitante mover o ponteiro sobre um link, o navegador gerar um evento
onMouseOver correspondente ao link; em seguida, o navegador verificar se existe
algum cdigo JavaScript a ser chamado quando o evento for gerado. Diferentes
eventos so definidos para diferentes elementos de pgina. Por exemplo: na maior
parte dos navegadores, onMouseOver e onClick so eventos associados a links,
enquanto que onLoad um evento associado a imagens e seo body do
documento.
Uma ao consiste de cdigo previamente escrito em JavaScript, que realiza uma
tarefa especfica, como a abertura de uma janela do navegador, a exibio ou
ocultamento de uma camada, a execuo de um som ou a interrupo de um filme
Shockwave. As aes que so fornecidas com o Dreamweaver so cuidadosamente
escritas pelos programadores do Dreamweaver, para proporcionar o mximo de
compatibilidade entre os diferentes navegadores.
Depois de anexar um comportamento a um elemento da pgina, sempre que o
evento especificado ocorrer para o elemento, o navegador chamar a ao (o
cdigo JavaScript) a ele associado. Os eventos que podem ser utilizados para
disparar uma determinada ao variam de acordo com o navegador utilizado. Por
exemplo: se voc anexar a ao Mensagem pop-up a um link e especificar que ela
ser disparada pelo evento onMouseOver, sempre que algum indicar o link com o
ponteiro do mouse no navegador, a mensagem ser exibida em uma caixa de
dilogo.

469

Um nico evento pode disparar diversas aes e possvel especificar a ordem na

qual estas aes ocorrero.
O Macromedia Dreamweaver proporciona cerca de 24 aes de comportamentos.
possvel ter acesso a outras aes no site de intercmbio da Macromedia na Web,
assim como nos sites de outros programadores. Consulte Como fazer o download
de e instalar os comportamentos de outros fabricantes na pgina 478. Se souber
utilizar os recursos JavaScript, voc poder gravar as suas prprias aes
relacionadas a comportamentos. Para obter mais informaes sobre a gravao de
aes de comportamentos, consulte Extenso dos recursos do Dreamweaver.
Nota: Os termos comportamento e ao se relacionam ao Dreamweaver, e no ao HTML.
Do ponto de vista do navegador, uma ao se assemelha a qualquer outro tipo de cdigo
JavaScript.

O painel Comportamentos
Utilize o painel Comportamentos para anexar comportamentos a elementos de
pgina (mais especificamente, aos tags) e para modificar os parmetros de
comportamentos anexados anteriormente.
Para abrir o painel Comportamentos, escolha Janela > Comportamentos.
O tag que estiver selecionado na janela do documento aparecer na barra de ttulo
do painel Comportamentos. Os comportamentos que j tiverem sido anexados ao
elemento selecionado da pgina aparecero na lista de comportamentos (a rea
principal do painel), em ordem alfabtica, conforme o evento. Se houver diversas
aes para o mesmo evento, estas aparecero na ordem na qual sero executadas.
Se no houver qualquer comportamento na lista de comportamentos, o elemento
selecionado no apresenta qualquer comportamento a ele anexado.
Para obter informaes detalhadas sobre as opes do painel Comportamentos,
consulte a Ajuda do Dreamweaver.

Sobre os eventos
A lista a seguir descreve os eventos que podem ser associados s aes listadas no
menu pop-up Aes (+) do painel Comportamentos. Quando um visitante de sua
pgina da Web interagir com ela clicando em uma imagem, por exemplo o
navegador gerar eventos, que podem ser utilizados para chamar as funes
JavaScript responsveis pela ocorrncia da ao. Os eventos tambm podem ser
gerados sem a interao com o usurio, como no caso da definio de atualizao
automtica de uma pgina a cada 10 segundos. O Dreamweaver possui muitas
aes comuns que podem ser disparadas atravs da utilizao destes eventos.

470

Captulo 18

A lista tambm especifica o navegador que pode gerar cada evento. NS3
corresponde ao Netscape Navigator 3.0; NS4 corresponde ao Netscape Navigator
4.0; IE3 corresponde ao Internet Explorer 3.0; IE4 corresponde ao Internet
Explorer 4.0. Para obter mais informaes sobre os eventos no Internet Explorer,
consulte a pgina de eventos de HTML dinmico da Microsoft (disponvel em
Recursos de tecnologias da Web e HTML na pgina 25).
Observe que a maior parte dos eventos s poder ser utilizada com certos
elementos de pgina. Para determinar os eventos correspondentes a um
determinado elemento de pgina que recebem o suporte de um determinado
navegador, insira o elemento de pgina no documento e anexe um
comportamento a ele. Em seguida, consulte o menu pop-up Eventos, no painel
Comportamentos. Para obter uma consulta bem detalhada dos tags que podero
ser utilizados em associao a um evento e navegador determinados, procure o
evento em um dos arquivos da pasta Dreamweaver/Configuration/Behaviors/
Events.
onAbort (NS3,

NS4, IE4, IE5) gerado quando o visitante interromper a

transferncia de uma imagem no navegador (por exemplo: quando clicar no boto
Parar do navegador enquanto a imagem estiver sendo transferida).

onAfterUpdate (IE4,

IE5) gerado quando um elemento de dados ligados na

pgina tiver terminado a atualizao da origem dos dados.

onBeforeUpdate (IE4,

IE5) gerado quando um elemento de dados ligados na

pgina tiver sido alterado e prestes a perder o foco (e, portanto, prestes a atualizar
a origem dos dados).
onBlur (NS3,

NS4, IE3, IE4, IE5) o oposto de onFocus. O evento onBlur

gerado quando o elemento especificado deixar de ser o foco da interao com o
visitante. Por exemplo: quando um visitante clicar fora de um campo de texto
depois de ter clicado nele, o navegador gerar um evento onBlur para o campo de
texto.
onBounce (IE4,

IE5) gerado quando o contedo de um elemento do letreiro

tiver alcanado os limites deste.

onChange (NS3,

NS4, IE3, IE4, IE5) gerado quando o visitante alterar um

valor na pgina, como na escolha de um item de um menu, ou quando alterar o
valor de um campo de texto e, em seguida, clicar em outro local da pgina.
onClick (NS3, NS4, IE3, IE4, IE5) gerado quando o visitante clicar no elemento

especificado, como um link, boto ou mapa de imagens. O clique no ser

efetuado at que o visitante solte o boto do mouse; utilize o evento
onMouseDown para provocar uma ao assim que o boto for pressionado.
onDblClick (NS4,

IE4, IE5) gerado quando o visitante clicar duas vezes no

elemento especificado. Clicar duas vezes definido como a ao de pressionar
rapidamente e soltar o boto do mouse enquanto se indica um elemento.

onError (NS3,

NS4, IE4, IE5) gerado quando ocorrer um erro do navegador

enquanto uma pgina ou imagem estiver sendo transferida.

Como utilizar os comportamentos

471

onFinish (IE4,

IE5) gerado quando o contedo de um elemento do letreiro tiver

concludo um loop.
onFocus (NS3,

NS4, IE3, IE4, IE5) gerado quando o elemento especificado se

tornar o foco da interao com o visitante. Por exemplo: a ao de clicar em um
campo de texto de um formulrio gera um evento onFocus.

onHelp (IE4, IE5) gerado quando o visitante clicar no boto Ajuda do navegador

ou escolher Ajuda, no menu do navegador.

onKeyDown (NS4,

IE4, IE5) gerado assim que o visitante pressionar qualquer

tecla. No necessrio que o visitante solte a tecla para que este evento seja gerado.
O navegador no poder detectar a tecla que foi pressionada.
onKeyPress (NS4,

IE4, IE5) gerado assim que o visitante pressionar e soltar

qualquer tecla; este evento equivale combinao dos eventos onKeyDown e onKeyUp.
O navegador no poder detectar a tecla que foi pressionada.
onKeyUp (NS4,

IE4, IE5) gerado assim que o visitante soltar uma tecla aps tla pressionado. O navegador no poder detectar a tecla que foi pressionada.
onLoad (NS3,

NS4, IE3, IE4, IE5) gerado quando uma imagem ou pgina tiver
terminado de ser transferida.
onMouseDown (NS4, IE4, IE5) gerado quando o visitante pressionar o boto do

mouse. No necessrio que o visitante solte o boto do mouse para que este
evento seja gerado.
onMouseMove (IE3,

IE4, IE5) gerado quando o visitante mover o mouse

enquanto indica o elemento especificado. Ou seja, o ponteiro permanece dentro
dos limites do elemento.
onMouseOut (NS3,

NS4, IE4, IE5) gerado quando o ponteiro se afastar do

elemento especificado. Em geral, o elemento especificado uma imagem ou um
link anexado a uma imagem. Em geral, este evento utilizado com o
comportamento Restaurar a imagem permutada, para retornar uma imagem ao
seu estado original quando o visitante deixar de indic-la.

onMouseOver (NS3,

NS4, IE3, IE4, IE5) gerado quando o mouse for

inicialmente movido para indicar o elemento especificado (ou seja, quando o
ponteiro passar a indicar o elemento). Em geral, o elemento especificado para este
evento um link.
onMouseUp (NS4,
onMove (NS4)

IE4, IE5) gerado quando o boto do mouse for solto.

gerado quando uma janela ou moldura for movida.

onReadyStateChange (IE4,

IE5) gerado quando o estado do elemento

especificado for alterado. Os estados do elemento podem ser no inicializado,
carregando e concludo.
onReset (NS3,

NS4, IE3, IE4, IE5) gerado quando um formulrio for

redefinido aos seus valores padro.

472

Captulo 18

onResize (NS4,

IE4, IE5) gerado quando o visitante redimensionar a janela do

navegador ou uma moldura.

onRowEnter (IE4,

IE5) gerado quando o ponteiro de registro da origem dos

dados ligados tiver sido alterado.
onRowExit (IE4, IE5) gerado quando o ponteiro de registro da origem dos dados

ligados estiver prestes a ser alterado.

onScroll (IE4,

IE5) gerado quando o visitante rolar para cima ou para baixo na

pgina.
onSelect (NS3,

NS4, IE3, IE4, IE5) gerado quando o visitante selecionar texto

em um campo de texto.
onStart (IE4, IE5) gerado quando o contedo de um elemento do letreiro iniciar

um loop.
onSubmit (NS3,

NS4, IE3, IE4, IE5) gerado quando o visitante enviar um

formulrio.
onUnload (NS3,

NS4, IE3, IE4, IE5) gerado quando o visitante deixar a pgina.

Como anexar um comportamento

possvel anexar comportamentos ao documento inteiro (ou seja, ao tag body) ou aos
links, imagens, elementos de formulrios ou qualquer um dos vrios elementos
HTML. O navegador de destino que tiver sido selecionado determinar quais eventos
associados a um determinado elemento contaro com suporte. O Internet Explorer
4.0, por exemplo, dispe de um conjunto muito maior de eventos para cada elemento
do que o Netscape Navigator 4.0 ou qualquer navegador da verso 3.0.
Nota: No possvel anexar um comportamento a texto simples. Para obter mais detalhes,
consulte Sobre os comportamentos e texto na pgina 475.

possvel especificar mais de uma ao por evento. As aes ocorrem na ordem

em que aparecem na lista da coluna Aes do painel Comportamentos. Para obter
mais informaes sobre como alterar a ordem das aes, consulte Como alterar
um comportamento na pgina 476.
Para anexar um comportamento:

Selecione um elemento na pgina, como uma imagem ou link, por exemplo.

Para anexar um comportamento pgina inteira, clique no tag <body>, no
seletor de tags situado no canto inferior esquerdo da janela do documento.

Escolha Janela > Comportamentos, para abrir o painel Comportamentos.

O tag HTML do objeto selecionado aparecer na barra de ttulo do
painel Comportamentos.

Como utilizar os comportamentos

473

Clique no boto com o sinal de adio (+) e escolha uma ao no menu pop-up
Aes.
As aes que estiverem esmaecidas no menu no podero ser escolhidas.
possvel que elas estejam esmaecidas porque o documento no apresenta um
objeto necessrio. Por exemplo: a ao Executar a linha de tempo estar
esmaecida se o documento no possuir linhas de tempo, enquanto que a ao
Controlar o Shockwave ou Flash estar esmaecida se o documento no contiver
filmes Shockwave ou Flash. Se no houver qualquer evento disponvel para o
objeto selecionado, todas as aes estaro esmaecidas.
A escolha de uma ao acarretar o aparecimento de uma caixa de dilogo, que
exibir os parmetros e instrues correspondentes ao.

Digite os parmetros relativos ao e clique em OK.

Todas as aes enviadas com o Dreamweaver funcionam com os navegadores
das verses 4.0 e posteriores. Algumas aes no funcionam nos navegadores
mais antigos. Consulte Como utilizar as aes de comportamentos enviadas
com o Dreamweaver na pgina 478.

O evento padro que desencadeia a ao aparecer na coluna Eventos. Se este

no for o evento de desencadeamento desejado, escolha outro evento no menu
pop-up Eventos. Para abrir o menu pop-up Eventos, selecione um evento ou
ao no painel Comportamentos e clique na seta preta para baixo que aparecer
entre o nome do evento e o da ao.
Os eventos que aparecero no menu pop-up Eventos dependero do objeto
selecionado e dos navegadores especificados no submenu Mostrar os eventos de.
possvel que alguns eventos estejam esmaecidos, se os objetos relevantes ainda
no existirem na pgina ou se o objeto selecionado no puder receber eventos.
Se os eventos esperados no aparecerem, certifique-se de que o objeto correto
esteja selecionado ou altere os navegadores de destino no menu pop-up Mostrar
os eventos de.
Se voc estiver anexando um comportamento a uma imagem, alguns eventos
(como onMouseOver) aparecero entre parnteses. Estes eventos estaro
disponveis apenas para os links. Se voc escolher um deles, o Dreamweaver
colocar um tag a em volta da imagem, a fim de definir um link nulo. Na caixa
Link do inspetor de propriedades, o link nulo representado por javascript:;.
possvel alterar o valor do link se desejar torn-lo um link real a outra pgina,
porm, se o link JavaScript for excludo e no for substitudo por outro link, o
comportamento ser removido.

474

Captulo 18

Sobre os comportamentos e texto

No possvel anexar um comportamento a texto simples. Os tags p e span no
geram eventos nos navegadores, portanto no possvel desencadear uma ao a
partir destes tags.
No entanto, possvel anexar um comportamento a um link. Assim, para anexar
um comportamento a um trecho de texto, a abordagem mais simples consiste em
adicionar um link nulo (que no indicar qualquer elemento) ao texto e, em
seguida, anexar o comportamento ao link. Observe que se voc executar este
procedimento, o texto aparecer como um link. possvel alterar a cor do texto e
remover o seu sublinhado se preferir que ele no se assemelhe a um link, porm
possvel que o visitante ao site no perceba que h uma razo para clicar no texto.
Para anexar um comportamento ao texto selecionado:

No inspetor de propriedades, digite javascript:; no campo Link. Assegure-se

de ter includo os sinais de dois pontos e ponto-e-vrgula.
Nota: Ao invs destes, possvel utilizar o sinal # no campo Link, se preferir. O
problema em utilizar o sinal # que quando um visitante clicar no link, o navegador
saltar at o alto da pgina correspondente. O ato de clicar no link nulo de JavaScript
no provocar qualquer efeito sobre a pgina, sendo, portanto, geralmente prefervel.

Mantendo o texto selecionado, abra o painel Comportamentos (Janela >

Comportamentos).

No menu pop-up Aes, escolha uma ao, digite os parmetros a ela

correspondentes e escolha um evento para dispar-la. Para obter mais detalhes,
consulte Como anexar um comportamento na pgina 473.

Para alterar a aparncia de texto com links:

Abra o inspetor de cdigo (Janela > Inspetor de cdigo) ou a visualizao de

cdigo da janela do documento.

Localize o link.

No tag a href do link, insira o seguinte atributo: style="text-decoration:none;

color:black".
Esta definio de atributo desativa o sublinhado e torna preta a cor do texto.
Obviamente, se o texto circundante tiver outra cor, utilize-a em vez da cor
preta.
Para alterar a aparncia de texto com links em toda a pgina ou em todo o site,
utilize os estilos CSS para criar um estilo novo para os links. Para obter mais
detalhes, consulte Como inserir e formatar texto na pgina 251.

Como utilizar os comportamentos

475

Como anexar um comportamento a uma

linha de tempo
Para disparar um comportamento em um determinado quadro de uma linha de
tempo (em vez de esperar que a interao com o visitante o dispare), coloque o
comportamento na linha de tempo. Para obter informaes sobre a criao de
linhas de tempo, consulte Como animar as camadas na pgina 458. Por
exemplo: possvel iniciar a reproduo de um som no quadro 15 de uma linha de
tempo.
Apenas um tipo de evento pode desencadear uma ao em uma linha de tempo: a
animao que atinge um determinado quadro (um evento onFrame7, por exemplo).
Alm dos objetos de uma linha de tempo, o comportamento pode afetar qualquer
objeto na pgina. Visualize a linha de tempo em um navegador, para examinar o
funcionamento do comportamento. No possvel visualizar os comportamentos
no Dreamweaver.
Para colocar um comportamento em uma linha de tempo:

Clique em um quadro do canal de comportamentos, no painel Linhas de

tempo.

Utilize o painel Comportamentos para escolher uma ao a ser executada no

quadro.
A ao aparecer no painel Comportamentos, e um evento indicar o nmero
do quadro no qual ela ser disparada. Aparecer um sinal de subtrao () no
canal de comportamentos do quadro da linha de tempo.

Como alterar um comportamento

Depois de anexar um comportamento, voc poder alterar o evento que dispara a
ao, adicionar ou remover aes e alterar os parmetros relativos s aes.
Para alterar um comportamento:

Selecione um objeto que possua um comportamento a ele anexado.

Escolha Janela > Comportamentos, para abrir o painel Comportamentos.

Os comportamentos aparecero no painel, em ordem alfabtica, segundo o
evento. Se houver diversas aes para o mesmo evento, estas aparecero na
ordem na qual sero executadas.

476

Captulo 18

Escolha dentre as seguintes opes:

Para editar os parmetros de uma ao, clique duas vezes no nome do

comportamento ou selecione-o e pressione a tecla Enter (no Windows), ou
Return (no Macintosh). Em seguida, altere os parmetros na caixa de dilogo e
clique em OK.

Para alterar a ordem das aes de um determinado evento, selecione uma ao e

clique no boto de seta acima ou abaixo.

Para excluir um comportamento, selecione-o e clique no boto com o sinal de

subtrao (), ou pressione a tecla Delete.

Como atualizar um comportamento

Se as suas pginas contiverem comportamentos que tiverem sido criados com as
verses 1 ou 2 do Dreamweaver, esses comportamentos no sero atualizados
automaticamente quando as pginas forem abertas na verso atual do
Dreamweaver. Entretanto, quando voc atualizar uma ocorrncia de um
comportamento em uma pgina (adotando o procedimento exposto abaixo), todas
as outras ocorrncias do comportamento na pgina tambm sero atualizadas. Os
comportamentos que tiverem sido criados com a verso 3 do Dreamweaver
funcionaro sem alteraes na verso 4 deste software.
Para atualizar um comportamento em uma pgina:

Selecione um elemento ao qual tiver sido anexado o comportamento.

Abra o painel Comportamentos.

Clique duas vezes no comportamento.

Clique em OK na caixa de dilogo do comportamento.

Todas as ocorrncias desse comportamento na pgina sero atualizadas.

Como criar novas aes

As aes consistem de cdigo JavaScript e HTML. Se estiver bastante
familiarizado com JavaScript, voc poder escrever novas aes e adicion-las ao
menu pop-up Aes, no painel Comportamentos. Para obter mais informaes,
consulte Extenso dos recursos do Dreamweaver.

Como utilizar os comportamentos

477

Como fazer o download de e instalar

os comportamentos de outros fabricantes
Um dos aspectos mais teis do Dreamweaver a possibilidade de estender os seus
recursos ou seja, ele oferece aos usurios que j esto familiarizados com
JavaScript a oportunidade de escrever o cdigo JavaScript que poder estender os
recursos do Dreamweaver. Muitos destes usurios optaram por compartilhar suas
extenses com outros usurios ao envi-las ao site de intercmbio do Macromedia
Dreamweaver na Web.
Para efetuar o download e instalar novos comportamentos do site de intercmbio:

Abra o painel Comportamentos e, no menu pop-up Aes (+), escolha Obter

mais comportamentos.
O navegador primrio ser aberto e o site de intercmbio aparecer.
necessrio estar conectado Web para poder efetuar o download de
comportamentos.

Procure os pacotes.

Efetue o download e instale o pacote de extenso desejado.

Para obter mais detalhes, consulte Como adicionar extenses ao
Dreamweaver na pgina 98.

Como utilizar as aes de comportamentos

enviadas com o Dreamweaver
As aes de comportamento includas com o Dreamweaver foram criadas para que
funcionem com todas as verses do Netscape Navigator 4, e nas verses 4.0 e mais
avanadas do Internet Explorer. O Netscape Navigator 5 nunca foi lanado
externamente e o Netscape Navigator 6 ainda no havia sido lanado quando este
manual foi escrito.
Nota: As aes do Dreamweaver foram escritas para que possam ser executadas no
maior nmero possvel de navegadores. Se voc remover manualmente o cdigo de uma
ao do Dreamweaver ou substitui-lo por cdigo de sua prpria autoria, possvel que a
compatibilidade com outros navegadores seja perdida.

Embora as aes do Dreamweaver tenham sido escritas visando a maximizar a

compatibilidade entre os diferentes navegadores, algumas aes no funcionam
nas verses mais antigas de alguns navegadores. Alm disso, alguns navegadores
no oferecem qualquer suporte ao JavaScript e muitos usurios que consultam a
Web mantm o JavaScript desativado em seus navegadores. Para obter os melhores
resultados de compatibilidade entre diversas plataformas, fornea interfaces
alternativas delimitadas por tags noscript, de maneira que os usurios que no
contarem com o JavaScript possam utilizar o seu site.

478

Captulo 18

Consulte a tabela abaixo para obter detalhes sobre como funcionam as aes em
determinadas verses anteriores 4.0 do Netscape Navigator e do Internet
Explorer. Para obter uma explicao sobre como cada ao funciona e como
escolher as opes associadas a ela, consulte os tpicos listados aps a tabela .
No Macintosh

No Windows

Ao

Netscape
Navigator 3.0

Internet
Explorer 3.0x

Netscape
Navigator 3.0

Internet
Explorer 3.01

Chamar o
JavaScript

OK

Falha sem
provocar erros

OK

OK

Alterar a
propriedade

OK

Falha sem
provocar erros

OK

OK

Verificar o
navegador

OK

Falha sem
provocar erros

OK

OK

Verificar o plug-in OK

Falha sem
provocar erros

OK

OK

Controlar o
Shockwave ou
Flash

OK

Falha sem
provocar erros

OK

Falha sem
provocar erros

Arrastar a
camada

Falha sem
provocar erros

Falha sem
provocar erros

Falha sem
provocar erros

Falha sem
provocar erros

Ir para a URL

OK

Falha sem
provocar erros

OK

OK

Menu de salto

OK

Falha sem
provocar erros

OK

Falha sem
provocar erros

Opo Ir do
menu de salto

OK

Falha sem
provocar erros

OK

Falha sem
provocar erros

Abrir a janela do
navegador

OK

Falha sem
provocar erros

OK

OK

Executar o som

OK

Falha sem
provocar erros

OK

Falha sem
provocar erros

Mensagem pop- OK
up

Falha sem
provocar erros

OK

OK

Pr-carregar as
imagens

OK

Falha sem
provocar erros

OK

Falha sem
provocar erros

Definir a imagem OK
da barra de
navegao

Falha sem
provocar erros

OK

Falha sem
provocar erros

Definir o texto da OK
moldura

Falha sem
provocar erros

OK

OK

Definir o texto da Falha sem

camada
provocar erros

Falha sem
provocar erros

Falha sem
provocar erros

Falha sem
provocar erros

Como utilizar os comportamentos

479

No Macintosh

No Windows

Ao

Netscape
Navigator 3.0

Internet
Explorer 3.0x

Netscape
Navigator 3.0

Internet
Explorer 3.01

Definir a
mensagem de
status

OK

Falha sem
provocar erros

OK

OK

Definir o texto do OK
campo de texto

Falha sem
provocar erros

OK

OK

Mostrar/ocultar
as camadas

Falha sem
provocar erros

Falha sem
provocar erros

Falha sem
provocar erros

Falha sem
provocar erros

Permutar a
imagem

OK

Falha sem
provocar erros

OK

Falha sem
provocar erros

Restaurar a
imagem
permutada

OK

Falha sem
provocar erros

OK

Falha sem
provocar erros

Ir para o quadro A animao da Falha sem

da linha de tempo origem da
provocar erros
imagem e a
chamada do
Executar a linha comportamento
de tempo e Parar funcionam,
a linha de tempo porm a
animao da
camada falha
sem provocar
erros.

A animao da Falha sem

origem da
provocar erros
imagem e a
chamada do
comportamento
funcionam,
porm a
animao da
camada falha
sem provocar
erros.

Validar o
formulrio

OK

OK

Falha sem
provocar erros

OK

Chamar o JavaScript
A ao Chamar o JavaScript permite utilizar o painel Comportamentos para
especificar a execuo de uma funo ou linha de cdigo personalizada de
JavaScript quando ocorrer um evento. possvel escrever o JavaScript ou utilizar o
cdigo disponvel gratuitamente em diversas bibliotecas de JavaScript na Web.
Para poder utilizar a ao Chamar o JavaScript:

Selecione um objeto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Chamar o JavaScript, no

menu pop-up Aes.

Digite o JavaScript a ser executado ou o nome de uma funo.

Por exemplo: para criar um boto Voltar, digite
if (history.length > 0){history.back()}. Se tiver encapsulado o cdigo em
uma funo, digite apenas o nome da funo (goBack() , por exemplo).

480

Captulo 18

Clique em OK.

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.

Alterar a propriedade
Utilize a ao Alterar a propriedade, para alterar o valor de uma das propriedades
de um objeto (a cor de fundo de uma camada ou a ao relacionada a um
formulrio, por exemplo). As propriedades que podem ser afetadas so
determinadas pelo navegador; um nmero maior de propriedades poder ser
alterado por este comportamento no Microsoft Internet Explorer (IE) 4.0 do que
no IE 3.0 ou nas verses 3.0 e 4.0 do Netscape Navigator. Por exemplo: possvel
definir dinamicamente a cor de fundo de uma camada .
Nota: Utilize esta ao apenas se j estiver muito familiarizado com HTML e JavaScript.
Para poder utilizar a ao Alterar a propriedade:

Selecione um objeto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Alterar a propriedade, no

menu pop-up
Aes.

No menu pop-up Tipo de objeto, escolha o tipo de objeto cuja propriedade

deseja alterar.
O menu pop-up Objeto com nome passar a listar todos os objetos com nome
do tipo selecionado.

Escolha um objeto no menu pop-up Objeto com nome.

Escolha uma propriedade no menu pop-up Propriedade, ou digite o nome da

propriedade no campo de texto.
Para poder examinar as propriedades que podem ser alteradas em cada
navegador, escolha navegadores diferentes ou verses de navegadores diferentes,
no menu pop-up de navegadores. Se estiver digitando o nome de uma
propriedade, certifique-se de utilizar o nome correto da propriedade JavaScript
(e lembre-se de que as propriedades JavaScript so sensveis a maisculas/
minsculas).

Digite o novo valor da propriedade, no campo Novo valor, e clique em OK.

Como utilizar os comportamentos

481

Verifique se o evento padro corresponde ao desejado. Quando o evento

ocorrer, a ao ser executada e a propriedade alterada.
Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.

Verificar o navegador
Utilize a ao Verificar o navegador, para enviar os visitantes a outras pginas,
dependendo da marca e verso do seu navegador. Por exemplo: possvel optar
por enviar os usurios para uma pgina, se eles estiverem utilizando a verso 4.0
ou mais avanada do Netscape Navigator; para outra pgina, se utilizarem a verso
4.0 ou mais avanada do Microsoft Internet Explorer 4.0, ou por mant-los na
mesma pgina, caso estiverem utilizando qualquer outro navegador.
til anexar este comportamento ao tag body de uma pgina que seja compatvel
com praticamente qualquer navegador (e que no utilize outro JavaScript); desta
maneira, mesmo os visitantes que chegarem pgina com o JavaScript desativado
podero ver algo.
Uma outra opo seria anexar este comportamento a um link nulo (<um
href="javascript:;">, por exemplo), de forma que a ao determinasse o destino
do link, com base na marca e verso do navegador do visitante.
Para poder utilizar a ao Verificar o navegador:

Selecione um objeto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Verificar 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?

Especifique uma verso do Netscape Navigator.

Nos menus pop-up adjacentes, escolha as opes que indicam as aes a serem
tomadas se a verso do navegador corresponder ou for mais avanada do que a
verso do Netscape Navigator especificada e como proceder no caso contrrio.
As opes so Ir para a URL, Ir para a URL Alt. e Continuar nesta pgina.

482

Captulo 18

Especifique 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
verso do Internet Explorer especificada 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 especificar as

aes a serem tomadas se o navegador no for o Netscape Navigator ou o
Microsoft Internet Explorer. Por exemplo: possvel que o visitante esteja
utilizando um navegador com base em texto, como o Lynx.
Continuar nesta pgina a melhor opo para os navegadores diferentes do
Navigator e IE porque a maioria no oferece suporte ao JavaScript e, se no
puderem ler este comportamento, eles permanecero na pgina de qualquer
maneira.

Digite os caminhos e nomes de arquivos da URL e da URL alternativa nos

campos de texto situados na parte inferior da caixa de dilogo. Se digitar uma
URL remota, digite tambm o prefixo http://, alm do endereo www.

10

Clique em OK.

11

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de. Lembre-se de que o objetivo deste comportamento
o de verificar 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 Verificar o plug-in, para enviar os visitantes a outras pginas,
dependendo da ocorrncia de um determinado plug-in instalado. Por exemplo:
possvel optar por enviar os usurios para uma pgina se eles possurem o
Shockwave, ou para outra pgina, se no contarem com ele.
Nota: No possvel detectar determinados plug-ins no Microsoft Internet Explorer (IE)
utilizando o JavaScript. Contudo, a seleo de Flash ou Director adicionar o cdigo
VBScript apropriado pgina, a fim de detectar os plug-ins no IE do Windows. A
deteco de plug-ins no possvel no IE que estiver sendo executado no Macintosh.
Para poder utilizar a ao Verificar o plug-in:

Selecione um objeto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Verificar o plug-in, no

menu pop-up Aes.

Como utilizar os comportamentos

483

No menu pop-up Plug-in, escolha um plug-in, ou clique na tecla Enter e digite

o nome exato do plug-in no campo adjacente.
Utilize o nome exato do plug-in, conforme o especificado 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, especifique uma URL para os

visitantes que contam com o plug-in.
Se especificar uma URL remota, digite tambm o prefixo http:// no endereo.
Para garantir que os visitantes com o plug-in permanecero na mesma pgina,
deixe este campo em branco.

No campo Caso contrrio, ir para a URL, especifique uma URL alternativa

para os visitantes que no contam com o plug-in.
Para garantir que os visitantes sem o plug-in permanecero na mesma pgina,
deixe este campo em branco.

A deteco de plug-ins no possvel no Internet Explorer que estiver sendo

executado no Macintosh, e a maioria dos plug-ins no pode ser detectada no
Internet Explorer que estiver sendo executado no Windows. Como padro,
quando a deteco for impossvel, o visitante ser enviado para a URL listada
no campo Caso contrrio. Para, em vez disso, enviar o visitante para a primeira
URL (Se for localizado), selecione a opo Ir sempre para a primeira URL se a
deteco no for possvel. Quando esta opo estiver selecionada, ela implicar
em aceitar que o visitante dispe do plug-in, exceto se o navegador indicar
explicitamente que o plug-in no est presente.
Em geral, se o contedo do plug-in for parte integral da pgina, selecione a
opo Ir sempre para a primeira URL se a deteco no for possvel; os
visitantes que no dispuserem do plug-in recebero uma notificao do
navegador para que efetuem o download do plug-in. Se o contedo do plug-in
no for uma parte essencial da pgina, no selecione essa opo.
Esta opo se aplica apenas ao Internet Explorer; o Netscape Navigator
sempre capaz de detectar os plug-ins.

Clique em OK.

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.

484

Captulo 18

Controlar o Shockwave ou Flash

Utilize a ao Controlar o Shockwave ou Flash para executar, parar, rebobinar ou
ir para um quadro de um filme Shockwave ou Flash.
Para poder utilizar a ao Controlar o Shockwave ou Flash:

Escolha Inserir > Mdia > Shockwave, ou Inserir > Mdia > Flash, para inserir
um filme Shockwave ou Flash, respectivamente.

Escolha Janela > Propriedades, e digite o nome de um filme, no campo de texto

no alto mais esquerda (ao lado do cone de Shockwave ou Flash). necessrio
dar um nome ao filme, para poder control-lo com a ao Controlar o
Shockwave ou Flash.

Selecione os itens a serem utilizados no controle do filme Shockwave ou Flash.

Por exemplo: se houver uma imagem de um boto Executar a ser utilizada na
reproduo do filme, selecione-a.

Abra o painel Comportamentos (Janela > Comportamentos).

Clique no boto com o sinal de adio (+) e escolha Controlar o Shockwave ou

Flash, no menu pop-up Aes.
Aparecer uma caixa de dilogo com os parmetros.

No menu pop-up Filme, escolha um filme.

O Dreamweaver automaticamente listar os nomes de todos os filmes
Shockwave e Flash do documento. Mais especificamente, o Dreamweaver
apresentar uma lista com os filmes cujos nomes de arquivos terminem com
.dcr, .dir, .swf ou .spl e que estiverem em tags object ou embed.

Escolha uma das aes para executar, parar, rebobinar ou ir para um quadro do
filme. A opo Executar executa o filme a partir do quadro no qual ocorre a
ao.

Clique em OK.

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino no submenu
Mostrar os eventos de, no menu pop-up Eventos.

Como utilizar os comportamentos

485

Arrastar a camada
A ao Arrastar a camada permite ao visitante arrastar uma camada. Utilize esta
ao para criar quebra-cabeas, controles deslizantes e outros elementos mveis de
interface.
possvel especificar, entre outros aspectos, em qual direo o visitante poder
arrastar a camada (horizontal, verticalmente ou em qualquer uma das direes),
um destino at o qual a camada dever ser arrastada, se a camada se encaixar no
destino, se esta estiver distante um certo nmero de pixels, e o que dever ser feito
quando a camada alcanar o destino.
Como a ao Arrastar a camada deve ser chamada antes que a camada possa ser
arrastada pelo visitante, certifique-se de que o evento que disparar a ao ocorrer
antes que o visitante tente arrastar a camada. melhor anexar a ao Arrastar a
camada ao objeto body (com o evento onLoad), embora ela tambm possa ser
anexada a um link que preencha toda a camada (ao redor de uma imagem, por
exemplo) e que utilize o evento onMouseOver.
Para poder utilizar a ao Arrastar a camada:

Escolha Inserir > Camada, ou clique no boto Camada, no painel Objetos, e

desenhe uma camada na visualizao do projeto da janela do documento.

Selecione o tag body, clicando em <body>, no seletor de tags, situado na parte

inferior da janela do documento.

Abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Arrastar a camada, no

menu pop-up Aes.
Se a opo Arrastar a camada no estiver disponvel, provvel que j haja uma
camada selecionada. Como as camadas no aceitam eventos em ambos os
navegadores da verso 4.0, selecione um outro objeto como o tag body ou
um link (um tag) ou, no menu pop-up Mostrar os eventos de, altere o
navegador de destino para IE 4.0.

No menu pop-up Camada, selecione a camada que deseja tornar arrastvel.

No menu pop-up Movimento, escolha Restrito ou No restrito.

O movimento no restrito adequado aos quebra-cabeas e outros jogos que
envolvem o arraste e soltura de elementos. No caso dos controles deslizantes e
cenrios mveis, como gavetas de arquivos, cortinas e mini-persianas, opte pelo
movimento restrito.

486

Captulo 18

Digite os valores do movimento restrito (expressos em pixels) nos campos

Acima, Abaixo, esquerda e direita.
Os valores se relacionam posio inicial da camada. Para restringir o
movimento a uma regio retangular, digite valores positivos nos quatro campos.
Para permitir apenas o movimento vertical, digite valores positivos em Acima e
Abaixo, e zero em esquerda e direita. Para permitir apenas o movimento
horizontal, digite valores positivos em esquerda e direita, e zero em Acima e
Abaixo.

Digite os valores do destino de soltura (em pixels) nos campos esquerda e

Acima.
O destino de soltura o ponto at o qual voc deseja que o visitante arraste a
camada. A camada ter alcanado o destino de soltura quando as suas
coordenadas esquerda e do alto coincidirem com os valores digitados nos
campos esquerda e Acima. Os valores se relacionam ao canto superior
esquerdo da janela do navegador. Clique em Obter a posio atual, para
preencher automaticamente os campos com a posio da camada.

Digite um valor (em pixels) no campo Encaixar, se distante, a fim de

determinar a distncia mnima do destino de soltura da qual o visitante dever
se aproximar para a camada se encaixar no destino.
Quanto maior o valor, mais fcil ser para o visitante detectar o destino de
soltura.

10

No caso de quebra-cabeas simples e manipulaes de cenrios, no h

necessidade de ultrapassar este ponto. Para definir a ala de arraste da camada,
controlar o movimento da camada enquanto estiver sendo arrastada e disparar
uma ao quando a camada for solta, clique na guia Avanado.

11

Para especificar se o visitante dever clicar em uma determinada rea da camada

para que esta seja arrastada, escolha rea dentro da camada, no menu pop-up
Ala de arraste; em seguida, digite as coordenadas da esquerda e do alto, assim
como a largura e altura da ala de arraste.
Esta opo til quando a imagem dentro da camada possuir um elemento que
sugere o arraste, como uma barra de ttulo ou ala de desenho, por exemplo.
No selecione esta opo se preferir permitir ao visitante clicar em qualquer
ponto da camada para poder arrast-la.

Como utilizar os comportamentos

487

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 o JavaScript, a fim de executar repetidamente o
cdigo ou funo enquanto a camada for arrastada. Por exemplo: possvel
gravar uma funo que monitore as coordenadas da camada e exiba indicaes
como voc est prximo ou muito distante do destino de soltura em um
campo de texto.
13

Digite um cdigo JavaScript ou um nome de funo (evaluateLayerPos(), por

exemplo) no segundo campo Chamar o JavaScript, a fim 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.

14

Clique em OK.

15

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de. Lembre-se de que as camadas no contam com o
suporte dos navegadores da verso 3.0.

Nota: No possvel anexar a ao Arrastar a camada a um objeto associado aos eventos

onMouseDown ou onClick.

Como reunir informaes sobre a camada arrastvel

Quando voc anexar a ao Arrastar a camada a um objeto, o Dreamweaver
inserir a funo MM_dragLayer() na seo head do documento. Alm de registrar a
camada como arrastvel, esta funo definir trs propriedades de cada camada
arrastvel MM_LEFTRIGHT, MM_UPDOWN e MM_SNAPPED que voc poder utilizar nas
suas prprias funes JavaScript, a fim de determinar as posies relativas
horizontal e vertical da camada e se a camada atingiu o destino de soltura.
Nota: As informaes fornecidas aqui se destinam ao uso apenas de programadores de
JavaScript que j contem com experincia.

488

Captulo 18

Por exemplo: a funo a seguir exibe o valor da propriedade MM_UPDOWN (a posio

vertical da camada) em um campo de formulrio denominado curPosField. Por
serem dinmicos, os campos de formulrio so teis para exibir informaes
atualizadas continuamente, ou seja, possvel alterar o seu contedo depois que a
pgina tiver sido carregada, tanto no Netscape Navigator quanto no Microsoft
Internet Explorer.
funo getPos(layername){
var layerRef = MM_findObj(layername);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}

Em vez de exibir o valor de MM_UPDOWN ou MM_LEFTRIGHT em um campo de

formulrio, grave uma funo que exiba uma mensagem no campo de formulrio,
dependendo de quo prximo o valor estiver da zona de soltura, ou chame outra
funo que mostre ou oculte uma camada, dependendo do valor. Os limites de sua
imaginao e a sua habilidade de lidar com os recursos JavaScript ditaro como
voc reagir aos valores de MM_UPDOWN ou MM_LEFTRIGHT.
especialmente til ler a propriedade MM_SNAPPED quando houver vrias camadas
na mesma pgina. Todas estas camadas devero alcanar os seus destinos para que
o visitante possa avanar at a prxima pgina ou tarefa. Por exemplo: grave uma
funo que conte quantas camadas possuem um valor de MM_SNAPPED
correspondente a true e chame-a sempre que uma camada for solta. Quando a
contagem de camadas encaixadas atingir o nmero desejado, envie o visitante para
a prxima pgina ou exiba uma mensagem parabenizando-o.
Se voc tiver utilizado o evento onMouseOver para anexar a ao Arrastar a camada a
links localizados em diversas camadas, ser necessrio efetuar uma pequena
alterao funo MM_dragLayer(), para evitar que a propriedade MM_SNAPPED de
uma camada encaixada seja redefinida como false se o ponteiro do mouse for
passado sobre a prpria. Isto poder ocorrer quando tiver utilizado Arrastar a
camada para criar um quebra-cabea, j que provvel que o visitante passe o
ponteiro do mouse sobre as peas j encaixadas enquanto posiciona outras. A
funo MM_dragLayer() no capaz de evitar este comportamento porque algumas
vezes ele prefervel (por exemplo: se desejar definir diversos destinos de soltura
para uma nica camada).
Para evitar o novo registro de camadas j encaixadas:

Faa uma cpia de segurana do documento antes de alterar o cdigo.

possvel faz-lo na janela do site do Dreamweaver, no Windows Explorer (no
Windows) ou no Localizador (no Macintosh).)

Escolha Editar > Localizar.

No menu pop-up Localizar, escolha Origem de HTML.

Digite (!curDrag) no campo de texto adjacente.

Como utilizar os comportamentos

489

Clique em Localizar o prximo.

Se o Dreamweaver indagar se voc deseja continuar a procurar desde o incio do
documento, clique em Sim. O Dreamweaver se deparar com a
seguinte instruo:
if (!curDrag) return false;

Feche a caixa de dilogo Localizar e modifique a instruo na visualizao de

cdigo da janela do documento ou no inspetor de cdigo, para que
corresponda a:
if (!curDrag || curDrag.MM_SNAPPED != null) return false;

Os dois pipes (||) significam "ou", enquanto que curDrag uma varivel que
representa a camada que est sendo registrada como arrastvel. O significado
aproximado da instruo Se curDrag no for um objeto ou se j tiver um
valor MM_SNAPPED, no ser necessrio executar o restante da funo.
Ir para a URL
A ao Ir para a URL abre uma nova pgina na janela ou na moldura especificada.
Esta ao particularmente til para alterar o contedo de duas ou mais molduras
com um clique. Ela tambm pode ser chamada em uma linha de tempo, para que
salte at uma nova pgina depois de um determinado intervalo de tempo.
Para poder utilizar a ao Ir para a URL:

Selecione um objeto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Ir para a URL, no menu
pop-up Aes.

Na lista de seleo Abrir em, escolha um destino para a URL.

A lista Abrir em automaticamente listar os nomes de todas as molduras no
conjunto de molduras, assim como na janela principal. Se no houver
molduras, a janela principal ser a nica opo.
Nota: Esta ao poder provocar resultados inesperados se houver qualquer moldura
com os nomes top, blank, self ou parent. Algumas vezes, os navegadores confundem
estes nomes com os dos destinos reservados.

490

Captulo 18

Clique em Procurar, para selecionar um documento a ser aberto, ou digite o

caminho e nome do documento no campo URL.

Repita as etapas 3 e 4, para abrir outros documentos em outras molduras.

Clique em OK.

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos

desejados no estiverem listados, altere o navegador de destino, no menu pop-up
Mostrar os eventos de.
Menu de salto
Quando for criado um menu de salto utilizando Inserir > Objetos de formulrio >
Menu de salto, o Dreamweaver criar um objeto de menu e lhe anexar o
comportamento Menu de salto (ou Ir do menu de salto). Em geral, no
necessrio anexar manualmente a ao Menu de salto a um objeto. Para obter mais
informaes sobre os menus de salto e a sua criao, consulte Como inserir um
menu de salto na pgina 402.
possvel editar um menu de salto j existente de duas maneiras distintas:

possvel editar e reordenar os itens de menu, alterar os arquivos para os quais

sero efetuados os saltos e alterar a janela na qual os arquivos sero abertos, ao
clicar duas vezes em uma ao j existente Menu de salto, no painel
Comportamentos.

possvel editar os itens do menu da mesma maneira que faria em qualquer

outro menu, ao selecion-lo e utilizar o boto Listar os valores, no inspetor de
propriedades. Consulte Como criar um menu pop-up na pgina 533, para
obter mais detalhes.
Para editar um menu de salto utilizando o painel Comportamentos:

Crie um objeto de menu de salto, se j no houver algum no documento.

Selecione o objeto de menu de salto e abra o painel Comportamentos.

Na coluna Aes, clique duas vezes em Menu de salto.

Faa as alteraes desejadas na caixa de dilogo Menu de salto e, em seguida,

clique em OK.

Ao Ir do menu de salto
A ao Ir do menu de salto est intimamente associada ao Menu de salto; Ir do
menu de salto permite associar um boto Ir a um menu de salto. Para poder
utilizar esta ao, necessria a existncia de um menu de salto no documento. A
ao de clicar no boto Ir abrir o link que estiver selecionado no menu de salto.
Normalmente, os menus de salto no exigem a ocorrncia de um boto Ir; em
geral, a escolha de um item em um menu de salto acarreta a carga de uma URL,
sem qualquer interveno por parte do usurio. Porm, se o visitante escolher o
mesmo item que j estiver escolhido no menu de salto, este no ocorrer. Em
geral, isto no far diferena, porm, se o menu de salto aparecer em uma moldura
e os itens deste menu se vincularem a pginas em outras molduras, o boto Ir
poder ser til, permitindo aos visitantes escolher novamente um item que j
tenha sido selecionado no menu de salto.

Como utilizar os comportamentos

491

Para adicionar uma ao Ir do menu de salto:

Selecione um objeto a ser utilizado como boto Ir (geralmente uma imagem de

boto) e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Ir do menu de salto, no

menu pop-up Aes.

No menu pop-up Escolher o menu de salto, selecione um menu a ser ativado

pelo boto Ir.

Clique em OK.

Abrir a janela do navegador

Utilize a ao Abrir a janela do navegador, para abrir uma URL em uma nova
janela. possvel especificar as propriedades da nova janela, inclusive o seu
tamanho, nome e atributos (se ela ser redimensionvel, possuir uma barra de
menus e assim por diante). Por exemplo: possvel utilizar este comportamento
para abrir uma imagem maior em outra janela quando o visitante clicar em uma
imagem em miniatura; com este comportamento, possvel adequar o tamanho
da nova janela ao da imagem.
Se voc no especificar qualquer atributo da janela, ela ser aberta no tamanho e
com os atributos da janela que a tiver iniciado. A especificao de qualquer
atributo da janela automaticamente desativar todos os outros atributos que no
estiverem explicitamente ativos. Por exemplo: se voc no definir qualquer
atributo para a janela, ela poder ser aberta com 640 por 480 pixels e possuir uma
barra de navegao, barra de ferramentas de localizao, barra de status e barra de
menus. Se voc definir a largura explicitamente como sendo 640 e a altura como
sendo 480 pixels e no definir outros atributos, a janela ser aberta com 640 por
480 pixels e no possuir barras de navegao, de ferramentas de localizao, de
status ou de menus, qualquer ala de redimensionamento ou barras de rolagem.
Para poder utilizar a ao Abrir a janela do navegador:

492

Captulo 18

Selecione um objeto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Abrir a janela do

navegador, no menu pop-up Aes.

Clique em Procurar, para selecionar um arquivo ou digite a URL a ser exibida.

Defina qualquer uma das seguintes opes:

Largura da janela
Altura da janela

especifica a largura da janela, em pixels.

especifica a altura da janela, em pixels.

a linha de botes do navegador que

inclui Voltar, Avanar, Pgina inicial e Atualizar.
Barra de ferramentas de navegao

Barra de ferramentas de localizao

a linha de opes do navegador que

incluem o campo de localizao.

Barra de status a rea situada na parte inferior da janela do navegador, na
qual so exibidas as mensagens (como o tempo restante de transferncia e as
URLs associadas aos links).

a rea da janela do navegador (no Windows), ou da rea de

trabalho (no Macintosh), onde aparecem os menus Arquivo, Editar, Exibir, Ir e
Ajuda. Defina explicitamente esta opo, se desejar que os visitantes possam
navegar a partir da nova janela. Se voc no definir esta opo, o usurio poder
apenas fechar ou minimizar a janela (no Windows), ou fechar a janela ou sair
do aplicativo (no Macintosh) a partir da nova janela.
Barra de menus

especifica que as barras de rolagem

aparecero se o contedo ultrapassar a rea visvel. Se voc no definir esta
opo explicitamente, as barras de rolagem no aparecero. Se a opo Alas de
redimensionamento tambm estiver desativada, o visitante no poder exibir o
contedo que ultrapassar o tamanho original da janela (apesar de poder rolar a
janela ao arrastar a margem da mesma).
Barras de rolagem, se necessrias

especifica que o usurio poder redimensionar a

janela, arrastando o canto inferior direito da mesma ou clicando no boto de
maximizao (no Windows), ou na caixa de dimensionamento (no Macintosh),
situada no canto superior direito. Se esta opo no estiver definida
explicitamente, os controles de redimensionamento no estaro disponveis e o
canto inferior direito da janela no poder ser arrastado.
Alas de redimensionamento

o nome da nova janela. D um nome nova janela, se desejar

atribuir links a ela ou control-la com o JavaScript. Este nome no pode conter
espaos ou caracteres especiais.
Nome da janela

Clique em OK.

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.

Como utilizar os comportamentos

493

Executar o som
Utilize a ao Executar o som, para executar um som. Por exemplo: possvel
executar um efeito sonoro sempre que o ponteiro do mouse for passado sobre um
link ou executar um clipe de msica quando a pgina for carregada.
Nota: possvel que os navegadores exijam algum tipo de suporte adicional de udio
(como um plug-in de udio) para que possam executar sons. Por conseguinte, diferentes
navegadores dotados de diferentes plug-ins muitas vezes executam os sons de maneiras
diferentes. difcil prever com exatido como sero executados os sons que voc
programou aos visitantes do seu site.
Para poder utilizar a ao Executar o som:

Selecione um objeto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Executar o som, no menu
pop-up Aes.

Clique em Procurar, para selecionar um arquivo de som, ou digite o caminho e

nome do arquivo no campo Executar o som.

Clique em OK.

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.

Mensagem pop-up
A ao Mensagem pop-up exibe um alerta em JavaScript com a mensagem por
voc especificada. Como os alertas em JavaScript possuem apenas um boto (OK),
utilize esta ao para fornecer informaes ao usurio, em vez de apresentar-lhe
uma opo.
possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade,
varivel global ou outra expresso no texto. Para incorporar uma expresso
JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o
por uma barra invertida (\{).
Exemplo

A URL desta pgina {window.location}, e hoje {new Date()}.

Nota: No possvel controlar a aparncia do alerta JavaScript; ela ser determinada pelo
navegador utilizado pelo visitante. Se desejar exercer um controle maior sobre a aparncia
da mensagem, considere a possibilidade de utilizar o comportamento Abrir a janela do
navegador. Para obter mais detalhes, consulte Abrir a janela do navegador na
pgina 492.

494

Captulo 18

Para poder utilizar a ao Mensagem pop-up:

Selecione um objeto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Mensagem pop-up, no

menu pop-up Aes.

Digite a mensagem no campo Mensagem.

Clique em OK.

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os 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 pelo download quando as imagens tiverem que ser
exibidas.
Nota: Quando a opo Pr-carregar as imagens, na caixa de dilogo Permutar a imagem,
for selecionada, a ao Permutar a imagem pr-carregar automaticamente todas as
imagens de realce, dispensando a necessidade de adicionar manualmente a opo Prcarregar as imagens quando estiver utilizando Permutar a imagem.
Para poder utilizar a ao Pr-carregar as imagens:

Selecione um objeto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Pr-carregar as imagens, no

menu pop-up Aes.

Clique em Procurar, para selecionar o arquivo de imagem a ser pr-carregado,

ou digite o caminho e nome do arquivo de imagem no campo Arquivo de
origem da imagem.

Clique no boto com o sinal de adio (+), situado no alto da caixa de dilogo,
para adicionar a imagem lista Pr-carregar as imagens.
Nota: Se voc no clicar no boto com o sinal de adio antes de digitar a prxima
imagem, a imagem escolhida na lista ser substituda pela prxima imagem escolhida.

Para todas as imagens restantes a serem pr-carregadas na pgina, repita as

etapas 3 e 4.

Como utilizar os comportamentos

495

Para remover uma imagem da lista Pr-carregar as imagens, selecione a imagem

na lista e clique no boto com o sinal de subtrao ().

Clique em OK.

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.

Definir a imagem da barra de navegao

Utilize a ao Definir a imagem da barra de navegao para transformar uma
imagem em uma imagem de barra de navegao ou para alterar a exibio e aes
relacionadas s imagens de uma barra de navegao. Para obter mais informaes,
consulte Como inserir uma barra de navegao na pgina 405.
Utilize a guia Bsico da caixa de dilogo Definir 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 Definir 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 definir um outro estado para
uma imagem quando este for Inativo ou Sobreposto.
Para editar uma ao Definir a imagem da barra de navegao:

Selecione a imagem da barra de navegao a ser editada e abra o painel

Comportamentos.

Na coluna Aes do painel Comportamentos, clique duas vezes na ao Definir

a imagem da barra de navegao associada ao evento que estiver alterando.

Na guia Bsico da caixa de dilogo Definir a imagem da barra de navegao,

selecione as opes de edio de imagens.

Para definir diversas imagens para um boto da barra de navegao:

496

Captulo 18

Selecione a imagem da barra de navegao a ser editada e abra o painel

Comportamentos.

Na coluna Aes do painel Comportamentos, clique duas vezes na ao Definir

a imagem da barra de navegao associada ao evento que estiver alterando.

Clique na guia Avanado da caixa de dilogo Definir a imagem da barra de

navegao.

No menu pop-up Quando o elemento estiver sendo exibido, escolha um estado

para a imagem. Para obter informaes sobre os estados das imagens, consulte
Como criar as barras de navegao na pgina 404.

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 inativa, se desejar

alterar a exibio de uma outra imagem quando o ponteiro estiver sobre a
imagem selecionada.
5

Na lista Definir tambm a imagem, selecione uma outra imagem a ser definida
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 Definir o texto da moldura permite definir dinamicamente o texto de uma
moldura, substituindo o contedo e a formatao da moldura pelo contedo
especificado. O contedo pode incluir qualquer HTML vlido. Utilize esta ao
para exibir informaes dinamicamente.
Embora ao Definir o texto da moldura substitua a formatao de uma moldura,
possvel selecionar a opo Preservar a cor de fundo, para preservar os atributos
das cores do fundo da pgina e do texto.
possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade,
varivel global ou outra expresso no texto. Para incorporar uma expresso
JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o
por uma barra invertida (\{).
Exemplo

A URL desta pgina {window.location}, e hoje {new Date()}.

Para criar um conjunto de molduras:

Escolha Modificar > Conjunto de molduras > Dividir a moldura para a esquerda,
para a direita, para cima ou para baixo.
Para obter mais informaes, consulte Como criar molduras na pgina 219.

Como utilizar os comportamentos

497

Para poder utilizar a ao Definir o texto da moldura:

Selecione um objeto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e, no menu pop-up Aes, escolha
Definir o texto > Definir o texto da moldura.

Na caixa de dilogo Definir o texto da moldura, escolha a moldura de destino

no menu pop-up Moldura.

Clique no boto Obter o HTML atual, para copiar o contedo da seo body da
moldura de destino.

Digite uma mensagem no campo Novo HTML e, em seguida, clique em OK.

Verifique se o evento padro corresponde ao desejado. Se no corresponder,

escolha um outro evento no menu pop-up.
Se no forem exibidos os eventos desejados, altere o navegador de destino, no
menu pop-up Mostrar os eventos de.

Definir o texto da camada

A ao Definir o texto da camada substitui o contedo e a formatao de uma
camada j existente em uma pgina pelo contedo especificado. O contedo pode
incluir qualquer cdigo-fonte HTML vlido.
A ao Definir o texto da camada substitui o contedo e a formatao de uma
camada, mas mantm os atributos da mesma, inclusive a cor. Formate o contedo,
inclusive os tags HTML no campo Novo HTML, na caixa de dilogo Definir 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:

Escolha Inserir > Camada.

Para obter mais informaes, consulte Como criar camadas na pgina na
pgina 441.

498

Captulo 18

No inspetor de propriedades, digite um nome para a camada.

Para anexar uma ao Definir o texto da camada:

Selecione um objeto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Definir o texto > Definir o
texto da camada, no menu pop-up Aes.

Na caixa de dilogo Definir 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.

Verifique se o evento padro corresponde ao desejado. Se no corresponder,

escolha um outro evento no menu pop-up.
Se no forem exibidos os eventos desejados, altere o navegador de destino, no
menu pop-up Mostrar os eventos de.

Definir a mensagem de status

A ao Definir a mensagem de status mostra uma mensagem na barra de status, na
parte inferior esquerda da janela do navegador. Por exemplo: possvel utilizar esta
ao para descrever o destino de um link na barra de status, em vez de mostrar a
URL a ele associada. Para examinar um exemplo de mensagem de status, passe o
mouse sobre qualquer um dos botes de navegao na Ajuda do Dreamweaver.
Observe, contudo, que os visitantes geralmente ignoram as mensagens na barra de
status; se a mensagem for importante, pense na possibilidade de exibi-la como
uma mensagem pop-up ou texto de uma camada.
possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade,
varivel global ou outra expresso no texto. Para incorporar uma expresso
JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o
por uma barra invertida (\{).
Exemplo

A URL desta pgina {window.location}, e hoje {new Date()}.

Para poder utilizar a ao Definir a mensagem de status:

Selecione um objeto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Definir o texto > Definir a
mensagem de status, no menu pop-up Aes.

Na a caixa de dilogo Definir a mensagem de status, digite a mensagem no

campo Mensagem.
A mensagem dever ser concisa. Se a mensagem no couber na barra de status,
o navegador a truncar.

Clique em OK.

Como utilizar os comportamentos

499

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.

Definir o texto do campo de texto

A ao Definir o texto do campo de texto substitui o contedo de um campo de
texto de um formulrio pelo contedo especificado.
possvel incorporar qualquer chamada vlida de funo JavaScript, propriedade,
varivel global ou outra expresso no texto. Para incorporar uma expresso
JavaScript, coloque-a entre chaves ({}). Para exibir um sinal de chaves, preceda-o
por uma barra invertida (\{).
Exemplo

A URL desta pgina {window.location}, e hoje {new Date()}.

Para criar um campo de texto com nome:

Escolha Inserir > Objetos de formulrio > Campo de texto.

Se o Dreamweaver solicitar a adio de um tag de formulrio, clique em Sim.
Para obter mais informaes, consulte Como criar formulrios na
pgina 519.

No inspetor de propriedades, digite um nome para o campo de texto.

Certifique-se de que o nome seja exclusivo pgina (no utilize o mesmo nome
para diversos elementos na mesma pgina, mesmo se estiverem em formulrios
diferentes).

Para poder utilizar a ao Definir o texto do campo de texto:

Selecione um campo de texto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Definir o texto > Definir o
texto do campo de texto, no menu pop-up Aes.

Na caixa de dilogo Definir 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.

Verifique se o evento padro corresponde ao desejado. Se no corresponder,

escolha um outro evento no menu pop-up.
Se no forem exibidos os eventos desejados, altere o navegador de destino, no
menu pop-up Mostrar os eventos de.

500

Captulo 18

Mostrar/ocultar as camadas
A ao Mostrar/ocultar as camadas mostra, oculta ou restaura a visibilidade padro
de uma ou mais camadas. Esta ao til para mostrar informaes medida que
o usurio interage com a pgina. Por exemplo: medida que o usurio passar o
ponteiro do mouse sobre a imagem de uma planta, uma camada poder ser
disparada, mostrando detalhes sobre a poca e regio de crescimento da planta, a
quantidade de sol necessria, o tamanho que a planta pode atingir e assim por
diante.
A ao Mostrar/ocultar as camadas tambm til para criar uma camada de prcarga ou seja, uma camada grande que obscurece o contedo da pgina
inicialmente, desaparecendo em seguida, quando todos os componentes da pgina
tiverem sido carregados.
Para poder utilizar a ao Mostrar/ocultar as camadas:

Escolha Inserir > Camada, ou clique no boto Camada, situado no painel

Objetos, e desenhe uma camada na janela do documento.
Repita esta etapa para criar outras camadas.

Clique na janela do documento para desmarcar a camada e, em seguida, abra o

painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Mostrar/ocultar as

camadas, no menu pop-up Aes.
Se a opo Mostrar/ocultar as camadas no estiver disponvel, provvel que j
haja uma camada selecionada. Como as camadas no aceitam eventos em
ambos os navegadores da verso 4.0, selecione um outro objeto como o tag
body ou um link (um tag) ou, no menu pop-up Mostrar os eventos de, altere
o navegador de destino para IE 4.0.

No menu pop-up Camadas com nome, selecione a camada cuja visibilidade

deseja alterar.

Clique em Mostrar, para mostrar a camada, Ocultar, para ocult-la, ou Padro,

para restaurar a visibilidade padro da mesma.

Repita as etapas 4 e 5 para todas as camadas cuja visibilidade ainda deseja

alterar. possvel alterar a visibilidade de diversas camadas com um nico
comportamento.

Clique em OK.

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.

Como utilizar os comportamentos

501

Quando forem exibidas em uma janela do Netscape Navigator, possvel que as

camadas sejam reduzidas, para acomodar todo o contedo. A fim de impedir que
isso ocorra, adicione texto ou imagens s camadas ou defina valores de corte das
mesmas.
Para criar uma camada de pr-carga:

Clique no boto Desenhar a camada, na categoria Comuns do painel Objetos,

e desenhe uma camada grande na visualizao do projeto da janela do
documento.
Certifique-se de que a camada cubra todo o contedo da pgina.

No painel Camadas, arraste o nome da camada at o alto da lista de camadas,

para especificar que esta camada dever aparecer na frente da ordem de
empilhamento.

Selecione a camada, se ainda no tiver sido selecionada, e d-lhe o nome

loading, utilizando o campo mais esquerda do inspetor de propriedades
de camadas.

Mantendo a camada selecionada, defina, no inspetor de propriedades, a cor de

fundo da camada como sendo a mesma cor que o fundo da pgina.

Clique dentro da camada (que dever estar obscurecendo o restante do

contedo da pgina) e, se desejar, digite uma mensagem.
Por exemplo: as mensagens Aguarde at que a pgina seja carregada ou
Carregando... mantm o visitante informado sobre o que est ocorrendo,
para que ele no pense que a pgina no possui um contedo.

502

Captulo 18

Clique no tag <body> no seletor de tags, situado no canto inferior esquerdo da

janela do documento.

No menu pop-up Aes do painel Comportamentos, escolha Mostrar/ocultar

as camadas.

Na lista Camadas com nome, selecione a camada denominada carregando

Clique em Ocultar.

10

Clique em OK.

11

Certifique-se de que o evento listado ao lado da ao Mostrar/ocultar as

camadas, na lista de comportamentos seja onLoad. Se no for, selecione o evento
e clique no tringulo para baixo, situado entre o evento e a ao. Na lista de
eventos do menu pop-up, escolha onLoad.

Permutar a imagem
A ao Permutar a imagem permuta uma imagem por outra, ao alterar o atributo
src do tag img. Utilize esta ao para criar botes cambiveis e outros efeitos em
imagens (inclusive a permuta simultnea de mais de uma imagem).
Nota: Como apenas o atributo src afetado por essa ao, a nova imagem a ser
empregada dever ter as mesmas dimenses (altura e largura) que a original. Caso
contrrio, a nova imagem aparecer compactada ou expandida, para se ajustar s
dimenses da imagem original.
Para poder utilizar a ao Permutar a imagem:

Escolha Inserir > Imagem, ou clique no boto Imagem, situado no painel

Objetos, para inserir uma imagem.

Nomeie a imagem no campo de texto mais esquerda, no inspetor de

propriedades.
A ao Permutar a imagem funcionar mesmo que voc no nomeie as
imagens; esta ao nomeia automaticamente as imagens sem nome quando o
comportamento for anexado a um objeto. Contudo, mais fcil distinguir as
imagens na caixa de dilogo Permutar a imagem se todas tiverem sido
nomeadas previamente.

Repita as etapas 1 e 2 para inserir outras imagens.

Selecione um objeto (geralmente a imagem a ser permutada) e abra o painel

Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Permutar a imagem, no

menu pop-up Aes.

Na lista Imagens, selecione a imagem cuja origem deseja alterar.

Como utilizar os comportamentos

503

Clique em Procurar, para selecionar o arquivo da nova imagem, ou digite o

caminho e nome do arquivo da nova imagem no campo Definir a origem como.

Repita as etapas 6 e 7 para quaisquer outras imagens a serem alteradas. Utilize a

mesma a ao de permuta de imagens simultaneamente em todas as imagens a
serem modificadas; caso contrrio, a ao Restaurar a imagem permutada a ela
correspondente no ir restaurar todas as imagens.

Quando a pgina tiver sido carregada, selecione a opo Pr-carregar as

imagens, para carregar as novas imagens no cache do navegador.
Este procedimento evita os atrasos causados pelo download quando as imagens
tiverem que ser exibidas.

10

Clique em OK.

11

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.

Restaurar a imagem permutada

A ao Restaurar a imagem permutada restaura o ltimo conjunto de imagens
permutadas aos seus arquivos de origem anteriores. Esta ao adicionada
automaticamente, sempre que voc anexar a ao Permutar a imagem a um objeto;
no ser necessrio selecion-la manualmente se tiver deixado selecionada a opo
Restaurar durante a anexao de Permutar a imagem.
Ir para o quadro da linha de tempo
A ao Ir para o quadro da linha de tempo move o cabeote de execuo at o
quadro especificado. possvel utilizar esta ao no canal Comportamento, no
painel Linhas de tempo, para que certas partes da linha de tempo sejam repetidas
o nmero de vezes especificado, para criar um link ou boto Rebobinar ou para
permitir que o usurio salte at partes diversas da animao.
Para poder utilizar a ao Ir para o quadro da linha de tempo:

Escolha Janela > Linha de tempo, para abrir o painel Linhas de tempo e se
certificar que o documento contm uma linha de tempo.
Se no houver barras de animao roxas no painel Linhas de tempo, o
documento no contm uma linha de tempo. Consulte Como criar uma
animao de linha de tempo na pgina 461.

Selecione um objeto ao qual deseja anexar o comportamento.

Para anexar o comportamento a um quadro da linha de tempo, clique no canal
Comportamento no quadro desejado.

504

Captulo 18

Abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Linha de tempo > Ir para o
quadro da linha de tempo, no menu pop-up Aes. Se esta ao estiver
esmaecida, o documento no contm uma linha de tempo.

Selecione uma linha de tempo, no menu pop-up Linha de tempo.

Digite um nmero de quadro no campo Ir para o quadro.

Se voc estiver adicionando esta ao no canal Comportamento de uma linha

de tempo e desejar repetir um segmento desta, digite o nmero de repeties no
campo Loop.
Deixe este campo em branco se no estiver anexando Ir para o quadro da linha
de tempo a um quadro.

Clique em OK.

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.

Executar a linha de tempo e Parar a linha de tempo

Utilize as aes Executar a linha de tempo e Parar a linha de tempo, para permitir
que o visitante inicie ou pare uma linha de tempo ao clicar em um link ou boto
ou inicie ou pare uma linha de tempo automaticamente ao passar o cursor sobre
um link, imagem ou outro objeto. A ao Executar a linha de tempo ser
automaticamente anexada ao tag body com o evento onLoad quando for selecionada
a opo Execuo automtica, no painel Linhas de tempo.
Para poder utilizar as aes Executar a linha de tempo e Parar a linha de tempo:

Escolha Janela > Linha de tempo, para abrir o painel Linhas de tempo e se
certificar que o documento contm uma linha de tempo.
Se no houver barras de animao roxas no painel Linhas de tempo, o
documento no contm uma linha de tempo. Consulte Como criar uma
animao de linha de tempo na pgina 461.

Selecione um objeto e abra o painel Comportamentos.

Clique no boto com o sinal de adio (+) e escolha Executar a linha de tempo
ou Parar a linha de tempo, no menu pop-up Aes.

Selecione a linha de tempo a ser executada ou parada, ou opte por parar todas
linhas de tempo, no menu pop-up.

Clique em OK.

Como utilizar os comportamentos

505

Verifique se o evento padro corresponde ao desejado.

Se no corresponder, escolha um outro evento no menu pop-up. Se os eventos
desejados no estiverem listados, altere o navegador de destino, no menu popup Mostrar os eventos de.

Validar o formulrio
A ao Validar o formulrio verifica o contedo de determinados campos de texto,
a fim de garantir que o usurio tenha digitado o tipo correto de dados. Anexe esta
ao a certos campos de texto com o evento onBlur, a fim de validar os campos
medida que o usurio estiver preenchendo o formulrio, ou anexe-a ao formulrio
com o evento onSubmit, a fim de avaliar diversos campos de texto simultaneamente
quando o usurio clicar no boto Enviar. A anexao desta ao a um formulrio
evita que este seja enviado ao servidor se algum dos campos contiver dados
incorretos.
Para poder utilizar a ao Validar o formulrio:

Escolha Inserir > Formulrio, ou clique no boto Formulrio, situado no painel

Objetos, para inserir um formulrio.

Escolha Inserir > Objetos de formulrio > Campo de texto, ou clique no boto
Campo de texto, situado no painel Objetos, para inserir um campo de texto.
Repita esta etapa para inserir outros campos de texto.

Siga um dos procedimentos abaixo:

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 tag
<form> no seletor de tags, situado no canto inferior esquerdo da janela do
documento, e escolha Janela > Comportamentos.
4

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.
6

506

Captulo 18

Selecione a opo apropriada, se o campo se destinar a receber dados.

Escolha uma dentre as seguintes opes Aceitar:

Utilize a opo Qualquer item, se o campo for necessrio, porm no precisar

conter qualquer tipo especfico de dados. Esta opo no ter significado (ela
equivale ausncia, no campo, da ao Validar o formulrio) se a opo
Necessrio no estiver selecionada.

Utilize a opo Endereo eletrnico, para verificar se o campo contm um sinal

de @.

Utilize a opo Nmero, para verificar se o campo contm apenas algarismos

numricos.

Utilize a opo Nmero de, para verificar se o campo contm apenas um

nmero em uma faixa especfica.
8

Se estiver validando vrios campos, repita as etapas 6 e 7 para quaisquer outros

campos a serem validados.

Clique em OK.
Se estiver validando vrios campos quando o usurio enviar o formulrio, o
evento onSubmit aparecer automaticamente no menu pop-up Eventos.

10

Se estiver validando um determinado campo, certifique-se de que o evento

padro seja onBlur ou onChange.
Se no for, selecione onBlur ou onChange no menu pop-up. Ambos os eventos
disparam a ao Validar o formulrio, assim que o usurio mover o cursor para
fora do campo. A diferena entre estes eventos est na ocorrncia invarivel de
onBlur, se o usurio tiver digitado no campo ou no, enquanto que onChange
ocorrer apenas se o usurio tiver alterado o contedo do campo. O evento
onBlur prefervel quando voc tiver especificado que o campo necessrio.

Como utilizar os comportamentos

507

508

Captulo 18

19

CAPTULO 19

Como depurar o cdigo JavaScript

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

O depurador Javascript do Macromedia Dreamweaver permite revelar erros no

cdigo JavaScript do cliente. possvel escrever o cdigo utilizando a visualizao
de cdigo (ou o inspetor de cdigo) do Dreamweaver e, em seguida, executar o
depurador, para verificar o cdigo quanto sintaxe e erros lgicos. Os erros de
sintaxe provocam a exibio de uma mensagem de erro pelo navegador; os erros
lgicos acarretam o funcionamento incorreto da pgina, porm no so relatados
pelo navegador. O depurador funciona com o Microsoft Internet Explorer e com
o Netscape Navigator na plataforma Windows, e com o Netscape Navigator na
plataforma Macintosh. Para obter mais informaes sobre a criao de scripts,
consulte Como inserir os scripts na pgina 365.
Inicialmente, o depurador verifica o cdigo quanto a erros de sintaxe e, em
seguida, executado juntamente com o navegador, para auxili-lo na verificao
dos erros lgicos. Se forem detectados erros lgicos, a janela do depurador
JavaScript o auxiliar a isol-los no cdigo JavaScript, permitindo o exame de
variveis e propriedades de documento enquanto o programa estiver sendo
executado. possvel definir pontos de interrupo (semelhantes s instrues de
alerta) no cdigo, a fim de parar a execuo do programa e exibir os valores dos
objetos e propriedades JavaScript em uma lista de variveis. Tambm possvel
avanar at a instruo seguinte ou at uma chamada de funo, para examinar a
mudana dos valores da varivel.
O depurador JavaScript pode reduzir significativamente o tempo envolvido na
localizao e isolamento de erros no cdigo.

509

Como executar o depurador

Depois de escrever o cdigo, voc poder iniciar o depurador JavaScript, para que
ele verifique os erros. Inicialmente, o depurador verificar os erros de sintaxe e, em
seguida, abrir a pgina no navegador, para que voc verifique os erros lgicos.
Para iniciar a depurao:

Escolha Arquivo > Depurar no navegador e, em seguida, selecione o navegador

na lista. Como alternativa, clique no boto Visualizar/depurar no navegador, na
barra de ferramentas (Exibir > Barra de ferramentas), e selecione a opo
Depurar no Internet Explorer ou Depurar no Netscape Communicator.

Se o depurador localizar algum erro de sintaxe, ele parar e apresentar uma

lista de erros na janela Erros de sintaxe JavaScript. Consulte Como localizar
erros de sintaxe na pgina 511.
2

Se estiver utilizando o Netscape Navigator, clique em OK, na caixa de

advertncia do depurador que aparecer e, em seguida, clique em Conceder, na
caixa de dilogo Segurana Java.
Nota: Se voc j tiver aceitado um certificado de segurana da Macromedia, possvel
que a caixa de dilogo Segurana Java no aparea.

Se estiver utilizando o Internet Explorer (apenas no Windows), clique em Sim,

na caixa de dilogo Segurana Java e, em seguida, em OK, na caixa de
advertncia do depurador que aparecer.

O depurador se conectar com o navegador, porm no efetuar uma conexo de

rede ou com qualquer servidor da Internet. O navegador aparecer com a janela
do depurador Javascript, que ser interrompida automaticamente na primeira
linha de cdigo.
A janela do depurador Javascript aparecer com a janela do navegador. O
depurador parar automaticamente na primeira linha de cdigo.
Para executar o depurador:

Clique no boto Executar, na janela do depurador Javascript.

Para parar o depurador:

Clique no boto Parar a depurao, na janela do depurador Javascript. O

depurador ser fechado.

510

Captulo 19

Como localizar erros de sintaxe

Se o depurador localizar algum erro de sintaxe, ele parar e apresentar uma lista
de erros na janela Erros de sintaxe JavaScript.
Para visualizar a descrio do erro:

Selecione um erro na janela Erros de sintaxe JavaScript. Aparecer uma descrio

do erro na rea Descrio detalhada.
Para ter acesso ao erro selecionado no cdigo, siga um dos procedimentos
abaixo:

Clique duas vezes no erro.

Clique no boto Ir para a linha.
O cdigo ser realado na visualizao de cdigo (ou no inspetor de cdigo).

Como depurar o cdigo JavaScript

511

Como localizar e corrigir os erros lgicos

Quando o depurador localizar erros lgicos, ser aberta a janela do depurador
JavaScript. Um ponto de interrupo (semelhante a um alerta) ser
automaticamente definido na primeira linha do cdigo. O depurador pra a
execuo em cada ponto de interrupo, o que permite examinar os valores dos
objetos e propriedades JavaScript na janela da lista de variveis.

Depois que o depurador tiver parado em um ponto de interrupo, possvel

analisar o cdigo (executar uma instruo por vez). Este procedimento permite
verificar se o programa executado como deveria. O depurador pode analisar at
mesmo cdigo vinculado. Por exemplo: se o cdigo contiver um link a um arquivo
de origem, o depurador analisar este arquivo e o exibir na janela do depurador
JavaScript. medida que avana na anlise do cdigo, voc poder acompanhar as
modificaes nos valores das variveis no programa.
Definir/remover o
ponto de interrupo
Executar

Captulo 19

Depurao total
Depurao circular

Parar a
depurao

512

Depurao parcial

Remover todos os pontos de

interrupo

Como definir os pontos de interrupo

Um ponto de interrupo indica um ponto do cdigo no qual voc deseja
interromper a execuo do programa. Na definio de um ponto de interrupo,
ele ser marcado com um pequeno ponto vermelho na margem esquerda da janela
do depurador Javascript. Quando a execuo do programa for parada no ponto de
interrupo, aparecer uma pequena seta sobre o ponto e se tornar possvel
examinar os objetos e propriedades existentes neste ponto. Isso permitir
identificar rapidamente a origem do problema no cdigo JavaScript.
Os pontos de interrupo podero ser definidos apenas no cdigo JavaScript
(entre os tags script) ou em uma linha com um manipulador de evento. Se voc
definir um ponto de interrupo em outro ponto, o Dreamweaver
automaticamente o definir na prxima linha vlida de cdigo (ou colocar o
ponto de insero nesta linha, se ela j contar com um ponto de interrupo
definido). Se no houver linhas vlidas nas quais o ponto de interrupo possa ser
definido, ser emitido um alerta sonoro.
Para definir um ponto de interrupo, siga um dos procedimentos abaixo:

Na janela do depurador JavaScript, coloque o ponto de insero na linha onde

deseja o ponto de interrupo e, em seguida, clique no boto Definir/remover o
ponto de interrupo, na parte superior da janela do depurador. Para remover o
ponto de interrupo, clique novamente no boto Definir/remover o ponto de
interrupo.

Como depurar o cdigo JavaScript

513

 Na visualizao de cdigo (ou no inspetor de cdigo), coloque o ponto de

insero na linha onde deseja o ponto de interrupo e, em seguida, selecione
Editar > Definir o ponto de interrupo, ou escolha Definir o ponto de
interrupo, no menu pop-up Navegao do cdigo, na barra de ferramentas.
Tambm possvel clicar com o boto direito do mouse (no Windows) ou
clicar mantendo a tecla Control pressionada (no Macintosh) e escolher a opo
Definir o ponto de interrupo, no menu contextual. Para remover o ponto de
interrupo, selecione Remover o ponto de interrupo, no menu contextual.

Para remover todos os pontos de interrupo, siga um dos procedimentos abaixo:

Na janela do depurador Javascript, clique no boto Remover todos os pontos de

interrupo.

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

os pontos de interrupo, no menu pop-up Navegao do cdigo, na barra de
ferramentas, ou escolha Editar > Remover todos os pontos de interrupo.

514

Captulo 19

Como analisar o cdigo

possvel analisar o cdigo e executar uma instruo por vez, para monitorar os
seus efeitos sobre o programa. Por exemplo: possvel analisar uma condio if,
para verificar se o programa ir parar na primeira linha da instruo condicional
ou na linha executvel seguinte instruo if.
Quando o depurador parar em uma instruo com uma chamada a uma funo,
voc poder verificar a funo, para se certificar de que ela ser executada
corretamente. Se a funo estiver correta, voc poder determinar a depurao
circular da mesma pelo depurador, at o retorno da funo. O programa ir parar
novamente na prxima instruo aps o local da chamada funo. Se voc tentar
depurar uma instruo que contenha uma funo JavaScript no padronizada, o
comportamento equivaler depurao parcial.

Para efetuar a depurao parcial de uma instruo:

Clique no boto Depurao parcial, situado na parte superior da janela do

depurador Javascript.
Quando o programa parar em qualquer instruo (inclusive naquelas com uma
chamada a uma funo), voc poder efetuar a depurao parcial da instruo,
continuar e interromper o processo antes da instruo seguinte.
Para depurar uma funo totalmente:

Clique no boto Depurao total, situado na parte superior da janela do

depurador Javascript.
Para depurar uma funo circularmente:

Clique no boto Depurao circular.

Tambm possvel utilizar a opo Depurao circular quando o depurador
estiver dentro de uma funo definida pelo usurio. A depurao circular acarreta
a execuo das instrues restantes na definio da funo. O depurador ir parar
na instruo seguinte.

Como depurar o cdigo JavaScript

515

Como examinar e editar os valores das variveis

Para verificar os valores das variveis medida que examina o cdigo, utilize a lista
de variveis do Dreamweaver, localizada no painel inferior da janela do depurador
Javascript. Os nomes das variveis so digitados na coluna da esquerda; a coluna
da direita apresenta uma lista dos valores atuais de cada varivel quando o
programa parar a execuo em um ponto de interrupo ou aps a depurao total
do cdigo.

Para adicionar uma varivel lista de variveis, siga um dos procedimentos

abaixo:

Selecione o nome da varivel na seo do cdigo da janela do depurador

JavaScript. Clique no boto com o sinal de adio (+) e pressione a tecla Enter.

Clique no boto com o sinal de adio (+), digite o nome da varivel que deseja
examinar e pressione a tecla Enter.
medida que voc examinar o cdigo, os valores aparecero do lado de cada
varivel. Se a varivel for um objeto com propriedades, ser possvel expandi-la
(mostrar as suas propriedades e valores), clicando no boto com o sinal de adio
(+) (no Windows), ou no boto com um tringulo (no Macintosh), ao seu lado na
lista. A varivel expandida ser automaticamente reduzida cada vez que o cdigo
for examinado.

516

Captulo 19

Para remover um item da lista de variveis:

Selecione o item da lista de variveis.

Clique no boto com o sinal de subtrao (-).

Para editar um valor:

Selecione o item da lista de variveis.

Clique no valor da lista de variveis.

Edite o valor, digitando na caixa de texto que aparecer.

Como depurar o cdigo JavaScript

517

518

Captulo 19

20

CAPTULO 20

Como criar formulrios

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Os formulrios permitem interagir com ou reunir informaes dos visitantes ao

seu site. Por exemplo: possvel indagar o nome e endereo eletrnico de um
usurio, pedir que o visitante participe de uma pesquisa, assine um livro de
convidados ou fornea comentrios a respeito do seu site.
Os formulrios se dividem em duas partes: O cdigo-fonte HTML que descreve o
formulrio (por exemplo: os campos, identificadores e botes que o usurio ver
na pgina) e um script ou aplicativo que processa as informaes enviadas (um
script CGI, por exemplo). No possvel coletar os dados de um formulrio sem
utilizar um script de processamento.
1. O visitante preenche o
formulrio e o envia a um
servidor da Web para
processamento

2. O script de
CGI processa
o formulrio

CGI-bin

3. Um novo documento HTML

criado e enviado ao visitante

Utilize o Macromedia Dreamweaver para criar diversos objetos de formulrio,

como campos de texto, de senha, botes de opo, caixas de seleo, menus popup e imagens clicveis (como um boto Enviar).
Tambm possvel utilizar o comportamento Validar o formulrio do
Dreamweaver para verificar as informaes fornecidas por um visitante; por
exemplo: possvel verificar se um endereo do correio eletrnico contm um
smbolo de arroba (@) ou se um campo essencial contm uma entrada.

519

Sobre os scripts CGI

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

Sobre os objetos de formulrio

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

A categoria Formulrios apresenta os seguintes botes:

Inserir formulrio insere um formulrio no documento. O Dreamweaver inserir
tags form de abertura e finalizao no cdigo-fonte HTML. Quaisquer outros
objetos de formulrio, como campos de texto, botes, e assim por diante, devem
ser inseridos entre os tags form, para que os dados sejam processados corretamente
por todos os navegadores.
Inserir campo de texto insere um campo de texto em um formulrio. Os campos
de texto aceitam qualquer tipo de texto, seja ele alfabtico ou numrico. O texto
digitado pode ser exibido como uma linha simples, linhas mltiplas, marcadores
ou asteriscos (com a finalidade de proteger as senhas).

520

Captulo 20

insere um boto de texto em um formulrio. Os botes realizam

tarefas quando forem clicados, como o envio e redefinio dos formulrios.
possvel adicionar um nome ou identificador personalizado ao boto ou utilizar
um dos identificadores predefinidos: Enviar ou Redefinir.
Inserir boto

insere uma caixa de seleo em um formulrio. As caixas

de seleo permitem mltiplas respostas em um nico grupo de opes. O usurio
poder selecionar quantas opes forem aplicveis.
Inserir caixa de seleo

Inserir boto de opo insere um boto de opo em um formulrio. Os botes de

opo representam opes exclusivas. A seleo de um dos botes do grupo
cancela a seleo de todos os outros. Por exemplo: o usurio poder selecionar a
opo Sim ou a opo No.
Inserir lista/menus permite criar opes do usurio em uma lista. A opo Lista
exibir os valores de opo em uma lista de rolagem e permitir aos usurios
selecionar diversas opes na lista. A opo Menu exibir os valores de opo em
uma lista suspensa e permitir aos usurios selecionar apenas uma nica opo.

insere um campo de texto em branco e um boto

Procurar em um documento. Os campos de arquivos permitem que o usurio
procure os arquivos nos discos rgidos, efetuando o seu upload como dados do
formulrio.

Inserir campo de arquivos

permite inserir uma imagem em um formulrio. Os

campos de imagens podem ser utilizados em vez dos botes Enviar, para criar
botes com aparncia grfica.
Inserir campo de imagens

insere um campo oculto no documento, no qual possvel

armazenar dados do usurio. Os campos ocultos permitem armazenar informaes
que tiverem sido digitadas pelo usurio (como um nome, endereo de correio
eletrnico ou preferncia de compra) e, em seguida, utiliz-las quando o usurio
visitar o site na prxima vez.
Inserir campo oculto

insere uma lista de navegao ou menu pop-up. Os menus

de salto permitem inserir um menu no qual cada opo se vincula a um
documento ou arquivo. Consulte Como criar menus de salto na pgina 401.
Inserir menu de salto

Como criar formulrios

521

Como criar um formulrio

Um formulrio contm propriedades que no so visveis ao usurio. As
propriedades especificam como o formulrio ser processado
Um formulrio consiste de trs partes bsicas:

tags form, que incluem a URL do script CGI que processar o formulrio e o
mtodo atravs do qual os dados sero enviados a um servidor

os campos do formulrio, que incluem campos de texto, menus, caixas de

seleo e botes de opo

boto Enviar, que envia os dados ao script CGI do servidor

Nota: Se voc tentar inserir um objeto de formulrio sem criar o formulrio, ser exibida a
seguinte mensagem do Dreamweaver: Deseja adicionar tags de formulrio?. Escolha
Sim, para que o Dreamweaver crie tags "form" para o objeto.
Para adicionar um formulrio a um documento:

No documento, coloque o ponto de insero onde deseja que o formulrio

aparea e, em seguida, siga um dos procedimentos abaixo:

Na categoria Formulrios do painel Objetos, selecione o cone de Inserir

formulrio.

Escolha Inserir > Formulrio.

Quando um formulrio for criado, aparecer um contorno pontilhado
vermelho na janela do documento. Se este contorno no aparecer, verifique se a
opo Exibir > Auxlios visuais > Elementos invisveis est selecionada.

522

Captulo 20

No documento, clique no contorno correspondente ao formulrio, para

selecion-lo, se j no estiver.

No campo Nome do formulrio, no inspetor de propriedades, digite um nome

exclusivo para identificar o formulrio.
O ato de nomear um formulrio possibilita fazer referncias a ele ou control-lo
com uma linguagem de criao de scripts, como JavaScript ou VBScript.

No campo Ao, especifique o caminho at a URL onde reside o script ou

aplicativo de processamento que processar as informaes do formulrio,
seguindo um dos procedimentos abaixo:

Clique no cone de pasta e navegue at a pasta relevante.

Digite o caminho completo at a pasta.
Se estiver especificando um caminho at um script CGI, o caminho at a URL
ter uma aparncia semelhante a:
http://www.meu_site.com/cgi-bin/process.cgi
5

No menu pop-up Mtodo, escolha o mtodo atravs do qual sero processados

os dados do formulrio.

Escolha POST, para enviar os valores do formulrio no corpo de uma mensagem.

Escolha GET, para enviar as informaes ao servidor e anexar URL os valores
do formulrio que tiverem sido enviados.
Nota: No utilize o mtodo GET com formulrios extensos. As URLs se limitam a 8192
caracteres. Se a quantidade de dados enviados for grande demais, os dados se
tornaro truncados, o que poder levar a resultados de processamento inesperados.
Tambm no utilize o mtodo GET ao lidar com nmeros de cartes de crdito ou
outras informaes confidenciais, pois este mtodo de transmisso de informaes
no seguro.

Escolha Padro, para utilizar a definio padro do navegador do usurio para

envio de dados de formulrios que, em geral, o mtodo GET.

Como criar formulrios

523

Sobre os campos de formulrio

Depois que os tags form tiverem sido adicionados ao documento, possvel
adicionar objetos de formulrio. Utilize os objetos de formulrio para solicitar
informaes aos visitantes do site.
Utilize os campos de formulrio quando desejar configurar um formulrio no qual
os visitantes possam digitar suas respostas (nome e endereo, por exemplo).
Existem trs tipos de campos que podem ser inseridos em um formulrio: campos
de texto (nos quais o usurio digita uma resposta), campos de arquivos (nos quais
o usurio digita o caminho at um arquivo do qual dever ser feito o upload para o
servidor, e os campos ocultos (que armazenam informaes digitadas pelo usurio
em outro campo).
Quando estiver adicionando um campo a um formulrio, voc poder definir a
sua extenso, nmero de linhas, nmero de caracteres que podem ser digitados
pelo usurio e se o campo ser destinado a uma senha.
Como criar campos de texto
Um campo de texto um objeto de formulrio no qual os usurios podem digitar
uma resposta.
H trs tipos de campo de texto:
Campos de texto de linha nica normalmente, so utilizados para fornecer uma
resposta com uma nica palavra ou frase breve, como um nome ou endereo.
Campos de texto de linhas mltiplas fornecem ao visitante uma rea maior, na qual
podero digitar uma resposta. fcil determinar o nmero de caracteres ou de
linhas que estaro disponveis ao visitante para escrever o texto.

so um tipo especial de campo de texto, no qual o texto

digitado pelo usurio se torna oculto ou substitudo por asteriscos ou
marcadores, que obscurecem o texto.

Campos de senha

Nota: As senhas que forem enviadas a um servidor atravs deste mtodo no estaro
criptografadas. Por conseguinte, a transferncia de dados no segura.

524

Captulo 20

Para criar um campo de texto de linha nica ou de senha:

Coloque o ponto de insero dentro do contorno do formulrio e, em seguida,

siga um dos procedimentos abaixo:

Escolha Inserir > Objeto de formulrio > Campo de texto.

Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
de texto.
Aparecer um campo de texto no documento.
2

No campo Campo de texto, no inspetor de propriedades, digite um nome

exclusivo para o campo.
Certifique-se de que o nome seja exclusivo. No possvel duplicar o nome de
um campo de texto em um formulrio. No deixe espaos em branco. Em vez
disso, utilize um sinal de sublinhado para separar as palavras. Por exemplo:
digite ltimo_nome, em vez de ltimo nome.

No campo Larg. do caractere, siga um dos procedimentos abaixo:

Aceite a definio padro, que estabelece a extenso do campo de texto em

aproximadamente 24 caracteres.

Digite um nmero, para especificar a extenso do campo de texto.

4

No campo N mx. de caract., siga um dos procedimentos abaixo:

Deixe o campo em branco, o que permitir aos usurios digitar o texto na

extenso que desejarem. Se a entrada do usurio exceder a largura (extenso) do
caractere do campo de texto, o texto rolar.

Digite um nmero para definir o nmero mximo de caracteres que podero

ser digitados pelo usurio no campo.
Por exemplo: recomendvel limitar um campo de idade a trs dgitos e um
campo de senha a oito caracteres. Se o usurio ultrapassar o nmero mximo de
caracteres, o formulrio produzir um alerta sonoro.
5

Em Tipo, selecione o tipo de campo de texto a ser criado, seguindo um dos

procedimentos abaixo:

Selecione Linha simples, para criar um campo de texto de linha nica.

Selecione Senha, para criar um campo de senha.
6

Se desejar definir o texto padro de um campo de texto, digite o texto no

campo Valor inicial do inspetor de propriedades
Este texto ser exibido no campo de texto quando o formulrio for carregado
pela primeira vez no navegador do usurio.

Como criar formulrios

525

Se desejar, digite um identificador ou texto descritivo ao lado do objeto.

possvel aplicar formatao de texto aos identificadores dos objetos do
formulrio. Para obter mais informaes, consulte Como definir e alterar as
fontes e estilos na pgina 257.

Para criar uma rea de texto de linhas mltiplas:

Coloque o ponto de insero dentro do contorno do formulrio e, em seguida,

siga um dos procedimentos abaixo:

Escolha Inserir > Objeto de formulrio > Campo de texto.

Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
de texto.
Aparecer um campo de texto no documento.
2

No campo Campo de texto, no inspetor de propriedades, digite um nome para

o objeto do campo de texto.
Certifique-se de que o nome seja exclusivo. No possvel duplicar o nome de
um campo de texto em um formulrio. No deixe espaos em branco. Em vez
disso, utilize um sinal de sublinhado para separar as palavras. Por exemplo:
digite comentrios_do_usurio, em vez de comentrios do usurio.

Em Tipo, selecione Multi-linha.

No campo Largura do caractere, siga um dos procedimentos abaixo:

Aceite a definio padro, que estabelece a extenso da rea de texto em 20

caracteres.

Digite um nmero, para especificar a extenso da rea de texto.

5

No campo Nmero de linhas, siga um dos procedimentos abaixo:

Aceite a definio padro, que estabelece um campo de texto com duas linhas.
Digite um nmero para especificar o nmero de linhas da rea de texto.

526

Captulo 20

No menu pop-up Quebra autom. de linha, selecione uma definio para

estabelecer como a entrada do usurio ser exibida quando esta exceder a rea
de texto.

Selecione Desativada ou Padro, se desejar que o texto no passe

automaticamente linha seguinte.
Quando a entrada do usurio exceder a margem direita da rea de texto, este
ser quebrado para a esquerda. O usurio dever pressionar a tecla Return, para
mover o ponto de insero para a linha seguinte na rea de texto.

Selecione a opo Virtual, para definir a quebra de linha na rea de texto.

Quando a entrada do usurio exceder a margem direita da rea de texto, este
ser quebrado para a linha seguinte. Contudo, quando os dados forem enviados
para processamento, a quebra automtica de linha no se aplicar aos dados;
estes sero enviados como uma seqncia de caracteres.

Selecione a opo Fsica, para definir a quebra de linha na rea de texto assim
como nos dados, quando estes forem enviados para processamento.
7

Se desejar definir o texto padro de um campo de texto, digite o texto no

campo Valor inicial do inspetor de propriedades.
Este texto ser exibido no campo de texto quando o formulrio for carregado
pela primeira vez no navegador do usurio.

Se desejar, digite um identificador ou texto descritivo ao lado do objeto.

possvel aplicar formatao de texto aos identificadores dos objetos do
formulrio. Para obter mais informaes, consulte Como definir e alterar as
fontes e estilos na pgina 257.

Como permitir que os visitantes faam o upload de um

arquivo para o seu servidor
Em alguns casos, possvel que as informaes solicitadas aos visitantes do seu site
sejam complicadas demais para responder em um campo de texto. Voc poder
requerer que os visitantes enviem um arquivo inteiro para o servidor (um currculo
com formatao sofisticada, um arquivo de imagens grficas ou outro tipo de
documento, por exemplo). possvel configurar um campo de arquivos de forma
a cumprir esta tarefa.
Um campo de arquivos se parece com outros campos de texto, exceto pela
presena de um boto Procurar. O usurio poder digitar o caminho at o arquivo
que est enviando ou utilizar o boto Procurar, para localizar e selecionar o
documento em questo.

Como criar formulrios

527

Para poder utilizar um campo de arquivos, o mtodo de formulrios dever estar

definido como POST. Os visitantes enviaro um arquivo para o endereo
configurado no campo Ao do formulrio.
Nota: Antes de utilizar o campo de arquivos, confirme com o administrador do servidor se
o upload annimo de arquivos permitido. Se inserir um campo de arquivos com o
Dreamweaver, voc dever inserir manualmente ENCTYPE="multipart/form-data" no tag
form, para garantir que o arquivo estar adequadamente codificado.
Para criar um campo de arquivos em um formulrio:

Clique no contorno do formulrio para selecion-lo e, em seguida, no inspetor

de propriedades, defina o mtodo de formulrios como sendo POST.

Coloque o ponto de insero dentro do contorno do formulrio e, em seguida,

siga um dos procedimentos abaixo:

Escolha Inserir > Objeto de formulrio > Campo de arquivos.

Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
de arquivos.
Aparecer um campo de arquivos no documento.
3

No campo Nome do campo de arquivos, no inspetor de propriedades, digite o

nome do objeto campo de arquivos.

No campo Larg. do caractere, digite o valor correspondente ao nmero mximo

de caracteres a serem exibidos no campo.

No campo N mx. de caracteres, digite o valor correspondente ao nmero

mximo de caracteres que o campo comportar.

Como criar um campo oculto

Os campos ocultos no se encontram visveis aos visitantes do seu site. Eles so
elementos invisveis que so colocados nos documentos para coletar ou enviar
informaes. As informaes contidas nos campos ocultos sero repassadas ao
servidor quando o formulrio for enviado, utilizando o par nome/valor que tiver
sido definido na configurao do campo oculto.
Quando voc inserir um campo oculto, o Dreamweaver adicionar um marcador
no documento. Se voc inserir um campo oculto e no vir um marcador, escolha
Exibir > Auxlios visuais > Elementos invisveis, para revelar o marcador.

528

Captulo 20

Para criar um campo oculto:

Coloque o ponto de insero dentro do contorno do formulrio e, em seguida,

siga um dos procedimentos abaixo:

Escolha Inserir > Objeto de formulrio > Campo oculto.

Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
oculto.
Aparecer um marcador no documento.
2

No campo Campo oculto, no inspetor de propriedades, digite um nome

exclusivo para o campo.

No campo Valor, digite o valor que deseja atribuir ao campo.

Como inserir caixas de seleo e botes de

opo
Utilize os objetos de formulrio caixa de seleo e boto de opo para configurar
objetos de seleo predefinidos. O usurio clica numa caixa de seleo ou boto de
opo para fazer uma escolha.
A diferena entre as caixas de seleo e os botes de opo est na maneira como
eles funcionam. Nas caixas de seleo, o usurio alterna cada resposta para
inativa ou ativa. As opes das caixas de seleo funcionam
independentemente. O usurio poder selecionar mais de uma opo em um
grupo de caixas de seleo.

Como criar formulrios

529

Os botes de opo funcionam como um grupo e fornecem valores de seleo

mutuamente exclusivos. possvel selecionar apenas uma opo em um grupo de
botes de opo.

Como inserir uma caixa de seleo

As caixas de seleo permitem ao usurio selecionar mais de uma opo em um
grupo de opes.
Cada objeto de formulrio caixa de seleo um elemento individual, devendo ter
um nome exclusivo no campo Nome.
Para inserir uma caixa de seleo:

Coloque o ponto de insero dentro do contorno do formulrio e, em seguida,

siga um dos procedimentos abaixo:

Escolha Inserir > Objeto de formulrio > Caixa de seleo.

Na categoria Formulrios do painel Objetos, clique no cone de Inserir caixa de
seleo.
2

No campo Nome da caixa de seleo, no inspetor de propriedades, digite um

nome descritivo para a caixa de seleo.
Nota: Todas as caixas de seleo que forem adicionadas a um formulrio devem contar
com um nome exclusivo.

530

Captulo 20

No campo Valor selecionado, digite o valor da caixa de seleo.

Por exemplo: em uma pesquisa, possvel associar o valor 4 opinio
"concordo plenamente", e o valor 1 opinio "discordo totalmente".

Na opo Estado inicial, clique em Selecionado, se desejar que uma opo

aparea selecionada quando o formulrio for carregado pela primeira vez no
navegador.

Como inserir um boto de opo

Utilize os botes de opo quando o usurio tiver que selecionar apenas uma
opo em um grupo de opes. Normalmente, os botes de opo so utilizados
em grupos. Todos os botes de opo de um grupo devem ter o mesmo nome e
conter diferentes valores de campo.
Para inserir botes de opo:

Coloque o ponto de insero dentro do contorno do formulrio e, em seguida,

siga um dos procedimentos abaixo:

Escolha Inserir > Objeto de formulrio > Boto de opo.

Na categoria Formulrios do painel Objetos, clique no cone de Inserir boto
de opo.
2

No campo Nome do boto de opo, no inspetor de propriedades, digite um

nome descritivo para o grupo de opes.
Nota: Se voc criar diversas interaes com botes de opo em um formulrio,
certifique-se de que cada conjunto de botes de opo tenha um nome exclusivo.

No campo Valor selecionado, digite o valor que deseja enviar para o aplicativo
do servidor ou script de processamento quando o usurio selecionar este boto
de opo. Por exemplo: digite futebol, no campo Valor selecionado, para
indicar que o usurio escolheu futebol.

Na opo Estado inicial, clique em Selecionado, se desejar que uma opo

aparea selecionada quando o formulrio for carregado pela primeira vez no
navegador.

Sugesto: Para adicionar outros botes de opo ao grupo, selecione o boto de opo
original e, em seguida, enquanto mantm a tecla Control pressionada (no Windows), ou a
tecla Option pressionada (no Macintosh), arraste-o e altere o campo Valor selecionado de
cada novo boto.

Como criar formulrios

531

Sobre as listas e menus

Quando desejar apresentar diversas opes ao usurio em um espao limitado,
utilize uma lista de opes ou menu. Embora as listas e menus de formulrios
sejam criados no mesmo inspetor de propriedades, estes componentes fornecem
ao usurio recursos de funcionalidade diferentes.
Utilize uma lista quando desejar controlar o nmero de opes exibidas. possvel
definir a altura da linha da lista. Quando o nmero de opes da lista ultrapassar a
altura da linha, aparecer uma barra de rolagem, que permitir ao usurio
visualizar todas as opes. Tambm possvel permitir que os usurios selecionem
diversos itens de uma lista.
Utilize os menus quando o espao for muito limitado. Os menus exibem uma
entrada de linha nica e incluem uma seta abaixo, na qual o usurio poder clicar,
para revelar as outras opes do menu. O usurio poder escolher apenas um item
de menu de cada vez.
Como criar uma lista de rolagem
As listas de rolagem permitem configurar diversas opes em um espao limitado.
possvel definir a altura da linha da lista, a fim de permitir que o usurio faa
mltiplas selees na lista.

Para criar uma lista de rolagem:

Coloque o ponto de insero dentro do contorno do formulrio e, em seguida,

siga um dos procedimentos abaixo:

Na categoria Formulrios do painel Objetos, clique no cone de Inserir lista/

menu.

Escolha Inserir > Objeto de formulrio > Lista/menu e selecione o elemento

resultante, se necessrio.

532

Captulo 20

No campo Lista/menu, no inspetor de propriedades, digite um nome exclusivo

para a lista.

Em Tipo, selecione a opo Lista.

No campo Altura, digite um nmero para especificar o nmero de linhas a

serem exibidas pela lista.
A altura padro da linha est definida como 4. As barras de rolagem aparecero
quando o nmero especificado for menor do que o nmero de opes contidas
na lista.

Se desejar permitir ao usurio selecionar mais de uma opo na lista, selecione

Permitir mltiplas (ao lado da opo Selees).

Clique em Valores da lista, para adicionar as opes.

Aparecer a caixa de dilogo Valores da lista.

Com o ponto de insero no campo Identificador do item, digite o texto que

deseja incluir na lista.

No campo Valor, digite o texto ou dados que deseja enviar ao servidor quando
o usurio selecionar este item.

Para adicionar um outro item lista de opes, clique no boto com o sinal de
adio (+) e, em seguida, repita as etapas 7 e 8.

10

Quando terminar de adicionar os itens lista, clique em OK, para fechar a

caixa de dilogo Valores da lista.
O inspetor de propriedades aparecer. As opes estaro visveis no campo
Selecionados inicialmente.

11

Selecione um dos itens da lista, para que ele seja selecionado quando a lista
aparecer pela primeira vez.

Como criar um menu pop-up

Os menus pop-up permitem configurar diversas opes em um espao limitado.
Quando o formulrio for carregado em um navegador, apenas uma opo estar
visvel.

O usurio poder clicar na seta abaixo, para exibir todas as opes em um menu.

Como criar formulrios

533

Para criar um menu pop-up:

Coloque o ponto de insero dentro do contorno do formulrio e, em seguida,

siga um dos procedimentos abaixo:

Na categoria Formulrios do painel Objetos, clique no cone de Inserir lista/

menu.

Escolha Inserir > Objeto de formulrio > Lista/menu.

2

No campo Lista/menu, no inspetor de propriedades, digite um nome exclusivo

para o menu.

Em Tipo, selecione a opo Menu.

Clique em Valores da lista, para adicionar as opes.

Aparecer a caixa de dilogo Valores da lista.

Com o ponto de insero no campo Identificador do item, digite o texto que

deseja incluir na lista.

No campo Valor, digite o texto ou dados que deseja enviar ao servidor quando
o usurio selecionar este item.

Para adicionar um outro item lista de opes, clique no boto com o sinal de
adio (+) e, em seguida, repita as etapas 6 e 7.

Quando terminar de adicionar os itens lista, clique em OK, para fechar a

caixa de dilogo Valores da lista.
O inspetor de propriedades aparecer. As opes estaro visveis no campo
Selecionados inicialmente.

Sobre os botes de formulrio

Os botes de formulrio controlam as operaes relacionadas aos formulrios.
possvel utilizar um boto de formulrio para enviar os dados que o usurio tiver
digitado, para processamento pelo servidor, ou para redefinir um formulrio, o
que permitir ao usurio corrigir as informaes antes de enviar os dados.
Tambm possvel utilizar um boto para efetuar outras tarefas de processamento
que tiverem sido definidas em um script de processamento. Por exemplo: o boto
do formulrio poder calcular um pedido de compra, com base nos valores de
campos especificados.

534

Captulo 20

Como criar botes de texto de formulrio

Os botes de texto de formulrio so botes padro no estilo dos navegadores, que
contm o texto que voc desejar exibir, como Enviar, Redefinir, ou Calcular o
pedido, por exemplo.
Para criar um boto de texto:

Coloque o ponto de insero dentro do contorno do formulrio e, em seguida,

siga um dos procedimentos abaixo:

Escolha Inserir > Objeto de formulrio > Boto.

Na categoria Formulrios do painel Objetos, clique no cone de Inserir boto.
2

No campo Boto, no inspetor de propriedades, digite um nome para o boto.

Nota: Existem dois nomes reservados: Enviar, que envia os dados do formulrio para
processamento, e Redefinir, que redefine todos os campos do formulrio aos seus
valores originais.

No campo Denominao, no inspetor de propriedades, digite o texto que

deseja que aparea no boto.

No campo Ao, siga um dos procedimentos abaixo:

Selecione a opo Enviar o formulrio, para enviar o formulrio para

processamento quando o boto for clicado.

Selecione a opo Redefinir o formulrio, para redefinir o formulrio quando o

boto for clicado.

Selecione a opo Nenhuma, para ativar outra ao relacionada ao script de

processamento quando o boto for clicado (para calcular um total, por
exemplo).
Como criar um boto grfico Enviar
possvel criar um boto Enviar mais atraente, utilizando o comando Inserir
campo de imagens, para inserir uma imagem em um formulrio.
Tambm possvel utilizar botes com aparncia grfica para efetuar outras
operaes do formulrio, como a sua redefinio ou a execuo de um som. A
utilizao de uma imagem para efetuar tarefas diferentes do envio de dados requer
a anexao de um comportamento ao objeto de formulrio. No painel
Comportamentos do Dreamweaver, possvel anexar um comportamento ou
afetar o formulrio, utilizando cdigo JavaScript. Para examinar como se deve
anexar um comportamento a um objeto, consulte Como anexar um
comportamento na pgina 473.

Como criar formulrios

535

Para criar um boto grfico Enviar:

No documento, coloque o ponto de insero dentro do contorno do

formulrio e, em seguida, siga um dos procedimentos abaixo:

Escolha Inserir > Objeto de formulrio > Campo de imagens.

Na categoria Formulrios do painel Objetos, clique no cone de Inserir campo
de imagens.
2

No inspetor de propriedades, altere o texto do campo Campo de imagens, para

Enviar.

No campo Orig, clique no cone de pasta e navegue at a imagem que deseja

inserir na pgina.

No campo Alt, digite o texto que deseja que aparea no lugar da imagem (nos
navegadores somente de texto ou naqueles nos quais o download de imagens
feito manualmente).

Sobre a criao de formulrios

possvel utilizar quebras de linha, pargrafo, texto pr-formatado ou tabelas para
formatar os formulrios. No possvel inserir um formulrio em outro
formulrio (ou seja, no possvel sobrepor os tags), embora seja possvel incluir
mais de um formulrio em uma pgina.
Quando estiver criando um formulrio, lembre-se de identificar os campos com
texto descritivo, para permitir ao usurio identificar o ttulo da pergunta. Por
exemplo: Digite o seu nome, para solicitar o nome do usurio.
Como adicionar diversos objetos a um formulrio
possvel configurar diversos formulrios em um nico documento ou pgina da
Web. Certifique-se apenas de que os tags do formulrio no se sobreponham.
Para adicionar diversos objetos a um formulrio:

Coloque o ponto de insero dentro do contorno do formulrio e, em seguida,

siga um dos procedimentos abaixo:

Escolha um objeto no menu Inserir > Objeto de formulrio.

Na categoria Formulrios, no painel Objetos, clique no cone correspondente
ao objeto que deseja inserir no formulrio.
2

536

Captulo 20

Especifique as propriedades do objeto no inspetor de propriedades (escolha

Janela > Propriedades, para exibir o inspetor de propriedades, se este j no
estiver aberto).

Como inserir tabelas em formulrios

possvel criar formulrios mais atraentes atravs da insero de tabelas. Utilize as
tabelas para fornecer uma estrutura para os objetos de formulrio e os
identificadores dos campos. As tabelas facilitam o alinhamento das opes, tanto
vertical quanto horizontalmente. Ao utilizar as tabelas em formulrios, certifiquese de que todos os tags table estejam delimitados por tags form.

Como processar os formulrios

Os formulrios so processados pelo script ou aplicativo especificado no atributo
action do tag form. Selecione um formulrio e examine a ao a ele associada no
inspetor de propriedades.
Os formulrios mais simples utilizam JavaScript ou VBScript para efetuar todo o
processamento dos formulrios no cliente (o que evita a necessidade de enviar os
dados do formulrio ao servidor para o processamento). Por exemplo: imagine que
voc esteja lidando com um pequeno formulrio, situado na parte inferior de uma
pgina que contm apenas dois botes de opo, identificados por Sim e No,
alm de um boto Enviar. possvel que a ao do formulrio seja uma funo
JavaScript, definida 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');
}
}

Como criar formulrios

537

Para poder utilizar uma funo JavaScript do cliente como ao do formulrio:

Em um formulrio, selecione um boto Enviar.

Anexe o comportamento Chamar o JavaScript ao boto. Consulte Chamar o

JavaScript na pgina 480.

Na caixa de texto JavaScript que aparecer durante a anexao do

comportamento, digite processForm().

Adicione uma funo JavaScript processForm() (como a mostrada acima)

seo head do documento.

possvel lidar com muitas tarefas de processamento de formulrios utilizando os

recursos de criao de scripts do cliente, porm no possvel salvar os dados
digitados pelo usurio ou envi-los a terceiros. Para esta finalidade, necessrio
utilizar um aplicativo do servidor, como o script Common Gateway Interface
(CGI), por exemplo. Os scripts CGI podem ser escritos em Perl, C, Java ou outra
linguagem de programao. H diversos sites na Web que oferecem scripts CGI
gratuitos para a sua utilizao (consulte Recursos de tecnologias da Web e
HTML na pgina 25). possvel modificar estes scripts de acordo com as suas
necessidades. Tambm possvel perguntar ao provedor de servios da Internet ou
equipe da Web se h qualquer script CGI disponvel que j esteja configurado
para a execuo no seu servidor.
Para examinar uma introduo criao de scripts CGI, consulte os recursos CGI
listados em Recursos de tecnologias da Web e HTML na pgina 25.

Como utilizar os comportamentos com

formulrios
possvel anexar comportamentos aos formulrios e objetos de formulrios
utilizando qualquer um dos comportamentos que aparecerem no painel
Comportamentos quando o formulrio ou objeto de formulrios for selecionado.
Os comportamentos Validar o formulrio e Definir 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 especificar o campo de texto que dever ser validado. Por
exemplo: se anexar o comportamento Validar o formulrio ao boto Enviar, voc
poder especificar um campo de texto criado para Nome, para verificar se o
usurio digitou texto no campo Nome.
Ao aplicar comportamentos, necessrio se assegurar que todos os objetos do
formulrio no documento tenham um nome exclusivo. Se for utilizado o mesmo
nome para dois objetos diferentes, possvel que os comportamentos no
funcionem adequadamente mesmo se os objetos estiverem em formulrios
diferentes.

538

Captulo 20

Os dois comportamentos especficos aos formulrios so explicados abaixo. Para

obter informaes sobre outros comportamentos, consulte Como utilizar os
comportamentos na pgina 469.
verifica o contedo de determinados campos de texto, a fim
de garantir que o usurio tenha digitado o tipo correto de dados. Consulte
Validar o formulrio na pgina 506.

Validar o formulrio

Definir o texto do campo de texto substitui o contedo de um campo de texto pelo

contedo especificado. Consulte Definir o texto do campo de texto na

pgina 500.

Como criar formulrios

539

540

Captulo 20

21

CAPTULO 21

Como testar e publicar um site

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Antes de carregar o site em um servidor e declar-lo pronto para a exibio,

recomendvel test-lo localmente. De fato, recomendvel testar e reparar o site
com freqncia durante a sua construo. Desta forma, possvel descobrir
problemas logo e evitar que eles se repitam. Certifique-se de que a aparncia e o
funcionamento das pginas nos navegadores de destino estejam de acordo com o
esperado, que no haja links rompidos e que o download das pginas no demore
demais. Tambm possvel testar e reparar o site inteiro atravs da execuo de um
relatrio de site, antes de public-lo.
As seguintes diretrizes o auxiliaro a criar uma experincia agradvel aos visitantes
do seu site:

Certifique-se de que as pginas funcionem conforme o esperado nos

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

Visualize as pginas no maior nmero possvel de navegadores e plataformas

diferentes. Este procedimento possibilitar a observao de diferenas no
layout, cores, tamanhos de fonte e tamanho padro de janelas do navegador,
que no podem ser previstos em uma verificao de navegador de destino.
Consulte Como visualizar nos navegadores na pgina 544.

541

 Verifique o site quanto a possveis links rompidos (e ajuste-os). Como os outros

sites tambm sofrem reformas e reorganizaes, a pgina qual est vinculando
o seu site pode ter sido transferida ou excluda. Para obter uma lista simples de
links a sites externos, possvel executar uma verificao de links. Uma outra
alternativa executar um relatrio no site inteiro, que verifica os links externos
incorretos e produz um relatrio sobre eles. Consulte Como verificar links
numa pgina ou site na pgina 546, Como abrir documentos vinculados no
Dreamweaver na pgina 549 ou Como criar relatrios na pgina 550.

Monitore o tamanho das pginas e o tempo do seu download. Lembre-se que as

pginas que consistem de uma tabela grande sero visualizadas pelos visitantes
somente aps o trmino da descarga da tabela inteira. Leve em considerao a
possibilidade de desmembrar tabelas grandes; se isto no for possvel, considere,
ento, colocar um contedo pequeno como uma mensagem de boas-vindas
ou uma faixa de propaganda fora da tabela, no alto da pgina, para que os
visitantes possam visualizar esse material enquanto for feito o download da
tabela. Consulte Como verificar o tempo e o tamanho do download na
pgina 549. Para obter mais informaes sobre a utilizao de comportamentos
de camadas para cobrir a tela enquanto uma pgina for carregada, consulte
Mostrar/ocultar as camadas na pgina 501.

Execute alguns relatrios de site para testar e reparar o site inteiro. possvel
verificar o seu site inteiro quanto a problemas, como, por exemplo, documentos
sem ttulos, tags vazios e tags redundantes aninhados. A execuo destes
relatrios antes da publicao do site garantir o surgimento de menos
problemas mais tarde. Consulte Como criar relatrios na pgina 550.

A publicao do site, lanando-o e tornando-o ativo, pode ser alcanada de

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

Utilize os fruns de discusso do Macromedia Dreamweaver, que se encontram

no site da Macromedia na Web. Eles so um recurso muito til na obteno de
informaes sobre diversos navegadores, plataformas e assim por diante.

Como verificar a compatibilidade com o

navegador
O Dreamweaver permite a construo de pginas da Web com elementos que
contam com o suporte de todos os navegadores (imagens e texto de pargrafo, por
exemplo), assim como elementos que contam apenas com o suporte dos
navegadores mais modernos (estilos e camadas, por exemplo).

542

Captulo 21

O recurso Verificar os navegadores de destino testa o HTML nos documentos, a

fim de verificar se algum tag ou atributo no conta com o suporte dos navegadores
de destino. A verificao no altera qualquer aspecto do documento.
O recurso Verificar os navegadores de destino utiliza arquivos de texto,
denominados perfis de navegadores, a fim de determinar os tags aceitos por
navegadores especficos. O Dreamweaver inclui perfis predefinidos 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 modificar os perfis existentes ou criar novos perfis, consulte
Como criar e editar os perfis de navegadores na pgina 573.
possvel executar uma verificao de navegador de destino em um documento,
diretrio ou no site inteiro. Observe que esse procedimento no verifica os scripts
no site.
Para executar uma verificao de navegador de destino:

Escolha dentre as seguintes opes:

Para executar a verificao no documento, salve o arquivo. A verificao

realizada na ltima verso salva do arquivo e inclui apenas as alteraes que
tiverem sido salvas.

Para executar a verificao 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 verificao do navegador de destino ser efetuada em todos os
arquivos HTML contidos nessa pasta e em suas subpastas. As verificaes do
navegador de destino podem ser efetuadas apenas nos arquivos locais.
2

Escolha Arquivo > Verificar os navegadores de destino.

Se ainda no tiver selecionado um navegador primrio, voc ser solicitado a
faz-lo.

Na lista de navegadores, selecione o navegador de destino com que deseja

verificar o site.

Clique em Efetuar a verificao.

O relatrio do navegador de destino ser aberto no navegador primrio (que
ser iniciado, se j no estiver aberto).

Para salvar o relatrio para referncia futura, escolha Arquivo > Salvar, no
navegador.

Nota: Como o relatrio do navegador de destino um arquivo temporrio, ele ser perdido
se no for salvo antes da visita a outro site.

Como testar e publicar um site

543

Como utilizar os comportamentos para

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

Como visualizar nos navegadores

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

544

Captulo 21

Para visualizar o documento num navegador, siga um dos procedimentos abaixo:

Escolha Arquivo > Visualizar no navegador e, em seguida, escolha um dos

navegadores listados.
1

Se ainda no tiver selecionado um navegador, escolha Editar > Preferncias >

Visualizar no navegador, para selecionar um navegador.

Pressione a tecla F12, para exibir o documento no navegador primrio.

Pressione as teclas Control e F12 (no Windows), ou Command e F12 (no
Macintosh), para exibir o documento no navegador secundrio.
Para alterar o navegador primrio ou definir um navegador secundrio:

Escolha Arquivo > Visualizar no navegador > Editar a lista de navegadores, ou

Editar > Preferncias e selecione a guia Visualizar no navegador.

Defina as preferncias de visualizao como preferir.

Como definir as preferncias de visualizao no navegador

As preferncias de visualizao no navegador exibem os navegadores primrio e
secundrio que estiverem definidos. Para abrir as preferncias de visualizao no
navegador, escolha Editar > Preferncias, e selecione Visualizar no navegador, ou
Arquivo > Visualizar no navegador > Editar a lista de navegadores.
Visualizar utilizando o servidor local (apenas no Windows) permite escolher se ser

utilizado um servidor local ao visualizar uma pgina em um navegador. Para que

esta opo funcione, necessrio que haja um software de servidor em execuo
no computador local. Quando esta opo for selecionada, o Dreamweaver
fornecer a pgina para a visualizao por um servidor local, como uma URL
iniciada por http://localhost/. Quando esta opo estiver desativada, o
Dreamweaver abrir o documento em um navegador com um caminho de arquivo
iniciado por file://. Em alguns casos, os links especificados como caminhos
relativos raiz no funcionaro adequadamente quando abertos em um navegador
com o caminho do tipo file://. Isto tambm acontece quando se executa uma
verificao de navegador de destino. Consulte Como visualizar nos navegadores
na pgina 544.
O boto de adio (+) adiciona

um navegador lista.

O boto de subtrao () exclui

Editar altera

da lista o navegador selecionado.

as definies do navegador selecionado.

Navegador primrio e Navegador secundrio especificam

se o o navegador
selecionado o navegador primrio ou o secundrio. A tecla F12 abre o navegador
primrio. As teclas Control e F12 (no Windows), ou Command e F12 (no
Macintosh), abrem o navegador secundrio.

Como testar e publicar um site

545

Como testar os links atravs da visualizao em um

navegador
Como os links no esto ativos na janela do documento, necessrio verific-los e
test-los atravs da visualizao das pginas no navegador. Por exemplo: verifique
os links s imagens, arquivos de udio e vdeo e assim por diante.
Para testar os links em um navegador:

Escolha Arquivo > Visualizar no navegador, ou pressione a tecla F12.

Clique nos links ativos, para verificar se o link est funcionando corretamente.

Como verificar links numa pgina ou site

A correo dos links rompidos (aqueles que no mais seguem um caminho vlido
ou indicam arquivos inexistentes) em um site grande pode ser um problema
entediante e consumir muito tempo. Isto se deve ao fato de um grande site poder
conter centenas de links a documentos internos e externos e de que os links
podem ser alterados ao longo do tempo. Os arquivos rfos (arquivos que ainda
existem no site, mas no esto mais vinculados a qualquer arquivo no site) podem
ser um problema, tambm, pois eles podem ocupar espao em disco e confundir
outros membros da equipe que estiverem trabalhando no site.
Utilize o recurso Verificar os links, para procurar links que tenham sido rompidos
e arquivos sem referncias em um arquivo aberto, em uma parte do site ou no site
local inteiro. O Dreamweaver verificar apenas os links e referncias aos
documentos dentro do site e compilar uma lista de links externos que aparecem
no documento ou documentos selecionados, porm no os verificar.
Quando o Dreamweaver terminar de verificar os links nos arquivos especificados,
ele abrir a caixa de dilogo Verificador de links. Essa caixa de dilogo exibir uma
lista de links rompidos, links externos (impossveis de serem verificados pelo
Dreamweaver, por estarem fora do site) e arquivos rfos. Para obter mais
informaes, consulte Como abrir documentos vinculados no Dreamweaver na
pgina 549.
Para verificar os links no documento:

Salve o arquivo em uma parte de um site local.

Escolha Arquivo > Verificar os links.

Para verificar os links em uma parte de um site local:

546

Captulo 21

Escolha Janela > Arquivos do site, para abrir a janela do site.

Escolha um site no menu pop-up Sites.

Na visualizao da pasta local, selecione os arquivos ou pastas a serem

verificados.

Inicie a verificao, 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
Verificar os links > Arquivos/pastas selecionadas.

Escolha Arquivo > Verificar os links.

5

Selecione um determinado relatrio de link no menu pop-up Mostrar. As suas

escolhas so Links rompidos, Links externos e Arquivos rfos.
S possvel verificar Arquivos rfos, quando se verifica os links no site
completo.

Uma lista de arquivos que se adequam ao tipo de relatrio selecionado

aparecer na caixa de dilogo Verificador de links.

Para verificar os links no site inteiro:

Escolha Site > Verificar os links no site inteiro.

Aparecer a caixa de dilogo Verificador de links.

Selecione um determinado relatrio de link no menu pop-up Mostrar. As suas

escolhas so Links rompidos, Links externos e Arquivos rfos.

Uma lista de arquivos que se adequam ao tipo de relatrio selecionado

aparecer na caixa de dilogo Verificador de links.

Nota: Se selecionar Arquivos rfos como tipo de relatrio, possvel exclui-los

diretamente da caixa de dilogo Verificador de links, selecionando um arquivo da lista e
pressionando a tecla Delete.
Para salvar o relatrio inteiro como um arquivo de texto delimitado por tabulaes:

Clique em Salvar.
Como ajustar os links rompidos
Quando voc verificar os links no Dreamweaver, ser exibida a caixa de dilogo
Verificador de links, que apresentar um relatrio de links rompidos, externos e
quando selecionado, verificar o site inteiro quanto a arquivos rfos.
possvel ajustar os links e referncias a imagens que tiverem sido rompidos
diretamente na caixa de dilogo Verificador de links, ou abrir os arquivos da lista e
ajustar os links no inspetor de propriedades.

Como testar e publicar um site

547

Para ajustar os links na caixa de dilogo Verificador de links:

Selecione o link rompido na coluna Links rompidos da caixa de dilogo

Verificador de links.
Aparecer um cone de pasta ao lado do link rompido.

Clique no cone correspondente pasta, para procurar o arquivo, ou digite o

caminho correto e o nome do arquivo.

Pressione a tecla de tabulao ou Enter.

Se houver outras referncias rompidas a este mesmo arquivo, aparecer uma
caixa de dilogo que o solicitar a ajustar as referncias tambm nos outros
arquivos. Clique em Sim, para que o Dreamweaver atualize todos os
documentos da lista que fizerem referncia a este arquivo. Clique em No, para
que o Dreamweaver atualize apenas a referncia atual.

Nota: Se a opo Ativar a devoluo e retirada de arquivos estiver ativada neste site, o
Dreamweaver tentar retirar os arquivos que precisarem ser alterados. Se no conseguir
retirar um arquivo, o Dreamweaver exibir uma caixa de dilogo de advertncia e manter
inalteradas as referncias rompidas. Consulte Como utilizar as opes de devoluo e
retirada de arquivos na pgina 139.
Para ajustar os links no inspetor de propriedades:

Clique duas vezes em uma entrada da coluna Arquivo, na caixa de dilogo

Verificador de links.
O Dreamweaver abrir o documento, selecionar a imagem ou link com
problema, e realar o caminho e o nome do arquivo no inspetor de
propriedades. Caso o inspetor de propriedades no esteja visvel, escolha Janela
> Propriedades, para abri-lo.

Sobrescreva o texto realado, a fim 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 identificadores L e U, no inspetor de
propriedades, ou clique no boto Atualizar, para redefinir os valores relativos
altura e largura. Os identificadores L e U passaro, de negrito, ao tipo normal.

Salve o arquivo.

medida que os links forem ajustados, suas entradas desaparecero da lista Links
rompidos. A permanncia de uma entrada na lista aps a digitao do novo
caminho e nome de arquivo no Verificador de links (ou aps o salvamento das
alteraes feitas no inspetor de propriedades) indica que o Dreamweaver no
conseguiu localizar o novo arquivo. O link ainda ser considerado como rompido.

548

Captulo 21

Como abrir documentos vinculados no Dreamweaver

Os links no esto ativos dentro do Dreamweaver, ou seja, no possvel abrir um
documento vinculado clicando no link, na janela do documento.
Para abrir documentos vinculados no Dreamweaver, siga um dos procedimentos
abaixo:

Selecione o link e escolha Modificar > Abrir a pgina vinculada.

Pressione a tecla Control (no Windows), ou Command (no Macintosh), e
clique duas vezes no link.
Nota: necessrio que o documento vinculado resida no disco local.

Como verificar o tempo e o tamanho do

download
O tamanho da pgina atual e o tempo estimado do download da mesma
aparecero na parte inferior da janela do documento. O Dreamweaver calcular o
tamanho com base no contedo da pgina toda, o que inclui todos os objetos
vinculados, como imagens e plug-ins.
O Dreamweaver estimar o tempo de download com base na velocidade de
conexo digitada nas preferncias da barra de status. O tempo do download
varivel e depende das condies gerais da Internet.
Uma boa diretriz a ser seguida na verificao dos perodos de download de uma
determinada pgina da Web a regra de oito segundos. Ou seja, a maioria dos
usurios no esperar mais do que oito segundos para que a pgina seja carregada
completamente.
Para definir as preferncias de tempo e tamanho do download:

Escolha Editar > Preferncias e, em seguida, clique em Barra de status.

Escolha uma velocidade de conexo com a qual deseja calcular o tempo do

download.
A velocidade mdia de conexo nos Estados Unidos 28,8. Se o seu projeto
destinar-se a uma intranet, considere a escolha de 1500 (velocidade T1).

Como testar e publicar um site

549

Como utilizar os relatrios para testar um

site
Ao testar o site, possvel compilar e gerar relatrios relativos a vrios atributos
HTML, utilizando o comando Relatrios. Este comando permite verificar os links
externos, tags combinveis de fontes aninhadas, texto alternativo ausente, tags
aninhados redundantes, tags vazios removveis e documentos sem ttulo.
possvel testar e reparar documentos selecionados ou um site inteiro para estes
problemas de HTML antes de publicar o site.
Depois que um relatrio for compilado, possvel salv-lo como um arquivo
XML e import-lo para um arquivo existente de modelo. possvel importar
ento o arquivo de modelo para um banco de dados ou planilha, e imprimi-lo ou
exibi-lo no site da Web. possvel adicionar tambm diversos tipos de relatrios
ao Dreamweaver, atravs do site de intercmbio da Macromedia na Web. Consulte
Como adicionar extenses ao Dreamweaver na pgina 98.
Para utilizar o comando Relatrios para trabalhar com o sistema de devolues e
retiradas e com as Design Notes, consulte Como utilizar os relatrios para
melhorar o fluxo de trabalho na pgina 149.
Como criar relatrios
possvel executar vrios tipos de relatrios em documentos, pastas e sites,
organizar os resultados e obter detalhes adicionais sobre os resultados selecionados.
Para criar um relatrio:

Escolha Site > Relatrios.

Aparecer a caixa de dilogo Relatrios.

550

Captulo 21

Escolha uma categoria de relatrio no menu pop-up Relatrio.

As opes de relatrio so: Documento atual, Todo o site local, Arquivos
selecionados do site e Pasta. No possvel executar um relatrio Arquivos
selecionados do site, exceto se j tiver selecionado os arquivos na janela do site.

Selecione um tipo de relatrio, clicando na caixa apropriada.

possvel selecionar um relatrio ou selecionar vrios para serem executados
simultaneamente.

Os tags combinveis de fontes aninhadas criam um relatrio que lista todos os

tags de fontes aninhadas que podem ser combinados para limpar o cdigo. Por
exemplo: ser relatado <font color="#FF0000"><font size="4">STOP!</font></
font>.

Texto alternativo ausente cria um relatrio que lista todos os tags

img que no
possuem texto alternativo. Texto alternativo aparece no lugar da imagem para
os navegadores somente de texto ou para os navegadores que tiverem sido
definidos para o download manual de imagens.

Tags aninhados redundantes cria um relatrio que detalha os tags aninhados

que devem ser limpos. Por exemplo: a frase <i>
rei de Roma</i> seria relatada.

O rato <i> roeu</i> a roupa do

Tags vazios removveis cria um relatrio que detalha todos os tags vazios que
podem ser removveis, para limpar o cdigo HTML. Por exemplo: possvel
que um item ou imagem na visualizao de cdigo tenha sido excludo, mas os
tags que se aplicam a ele ou ela, no.

Documentos sem ttulo cria um relatrio que lista todos os documentos sem
ttulo encontrados dentro dos parmetros selecionados. Sero relacionados os
documentos com ttulos padro, ttulos duplicados ou tags de ttulos ausentes.
4

Clique em Executar, para criar o relatrio.

Dependendo do que escolher para relatar, voc precisar salvar o arquivo,
definir o site ou selecionar uma pasta (se ainda no o tiver feito).

Ser exibida uma lista de resultados na janela de resultados.

Para organizar os resultados, clique no cabealho da coluna de acordo com a
qual deseja ordenar. possvel ordenar pelo nome do arquivo, nmero da linha
ou descrio. Tambm possvel executar vrios relatrios diferentes e manter
as diversas janelas de resultados abertas.

Selecione um resultado especfico, para examinar uma descrio detalhada.

Clique em Abrir o arquivo, para ir at o item selecionado na janela do

documento.
Tambm possvel clicar duas vezes em um resultado, para abrir o arquivo na
janela do documento.

Como testar e publicar um site

551

Clique em Salvar o relatrio, para salvar o relatrio como um arquivo XML.

Os relatrios so salvos como arquivos XML e podem ser importados para
arquivos existentes de modelo. possvel importar, ento, o arquivo para um
banco de dados ou planilha, e imprimi-lo ou exibi-lo em um site da Web.

Sugesto: Depois de executar os relatrios HTML, utilize o comando Limpar o HTML,

para corrigir quaisquer erros de HTML que tiverem sido listados pelos relatrios.

552

Captulo 21

22

CAPTULO 22

Como personalizar o Dreamweaver

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

O Macromedia Dreamweaver pode ser personalizado de vrios modos,

permitindo que voc trabalhe da maneira que lhe for mais familiar, confortvel e
eficiente.
O texto seguinte abrange alguns modos de personalizar o Dreamweaver:

Defina as preferncias para todos os itens, desde os esquemas de cores e realce s

configuraes do site e navegadores. Consulte Como definir as preferncias
na pgina 92.

Altere os atalhos de teclado. Para alterar os atalhos utilizando uma interface

grfica no Dreamweaver, consulte Como utilizar o editor de atalhos de
teclado na pgina 95. Se preferir editar um arquivo de texto para alterar os
atalhos de teclado, consulte Como alterar os atalhos de teclado na
pgina 561.

Adicione extenses de outros fabricantes. Consulte Como adicionar extenses

ao Dreamweaver na pgina 98.

Reorganize os objetos no painel Objetos, para que aqueles utilizados com mais
freqncia estejam sempre visveis, crie novas categorias para reorganizar os
objetos ou adicionar novos. Consulte Como modificar o painel Objetos na
pgina 555.

Modifique os nomes dos itens de menu, adicione novos comandos e remova os

j existentes dos menus. Consulte Sobre a personalizao dos menus do
Dreamweaver na pgina 557.

Edite o perfil de formatao de origem, para obter um controle mais preciso

sobre o HTML criado pelo Dreamweaver. O arquivo SourceFormat.txt inclui
todas as definies das preferncias de formato HTML e muitas outras
informaes. Consulte Como alterar a formatao HTML padro na
pgina 569.

553

 Altere a maneira como os tags de outros fabricantes (como ASP e ColdFusion)

aparecem na visualizao do projeto da janela do documento. Consulte Como
personalizar a interpretao dos tags de outros fabricantes na pgina 576.

Crie os seus comandos e painis flutuantes usando JavaScript. Consulte Como

estender os recursos do Dreamweaver: Princpios bsicos na pgina 575.

Como alterar o tipo de arquivo padro

Como padro, o Dreamweaver mostra todos os tipos de arquivos que reconhece
na caixa de dilogo Arquivo > Abrir. Pode ser utilizado um menu pop-up na caixa
de dilogo, para limitar a exibio a determinados tipos de arquivos. Se a maior
parte do trabalho envolver um tipo de arquivo especfico (como os arquivos ASP),
a exibio padro poder ser alterada. Qualquer tipo de arquivo que esteja na
primeira linha do arquivo Extensions.txt do Dreamweaver ser tornado o padro.
Nota: Para ver todos os tipos de arquivo na caixa de dilogo Arquivo > Abrir, at mesmo
aqueles que o Dreamweaver no pode abrir, selecione Todos os arquivos (*.*). Esta opo
diferente de Todos os documentos, que mostra apenas os arquivos que o Dreamweaver
pode abrir.
Para alterar o tipo de arquivo padro do Dreamweaver, aberto segundo a opo
Arquivo > Abrir:

Faa uma cpia de segurana do arquivo Extensions.txt na pasta Configuration.

Abra o arquivo Extensions.txt no Dreamweaver ou em um editor de texto.

Recorte a linha correspondente ao novo padro e cole-a no incio do arquivo,

para que seja a primeira linha.

Salve o arquivo, saia do Dreamweaver e reinicie-o.

Para ver o novo padro, selecione Arquivo > Abrir e veja o menu pop-up de
tipos de arquivos.

Para adicionar novos tipos de arquivos ao menu na caixa de dilogo Arquivo >
Abrir:

Faa uma cpia de segurana do arquivo Extensions.txt na pasta Configuration.

Abra o arquivo Extensions.txt no Dreamweaver ou em um editor de texto.

Adicione uma linha para cada novo tipo de arquivo. Em caixa alta, digite as
extenses de nome de arquivo que o novo tipo de arquivo pode ter, separadas
por vrgulas; em seguida, adicione dois pontos e uma frase descritiva curta para
ser mostrada na caixa de dilogo Arquivo > Abrir. Por exemplo: para os
arquivos JPEG, digite
Arquivos de imagem JPG,JPEG,JFIF:JPEG

554

Captulo 22

Salve o arquivo, saia do Dreamweaver e reinicie-o.

Para ver as alteraes, selecione Arquivo > Abrir e clique no menu pop-up de
tipos de arquivos.

Como modificar o painel Objetos

Como padro, o painel Objetos dividido em vrias categorias: Caracteres,
Comuns, Formulrios, Molduras, Cabealhos, Invisveis e Especial. Para obter
informaes sobre os objetos nessas categorias, consulte Como utilizar o painel
Objetos na pgina 82. As categorias correspondem s pastas contidas na pasta
Configuration/Objects, dentro da pasta do aplicativo do Dreamweaver.
Voc pode mover objetos de uma categoria para outra, renomear painis e remover
objetos de um painel. Para que as alteraes apaream no painel Objetos, saia do
Dreamweaver e reinicie-o, ou recarregue as extenses.
Para cada objeto em uma categoria no painel Objetos, h dois ou trs arquivos na
pasta correspondente:

Um arquivo GIF que contm um cone correspondente ao objeto

Um arquivo HTML que contm o HTML a ser inserido no seu arquivo ou um
formulrio HTML que permite especificar os dados a serem includos (por
exemplo: o texto de um comentrio)

Um arquivo JavaScript (opcional) que gera o HTML a ser includo no

seu arquivo
Para mover um objeto de uma categoria no painel Objetos para outra:

Mova todos os arquivos do objeto (os arquivos GIF, HTML e JavaScript, se

houver algum) de uma pasta para outra, dentro da pasta Configuration/Objects.
Para renomear uma categoria no painel Objetos:

Renomeie a pasta correspondente, contida em Configuration/Objects.

Para remover um objeto do painel Objetos:

Mova os arquivos HTML, GIF e JavaScript correspondentes ao objeto para fora

da pasta Configuration/Objects. possvel excluir totalmente esses arquivos, se
tiver certeza de que deseja remover o objeto, mas conveniente manter uma cpia
de segurana para o caso de precisar restaurar o objeto posteriormente.
Para recarregar as extenses:

Pressione a tecla Control e clique (no Windows), ou pressione a tecla Option e

clique (no Macintosh) no menu pop-up de categorias, no alto do painel Objetos.

Escolha Recarregar as extenses.

Como personalizar o Dreamweaver

555

Como criar um objeto simples

O usurio pode criar objetos para adicion-los ao painel Objetos. Muitos objetos
simples no necessitam de JavaScript, eles contm apenas o cdigo-fonte HTML
que ser includo no documento. (Para obter informaes bsicas sobre a criao
de objetos mais complexos utilizando a linguagem JavaScript, consulte Como
estender os recursos do Dreamweaver: Princpios bsicos na pgina 575.
Aps a criao de um objeto, ele pode ser transformado em um pacote e
distribudo no site de intercmbio da Macromedia, se voc quiser que outros
usurios do Dreamweaver o utilizem. Para obter mais informaes, consulte o site
de intercmbio da Macromedia para o Dreamweaver. Para transformar uma
extenso em pacote, necessrio primeiramente efetuar o download do instalador
Package Manager naquele site e, em seguida, instalar o aplicativo com a opo de
programador.
Para criar um objeto simples:

Crie um novo documento em branco em um editor de texto (por exemplo:

BBEdit ou HomeSite).
Nota: O novo documento em branco, criado no Dreamweaver, contm vrios tags
HTML padro (html, head e body, por exemplo). Se desejar utilizar um dos editores de
cdigo do Dreamweaver (a visualizao de cdigo da janela do documento ou o
inspetor de cdigo) como editor de texto para criar um objeto simples, necessrio
primeiramente excluir todos os tags padro que aparecerem no editor de cdigo
quando o documento for criado.

Adicione os tags que este objeto deve inserir nos documentos.

Por exemplo, digite:
<p>
&copy; 2000 Z Productions, Inc.<BR>
Todos os direitos reservados
</p>

Salve o arquivo.
Para que o novo objeto aparea em uma das categorias existentes no painel
Objetos, salve-o em uma das subpastas da pasta Objects. Para criar uma nova
categoria, crie uma subpasta na pasta Configuration/Objects e salve o arquivo
nesse local. As pastas adicionais contidas em qualquer subpasta de categoria
(como as pastas criadas na subpasta Caracteres) sero ignoradas.

Em um programa grfico ou de edio de imagens (como o Macromedia

Fireworks), crie uma imagem GIF com 18 x 18 pixels, que corresponder ao
cone do objeto no painel Objetos.
Se a imagem criada for maior, o Dreamweaver a redimensionar
automaticamente para 18 x 18 pixels. Caso no seja criado um cone para o
objeto, o Dreamweaver inserir um cone de objeto genrico no painel Objetos.

556

Captulo 22

D ao cone o mesmo nome de arquivo que o do arquivo do objeto, mas utilize

a extenso .gif, e salve-o no diretrio em que estiver o arquivo do objeto.
Por exemplo: se o objeto se chamar Copyright_Z.htm e tiver sido salvo no
diretrio Comum, denomine o cone Copyright_Z.gif e salve esse arquivo no
mesmo diretrio.

Reinicie o Dreamweaver ou recarregue as extenses, para utilizar o novo objeto.

O objeto aparecer na parte inferior do menu Inserir e tambm no painel
Objetos. Para obter informaes sobre recarga de extenses, consulte Como
modificar o painel Objetos na pgina 555.

Sobre a personalizao dos menus do

Dreamweaver
O Dreamweaver cria todos os menus com a estrutura definida em um arquivo
XML, denominado menus.xml e situado na subpasta Configuration/Menus,
dentro da pasta do aplicativo do Dreamweaver. A edio desse arquivo modificar
os menus do Dreamweaver na prxima vez que o programa for iniciado. Para
obter informaes bsicas sobre o XML, consulte Sobre o XML na pgina 427.
Ao editar o arquivo menus.xml, possvel adicionar, alterar e remover atalhos de
teclado para os itens de menu , embora em muitos casos seja mais fcil fazer isso
utilizando o editor de atalhos de teclado. Consulte Como utilizar o editor de
atalhos de teclado na pgina 95. Os itens de menu tambm podem ser
reordenados, renomeados e removidos.
Se o menus.xml for aberto em um editor de XML, podero ser mostradas
mensagens de erro relativas aos e comerciais (&), contidos nesse arquivo.
melhor editar o arquivo menus.xml em um editor de texto comum. No o edite
no Dreamweaver.
Nota: Sempre faa uma cpia de segurana do arquivo menus.xml em uso ou de qualquer
arquivo de configurao do Dreamweaver, antes de modific-lo. fcil cometer erros ao
editar o arquivo de configurao de menus e, no Dreamweaver, no h qualquer modo de
reverter ao conjunto anterior de menus, que no seja a substituio do arquivo menus.xml.
Caso voc esquea de fazer uma cpia de segurana, a pasta Configuration contm uma
cpia do arquivo menus.xml padro, denominada menus.bak. Para reverter ao conjunto de
menus padro, substitua o menus.xml por uma cpia do menus.bak.

Como personalizar o Dreamweaver

557

Como modificar o menu Comandos

Determinados tipos de comandos podem ser adicionados ao menu Comandos,
alterando os seus nomes, sem editar o arquivo menus.xml.
Nota: O termo comando tem dois significados no Dreamweaver. No sentido estrito, um
comando um determinado tipo de extenso. Contudo, em determinados contextos, a
palavra comando utilizada como sinnimo de item de menu significando qualquer item
que aparea em um menu do Dreamweaver, sem levar em conta a sua funo ou como
implementado.

Para criar novos comandos que so colocados automaticamente no menu

Comandos, utilize o painel Histrico (consulte Como criar novos comandos a
partir das etapas do histrico na pgina 173). Pode-se usar tambm o Package
Manager para instalar as novas extenses, inclusive os comandos; consulte Como
adicionar extenses ao Dreamweaver na pgina 98.
Para reordenar os itens no menu Comandos, ou para mover os comandos entre os
menus, o arquivo menus.xml deve ser editado.
Para renomear um comando que voc criou:

Escolha Comandos > Editar a lista de comandos.

Aparece uma caixa de dilogo com uma lista de todos os comandos cujos
nomes podem ser alterados. Os comandos que esto no menu Comandos
padro no aparecero nessa lista e no podero ser editados atravs desse
procedimento.

Selecione um comando a ser renomeado.

Digite um novo nome.

Clique em Fechar.
O comando aparecer renomeado no menu Comandos.

Para excluir um comando que voc criou:

Escolha Comandos > Editar a lista de comandos.

Aparece uma caixa de dilogo com uma lista de todos os comandos que podem
ser excludos. Os comandos que esto no menu Comandos padro no
aparecero nessa lista e no podero ser excludos atravs desse procedimento.

558

Captulo 22

Selecione um comando a ser excludo.

Clique em Excluir, em seguida, confirme a remoo do comando.

O comando ser excludo. Observe que tambm foi excludo o arquivo que
contm o cdigo para o comando; a excluso de um comando no remove
apenas um item do menu. Certifique-se de que deseja realmente excluir o
comando, antes de utilizar esse procedimento. Se voc quiser remover um item
do menu Comandos sem excluir o arquivo, procure o arquivo em
Configuration/Commands e mova-o para outra pasta.

Clique em Fechar.

Como reorganizar os menus e os itens de menus

Ao editar o arquivo menus.xml, possvel mover os itens em um menu ou de um
menu para outro, adicionar ou remover separadores dos menus, bem como mover
menus em uma barra de menus ou at mesmo de uma barra para outra.
Observe que os itens podem ser inseridos ou removidos dos menus contextuais,
utilizando o mesmo procedimento empregado para outros menus.
Para obter informaes sobre a sintaxe do arquivo menus.xml, consulte Sobre a
sintaxe dos tags do menus.xml na pgina 562.
Para mover um item de menu:

Saia do Dreamweaver.

Faa uma cpia de segurana do arquivo menus.xml.

Abra o arquivo menus.xml em um editor de texto (BBEdit, HomeSite ou

Wordpad, por exemplo). No o abra no Dreamweaver.

Recorte um tag menuitem inteiro, de <menuitem, no incio, at /> , no final.

Coloque o ponto de insero no novo local para o item de menu. Verifique se

ele est entre um tag <menu> e seu correspondente </menu>.

Cole o item de menu nesse novo local.

Para criar um submenu ao mover um item de menu:

Coloque o ponto de insero dentro de um menu (em alguma posio entre

um tag<menu> e seu correspondente </menu>).

Insira um novo par <menu></menu> no menu.

Adicione novos itens de menu a este submenu.

Para inserir um separador entre dois itens de menu:

Digite <separator / entre os dois tags menuitem>.

Como personalizar o Dreamweaver

559

Para remover um separador existente:

Exclua a linha <separator

/>

correspondente.

Para mover um menu:

Saia do Dreamweaver.

Faa uma cpia de segurana do arquivo menus.xml.

Abra o arquivo menus.xml em um editor de texto (BBEdit, HomeSite ou

Wordpad, por exemplo). No o abra no Dreamweaver.

Recorte o menu inteiro e seu contedo, a partir do tag de abertura <menu> at o

de finalizao </menu>.

Coloque o ponto de insero no novo local para o menu. Verifique se ele est
entre um tag <menubar> e seu correspondente </menubar>.

Cole o menu nessa nova posio.

Como alterar o nome do menu ou de um item de menu

O nome do menu ou de um item de menu pode ser facilmente alterado, editando
o arquivo menus.xml. Para obter informaes sobre a sintaxe do arquivo
menus.xml, consulte Sobre a sintaxe dos tags do menus.xml na pgina 562.
Para alterar o nome do menu ou de um item de menu:

Saia do Dreamweaver.

Faa uma cpia de segurana do arquivo menus.xml.

Abra o arquivo menus.xml em um editor de texto, como HomeSite, BBEdit ou

Wordpad (no o abra no Dreamweaver).

Se for modificado um item de menu, localize o tag menuitem adequado e altere o

valor do atributo name correspondente. Se for modificado um menu, localize o
tag menu adequado e altere o valor do atributo name correspondente.
Nota: Em ambos os casos, no altere o atributo id.

560

Captulo 22

Salve e feche o menus.xml, em seguida, reinicie o Dreamweaver para ver as suas

alteraes.

Como alterar os atalhos de teclado

Se os atalhos de teclado padro no forem convenientes, voc poder alterar ou
remover os j existentes, ou adicionar novos. O modo mais fcil de fazer isso
utilizar o editor de atalhos de teclado (consulte Como utilizar o editor de atalhos
de teclado na pgina 95). Contudo, se preferir, poder tambm modificar os
atalhos de teclado diretamente no arquivo menus.xml, embora seja muito mais
fcil cometer erros ao digitar atalhos no menus.xml do que no editor de atalhos de
teclado. Para obter informaes sobre a sintaxe do arquivo menus.xml, consulte
Sobre a sintaxe dos tags do menus.xml na pgina 562.
Para alterar um atalho de teclado:

Saia do Dreamweaver.

Faa uma cpia de segurana do arquivo menus.xml.

Abra o arquivo menus.xml em um editor de texto (BBEdit, HomeSite ou

Wordpad, por exemplo). No o abra no Dreamweaver.

Examine a Matriz de atalhos de teclado na pgina 598 e localize um atalho

que no esteja sendo utilizado ou algum ao qual ser dada uma nova atribuio.
Se um atalho de teclado for designado novamente, risque-o em uma cpia
impressa da matriz, para referncia futura.

Se um atalho de teclado receber uma nova atribuio, procure o item de menu

ao qual o atalho foi designado e remova o atributo key="shortcut" desse item de
menu.

Localize o item de menu para o qual ser designado ou redesignado o atalho de

teclado.

Se o item de menu j tiver um atalho de teclado, procure o atributo key nesta

linha. Caso contrrio, adicione key="" em qualquer posio entre os atributos
dentro do tag menuitem.

Entre as aspas do atributo key, digite o novo atalho de teclado.

Utilize um sinal de adio (+) entre as teclas em uma combinao de teclas. Para
obter mais informaes sobre os modificadores, veja a descrio do tagmenuitem
na <menuitem> na pgina 564.
Se o atalho de teclado estiver em uso em outro local e caso no tenha sido
removida a outra utilizao, o atalho ser aplicado apenas ao primeiro item de
menu ao qual foi atribudo no menus.xml.
Nota: O mesmo atalho de teclado pode ser utilizado para um item de menu apenas do
Macintosh e para outro apenas do Windows.

Grave o novo atalho no local apropriado da Matriz de Atalhos de Teclado.

Como personalizar o Dreamweaver

561

Sobre a sintaxe dos tags do menus.xml

O arquivo menus.xml contm uma lista estruturada de menus, barras de menus,
itens de menu, separadores e listas de atalhos. Esses itens so descritos pelos tags
XML, que podem ser editados em um editor de texto.
Nota: Tenha cuidado ao modificar os menus. O Dreamweaver ignora qualquer menu ou
item de menu que contenha um erro de sintaxe XML.

Uma barra de menus (marcada com tags de abertura e fechamento menubar) um

menu individual ou um conjunto de menus por exemplo: h uma barra de
menus principal, uma barra de menus da janela do site separada (que aparece
apenas no Windows e no no Macintosh) e uma barra de menus para cada menu
contextual. Cada barra de menu contm um ou mais menus; um menu est
contido em um tag menu. Cada menu contm um ou mais itens de menu, e cada
um deles descrito por um tag menuitem e seus atributos. Um menu tambm
composto por separadores (descritos pelo tag separator tags) e submenus.
Alm dos atalhos de teclado associados ao itens de menu, o Dreamweaver fornece
vrios outros atalhos de teclado, incluindo atalhos alternativos e aqueles que esto
disponveis apenas em determinados contextos. Por exemplo: Control+Y (no
Windows) ou Command+Y (no Macintosh) o atalho para Refazer, porm
Control+Shift+Z ou Command+Shift+Z um atalho alternativo para Refazer.
Essas alternativas e outros atalhos que no podem ser representados nos tags
para os itens de menu so definidos nas listas de atalhos no arquivo menus.xml.
Cada lista de atalhos (descrita por um tag shortcutlist) contm um ou mais
atalhos, cada um deles descrito por um tag shortcut.
As sees abaixo descrevem a sintaxe dos tags do menus.xml. Os atributos
opcionais esto marcados com chaves ({}) nas listas de atributos; todos os
atributos no marcados com chaves so obrigatrios.
<menubar>
Descrio

Contm informaes sobre uma barra de menus na estrutura de menus do

Dreamweaver.
Atributos

name, {app}, id, {platform}

o nome da barra de menus. Embora name seja um atributo necessrio,

poder ser representado pelo valor "".

name

o nome do aplicativo no qual a barra de menus est disponvel. Os valores

vlidos so "dreamweaver" e "ultradev". O padro que a barra de menus esteja
disponvel no Dreamweaver e no UltraDev.
app

a identificao do menu para a barra de menus. Cada identificao de menu

no arquivo menus.xml deve ser nica.
id

562

Captulo 22

indica que a barra de menus deve aparecer apenas em uma determinada

plataforma. Os valores vlidos so "win" e "mac".

platform

Contedo

Esse tag deve conter um ou mais tags menu.

Continer

Nenhum
Exemplo

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

<menubar name="Main Window" id="DWMainWindow">
<!-- menu tags here -->
</menubar>

<menu>
Descrio

Contm informaes sobre um menu ou submenu que aparecer na estrutura de

menus do Dreamweaver.
Atributos

name, {app}, id, {platform}

o nome do menu na forma em que aparecer na barra de menus. Para

definir a tecla de acesso ao menu (mnemnico) no Windows, utilize um sinal de
sublinhado (_) antes da letra de acesso. O sinal de sublinhado ser
automaticamente removido no Macintosh.

name

app o nome do aplicativo no qual o menu est disponvel. Os valores vlidos so

"dreamweaver" e "ultradev". O padro que o menu esteja disponvel no

Dreamweaver e no UltraDev.
id

a identificao para o menu. Cada identificao no arquivo deve ser nica.

indica que o menu deve aparecer apenas em uma determinada

plataforma. Os valores vlidos so "win" e "mac".
platform

Contedo

Esse tag contm um ou mais tags menuitem e separator. Pode conter tambm
outros tags menu (para criar submenus) e tags de comentrio em HTML padro.
Continer

Esse tag deve estar contido em um tag menubar.

Exemplo

<menu name="_File" id="DWMenu_File">

<!-- menuitem, separator, menu, and comment tags here -->
</menu>

Como personalizar o Dreamweaver

563

<menuitem>
Descrio

Define um item para um menu do Dreamweaver.

Atributos

name, id, {app}, {key}, {platform}, {enabled}, {arguments}, {command}, {file},

{checked}, {dynamic}
name O nome do item que aparece no menu. Um sinal de sublinhado indica que
a letra seguinte a tecla de acesso ao comando (mnemnico), apenas no Windows.

utilizado pelo Dreamweaver para identificar o item. Essa identificao deve

ser nica em toda a estrutura do menu. Se forem adicionados novos itens de menu
ao arquivo menus.xml, utilize o nome de sua empresa ou uma outra seqncia de
caracteres nica como prefixo para cada identificao de item, a fim de assegurar a
exclusividade.
id

o nome do aplicativo no qual o item de menu est disponvel. Os valores

vlidos so "dreamweaver" e "ultradev". O padro que o item de menu esteja
disponvel no Dreamweaver e no UltraDev.
app

key o atalho de teclado para o comando, se houver algum. Utilize estas

seqncias para especificar as teclas modificadoras:

Cmd

especifica a tecla Control (no Windows) ou Command (no Macintosh).

e Opt respectivamente especificam a tecla Alt (no Windows) ou Option

(no Macintosh).
Alt

Shift especifica a tecla Shift em ambas as plataformas.

Ctrl especifica a tecla Control em ambas as plataformas.
Um sinal de adio (+) separa as teclas modificadoras, se um atalho utilizar mais
de um modificador. Por exemplo: Cmd+Opt+5 no atributo key significa que o item
de menu executado pressionando as teclas Control, Alt e 5 (no Windows) ou
Command, Option e 5 (no Macintosh).

As teclas especiais so indicadas pelo nome: F1 a F12, PgDn, PgUp, Home, End, Ins,
Del, Tabulao, Esc, Retrocesso e Espao. As teclas modificadoras tambm
podem ser aplicadas s teclas especiais.

indica em qual plataforma o item aparece. Os valores vlidos so "win",

significando apenas Windows, ou "mac", indicando apenas Macintosh. Se o
atributo platform no for especificado, o item de menu aparecer em ambas as
plataformas. Para que um item de menu se comporte de modo diferente em
plataformas distintas, fornea dois itens de menu com o mesmo nome (mas com
identificaes diferentes): um com platform="win" e o outro com platform="mac".
platform

564

Captulo 22

fornece o cdigo JavaScript (normalmente, uma chamada de funo

JavaScript) que determina se o item de menu est ativado. Se a funo retornar
false, o item de menu estar desativado. O valor padro "true", porm melhor
especificar sempre um valor por motivo de clareza, mesmo que ele seja "true".

enabled

fornece argumentos para que o Dreamweaver os passe ao cdigo no

arquivo JavaScript, especificado no atributo file. Envolva os argumentos em aspas
simples ('), dentro das aspas duplas utilizadas para delimitar o valor de um
atributo.
arguments

especifica uma expresso JavaScript que ser executada quando o

usurio selecionar esse item no menu. Nos cdigos JavaScript complexos, utilize
um arquivo JavaScript (especificado no atributo file). Deve ser especificado file
ou command para cada item de menu.
command

o nome do arquivo HTML que contm o JavaScript que controla o item

de menu. Especifica um caminho de arquivo relativo pasta Configuration. Por
exemplo: o item de menu Bem-vindo > Ajuda representado por
file="Commands/Welcome.htm". Observe que o atributo file anula os atributos
command, enabled e checked. Deve ser especificado file ou command para cada item de
menu. Para obter informaes sobre a criao de um arquivo de comando
utilizando o painel Histrico, consulte Como criar novos comandos a partir das
etapas do histrico na pgina 173. Consulte Como estender os recursos do
Dreamweaver, para obter informaes sobre a maneira de escrever os seus
comandos JavaScript a partir do zero.
file

uma expresso JavaScript que indica se o item de menu tem uma

marca de seleo ao seu lado, no menu; se a expresso for avaliada como true, o
item ser exibido com uma marca.
checked

se estiver presente, indica que um item de menu deve ser determinado

dinamicamente por um arquivo HTML, que contenha cdigo JavaScript para
definir o texto e o estado do item de menu. Se um tag for especificado como
dynamic, o atributo file tambm dever ser definido.
dynamic

indica se as visualizaes do projeto e de cdigo devem ser

sincronizadas antes da execuo do cdigo para esse item de menu. Os valores
vlidos so "true" (o padro) e "false". Se esse atributo for definido para "false",
isto significa que as alteraes no arquivo feitas por esse item de menu no
utilizam o DOM (Document Object Model) do Dreamweaver. Para obter
informaes sobre o DOM, consulte Como estender os recursos do Dreamweaver.
isdomrequired

Contedo

Nenhum (tag vazio).

Continer

Esse tag deve estar contido em um tag menu.

Exemplo

<menuitem name="_New" key="Cmd+N" enabled="true" command="dw.createDocument()"

id="DWMenu_File_New" />

Como personalizar o Dreamweaver

565

<separator>
Descrio

Indica que um separador deve ser exibido no local correspondente no menu.

Atributos

{app}
app o nome do aplicativo no qual o separador mostrado. Os valores vlidos so
"dreamweaver" e "ultradev". O padro que o separador seja mostrado no

Dreamweaver e no UltraDev.
Contedo

Nenhum (tag vazio).

Continer

Esse tag deve estar contido em um tag menu.

Exemplo

<separator />

<shortcutlist>
Descrio

Especifica uma lista de atalhos no arquivo menus.xml.

Atributos

{app}, id, {platform}

o nome do aplicativo no qual a lista de atalhos est disponvel. Os valores

vlidos so "dreamweaver" e "ultradev". O padro que a lista de atalhos esteja
disponvel no Dreamweaver e no UltraDev.
app

a identificao da lista de atalhos. Ela deve ser a mesma que a identificao do

menu para a barra de menus (ou menu contextual) no Dreamweaver ao qual os
atalhos esto associados. Os valores vlidos so "DWMainWindow", "DWMainSite",
"DWTimelineContext" e "DWHTMLContext".
id

indica que a lista de atalhos deve aparecer apenas em uma determinada

plataforma. Os valores vlidos so "win" e "mac".
platform

Contedo

Esse tag deve conter um ou mais tags shortcut. Pode acomodar tambm um ou
mais tags de comentrio (que utilizem a mesma sintaxe que os tags de comentrio
em HTML).
Continer

Nenhum
Exemplo

<shortcutlist id="DWMainWindow">
<!-- shortcut and comment tags here -->
</shortcutlist>

566

Captulo 22

<shortcut>
Descrio

Especifica uma lista de atalhos de teclado no arquivo menus.xml.

Atributos

key, {app}, {platform}, {file}, {arguments}, {command}, id, {name}

a combinao de teclas que ativa o atalho de teclado. Para obter mais

detalhes sobre a sintaxe, consulte <menuitem> na pgina 564.

key

app o nome do aplicativo no qual o atalho est disponvel. Os valores vlidos so

"dreamweaver" e "ultradev". O padro que o atalho esteja disponvel no

Dreamweaver e no UltraDev.
especifica que o atalho funciona apenas na plataforma indicada. Os
valores vlidos so "win" e "mac". Se esse atributo no for especificado, o atalho
funcionar em ambas as plataformas.
platform

file o caminho de um arquivo que contm o cdigo JavaScript que o

Dreamweaver executar quando o atalho de teclado for acionado. O atributo file
anula o atributo command. Deve ser especificado file ou command para cada atalho.

fornece argumentos para que o Dreamweaver os passe ao cdigo no

arquivo JavaScript, especificado no atributo file. Envolva os argumentos em aspas
simples ('), dentro das aspas duplas utilizadas para delimitar o valor de um
atributo.
arguments

o cdigo JavaScript que o Dreamweaver executar quando o atalho de

teclado for acionado. Deve ser especificado file ou command para cada atalho.

command

id

um identificador nico para um atalho.

name um nome para o comando executado pelo atalho de teclado, com o mesmo
estilo de um nome de item de menu. Por exemplo: o atributo name para o atalho
F12 "Visualizar no navegador primrio".
Contedo

Nenhum (tag vazio).

Continer

Esse tag deve estar contido em um tag shortcutlist.

Exemplo

<shortcut key="Cmd+Shift+Z" file="Menus/MM/Edit_Clipboard.htm"

arguments="'redo'" id="DWShortcuts_Edit_Redo" />

Como personalizar o Dreamweaver

567

Como personalizar a aparncia das caixas

de dilogo
Os layouts das caixas de dilogo para objetos, comandos e comportamentos so
especificados como formulrios HTML, eles residem em arquivos HTML na
pasta Configuration, no diretrio do aplicativo do Dreamweaver. Esses
formulrios so editados como qualquer outro do Dreamweaver. Consulte Como
criar formulrios na pgina 519.
Para alterar a aparncia de uma caixa de dilogo:

Localize o arquivo .htm adequado em Configuration/Objects, Configuration/

Commands ou Configuration/Behaviors.

Faa uma cpia do arquivo, em um local diferente da pasta Configuration.

Abra a cpia no Dreamweaver, edite o formulrio e salve a cpia.

Saia do Dreamweaver.

Transfira essa cpia modificada de volta para a pasta Configuration,

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 modificada, mas no o seu

funcionamento; ela dever conter ainda os mesmos tipos e nomes dos elementos
de formulrio, a fim de que as informaes obtidas pelo Dreamweaver na caixa de
dilogo possam ser utilizadas da mesma forma.
Por exemplo: o objeto comentrio obtm a entrada de texto em uma rea de texto,
numa caixa de dilogo, em seguida utiliza uma funo JavaScript simples para
transform-la em um comentrio em HTML, que ser inserido no documento. O
formulrio que descreve a caixa de dilogo est em Configuration/Objects/
Invisibles/Comment.htm. possvel abrir e alterar o tamanho e outros atributos
da rea do texto, mas se for removido o tag textarea inteiro, ou alterado o valor do
seu atributo name, o objeto comentrio deixar de funcionar corretamente.

568

Captulo 22

Como alterar a formatao HTML padro

O perfil de formatao da fonte de HTML determina como o Dreamweaver
formata o cdigo-fonte HTML de um documento. O perfil inclui as preferncias
de formato de cdigo (que podem ser facilmente definidas com Editar >
Preferncias; consulte Preferncias de formato de cdigo na pgina 375 para
obter mais detalhes) e as preferncias de formatao adicionais para tags
individuais e grupos de tags. A nica maneira de alterar as preferncias de
formatao, que no so mostradas nas preferncias de formato de cdigo, editar
o arquivo SourceFormat.txt em um editor de texto. Esse arquivo est na pasta
Configuration, dentro da pasta do aplicativo do Dreamweaver.
As preferncias de formato de cdigo, definidas com o comando Editar >
Preferncias, so salvas no SourceFormat.txt, quando o Dreamweaver fechado.
necessrio sair do aplicativo, antes de editar o perfil, caso contrrio, as alteraes
podero ser anuladas quando o Dreamweaver for fechado.
O perfil de formatao da origem de HTML segue um formato especfico, que
descrito no arquivo. Leia as seguintes convenes:

Cada seo do perfil comea com um tag no formato <?keyword> (por exemplo:
<?options>, <?elements>

ou <?attributes>).

Os parmetros de cada seo so definidos nos comentrios em HTML

(<!--

-->)

diretamente acima desta seo.

A linha omit na seo <?options> reservada para utilizao posterior

(atualmente, ela no afeta a formatao da fonte de HTML).

Um tag individual pode ser marcado como pertencente a um grupo de recuo

(igroup) na seo <?elements>. Como padro, o grupo de recuo 1 contm as
linhas e colunas da tabela, e o grupo de recuo 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 tags a cada grupo de recuo,
para control-los com as opes em preferncias de formato HTML.
Os quatro nmeros contidos no atributo break para cada tag indicam
respectivamente quantas quebras de linha devem ser utilizadas antes e logo aps o
tag de abertura (e antes do contedo do tag), e quantas colocar imediatamente
antes e depois do tag de finalizao.

Como personalizar o Dreamweaver

569

Por exemplo: as definies padro do tag p no SourceFormat.txt so

<p break="1,0,0,1" indent>, e produzem a seguinte formatao:
<p> um pargrafo de texto recuado na margem esquerda (aps a primeira
linha) e que contm uma quebra de linha antes do tag p de abertura e depois
do
do tag p de finalizao, porm nenhuma quebra de linha aps o p de abertura
e nenhuma antes do
p de finalizao.</p>
<p>Prximo pargrafo.</p>

Se as definies forem alteradas para <p break="1,1,1,2">, a visualizao de cdigo

e o inspetor de cdigo exibiro os pargrafos de texto da seguinte maneira:
<p>
um pargrafo de texto que no recuado na margem esquerda e tem uma
quebra de linha antes e depois do tag p de abertura, uma quebra de linha antes
do tag p
de finalizao e duas quebras de linha aps o tag p de finalizao.
</p>
<p>
Prximo pargrafo.
</p>

Observe que o nmero de quebras de linha aps o tag de finalizao e antes do tag
de abertura seguinte o maior dos dois nmeros especificados se voc definir
duas quebras de linha antes de um tag e trs depois, isto resultar em trs quebras
de linha entre o tag de finalizao e o prximo tag de abertura.
Algumas definies de tags e atributos incluem o termo namecase, que especifica
que o tag ou atributo deve ser escrito em caixa alta, exatamente como foi definido
no valor do atributo namecase. Por exemplo: onClick especificado no arquivo
SourceFormat.txt como <onClick namecase="onClick">, contudo, onClick sempre
exibido com uma combinao exclusiva de maisculas e minsculas,
independentemente das preferncias de caixa alta ou baixa do usurio.
Outro termo utilizado para especificar a caixa alta ou baixa samecase, que
especifica que o valor de um atributo deve ser escrito em caixa alta ou baixa da
mesma maneira que o nome do atributo. Por exemplo: <align samecase> indica
que o Dreamweaver gera um atributo align; o valor do atributo aparecer com a
mesma caixa alta ou baixa que o nome do atributo. Isto se aplica tambm aos
nomes de atributos que no tm valores, por isso, no remova samecase das
especificaes de formatao de atributo onde quer que apaream.

570

Captulo 22

O termo noformat associado a um tag indica que as quebras de linhas, o recuo e o

uso de caixa alta ou baixa de uma instncia de um tag existente nunca sero
modificados de acordo com o formato especificado no arquivo SourceFormat.txt.
No caso de um tag marcado com noformat, o formato especificado no
SourceFormat.txt utilizado apenas quando uma nova instncia do tag for criada
com o Dreamweaver. Por exemplo: <pre break="1,0,0,1" noformat> significa que,
se for criado um novo tag pre com as ferramentas do Dreamweaver, o programa
utilizar a especificao de quebra de linha "1,0,0,1"; mas se j houver um tag pre
criado manualmente pelo usurio, cujas quebras de linhas no coincidem com essa
especificao e esse tag for editado na visualizao do projeto, as quebras de linha
no sero alteradas.
Qualquer atributo no especificado no arquivo SourceFormat.txt utilizar as
definies de formatao padro indicadas na categoria das preferncias de
formato HTML.

Como trabalhar com perfis de navegadores

Os perfis de navegadores so os arquivos que o Dreamweaver utiliza para examinar
os documentos quando for executada uma verificao do navegador de destino
(consulte Como verificar a compatibilidade com o navegador na pgina 542).
Cada perfil contm informaes sobre os tags 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 tags.
Os perfis de navegadores so armazenados na pasta Configuration/
BrowserProfiles, dentro da pasta do aplicativo do Dreamweaver. Voc poder
editar os perfis existentes ou criar novos com o Dreamweaver ou um editor de
texto (BBEdit, HomeSite, Bloco de Notas ou SimpleText, por exemplo). No
necessrio sair do Dreamweaver para editar ou criar os perfis de navegadores.
Sobre a formatao dos perfis de navegadores
Os perfis de navegadores seguem um formato especfico. Para evitar erros de
anlise durante as verificaes dos navegadores de destino, siga estas regras ao
editar ou criar perfis:

A primeira linha reservada ao nome do perfil. Este deve conter, no final, um

retorno de carro. O nome nesta linha aparece na caixa de dilogo Verificao do
navegador de destino e no relatrio de verificao 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 perfis
de navegadores. No altere ou mova esta linha.

Como personalizar o Dreamweaver

571

 Dois hfens (--) no incio de uma linha indicam um comentrio (isto , a linha
ser ignorada durante o processo de verificao do destino). Um comentrio
deve comear no incio de uma linha dois hfens no podem ser colocados
no meio de uma linha.

Deve ser colocado um espao nessas posies: antes do sinal de maior de

finalizao (>) na linha !ELEMENT, aps o parntese de abertura em uma lista de
valores para um atributo, antes de um parntese de finalizao em uma lista de
valores, e antes e depois de cada trao (|) em uma lista de valores.

Deve ser includo um ponto de exclamao, sem um espao, antes de cada uma
das seguintes palavras: ELEMENT, ATTLIST, Error, msg e htmlmsg (!ELEMENT, !ATTLIST,
!Error, !msg, !htmlmsg).

possvel incluir !Error e !Warning na rea !ELEMENT ou !ATTLIST.

As mensagens !msg podem conter apenas texto simples. As mensagens !htmlmsg
podem conter qualquer HTML vlido, inclusive hiperlinks.

Os comentrios em HTML (<!--

-->) no podem ser listados como tags nos

perfis de navegadores porque interferem na anlise. O Dreamweaver no relata
um erro para os comentrios porque eles contam com suporte de todos os
navegadores.

A sintaxe de uma entrada de tag

<!ELEMENT htmlTag NAME="tagName" >
<!ATTLIST htmlTag
unsupportedAttribute1!Error !msg="O atributo unsupportedAttribute1 do tag
htmlTag no recebe suporte. Experimente utilizar supportedAttribute1 para
obter um efeito semelhante."
supportedAttribute1
supportedAttribute2( validValue1 | validValue2 | validValue3 )
unsupportedAttribute2!Error !htmlmsg="<b>Nunca utilize o
atributounsupportedAttribute2 do tag htmlTag tag!</b>"
>

Os elementos mostrados na sintaxe acima so definidos da seguinte maneira:

htmlTag

o tag na forma em que aparece em um documento HTML.

tagName um nome descritivo para o tag (por exemplo: o nome do tag HR

Rgua horizontal). O atributo NAME opcional. Se for especificado, tagName ser
utilizado nas mensagens de erro; caso um nome no seja fornecido, htmlTag ser
utilizado nas mensagens de erro.
unsupportedAttribute um atributo que no conta com suporte. Considera-se que

os tags e atributos que no foram explicitamente mencionados no contam com

suporte. Especifique os tags ou atributos sem suporte apenas quando desejar criar
uma mensagem de erro personalizada.
supportedAttribute um atributo ao qual o htmlTag oferece suporte. Considera-se
que apenas os tags presentes na lista sem uma designao !Error contam com
suporte do navegador.

572

Captulo 22

validValue

um valor que conta com suporte do atributo.

O exemplo abaixo mostra uma entrada para o tag APPLET , que seria exato para o
Navigator 3.0:
<!ELEMENT APPLET Name="Java Applet" >
<!ATTLIST APPLET
Alinhar ( no alto | no meio | embaixo | esquerda | direita | no meio
absoluto | o mais abaixo | linha de base | alto do texto )
Alt
Archive
Class !Warning !htmlmsg="Este navegador ignora o atributo <CODE>CLASS</
CODE> do tag <CODE>APPLET</CODE>.".
Code
Codebase
Height
HSpace
Class !Warning !htmlmsg="Este navegador ignora o atributo <CODE>ID</CODE>
do tag <CODE>APPLET</CODE>". Utilize em seu lugar <CODE>NAME</CODE>".
Name
Style !Warning !htmlmsg="Este navegador ignora o atributo <CODE>STYLE</
CODE> do tag <CODE>APPLET</CODE>".
VSpace
Width
>

Como criar e editar os perfis de navegadores

Um perfil de navegador pode ser criado atravs da modificao de um perfil
existente. Por exemplo: para criar um perfil para uma verso mais avanada do
Microsoft Internet Explorer, abra o perfil da verso mais recente do Internet
Explorer, que contenha um perfil, adicione os novos tags e atributos da nova
verso e salve-o como um perfil para essa verso mais avanada.
Nota: Antes de criar um perfil para uma nova verso de navegador, visite o site de
intercmbio da Macromedia para o Dreamweaver, a fim de verificar se a Macromedia
forneceu um perfil de navegador que possa ser obtido por download e instalado usando o
Package Manager.
Para criar ou editar um perfil de navegador:

Utilizando um editor de texto, abra um perfil existente.

Se voc estiver criando um novo perfil, abra o perfil que mais se assemelhe ao
que ser criado, em seguida, salve o arquivo com um novo nome.

Ao criar um novo perfil, altere o nome que aparece na primeira linha de texto
do arquivo.
Dois perfis no podem ter o mesmo nome.

Como personalizar o Dreamweaver

573

Adicione novos tags ou atributos que contam com suporte do navegador,

utilizando a sintaxe mostrada em Sobre a formatao dos perfis de
navegadores na pgina 571.
Se no desejar receber mensagens de erro sobre um determinado tag que no
conte com suporte, adicione-o lista de tags aceitos. Caso isto seja feito, salve o
perfil em um arquivo separado com um novo nome (limitado a
Nomedonavegador x.x , por exemplo). O novo nome do perfil serve para
preservar o perfil original apenas com os tags que contam com suporte.

Exclua os tags ou atributos que no contam com suporte do navegador.

Essa etapa desnecessria quando for criado um perfil para a prxima verso do
Netscape Navigator ou Microsoft Internet Explorer, porque, raramente, os
navegadores deixam de oferecer suporte aos tags.

Adicione as mensagens de erro personalizadas, de acordo com a sintaxe

mostrada em Sobre a formatao dos perfis de navegadores na pgina 571.
Os perfis que acompanham o Dreamweaver listam todos os tags que recebem
suporte dos navegadores especificados. Para adicionar uma mensagem de erro
personalizada a um tag, inclua !msg "message" ou !htmlmsg "<tag>message</tag>"
depois de !Error. Por exemplo: esta informao aparece no perfil do Netscape
Navigator 3.0 (juntamente com outros atributos no mostrados aqui):
<!ELEMENT HR name="Rgua horizontal" >
<!ATTLIST HR
COLOR
!Error
>

Para adicionar uma mensagem de erro personalizada, digite !msg: e, em

seguida, a mensagem de erro, entre aspas:
<!ELEMENT HR name="Rgua horizontal" >
<!ATTLIST HR
COLOR
!Error !msg "O Internet Explorer 3.0 oferece suporte ao tag
COLOR nas rguas horizontais, mas no o Netscape Navigator 3.0."
>

pode ser utilizado para todas as situaes de erro, ou use !Warning, para
indicar que o tag ser ignorado mas no causar um erro.

6 !Error

574

Captulo 22

Como estender os recursos do

Dreamweaver: Princpios bsicos
O Dreamweaver foi projetado para ser extensvel. O programa inclui um
intrprete de JavaScript, para que voc possa ler e executar o cdigo JavaScript, e
fornece uma interface de programao de aplicativos (API), um amplo conjunto
de funes JavaScript que permite aos programadores estender os recursos do
Dreamweaver. O Dreamweaver tambm oferece o Document Object Model
(DOM), que permite s extenses examinar e modificar a estrutura e o contedo
de um documento.
Com a API de JavaScript, possvel criar objetos, aes de comportamento,
comandos, inspetores de propriedades, painis flutuantes e conversores de dados
(todos denominados coletivamente como extenses).
Voc pode criar tambm novos objetos e comandos simples sem conhecer
programao; consulte Como criar um objeto simples na pgina 556 e Como
criar novos comandos a partir das etapas do histrico na pgina 173, para obter
mais detalhes. Porm, se o objetivo for mais avanado, para adicionar recursos ao
Dreamweaver preciso gravar extenses, nas linguagens JavaScript ou C. Para
obter mais informaes sobre DOM e API, consulte Como estender os recursos do
Dreamweaver.
Aps a criao de uma extenso do Dreamweaver, ela pode ser transformada em
pacote e distribuda no site de intercmbio da Macromedia, se voc quiser que
outros usurios do programa a utilizem. Para obter mais informaes, consulte o
site de intercmbio da Macromedia para o Dreamweaver. Para transformar uma
extenso em pacote, necessrio primeiramente efetuar o download do instalador
Package Manager naquele site, em seguida, instale o aplicativo com a opo de
programador.
Sobre o JavaScript
JavaScript uma linguagem de programao interpretada. Para saber mais sobre
JavaScript, leia um bom livro sobre o assunto, como JavaScript Bible de Danny
Goodman (IDG) ou JavaScript: The Definitive Guide, de David Flanagan
(OReilly). Para obter mais informaes sobre a extensibilidade do Dreamweaver
utilizando o JavaScript, consulte Como estender os recursos do Dreamweaver.
Nota: Apesar da semelhana entre os dois nomes, JavaScript no est relacionado de
modo algum a Java.

Como personalizar o Dreamweaver

575

Como editar os comandos do Dreamweaver

Todos os comandos nos menus do Dreamweaver, inclusive aqueles criados e salvos
utilizando o painel Histrico (consulte Como criar novos comandos a partir das
etapas do histrico na pgina 173), so implementados em JavaScript. O cdigo
JavaScript geralmente consiste, em sua maior parte, de chamadas de funes
fornecidas pela API de extensibilidade do Dreamweaver. Caso voc conhea o
JavaScript e compreenda a API de extensibilidade do Dreamweaver, poder editar
o JavaScript, a fim de alterar o funcionamento dos comandos do programa.
Nota: No tente alterar cdigos JavaScript, a menos que saiba exatamente o que est
fazendo. Mesmo nesse caso, faa uma cpia de segurana do arquivo que contm o
cdigo, antes de modific-lo.

Para renomear um comando, mova-o para um outro menu ou adicione a ele um

atalho de teclado. Consulte Sobre a personalizao dos menus do Dreamweaver
na pgina 557.

Como personalizar a interpretao dos tags

de outros fabricantes
A tecnologias de processamento de servidor, como ASP, ColdFusion, JSP e PHP
utilizam um cdigo especial diferente de HTML nos arquivos HTML; os
servidores criam e trabalham com o contedo HTML baseando-se nesse cdigo.
Ao encontrar os tags diferentes de HTML, o Dreamweaver os compara com as
informaes nos arquivos de tags de outros fabricantes, que definem como o
programa l e exibe os tags diferentes de HTML.
Por exemplo: os arquivos ASP contm alm do HTML comum cdigo ASP
para ser interpretado pelo servidor. O cdigo ASP parece um tag, porm
marcado com um par de delimitadores: esse cdigo inicia com <% e termina com
%>. A pasta Configuration/ThirdPartyTags do Dreamweaver contm um arquivo
chamado ASP.xml, que descreve o formato do cdigo ASP e define como o
Dreamweaver o exibir. Devido maneira como o cdigo ASP especificado no
arquivo ASP.xml, o Dreamweaver no tenta interpretar o que estiver entre os
delimitadores, em vez disso, o programa exibe apenas um cone indicando um
cdigo ASP, na visualizao do projeto da janela do documento.
Voc pode configurar os seus prprios tags e criar arquivos de banco de dados de
tags, que definem como o Dreamweaver os l e exibe. A criao dos arquivos de
banco de dados de tags so particularmente teis, quando for usado um sistema de
markup de servidor diferente de ASP, JSP, ColdFusion ou PHP; crie um novo
arquivo de banco de dados de tags para cada um desses sistemas de markup, a fim
de informar ao Dreamweaver como exibir os tags. No h um arquivo de banco de
dados de tags JSP separado; o cdigo JSP utiliza os mesmos delimitadores do ASP,
por isso o Dreamweaver utiliza o arquivo de banco de dados de tags do cdigo
ASP para o JSP.

576

Captulo 22

Nota: Esta seo explica como definir o modo de exibio de um tag personalizado no
Dreamweaver, mas no como editar o seu contedo ou propriedades. Para obter
informaes sobre a criao de um inspetor de propriedades para verificar e alterar as
propriedades de um tag personalizado, consulte Inspetores de propriedades, em Como
estender os recursos do Dreamweaver.

Cada arquivo de banco de dados de tags define o nome, tipo, modelo do

contedo, esquema de interpretao e cone para um ou mais tags personalizados.
Pode ser criado qualquer nmero de arquivos de banco de dados de tags, mas
todos devem residir na pasta Configuration/ThirdPartyTags, para que sejam lidos
e processados pelo Dreamweaver. Os arquivos de banco de dados de tags tm a
extenso .xml.
Sugesto: Se voc estiver trabalhando simultaneamente em diversos sites diferentes e
sem relao (por exemplo: como um programador independente), coloque todas as
especificaes de tags relativos a um determinado site em um nico arquivo. Em seguida,
basta incluir esse arquivo de banco de dados de tags nos cones personalizados e
inspetores de propriedades, que sero enviados para a equipe que far a manuteno do
site.

Uma especificao de tag definida com um tag XML denominado tagspec. Por
exemplo: o cdigo abaixo descreve a especificao para o tag happy:
<tagspec tag_name="happy" tag_type="nonempty" render_contents="false"
content_model="marker_model" icon="happy.gif" icon_width="18"
icon_height="18"></tagspec>

Dois tipos diferentes de tags podem ser especificados com o tagspec: tags em estilo
HTML normal e tags delimitadas por seqncias de caracteres. Os tags
delimitados por seqncias de caracteres iniciam com uma seqncia e terminam
com outra; eles so semelhantes a tags HTML vazios (por exemplo: img) pois no
envolvem o contedo e nem contm tags de finalizao. O tag happy, mostrado
acima, um tag em estilo HTML normal; ele inicia com um tag de abertura
<happy>, contm dados entre os tags de abertura e fechamento, e termina com um
tag </happy> de finalizao. Se o tag fosse delimitado por uma seqncia de
caracteres, sua especificao incluiria os atributos start_string e end_string. Um
tag ASP do tipo delimitado por uma seqncia de caracteres; ele inicia com a
seqncia <% e termina com a seqncia %>, e no contm um tag de finalizao.
As informaes abaixo descrevem os atributos e valores vlidos para o tag tagspec.
Os atributos marcados com um asterisco (*) so ignorados pelos tags delimitados
por uma seqncia de caracteres.
<tagspec>
Descrio

Contm informaes sobre um tag de outro fabricante.

Atributos

tag_name, tag_type, render_contents, content_model, start_string, end_string,

detect_in_attribute, parse_attributes, icon, icon_width, icon_height

Como personalizar o Dreamweaver

577

o nome do tag personalizado. (Nos tags delimitados por seqncias de

caracteres, tag_name utilizado apenas para determinar se um inspetor de
propriedades especfico pode ser utilizado para o tag. Se a primeira linha do
inspetor de propriedades contiver o nome do tag com um asterisco de cada lado, o
inspetor poder ser utilizado para esses tipos de tags. Por exemplo: o nome do tag
para o cdigo ASP ASP; os inspetores de propriedades que podem examinar o
cdigo ASP devem conter *ASP* na primeira linha. Para obter informaes sobre a
API de inspetor de propriedades, consulte Inspetores de propriedades em Como
estender os recursos do Dreamweaver).

tag_name

tag_type*

determina se o tag est vazio (como em img) ou se ele contm algo

entre os tags de abertura e fechamento (como em code). Esse atributo necessrio
para tags normais (no delimitados por seqncias de caracteres). Ele ignorado
nos tags delimitados por seqncias de caracteres, pois esto sempre vazios. Os
valores vlidos so "empty" e "nonempty".
render_contents*

determina se o contedo do tag deve aparecer na visualizao

do projeto da janela do documento, ou se um cone ser mostrado. Esse atributo
necessrio para os tags no-vazios (nonempty) e ignorado nos tags vazios (empty).
Os tags vazios no tm contedo. Esse atributo destina-se apenas aos tags que
aparecem fora de atributos; o contedo dos tags que esto dentro dos valores de
atributos de outros tags no so interpretados. Os valores vlidos so "true" ou
"false".
content_model*

descreve quais tipos de contedo o tag pode acomodar e onde o

tag pode aparecer em um arquivo HTML. Os valores vlidos so "block_model",
"head_model", "marker_model" e "script_model":

578

Captulo 22

block_model
como div e p,

head_model

marker_model
especifica que o tag pode conter qualquer cdigo HTML vlido
e aparecer em qualquer posio num arquivo HTML. No Dreamweaver, o
validador de HTML ignora os tags que so especificados como marker_model.
Contudo, o validador no ignora o contedo desse tag; por isso, embora o tag
possa aparecer em qualquer lugar, o contedo deste pode resultar em um
HTML invlido em alguns locais. Por exemplo: um texto simples no pode
aparecer (fora de um elemento head) na seo head de um documento, por isso,
no possvel colocar um tag marker_model que contenha texto simples na seo
head. Para colocar um tag personalizado contendo texto simples na seo head,
especifique o modelo de contedo do tag como head_model em vez de
marker_model. Utilize marker_model nos tags que precisam ser exibidos
linearmente (dentro de um elemento em nvel de bloco, como p ou div) por
exemplo: em um pargrafo). Se o tag deve ser exibido como um pargrafo
individual, com quebras de linhas antes e depois dele, no utilize esse modelo.

especifica que o tag pode conter elementos em nvel de bloco,

e que o tag pode aparecer apenas na seo body ou dentro de
outros tags de contedo de corpo do texto, como div, layer ou td.
especifica que o tag pode acomodar contedo de texto e aparecer
apenas na seo head.

script_model
permite que o tag seja colocado em qualquer posio entre os
tags HTML de abertura e fechamento de um documento. Quando o
Dreamweaver encontrar um tag com esse modelo, todo o contedo do tag ser
ignorado. Utilizado para markups de outros fabricantes (como determinados
tags ColdFusion), que o Dreamweaver no deve analisar.

especifica um delimitador que marca o incio de um tag delimitado

por seqncias de caracteres. Os tags delimitados por seqncias de caracteres
podem aparecer em qualquer posio no documento, onde pode haver um
comentrio. O Dreamweaver no analisa tags, nem decodifica entidades ou URLs
entre start_string e end_string. Esse atributo necessrio se for especificado
end_string.
start_string

especifica um delimitador que marca o final de um tag delimitado

por seqncias de caracteres. Esse atributo necessrio se for especificado
start_string.
end_string

detect_in_attribute indica se deve ser ignorado tudo que estiver entre

start_string e end_string (ou entre os tags de abertura e fechamento, se estas

seqncias no forem definidas), mesmo quando estas seqncias aparecerem

dentro de nomes ou valores de atributos. Geralmente, esse atributo deve ser
definido como "true", no caso de tags delimitados por seqncias de caracteres; o
padro "false". Por exemplo: os tags ASP aparecem s vezes dentro de valores de
atributos e podem conter aspas ("); como essa especificao de tag ASP define
detect_in_attribute="true", o Dreamweaver ignora esses tags, inclusive as aspas
internas, quando aparecerem dentro de valores de atributos.
parse_attributes* indica se os atributos do tag sero analisados. Se for 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: esse atributo deve ser definido como "false"
para um tag cfif (como em <cfif a is 1>, que o Dreamweaver no poderia
analisar como um conjunto de pares nome/valor de atributos).
icon especifica o caminho e o nome do arquivo do cone associado ao tag. Esse
atributo necessrio para os tags vazios e no-vazios, cujo contedo no seja
exibido na visualizao do projeto da janela do documento.
icon_width

especifica a largura do cone em pixels.

icon_height

especifica a altura do cone em pixels.

Contedo

Nenhum (tag vazio).

Continer

Nenhum
Exemplo

<tagspec tag_name="happy" tag_type="nonempty" render_contents="false"

content_model="marker_model" icon="happy.gif" icon_width="18"
icon_height="18"></tagspec>

Como personalizar o Dreamweaver

579

Como os tags personalizados aparecem na visualizao do

projeto
A aparncia dos tags, na visualizao do projeto da janela do documento, depende
dos valores dos atributos tag_type e render_contents do tag tagspec. Se o valor de
tag_type for "empty", o cone especificado no atributo icon aparecer. Se o valor de
tag_type for "nonempty", mas o valor de render_contents for "false", o cone
aparecer da mesma forma que em um tag vazio. Por exemplo: o tag happy,
definido acima, dever aparecer no HTML da seguinte maneira
<p>This is a paragraph that includes an instance of the <code>happy</code> tag
(<happy>Joe</happy>).</p>

O pargrafo deve aparecer na visualizao do projeto, como a seguir:

Observe que, quando render_contents definido como "false" na especificao do

tag, o contedo do tag happy (a palavra Joe) no ser interpretado; em vez disso, os
tags de abertura e fechamento, bem como seu contedo, sero exibidos como um
nico cone.
No caso dos tags no-vazios que tm um valor de render_contents definido como
"true", o cone no aparece na visualizao do projeto, em vez disso, ser mostrado
o contedo entre os tags de abertura e fechamento (por exemplo: o texto entre os
tags em <mytag>Este o contedo entre os tags de abertura e fechamento</
mytag>). Se a opo Exibir > Elementos invisveis estiver ativada, o contedo ser
realado utilizando a cor para os tags de outros fabricantes especificada nas
preferncias de realce. Observe que o realce se aplica apenas aos tags definidos nos
arquivos de banco de dados de tags.
Para alterar a cor de realce dos tags de outros fabricantes:

580

Captulo 22

Escolha Editar > Preferncias e, em seguida, selecione a categoria Realce.

Clique na caixa de cores Tags de outros fabricantes, para exibir o seletor de

cores.

Escolha uma cor e, em seguida clique em OK, para fechar a caixa de dilogo
Preferncias. Para obter mais informaes sobre a escolha de uma cor, consulte
Como trabalhar com as cores na pgina 91.

Sobre as ASP
As ASP (Active Server Pages) da Microsoft constituem uma maneira de combinar
HTML, scripts gravados em JavaScript ou VBScript, e controles ActiveX, a fim de
trabalhar dinamicamente com HTML. Quando um navegador solicita uma
pgina ASP ao Microsoft Web Server, o servidor interpreta o cdigo ASP e envia o
HTML resultante ao navegador. O navegador receber apenas o HTML, mas no
o cdigo ASP. Para obter mais informaes sobre as ASP, consulte as pginas de
viso geral das ASP da Microsoft, conforme a descrio em Recursos de
tecnologias da Web e HTML na pgina 25.
Um bloco de cdigo ASP inicia com <% e termina com %>. Se Exibir > Elementos
invisveis estiver selecionado, e Tags de markup do servidor for escolhido nas
preferncias de elementos invisveis, o Dreamweaver exibir um cone de ASP na
visualizao do projeto da janela do documento, para marcar o local do cdigo
ASP. Caso contrrio, o Dreamweaver no exibir nada para marcar a posio do
cdigo. Para obter mais informaes sobre os elementos invisveis, consulte Sobre
os elementos invisveis na pgina 164.
Sobre as JSP
As JSP (JavaServer Pages) da Sun fornecem um modo com base em Java para
trabalhar dinamicamente com um contedo HTML ou um outro da Web.
Quando um navegador solicita uma pgina JSP de um servidor habilitado para
JSP, este interpreta o cdigo JSP e envia o HTML resultante para o navegador. O
navegador receber apenas o HTML, mas no o cdigo JSP. Para obter mais
informaes sobre JSP, consulte a Pgina JSP da Sun, conforme a descrio em
Recursos de tecnologias da Web e HTML na pgina 25.
Um bloco de cdigo JSP inicia com <% e termina com %>. Como o JSP utiliza os
mesmos delimitadores que o ASP, o Dreamweaver exibe um cone de ASP para o
cdigo JSP.
Sobre o PHP
PHP (que significa Hypertext Preprocessor) uma linguagem de criao de scripts
de servidor. Quando um navegador solicita uma pgina PHP de um servidor
habilitado para PHP, este interpreta o cdigo PHP e envia o HTML resultante
para o navegador. O navegador receber apenas o HTML, mas no o cdigo PHP.
Para obter mais informaes sobre PHP, consulte as Pginas PHP, conforme a
descrio em Recursos de tecnologias da Web e HTML na pgina 25.
Um bloco de cdigo PHP inicia com <? e termina com ?>. Se a opo Exibir >
Elementos invisveis estiver selecionada, e a opo Tags de markup do servidor for
escolhida nas preferncias de elementos invisveis, o Dreamweaver exibir um
cone de PHP na visualizao do projeto da janela do documento, para marcar o
local do cdigo PHP. Caso contrrio, o cdigo no aparecer na visualizao do
projeto. Para obter mais informaes sobre os elementos invisveis, consulte
Sobre os elementos invisveis na pgina 164.

Como personalizar o Dreamweaver

581

Sobre a ColdFusion
A ColdFusion da Allaire uma outra maneira de tratar as pginas dinamicamente.
Quando um navegador solicita uma pgina ColdFusion de um servidor, este
passa-a ao software ColdFusion Server, que interpreta os scripts na pgina e envia
o HTML resultante para o navegador. O navegador receber apenas o HTML,
mas no o cdigo ColdFusion. Para obter mais informaes sobre a ColdFusion,
consulte a Pgina do produto ColdFusion, conforme a descrio em Recursos de
tecnologias da Web e HTML na pgina 25.
O Dreamweaver reconhece aproximadamente 50 tags ColdFusion; consulte o
arquivo ColdFusion.xml, na pasta Configuration/ThirdPartyTags, para obter mais
detalhes. Se a opo Exibir > Elementos invisveis estiver selecionada, e a opo
Tags de markup do servidor for escolhida nas preferncias de elementos invisveis,
o Dreamweaver exibir um cone de ColdFusion na visualizao do projeto da
janela do documento, para marcar o local dos tags ColdFusion para os quais
render_contents foi definido como "false" (no ColdFusion.xml). Caso contrrio,
o Dreamweaver no exibir nada para marcar a posio do cdigo. Para obter mais
informaes sobre os elementos invisveis, consulte Sobre os elementos invisveis
na pgina 164.
Como impedir a regravao de tags de outros fabricantes
O Dreamweaver corrige determinados tipos de erros em HTML (para obter mais
detalhes, consulte Preferncias de regravao de cdigo na pgina 377). Como
padro, o Dreamweaver no altera o HTML nos arquivos com determinadas
extenses de nome de arquivo, inclusive .asp (ASP), .cfm (ColdFusion), jsp (JSP)
e .php (PHP). Esse padro definido para que o Dreamweaver no modifique
acidentalmente o cdigo contido nos tags de outros fabricantes. O
comportamento de regravao padro do Dreamweaver pode ser alterado, para
que o programa regrave o HTML quando esses arquivos forem abertos; podem ser
adicionados outros tipos de arquivos lista daqueles que o Dreamweaver no
regravar.
Observe tambm que o Dreamweaver codifica determinados caracteres especiais
(substituindo-os por valores numricos) quando estes so digitados no inspetor de
propriedades. Normalmente, melhor deixar que o Dreamweaver execute essa
codificao, porque assim mais provvel que os que os caracteres especiais sejam
exibidos de modo correto em todas as plataformas e navegadores. Contudo,
devido possibilidade de interferncia dessa codificao em tags de outros
fabricantes, talvez seja conveniente alterar o comportamento de codificao do
Dreamweaver, quando voc estiver trabalhando com arquivos que contm tags de
terceiros.

582

Captulo 22

Para permitir que o Dreamweaver regrave o HTML em mais tipos de arquivos:

Escolha Editar > Preferncias, e selecione Regravao de cdigo.

Siga um dos procedimentos abaixo:

Exclua uma ou mais extenses da lista de extenses.

Cancele a seleo da opo Nunca regravar o cdigo: Em arquivos com as
extenses. O cancelamento da seleo dessa opo permite que o Dreamweaver
regrave o HTML em todos os tipos de arquivos.
Para adicionar tipos de arquivos que o Dreamweaver no deve regravar:

Escolha Editar > Preferncias, e selecione Regravao de cdigo.

Certifique-se de que a opo Nunca regravar o HTML: Em arquivos com as

extenses esteja selecionada e adicione as novas extenses de arquivos lista no
campo de texto.
Se o novo tipo de arquivo no aparecer no menu pop-up de tipos de arquivos,
na caixa de dilogo Arquivo > Abrir, talvez seja conveniente adicion-lo ao
arquivo Configuration/Extensions.txt. Para obter mais detalhes, consulte
Como alterar o tipo de arquivo padro na pgina 554.

Para desativar as opes de codificao do Dreamweaver:

Escolha Editar > Preferncias, e selecione Regravao de cdigo.

Cancele uma ou ambas as opes de Caracteres especiais.

Para obter informaes sobre as outras preferncias de regravao de cdigo,

consulte Preferncias de regravao de cdigo na pgina 377.

Como personalizar o Dreamweaver

583

584

Captulo 22

APNDICE A

Atalhos de teclado

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

possvel obter uma lista imprimvel com os atalhos de teclado, no Centro de

suporte do Dreamweaver en (www.macromedia.com/support/dreamweaver/
documentation.html).

Menu Arquivo
Ao

No Windows

No Macintosh

Novo documento

Control+N

Command+N

Abrir um arquivo HTML

Control+O, ou arraste o
arquivo da janela do Explorer
ou do site para a janela do
documento

Command+O

Abrir na moldura

Control+Shift+O

Command+Shift+O

Fechar

Control+W

Command+W

Salvar

Control+S

Command+S

Salvar como

Control+Shift+S

Command+Shift+S

Marcar os links

Shift + F8

Command+F8

Sair

Control+Q

Command+Q

585

Menu Editar
Ao

No Windows

No Macintosh

Desfazer

Control+Z

Command+Z

Refazer

Control+Y ou Control+Shift+Z

Command+Y ou
Command+Shift+Z

Recortar

Control+X ou
Shift+Del

Command+X ou
Shift+Del

Copiar

Control+C ou
Control+Ins

Command+C ou
Command+Ins

Colar

Control+V ou
Shift+Ins

Command+V ou
Shift+Ins

Limpar

Delete

Delete

Selecionar tudo

Control+A

Command+A

Selecionar o tag-pai

Control+Shift+<

Command+Shift+<

Selecionar o filho

Control+Shift+>

Command+Shift+>

Localizar e substituir

Control+F

Command+F

Localizar o prximo

F3

Command+G

Recuar o cdigo

Control+Shift+8

Command+Shift+8

Remover o recuo do cdigo

Control+Shift+9

Control+Shift+9

Ajustar as chaves

Control+

Command+

Iniciar o editor externo

Control+E

Command+E

Preferncias

Control+U

Command+U

Visualizaes de pgina

586

Apndice A

Para alternar a exibio de

No Windows

No Macintosh

Visualizao padro

Control+Shift+F6

Command+Shift+F6

Visualizao de layout

Control+F6

Command+F6

Barra de ferramentas

Control+Shift+T

Command+Shift+T

Como visualizar os elementos da pgina

Para alternar a exibio de

No Windows

No Macintosh

Auxlios visuais

Control+Shift+I

Command+Shift+I

Rguas

Control+Alt+R

Command+Option+R

Mostrar a grade

Control+Alt+G

Command+Option+G

Encaixar na grade

Control+Alt+Shift+G

Command+Option+Shift+G

Contedo do cabealho

Control+Shift+W

Command+Shift+W

Propriedades da pgina

Control+Shift+J

Command+Shift+J

Ao

No Windows

No Macintosh

Alternar para a visualizao do projeto

Control+tecla de tabulao

Option+tecla de tabulao

Abrir o Quick Tag Editor

Control+T

Command+T

Selecionar o tag-pai

Control+Shift+<

Command+Shift+<

Ajustar as chaves

Control+

Command+

Selecionar tudo

Control+A

Command+A

Copiar

Control+C

Command+C

Localizar e substituir

Control+F

Command+F

Localizar o prximo

F3

Command+G

Substituir

Control+H

Command+H

Colar

Control+V

Command+V

Recortar

Control+X

Command+X

Refazer

Control+Y

Command+Y

Desfazer

Control+Z

Command+Z

Alternar o ponto de interrupo

Control+Alt+B

Command+Option+B

Selecionar a linha acima

Shift+seta acima

Shift+seta acima

Selecionar a linha abaixo

Shift+seta abaixo

Shift+seta abaixo

Selecionar o caractere da esquerda

Shift+seta esquerda

Shift+seta esquerda

Edio do cdigo

Atalhos de teclado

587

Ao

No Windows

No Macintosh

Selecionar o caractere da direita

Shift+seta direita

Shift+seta direita

Ir para a pgina acima

Page Up

Page Up

Ir para a pgina abaixo

Page Down

Page Down

Selecionar a pgina acima

Shift+Page Up

Shift+Page Up

Selecionar a pgina abaixo

Shift+Page Down

Shift+Page Down

Selecionar a palavra esquerda

Control+Shift+seta esquerda Command+Shift+seta

esquerda

Selecionar a palavra direita

Control+Shift+seta direita

Command+Shift+seta direita

Ir para o incio da linha

Home

Home

Ir para o fim da linha

End

End

Ir para o incio do cdigo

Control+Home

Command+Home

Ir para o fim do cdigo

Control+End

Command+End

Selecionar at o incio do cdigo

Control+Shift+Home

Command+Shift+Home

Selecionar at o fim do cdigo

Control+Shift+End

Command+Shift+End

Como editar o texto

Ao

No Windows

No Macintosh

Criar um novo pargrafo

Enter

Return

Inserir uma quebra de linha <BR>

Shift+Enter

Shift+Return

Inserir um espao no-separvel

Control+Shift+barra de
espao

Option+barra de espao

Mover o texto ou objeto para um outro

local na pgina

Arraste o item selecionado

para o novo local

Arraste o item selecionado

para o novo local

Copiar o texto ou objeto para um outro

local na pgina

Enquanto mantm a tecla

Control pressionada, arraste o
item selecionado at o novo
local

Enquanto mantm a tecla

Option pressionada, arraste o
item selecionado at o novo
local

Selecionar uma palavra

Clique duas vezes

Clique duas vezes

Adicionar os itens selecionados

biblioteca

Control+Shift+B

Command+Shift+B

Alternar entre a visualizao do projeto e Control+tecla de tabulao

os editores de cdigo

588

Apndice A

Option+tecla de tabulao

Ao

No Windows

No Macintosh

Abrir e fechar o inspetor de propriedades Control+Shift+J

Command+Shift+J

Verificar a ortografia

Shift+F7

Shift+F7

Como formatar o texto

Ao

No Windows

No Macintosh

Recuo

Control+9

Command+9

Remover o recuo

Control+8

Command+8

Formato > Nenhum

Control+0 (zero)

Command+0 (zero)

Formato do pargrafo

Control+Shift+P

Command+Shift+P

Aplicar os cabealhos 1 a 6 a um
pargrafo

Control+1 a 6

Command+1 a 6

Alinhamento > esquerda

Control+Shift+Alt+L

Command+Shift+Option+L

Alinhamento > No centro

Control+Shift+Alt+C

Command+Shift+Option+C

Alinhamento > direita

Control+Shift+Alt+R

Command+Shift+Option+R

Tornar negrito o texto selecionado

Control+B

Command+B

Tornar itlico o texto selecionado

Control+I

Command+I

Editar a folha de estilos

Control+Shift+E

Command+Shift+E

Nota: Alguns atalhos de formatao de texto no provocam qualquer efeito durante o

trabalho nos editores de cdigo.

Atalhos de teclado

589

Como localizar e substituir o texto

Ao

No Windows

No Macintosh

Localizar

Control+F

Command+F

Localizar o prximo/Localizar
novamente

F3

Command+G

Substituir

Control+H

Command+H

Como trabalhar com tabelas

Ao

No Windows

No Macintosh

Selecione a tabela (com o cursor dentro Control+A

da mesma)

Command+A

Mover at a prxima clula

Tecla de tabulao

Tecla de tabulao

Mover at a clula anterior

Shift+tecla de tabulao

Shift+tecla de tabulao

Inserir uma linha (antes da linha atual)

Control+M

Command+M

Adicionar uma linha ao final da tabela

Tecla de tabulao na ltima

clula

Tecla de tabulao na ltima

clula

Excluir a linha atual

Control+Shift+M

Command+Shift+M

Inserir uma coluna

Control+Shift+A

Command+Shift+A

Excluir uma coluna

Control+Shift+ - (hfen)

Command+Shift+ - (hfen)

Mesclar as clulas selecionadas da

tabela

Control+Alt+M

Command+Option+M

Dividir as clulas da tabela

Control+Alt+S

Command+Option+S

Atualizar o layout da tabela (forar um

redesenho, se estiver no modo edio
mais rpida de tabelas)

Control+barra de espao

Command+barra de espao

Nota: Alguns atalhos de tabelas no funcionam na visualizao de layout.

590

Apndice A

Como trabalhar com as molduras

Ao

No Windows

No Macintosh

Selecionar uma moldura

Enquanto mantm a tecla Alt

pressionada, clique na
moldura

Clique na moldura mantendo

pressionadas a teclas Shift
e Option

Selecionar a prxima moldura ou

conjunto de molduras

Alt+Seta direita

Command+Seta direita

Selecionar a moldura ou conjunto de

molduras anterior

Alt+Seta esquerda

Command+Seta esquerda

Selecionar o conjunto-pai de molduras

Alt+Seta acima

Command+Seta acima

Selecionar a primeira moldura-filha ou

conjunto-filho de molduras

Alt+Seta abaixo

Command+Seta abaixo

Adicionar uma nova moldura ao conjunto Enquanto mantm a tecla Alt

de molduras
pressionada, arraste a borda
da moldura

Enquanto mantm a tecla

Option pressionada, arraste a
borda da moldura

Adicionar uma nova moldura ao conjunto Enquanto mantm as teclas

de molduras utilizando o mtodo de
Alt e Control pressionadas,
empurramento
arraste a borda da moldura

Enquanto mantm as teclas

Command e Option
pressionadas, arraste a borda
da moldura

Atalhos de teclado

591

Como trabalhar com as camadas

Ao

No Windows

No Macintosh

Selecionar uma camada

Control+Shift-clique

Command+Shift-clique

Selecionar e mover uma camada

Shift+Control-arraste

Command+Shift-arraste

Adicionar ou remover a camada

da seleo

Enquanto mantm a tecla

Shift pressionada, clique na
camada

Enquanto mantm a tecla

Shift pressionada, clique na
camada

Mover a camada selecionada um

determinado nmero de pixels

Teclas de seta

Teclas de seta

Mover a camada selecionada um

incremento de encaixe

Shift+teclas de seta

Shift+teclas de seta

Redimensionar a camada selecionada

um determinado nmero de pixels

Control+teclas de seta

Option+teclas de seta

Redimensionar a camada selecionada

um incremento de encaixe

Control+Shift+teclas de seta

Option+Shift+teclas de seta

Alinhar as camadas selecionadas

parte inferior/superior/esquerda/direita
da ltima camada selecionada

Control+seta acima/abaixo/
esquerda/ direita

Command+seta acima/
abaixo/ esquerda/ direita

Tornar igual a largura

das camadas selecionadas

Control+Shift+9

Command+Shift+9

Tornar igual a altura

das camadas selecionadas

Control+Shift+8

Command+Shift+8

Alternar a preferncia de aninhamento

ao criar uma camada

Control-arraste

Command-arraste

Alternar a exibio da grade

Control+Shift+Alt+G

Command+Shift+
Option+G

Encaixar na grade

Control+Alt+G

Command+Option+G

Como trabalhar com as linhas de tempo

592

Apndice A

Ao

No Windows

No Macintosh

Adicionar objeto linha de tempo

Control+Alt+Shift+T

Command+Option+
Shift+T

Adicionar um quadro primrio

Shift+F9

Shift+F9

Remover um quadro primrio

Delete

Delete

Como trabalhar com as imagens

Ao

No Windows

No Macintosh

Alterar o atributo de origem da imagem

Clique duas vezes na imagem Clique duas vezes na imagem

Editar a imagem em um editor externo

Controlclique duas vezes na

imagem

Mantenha a tecla Command

pressionada enquanto clica
duas vezes na imagem

Como gerenciar os hyperlinks

Ao

No Windows

No Macintosh

Criar hyperlink (selecionar o texto)

Control+L

Command+L

Remover o hyperlink

Control+Shift+L

Command+Shift+L

Arrastar e soltar para criar um hyperlink a Selecione o texto, imagem ou

partir de um documento
objeto e, em seguida,
mantendo a tecla Shift
pressionada, arraste a seleo
at um arquivo na janela do
site

Selecione o texto, imagem ou

objeto e, em seguida,
mantendo a tecla Shift
pressionada, arraste a seleo
at um arquivo na janela do
site

Arrastar e soltar para criar um hyperlink

utilizando o inspetor de propriedades

Selecione o texto, imagem ou

objeto e, em seguida, arraste o
cone do indicador de arquivos
do inspetor de propriedades
at um arquivo na janela do
site.

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.

Abrir o documento contendo o link

no Dreamweaver

Clique duas vezes no link

enquanto mantm
pressionada a tecla Control

Command
clique duas vezes no link

Verificar os links selecionados

Shift+F8

Shift+F8

Verificar os links no site inteiro

Control+F8

Command+F8

Atalhos de teclado

593

Como designar e visualizar nos

navegadores
Ao

No Windows

No Macintosh

Visualizar no navegador primrio

F12

F12

Visualizar no navegador secundrio

Control+F12

Command+F12

Como depurar nos navegadores

Ao

No Windows

No Macintosh

Depurar no navegador primrio

Alt+F12

Option+F12

Depurar no navegador secundrio

Control+Alt+F12

Command+Option+F12

Gerenciamento de sites e FTPs

594

Apndice A

Ao

No Windows

No Macintosh

Criar um novo arquivo

Control+Shift+N

Command+Shift+N

Criar uma nova pasta

Control+Shift+Alt+N

Command+Shift+
Option+N

Abrir a seleo

Control+Shift+Alt+O

Command+Shift+
Option+O

Obter os arquivos ou pastas

selecionadas do site remoto de FTP

Control+Shift+D ou arraste os
arquivos do painel Remoto
para o painel Local, na janela
do site

Command+Shift+D ou arraste
os arquivos do painel Remoto
para o painel Local, na janela
do site

Colocar os arquivos ou pastas

selecionadas no site remoto de FTP

Control+Shift+U ou arraste os
arquivos do painel Local para
o painel Remoto, na janela do
site

Command+Shift+U ou arraste
os arquivos do painel Local
para o painel Remoto, na
janela do site

Retirar

Control+Shift+Alt+D

Command+Shift+
Option+D

Devolver

Control+Shift+Alt+U

Command+Shift+
Option+U

Visualizar o mapa do site

Control+F5

Command+F5

Atualizar o site remoto

Alt+F5

Option+F5

Mapa do site
Ao

No Windows

No Macintosh

Visualizar os arquivos do site

F5

F5

Atualizar o painel Local

Shift+F5

Shift+F5

Tornar raiz

Control+Shift+R

Command+Shift+R

Vincular a um arquivo existente

Control+Shift+K

Command+Shift+K

Alterar o link

Control+L

Command+L

Remover o link

Delete

Delete

Mostrar/ocultar o link

Control+Shift+Y

Command+Shift+Y

Mostrar os ttulos das pginas

Control+Shift+T

Command+Shift+T

Renomear o arquivo

F2

no disponvel

Aumentar o zoom do mapa do site

Control++ (sinal de adio)

Command++ (sinal de adio)

Reduzir o zoom do mapa do site

Control+ - (hfen)

Command+ - (hfen)

Como executar os plug-ins

Ao

No Windows

No Macintosh

Executar o plug-in

Control+Alt+P

Command+Option+P

Parar o plug-in

Control+Alt+X

Command+Option+X

Executar todos os plug-ins

Control+Shift+Alt+P

Command+Shift+
Option+P

Parar todos os plug-ins

Control+Shift+Alt+X

Command+Shift+
Option+X

Como trabalhar com os modelos

Ao

No Windows

No Macintosh

Criar uma nova regio editvel

Control+Alt+V

Command+Option+V

Atalhos de teclado

595

Como inserir objetos

Para inserir

No Windows

No Macintosh

Qualquer objeto (imagem, filme

Shockwave e assim por diante)

Arraste o arquivo da janela do Arraste o arquivo do

Explorer ou do site para a
Localizador ou da janela do
janela do documento.
site para a janela do
documento

Imagem

Control+Alt+I

Command+Option+I

Tabela

Control+Alt+T

Command+Option+T

Filme Flash

Control+Alt+F

Command+Option+F

Filme Shockwave Director

Control+Alt+D

Command+Option+D

ncora com nome

Control+Alt+A

Command+Option+A

Ao

No Windows

No Macintosh

Abrir a paleta de histrico

F9

F9

Iniciar/parar o comando de gravao

Control+Shift+X

Command+Shift+X

Executar o comando gravado

Control+P

Command+P

Painel Histrico

596

Apndice A

Como abrir e fechar os painis

Para alternar a exibio de

No Windows

No Macintosh

Objetos

Control+F2

Command+F2

Propriedades

Control+F3

Command+F3

Arquivos do site

F5

F5

Mapa do site

Control+F5

Command+F5

Propriedades

F11

F11

Estilos CSS

Shift+F11

Shift+F11

Estilos HTML

Control+F11

Command+F11

Comportamentos

Shift+F3

Shift+F3

Histrico

Shift+F10

Shift+F10

Linhas de tempo

Shift+F9

Shift+F9

Inspetor de cdigo

F10

F10

Molduras

Shift+F2

Shift+F2

Camadas

F2

F2

Referncia

Control+Shift+F1

Command+Shift+F1

Mostrar/ocultar os painis flutuantes

F4

F4

Minimizar todas as janelas

Shift+F4

Restaurar todas as janelas

Alt+Shift+F4

Ao

No Windows

No Macintosh

Tpicos da Ajuda de Como utilizar o

Dreamweaver

F1

F1

Referncia

Shift+F1

Shift+F1

Centro de suporte do Dreamweaver

Control+F1

Command+F1

Como obter ajuda

Atalhos de teclado

597

Matriz de atalhos de teclado

Nota: Um asterisco (*) indica uma combinao de teclas no utilizada. O texto em itlico
indica comandos ao nvel do sistema.
Caractere do
teclado

Control (no
Windows) ou
Command (no
Macintosh)

Control+Shift (no
Windows) ou
Command+Shift (no
Macintosh)

Control+Alt
(no Windows) ou
Command+
Option (no
Macintosh)

Control+Shift+Alt (no
Windows) ou
Command+
Shift+Option (no
Macintosh)

Selecionar
tudo, Selecionar a

Inserir coluna na
tabela

Inserir ncora com

nome

tabela

598

Negrito (alternar)

Adicionar biblioteca *

Copiar

Justificar no centro

Duplicar

Obter os arquivos ou
pastas selecionados

Inserir filme Shockwave Retirar os arquivos ou

Director
pastas selecionadas

Iniciar o editor
externo

Editar a folha de
estilos

Localizar

Inserir filme Flash

Localizar novamente *
(apenas no
Macintosh)

Mostrar/ocultar as
grades

Encaixar na grade
(alternar)

Substituir

Itlico (alternar)

Mostrar invisveis
(alternar)

Inserir a imagem

Propriedades da
pgina

Inspetor de
propriedades
(alternar)

Criar link

Remover o link

Justificar esquerda

Inserir linha na tabela Excluir a linha da

tabela

Mesclar as clulas
selecionadas da tabela

Nova janela (no Nova pgina (apenas *

Windows)
no Windows)
Nova pgina (no
Macintosh)

Nova pasta do site

Abrir

Abrir o arquivo
selecionado do site

Executar o comando Formato do pargrafo Executar o plug-in

gravado

Executar todos os plugins

Sair

Apndice A

Abrir na moldura

Caractere do
teclado

Control (no
Windows) ou
Command (no
Macintosh)

Control+Shift (no
Windows) ou
Command+Shift (no
Macintosh)

Control+Alt
(no Windows) ou
Command+
Option (no
Macintosh)

Control+Shift+Alt (no
Windows) ou
Command+
Shift+Option (no
Macintosh)

Tornar raiz

Mostrar/ocultar as
rguas

Justificar direita

Salvar

Salvar tudo

Dividir a clula da tabela *

Quick Tag Editor

Mostrar os ttulos das Inserir tabela

pginas no mapa do
site

Adicionar objeto linha

de tempo

Preferncias

Colocar os arquivos
ou pastas
selecionadas

Devolver os arquivos ou
pastas selecionadas

Colar

Criar uma nova regio

editvel

Fechar

Exibir o contedo do
cabealho

Recortar

Iniciar o comando de
gravao

Parar o plug-in

Parar todos os plug-ins

Refazer

Mostrar/ocultar o link

Desfazer

Refazer

0 (zero)

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

Atalhos de teclado

599

Caractere do
teclado

Control (no
Windows) ou
Command (no
Macintosh)

Control+Shift (no
Windows) ou
Command+Shift (no
Macintosh)

Control+Alt
(no Windows) ou
Command+
Option (no
Macintosh)

Control+Shift+Alt (no
Windows) ou
Command+
Shift+Option (no
Macintosh)

- (sinal de
subtrao) e
_ (sublinhado)

Reduzir o zoom do
mapa do site

Excluir a coluna da
tabela

=e+

Ajustar janela

Aumentar o zoom do
mapa do site

[e{

Remover o recuo
(Mover para trs)

Tornar as larguras das *

camadas iguais
(Camadas)

]e}

Recuo (Avanar)

Tornar as alturas das

camadas iguais
(Camadas)

>

Selecionar o tag-filho *

<

Selecionar o tag-pai

?e/

;e:

e~

\e|

Inserir um espao
no-separvel (no
Windows)
(Option+
barra de espao no
Macintosh)

Barra de espao Atualizar o layout da

tabela

600

Apndice A

Tecla de
funo

Nenhum
modificador

F1

Shift

Alt (no
Windows) ou
Option (no
Macintosh)

Control (no
Windows) ou
Command (no
Macintosh)

Control+
Shift (no
Windows) ou
Command +
Shift (no
Macintosh)

Control+
Alt
(no Windows)
ou
Command+
Option (no
Macintosh)

Control+
Shift+Alt (no
Windows) ou
Command+
Shift+
Option (no
Macintosh)

Ajuda de Como Referncia

utilizar o
Dreamweaver

Centro de
suporte do
Dreamweaver

Painel
Referncia

F2

Camadas

Molduras

Painel Objeto

F3

Localizar
novamente
(apenas no
Windows)

Painel
*
Comportament
os

Inspetor de
propriedades

F4

Ocultar/
mostrar os
painis
flutuantes

Minimizar
Fechar as
todas as
janelas
janelas (apenas
no Windows)

Fechar a janela
(apenas no
Macintosh)

F5

Arquivos do
site

Atualizar o
painel Local

Atualizar o
Mapa do site
painel Remoto

F6

Alternar para a Alternar para a *

Visualizao de visualizao
layout
padro

F7

Verificar a
ortografia

F8

Verificar os
links selecionados

Verificar os links *
No site inteiro

F9

Linha de
tempo e
Adicionar
quadro
primrio

F10

Inspetor de
cdigo

Painel
Histrico

F11

Propriedades

Estilos CSS

Estilos HTML

F12

Visualizar no
navegador
primrio

Depurar no
navegador
primrio

Visualizar no
navegador
secundrio

Depurar no
navegador
secundrio

Atalhos de teclado

601

602

Apndice A

NDICE REMISSIVO

A
ao Abrir a janela do navegador 492
ao Alterar a propriedade 481
ao Arrastar a camada 486
ao Chamar o JavaScript 480
ao Controlar o Shockwave ou Flash 485
ao Definir a imagem da barra de navegao 496
ao Definir a mensagem de status 499
ao Definir o texto da camada 498
ao Definir o texto da moldura 497
ao Definir o texto do campo de texto 500
ao Executar a linha de tempo 505
ao Executar o som 494
ao Ir do menu de salto 491
ao Ir para a URL 490
ao Ir para o quadro da linha de tempo 504
ao Mensagem pop-up 494
ao Menu de salto 491
ao Mostrar/ocultar as camadas 501
ao Parar a linha de tempo 505
ao Permutar a imagem 503
ao Pr-carregar as imagens 495
ao Restaurar a imagem permutada 504
ao Validar o formulrio 506
ao Verificar o navegador 482
ao Verificar o plug-in 483
aes 469
como alterar em comportamentos 476
como controlar as linhas de tempo 468
como criar 477
como escolher no painel Comportamentos 473
compatibilidade com os navegadores 478
definidas 469
includas com o Dreamweaver 478, 478507
Consulte tambm aes individuais pelo nome
Active Server Pages (ASP) 581
como editar 383
sobre 581
adicionar
links 242

Ajuda 14
atalhos 597
Centro de suporte do Dreamweaver 16
Grupo de discusso do Dreamweaver 16
lbuns de fotografias na Web, criar 322
alinhamento direita (inspetor de propriedades da
imagem) 294
alinhamento esquerda (inspetor de propriedades da
imagem) 294
alinhamento Alto do texto (inspetor de propriedades da
imagem) 294
alinhamento da linha de base (inspetor de propriedades
da imagem) 294
alinhamento Embaixo (inspetor de propriedades da
imagem) 294
alinhamento No alto (inspetor de propriedades da
imagem) 294
alinhamento No meio (inspetor de propriedades da
imagem) 294
alinhamento No meio absoluto (inspetor de
propriedades da imagem) 294
alinhamento O mais abaixo (inspetor de propriedades
da imagem) 294
alinhamento padro do navegador (inspetor de
propriedades da imagem) 294
alongamento automtico (visualizao de layout) 189
amostras, cor 91
ncoras com nome
como criar 394
ncoras, com nome 394
animao
editar animaes do Fireworks 320
animaes
ao longo de um caminho complexo 462
como aplicar a objetos 466
como copiar e colar 465
como criar 461
como melhorar 467
linhas de tempo 458
viso geral 19

603

aplicativos, outros, como utilizar com o Dreamweaver

94
rea de trabalho 74
arquivo de registro de correes de HTML 380
arquivo menus.xml
sintaxe 562
arquivo SourceFormat.txt 374
arquivos
como colocar 152
como efetuar o download 151
como efetuar o upload 152
como exibir na janela do site 121
como gerenciar 114
como obter do site remoto 151
como procurar 280
como sincronizar os sites local e remoto 154
como transferir com FTP 132
texto 158
tipos, padro 554
arquivos de correio eletrnico 158
arquivos de texto
como abrir 158
arquivos dependentes
como colocar 153
como mostrar e ocultar 128
como obter 152
arquivos do Microsoft Excel, como importar 198
arquivos HTML
como importar 159
arquivos ocultos, como mostrar e ocultar 128
arquivos rfos 546
(ASP)
tags, como personalizar anlise e aparncia 576
ASP. Consulte Active Server Pages
atalhos de teclado 585, 585600
como editar 95
como editar, no arquivo menus.xml 561
atalhos, teclado. Consulte atalhos de teclado
atributo class 272
atributo usemap 296
atributos
buscas 282
em perfis de navegadores 571
Consulte tambm tags
udio. Consulte som

604

ndice remissivo

B
barra de ferramentas
ttulos dos documentos, como alterar 160
barra de navegao
como adicionar imagens 405
como criar 404
como exibir horizontalmente na pgina 406
como exibir verticalmente na pgina 406
como inserir em uma tabela 406
como modificar os elementos 407
estados da imagem 404
barra de status
como definir o texto (comportamento) 499
menu pop-up Tamanho da janela 76
preferncias 79
viso geral 77
bibliotecas do Dreamweaver, exportar do Fireworks
311
borda da tabela
cores 204
largura 204
bordas
como adicionar a uma tabela 203
em uma moldura 232
tabelas, como remover 197
boto Carregar a consulta 285
boto Cor padro 91
boto Cores do sistema 91
boto Editar (inspetor de propriedades da imagem) 293
boto Executar novamente 170
boto Ir, como associar a um menu de salto 491
boto Riscado (cor padro) 91
boto Roda de cores (cor do sistema) 91
boto Salvar a consulta 285
botes
botes Enviar, grficos 536
botes Ir 491
como criar botes de formulrio 534
botes de opo 529
botes Enviar 536
C
cabeote de execuo 459
caixa de dilogo Boto Flash 329
caixa de dilogo Definir o estilo HTML 264
caixa de dilogo Inserir a barra de navegao 405
caixa de dilogo Inserir ncora com nome 394

caixa de dilogo Inserir link de correio eletrnico 396

caixa de dilogo Inserir o menu de salto 402
caixa de dilogo Parmetros 348
caixa de dilogo Texto Flash 332
caixa de dilogo Verificador de links 547
caixa de dilogo Vincular a folha de estilos externa 270
caixas de dilogo, como personalizar 568
caixas de seleo 529
camadas 439, 439468
arrastveis 488
atalhos 592
como alinhar 447
como alterar a ordem de empilhamento 453
como alterar a visibilidade com o painel Camadas
454
como alterar a visibilidade com os
comportamentos 501
como aninhar 443
como ativar 449
como converter em tabelas 455
como converter para navegadores 3.0 457
como criar 441
como desenhar diversas 441
como encaixar na grade 448
como evitar sobreposies 456
como inserir 441
como manipular 445
como mover 447
como posicionar 449
como redimensionar 446
como selecionar 445
como selecionar mltiplas 452
marcadores, como exibir 441
na criao de tabelas 455
pontos de ancoragem 164
preferncias 444
propriedades 449
propriedades de mltiplas 452
viso geral 439
visibilidade 454
camadas CSS
exportar do Fireworks 310
caminhos
absolutos 386
relativos a documento 387
relativos raiz 388

Caminhos absolutos 386

caminhos relativos a documento
como definir 391
sobre 387
caminhos relativos raiz
como definir 391
preferncia Visualizar utilizando o servidor local
389
sobre 388
caminhos relativos raiz do site Consulte caminhos
relativos raiz
campo de texto Imagem cambivel 300
campo Diretrio do host 134
campo Endereo HTTP 109, 110
campo Host do FTP 133
campo Nome do site 109, 110
campo Pasta raiz local 109, 110
campos
campos de arquivos 528
como criar campos de texto 524
como criar campos ocultos 528
como efetuar o upload de arquivos para um
servidor 528
sobre campos de formulrio 524
campos de texto, como definir o texto com
comportamentos 500
canal de comportamentos
nas linhas de tempo 459
caracteres especiais
como inserir 254
viso geral 254
caracteres, especiais 254
categorias
preferncias 92
propriedades 238
clula do cabealho, como formatar 205
clulas Consulte clulas de layout, clulas da tabela
clulas da tabela
clulas do cabealho, como designar 205
como copiar e colar 212
como dividir 210
como formatar 204
como mesclar 210
cor de fundo, como adicionar 205
imagem de fundo, como adicionar 205
Consulte tambm clulas de layout, tabelas

ndice remissivo 605

clulas de layout 178

alinhamento 187
como desenhar 179
como formatar 187
como limpar as alturas 184
como mover 185
como redimensionar 185
como selecionar 185
cor de fundo 187
preferncias 194
realce 194
sem quebra autom. de linha 187
Centro de suporte do Dreamweaver 16
(CFML)
tags, como personalizar anlise e aparncia 576
CFML
como editar os tags CFML 383
CFML. Consulte ColdFusion Markup Language
(CGI) Common Gateway Interface
scripts 538
CGI
material de referncia 25
chaves, como ajustar 367
codificaes 93
cdigo
como editar com o BBEdit 382
preferncias de formatao 374
cdigo-fonte HTML
buscas de tags 282
como copiar e colar, geral 255
como editar com o BBEdit 382
como formatar nos documentos existentes 379
como gravar e editar 365
como limpar 378
como limpar o HTML do MS Word 379
como procurar 280, 282
como selecionar na janela do documento 162
como visualizar com o inspetor de cdigo 90
converso de atributos CSS 278
editores ext. 381
estilos de tags 267
estrutura 352
material de referncia 25
opes 364
perfil de formatao 569
preferncias de cores de tags 374
preferncias de formatao, como definir 375

606

ndice remissivo

preferncias de regravao 377

referncia 358
tags, como remover 373
viso geral 351
viso geral das preferncias de formatao 374
ColdFusion Markup Language (CFML)
e o Dreamweaver 360
viso geral 582
colunas de visualizao de arquivos
como acessar 146
como adicionar uma coluna 147
como alterar a ordem 147
como excluir 148
como utilizar com as Design Notes 146
colunas, linhas e clulas
como adicionar e remover 208
como formatar 204
cor de fundo, como adicionar 205
comando
Atualizar HTML 321
Criar lbum de fotografias na Web 322
Otimizar imagem no Fireworks 317
comando Abrir 159
comando Abrir a pgina vinculada 549
comando Abrir o modelo anexado 425
comando Adicionar objeto biblioteca 430
comando Adicionar objeto linha de tempo 461
comando Adicionar quadro 461
comando Adicionar/remover o ajuste de
redimensionamento da Netscape 444
comando Ajustar a posio 166
comando Alinhar com a seleo 167
comando Alterar o link no site inteiro 400
comando ncora com nome 394
comando Aplicar a formatao de origem 379
comando Aplicar o modelo pgina 422
comando Atualizar a pgina atual 425, 432
comando Atualizar as pginas 425
comando Colar como texto 252
comando Colocar 152
comando Converter as camadas em tabela 455
comando Converter tabelas em camadas 457
comando Cor 258
comando Definir como home page 128
comando Definir o esquema de cores 162
comando Desanexar do modelo 424
comando Desmarcar a regio editvel 421

comando Dividir as clulas 211

comando Editar a folha de estilos 271
comando Editar a lista de fontes 260
comando Editar o contedo NoFrames 234
comando Evitar sobreposies de camadas 456
comando Exportar a tabela 215
comando Formatar a tabela 206
comando Gravar o caminho da camada 462
comando Importar o HTML do Word 159, 380
comando Importar os dados da tabela 198
comando Inserir campo de imagens 535
comando Inserir dados tabulares 198
comando Limpar o HTML 378
comando Limpar o HTML do Word 379
comando Link a um arquivo existente 127
comando Link a um novo arquivo 127
comando Mesclar as clulas 210
comando Novo 158
comando Novo a partir de modelo 159, 422
comando Obter 151
comando Obter mais comportamentos 478
comando Redefinir a origem 165
comando Redefinir a posio 166
comando Remover a linha de tempo 465
comando Remover o quadro 461
comando Salvar 160
comando Salvar a moldura 226
comando Salvar a moldura como 226
comando Salvar como modelo 411
comando Salvar o conjunto de molduras 226
comando Salvar o conjunto de molduras como 226
comando Salvar todas as molduras 226
comando Selecionar um local mais novo 154
comando Selecionar um remoto mais novo 154
comando Verificar a ortografia 279
comando Verificar os links no site inteiro 547
comando Verificar os navegadores de destino 542
comando Visualizar no navegador 545
comando Visualizar utilizando o servidor local 389
comandos
como acessar nos menus contextuais 80, 82
como criar, a partir das etapas do histrico 173
como gravar 175
como renomear 560
comandos Dividir a moldura 219
comentrios, como inserir 357
Common Gateway Interface (CGI). Consulte CGI 538

como abrir
arquivos de texto 158
documentos 158
tipos de arquivos diferentes de HTML como
padro 554
como abrir arquivos HTML do Word 159
Como abrir documentos vinculados 549
como abrir os arquivos no-HTML 368
preferncias 368
como adicionar
extenses ao Dreamweaver 98
objeto a uma linha de tempo 461
quadros a uma linha de tempo 463
como ajustar as chaves 367
como alinhar 294
camadas 447
elementos da pgina 294
imagens de rastreamento 167
opes 294
texto 259
como analisar o cdigo 515
como aninhar 444
camadas 443
molduras 222
como aplicar as cores ao texto 242
como atualizar
lista Site (painel Propriedades) 240
como atualizar os links 398
como automatizar as tarefas 168
como colar as etapas do histrico 172
como colocar arquivos em um servidor remoto 152
como combinar os painis flutuantes 86
como copiar as etapas do histrico 172
como criar
modelos 411
Como criar botes de opo 531
como criar cores e URLs 248
como criar novos modelos de boto Flash 335
como criar relatrios 550
como definir as propriedades do documento 160
como definir os pontos de interrupo 513
como desenhar
camadas 441
clulas e tabelas de layout 179
como designar links
como abrir documentos em uma nova janela 392
em documentos 391

ndice remissivo

607

como designar molduras para

_blank 234
_parent 234
_self 234
_top 234
como designar os navegadores de destino
atalhos 594
como converter um arquivo para se tornar
compatvel com o navegador 3.0 457
perfis de navegadores 571
como detectar os navegadores e plug-ins 544
como devolver e retirar arquivos 139142
como desfazer uma retirada 142
viso geral 139
como editar
atalhos de teclado 95
modelos 411
objetos de boto Flash 331
propriedades 244
como editar o cdigo (visualizao de cdigo ou
inspetor de cdigo) 365
como efetuar a integrao com o SourceSafe 135
como efetuar a integrao com o WebDAV 135
como efetuar o download
tamanho, estimativas de tempo 549
como efetuar o upload de arquivos 152
Como estabelecer a conexo com sites remotos
utilizando sistemas de controle de origem 135
como executar os objetos Flash 331
como exibir
camadas 454
como organizar as visualizaes 363
contedo do head 167
elementos invisveis 164
HTML de regies editveis e bloqueadas de
modelos 419
imagens de rastreamento 166
regies editveis e bloqueadas nos modelos 418
sites 119
visualizao de cdigo e visualizao do projeto
362
como exibir os elementos invisveis 164
como exportar
XML, notaes de tag para 428
como exportar os estilos 274
como fazer o download
comportamentos 478

608

ndice remissivo

como formatar o cdigo-fonte HTML

como personalizar 569
preferncias 374
como gerenciar as propriedades. Consulte propriedades
como gerenciar os links 398
como gravar comandos 175
como gravar o cdigo (visualizao de cdigo ou
inspetor de cdigo) 365
como importar
arquivos HTML do Word 159
como incorporar udio 341
como iniciar 20
como inserir
caracteres especiais 254
controles ActiveX 344
datas 253
elementos de mdia 325
filmes Flash 335
filmes Shockwave 338
imagens 291
imagens cambiveis 300
miniaplicativos Java 346
objetos de boto Flash 329
objetos de texto Flash 332
objetos Generator 337
propriedades 241
server-side includes 438
como inserir propriedades. Consulte propriedades
como instalar o Dreamweaver 12
como integrar o Dreamweaver com outros aplicativos
94
como localizar e substituir. Consulte como procurar
como modificar
propriedades da pgina 160
como obter arquivos de um servidor remoto 151
como ocultar os elementos invisveis 164
como organizar as visualizaes 363
como personalizar o Dreamweaver 553, 553583
barra do Iniciador e Iniciador 80
caixas de dilogo 568
menus 557
painel Objetos 555
princpios bsicos 94
tags, de outros fabricantes 576
como processar os formulrios 537

como procurar
Ajuda do Dreamweaver 15
arquivos 280
atalhos 590
como salvar os padres de busca 285
expresses regulares 286
tags e atributos HTML 282
texto entre tags especficos 284
texto na fonte de HTML 282
texto nos arquivos 280
como recarregar as extenses 555
como recuar o texto 260
como redimensionar
alas 295
camadas 446
clulas da tabela 207
clulas/tabelas de layout 185
elementos da pgina 295
molduras 231
como remover quadros de uma linha de tempo 463
como repetir as etapas 168
como repetir as linhas de tempo continuamente 463
como reutilizar
buscas 285
itens de biblioteca 431
modelos 422
como salvar
arquivos em molduras e conjuntos de molduras
225
buscas 285
documentos 160
como selecionar
camadas 445
molduras e conjuntos de molduras 223
objetos na janela do documento 162
como sincronizar os sites local e remoto 154
como transferir arquivos, resoluo de problemas 152
Como utilizar o Dreamweaver com o Visual SourceSafe
136
Como utilizar os relatrios para testar um site 550
como verificar os links 546

como vincular
a ncoras com nome usando o cone do indicador
de arquivos 395
a documentos usando o cone do indicador de
arquivos 392
a uma folha de estilos CSS externa 270
ncoras 394
documentos 391
como visualizar em navegadores
atalhos 594
como visualizar nos navegadores
viso geral 544
compatibilidade da camada com o Netscape 4 444
comportamentos 469, 469507
aes, como criar 477
como alterar 476
como anexar 473
como desencadear 473
como excluir 476
compatibilidade com os navegadores 478
de outros fabricantes 478
definidos 469
e formulrios 538
e imagens 304
e itens de biblioteca 434
e linhas de tempo 476
e links 407
e mdia 349
e modelos 421
conjuntos de molduras 219232
aninhadas 222
bordas 232
como designar links em 391
como nomear 227
como salvar 225
como selecionar 223
predefinidos, como inserir 220
propriedades 229
Consulte tambm molduras
conta-gotas 91
contedo Flash
viso geral 328
contedo NOFRAMES 234
contedo, como adicionar a tabelas 197

ndice remissivo 609

controles ActiveX
como inserir 344
como redimensionar 295
propriedades 345
viso geral 344
controles deslizantes, como criar 486
convenes 22
convenes tipogrficas 22
copiar e colar, HTML do Fireworks 309
cores
aceitas pela Web 92
amostras 91
como criar propriedades de cores 248
como escolher 91
como propriedades. Consulte propriedades
conta-gotas, como utilizar 91
contraste 162
fundo da moldura 233
fundo da pgina 161
padro do texto da pgina 162
texto, como alterar 242, 258
D
dados tabulares, como importar 198
daltonismo 162
datas
como inserir 253
depurador. Consulte depurador JavaScript
depurador JavaScript 509
caixa de advertncia 510
como definir os pontos de interrupo 513
como examinar as variveis 516
como executar 509
depurao total, depurao circular, depurao
parcial 515
erros de sintaxe 511
erros lgicos 512
janela 512
lista de variveis 516
depurador JS. Consulte depurador JavaScript
desenho da Web, nveis de experincia no 20

610

ndice remissivo

Design Notes
como adicionar opes de status 145
como configurar 143
como desativar 145
como executar um relatrio 150
como salvar as informaes sobre o arquivo 143
para documentos e objetos 143
para objetos de mdia 328
para os arquivos do Fireworks 148
relatrios 149
viso geral 142
dicionrio pessoal de ortografia 279
Director, como criar filmes Shockwave com o 338
documentos
como abrir 158
como criar 158
como criar, com base em modelos 422
como definir as propriedades 160
como procurar 280
como salvar 160
como verificar os links 546
como visualizar nos navegadores 544
Design Notes, como utilizar em 142
modelos, como desanexar de 424
novo 158
tamanho do download, tempo 549
texto, como adicionar 252
ttulo da pgina 160
documentos HTML. Consulte documentos 158
Documentos sem ttulo 551
documentos vinculados, como abrir 549
E
Editor de atalhos de teclado 95
editores Consulte editores externos
editores de texto
arquivos criados por 158
editores de texto. Consulte editores externos
editores de texto HTML Consulte editores externos
editores ext.
HTML, viso geral 381
texto 381

editores externos
BBEdit (no Macintosh), integrao com 382
Fireworks. Consulte Integrao entre
Dreamweaver e Fireworks
HomeSite (no Windows) 361
imagens 301
mdia 326
preferncia 312
elementos
como alinhar 294
como visualizar os invisveis 587
elementos de mdia
como inserir 325
parmetros 348
elementos invisveis
comentrios 357
como mostrar e ocultar 164
como selecionar 162
preferncias 164
scripts 365
endereo de correio eletrnico
como utilizar com o sistema de devolues e
retiradas 140
entidades 254
erros de sintaxe 511
erros lgicos no cdigo JavaScript 512
erros no cdigo JavaScript 512
estilos 267
como aplicar os estilos personalizados 273
como converter em HTML 277
como criar 272
conflitantes 275
em modelos 421
HTML 262
tabela de converso de CSS em markup de
HTML 278
Consulte tambm folhas de estilos
estilos CSS
atributo class 272
atributos, como converter em HTML 278
como aplicar os personalizados 273
como criar 272
como exportar 274
seletores 272

estilos HTML
como aplicar 264
como criar 265, 265266
como editar 266
como excluir 264
como exibir 264
como limpar 264
como modificar 266
como remover do painel 264
como utilizar em outros sites 266
cone de Novo estilo 266
estilos person. Consulte folhas de estilos
estrutura de diretrios, site. Consulte sites
evento onBlur 506
eventos
como alterar em comportamentos 476
como desencadear aes 473
definidos 469
disponveis para diversos navegadores e objetos
470
Excel. Consulte arquivos Microsoft Excel, como
importar
exportar
arquivos Fireworks para o Dreamweaver 310
Camadas CSS do Fireworks 310
itens de biblioteca do Fireworks 311
expresses regulares 286
extensibilidade
comportamentos de outros fabricantes 478
JavaScript 575
viso geral 575
extenses 98
como recarregar 555
F
filmes
como inserir 325
filmes Flash
como controlar 485
como inserir 335
como propriedades. Consulte propriedades
como redimensionar 295
propriedades 336
viso geral 328
filmes MPEG
como propriedades. Consulte propriedades

ndice remissivo

611

filmes QuickTime
como inserir 341
como propriedades. Consulte propriedades
filmes Shockwave
como controlar 485
como inserir 338
como propriedades. Consulte propriedades
como redimensionar 295
propriedades 338
viso geral 338
firewalls
como definir o host e a porta 118
opes 133
Fireworks
Design Notes no 148
folhas de estilos
como editar as folhas de estilos externas 271
externas 269
viso geral 267
Consulte estilos
folhas de estilos externas
como criar 269
como editar 271
como vincular 269
fontes
codificaes, como definir fontes para 93
como alterar as caractersticas 257
como alterar as combinaes 260
formatos de arquivos, imagem 289
formulrios
botes Enviar 536
campo de senha 524
campos, como validar 506
como adicionar a um documento 522
como adicionar diversos objetos 536
como criar 522
como criar campos de arquivos 528
como inserir tabelas 537
como processar 537
comportamentos, como utilizar com 538
criao de scripts do servidor 538
criao de scripts pelo cliente 537
menus de salto, como criar 402
objetos, como adicionar 524
viso geral 519
fotografias 289

612

ndice remissivo

FTP
como determinar um diretrio do host 134
como estabelecer a conexo a um servidor da Web
132
como transferir arquivos com 132
registro 152
resoluo de problemas 138
fundo
imagem e cor da pgina 161
transparncia no 161
G
grade
como encaixar as camadas na 448
como guia 165
como mostrar 183, 448
encaixar na 183
espaamento 183
grficos Consulte imagens
Grupo de discusso do Dreamweaver 16
guia Informaes bsicas (Design Notes) 144
guia Todas as informaes (Design Notes) 144
guias visuais
imagens de rastreamento 166
rguas 165
viso geral 165
H
home page, como definir 128
HomeSite (no Windows) 361
hr (rgua horizontal), como inserir 261
HTML
atualizar HTML do Fireworks colocado no
Dreamweaver 321
copiar e colar do Fireworks para o Dreamweaver
309
inserir do Fireworks no Dreamweaver 308
HTML do Microsoft Word
como importar 379
como limpar 379
HTML do Word. Consulte HTML do Microsoft Word

I
cone de Abrir a folha de estilos 270
imagem espaadora 194
imagens
atalhos 593
como alinhar 259
como alterar o arquivo de origem com as linhas de
tempo 464
como aplicar comportamentos a 304
como editar 301
como inserir 291
como inserir na visualizao de layout 183
como permutar (comportamento) 503
como pr-carregar (comportamento) 495
como propriedades. Consulte propriedades
como redimensionar visualmente 295
como restaurar as permutadas (comportamento)
504
editores de imagens externos 301
em tabelas 198
formatos, com suporte 289
mapas de imagens 296
propriedades 292
redimensionamento 295
imagens cambiveis 299
como criar 300
como criar um link 300
como testar 300
imagens de rastreamento 166
imagens espaadoras 192
preferncias 192
imagens GIF
como imagem de rastreamento 166
utilizaes de 289
imagens JPEG
como imagem de rastreamento 166
utilizaes de 289
imagens PNG
como imagem de rastreamento 166
utilizaes de 289
ndice, Ajuda 15
informaes do servidor da Web 132
Iniciador
barra do Iniciador 79
Iniciador e barra do Iniciador
botes padro 77
como personalizar 80

Iniciar e editar, preferncias 314

iniciar o Fireworks a partir do Dreamweaver. Consulte
Integrao entre Dreamweaver e Fireworks
inserir
HTML do Fireworks no Dreamweaver 308
imagens do Fireworks no Dreamweaver 308
inspetor de cdigo
como abrir 363
janela do documento, como alternar para 363
inspetor de imagens 296
inspetor de propriedades
como ajustar os links rompidos 548
como exibir 85
como expandir 85
imagens 292
pontos ativos 297
propriedades dos controles ActiveX 345
propriedades dos filmes Flash 336
propriedades dos filmes Shockwave 338
propriedades dos itens de biblioteca 436
propriedades dos miniaplicativos Java 347
propriedades dos plug-ins do Netscape Navigator
342
inspetores
atalhos 597
como abrir/fechar com a barra do Iniciador 79
inspetor de imagens 296
inspetor de propriedades 85
Consulte tambm painis
integrao com o BBEdit (no Macintosh) 382
integrao com o SourceSafe 135
integrao com o WebDAV 135
integrao entre Dreamweaver e Fireworks
atualizar HTML do Fireworks 321
comando Otimizar imagem no Fireworks 317
criar lbuns de fotografias na Web 322
editar animaes do Fireworks 320
exportar Camadas CSS 310
exportar itens de biblioteca Dreamweaver 311
iniciar e editar imagens do Fireworks 315
iniciar e editar tabelas do Fireworks 316
iniciar e otimizar imagens do Fireworks 317
inserir arquivos do Fireworks 307
Notas de Design 313
preferncia de editor externo 312
preferncias Iniciar e editar 314
redimensionar imagens do Fireworks 319

ndice remissivo

613

integrao entre Fireworks e Dreamweaver. Consulte

Integrao entre Dreamweaver e Fireworks
interatividade 19
introduo ao Dreamweaver 20
itlico 257
itens de biblioteca 429436
como adicionar s pginas 431
como alterar a cor de realce 430
como criar 429
como editar 431
como editar os comportamentos em 434
como excluir 433
como propriedades. Consulte propriedades
como tornar editveis os itens de documentos 434
preferncias 430
propriedades 436
viso geral 429
itens de biblioteca, exportar do Fireworks 311
J
janela do documento
barra de ttulo 76
barra do Iniciador 77
como abrir documentos 158
como executar os plug-ins do Navigator 343
como procurar texto 280
como redimensionar 77
como selecionar os elementos 162
inspetor de cdigo, como alternar para 363
menu pop-up Tamanho da janela 76
molduras na 225
princpios bsicos 76
seletor de tags 76
tamanho da pgina e tempo de download 76
janela do site
comando Colocar 152
comando Obter 151
como alterar a exibio 120
como exibir os sites locais 119
como procurar arquivos 130
como procurar texto 280
mapas de sites 120
opes da barra de ferramentas 115
princpios bsicos 119
viso geral 114
visualizao do mapa do site 115
visualizao dos arquivos do site 115

614

ndice remissivo

janelas
atalhos 597
Consulte tambm inspetores, painis
JavaScript
aes 470
alertas 494
arquivos 158
como estender os recursos do Dreamweaver 575
como executar 480
como inserir os scripts 365
JavaServer Pages (JSP) 581
JSP (JavaServer Pages) 581
L
layout de pgina Consulte visual. de layout, modelos
layout, planejamento 106
Consulte visual. de layout, modelos
linhas de tempo
atalhos 592
cabeote de execuo 459
caminhos complexos 462
como adicionar e remover quadros 463
como adicionar objetos s 461
como alterar as propriedades das camadas 464
como alterar o arquivo de origem da imagem 464
como anexar um comportamento 476
como controlar com os comportamentos 468
como criar 461
como executar automaticamente 463
como executar e parar utilizando os
comportamentos 505
como modificar 463
como repetir continuamente 463
dicas de animao 467
em modelos 421
mltiplas 465
quadros primrios 461

links
a ncoras 394
a folhas de estilos 269
a um documento 390
arquivo de cache 398
atalhos 593
como abrir a origem 399
como ajustar 547
como alterar as molduras com 233
como alterar no site inteiro 400
como aplicar seleo 242
como atualizar 398
como designar 390
como remover 399
como testar 546
como verificar 546
mapa do site 399
relativos a documento 391
relativos raiz do site 391
links de correio eletrnico
como alterar 400
como criar 396, 397
links de scripts
como alterar 400
como criar 397
links externos 546
links nulos
como alterar 400
como criar 397
links rompidos 546
lista de variveis 516
lista Favoritos (painel Propriedades). Consulte
propriedades 241
lista Site
como atualizar 240
listas
como criar 256
listas de rolagem 532
listas no-ordenadas, como criar 256
M
Macromedia Director, como criar filmes Shockwave
com o 338
macros (como criar comandos) 173
manipuladores de eventos. Consulte eventos

Manual Como utilizar o Dreamweaver 14

mapa de percurso (onde iniciar) 20
mapas de bits, como redimensionar 295
Consulte tambm imagens
mapas de imagens
como criar para o cliente 296
como selecionar vrios pontos ativos 298
pontos ativos 296
viso geral 296
mapas de imagens do servidor 296
mapas de sites
atalhos 595
comando Atualizar o local 128
comando Definir como home page 128
comando Link a um arquivo existente 127
comando Link a um novo arquivo 127
como adicionar arquivos ao site 127
como alterar os links nos 399
como atualizar aps as alteraes 128
como editar as pginas 126
como exibir 120
como exibir uma ramificao dos 129
como expandir uma ramificao 130
como marcar os arquivos como ocultos 129
como mostrar os arquivos dependentes nos 129
como reduzir uma ramificao 130
como remover os links nos 399
como renomear as pginas nos 127
como salvar como um arquivo de imagem 130
como selecionar vrias pginas nos 126
links 399
mostrar os arquivos ocultos 129
opo Exibir os arquivos dependentes 129
opo Mostrar os ttulos das pginas 127
marcadores de elementos invisveis 164
material de referncia 25
menu cabealho da coluna 191
menu Comandos, como editar 558
menu pop-up
como criar 533
menu pop-up Tamanho da janela 76
menus contextuais 80, 82
como personalizar 559
menus de atalhos. Consulte menus contextuais

ndice remissivo

615

menus de salto 401

botes Ir 491
botes Ir, como adicionar automaticamente 402
como adicionar os itens de menus 402
como alterar os itens de menu 403
como criar um aviso de seleo para 402
como editar 491
menus, como personalizar 557
Microsoft Word
arquivos, como abrir 159
miniaplicativos. Consulte miniaplicativos de Java
miniaplicativos Java
como inserir 325, 346
como redimensionar 295
propriedades 347
viso geral 346
Mini-iniciador. Consulte Iniciador e barra do Iniciador
77
modelos 409428
atalhos 595
como alterar as cores de realce 417
como aplicar a um documento j existente 422
como aplicar ao documento 242
como clicar em regies bloqueadas 419
como criar 411
como criar modelos de boto Flash 335
como criar novos documentos com 159, 422
como definir as regies editveis 416
como desanexar um documento de 424
como editar 411, 412
como exibir as regies 418
como localizar as regies editveis 424
como modificar 424
como propriedades. Consulte propriedades
como renomear 412
como tornar uma regio no-editvel 421
como utilizar as linhas de tempo 421
como utilizar os comportamentos 421
como utilizar os estilos 421
documentos com base em, como criar 422
pasta Templates 411
preferncias 417
propriedades da pgina 413
regies editveis e bloqueadas 415
viso geral 409
XML 426

616

ndice remissivo

molduras 217, 217235

aninhadas 222
atalhos 591
bordas 232
como alterar a cor do fundo 233
como alterar o contedo 233
como criar 219, 221
como designar 233
como excluir 221
como redimensionar 231
como salvar 225
como selecionar 223
como utilizar os links 233
compatibilidade com os navegadores 234
comportamentos, como utilizar com 235
etapas para criar 219
painel 223
propriedades 227
viso geral 217
Mostrar as guias da tabela de layout 178
Mostrar os ttulos das pginas no mapa do site 127
multimdia. Consulte mdia
N
navegador primrio 545
navegador secundrio 545
navegadores
arquivos compatveis com a verso 3.0 457
como designar 542
como detectar 544
como visualizar nos 544
compatibilidade, como planejar 103
compatibilidade, como testar 542
cores, aceitas 92
e estilos CSS 277
perfis, como criar 573
perfis, como editar 571
primrio, como definir 545
secundrio, definir 545
verses, como verificar 482
Notas de Design, para integrao entre Dreamweaver e
Fireworks 313
novos recursos no Dreamweaver 22

O
objeto ncora (painel Objetos) 394
objetos
atalhos 596
caixas de seleo e botes de opo 529
como adicionar a formulrios 524
como adicionar Design Notes 144
como criar 556
como inserir 252
como inserir com o painel Objetos 82
de fatia, editar fatias de tabelas do Fireworks a
partir do Dreamweaver 316
objetos de boto Flash 329, 335
como modificar 331
como visualizar 331
propriedades 333
objetos de texto Flash
como inserir 332
como visualizar 331
propriedades 333
objetos Generator, viso geral 337
opo Advertir quando resolver ou remover tags
(preferncias de regravao de cdigo) 377
opo Ajustar os tags abertos e aninhados
incorretamente (preferncias de
regravao de cdigo) 377
opo Ajustar os tags aninhados incorretamente
(Limpar o HTML do Word) 380
opo Aninhar sempre quando criada dentro de uma
camada existente 444
opo Aplicao automtica (painel Estilos HTML)
264
opo Aplicar a formatao de origem (comando
Limpar o HTML do Word) 381
opo Arquivos locais 120
opo Arquivos remotos 120
opo Ativar a devoluo e retirada de arquivos 140
opo Atualizar a lista de arquivos locais
automaticamente 109, 110
Opo cache (caixa de dilogo Definio de site) 110
Opo cache (caixa de dilogo Definio do site) 109
opo caixa de cores 91
opo Caixa dos atributos (preferncias de formato de
cdigo) 376
opo Caixa dos tags (preferncias de formato de
cdigo) 376

opo Centralizao (preferncias de formato de

cdigo) 377
opo Cdigo-fonte de HTML 282
opo Coincidir maisc./minsc. 281
opo Colocar os arquivos mais novos no remoto 155
opo colunas (Inserir tabela) 196
opo Combinar os tags aninhados sempre que possvel
379
opo Comentrios (preferncias de cores de cdigo)
375
opo Cor do link (Propriedades da pgina) 162
opo Cor do texto (Propriedades da pgina) 162
opo Cor dos links ativos (Propriedades da pgina)
162
opo Cor dos links visitados (Propriedades da pgina)
162
opo Definir a cor do fundo (Limpar o HTML do
Word) 380
opo Desanexar do original 434
opo Espaamento da clula (Inserir tabela) 196
opo Especfico ao tag (preferncias de cores de
cdigo) 375
opo Execuo automtica 459
opo Execuo automtica (painel Linhas de tempo)
460
opo FTP 132
opo Fundo (preferncias de cores de cdigo) 374
opo Ignorar a caixa de (preferncias de formato de
cdigo) 377
opo Ignorar os diferentes espaos em branco 281
opo ndice Z (para camadas)
como alterar a ordem de empilhamento 453
opo Limpar as CSS 380
opo Limpar o estilo da seleo 264
opo Limpar o estilo do pargrafo 264
opo Limpar os tags <font> 380
opo linhas (Inserir tabela) 196
opo Linhas e colunas da tabela (preferncias de
formato de cdigo) 376
opo Local/Rede 132
opo Loop 459
opo Molduras e conjuntos de molduras (preferncias
de formato de cdigo) 376
opo Mostrar o iniciador na barra de status 79
opo Mostrar o registro quando concluir 379
opo nenhum 132

ndice remissivo

617

opo Nunca regravar o HTML em arquivos com as

extenses (preferncias de regravao de
cdigo) 377
opo Obter e colocar os arquivos mais novos 155
opo Obter os arquivos mais novos do remoto 155
opo Outras palavras-chave (preferncias de cores de
cdigo) 375
opo Padro do tag (preferncias de cores de cdigo)
375
opo Palavras-chave reservadas (preferncias de cores
de cdigo) 375
opo Preenchimento da clula (Inserir tabela) 196
opo Quebra automtica de linha (preferncias de
formato de cdigo) 376
opo Quebras de linha (preferncias de formato de
cdigo) 376
opo Recuo (preferncias de formato de cdigo) 376
opo Redefinir o tag HTML 272
opo Remover os comentrios de HTML no
pertencentes ao Dreamweaver 378
opo Remover os comentrios de HTML pertencentes
ao Dreamweaver 378
opo Remover os tags adicionais de finalizao
(preferncias de regravao de cdigo) 377
opo Remover os tags aninhados redundantes 378
opo Remover os tags vazios 378
opo Remover tag(s) especfico(s) 378
opo Remover todo o markup especfico ao Word 380
opo Retirar os arquivos na abertura 140
opo Seqncias de caracteres (preferncias de cores de
cdigo) 375
opo Tamanho da tabulao 376
opo Tamanho do recuo (preferncias de formato de
cdigo) 376
opo Texto (preferncias de cores de cdigo) 374
opo Utilizar (preferncias de formato de cdigo) 376
opo Utilizar a firewall 133
opo Utilizar expresses regulares 281
opo Utilizar FTP passivo 133
opo Velocidade de conexo 79
opes de acesso ao servidor 132
opes de Caracteres especiais (preferncias de
regravao de cdigo) 378

618

ndice remissivo

opes de devoluo/retirada 140

como digitar um endereo de correio eletrnico
140
como digitar um nome de retirada 140
opes de exibio
fontes 93
painis flutuantes 87
opes de Localizar em 280
opes de Procurar 281
ordem de empilhamento
camadas 453
como alterar com as linhas de tempo 464
ortografia
como verificar 279
dicionrios, como editar 279
otimizar
imagens do Fireworks a partir do Dreamweaver
317
P
Package Manager 98
pginas
como alterar o ttulo 160
como visualizar nos navegadores 544
cor 161
cores padro do texto 162
Design Notes, como utilizar em 142
imagem de fundo 161
projeto 106
propriedades e modelos 413
tamanho 549
tempo de download, estimativa 549
Pginas da Ajuda do Dreamweaver 14
Pginas da Ajuda e manual Como estender os recursos do
Dreamweaver 16
painis
atalhos 597
barra do Iniciador 79
como abrir/fechar com a barra do Iniciador 79
como definir as preferncias de paletas flutuantes
87
de encaixe 86
inspetor de cdigo 90
painel Comportamentos 470
painel Histrico 87
painel Objetos 82

painis flutuantes
Consulte painis
painis flutuantes de encaixe 86
painel Camadas 442
painel Comportamentos 470
painel Estilos CSS 275
painel Histrico
comandos, como criar a partir das etapas do
histrico 173
como automatizar as tarefas com 168
como limpar a lista de histrico 89
etapas, como aplicar a outros objetos 170
etapas, como copiar e colar 172
etapas, como repetir 169
nmero mximo de etapas, como definir 89
viso geral 87
painel Linhas de tempo 459
painel Molduras 223
painel Objetos
categorias 83
como personalizar 555
como recarregar 555
de encaixe 86
preferncias 84
viso geral 82
painel Referncia 358
paleta de cores Cubos de cor 91
paleta de cores Mac OS 91
paleta de cores Passar cor aceita pela Web. 91
paleta de cores Tom contnuo 91
paleta de cores Tons de cinza 91
paleta de cores Windows 91
paletas, cor 91
pasta Configuration
arquivo Extensions.txt 554
arquivo menus.xml 557
arquivo SourceFormat.txt 569
subpasta Behaviors 568
subpasta BrowserProfiles 571
subpasta Commands 568
subpasta Objects 555
subpasta ThirdPartyTags 576

pasta raiz
local 108
remoto 134
pasta raiz local 108
pastas
como procurar 280
raiz 108
pastas Favoritos 248
pastas, Favoritos 248
perfil de formatao da origem 569
perfis
formato da fonte de HTML 569
navegadores 571
PHP Hypertext Preprocessor 581
pixels transparentes no fundo 161
pixels, transparentes, no fundo 161
planejamento
projeto 106
planejamento da navegao de um site 106
planejamento de sites 101
estrutura 104
objetivos 101
propriedades 107
pblico 101
plug-ins
como detectar 544
como executar na janela do documento 343
como executar os atalhos 595
como redimensionar 295
como verificar 483
Netscape Navigator 342
resoluo de problemas 344
plug-ins do Netscape Navigator
como executar na janela do documento 343
propriedades 342
resoluo de problemas 344
pontos ativos
como aplicar comportamentos a 304
como redimensionar 299
como selecionar vrios em um mapa de imagens
298
em mapas de imagens 296
propriedades 297
pontos de interrupo no depurador Javascript 513

ndice remissivo

619

preferncias
Barra de status 79
bibliotecas 430
Camadas 444
como atualizar os links 398
Cores de cdigo 374
dicionrio para verificao ortogrfica 279
editores externos 326
elementos invisveis 164
fontes/codificao 93
Formato de cdigo 375
gerais 93
Iniciar e editar 314
modelo 417
Painis 87
painis flutuantes 87
painel Objetos 84
Quick Tag Editor 373
regravao de cdigo 377
Site 117
Tipos de arquivos / editores 327
viso geral 92
visualizao de layout 194
Visualizar no navegador 545
Visualizar utilizando o servidor local (links
relativos raiz) 389
preferncias de fontes/codificao 93
preferncias de visualizao no navegador 545
Preferncias do site 117
Preferncias dos tipos de arquivos / editores 327
preferncias gerais 93
princpios bsicos do Dreamweaver 20
processadores de texto, arquivos criados por 158
projeto das pginas 106
proporo, como manter 295
propriedade de alinhamento da imagem 292
propriedade de alternativa da imagem 293
propriedade de atualizao da imagem 293
propriedade de borda da imagem 293
propriedade de campo de nome do mapa 293
propriedade de imagem de destino 293
propriedade de linguagem do script 367
propriedade de link da imagem 292
propriedade de nome (inspetor de propriedades da
imagem) 292

620

ndice remissivo

propriedade de origem baixa da imagem 293

propriedade de origem da imagem 292
propriedade do script de origem 367
propriedades 237, 237249
camada 449
camadas mltiplas 452
categorias 238
clulas de layout 187
colunas, linhas e clulas 204
como abrir o painel Propriedades 239
como adicionar lista Favoritos 241
como alterar com comportamentos 481
como aplicar as cores ao texto 242
como atualizar a lista Site 240
como editar 244
como exibir 85
como inserir 241
como selecionar mltiplas 243
conjunto de molduras 229
controles ActiveX 345
cores, como criar 248
documento, como definir 160
filmes Flash 336
filmes Shockwave 338
imagem 292
listas Favoritos 246
miniaplicativos Java 347
moldura 227
pastas Favoritos 248
planejamento 107
pontos ativos 297
tabela 203
tabelas de layout 188
URLs, como criar 248
viso geral 237
propriedades da pgina
ttulo, como alterar 160
propriedades dos objetos Flash 333
propriedades Espao V e Espao H da imagem 293
propriedades L e U da imagem 292

Q
qps (quadros por segundo) 459
quadros por segundo (qps) 459
quadros primrios
como criar 461
viso geral 459
Quick Tag Editor
como abrir 369
menu de sugestes de atributos 372
preferncias 373
viso geral 369
R
ramificaes, como expandir e reduzir no mapa do site
130
recursos para informaes sobre as tecnologias da Web
25
recursos, novos no Dreamweaver 22
redimensionar imagens do Fireworks a partir do
Dreamweaver 319
regies bloqueadas
como clicar em 419
regies, bloqueadas
como clicar em 419
rguas 165
rguas horizontais, como inserir e modificar 261
Relatrios
Retirado por 149
relatrios 149
como criar 550
como testar um site com 550
fluxo de trabalho 149
relatrios de devolues e retiradas 149
relatrios de fluxo de trabalho 149
relatrios de site 149
requisitos do sistema
No Macintosh 12
No Windows 12
resoluo de problemas
como clicar em regies bloqueadas 419
como transferir arquivos 152
plug-ins do Navigator 344
Roundtrip HTML 360

S
scripts
chaves ajustadas 367
como editar 366
como editar externos 365
como exibir as funes 368
como inserir 365
como mostrar no documento 164
como propriedades. Consulte propriedades
seo head, como editar o contedo na 167
selecionar
clulas/tabelas de layout 185
seletor de cores
Dreamweaver 91
sistema 91
seletor de cores do sistema 91
server-side includes 436
como editar 438
como inserir 438
viso geral 436
servidores
AppleTalk 132
como definir sites remotos 132
como resolver problemas de configurao 138
NFS 132
opes de acesso 132
servidores AppleTalk 132
servidores da Web. Consulte servidores
servidores NFS 132
sintaxe do menus.xml 562
sites
atalhos 594
cache 398
como adicionar arquivos e pastas 121
como ajustar os links rompidos 547
como alterar a exibio 120
como alterar os links no site inteiro 400
como devolver e retirar arquivos 139
como editar o remoto 111
como exibir 119
como planejar a navegao 106
como procurar os arquivos nos 280
como remover da lista de sites 112
como selecionar os arquivos atualizados 121
como verificar os links 546
como visualizar nos navegadores 544
compatibilidade com os navegadores 103, 542

ndice remissivo

621

criar novo 108

Design Notes, como utilizar em 142
editar os existentes 110
estrutura e navegao 113
grandes, propriedades em 246
locais e remotos 101
locais, como criar 108
locais, como exibir 119
local, como associar a um servidor remoto com
132
local, como localizar arquivos no 130
local, pasta raiz 108
material de referncia 25
relatrios, como executar 149
remoto, como configurar 131
remoto, como definir 132
remoto, como localizar arquivos no 131
remoto, como resolver problemas de configurao
138
remoto, pasta raiz 134
remotos, opes de acesso 132
sites locais. Consulte sites 108
som 339, 339341
adicionar pgina 339
como executar 494
sublinhado 257
submenu Estilo 257
Sumrio, Ajuda 15
T
tabelas 537
atalhos 590
clulas, como dividir 211
colunas, linhas e clulas 204
como adicionar bordas a 203
como adicionar cor de fundo a 204
como adicionar e remover linhas e colunas 208
como adicionar imagens de fundo a 204
como adicionar o contedo a 197
como ajustar as linhas e colunas 207
como alinhar 205
como alterar a largura das colunas 207
como aninhar 209

622

ndice remissivo

como converter a partir de camadas 455

como criar 196
como formatar 201
como importar 198
como limpar a largura e altura das clulas 208
como mesclar as clulas 211
como ordenar 214
como redimensionar 207
como selecionar os elementos 200
Consulte tabelas de layout
Consulte tambm visualizao de layout
formatos predefinidos de 206
opo Sem quebra 205
propriedades 203
tags HTML 202
viso geral 195
Consulte tambm colunas, linhas e clulas
tabelas de layout 178
alinhamento 188
aninhadas 182
como desenhar 179
como formatar 188
como limpar as alturas 188
como mover 185
como redimensionar 185
como selecionar 185
contorno 194
cor de fundo 188
espa. da clula 188
fundo 194
preench. da clula 188
preferncias 194
Remover o aninhamento 188
Remover todos os espaadores 188
Tornar consistentes as larguras 188
tag blockquote 260
tag body 167
tag map 296
tag ol 260
tag ul 260

tags

texto

ASP 383
blockquote 260
body 167, 353
buscas 282
CFML 383
como aplicar 258
como editar 369
como envolver com 369
como remover 373
como selecionar 162
como sobrepor 360
de outros fabricantes, como personalizar 576
em perfis de navegadores 571
especificaes 577
formatao de texto 357
head 353
HTML 352
invlidos 360
ol 260
sintaxe do menus.xml 562
tabela 202
tagspec 577
ul 260
XML 360
Tags aninhados redundantes 551
Tags combinveis de fontes aninhadas 551
tags de cabealho 258
tags de outros fabricantes
como impedir a regravao 582
como personalizar 576
tags de pargrafo 258
tags HTML. Consulte tags 352
tags invlidos
como exibir 360
tags sobrepostos 360
Tags vazios removveis 551
tamanho da pgina, como redimensionar para que
caiba no monitor 77
tamanho do monitor, como redimensionar as pginas
para que caibam 77
tempo de download 76

alinhamento 259
atalhos de formatao 589
como adicionar a documentos 252
como alterar a cor 242, 259
como alterar as combinaes de fontes 260
como editar os atalhos 588
como formatar com os estilos HTML 262
como formatar os tags 357
como procurar nos documentos 280
como recuar 260
cor padro nas pginas 162
cor, como alterar 258
editores externos. Consulte editores externos
formatao 251
Texto alternativo ausente 551
texto em negrito 257
tipo de arquivo padro, como alterar 554
tipos de arquivos
arquivos Flash 328
ttulo
como alterar 160
U
upload annimo de arquivos 528
URLs
como aplicar seleo 242
como criar propriedades de URLs 248
como propriedades. Consulte propriedades
URLs. Consulte caminhos
V
VBScript 365
viso geral das lies 13
viso geral do Dreamweaver 11
Viso geral do Tour guiado 13
visual. de layout
atributos Limpar a altura 188
como alternar para 177
como formatar tabelas de layout 188
contorno da tabela 194
espaadores de insero autom. 194
espaamento da clula 188
fundo 194
mover clulas/tabelas de layout 185
preench. da clula 188

ndice remissivo 623

realce da clula 194

redimensionar clulas/tabelas de layout 185
Remover o aninhamento 188
Remover todos os espa. 188
selecionar clulas/tabelas de layout 185
sobre clulas e tabelas de layout 178
Tornar consistentes as larg. 188
viso geral 177
Visual SourceSafe
integrao com o Dreamweaver 136
visualizao de cdigo
como abrir 362
como abrir os arquivos no-HTML 368
como gravar e editar o cdigo 365
como organizar as visualizaes 363
opes 364
Visualizao de layout 177194
visualizao de layout 177
alongamento automtico 189
como adicionar o contedo a 183
como definir a largura 189
como desenhar clulas e tabelas de layout 179
como formatar as clulas de layout 187
como limpar as alturas das clulas 184
grade 183
imagens espaadoras 192
largura fixa 189
menu cabealho da coluna 191
preferncias 194
preferncias de imagem espaadora 192
tabelas de layout aninhadas 182
visualizao do projeto
como exibir utilizando a visualizao de cdigo
362
como organizar as visualizaes 363
visualizao dos arquivos do site 121
X
XML 427
arquivo menus.xml 562
em modelos 426
notaes de tags para a exportao 428
tag tagspec 577
tags 360
viso geral 427

624

ndice remissivo