Dreamwiver Cs

Untitled-1 1 05/06/2006 14:14:28
iniciais.indd 1 5/6/2006 19:04:14

© 2006 by Digerati Books
Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998.
Nenhuma parte deste livro, sem autorização prévia por escrito da editora,
poderá ser reproduzida ou transmitida sejam quais forem os meios emprega-
dos: eletrônicos, mecânicos, fotográficos, gravação ou quaisquer outros.
Diretor Editorial Revisão

Luis Matos Luciana Salgado Guimarães Moreira
Assistência Editorial Projeto Gráfico

Monalisa Neves Daniele Fátima
Erika Sá
Diagramação
Preparação dos originais Luciane S. Haguihara
Jeferson Ferreira
Dados Internacionais de Catalogação na Publicação (CIP)

(Câmara Brasileira do Livro, SP, Brasil)
P659h Pinto, Sandra Rita B.

Treinamento prático em Dreamweaver/
Sandra Rita B. Pinto − São Paulo : Digerati
Books, 2006.
128 p.
ISBN: 85-7702-047-9
1.Dreamweaver. – Programa de computador.

2. Web Design. I. Título.
CDD 005.3
Universo dos Livros Editora Ltda.

Rua Haddock Lobo, 347 – 12º andar
CEP 01414-001 São Paulo/SP
Fone: (11) 3217-2600 Fax: (11) 3217-2617
www.universodoslivros.com.br
e-mail: editor@universodoslivros.com.br
Conselho Administrativo: Alessandro Gerardi, Alessio Fon Melozo,

Luis Afonso G. Neira, Luis Matos e William Nakamura.
iniciais.indd 2 6/6/2006 11:11:34

Prefácio
A diferença entre uma coisa bem-feita e outras não tão bem-feitas
é o modo como o trabalho começa. Existe um princípio metafísico
que diz que uma coisa não pode nascer maior do que o objeto ou ser
que a gerou. Aplicado ao mundo dos trabalhos profissionais, sobre-
tudo na área de informática, esse princípio pode ser bem exempli-
ficado: da bagunça não pode nascer algo organizado, da mediocri-
dade não pode nascer nada sensacional, do simplório não vai surgir
nada sofisticado...
Quando a Internet firmou-se, na década de 1990, juntamente com
a multidão das empresas pontocom que aproveitaram a explosão da
Rede Mundial para ganhar dinheiro, a programação ou desenho de
páginas em HTML se tornou equivalente a um curso de engenharia
em alguma coisa muito sofisticada, como fazer foguetes ou conser-
tar reatores nucleares. Criou-se até uma profissão, o webdesign, o
“desenhista de webs”, um sujeito responsável por tornar uma página
funcional e atraente ao mesmo tempo.
Desde o início da Internet, várias pesquisas já foram feitas sobre
o tempo que as pessoas gastam olhando uma página Web a procura
do que desejam. Os resultados mostram que, se o desenho de uma
página não atrai o usuário em até 5 segundos, ele se “desliga” do
conteúdo e digita outro endereço. E essa chance é única: ao contrá-
rio do que acontece com o controle remoto da televisão, o usuário
da Internet não dá um zapping por tudo que está disponível e retorna
no final ao mesmo canal.
Bom, não é a toa que as empresas pontocom faliram... Páginas
bonitas e atraentes – como as que as pesquisas advogam como as
ideais para a conquista da audiência – não podem sair de algo tão
simples, linear e, literalmente, textual como o HTML. HTML puro,
processado em modo texto, gera conteúdo escrito formatado e dis-
tribuído em certo leiaute – uma página limpa e organizada (ou nem
tanto, dependendo do designer), mas nada mais que isso. Não exis-
tem grandes recursos, ou ao menos não existem recursos que va-
lham a pena. Afinal, o maior não pode sair do menor...
Por que não fazer, então, com que a fonte fique maior? Foi o que
a Macromedia fez ao lançar o Dreamweaver, uma ferramenta gráfica
de produção de sites que permite a edição manual de código HTML,
ao mesmo tempo em que possui uma interface no formato inserir-
arrastar-e-soltar, comum à maioria dos programas do Windows.
iniciais.indd 3 5/6/2006 19:04:18

Você quer trabalhar com formulários dinâmicos e scripts? O Dre-
amweaver possibilita a inserção de objetos de outras linguagens de
programação ainda durante o desenvolvimento da página, e ajuda
a atrelar uma ação programada a um objeto criado anteriormente.
Quer cria menus deslizantes? O Dreamweaver foi a primeira ferra-
menta que possibilitou a criação desse tipo de design, muito antes
das facilidades do Flash e do Java.
Por falar em Flash, o Dreamweaver também permite a inserção
de conteúdo Flash dentro de páginas HTML, ou a montagem de ban-
ners e janelas de aplicativo. Isso sem falar nas opções de segurança,
servidor FTP próprio, arquivos virtuias...
Largue seus códigos HTML escritos no Notepad, esqueça o
Front Page, relegue os editores de código “simpáticos” ao esqueci-
mento... Se você quer uma coisa grande, bem-vindo ao mundo do
Dreamweaver.
Tadeu Carmona
iniciais.indd 4 5/6/2006 19:04:18

Sumário
Capítulo 1 – Introdução .........................................6
Capítulo 2 – Iniciando o Dreamweaver ..................9
Capítulo 3 – Trabalhando com textos ....................17
Capítulo 4 – Trabalhando com imagens .................24
Capítulo 5 – Tabelas ...............................................29
Capítulo 6 – Folhas de estilos ................................45
Capítulo 7 – Modelos e bibliotecas ........................52
Capítulo 8 – Molduras ............................................64
Capítulo 9 – Camadas ............................................71
Capítulo 10 – Links.................................................79
Capítulo 11 – Interatividade ..................................86
Capítulo 12 – Formulários .....................................96
Capítulo 13 – Criando banners ..............................107
Capítulo 14 – Editando códigos HTML ...................115
Capítulo 15 – Publicando seu site ..........................123
iniciais.indd 5 5/6/2006 19:04:18

Introdução
Antes de começarmos a elaborar páginas na Web, é importante
ter conhecimento de alguns conceitos que podem servir de base
para todo o trabalho. O primeiro, e o mais importante, é: qual a fina-
lidade de utilizar o Dreamweaver, sendo que posso criar páginas em
HTML sem ter que gastar tanto com software?
A resposta é simples. O Dreamweaver, além de ser um editor de
HTML, fornece recursos de projetos diferenciados que permitem co-
dificar e desenvolver páginas, sites e aplicações Web. E tudo isso
sem considerar que ele auxilia na construção de aplicações dinâmi-
cas mediante bancos de dados nas linguagens de servidor, como o
ASP, ASP.NET, PHP, ColdFusion e JSP.
Para quem tem conhecimentos em HTML, o Dreamweaver per-
mite manipular e codificar de forma rápida todos os projetos, já que
para codificar nessa linguagem é preciso não esquecer de inicializar
e finalizar tags.
Conceitos básicos
Ao longo de todo o livro, falaremos muito sobre sites, páginas

e outros conceitos relacionados à Internet. Portanto, é melhor ir se
familiarizando com alguns termos:
• HTML (HyperText Markup Language): linguagem utilizada para
inserir textos na Internet. É definida em tags, ou marcas, que indicam
o que é necessário na página. Essas tags sempre aparecem entre os
símbolos < >, como, por exemplo, <b> Palavras em negrito</b>.
Ao nos depararmos com o código, o HTML dá início ao recurso ne-
grito e finaliza o comando. Nesse caso, </b> finaliza o recurso de
exibição em negrito;
Nota: toda tag deve ser iniciada e finalizada.
• Hipertexto: conceito que define a navegação entre segmentos

de textos fora de uma seqüência linear. Na verdade, é como um tex-
to interligado a diversos conteúdos (links);
• Hipermídia: associação entre elementos de mídia, como tex-
tos, fotografias, sons e vídeos. Tais elementos possuem relação com
Treinamento prático em Dreamweaver

6
cap01.indd 6 6/6/2006 11:12:31

o tema escolhido. Em um site de pesquisa, por exemplo, a partir de
um clique em um determinado assunto, podemos disponibilizar ou-
tros pontos de vista sobre o tema;
• Web: é a forma como nos referimos a World Wide Web, a fa-
mosa WWW. Se buscarmos apoio na tradução da palavra, teríamos
teia, o que não deixa de ser verdade, já que se trata de uma teia de
informações difundida mundialmente;
• Páginas: são arquivos que armazenam um conjunto de infor-
mações. Normalmente, possuem a extensão .html ou .htm;
• Site: local na Internet em que são armazenadas e disponibiliza-
das as Webs. Trata-se de um conjunto de Webs armazenadas em um
ou vários computadores;
• Home page: é a primeira página, também conhecida como pá-
gina de abertura. Pode conter ou não links inseridos a fim de levar o
usuário a outras páginas, assim como um índice em um livro;
• Web server: servidor da Web equipado com software adequa-
do para armazenar as Webs de uma pessoa ou empresa, gerenciando
todo o acesso ao site. Sempre que você criar um site, deverá disponi-
bilizá-lo em um servidor de acesso que irá, de fato, colocá-lo no ar;
• Navegador Web: software que permite aos usuários navega-
rem pela Web. O mais conhecido é o Internet Explorer;
• Web designer: profissional responsável por projetar todo o sis-
tema de Webs;
• Website: conjunto de páginas existentes em um servidor;
• Site local: arquivos localizados em uma determinada pasta na
unidade de disco, servindo de espelhos ao site remoto;
• Site remoto: site do Web server que todos os visitantes vão
acessar. Isso significa que foram feitos os “uploads” de cada infor-
mação existente em sua pasta-raiz para o servidor.
Criando um visual
Antes de utilizar qualquer tipo de software é importante pegar

uma folha e fazer um rascunho de todo o layout de seu site, definin-
do como os elementos devem ser distribuídos na página inicial e es-
colhendo todos os tópicos, imagens e sons que pretende visualizar.
Para tanto, faça um desenho de toda essa organização por meio
de links, ou seja, desenhe toda a sua estrutura, qual página levará à
outra. Veja um exemplo de disponibilização das informações:
Introdução
7
cap01.indd 7 6/6/2006 11:12:37

Figura 1.1.
Enumere todas as páginas que devem ser incluídas, assim como

as que devem fazer parte do menu e da área de links. Dessa forma,
você não se perde, pois definiu os tópicos principais de sua página e
de todas as outras ligadas a ela.
Agora sim você pode pôr a mão na massa. Para isso, nos próxi-
mos capítulos exploraremos o Dreamweaver e todas as suas ferra-
mentas.

8
cap01.indd 8 5/6/2006 14:38:42

Iniciando o Dreamweaver
Por padrão, o Dreamweaver está localizado na pasta Macrome-
dia. Portanto, caso não possua um atalho na área de trabalho, você
deve utilizar o menu Iniciar > Todos os programas > Macrome-
dia > Macromedia Dreamweaver MX 2004 para iniciar a utilização
do aplicativo.
Ao abrir o Dreamweaver pela primeira vez, será exibida uma cai-
xa de diálogo que permite ao usuário escolher qual o layout da área
de trabalho. Vejamos nossas opções:
Figura 2.1.
• Design: é a área de trabalho integrada, na qual a janela

Document e todos os painéis são ligados por uma janela de aplica-
ção maior. Nesse caso, os painéis estarão localizados à direita da
tela. É o layout mais recomendado para todos os tipos de usuários;
Figura 2.2.
9
cap02.indd 9 6/6/2006 11:13:48

• Code: é a mesma área de trabalho, mas, nesse caso, os painéis
estão localizados à esquerda. Por outro lado, a janela Document exi-
be o código. Esse tipo de área de trabalho é recomendado aos usu-
ários já acostumados com códigos e linguagens de programação,
principalmente em HTML.
Figura 2.3.
Para ocultar a página de abertura que aparece sempre que o

Dreamweaver é carregado, use a opção Don´t show again. Se mu-
dar de idéia, use o menu Edit > Preferences e ative a opção Show
start page.
Para iniciar o Dreamweaver, utilize a opção Design e um clique
em OK.
Criando uma página em branco
Para verificar todos os elementos da área de trabalho (workspace),

devemos criar uma página em branco. Para tanto, siga o menu File >
New; será apresentada a janela New Document. Isso feito, simples-
mente ative a opção Create, sem escolher qualquer outra opção,
para visualizar a área de trabalho.

10
cap02.indd 10 6/6/2006 11:13:48

Figura 2.4.
Nota: para fechar o documento atual, siga o menu File > Close
ou utilize o atalho Ctrl + W.
A área de trabalho
Figura 2.5.
Vejamos os elementos encontrados na área de trabalho:

• Barra de ferramentas Insert: armazena os atalhos (botões) que
permitem a inserção de vários objetos, tais como imagens, tabelas,
camadas e outros. Possui várias categorias, de acordo com o objeto
aplicado no documento, que são alteradas conforme utilizamos a
seta voltada para baixo ao lado da opção Common. Veja as opções
da barra Insert:
11
cap02.indd 11 5/6/2006 14:42:55

Figura 2.6.
• Barra de ferramentas Document: organiza atalhos (botões) que

permitem visualizar o documento de forma diferente. São eles os
modos Code, Design e Split, que contém as duas visualizações e
todas as opções de visualização do documento e da transferência
entre o site remoto e local;
• Barra de ferramentas Standard: contém atalhos com opera-
ções básicas do menu, tais como criar um novo arquivo, salvar, re-
cortar, colar e outros;
• Barra de status: guarda todas as informações sobre o documen-
to em uso, como o seletor de tag, tamanho da janela, do documento
e tempo estimado de download;
• Janela Document: exibe o documento atual;
• Inspetor Properties: exibe todas as propriedades dos objetos
selecionados na janela do documento. Permite, também, a alteração
de cada uma das propriedades;
• Grupo de painéis: conjunto de painéis agrupados sob um tí-
tulo. Esses painéis podem ser deslocados na tela e têm a forma de
janelas.
É importante que antes de dar início à criação do site seja feita

uma pasta na área de trabalho do Windows capaz de armazenar to-
dos os objetos e páginas do site. Como vimos, essa pasta vai conter
o site local que futuramente servirá para passar as informações ao
servidor da Web que você utiliza.

12
cap02.indd 12 5/6/2006 14:42:55

Criando um site local
Nessa etapa, utilizaremos o Assistente de criação para nos ajudar

na criação de um site local. Para isso, abra o menu Site > Manage
Site. Observe a caixa de diálogo que será aberta:
Figura 2.7.
Utilize o botão New e a opção Site para visualizar a janela de de-

finição de seu site:
Figura 2.8.
Na primeira etapa, deve ser definido o nome do site. Para tanto,

digite MeuSite e pressione o botão Next. Observe a janela que será
aberta:
Figura 2.9.
13
cap02.indd 13 5/6/2006 14:42:56

A segunda etapa irá perguntar ao usuário se ele deseja trabalhar
com uma tecnologia de servidor ou se o site será estático, ou seja,
sem a tecnologia de um servidor; para isso, use a opção No, I do not
want to use a server technology e pressione Next novamente.
Nessa etapa você deve informar como deseja trabalhar com os ar-
quivos, dos quais, por padrão, faz-se cópias locais na máquina e, em
seguida, upload no servidor (Edit local copies on my machine, then
upload to server when ready). Também deve definir qual o local em
que o site será armazenado, ou seja, o nome da pasta-raiz com todos
os elementos do site. Caso queira alterar a localização, use a opção
representada pela pasta amarela ao lado do caminho atual e indique
a nova pasta. Para concluir, pressione o botão Salvar.
Figura 2.10.
Ao pressionar o botão Next você deve indicar se irá se conectar

ao servidor remoto. Nesse caso, use a opção Nome, pois o site re-
moto será configurado logo adiante.
Figura 2.11.

14
cap02.indd 14 5/6/2006 14:42:56

A última caixa de diálogos vai exibir as informações de configu-
ração de seu site, tais como nome, local do site, acesso remoto e
teste do servidor. Para finalizar, pressione o botão Done para que o
gerenciador dos sites seja finalizado:
Figura 2.12.
Pressione o botão Done para que seu site seja criado. Note que
o painel File contém a informação do nome de seu site, bem como
a sua localização:
Figura 2.13.
Criando uma página básica

Para criar uma nova página em seu site, siga o menu File > New
e clique na opção Basic Page na lista de categorias e em HTML na
coluna com o tipo de página básica desejada. Depois, pressione o
botão Create.
Crie o hábito de salvar suas páginas logo após a criação, ou seja,
não espere para salvar até inserir textos e imagens. Dessa forma,
ao importar imagens ou textos, todos os caminhos que fazem refe-
15
cap02.indd 15 5/6/2006 14:42:56

rência à sua localização serão criados nos locais corretos. Para sal-
var, use o menu File > Save ou o atalho Ctrl + S e indique o nome
da página.
Algumas dicas sobre nomes de páginas
Por padrão, todo arquivo salvo possui a extensão .htm, mas, se

você quiser, é possível gravar com a extensão .html; o Dreamweaver
não fará distinção alguma. No entanto, é preciso um certo cuidado com
a criação do nome do arquivo. Para isso, leve em conta o seguinte:
• Não utilize os caracteres especiais, tais como %, #, &, *, >, <,
?, }, {, !, @ e [;
• Procure não utilizar acentos, pois a maior parte dos sistemas
operacionais não reconhecem esses caracteres;
• Para cada plataforma utilizada, o nome de um arquivo será
diferente. No Windows, por exemplo, um nome como INDICE.HTM
será visualizado de outra maneira em plataforma Unix, em que é fei-
ta distinção entre letras maiúsculas e minúsculas. O ideal é nomear
com todos os caracteres em minúscula;
• Não utilize espaços em branco. Uma boa prática é utilizar ca-
racteres de sublinhado ou hífens para simular espaços, como, por
exemplo, primeira_pagina.htm;
• Evite utilizar números como nomes de arquivos.
Informando o título do site

Sempre que uma página é visualizada, no topo da janela o nave-
gador irá exibir o título da página que, por padrão, tem o nome do
seu site. Para atribuir um título, digite-o na opção Title e pressione
a tecla Enter. Caso a barra de ferramentas do documento não esteja
sendo visualizada, use o menu View > Toolbars > Document.
Figura 2.14.

16
cap02.indd 16 5/6/2006 14:42:56

Trabalhando com textos
Agora, você já sabe como criar uma página, portanto, chegou a
hora de adicionar conteúdo, ou seja, inserir elementos de textos,
imagens e de trabalhar com cores e formatações.
Inserindo texto
Para inserir um texto, digite-o diretamente no local em que achar

apropriado. Digite o texto e pressione a tecla Enter para mudar
de linha.
Alterando a aparência do texto
Para alterar a aparência do texto, é necessário, em primeiro lugar,

selecioná-lo. Para definir suas propriedades, trabalhe com a janela
Properties:
Figura 3.1.
Com o inspetor de propriedades, você pode alterar a fonte utili-

zando a opção Font, e o tamanho, com a opção Size. Para texto em
negrito e itálico, pressione os botões representados pelas letras B e
I, respectivamente.
Outros estilos podem ser alterados quando utilizamos o menu
Text > Style e clicamos em uma das opções oferecidas.
Trabalhando com formatos de cabeçalhos
Na opção Format, você encontrará seis níveis de cabeçalhos, no-

meados de Heading 1 a Heading 6.

17
cap03.indd 17 5/6/2006 14:59:10

Figura 3.2.
Ao utilizar um estilo de cabeçalho, o Dreamweaver o exibe com

fontes maiores do que o corpo do texto, gerando um espaço logo
abaixo do mesmo.
É importante saber que, ao escolher uma fonte, ela deve estar
instalada no computador do usuário que visualiza a página. Também
deve-se levar em conta que cada usuário pode alterar o tamanho de
sua tela, a cor de seu texto bem como o tamanho da fonte emprega-
da na exibição das páginas, portanto, o modo como o tipo de carac-
tere é exibido em sua tela pode mudar de um usuário a outro.
Devido a esse fato, a fonte que você escolher deve estar insta-
lada na máquina de todo mundo. As fontes instaladas instruirão o
navegador para que sejam feitas as mudanças do texto para outra
fonte, ou seja, se ao escolher uma determinada fonte ela não estiver
disponível em seu computador, automaticamente o navegador fará
uma segunda escolha e, caso essa segunda escolha não se encon-
tre, o navegador procurará uma terceira escolha. Se nenhuma delas
estiver instalada no computador do usuário, será utilizada uma fon-
te-padrão.
Para escolher a lista de fontes, você deve abrir o menu Text >
Font > Edit Font List. Observe a caixa de diálogo:
Figura 3.3.

18
cap03.indd 18 5/6/2006 14:59:11

Nela você encontra uma lista de combinações de fontes e pode
selecionar as que deseja visualizar por meio da opção Available
fonts. Escolha a fonte desejada e pressione <<. Para remover uma
fonte, utilize o sinal de subtração (-) da seção Font list.
Lembre-se de que as fontes sem serifa, como a Arial e Verdana,
facilitam a leitura na tela do computador, ao contrário das que pos-
suem serifa, como a Times New Roman e a Script.
Figura 3.4.
Alterando a cor
Para alterar a cor dos seus textos, use a opção Text color pre-
sente no inspetor de propriedades. Uma paleta com 216 cores será
apresentada. Ao dar um clique sobre uma cor, automaticamente o
Dreamweaver vai preencher a opção ao lado com um código hexa-
decimal.
A forma como esta tabela funciona não é nenhum enigma. Basta
saber que cada cor usa uma tabela RGB – vermelho (Red), verde
(Green) e azul (Blue). O sistema de numeração hexadecimal tem por
base 16 pontos, utilizando números de 0 a 9 e letras de A a F. Como
cada cor representa um código de seis dígitos, os dois primeiros re-
presentam a quantidade de vermelho, os dois seguintes, a quantida-
de de verde e os dois últimos, a quantidade de azul. Como exemplo,
imagine o código #00FF00. Nele, indicamos 00 de vermelho, FF de
verde e 00 de azul, portanto, a cor será um tom de verde. Caso você
já conheça o código hexadecimal que representa a cor, poderá digi-
tá-lo na caixa ao lado da opção Text color.
A barra inspetor de propriedades
Além da definição de fonte e do formato do texto, é possível ali-

nhar e trabalhar com alguns ajustes do parágrafo, utilizando os bo-
tões adequados a essa atividade presentes na barra de inspetor de
propriedades:

19
cap03.indd 19 5/6/2006 14:59:11

Figura 3.5.
Trabalhando com recuos
Digite um parágrafo com mais de uma linha e selecione-o. Para

criar um recuo, utilize o botão que avança a tabulação. Isso fará com
que o texto recue para o próximo ponto de tabulação existente.
Sempre que o botão for pressionado, o seu texto será mais recuado.
Caso queira retroceder para o ponto anterior da tabulação, use o
botão Desfazer recuo. Observe um exemplo:
Figura 3.6.
Em editores de textos, tais recuos são conhecidos como enden-

tações, utilizadas de forma a destacar um ou mais parágrafos, dife-
renciando-os dos demais. Caso prefira, você pode utilizar os menus
Text > Indent para o recuo e Text > Outdent para retroceder os
recuos criados.
Trabalhando com listas
É possível criar parágrafos com listas numeradas ou com marca-

dores, fazendo uso dos botões presentes no inspetor de proprieda-

20
cap03.indd 20 5/6/2006 14:59:11

des. Para criar uma lista numerada, dê um clique em qualquer ponto
do parágrafo e siga o menu Text > List > Ordered List ou use o ata-
lho para lista numerada na barra de propriedades.
Para listas com marcadores, siga o menu Text > List > Unordered
List ou o atalho da barra de propriedades.
Para definir o estilo da numeração ou dos marcadores, siga o
menu Text > List > Properties em que você irá encontrar:
• List type: tipo da lista, se numerada, com marcadores ou sem
definição;
• Style: estilo da numeração ou dos marcadores;
• Start count: quando uma lista é numerada, é possível indicar
qual deve ser o número inicial da lista. Dessa forma, ao pressionar a
tecla Enter após cada um dos parágrafos, o Dreamweaver irá nume-
rá-los na seqüência;
• New style: permite definir o estilo do próximo parágrafo, ou
seja, do próximo item da lista.
Observe a caixa de diálogo:
Figura 3.7.
Listas de definições
Alguns dos parágrafos devem possuir termos importantes e de-

finições desses termos, tais como em um cardápio: você encontra o
nome do prato e, logo a seguir, os ingredientes (a definição) empre-
gados. Nesse caso, tanto o termo importante quanto a sua definição
devem ficar em parágrafos separados, sem as quebras de linhas.
Saiba como fazer isso:
1. Digite um termo como, por exemplo, Filet à parmegiana.

21
cap03.indd 21 5/6/2006 14:59:11

2. Siga o menu Text > List > Definition e pressione a tecla Enter.
3. O cursor irá se mover para a próxima linha sem criar parágra-

fos diferentes.
4. Digite os ingredientes do prato.
Repare que o termo (Nome do prato) está na margem esquerda e

todas as suas definições (Ingredientes) estão endentadas nas linhas
seguintes.
Figura 3.8.
Importando texto
Caso você tenha digitado todo o texto de sua página em um proces-

sador, basta selecioná-lo, copiá-lo e colá-lo. O Dreamweaver executará
as ações de arrastar e soltar dos processadores mais utilizados.
Se houver necessidade, o Dreamweaver pode abrir arquivos que
foram criados e salvos como textos (.txt) ou como páginas da Web
(.html) pelos processadores. Esses arquivos serão abertos em novas
janelas e determinados trechos podem ser copiados e colados para
a página atual.
Após colar o texto, você pode trabalhar com os recursos de for-
matação e recuos de parágrafo, como feito no caso da digitação di-
reta, utilizando a janela de propriedades.
No caso de você ter importado um arquivo de texto criado no Ma-
cintosh, os parágrafos serão apresentados em uma só linha, pois o
Dreamweaver depende de um caractere de avanço que, nesse caso,
está ausente.
Para alterar o formato dos arquivos de textos recebidos pelos
processadores, você deve utilizar o menu Edit > Preferences e a
opção Code Format:

22
cap03.indd 22 5/6/2006 14:59:11

Figura 3.9.
Nesse caso, indique o espaçamento das endentações e, também,

o caractere de quebra de linha (line break type). Dessa forma, o
Dreamweaver poderá reconhecer tal caractere e fazer as quebras de
linhas nos locais apropriados.
Quebra de linhas
Você deve ter reparado que sempre que a tecla Enter é utilizada,
um novo parágrafo é inserido com uma quebra de linha. No caso de
querer uma nova linha sem nenhum espaço entre ela e a anterior,
digite o texto e, logo a seguir, pressione as teclas Shift + Enter para
que ele seja inserido na próxima linha, sem a quebra de parágrafo.

23
cap03.indd 23 5/6/2006 14:59:11

Trabalhando com imagens
Não há nada melhor do que uma imagem para representar suas
idéias, ou “vender seu peixe”, como muitas pessoas dizem. Portan-
to, esqueça os textos extensos e adote a inserção de uma ou mais
imagens, tornando a sua página menos cansativa.
Inserindo imagens
Dê um clique em um parágrafo e siga o menu Insert > Image. A

caixa de diálogos Select Image Source será exibida:
Figura 4.1.
Para que sejam inseridas imagens em arquivos, ative opção File

System em Select file name from e automaticamente serão exibidas
miniaturas da pasta atualmente aberta (Examinar). O Dreamweaver
pode abrir imagens nos formatos GIF, JPG, JPEG e PNG. Você verá
as características da imagem com a opção Image preview, que infor-
mará o tamanho em pixels, formato e tamanho em bytes, bem como
o tempo de abertura.
Caso a imagem escolhida não esteja localizada na mesma pasta
em que sua página está sendo criada, automaticamente o Dream-
weaver vai informar e perguntar se você gostaria de criar uma cópia
da imagem para a pasta atual. Ao pressionar o botão Sim, é preciso
informar a pasta e o nome da imagem inserida. Essa é uma forma de
organizar as informações em seu site, e também a melhor maneira
de fazer o download de informações em uma única pasta.

24
cap04.indd 24 5/6/2006 15:06:08

Figura 4.2.
Ao gravar a página, o Dreamweaver não faz referências; ele subs-

titui o nome do caminho (path) da localização da imagem em seu
computador no lugar de criar um link rápido. Por isso, é importante
salvar o documento antes de inserir as imagens. Se a imagem esti-
ver fora da pasta em que seu site está, você verá um alerta referente
à inexistência do arquivo de imagem.
Na caixa de diálogos Select Image Source, encontramos a opção
URL, utilizada para sites dinâmicos, ou seja, sempre que seu documen-
to é executado em um servidor de aplicativos. Em nosso caso, não uti-
lizamos essa opção por não estarmos criando um site dinâmico.
A opção Relative to está configurada por padrão como Document,
o que permite escolher como o Dreamweaver faz referências às ima-
gens. Elas podem ser relativas ao documento, sendo indicado o cami-
nho para a imagem com base na localização do documento, ou rela-
tivas à raiz do site, em que o caminho é indicado para a imagem com
base na localização do documento HTML relativo à raiz de seu site.
Quando o site é grande, ou caso pretenda mover as páginas com certa
freqüência, o ideal é utilizar a opção relativa à raiz do site (Site Root).
Um atalho para a inserção de imagens é a barra Insert, na qual
você encontrará o seguinte botão:
Figura 4.3.
Observação: em um site, o melhor formato para uma imagem

é o tipo GIF, pois uma imagem JPEG exibe características em
demasia, como pequenos quadros carregados de informações
sobre a cor. Sua qualidade pode ser melhor, mas, em compen-
sação, o tamanho do arquivo é muito maior.
Redimensionar imagens
Após inserir a imagem, clique nela para observar a seguintes

opções na barra de propriedades:

25
cap04.indd 25 5/6/2006 15:06:08

Figura 4.4.
Figura 4.5.
Para redimensionar, dê um clique em uma das alças de seleção

(quadrinhos pretos ao redor da imagem) e arraste para a esquerda
ou direita até torná-la maior. Nesse caso, as especificações, definidas
em largura e altura da imagem, automaticamente serão redefinidas,
mas, em compensação, a qualidade também se altera. A resolução
da tela, por padrão, é de 72 dpi (dts por inch – pontos por polegada),
sendo que essa não é a resolução ideal para exibir imagens no tama-
nho que você alterou. Portanto, a exibição da imagem (download)
demoraria muito mais tempo. Você somente alteraria o tamanho na
tela, sem redimensionar o arquivo. Para isso (ajustar o tamanho da
imagem), o ideal seria utilizar softwares de edição para garantir que
seu tamanho e qualidade sejam melhores.
Editando a imagem
Para melhorar a aparência da imagem utilizando softwares grá-

ficos, é possível utilizar a barra de propriedades Edit presente na
barra Properties, que contém os seguintes elementos:
Figura 4.6.
Vinculando imagens a documentos
As imagens inseridas podem guiar o visitante a páginas específi-

cas do site, funcionando como links para botões de navegação. Para
criar esse link, dê um clique na imagem e utilize a pasta existente à

26
cap04.indd 26 5/6/2006 15:06:08

direita do campo Link. Será exibida a caixa de seleção de arquivo.
Indique qual arquivo deve ser aberto e pressione OK.
Figura 4.7.
Dessa forma, sempre que a página for aberta e o visitante clicar

na imagem, automaticamente será aberta a página de link escolhida
por você.
Vinculando arquivos no painel Files
Para criar links com o painel de arquivos (Files), você deve proce-
der da seguinte forma:
1. Clique na imagem que deverá fazer referência a um documento

ou arquivo.
2. Abra o painel de arquivos seguindo o menu Window > Files.
3. Do lado direito da tela, será aberto o painel com todos os do-

cumentos e imagens de seu site.
Figura 4.8.
4. Clique na imagem.
5. Na barra de propriedades, pressione o ícone Point to file, ao

lado do campo Link.

27
cap04.indd 27 5/6/2006 15:06:09

6. Arraste o ponteiro até o painel Files.
7. Na lista Local View, indique o arquivo desejado.
Figura 4.9.
8. Ao utilizar a opção Map View no painel Files, o seu site será

atualizado e você verá todos os links existentes:
Figura 4.10.

28
cap04.indd 28 5/6/2006 15:06:09

Tabelas
Para facilitar o controle de textos e imagens em sua página, é pos-
sível fazer uso de uma ferramenta poderosa, as conhecidas tabelas.
Elas permitem enquadrar textos ao redor de uma imagem, ajustar
o alinhamento e, também, criar blocos de textos com endentações.
Com esses recursos, você terá um controle maior sobre a posição
dos elementos da página.
Criando tabelas
Para criar uma tabela, abra o menu Insert > Table, ou utilize o
atalho da barra Insert (Figura 5.1).
Figura 5.1.
Será aberta a seguinte janela:
Figura 5.2.
Nessa caixa de diálogo, encontramos as opções listadas:
Opção Descrição
Rows Número de linhas.

Columns Número de colunas.
Table width Largura da tabela.
Tabelas
29
cap05.indd 29 5/6/2006 17:05:18

Opção Descrição
Border thickness Espessura da borda em pixels.

Cell padding Número de pixels existentes em uma borda da célula.
Cell spacing Número de pixels entre as células adjacentes.
Header Insere linha para o título principal.
Caption Título que será adicionado à tabela.
Align caption Alinhamento do título na tabela.
Summary Observações que você insere para determinar a utilida-
de da tabela.
Tabela 5.1.
Ao pressionar a tecla Enter, a tabela será gerada:
Figura 5.3.
Nesse exemplo, você gerou uma tabela com quatro linhas (row)
e quatro colunas (column). A interseção de uma coluna com uma
linha é conhecida como célula. Portanto, sua tabela possui 13 cé-
lulas, pois a área em que o título foi digitado (caption) abrange so-
mente uma célula.
Fazendo ajustes no layout
É possível ajustar a largura da tabela utilizando os ponteiros

existentes na borda das células. Mantenha o botão do mouse pres-
sionado em um dos ponteiros e arraste até a largura desejada.
Rapidamente, o Dreamweaver vai informar quais são as novas di-
mensões de sua tabela.
Para ajustar a largura de uma coluna, mova o ponteiro do mouse
sobre ela e note o aparecimento de setas voltadas para a direita e
para a esquerda. Mantenha o botão pressionado enquanto arrasta
para a direita, a fim de aumentar, ou para a esquerda, a fim de dimi-
nuir a largura da coluna.

30
cap05.indd 30 5/6/2006 17:05:31

Inserindo textos
Para inserir um texto, posicione o cursor na célula em que deseja

visualizá-lo e, simplesmente, digite-o. Para mover de uma célula a
outra, pressione a tecla Tab. Ao mover o cursor para a última célula
da tabela e pressionar a tecla Tab, automaticamente o Dreamweaver
gera uma nova linha com o mesmo número de colunas da linha an-
terior. Ou seja, o perfil das células anteriores também será levado
para a nova linha.
Inserindo linhas e colunas
Para inserir uma linha, você deve proceder da seguinte maneira:
1. Posicione o cursor sobre uma célula.
2. Pressione o botão direito do mouse.
3. Clique na opção Table.
4. Selecione a opção Insert Row, para que seja acrescentada uma

linha acima da posição atual do cursor.
Figura 5.4.
Para inserir colunas, dê um clique com o botão direito em alguma

célula e siga o menu Table > Insert Column para acrescentar uma
coluna à esquerda da posição do cursor.
Tabelas
31
cap05.indd 31 5/6/2006 17:05:31

Inserindo mais de uma linha ou coluna
No tópico anterior, você acrescentou somente uma linha à tabela.

E, como a colocou acima da posição atual do cursor, é fundamental
posicioná-lo em uma célula estratégica, pois você poderá inserir li-
nhas na posição indesejada.
Caso tenha de inserir mais de uma linha e determinar se devem
ser inseridas acima ou abaixo do cursor, siga o menu Insert > Table
Objects > Insert Row Above (Inserir linhas acima) ou Insert Row
Below (Inserir linhas abaixo).
Para inserir colunas à esquerda ou à direita do cursor, abra o
menu Insert > Table Objects > Insert Column Left (Inserir colunas
à esquerda) ou Insert Column Right (Inserir colunas à direita).
Um atalho para esses comandos é o seguinte caminho:
1. Clique na célula desejada com o botão direito do mouse.
2. Selecione a opção Table.
3. Clique em Insert Rows or Columns.
4. Especifique o que deseja inserir, a quantidade e o local da in-

serção.
Figura 5.5.
Opção Descrição
Insert Para determinar o que deseja inserir, se linhas (rows) ou

colunas (columns).
Number of rows Especifique o número de linhas ou colunas que deseja
inserir. Você pode digitar a opção desejada ou utilizar o
controle deslizante para determinar o número correto.

32
cap05.indd 32 5/6/2006 17:05:32

Opção Descrição
Where Determine a posição em que as linhas ou colunas devem

ser inseridas: Above the selection, acima da posição do
cursor, Below the selection, abaixo.
Tabela 5.2.
Excluindo uma linha ou coluna
Para excluir uma linha, posicione o cursor na linha desejada, pres-

sione o botão direito do mouse e siga o menu Table > Delete Row.
Nesse caso, todas as células da linha serão excluídas automatica-
mente. Para excluir uma coluna, dê um clique na coluna usando o
botão direito do mouse e abra o menu Table > Delete Column.
Caso queira desfazer a última operação, utilize o menu Edit >
Undo, ou pressione o botão Undo da barra de ferramentas:
Figura 5.6.
Mesclando células
Quando inserir título, para que ele seja exibido exatamente no

centro das células, você deve mesclar as células adjacentes. Dessa
forma, as células tornam-se uma só. Saiba como fazer isso utilizando
o exemplo seguinte, baseado na Figura 5.7:
Figura 5.7.
Tabelas
33
cap05.indd 33 5/6/2006 17:05:32

1. Você deve selecionar a célula na qual o texto está digitado e
todas as células ao lado utilizando a tecla Shift e as setas à direita.
2. Use o menu Modify > Table > Merge Cells ou o atalho das
teclas Ctrl + Alt + M.
3. Outra forma de mesclar é selecionar as células, usar o botão

direito do mouse e as opções Table > Merge Cells.
Figura 5.8.
Dividindo células
Dependendo do trabalho, talvez seja preciso dividir as células em

mais de uma. Para isso, posicione o cursor na célula que será divi-
dida e utilize o menu Modify > Table > Split Cells ou o atalho Ctrl
+ Alt + S.
Especifique o tipo de divisão desejada, se em linhas (row) ou co-
lunas (column), o número de células e pressione OK.
Figura 5.9.
Selecionando células
Posicione o cursor na célula a selecionar e pressione a tecla Ctrl.

Para selecionar mais de uma célula, pressione Ctrl e, logo a seguir,

34
cap05.indd 34 5/6/2006 17:05:32

as teclas Shift e as setas para a direita ou para a esquerda, até sele-
cionar as células desejadas.
Para mesclar ou dividir células, você deve selecionar mais de uma
linha, coluna e, muitas vezes, até mesmo toda a tabela. Vejamos o
que fazer para selecionar células.
Para selecionar toda a tabela, posicione o cursor em sua largura
e selecione a opção Select Table, ou o menu Modify > Table >
Select Table:
Figura 5.10.
Para selecionar uma coluna, faça o seguinte:
1. Posicione o mouse na borda superior de uma coluna:
Figura 5.11.
Tabelas
35
cap05.indd 35 5/6/2006 17:05:32

2. O ponteiro do mouse será alterado para uma seta voltada para
baixo.
3. Selecione a coluna, ou arraste o ponteiro do mouse até selecio-

nar múltiplas colunas.
Para selecionar uma linha, faça o seguinte:
1. Posicione o mouse na borda superior de uma linha.
2. O ponteiro do mouse será alterado para uma seta voltada para

a direita.
Figura 5.12.
3. Selecione a coluna ou arraste o ponteiro do mouse até selecio-

nar várias colunas.
Você pode utilizar o menu contextual (com a largura da tabela ou

da coluna) para selecionar a coluna ou linha desejada:
Figura 5.13.
Caso queira selecionar células não adjacentes, use a tecla Ctrl e

dê um clique em cada uma das células a selecionar:

36
cap05.indd 36 5/6/2006 17:05:32

Figura 5.14.
Propriedades da tabela
Repare que ao selecionar a tabela, a barra Properties exibirá as

seguintes opções:
Figura 5.15.
Vejamos como trabalhar com cada uma das opções:
• Em Table Id, digite um nome para a tabela (Figura 5.16):
Figura 5.16.
• Em Rows, especifique o número de linhas que deseja e, em

cols, o número de colunas (Figura 5.17):
Figura 5.17.
• Especifique a largura na opção W e a altura da tabela na opção

H. Nelas, você poderá alterar as unidades de medida, por padrão
definidas em pixels (Figura 5.18), para porcentagem. Dessa forma,
poderá redimensionar o tamanho levando em conta que a largura e
a altura atuais são de 100%. Para diminuir, digite, por exemplo, 75%,
e reduzirá em 25% o tamanho atual:
Tabelas
37
cap05.indd 37 5/6/2006 17:05:32

Figura 5.18.
• Na opção Cell Pad, especifique o número de pixels entre o con-

teúdo da célula e o limite, assim como a distância entre as paredes
(bordas) da célula e o texto digitado. Na opção CellSpace, você deve
especificar o número de pixels entre cada uma das células da tabela
(distância de uma célula a outra). Observe a Figura 5.19:
Figura 5.19.
• Na opção Bg color, escolha uma cor que vai servir de fundo

para a tabela (preenchimento) e em Brdr color, especifique uma cor
para as linhas de borda da tabela (Figura 5.20):
Figura 5.20.
Algumas vezes, ao definir as bordas das colunas zero, é possível

não visualizar essas bordas. Para isso, ative-as com o menu View >
Visual Aids > Table Border. Dessa forma, fica mais fácil visualizar os
delimitadores de cada célula.
Para alterar o alinhamento da tabela com relação à página, use a
opção Align e escolha o tipo de alinhamento desejado.
Figura 5.21.
Na opção Border, você deve especificar a largura da borda em

pixels.
Inserindo uma imagem no fundo da tabela
Você poderá inserir um logotipo no fundo de sua tabela. Para tan-

to, use a opção Bg Imagem e especifique o nome do arquivo ou, se
preferir, arraste o nome do arquivo, que deve estar na lista de arqui-
vos existentes, para junto dessa opção:

38
cap05.indd 38 5/6/2006 17:05:32

Figura 5.22.
Dependendo do tamanho da imagem, ela será exibida em forma

de azulejos, ou seja, uma ao lado da outra, e, portanto, você poderá
ter um efeito desastroso:
Figura 5.23.
Outro problema é que a imagem pode sobrepor o texto digitado

ao exibir o seu site. Portanto, nem sempre é o ideal inserir imagens
no fundo das tabelas. É preferível inserir o logotipo em uma deter-
minada célula:
1. Clique na célula desejada.
2. Siga o menu Insert > Image, escolha a imagem desejada e

dê OK.
Alterando o layout de uma ou mais células
Para alterar o layout de várias células, selecione-as e use a barra

Properties, que apresenta as seguintes opções:
Tabelas
39
cap05.indd 39 5/6/2006 17:05:32

Figura 5.24.
Figuras das opções Descrição
Permite alterar o estilo dos textos existentes e

também as fontes utilizadas pelos estilos.
Permite alterar o estilo do parágrafo, seu tamanho

e a cor da fonte utilizada.
Permite apresentar o texto em negrito e itálico.
Permite alterar o alinhamento do texto na célula.
Permite inserir marcadores, numeração e alterar

recuos do texto na célula.
Permite definir o alinhamento horizontal e vertical

do texto com relação à célula. As opções W e H
servem para especificar a largura (width) e altura
da célula (height).
Impede a quebra automática de textos nas linhas.
Permite formatar as células ou linhas selecionadas

como um cabeçalho de tabela. Por padrão, as cé-
lulas apresentadas como cabeçalho (header) são
apresentadas em negrito e no centro.
Permite definir uma imagem de fundo para a célu-

la (Bg), a cor de fundo da célula e a cor da borda
(Brdr).
Tabela 5.3.

40
cap05.indd 40 5/6/2006 17:05:32

Usando layouts predefinidos
Após criar a tabela, é possível utilizar os layouts predefinidos do

Dreamweaver. Para tanto, selecione a tabela e use o menu Commands
> Format Table, escolha o formato desejado e pressione o botão
Apply:
Figura 5.25.
Tornando as colunas em larguras consistentes
O Dreamweaver pode redimensionar a largura no código HTML

para combiná-lo com o aspecto visual da tabela, ou seja, é possível
tornar as células consistentes. Para fazê-lo, clique em uma célu-
la, abra o menu contextual e selecione a opção Make All Widths
Consistent.
Figura 5.26.
Tabelas
41
cap05.indd 41 6/6/2006 11:16:44

Tabelas aninhadas
O Dreamweaver pode trabalhar com uma tabela dentro de outra.

Nesse caso, elas são conhecidas como tabelas aninhadas. Para tan-
to, crie uma tabela e, logo a seguir, posicione o cursor em uma célula
para criar uma nova tabela nessa posição:
Figura 5.27.
Classificando os dados em tabelas
Quando uma tabela tem muitos dados, o Dreamweaver pode

classificá-los, ou seja, pode criar uma ordenação para as linhas de
uma tabela ou de uma coluna. Para tanto, selecione a tabela ou uma
célula e siga o menu Commands > Sort Table:
Figura 5.28.
Opção Descrição
Sort by Permite especificar qual coluna da tabela será classificada.

Order Permite especificar o tipo de classificação (alfabética ou
numérica), bem como a ordem da classificação (ascen-
dente ou descendente).
Then by Permite incluir outra coluna a classificar. Por exemplo, há
várias linhas com a classificação de pescados e, dentro
dessa ordenação, você deseja classificar por porções.

42
cap05.indd 42 5/6/2006 17:05:33

Opção Descrição
Sort includes Inclui a primeira linha da tabela na classificação. Nesse

the first row caso, se a primeira linha tiver o título das colunas, ela será
enviada para outro local após a classificação.
Sort headers Inclui a linha de cabeçalhos de colunas na classificação.
rows
Sort footer rows Inclui as linhas de rodapé na classificação.
Keep all colors Permite manter as cores das linhas da mesma forma após
a classificação.
Tabela 5.4.
Inserindo link com textos
Para inserir um link com outra página, você deve selecionar o

texto que vai armazenar o link e, na opção Link, digitar o nome da
página ou a imagem para a qual deseja fazer um link. Dessa forma,
quando der um clique no texto, será apresentada a imagem ou pági-
na com a qual você faz referência (link). Observe:
Figura 5.29.
Removendo o conteúdo da
célula sem alterar sua estrutura
Ao apagar o conteúdo de uma célula, você pode comprometer toda

a estrutura da tabela. Para evitar esse problema, selecione uma ou
mais células e use o menu Edit > Clear, ou pressione a tecla Delete.
Importando dados
Você pode utilizar tabelas criadas por outros aplicativos, como

o Microsoft Excel ou Microsoft Word, sem ter de digitar todos os
dados novamente. Para isso, siga o menu File > Import, escolha a
Tabelas
43
cap05.indd 43 5/6/2006 17:05:33

opção que for mais conveniente (Excel Document, Word Document
ou Tabular Data), especifique o arquivo a ser importado e pressione
o botão Abrir:
Figura 5.30.
Exportando uma tabela
O processo inverso também pode ser realizado, ou seja, se você

criou uma tabela no Dreamweaver, pode enviá-la ao Microsoft Excel,
por exemplo. Para tanto, faça o seguinte:
1. Selecione a tabela.
2. Use o menu File > Export > Table. Será aberta seguinte janela:
Figura 5.31.
3. Indique as opções de exportação, como o delimitador dos da-

dos (Tab, espaço, vírgula, ponto-e-vírgula), como devem ser trata-
das as quebras de linhas (se no padrão Windows, Macinstosh ou
Unix) e pressione Export.
4. Será aberta a caixa de diálogos Export Table As.
5. Indique o nome que a tabela deve receber e pressione o botão

Salvar.

44
cap05.indd 44 6/6/2006 11:17:20

Folhas de estilos
O Dreamweaver nos permite trabalhar com padrões técnicos da

Web, os conhecidos layouts CSS.
Tais layouts surgiram em 1996 por meio de um órgão do governo
americano que aprovou a primeira versão do Cascading Style She-
ets, o principal método para normatizar elementos de um site. Os
layouts CSS substituem os antigos comandos <font> por folhas de
estilos, facilitando o gerenciamento de textos em uma página.
No Dreamweaver, é permitido usar o CSS para adicionar blocos
de conteúdos e camadas (layers) para criar seu próprio layout.
Ao utilizar o CSS, o Dreamweaver apresenta réguas e guias que
facilitam nossa orientação durante a criação da página.
Tipos de estilos utilizados no Dreamweaver
O Dreamweaver possui três tipos de estilos CSS. Observe:

• Custom CSS Styles: também conhecidos como Class Style.
Permitem a aplicação de atributos do estilo aos blocos de textos;
• HTML tag styles: permitem redefinir a formatação de determi-
nada tag, tais como <font>, <h1> e outros;
• CSS selector styles: permite redefinir a formatação de uma de-
terminada combinação de tags em uma célula da tabela, como, por
exemplo, td h1, aplicada sempre que um cabeçalho h1 for utilizado
em uma tabela.
Criando páginas com os estilos
Para criar uma página em branco utilizando o CSS use o menu

File > New. Na lista Category, escolha a opção Page Design (CSS) e
escolha o layout da página na opção Page Design:
Figura 6.1.
Folhas de estilos
45
cap06.indd 45 5/6/2006 17:24:01

Ao pressionar o botão Create, o novo documento aparecerá na
janela. Aproveite para salvar o arquivo como Index.htm mediante o
menu File > Save.
Caso o arquivo contenha links para outras páginas, será apresen-
tada a caixa de diálogos Copy Dependent Files, exibindo uma lista
de cada um dos arquivos dependentes que devem ser salvos:
Figura 6.2.
Pressione o botão Copy files to, navegue até a pasta que possui
as imagens e pressione Copy para que todos os arquivos sejam gra-
vados junto com a página.
Páginas baseadas em templates
É possível criar mais de um tipo de documento no Dreamweaver.

Para tanto, vamos criar uma nova página baseada em um templa-
te, que servirá como um modelo para outras páginas criadas. Saiba
como fazer:
1. Crie um novo documento em branco.
2. Abra o menu File > Save As Template.
3. Na opção Site, digite o nome de seu site, no caso, poderá ser

O Chef em casa.
4. Informe o nome do modelo na opção Save as e pressione o

botão Save.
Figura 6.3.

46
cap06.indd 46 5/6/2006 17:24:19

Criando documentos baseados em templates
Para utilizar o modelo criado anteriormente como template, siga o

menu File > New. Dê um clique na guia Templates, selecione o templa-
te que você pretende utilizar (Modelo1) e pressione o botão Create.
Figura 6.4.
Após utilizar o modelo, a página em branco se transformará em

um layout definido anteriormente, sem a necessidade de alterar e
criar novas tabelas:
Figura 6.5.
O painel CSS
Para visualizar o painel CSS, abra o arquivo com a folha de estilos,

como, por exemplo, o arquivo Index.htm, e siga o menu Window >
CSS Styles; o painel aparecerá no lado direito de sua página.
Figura 6.6.
Folhas de estilos
47
cap06.indd 47 5/6/2006 17:24:19

Dê um clique com o botão direito do mouse sobre um estilo exis-
tente e você verá o menu contextual:
Figura 6.7.
Atalhos do painel de estilos
Figuras Nomes Descrição
Attach Style Sheet Abre a caixa Link external style sheet, que
permite selecionar uma folha de estilos ex-
terna a ser importada do documento atual.
New CSS Style Abre a caixa New CSS Style, que permite se-
lecionar o tipo de estilo a ser criado, se Class
style, HTML tag ou CSS selector.
Edit Style Sheet Abre a caixa CSS Style definition, que per-
mite editar qualquer estilo existente no do-
cumento atual.
Delete CSS Style Remove o estilo selecionado do painel CSS
Styles, assim como a formatação de qual-
quer elemento nele aplicado.
Tabela 6.1.
Criando um estilo CSS
Com a página Index aberta, utilize o botão New CSS Style:
Figura 6.8.

48
cap06.indd 48 5/6/2006 17:24:20

Na tabela seguinte, as opções da janela:
Opção Descrição
Name Informe o nome do estilo. Sempre que o estilo for do tipo

Class, é importante iniciar o nome com um ponto.
Selector Type Tipo de estilo CSS (classe) personalizado, que pode ser
Class, Tag (como em HTML) ou Advanced (contém códigos,
seletores contextuais e outros).
Define in Permite definir se as folhas serão aplicadas em um novo ar-
quivo de folha de estilo ou somente no documento atual.
Tabela 6.2.
Defina as opções da seguinte forma: Name como Títulos, Selec-

tor Type como Class e Define in como This document only. Pressio-
ne OK para concluir.
Será apresentada a caixa de diálogos CSS Style Definition, onde
devem ser informadas as opções de Type (tipo de fonte utilizada),
Background (fundo da página), Block (controle de blocos de textos,
tais como alinhamentos verticais, espaçamento e outros) Border (es-
pecificações para as bordas da página e tabelas), List (formatações
para textos existentes no formato de listas), Positioning (posiciona-
mento de imagens e tabelas) e Extensions (controle para quebra de
páginas).
Após entrar com todas as especificações desejadas para cada
uma das opções, pressione o botão OK.
Figura 6.9.
Folhas de estilos
49
cap06.indd 49 5/6/2006 17:24:20

Anexando folhas de estilos externas
Você poderá ter folhas de estilos criadas em outros documentos.

Tais folhas podem ser importadas para o documento atual. Para isso,
faça o seguinte:
1. Abra o menu Windows > CSS Styles para visualizar a caixa de

estilos aberta.
2. Pressione o botão Attach Style Sheet e será apresentada a

seguinte janela:
Figura 6.10.
3. Clique na opção Link.
4. No rodapé da caixa de diálogos, você deve ativar a opção

Sample Style Sheet para que seja aberta a caixa de estilos existentes:
Figura 6.11.
5. Escolha um dos estilos apresentados e pressione OK.

50
cap06.indd 50 5/6/2006 17:24:20

Editando uma folha de estilo
Você pode fazer alterações nas folhas de estilos. Veja como é fácil:
1. No painel de folhas de estilos, dê um clique no nome da folha

de estilo que deseja alterar.
2. Pressione o botão Edit Style Sheet.
Figura 6.12.
3. Clique no estilo que deseja alterar e pressione o botão Edit.
4. Faça todas as alterações necessárias para o estilo.
5. Pressione o botão OK e, logo depois, o botão Done.
6. Pronto, as formatações serão aplicadas.
Folhas de estilos
51
cap06.indd 51 5/6/2006 17:24:20

Modelos e bibliotecas
Em capítulos anteriores, você aprendeu a criar estilos com os re-
cursos das folhas de estilos CSS, por isso, agora, acreditamos que
seja um bom momento para nos aprofundarmos em modelos.
Suponha que você tenha um site “grande”, com várias páginas
linkadas em um menu, com cada uma delas representando infor-
mações dos vários departamentos de sua empresa. Portanto, você
depende de cada um dos elementos de sua equipe para atualizar
as informações pertinentes às páginas dos departamentos, e, se-
guramente, cada um dos funcionários possui uma idéia e um layout
diferente para suas páginas.
O ideal é fazer com que cada funcionário tenha a liberdade para
entrar com as informações necessárias, mas que utilizem um estilo
projetado por você, ou seja, está na hora de trabalhar melhor com
modelos. Então, mãos à obra.
Criando modelos
Quando criamos um modelo, a primeira coisa a ser feita é o pro-

jeto da página, isto é, inserir tabelas, camadas, elementos gráficos
e links necessários ao projeto. Após todas as definições, contando
com a estática, apresentação de cores e fontes, use o menu File >
Save as Template. Indique o nome que o novo modelo deve ter e
pressione o botão Save:
Figura 7.1.
Todo arquivo com os dados de uma página é gravado com a ex-

tensão .html. Nesse caso, porém, os modelos são gravados em ar-
quivos com a extensão .dwt, com a localização também em uma
pasta especial, a /Template/information.dwt. É justamente essa a
informação que você visualiza no título de sua janela:
Figura 7.2.

52
cap07.indd 52 5/6/2006 17:42:25

Você também pode dar início ao seu trabalho criando uma pági-
na em branco e, logo em seguida, salvá-la como um modelo. Você
é quem decide a ordem de criação de seus modelos e projetos
de páginas.
Áreas editáveis
Essa é a hora em que vamos definir todos os elementos e áreas

que sua página deve armazenar, o espaço conhecido como área edi-
tável, ou seja, local em que os dados podem ser inseridos.
Por padrão, todas as áreas de um moelo são bloqueadas. Caso
alguma informação tenha de ser inserida, é preciso criar regiões edi-
táveis, portanto, toda informação que não for definida como editável
será automaticamente bloqueada em sua página.
Toda e qualquer alteração na página deve ser feita enquanto esti-
ver trabalhando no modelo original. No entanto, páginas que foram
construídas a partir de modelos criados por você não permitem ne-
nhuma alteração, a não ser nas áreas conhecidas como editáveis.
Criando um título editável
Para melhor exemplificar o título editável, crie uma tabela com

duas colunas e duas linhas.
Na primeira linha, selecione as duas células criadas e mescle-as,
a fim de utilizá-las como área de título. Para isso, selecione as duas
células, clique com o botão direito do mouse sobre elas e siga o
menu Table > Merge Cells.
Com o cursor na primeira linha, criaremos a primeira área editá-
vel. Para isso, use o menu Insert > Templates Objects > Editable
Region. Forneça um nome para a área editável e pressione o bo-
tão OK:
Figura 7.3.
Outra maneira de criar uma área editável é, na barra Insert, pressior-

nar o botão Make Template e, logo após, a opção Editable Region:
53
cap07.indd 53 5/6/2006 17:42:30

Figura 7.4.
Na hora de inserir áreas editáveis e outros elementos, como ima-

gens, o ideal é criar o hábito de não colocar acentos e outros carac-
teres especiais, tais como cedilha (ç), exclamação (!) e outros.
Com o cursor posicionado na célula em que a área editável foi cria-
da, você verá que, na barra de propriedades, aparecerá o seguinte:
Figura 7.5.
Ao posicionar o cursor sobre a área editável, você verá, logo aci-

ma, o nome da região:
Figura 7.6.
Caso não esteja vendo o nome da área editável, utilize o menu

View > Visual Aids > Invisible Elements.
Após criar a área com o título, é importante alterar sua aparência,
ou seja, o tamanho da fonte, a cor dos caracteres e o alinhamento do
texto. Para tanto, selecione a área abaixo do nome da região editá-
vel, que também apresenta a mensagem Titulo Principal, selecione
o texto e utilize a barra de propriedades:
Figura 7.7.

54
cap07.indd 54 5/6/2006 17:42:30

Inserindo um local para fotos
Agora que você criou uma área para o título, crie uma na qual
deve ser colocada uma imagem, como uma foto, por exemplo.
Para fazê-lo, abra o menu Insert > Image Objects > Image Pla-
ceholders. Dê um nome para a foto e defina suas dimensões (largura
e altura), sua cor de fundo e um possível texto alternativo. Pressione
o botão OK.
Figura 7.8.
O local para a inserção da imagem já está na célula apropriada,

agora você não poderá esquecer de que é preciso tornar esta área
editável. Para tanto, selecione a área que acaba de criar, dê um clique
sobre a imagem, um clique no botão Template e selecione a opção
Editable Region. Por fim, forneça um nome para a nova área editável.
Em sua página, você criou duas área editáveis, ou melhor, duas
áreas em que a inserção de informações será permitida. Para ve-
rificar as áreas editáveis que você criou, siga o menu Modify >
Templates; as últimas linhas do menu irão informar todos os nomes
das regiões, inclusive aquela na qual seu cursor estiver:
Figura 7.9.
Portanto, é preciso lembrar de tudo o que deve ser alterado ou

incluído, mesmo os links devem estar em uma região editável.
Uma preocupação que devemos ter em conta diz respeito à cria-
ção dos links. Assim, sempre use o ícone da pasta para que você
55
cap07.indd 55 5/6/2006 17:42:30

posicione o cursor sobre o arquivo desejado, procure nunca digitar
o link direto no campo que lhe é reservado, pois isso pode impedir
que o Dreamweaver localize os arquivos:
Figura 7.10.
Para remover uma área editável, selecione a região e siga o menu

Modify > Templates > Remove Template Markup, ou, se preferir,
clique sobre a área e pressione a tecla Delete.
É importante saber que, ao remover uma região editável de um
arquivo de modelo que possui páginas subseqüentes, todas as pá-
ginas modificadas na região que você tornou editável serão altera-
das, de forma que a região editável mude para refletir as alterações
efetuadas.
Inserindo conteúdos opcionais
No Dreamweaver, um recurso interessante é conhecido como con-

teúdo opcional, áreas nas quais definimos um conteúdo que será ocul-
to ou exibido de acordo com as páginas criadas a partir de um mode-
lo. Para criar uma área com conteúdo opcional, faça o seguinte:
1. Selecione uma linha de sua tabela e siga o menu Insert >

Template Objects > Optional Region.
2. Digite um nome para a área opcional, como por exemplo, Pra-

tos, e desabilite a opção Show by default (Exibir por padrão). Essa
opção deve estar habilitada quando na maiorira de suas páginas o
conteúdo for definido como opcional.
3. Pressione o botão OK.
Na página que estamos criando, você definiu que algumas áreas

têm conteúdos opcionais, ou seja, por padrão elas ficam ocultas nas
páginas criadas a partir de seu modelo. Ao criar e editar novas pági-
nas, é possível ocultar ou exibir as áreas com conteúdos opcionais.
Vejamos como controlar o conteúdo definido como opcional:

56
cap07.indd 56 5/6/2006 17:42:30

1. Use o menu Modify > Template Properties.
2. Selecione a área opcional criada (Opcional) na lista de nomes.
3. Nesse caso, algumas opções da região tornam-se disponíveis.
4. Ative a opção Show.
5. Repare que a caixa de opções Value tem seu valor alterado. Ela
passa de oculto (False) para exibido (True).
Regiões que se repetem
Algumas vezes, há determinadas áreas em uma página que de-

vem ser duplicadas, principalmente quando precisamos fazer várias
entradas. O Dreamweaver pode trabalhar com essas áreas e as reco-
nhece como áreas repetitivas, permitindo o controle sobre todas.
Para inserir áreas repetitivas, selecione, em suas páginas, duas
linhas vazias na parte inferior da tabela (duas linhas e duas colunas),
abra o menu Insert > Template Objects > Repeating Region, dê um
nome à área e pressione o botão OK:
Figura 7.11.
1. Crie uma tabela com duas linhas e três colunas.
2. Na nova tabela, digite cabeçalhos na linha Pratos, na célula à

direita, Sobremesas, e na última célula, Sopas.
3. Selecione a próxima célula em branco, abaixo do título Pratos.
4. Use o menu Insert > Template Objects > Editable Regions, ou

pressione o botão Editable Region existente na barra Insert.
5. Crie uma área editável chamada Pratos.
57
cap07.indd 57 5/6/2006 17:42:31

6. Na próxima célula à direita, crie uma área editável chamada
Sobremesas.
7. Na última célula à direita, crie uma região editável chamada

Sopas.
8. Pronto, sua tabela deverá ter a seguinte aparência:
Figura 7.12.
Construindo páginas a partir de modelos
Após definir as áreas editáveis, aquelas em que seu conteúdo

pode ser alterado e também as áreas repetidas de seu site, é possí-
vel salvar o modelo criado e fechá-lo para que possamos criar uma
página estruturada exatamente nesse modelo.
Para criar uma nova página, use o menu File > New. Na janela
New from Template, selecione a guia Templates.
Note que aparecerá o nome de seu projeto e, à direita, todos os
modelos gerados a partir dele:
Figura 7.13.
Dê um clique no modelo recém criado (Information.dwt) e pres-

sione o botão OK.
Insira o título no local desejado e a foto que pretende colocar em
sua página. Repare que você poderá inserir elementos apenas nas
áreas editáveis.

58
cap07.indd 58 5/6/2006 17:42:31

Observe também que em sua página aparecem áreas bloqueadas
nas quais a cor padrão é amarelo-fosco e o nome do modelo apare-
cerá no canto superior-direito da página.
Caso o cursor esteja posicionado em uma área bloqueada (região
não-editável), o ponteiro do mouse terá a aparência de um círculo com
uma linha atravessada. Esse ponteiro também será exibido sempre
que estiver em uma área bloqueada, ou quando receber um clique.
Preencha todo o conteúdo e grave o arquivo como Pedidos.html.
Nesse caso, você preencherá uma matriz e o modelo original não foi
alterado; este permanece na pasta do Dreamweaver com os outros
modelos criados anteriormente.
Alterando modelos
Caso seu modelo precise de alguns ajustes, você poderá editá-lo

e efetuar as alterações.
Para tanto, abra o modelo utilizado com o menu File > Open
Recent, e dê um clique no arquivo Information.dwt.
Faça alguma alteração em seu modelo, como, por exemplo, alte-
rar a parência do título principal, sua fonte ou seu tamanho.
Salve seu modelo e feche o arquivo. Anteriormente, você pode
ter criado várias páginas baseadas nesse modelo, mas, agora, fez
alterações em sua matriz. Ao abrir os arquivos criados estruturados
em seu modelo, as páginas exibidas podem não refletir suas altera-
ções, portanto, para que elas sejam atualizadas, você deve manter
o modelo e todas as páginas criadas também abertas na tela, pois,
dessa forma, ao alterar o modelo, todas as páginas seguintes, cria-
das a partir do modelo, serão atualizadas.
Caso o modelo e as páginas estejam fechados, abra-os e utilize o
menu Modify > Templates, selecionando a opção Update Current
Page, para que somente a página atual seja alterada.
Mas o que fazer se várias páginas foram criadas com base nesse
modelo? Ora, basta abrir uma a uma e seguir o mesmo menu Modify
> Templates > Update Current Page. Outra opção é verificar a al-
teração nos modelos, bem como nos links existentes, o que é muito
mais conveniente caso várias páginas tenham sido geradas a partir
de um modelo.
Para atualizar as páginas, use o menu Modify > Templates >
Update Pages. Para verificar o registro das alterações, marque a
opção Show Log e, ao pressionar o botão Done, automaticamente
59
cap07.indd 59 5/6/2006 17:42:31

serão atualizadas todas as páginas, links e modelos, bem como o
tempo necessário para todas as atualizações:
Figura 7.14.
Trabalhando com bibliotecas
Em muitas das páginas criadas, alguns elementos tornam-se re-

petitivos, como botões, direitos autorais do site e esse tipo de infor-
mações.
Como exemplo, suponha que, por padrão, todas as suas páginas
possuem os direitos autorais e a data da última atualização. Essas
informações fazem parte de mais de quatro páginas criadas em seu
site, portanto, você deverá abri-las uma a uma para alterá-las. Ou
seja, é preciso selecionar o texto, fazer as alterações e, logo a seguir,
salvar e fechar a página. Imagine ter de fazer isso uma vez por dia em
várias páginas? Um sufoco, não é mesmo?
Dessa forma, podemos chamar esses itens repetidos, tratando-
os como elementos, em uma biblioteca de itens e utilizá-los sempre
que forem necessários.
É improtante salientar que tais itens somente podem ser criados
na tag <body> e </body>.
Saiba como criar itens em uma biblioteca:
1. Ao final de sua página digite o texto 2006, O Chef em Casa.
2. Para inserir a data atualizada, use o menu Insert > Date, sele-
cione o estilo desejado da data e pressione o botão OK.
3. Salve sua página.
4. Abra o painel de arquivos usando o menu Window > Files.

60
cap07.indd 60 5/6/2006 17:42:31

5. Dê um clique no painel Assets.
6. Selecione a informação que você acaba de inserir.
7. Arraste até o painel Assets.
8. Clique no último botão da janela, chamado Library:
Figura 7.15.
9. Um novo item de biblioteca será criado. O nome desse item

será Untitled.
10. Clique sobre o novo item e dê-lhe um novo nome, Direitos,

por exemplo, e pressione Enter.
Outra maneira de criar um item é com o botão New Library, na

parte inferior do painel de grupos Library:
Figura 7.16.
Inserindo um item de biblioteca em páginas
Para inserir um item de biblioteca em uma página, faça o seguinte:
1. Abra a página em que deseja ver o item de biblioteca.
2. Posicione o cursor no local em que deseja ver o item.
3. Dê um clique sobre o item de biblioteca criado.
4. Pressione o botão Insert existente no painel Library.
5. Automaticamente, o item será inserido em sua página.
61
cap07.indd 61 5/6/2006 17:42:31

Caso queira, você poderá utilizar o seguinte atalho:
1. Abra o painel Files e a guia Assets.
2. Dê um clique sobre o item de biblioteca desejado.
3. Posicione o cursor no local em que deseja ver o item.
4. Arraste o item do painel Assets até o local desejado.
Sempre que um item de biblioteca é inserido em um documento,

uma referência a esse item será feita (um código em HTML é inseri-
do), mesmo que você não esteja vendo o item na pasta Library de
seu site. Cada item gerado é gravado na pasta Library com o nome
que você informou e a extensão .lbi.
Caso tenha removido um item de biblioteca acidentalmente, des-
de que possua várias outras páginas com os elementos utilizados,
você poderá recriá-lo rapidamente. Para isso, abra a página com o
item de biblioteca que você removeu. Pressione o botão Recreate
existente no painel Assets.
Nesse caso, o item será recriado com o mesmo nome de item
utilizado na página.
Para modificar um item de biblioteca, dê um duplo clique sobre o
ícone existente no painel Assets e, rapidamente, o mesmo será aber-
to em nova janela. Faça todas as alterações que achar conveniente.
Para atualizar todas as referências de bibliotecas utilizadas em suas
páginas, siga o menu Modify > Library > Update Pages. Para alterar
somente a página corrente, a opção deve ser Modify > Library >
Update Current Page.
Da mesma forma que os modelos, automaticamente o Dream-
weaver informa a atualização de todas as referências:
Figura 7.17.

62
cap07.indd 62 5/6/2006 17:42:31

Para excluir um item da biblioteca, dê um clique no item desejado
e pressione o botão Delete, presente no painel Assets.
Veja, agora, como criar um item de biblioteca que funcionará
como referência a menus de outras páginas:
1. Crie uma tabela com uma linha e quatro colunas.
2. Digite os textos seguintes como títulos das colunas: Aulas,

Cardápios, Almoços e Jantares e Home.
3. Selecione o texto e formate da forma desejada.
4. Selecione o item Aulas.
5. Crie um link para a página correspondente.
6. Selecione o item Cardápios e crie um link para a página cor-

respondente.
7. Selecione o item Almoços e Jantares e crie um link para ele.
8. Selecione o item Home e crie um link para a página Index.
9. Selecione a tabela criada.
10. Pressione o botão New item Library do painel Assets.
11. Digite o nome do novo item, como, por exemplo, Menus, e

pressione Enter.
Pronto, agora todas as suas páginas podem ter um menu criado.

Para isso, arraste o item Menu do painel diretamente para suas pá-
ginas.
63
cap07.indd 63 5/6/2006 17:42:31

Molduras
Você pode dividir a página de seu site em várias regiões, sen-
do que cada uma delas funciona como uma página HTML diferente.
Tais divisões são conhecidas como molduras ou frames. Um frame
é uma parte (região) de sua janela que exibe um documento HTML
independente do exibido no restante da janela.
A primeira vantagem que temos ao utilizar frames é o fato de que
a página não precisará ser recarregada continuamente, além de que
cada frame conta com barras de rolagem individuais, permitindo
uma aproximação mais individual.
Por outro lado, muitos programadores preferem não trabalhar
com frames, já que estes sobrecarregam suas páginas. Outras des-
vantagens são o alinhamento gráfico, mais difícil, e o teste de nave-
gação, mais demorado.
Criando frames
Para criar um frame, abra um documento e escolha a categoria

Framesets, escolha um tipo de frameset e pressione o botão Create:
Figura 8.1.
Criando frames em documentos em branco
Caso você tenha criado uma página em branco e deseja aplicar

layouts de frames, faça o seguinte:
1. Com o documento aberto, use a barra Insert.

64
cap08.indd 64 5/6/2006 18:06:31

2. Clique na opção Layout.
3. Pressione o botão Frames e dê um clique no tipo de frame

desejado.
Figura 8.2.
Visualizando bordas dos frames
Muitas vezes, as bordas de um frame não estão visíveis. Para

visualizá-las, use o menu View > Visual Aids e selecione a opção
Frame Borders.
Desenhando frames
Você pode desenhar frames dentro de frames existentes. Para isso,

use o menu Modify > Frameset e utilize um dos itens disponíveis:
Figura 8.3.
Opção Descrição
Split Frame Left Cria um frame à esquerda do atual.

Split Frame Right Cria um frame à direita do atual.
Split Frame Up Cria um frame acima do atual.
Split Frame Down Cria um frame abaixo do atual.
Tabela 8.1.
Molduras
65
cap08.indd 65 5/6/2006 18:06:49

Outra maneira de separar os frames em partes menores é manter
a tecla Alt pressionada enquanto arrasta uma borda do frame sele-
cionado para a esquerda ou para a direita.
Redimensionando frames
A maneira mais rápida de redimensionar um frame é manter o

botão do mouse pressionado enquanto o arrasta para a esquerda ou
para a direita.
Excluindo frames
Para excluir um frame, você pode arrastar sua borda para fora da
página atual. Caso algum documento não tenha sido gravado em
frames removidos, o Dreamweaver nos informa.
Selecionando frames
Para formatar frames, é preciso selecioná-los. Para selecionar,

siga o menu Windows > Frames. Aparecerá do lado direito da tela o
painel de frames. Ao clicar em um dos frames desse painel, automa-
ticamente ele será selecionado na janela do seu site:
Figura 8.4.
Ao selecionar um frame, será acrescida uma linha pontilhada na

janela de design, indicando o frame selecionado. A maneira mais rá-
pida de fazer uma seleção é manter a tecla Alt pressionada enquanto
dá um clique sobre o frame desejado.
Especificando o conteúdo de um frame

Com o Dreamweaver, é possível especificar o conteúdo inicial de
um frame, ou seja, abrir determinada página em um frame. Saiba
como fazê-lo:

66
cap08.indd 66 5/6/2006 18:06:49

1. Dê um clique no frame desejado.
2. Siga o menu File > Open in frame. Será aberta a seguinte janela:
Figura 8.5.
3. Indique o nome do arquivo que deseja ver aberto e pressio-

ne OK.
4. Você verá, no frame em que o cursor está posicionado, o ar-

quivo aberto:
Figura 8.6.
Salvando frames
Se deseja visualizar sua página no browser, você deve, antes de

qualquer coisa, salvar todos os documentos exibidos nos frames
existentes. Para tanto, siga o menu File > Save Frame, ou Save frame
as, e indique o nome do frame no documento.
Se for necessário salvar todos os arquivos associados a um con-
junto de frame, utilize o menu File > Save All.
Molduras
67
cap08.indd 67 5/6/2006 18:06:50

Propriedades do frame
Selecione um frame e veja as opções apresentadas na barra

Properties:
Figura 8.7.
Na tabela seguinte, a definição de cada um dos botões:
Botão Definição
Permite alterar o formato do parágrafo, do texto e

da fonte utilizada.
Permite aplicar um estilo ao texto, bem como al-

terar seu tamanho e cor.
Permite aplicar negrito e itálico.
Permite alterar o alinhamento do texto no frame.
Permite aplicar marcadores, numeração ou recuos.
Permite especificar um link ao frame com outra

imagem ou documento.
Tabela 8.2.
Alterando a cor do preenchimento da frameset
Para alterar a cor de preenchimento (fundo), posicione o cursor

em um frame e use o menu Modify > Page Properties. Na caixa de
diálogos exibida, use a opção Background color.
Propriedades do frame
Selecione um frame e veja as opções da barra Properties:

68
cap08.indd 68 6/6/2006 11:19:24

Figura 8.8.
Nessa barra, é possível visualizar o número de linhas (rows) e co-

lunas (columns) do frame, se há bordas (border), bem como a espes-
sura (border width) e a cor (border color) destas. A opção Column
determina qual a medida da coluna do frame em pixels.
Inserindo títulos em frames
Para inserir um título em um frame, selecione o frame desejado e

digite o título no campo Title, na barra de ferramentas.
Figura 8.9.
Utilizando target
Você pode adicionar um link em um frame para abrir um docu-

mento existente, utilizando um destino (target) para esse link. Para
isso, no modo de visualização de design, selecione a opção Link,
especifique o arquivo desejado e, na opção Target, selecione o fra-
me, ou janela, no qual o documento linkado deve aparecer. Veja as
opções existentes:
Opção de target Descrição
_blank Atribui o documento especificado em uma nova janela

do browser, fazendo com que a janela atual permaneça
sem alterações.
_parent Abre o documento especificado em um frame que origi-
nou aquele em que o link aparece.
_self Abre o documento especificado em link no frame atual,
substituindo o conteúdo existente.
_top Abre o documento especificado em link na janela atual
do browser, substituindo todos os frames.
Tabela 8.3.
Molduras
69
cap08.indd 69 6/6/2006 11:19:43

Vale ressaltar que os nomes dos frames aparecem na lista Target se,
por acaso, você estiver dentro de um. Ao editar o documento em sua
própria janela, os nomes dos frames não aparecem na lista Target.
Alguns browsers não suportam o trabalho com frames; nesse
caso, o conteúdo é armazenado no arquivo de frame em uma tag
conhecida como “noframes”.
Para visualizar frames em browsers que não oferecem suporte,
siga o menu Modify > Frameset > Edit Noframes Content e insira o
conteúdo como em um documento comum.

70
cap08.indd 70 5/6/2006 18:06:50

Camadas
Também conhecidas como layers, o Dreamweaver pode traba-
lhar com camadas, elementos de uma página HTML que podem ser
posicionados em qualquer lugar, permitindo a inserção de imagens,
textos ou de qualquer outro conteúdo no corpo do código HTML
(<body>). Uma camada é uma tag <div> com posicionamento ab-
soluto ou relativo.
Inserção de camadas
Assim como as tabelas e os frames, uma camada pode conter ca-

madas aninhadas. Para desenhar uma camada simples, use a barra
de ferramentas Insert e clique no botão Draw Layer:
Figura 9.1.
Outra maneira de inserir layers é seguir o menu Insert > Layer.

Na criação de camadas, o ponteiro do mouse será alterado para
uma mira (cruz). Ao posicionar o cursor na janela e arrastá-lo para a
direita e para baixo, verá a nova camada surgir. Quando terminar de
criar, solte o botão do mouse.
Caso não visualize as bordas/marcadores de código das cama-
das, use o menu View > Visual Aids > Invisible Elements.
Após criar a primeira camada, mantenha a tecla Ctrl pressionada
enquanto cria novas camadas, sem ter de utilizar o comando nova-
mente.
Caso o cursor esteja posicionado em uma camada, ao criar a pró-
xima, a camada atual se expande para receber a nova; esse recurso
é conhecido como camadas aninhadas.
Visualizando a janela do
documento e a de código
Caso você tenha conhecimentos em códigos HTML, pode querer

analisar as duas janelas simultaneamente, com um clique no botão
da Figura 9.2:
Camadas
71
cap09.indd 71 5/6/2006 18:14:54

Figura 9.2.
Figura 9.3.
Por padrão, o código de uma camada é inserido na parte superior da

página, logo após a tag <body>. A tag <div> permite que um público
maior visualize suas camadas. Ela cria um posicionamento da camada
em relação aos lados superior e esquerdo da janela do browser:
Figura 9.4.
Ao posicionar o cursor e digitar o texto, a camada se expande

para acomodar todo o texto digitado; esse é o padrão em camadas.
Gerenciando camadas
Para gerenciar as camadas existentes de seu documento, use o

menu Window > Layers, ou o atalho F2:
Figura 9.5.

72
cap09.indd 72 5/6/2006 18:15:12

Para exibir ou ocultar camadas aninhadas, utilize os botões Plus
(+) ou Minus (-).
Repare que será apresentada uma lista com o nome da camada
acompanhado por um número (z), o índice de camadas criadas.
Ao selecionar uma camada com um clique do mouse, automati-
camente seu nome aparecerá em negrito. Para selecionar várias ca-
madas de uma só vez, mantenha pressionada a tecla Shift enquanto
faz a seleção:
Figura 9.6.
Caso o cursor esteja posicionado na janela de documento, dê um

clique na borda da camada e utilize as teclas Ctrl e Shift para selecio-
nar múltiplas camadas.
Preferência de camadas
Para especificar as configurações padrão das camadas, utilize o

menu Edit > Preferences e dê um clique na categoria Layers:
Figura 9.7.
Camadas
73
cap09.indd 73 5/6/2006 18:15:12

Definindo as propriedades de uma camada
Ao selecionar uma camada, você observará as seguintes proprie-

dades na barra Properties:
Figura 9.8.
Nomeando camadas
Cada camada criada vai receber um nome genérico, como layer1,

layer2, e assim sucessivamente. Para nomear suas camadas, utilize
a barra Layers, no lado direito da tela. Dê um duplo clique sobre o
nome da camada, digite um novo nome e pressione a tecla Enter:
Figura 9.9.
Outra maneira de nomear camadas é digitar um nome na opção

Layer ID:
Figura 9.10.
Largura e altura das camadas
Para alterar a largura e a altura de uma ou mais camadas, selecio-

ne-as e utilize as opções H (height/altura) e W (width/largura) e digite
as medidas em pixels:
Figura 9.11.
Para alterar a posição da camada em sua página com relação à mar-

gem superior e esquerda do documento, use as opções R (right /direita)
e L (left/esquerda):

74
cap09.indd 74 5/6/2006 18:15:13

Figura 9.12.
Para redimensionar em uma camada um pixel de cada vez, se-

lecione a camada e arraste as alças de redimensionamento até a
largura desejada.
Alterando o posicionamento de uma camada
Para alterar a ordem em que a camada aparece na janela do docu-

mento, digite um novo valor do índice na opção Z-Index:
Figura 9.13.
No exemplo seguinte, é possível observar que, dependendo das

camadas, devemos alterar a ordem de empilhamento. Por padrão, a
primeira camada aparece abaixo da segunda, mas o resultado pode
não ser o esperado:
Figura 9.14.
Alterando a cor de fundo da camada
A cor de fundo de uma camada é alterada quando utilizamos a

opção Bg color presente na barra Properties:
Figura 9.15.
Para inserir uma imagem no fundo da camada, use a opção Bg

image:
Figura 9.16.
Alterando a visibilidade da camada
Caso não esteja visualizando o painel de camadas, siga o menu

Window > Layers ou pressione a tecla F2. Para ocultar a visualiza-
Camadas
75
cap09.indd 75 5/6/2006 18:15:13

ção de uma camada, dê um clique no ícone com a figura de um olho
aberto ao lado do nome da camada. Para voltar a exibir a camada,
basta dar um clique no ícone com a figura de um olho fechado:
Figura 9.17.
Alinhando camadas
Para alinhar duas ou mais camadas, selecione as que deseja

alinhar, use o menu Modify > Align e escolha uma das opções de
alinhamento apresentadas.
É possível fazer cortes em uma camada utilizando as seguintes
opções da barra Properties:
Figura 9.18.
Sobreposição de camadas
O Dreamweaver não permite criar uma tabela com camadas so-

brepostas. Caso você pretenda converter as camadas em tabelas,
será necessário prevenir-se com relação às sobreposições. Para
isso, siga o menu Modify > Arrange > Prevent Layer Overlaps.
Convertendo camadas em tabelas
Para converter as camadas selecionadas em tabelas, abra o menu

Modify > Convert > Layers to Table:
Figura 9.19.

76
cap09.indd 76 5/6/2006 18:15:13

O ideal é ativar as opções Most accurate, útil para preservar o
layout do texto e Prevent layer overlaps, com a qual nos prevenimos
das sobreposições de camadas.
Na tabela a seguir, saiba a descrição das funcionalidades de cada
uma das opções apresentadas na figura anterior:
Opção Descrição
Most accurate Para maior precisão.

Smallest: collapse empty cells Para fechar células vazias.
Less than: X pixels wide. Menores que X pixels de largura.
Use transparent GIFs Utilizar GIFs transparentes.
Center on page Centralizar na página.
Prevent layer overlaps Evitar sobreposição de camadas
Show layers panel Mostrar o painel camadas.
Show grid Mostrar a grade.
Snap to grid Encaixar na grade.
Tabela 9.1.
Convertendo tabelas em camadas
O procedimento contrário também pode ser aplicado, ou seja,

converter uma tabela em layers. Para isso, siga o menu Modify >
Convert > Table to Layers. Após escolher as opções desejadas,
pressione o botão OK:
Figura 9.20.
Opções de grade e régua
Quando trabalhar com camadas, é ideal utilizar grades e réguas

que sirvam como guias em seu documento. Para tanto, siga o menu
View > Grid > Show grid:
Camadas
77
cap09.indd 77 5/6/2006 18:15:13

Figura 9.21.
Para facilitar o posicionamento de camadas, é possível prendê-

las em pontos pré-determinados das grades. Para isso, use o menu
View > Grid > Snap to grid.
Para configurar as especificações das grades existentes, siga o
menu View > Grid > Grid Settings. Você encontrará as seguintes
opções:
Figura 9.22.
Na tabela seguinte, veja o que cada uma das opções possibilita:
Opções Definições
Color Permite especificar a cor das linhas de grades.

Show grid Permite exibir as linhas de grade.
Snap to grid Permite ancorar as camadas e objetos às grades.
Spacing Permite especificar o espaçamento entre as grades.
Display Permite visualizar as grades como linhas (lines) ou pontos
(dots).
Tabela 9.2.
Nota: para excluir uma camada, selecione-a e pressione a tecla

Delete.

78
cap09.indd 78 5/6/2006 18:15:13

Links
Ao criar um site com documentos da Web, é preciso fazer algu-
mas conexões entre imagens e documentos. Por exemplo, há em
todo site uma página inicial (index) que possui chamadas (conexões)
a outras páginas.
O Dreamweaver permite fazer essas conexões criando links para
documentos, imagens, arquivos de som e imagem (multimídia) ou,
ainda, para programas em que podemos fazer o download de outras
informações.
Caminhos de arquivos
Ao criar um link, é importante perceber que o caminho (path) do

documento na tela é vinculado àquele que está sendo habilitado.
Por isso, o ideal é manter todos os arquivos de documentos em uma
mesma pasta, para que facilite a conexão.
Cada página em seu site possui um endereço único, conhecido
como URL (Universal Resource Locator); sempre que você fizer a
conexão dessa página com outro arquivo, será indicado o caminho
relativo ao documento ou à pasta à qual ele pertence.
A maioria dos aplicativos de criação de páginas entende que te-
mos três tipos de caminhos de link de arquivos. São eles:
• Caminhos absolutos: aqueles em que são fornecidas as infor-
mações completas para a URL, como, por exemplo http://www.dige-
rati.com.br/livros/dreamweaver.htm, em que tanto no arquivo atual
como no linkado são fornecidas informações absolutas (completas);
• Caminhos relativos ao documento: esse tipo de caminho é o mais
apropriado para os links locais da maioria das páginas da Web, pois em
suas especificações não há registro da URL completa, sendo diferente
apenas o segmento do caminho. Como exemplo, temos aulas.htm
• Caminhos relativos à raiz: esse tipo de caminho fornece a loca-
lização da pasta-raiz de seu site a um determinado documento. Esse
processo é bastante utilizado quando trabalhamos com sites mais
complexos e grandes (os portais, por exemplo), pois utilizam vários
servidores ou, até mesmo, um servidor capaz de hospedar vários
sites diferentes. Por exemplo, /livros/dreamweaver.htm.
Por isso, é importante armazenar os arquivos linkados e com ima-

gens na mesma pasta em que está o seu site. Como exemplo, temos
Links
79
cap10.indd 79 5/6/2006 18:24:29

a página Index.htm que, por sua vez, chama a página Aulas e a página
Cardápios. Cada uma dessas pastas abre imagens, fotos e sons que
fazem referência a outros documentos e mensagens. Para não perder
um tempão no servidor tentando localizar essas informações, o ideal
é armazenar tudo em pastas distintas. Ou seja, quanto às páginas re-
feridas, deixe-as na raiz principal, as imagens, em uma página conhe-
cida como Imagem, o mesmo com sons e assim sucessivamente.
Estabelecendo caminhos relativos ao documento
Quando o arquivo está na mesma pasta do documento atual, se

faz necessário digitar o nome do arquivo que deseja linkar:
Figura 10.1.
Para fazer vínculo com um arquivo que está em uma subpasta,

você deve fornecer o caminho dessa subpasta:
Figura 10.2.
Em qualquer um dos exemplos citados, é importante, para não

causar erros de digitação, utilizarmos o botão com a pasta amarela
ao lado da palavra Link. Dessa forma, o Dreamweaver procura o ar-
quivo e transcreve, nesse local, todo o caminho:
Figura 10.3.
Sempre que utilizar a pasta amarela para fazer referência a um

arquivo externo à pasta atual, automaticamente o Dreamweaver irá
perguntar se deseja fazer uma cópia desse arquivo, evitando o trans-
torno de localizar o documento linkado:
Figura 10.4.

80
cap10.indd 80 5/6/2006 18:24:34

Criando links
Até agora, trabalhamos com links sobre textos (hipertextos), ou

seja, com o cursor posicionado em determinada palavra, e utiliza-
mos a opção Link, existente na barra Properties. Isso é conhecido
como uma tag de âncora, na qual o Dreamweaver gera um par de
âncoras para os objetos linkados, textos ou imagens. Portanto, ao
criar um link, automaticamente o código HTML será:
<a href=”file:///C:/Documents%20and%20Settings/
Sandra/logos/aulas.JPG”Aulas</a>
Você pode criar links com outros documentos, arquivos de ima-

gem, filmes, sons, arquivos PDF, nomes, correios eletrônicos e, tam-
bém, links nulos, que permitem anexar determinado comportamen-
to a um objeto.
Uma maneira rápida de criar esse tipo de link é digitar o nome
que lhe pertence na opção Link, na barra Properties. Por outro lado,
se deseja maior paticidade, arraste o nome do arquivo existente na
barra Files (lado direito da tela) até a opção Link.
Outra maneira de criar um link é selecionar o texto ou imagem e
usar o menu Modify > Make link ou pressionar as teclas Ctrl + L.
Fazendo links em imagens
1. Dê um clique na página que deve receber a imagem.
2. Na janela Properties, na opção Src, arraste o nome de um ar-

quivo de imagem.
3. Na opção Link, arraste o nome de um documento que deve ser

linkado:
Figura 10.5.
Links
81
cap10.indd 81 5/6/2006 18:24:35

Outra forma rápida e eficiente de fazer links é dar um clique no
ícone Point to file (relógio), à direita do campo Link e, em seguida,
arrastar o ponteiro do mouse para o painel Files até o arquivo que
deseja linkar.
Uma seta aparecerá indicando que os dados foram linkados.
Criando link usando o site Map
No painel Files (lado direito da tela), você pode ter uma visão
global de todos os arquivos que estão dentro da mesma pasta, bem
como dos links gerados. A visualização atual recebe o nome de Lo-
cal view:
Figura 10.6.
Para mudar o modo de visualização, mude a opção Local view

para Map view:
Figura 10.7.
Para visualizar os arquivos e o mapa do site, é preciso expandir

essa janela por meio do botão Expand/collapse (Figura 10.8):
Figura 10.8.
Com a tela do mapa do site expandida, você verá o arquivo Index.

htm. Dê um clique nesse arquivo e verá o ícone Point to File.
Arraste esse ícone e aponte-o para outro arquivo que será linkado:

82
cap10.indd 82 5/6/2006 18:24:35

Figura 10.9.
Esse método funciona muito bem quando você precisa criar links
no site inteiro.
Para retornar à janela do Dreamweaver, pressione novamente o
botão Expand/collapse.
Testando
Para verificar os links criados, você pode testá-los simulando a

utilização no navegador. Para isso, basta pressionar a tecla F12 e dar
um clique em cada link gerado para ver se estão fazendo as referên-
cias corretas.
Links de correio eletrônicos
Um link de correio eletrônico abre uma nova janela de uma nova

mensagem e utiliza o programa de correio eletrônico associado ao
navegador utilizado pelo usuário. Para saber qual é esse programa
de correio eletrônico, use o menu Iniciar e clique, com o botão direi-
to do mouse, sobre o ícone Internet, ative a opção Propriedades e,
na guia Programas, você terá todas as informações necessárias:
Figura 10.10.
Links
83
cap10.indd 83 5/6/2006 18:24:35

Portanto, ao criar um link com um correio eletrônico, automatica-
mente será exibida a janela de seu programa de correio.
Para criar um link, faça o seguinte:
1. Digite Fale conosco:
2. Com o ponto de inserção logo após os dois pontos da expres-

são digitada, use o menu Insert > Email Link:
Figura 10.11.
3. No campo Text, digite o texto que deseja exibir no documento,

funcionando como link.
4. No campo E-Mail, digite o endereço eletrônico do contato e

pressione OK.
Ao testar seu site, veja que, ao clicar sobre esse endereço, auto-
maticamente o navegador irá exibir uma janela em branco com uma
nova mensagem.
Gerenciando links
Caso você mude os links de pastas (endereços) ao abrir sua página

e utilizar um link ao qual você se referiu, automaticamente o Dream-
weaver busca essa informação na pasta de seu documento atual. Esse
processo pode levar algum tempo, portanto, se a mudança foi feita, é
necessário atualizá-la. Como? Digite os links novamente.
Com esse método você percorrerá link a link, efetuando a tro-
ca da informação. Para facilitar seu tabalho, você pode indicar ao
Dreamweaver que faça a atualização automaticamente. Veja como
é fácil:
1. Use o menu Edit > Preferences.
2. Clique na categoria General.

84
cap10.indd 84 6/6/2006 11:21:00

3. Ative a opção Always (Sempre) da opção Update links when
moving files (Atualizar os links ao mover arquivos) e dê OK.
Essa opção fará uma atualização automática de todos os links

para um documento selecionado, ou de um documento selecionado
que for movido ou renomeado.
A opção Prompt, do mesmo comando, irá exibir uma caixa de
diálogos com uma lista de todos os arquivos alterados. Estando in-
formado, você deve pressionar o botão Update para que o Dream-
weaver faça a atualização.
Uma maneira rápida de cumprir esse processo de atualização é
criar um arquivo de cachê, que armazena todas as informações sobre
os links e seus respectivos locais no site. Para tanto, faça o seguinte:
1. Siga o menu Site > Manage Sites.
2. Selecione o site desejado com um clique.
3. Pressione o botão Edit.
4. Na caixa de diálogos Local Info, use a opção Enable cache.
Figura 10.12.
Links
85
cap10.indd 85 5/6/2006 18:24:35

Interatividade
O objetivo desse capítulo é criar interatividade com o visitante da
página mediante sobreposições e comportamentos do Dreamweaver.
Antes de qualquer coisa, é importante falar um pouco sobre
comportamentos, espécies de ações do usuário (visitante da pá-
gina) combinadas com atividades relativas ao evento disparado.
Por exemplo, quando o usuário movimenta o mouse sobre um
botão, isso dispara um evento (uma ação): alterar a imagem des-
se botão.
Todos os comportamentos em Dreamweaver são como códigos
previamente escritos em linguagem JavaScript e podem ser incor-
porados rapidamente e sem grandes transtornos em seu site.
O Dreamweaver possui vários comportamentos que lhe são
próprios. Caso tenha conhecimentos em JavaScript, poderá criá-
los e anexá-los em seu site. Outra coisa interessante é fazer o
download de diversos comportamentos no site do Dreamweaver.
Porém, para fazê-lo, é preciso associar-se ao Macromedia.com,
uma operação simples e gratuita. Para o ingresso e download, uti-
lize o seguinte endereço: http://www.macromedia.com/exchange/
dreamweaver.
Imagens cambiáveis
Já vimos o conceito de imagens cambiáveis no Capítulo 4, imagens

que mudam quando o usuário as toca com o ponteiro do mouse. Para
inseri-las, siga o menu Insert > Image Objects > Rollover Image.
Dê um nome para a imagem na opção Image Name. Informe
qual imagem deve ser visualizada inicialmente em Original Image.
Como, ao posicionarmos o cursor, a imagem deve ser trocada por
outra, indique qual será essa imagem na opção Rollover Image.
Como texto alternativo, é possível digitar Pratos Típicos da Cozinha
Internacional.
Caso queira que sua imagem acesse um determinado site ou lo-
cal, digite seu endereço na opção When clicked, Go to URL (Quanto
clicado, vá para a URL). Dessa forma, quando o visitante clicar sobre
a imagem, será enviado para uma página diferente ou para um site
ligado ao assunto:

86
cap11.indd 86 5/6/2006 18:31:33

Figura 11.1.
Caso você tenha deixado essa opção em branco, o Dreamweaver

vai preenche-la com um sinal de link nulo, representado por cer-
quilha (#). Nesse caso, será exibida, pelo navegador, a imagem de
uma mãozinha apontando para a imagem, fazendo com que o cursor
permaneça na mesma página. Portanto, não deixe essa opção em
branco, pois irá remover o código em JavaScript que cria a sobrepo-
sição de imagens.
Por enquanto, você está visualizando uma imagem. A interativi-
dade será percebida somente ao visualizar a página em seu navega-
dor, por isso faça um teste pressionando a tecla F12.
Comportamentos
Agora que você verificou como inserir imagens cambiáveis, va-

mos aprender a criar sobreposições de imagens de forma diferente,
usando os comportamentos do Dreamweaver. Dê um clique sobre a
imagem cambiável que acabou de inserir e abra o painel de compor-
tamentos utilizando o menu Window > Behaviors ou, se preferir, o
atalho Shift+F3.
Figura 11.2.
Ao abrir o painel de comportamentos, você notará um sinal de

adição (+); com ele, inserimos novas ações. Para trocar a imagem,
pressione o sinal de adição e use a opção Swap Image (Permutar
imagem).
A imagem selecionada aparece em uma lista. Altere a imagem
cambiável utilizando a opção Set source to, indicando qual deve ser
Interatividade
87
cap11.indd 87 5/6/2006 18:31:43

a imagem a ser exibida. Você percebeu que cumpriu o mesmo pro-
cesso do exemplo anterior, mas, nesse caso, usou uma ação (com-
portamento) para obter o mesmo resultado. Outra coisa importante
é que, ao fornecer um nome para a imagem, facilitamos sua procura
e inserção. Caso o nome não tenha sido definido, aparecerá a men-
sagem unnamed image <img>.
A opção Preload images, por padrão, aparece habilitada, indican-
do que é importante pré-carregar as imagens. Nesse caso, as ima-
gens que serão trocadas, substituindo as originais, serão carregadas
junto com o restante da página, sobrepondo-as rapidamente e elimi-
nando o atraso que, geralmente, ocorre no download sempre que o
usuário posiciona o ponteiro do mouse sobre a imagem.
Outra opção que vem habilitada por padrão é Restore images
onMouseOut (Restaurar as imagens onMouseOut), que permite a
reversão para as imagens originais quando o usuário sair.
Após clicar no botão OK, você verá o comportamento definido
no painel:
Figura 11.3.
Nesse exemplo, você tornou uma imagem cambiável. Vejamos,

agora, o que fazer para trocar várias imagens com um evento:
1. Abra a página com as imagens que você inseriu.
2. Ative o painel de comportamentos (menu Window > Behaviors).
3. Use o sinal de adição.
4. Ative a opção Swap Images.
5. Veja o que acontece caso não defina um nome para as imagens:
Figura 11.4.

88
cap11.indd 88 5/6/2006 18:31:43

6. Nesse caso, dê um clique na imagem da lista Images.
7. Ative a opção Browse para trocar a imagem.
8. Indique qual deve ser a imagem cambiável (Set source to).
9. Repita os passos de 6 a 8 até trocar todas as imagens neces-

sárias.
Exibindo mensagens pop-up
É possível apresentar pequenas caixas de diálogos ao usuário

clicando em algum botão ou texto inserido. Para testar esse tipo de
efeito, faça o seguinte:
1. Digite o texto Cardápios.
2. Selecione-o.
3. Use o sinal de adição (+) do painel de comportamentos.
4. Ative a opção Popup Message.
Figura 11.5.
5. Digite a mensagem que o usuário vai visualizar.
Para ver o que ocorre, faça um teste no navegador (F12):
Figura 11.6.
Interatividade
89
cap11.indd 89 5/6/2006 18:31:43

Outro tipo de mensagem que você pode inserir em seu site são
as existentes na barra de status. Para tanto, selecione uma imagem
e, novamente, ative o sinal de adição no painel de comportamentos.
Siga o menu Set Text > Set Text of Status Bar. Será aberta a se-
guinte janela:
Figura 11.7.
Digite a mensagem que deseja ver na barra de status e pressio-

ne OK.
Faça um teste em seu navegador e, ao movimentar o mouse so-
bre a imagem, verá a mensagem sendo exibida na barra de status
de sua página.
Figura 11.8.
Menus flutuantes
Outro comportamento bastante utilizado é o que cria menus flu-

tuantes com ações criadas no ambiente JavaScript. Tais menus são
exibidos em navegadores Netscape e em Explorer, mas, provavel-
mente, não terá os mesmos efeitos se o usuário estiver utilizando o
navegador Opera.
Selecione a imagem desejada e use o sinal de adição do painel
de comportamentos. Ative a opção Show Pop-Up Menu para ver a
caixa de diálogos:
Figura 11.9.

90
cap11.indd 90 5/6/2006 18:31:43

1. Digite Cardápios na opção Text.
2. Na opção Link, digite a página que deseja visualizar, por exem-

plo cardápios.html.
3. Pressione o sinal de adição para criar um novo item de menu.
4. Caso queira criar um subitem de menu, use o botão da Figura

11.10:
Figura 11.10.
5. Após criar todas as opções do menu, você terá a seguinte con-

figuração:
Figura 11.11.
Para remover um item do menu, dê-lhe um clique e pressione o

sinal de subtração.
Para mover os itens, você deve dar um clique na opção desejada
e utilizar as setas para cima ou para baixo.
Concluída a criação de seu menu, pressione OK. Para conferir o
resultado, faça um teste na janela de seu navegador:
Figura 11.12.
Interatividade
91
cap11.indd 91 5/6/2006 18:31:43

Alterando a aparência do menu
No painel de comportamento, dê um duplo clique sobre a ação

Show Pop-Up Menu para ver a caixa de diálogos que acabou de uti-
lizar. Dê um clique na guia Appearance e veja as opções existentes:
Figura 11.13.
Para alterar a exibição do menu, use as opções Vertical ou Ho-

rizontal Menu. As fontes devem ser alteradas por meio da opção
Font, Size, B (negrito) e I (itálico).
As opções de Up state indicam o estado do menu quando o pon-
teiro do mouse for pressionado e as opções de Over state funcio-
nam quando o ponteiro estiver sobre ele.
Para alterar a aparência das células (bordas ao redor do texto), uti-
lize a guia Advanced, na qual você encontrará as seguintes opções:
Opção Descrição
Cell width Define a largura da célula.

Cell height Define a altura da célula.
Cell padding Define o espaço em branco antes do menu.
Text indent Define o espaçamento das células.
Cell spacing Define o espaçamento do texto dentro da célula.
Show borders Exibe bordas ao redor das células.
Border width Altera a largura da linha de borda das células.
Shadow Permite definir a cor do sombreamento da célula.
Border color Permite definir a cor da borda das células.
Highlight Permite definir a cor do brilho das células.
Tabela 11.1.

92
cap11.indd 92 6/6/2006 11:21:39

Para definir o posicionamento do menu com relação à imagem,
utilize a guia Position:
Figura 11.14.
Incorporando som à imagem ou ao texto
Um evento que pode chamar a atenção do visitante de seu site é

uma música ou um sinal sonoro que pode ser incorporado ao texto
selecionado ou à imagem. Para tanto, selecione a imagem ou o tex-
to, utilize o sinal de adição do painel de comportamentos e ative a
opção Play Sound.
Indique o nome do arquivo de som que deseja incorporar e pres-
sione OK. Ao clicar sobre a imagem ou texto, automaticamente o
arquivo de som será executado:
Figura 11.15.
Verificando o navegador
Como podemos observar, o navegador utilizado pelo seu visi-

tante pode causar alguns transtornos na hora de exibir e executar
as camadas e animações. Devido a esse fato, é importante detectar
quais os navegadores estão sendo utilizados e tentar redirecionar os
usuários para outra página.
Nesse caso, quando o usuário estiver utilizando um navegador
diferente, é possível criar uma página estática sem as camadas ou
animações, redirecionando-a com navegadores do Explorer 4.0 para
páginas com animações.
Para verificar esse comportamento, selecione a tag <body> para
redirecionar o usuário antes que a página seja recarregada.
Interatividade
93
cap11.indd 93 5/6/2006 18:31:43

Para selecioná-la, vá à barra de status (antes da janela Properties)
e dê-lhe um clique.
Figura 11.16.
No painel de comportamentos, clique no sinal de adição e ative a

opção Check Browser:
Figura 11.17.
No caso do Netscape, ou de navegadores mais avançados, como

o Internet Explorer 4.0, direcione a URL (Go to URL), indicando para
qual página o visitante deverá ir.
As opções de Otherwise permitem o redirecionamento com a
continuidade na página.
Caso utilize outros navegadores, marque a opção Other brow-
sers e direcione o visitante para alguma página.
A opção URL permite especificar a página para a qual os usuários
dos navegadores mais recentes serão redirecionados. Ao pressionar
a tecla OK, será inserido o código JavaScript na página.
Abrindo a janela do navegador
Quando sua página for carregada, é possível exibir informações

como anúncios, promoções e outros tipos de dados em uma nova
janela do navegador. Nesse caso, podemos controlar o tamanho e

94
cap11.indd 94 5/6/2006 18:31:44

outros atributos da nova janela do navegador, tais como as barras de
menus existentes e as barras de rolagem.
Para abrir em uma nova janela do navegador, use o sinal de adição
do painel de comportamentos e a opção Open Browser Window:
Figura 11.18.
Na opção URL to display indique qual página (URL) será exibida.

A largura da janela deve ser definida na opção Window width e a
altura em Window height.
Controle todos os atributos da janela utilizando as opções Navi-
gation toolbar (Barra de ferramenta de navegação), Menu bar (Bar-
ra de menus), Location toolbar (Barra de ferramenta local), Status
bar (Barra de status), Scrollbars as needed (Barras de rolagem, se
necessárias), Resize handles (Alças de preenchimento) e Window
name, para definir o nome da janela.
Interatividade
95
cap11.indd 95 5/6/2006 18:31:44

Formulários
Se pretende interagir com o usuário solicitando informações,
como o endereço de e-mail do visitante, você pode contar com os
formulários que, além de colher informações, permitem maior rapi-
dez na venda de seu produto.
Quando falamos de formulários, falamos também de um códi-
go-fonte escrito em HTML que armazena as informações sobre o
formulário, como, por exemplo, todos os campos e botões que o
usuário visualiza na página. Por trás do código-fonte, há os scripts
de processamento, mais conhecidos como aplicativos, que proces-
sam todas as informações enviadas.
A maior parte dos formulários é processada por scripts Commom
Gateway Interface, popularmente chamados de scripts CGI, que, na
verdade, trata-se de um padrão de envio de informações entre um
servidor e um script de processamento. A maioria desses scripts é
escrita na linguagem Perl, mas também podem ser feitos nas lingua-
gens Java, VBScript, JavaScript e C++.
Antes de criar um formulário, é importante verificar sé é possível
executar scripts CGI no seu servidor.
Os objetos dos formulários
Para acessar a barra de formulários, siga o menu Insert > Form >
Forms, ou na barra Insert, selecione Forms:
Figura 12.1.
Ao inserir um formulário, aparecem na tela linhas pontilhadas

vermelhas que servem para identificar visualmente a área do formu-
lário. Essa área é reconhecida pelas tags <form> e </form>.
Vejamos os botões de formulários presentes na barra Forms:
Nome dos botões Descrição
Form Insere um formulário na página. Serão visualizadas as

tags <form> e </form>, que abrem o formulário. É
importante que todas as informações estejam inseri-
das entre as duas tags para que os dados sejam pro-
cessados pelo navegador.

96
cap12.indd 96 5/6/2006 18:37:23

Nome dos botões Descrição
TextField Insere um campo de texto no formulário.

HiddenField Insere um campo oculto na página.
TextArea Insere uma área de texto no formulário.
CheckBox Insere uma caixa de seleção.
Radio Button Insere um botão de opções.
Radio Group Insere um grupo de botões de opções.
List/Menu Insere uma lista de opções.
Jump Menu Insere uma lista de navegação ou um menu pop-up.
Image Field Insere uma imagem.
File Field Insere um campo de texto em branco e um botão
Browse (Procurar).
Button Insere um botão de ação que realiza uma tarefa.
Tabela 12.1.
Construindo o formulário
Para criar um formulário, em um documento novo, siga o menu

Insert > Form > Form e note o contorno pontilhado em vermelho
exibido em sua página.
Ao selecionar esse contorno, você verá a barra Properties:
Figura 12.2.
Digite um nome para o formulário na opção Form Name, como,

por exemplo, Visitantes.
No campo Action (ação do formulário), especifique o caminho até
a URL na qual reside o script que vai processar as informações no
servidor. Por exemplo: http://www.digerati.com/cgi-bin/forms.cgi.
Em Method (Método), selecione a opção POST. Dessa forma, to-
dos os valores digitados no formulário serão enviados ao servidor.
A outra opção existente é GET, que serve para enviar as informa-
ções ao servidor e anexá-las à URL. Porém, essa opção não deve ser
utilizada em formulários extensos, pois as URLs têm um limite de 8.192
caracteres; caso os dados sejam enormes, os valores podem ficar trun-
cados. É importante, também, não utulizar o método GET quando as
informações solicitadas são confidenciais, como números de cartões
de crédito ou dados bancários, pois esse método não é seguro.
Formulários
97
cap12.indd 97 5/6/2006 18:37:33

Criando campos
Criada a tag de formulário, é possível, para facilitar o trabalho e

a visualização, criar uma tabela. Assim, controlamos a largura e a
altura de cada um dos objetos do formulário. Para tanto, siga o menu
Insert > Table e defina o número de linhas e colunas desejadas.
Para criar um campo de texto simples, com uma linha, faça o se-
guinte:
1. Pressione, na barra Form, o botão TextField.
2. Digite um nome para o campo na opção TextField, presente na

barra Properties do campo.
3. Para especificar a extensão do campo de texto, digite 40 na

opção Char Width.
4. Para especificar o número máximo de caracteres no campo,

use a opção Max Chars.
5. Na opção Type, defina como Single line.
6. Para que apareceça um texto inicial, ao carregar o formuláriuo

na tela, digite o texto na opção Init val (Valor inicial).
7. Pressione a tecla Enter para criar um novo parágrafo.
Tipos de campos de texto permitidos na opção Type:
Tipo Descrição
Single line Cria um campo com uma única linha, para textos curtos, como
nome, endereço, CEP e outros.
Mult line Cria um campo de texto maior, no qual podem ser digitadas
informações, como respostas, observações e outros campos
extensos. É possível determinar o número de caracteres ou de
linhas disponíveis.
Password Cria um tipo de texto especial no qual o que é digitado torna-se
oculto ou será substituído por asteriscos ou marcadores. São
utilizados para a inserção de senhas e códigos especiais.
Tabela 12.2.

98
cap12.indd 98 5/6/2006 18:37:33

Exemplo de campos com múltiplas linhas:
Figura 12.3.
A opção Wrap identifica se o texto deve ou não passar automa-

ticamente à linha seguinte (Default ou Off). A opção Virtual define
a quebra de linha na área do texto, ao passo que e a opção Physical
especifica essa quebra quanto aos dados.
Observe um exemplo de um campo de senhas:
Figura 12.4.
Campos ocultos
Alguns elementos em seu formulários podem ser invisíveis para

o usuário, com a finalidade de coletar informações ou mesmo de
enviá-las ao servidor. Todas as informações contidas em campos
ocultos são transmitidas ao servidor quando o formulário é enviado,
utilizando o nome/valor definido na configuração do campo. Veja
como criar um campo oculto:
1. Em um novo parágrafo, aperte o botão HiddenField.
2. Aparecerá um marcador em seu documento.
3. Na barra de propriedades, digite o nome do campo na opção

HiddenField.
4. Em Value, digite Catálogo de Produtos.
Formulários
99
cap12.indd 99 5/6/2006 18:37:33

5. Crie um novo campo oculto e, em HiddenField, digite Enviar
para.
6. Em Value, digite atendimento@digerati.com.br.
7. Salve a página. Observe o resultado:
Figura 12.5.
Inserindo caixas de seleção
Um campo bastante útil em formulários é aquele que permite fa-

zer com que o usuário escolha uma ou mais opções em um grupo de
itens previamente relacionados. Saiba como construí-lo:
1. Em um novo parágrafo, digite a pergunta que deseja fazer ao

usuário. Por exemplo: Qual seu prato preferido?
2. Pressione a tecla Enter para criar uma linha.
3. Use o botão CheckBox name da barra de formulários.
4. Será criada uma caixa de seleção.
5. Na barra de propriedades, digite o nome da caixa de seleção,

Carnes.
6. Em Checked value, digite Carnes ao lado do botão criado.
7. Repita os procedimentos dos passos 3 a 6 para inserir novas

opções em seu formulário.
Figura 12.6.

100
cap12.indd 100 5/6/2006 18:37:33

A opção Initial state serve para definir se, ao carregarmos o formu-
lário, a opção aparecerá como ativa (Checked) ou não (Uncheked).
Botões de opção
Para que o usuário possa selecionar apenas uma opção, você

deve utilizar o Radio Button. Observe:
1. Em um novo parágrafo, digite Estado Civil.
2. Na barra Form, dê um clique no botão Radio Button.
3. Na barra de propriedades, digite o nome do campo como Sol-

teiro.
4. Em Cheked value, digite Solteiro.
5. Em Initial state, escolha a opção Checked para que esta

apareça selecionada quando carregamos o formulário, ou
Uncheked, para que não apareça selecionada.
6. Para criar uma nova opção, repita os passos de 2 a 5. Observe

o resultado:
Figura 12.7.
Listas de rolagem
Podemos configurar uma lista de opções em um espaço limita-

do por meio do botão List/Menu. Veja como é fácil criar esse tipo
de campo:
1. Em um novo parágrafo, digite Escolha um Prato.
2. Pressione Enter e, em seguida, o botão List/Menu.
Formulários
101
cap12.indd 101 5/6/2006 18:37:33

3. Na barra de propriedades, digite o nome do campo (Carnes)
abaixo da opção List/Menu.
4. Em Type, escolha a opção List, para criar uma lista de pratos

com carne.
5. No campo Height você deve especificar o número de linhas

que serão exibidas pela lista. Digite 3.
6. Se deseja permitir ao usuário a seleção de mais de uma opção,

habilite Allow multiple.
7. Dê um clique no botão List Values para entrar com as opções

permitidas.
Figura 12.8.
8. Digite o primeiro elemento, por exemplo, Bife à parmegiana.
9. Em Value, digite Parmegiana.
10. Para criar um novo item, pressione o sinal de adição.
11. Após inserir todos os itens da lista, pressione o botão OK.
12. O campo Value deve armazenar o texto a ser enviado ao ser-

vidor quando o usuário seleciona um item.
Menus pop-up
Outro recurso do botão List/Menu da barra de formulários é o fato

de podermos criar, com facilidade, menus pop-up que permitem a
inclusão de várias opções em espaços limitados. Ao carregarmos o
menu em um navegador, estará visível somente uma das opções, mas

102
cap12.indd 102 5/6/2006 18:37:33

se clicarmos na seta que indica para baixo nesse mesmo menu, todas
as opções serão exibidas. Em bancos de dados e em outras lingua-
gens, esse tipo de campo é conhecido como caixa de combinação.
Para criar um menu pop-up, faça o seguinte:
1. Em um novo parágrafo, digite Cardápios de congelados e pres-

sione Enter.
2. Dê um clique no botão List/Menu da barra de formulários.
3. Dê um nome para o menu utilizando a opção List/Menu.
4. Pressione o botão List Values para criar a lista de elementos.
5. Digite o primeiro elemento da lista na opção Item Label.
6. Em Value digite a informação que será enviada ao servidor,

Carnes.
7. Para criar mais itens, use o sinal de adição.
8. Repita os passos de 5 a 7 para criar todos os elementos dese-

jados.
9. Para alterar a ordem de exibição, dê um clique sobre o elemen-

to e utilize a seta indicando para cima para subir o item, ou a seta
para baixo, para descê-lo.
10. Pressione OK quando terminar a lista. Observe:
Figura 12.9.
Menus de salto
É possível criar um menu suspenso com links para outras páginas

de seu site; algo similar ao menu pop-up criado anteriormente, mas,
Formulários
103
cap12.indd 103 5/6/2006 18:37:33

agora, com a facilidade de se ligar às páginas mais rapidamente.
Saiba como fazer:
1. Em uma área nova de seu formulário, digite Escolha sua opção

e pressione Enter.
2. Pressione o botão Jump Menu.
3. Na opção Text, digite o texto que deseja visualizar no menu:

Aulas particulares.
4. Na opção When selected, go to URL, digite o endereço da pági-

na para a qual deseja ir, ou pressione o botão Browse para localizá-la.
5. A opção Open URLs in permite informar onde devemos abrir

as URLs; a opção padrão é na janela principal (Main window).
6. Informe o nome do menu na opção Menu name.
7. Para acrescentar um novo item, utilize o sinal de adição.
8. Para excluir um item, dê-lhe um clique e pressione o sinal de

subtração.
9. Ao terminar, pressione o botão OK.
Figura 12.10.
Botões de comando
Criados os campos em seu formulário, será interessante enviar

seus dados ao servidor. Para tanto, você pode criar um botão de
comando conhecido como Submeter ou Enviar, que informa ao na-
vegador o envio de todos os dados de acordo com ação e método
especificados. Outro botão importante é o Limpar, que apaga todas
as informações da página e permite a inserção de novos dados. Veja
como criar o botão Submeter:

104
cap12.indd 104 5/6/2006 18:37:33

1. Posicione o ponteiro na última linha de seu formulário.
2. Dê um clique no botão Button, na barra de formulários.
3. Automaticamente, será exibido um botão com o texto Submit.
4. Na opção Button da barra de propriedades digite o nome do

botão.
5. Na opção Label digite o texto que deseja ver no botão. Pode

ser Submeter ou Enviar, por exemplo.
6. A ação do botão (Action) deve ser Submit form, para que os

dados sejam enviados ao servidor.
7. Crie outro botão com o nome Limpar, que tem a função de re-
definir o formulário (Reset form).
Figura 12.11.
Campos de imagem
Uma opção interessante em seu formuláiro é a de inserir imagens

que podem ser enviadas a outras páginas do site. Esse tipo de cam-
po é conhecido como campo de imagem.
Para criar um campo de imagem, use o botão Image Field no
local em que deseja ver a foto e selecione a figura que que queira
visualizar.
A barra de propriedades da imagem é parecida com a de uma
imagem normal. Defina um nome para a imagem na opção abaixo
de Image Field. Para alterar a largura e a altura, utilize as opções W
Formulários
105
cap12.indd 105 5/6/2006 18:37:34

(width/largura) e H (height/altura). A opção Src define o nome da
imagem de origem. Em Alt, defina o texto que deseja visualizar ao
posicionar o ponteiro do mouse sobre a imagem.
Para editar a imagem, use o botão Edit image; se necessário,
altere o alinhamento da imagem utilizando a opção Align.
Se achar interessante que a imagem abra o painel de comporta-
mentos, use o sinal de adição e escolha a opção Go to URL.
Teste seu formulário pressionando a tecla F12. Ao dar um clique
na imagem, automaticamente você será levado para a página inicial
definida na opção Alt.
Figura 12.12.
Validando formulários
Para garantir que os dados digitados pelo usuário são os que

você realmente definiu, é possível validar seu formulário para que
seja feita a verificação das informações e acidentes não aconteçam
quando enviarmos dados ao servidor.
Para validar os dados, é importante visualizar o painel de com-
portamento Window > Behaviors. Posicione o cursor no contor-
no de seu formulário, escolha o sinal de adição e, depois, a opção
Validate form.
Nesse momento, todos os campos existentes no formulário se-
rão listados na janela Validate por meio da opção Named Fields.
Selecione um campo da lista e ative a opção
Required (É necessário). Você pode definir qual tipo de dado será
aceito em seu campo com a opção Accept (Aceitar), que permite
qualquer tipo de dado (Anything), números (Number), endereço de
e-mail (Email address) ou um intervalo de números (Number from),
no qual você deve digitar o intervalo inicial e o final.
Faça isso com cada um dos campos existentes, ou seja, clique
no campo Named Fields, indique se é necessário ou não (Required)
e o tipo de dado que deve receber (Accept). Após definir todos os
campos, pressione o botão OK.
Para testar seu formulário, salve a página e pressione a tecla F12
para visualizar no navegador. Preencha o campo de e-mail com valo-
res e veja o que acontece.

106
cap12.indd 106 5/6/2006 18:37:34

Criando banners
Um diferencial para qualquer site pode ser a inserção de banners,
anúncios que chamam a atenção dos usuários.
Por padrão, a maioria dos desenvolvedores de páginas insere
banners no topo das páginas. Alguns, porém, adotam a criação de
janelas pop-up, mas, infelizmente, a maior parte dos provedores
consegue bloquear tais janelas. Portanto, a solução para esse pro-
blema pode ser a inserção de um banner que flutue sobre a página.
Veja como criá-lo:
1. Em um documento em branco, siga o menu Insert > Layout

Objects > Layer.
2. Aparecerá uma pequena moldura na tela, indicando que uma

layer foi criada.
3. Nela, insira uma imagem por meio do menu Insert > Image.
4. Nesse caso, o ideal é inserir figuras do tipo JPEG ou GIF. Se prefe-

rir, você pode inserir as animações criadas com o Macromedia Flash:
Figura 13.1.
5. Para criar um efeito de movimento em sua imagem, selecione

a camada.
Tome cuidado para não selecionar apenas a imagem. Para sele-
cionar a camada é necessário dar um clique no canto superior es-
querdo da tela (quadradinho no canto superior esquerdo da layer).
6. Para movimentar a imagem, clique-a com o botão direito do

mouse. Use a opção Record Path.
Criando banners
107
cap13.indd 107 5/6/2006 18:43:05

7. Será exibida, logo abaixo da barra de propriedades da imagem,
a barra com a linha de tempo, conhecida como timeline, que permite
animar e criar efeitos de movimento em sua imagem:
Figura 13.2.
Caso a barra Timelines não esteja sendo visualizada, você pode

ativá-la com o menu Window > Timelines ou utilizando o atalho Alt
+ F9.
8. Dê um clique na alça da camada (quadradinho no canto supe-

rior-esquerdo) e arraste a imagem pela tela.
9. Automaticamente, o Dreamweaver cria um percurso na tela.
10. O Dreamweaver exibe uma caixa de mensagens informando

quais os atributos da camada que a timeline pode animar. Vai indicar
que os atributos como topo, largura, altura, valor de índice e visibilidade
podem ser animados em uma imagem e que as alterações efetuadas
na largura e na altura da imagem não provocam efeitos no Netscape.
Figura 13.3.

108
cap13.indd 108 5/6/2006 18:43:06

11. Ative a opção AutoPlay existente na barra Timelines para que
a imagem seja executada ao abrir a página.
12. Ao testar a página com a tecla F12 você verá sua imagem sen-
do movimentada pela tela.
Sempre que quiser animar objetos do tipo imagem, você, inicial-

mente, deve inserir uma camada (layer) e, dentro desta, a imagem;
sem ela, será impossível criar efeitos de movimentação.
Outra forma de animar objetos
1. Crie um documento em branco e salve-o com o nome de

anima.html.
2. Altere as propriedades da página com o menu Modify > Page

Properties.
3. Na opção Background image, escolha uma imagem usando o

botão Browse, que deve servir como fundo de página.
4. Crie uma pequena camada com o menu Insert > Layout

Objects > Layer.
5. Na barra de propriedades, dê um nome a essa camada e defina

as propriedades L (margem esquerda) como 364, T (margem supe-
rior) como 354, W (largura) como 64 e H (altura) como 61.
6. Ative a barra Timelines usando o menu Window > Timelines.
7. Para modificar a timeline da camada selecionada, siga o menu

Modify > Timeline > Add objects to timeline.
8. O Dreamweaver irá apresentar uma caixa de mensagens infor-

mando quais atributos da imagem podem ser alterados.
10. Automaticamente, o tempo é adicionado à timeline na primei-

ra linha.
Criando banners
109
cap13.indd 109 5/6/2006 18:43:06

11. Ao arrastar o objeto (camada) para a timeline, esse objeto
aparecerá na linha de animação, na qual você pode soltar o mouse.
12. Caso uma nova camada seja inserida, o Dreamweaver coloca-

rá o objeto na linha seguinte ao canal de animação atual.
13. Dê um clique na primeira camada e insira uma imagem. Faça

o mesmo na segunda camada:
Figura 13.4.
14. Para controlar o tempo da imagem, dê um clique na barra

espessa presente na barra Timelines e arraste-a para a direita ou
para a esquerda até definir o tempo em que a imagem deve ser
apresentada.
Elementos da barra Timelines
Cada linha da barra Timelines é conhecida como um canal de ani-

mação, representando todos os elementos existentes em sua página.
Cada linha pode conter somente uma camada e cada timeline
pode receber apenas um nome. O painel Timelines pode controlar a
posição, a dimensão, a visibilidade e a ordem de empilhamento das
camadas de seu documento.
Sempre que um objeto for inserido em uma timeline, a imagem
será posicionada no quadro de número um, ou seja, a camada movi-
menta-se quadro a quadro no tempo definido por você.
A opção Fps indica o número de quadros por segundo que serão
exibidos em sua camada.
Cada quadro define o que deve acontecer com a imagem (cama-
da) na sua página. Um quadro define um ponto na animação, bem
como o seu tamanho e sua posição. Tais efeitos são chamados de
interpolação de valores, ou seja, o Dreamweaver cria valores neces-

110
cap13.indd 110 5/6/2006 18:43:06

sários para cada quadro existente a fim de produzir o caminho que
a camada deve percorrer. Portanto, uma camada teria, sempre, um
quadro inicial e um quadro final, indicados por círculos abertos no
início e no final da barra de animação.
Ao selecionar a opção Loop no painel Timelines será adiconada ao
último quadro da camada uma ação que retorna a reprodução do mo-
vimento ao quadro um, iniciando, novamente, a apresentação do obje-
to como um loop que, ao chegar ao final, retorna ao ponto de início.
Posicionando objetos
Para criar uma animação de determinada imagem, podemos utili-

zar sua barra de propriedades. Veja como fazer:
1. Selecione a camada.
2. Dê um clique na barra Timelines, mais precisamente no quadro

em que deseja criar o movimento.
3. Dessa forma, você indicará o tempo desejado.
4. Na barra de propriedades da imagem, altere as margens do topo

(T) e, a partir da esquerda (L), coloque valores diferentes dos iniciais.
5. Se quiser criar um efeito visual diferente, altere também as

propriedades de largura (W) e altura da imagem (H).
6. Salve o arquivo e teste a exibição de movimentação utilizando

a tecla F12 para visualizar seu navegador:
Figura 13.5.
Caso queira inserir alguns caracteres especiais como se fossem

botões, use o menu Insert > HTML > Special Characters:
Criando banners
111
cap13.indd 111 5/6/2006 18:43:06

Figura 13.6.
Controlando a exibição da imagem
Até agora, todas as imagens inseridas e animadas ficam “passean-

do” pela janela e isso pode ser um pouco desagradável depois de
alguns segundos de exibição. Portanto, é melhor controlar quando
deve ser iniciada e finalizada a exibição da animação. Observe:
1. Selecione a imagem.
2. Isso feito, crie duas áreas nas quais o usuário deve dar um
clique.
3. Na primeira área, o usuário deve ser levado à página informa-

da na opção de link, ao passo que na outra deve fechar a animação,
como se você trabalhasse com um banner.
4. Selecione uma das alternativas de mapeamento da imagem,

usando um dos botões da barra de propriedades (reto, circular ou
desenho livre).
5. Será apresentada uma área sombreada indicando o que está

sendo mapeado, ou seja, o local em que o usuário dará um clique
com o mouse para ativar determinada página (indicada na opção
Src).

112
cap13.indd 112 6/6/2006 11:23:52

6. Na barra Properties, crie um link com a página cardapios.html
(opção Src).
7. Na opção Target, escolha _blank para que o link seja aberto em

uma nova janela (em branco):
Figura 13.7.
8. Pronto, a área foi mapeada. Assim que o usuário posicionar o

mouse na área indicada e der um clique, será levado à página indi-
cada. Portanto, ao mapear a área dentro da imagem, procure não
fazê-lo em um espaço pequeno, pois o usuário pode não saber o que
fazer com a imagem “dançando” pela tela.
Fechando o banner
Para parar a exibição do seu banner, é preciso criar uma nova

área dentro da camada, como se estivesse criando um botão. Obser-
ve as etapas seguintes para conseguir esse efeito:
1. Dê um clique na camada com a imagem.
2. Crie uma nova camada aninhada na camada atual por meio do

menu Insert > Layouts Objects > Layer.
3. Insira uma imagem com o botão Sair nesta camada.
4. Nesse caso, o usuário deve disparar uma ação de fechar o ban-

ner e não ativar uma página qualquer. Para que funcione corretamen-
te, adicione um evento como os utilizados em comportamentos.
5. Selecione a área mapeada com o botão Sair.
Criando banners
113
cap13.indd 113 5/6/2006 18:43:06

6. Use o menu Window > Behaviors para abrir o painel de com-
portamentos no lado direito de sua tela.
7. Pressione o sinal de adição (+), pois um novo comportamento

deve ser adicionado.
8. Clique na opção Show-Hide Layer.
9. Será apresentada uma caixa de diálogos indicando quais layers

estão ativadas no momento.
10. Caso não tenha fornecido um nome para a primeira camada,

automaticamente ela será nomeada como Layer1.
11. Indique a ação que deseja para essa layer, que, no caso, deve
ser oculta.
13. Nesse caso, a ação vai ocultar a camada que possui a ima-
gem, fechando a janela atual.
14. Um evento onMouseOver foi criado pelo Dreamweaver in-

dicando que a imagem será fechada quando o usuário “passar” o
mouse sobre o botão Sair.
15. Salve o arquivo e teste a sua página apertando a tecla F12.
Nesse caso, a imagem será fechada quando o usuário passar o

mouse sobre o botão. Porém, a ação que deve ser executada é o de-
saparecimento do banner quando o usuário der-lhe um clique, e não
apenas “passar” sobre ele com o ponteiro do mouse.
Para corrigir esse ponto, dê um clique na janela Behaviors que
você acabou de criar. No comportamento onMouseOver, clique na
seta voltada para baixo a fim de trocar o comportamento.
Selecionar a opção OnClick fará com que a ação seja alterada
para o clique com o mouse.
Pronto, a partir de agora seu banner se movimenta sobre a tela e
você terá acesso às ações com um clique sobre a imagem. Ao clicar
sobre o botão Sair, o usuário fechará o banner.

114
cap13.indd 114 5/6/2006 18:43:07

Editando códigos HTML
Até agora, criamos todo o design da página sem nos preocupar-
mos com os códigos gerados pelo Dreamweaver. Muitas vezes, é
preciso acessar o código HTML subjacente à página, o que propor-
ciona maior controle das alterações e, também, uma tentativa mais
efetiva quanto às soluções de alguns problemas da página.
Suponha que você tenha alterado a fonte de um determinado
texto, mas parte dele apresenta-se com a fonte não alterada. Para
resolver esse problema, é importante editar o código HTML e mover
suas tags de forma que o texto permaneça dentro das tags de fonte.
Observe:
<font><b> texto </b></font> selecionado
Nesse caso, indicamos que somente a palavra texto aparecerá

em negrito, pois as tags /b e /font fecham a execução dos caracte-
res nesse estilo.
O Dreamweaver permite a visualização de códigos quando utiliza-
mos o botão Code, da janela de documento:
Figura 14.1.
O código HTML e a janela de design são visualizadas simultanea-

mente. Dessa forma, ao mover qualquer elemento da página, você
observará o que ocorre na janela de códigos, tornando-se fácil per-
ceber as tags básicas, como por exemplo:

115
cap14.indd 115 5/6/2006 18:46:22

Tag inicial Tag final Descrição
<p align= > </p> Faz o alinhamento do texto exis-

tente dentro das tags.
<font color = “#FF9900” </font> Altera a cor da fonte do texto
existente dentro da tags.
<i> </i> Aplica itálico nos caracteres das
tags.
<img src=”file:///C|/San- </body> Insere a imagem LogosCinza.
dra/Desktop/LogosCinza. gif, da pasta C:\Sandra, com
GIF”width=”209”height= largura de 209 pixels e altura de
”114”alt=”dolma”></body> 114 pixels, e apresenta o texto
alternativo (alt) como dolma.
Tabela 14.1.
Ao longo do desenvolvimento de seu site, você perceberá as inú-

meras tags existentes. Não se preocupe em decorá-las ou criar uma
lista de tais elementos.
Adicionar comentários em seu código
Imagine que você resolveu passar a administração de sua pági-

na para outro desenvolvedor, sendo que este não conseguiu perce-
ber quais problemas devem ser solucionados ou melhorados, con-
siderando mais fácil reiniciar o desenvolvimento da página do que
consertá-la. Para prevenir esse tipo de situação, é possível inserir
comentários, textos descritivos para transmitir a terceiros as infor-
mações necessárias, tais como a mudança de determinada imagem,
do endereço, e outros dados importantes. Observe:
1. Para inserir comentários, posicione o cursor no local que de-

seja comentar.
2. Você poderá estar na visualização no modo Design ou no modo

Code.
3. Pressione o botão Comment existente na barra Insert.
4. Digite o comentário necessário.

116
cap14.indd 116 5/6/2006 18:46:48

Figura 14.2.
Para exibir os marcadores de comentários, siga o menu View >

Visual Aids > Invisible Elements.
Inserindo palavras–chave
Outro recurso interessante é inserir palavras-chave que facilitem

a pesquisa em sites de localização, como o Google por exemplo.
Para tanto, faça o seguinte:
1. Ative a barra de inserção HTML:
Figura 14.3.
2. Clique no botão Head.
3. Selecione a opção Keywords.
4. Digite todas as palavras-chave necessárias.
Figura 14.4.
Inserindo descrições
Podemos entrar com uma definição para a página por meio do

botão Description, presente na barra de inserção HTML. Digite a
descrição de seu site e pressione o botão OK.

117
cap14.indd 117 5/6/2006 18:46:48

Figura 14.5.
Ajustando o posicionamento da janela
Com o código em HTML, você pode controlar o posicionamento

das janelas de seu site. Veja como fazer:
1. Visualize o documento.
2. Posicione o cursor sobre o link criado, ou seja, um texto que

você digitou e no qual inseriu um link.
3. Veja a janela de códigos:
Figura 14.6.
4. Nela, Você encontrará o código:
<a href=”#” onClick=”MM _ openBrWindow(‘aulas.html’,

’defi nition’,
‘scrollbars = yes,width =300,height=100’)”>legu mes
</a>.</font></p>
5. Logo após o parâmetro height (altura), digite uma vírgula,

pois você acrescentará um parâmetro e, depois, o seguinte código:
screenX=0, screenY=0, top=0, left=0
Os parâmetros screenX e screenY são utilizados pelo Netscape

e navegadores posteriores, posicionando a janela na parte superior
esquerda da tela. Por outro lado, os parâmetros top e left são para
o navegador Internet Explorer, fazendo o mesmo que os parâmetros

118
cap14.indd 118 5/6/2006 18:46:48

screenX e screenY. Nesse caso, qualquer um dos navegadores uti-
lizados pelo visitante posicionará a janela no canto superior esquer-
do da tela.
Para perceber a diferença, teste sua página no navegador e, a
seguir, altere os parâmetros para 400 para ver a diferença de posi-
cionamento da janela.
Seletores de tag
O seletor de tags permite que você acesse mais facilmente a hie-

rarquia de tags HTML, podendo ser útil para selecionar um item de
forma mais rápida.
Uma tag difícil de controlar é a de tabelas aninhadas, pois, muitas
vezes, selecionamos determinada tabela quando na verdade outra
aninhada é que acaba sendo selecionada. Veja como utilizar o sele-
tor de tags:
1. Veja o código HTML de sua página pressionando o botão Code.
2. Na barra de tags, você verá as tags criadas para o ponto em

que seu cursor está dentro do código.
3. Dê um clique com o botão direito sobre a tag <meta> ou

<head>.
4. Ative a opção Edit Tag:
Figura 14.7.
5. Rapidamente, o Dreamweaver vai exibir a tag selcionada em

uma janela à parte, permitindo alterações:
Figura 14.8.

119
cap14.indd 119 5/6/2006 18:46:48

Tags rápidas
Tags rápidas nos auxiliam a inserir tags HTML com maior rapidez.
Isso é bastante útil quando, por algum motivo, você conhece muito
bem os códigos HTML e resolve escrevê-los manualmente.
Vejamos como inserir tags rápidas:
1. Posicione o cursor no ponto de inserção entre uma imagem e

um texto.
2. Dê um clique no botão direito e use a opção Insert Tag. Será

aberta a seguinte janela:
Figura 14.9.
3. Escolha a opção HTML.
4. Escolha a tag que pretende inserir.
5. Pressione o botão Insert. Serão solicitadas algumas proprieda-

des para inserir a tag.
6. Defina as propriedades e pressione OK.
Limpando tags vazias
Muitas vezes, criamos tags que contêm problemas, como redun-

dância e o fato de serem vazias. O Dreamweaver pode limpar essas

120
cap14.indd 120 5/6/2006 18:46:48

tags para você, sendo altamente recomendável que, após a criação
de seu site, seja executado esse comando a fim de não causar trans-
tornos e lentidão em seu carregamento.
Para eliminar essas tags, siga o menu Commands > Clean Up
HTML. Aparecerá a seguinte caixa de diálogos:
Figura 14.10.
A partir de dois pontos de opções (Remove e Options), vejamos

as características dessa caixa:
Opção Descrição
Empty container tags Para remover tags vazias, como por exemplo tags
apresentadas como <b> </b>, não possuindo
qualquer texto a deixar em negrito.
Redundant nested tags Para remover tags redundantes. É útil quando se
tem um conjunto duplicado de tags dentro de ou-
tro que produz o mesmo resultado, conhecidas
como tags duplicadas, como por exemplo <b>
<b> texto negrito </b> </b>.
Non-Dreamweaver Para remover comentários em HTML que não
HTML comments pertencem ao Dreamweaver. Faz com que todos
os comentários inseridos pelo Dreamweaver se-
jam removidos.
Dreamweaver special O Dreamweaver cria várias tags que não estão no
markup padrão do HTML, como <mm:libitem>, que indi-
ca um item de biblioteca. Apenas o Dreamweaver
reconhece essa marcação, os navegadores irão
ignorá-la.
Specific tag(s) Para remover tags específicas. Permite instruir o
Dreamweaver para que remova as tags digitadas
na caixa de texto.

121
cap14.indd 121 5/6/2006 18:46:48

Opção Descrição
Combine nested <font> Opção útil para combinar tags de <font> quando
Tags when possible formatamos um texto com tags que podem ser
aninhadas.
Show log on Opção útil para mostar o registro no sistema.
completion Permite identificar os itens que o Dreamweaver
eliminou.
Tabela 14.2.
Se precissar, você pode importar todos os seus códigos para o

Microsoft Word. Basta utilizar o menu File > Import > Word Docu-
ment ou outro recurso que achar mais conveniente.

122
cap14.indd 122 5/6/2006 18:46:48

Publicando seu site
Após testar todo o seu site para verificar possíveis erros em di-
ferentes navegadores, está na hora de colocá-lo no ar, ou seja, pu-
blicá-lo.
Para isso, é importante que você obedeça aos seguintes proce-
dimentos:
• Verifique o desempenho de cada página do site para ver se os
links e botões funcionam de forma correta;
• Visualize todas as páginas em vários tipos de navegadores e
plataformas diferentes, verificando todas as fontes e cores utilizadas
pela página;
• Verifique todos os links rompidos, ajustando-os;
• Controle o tempo de download de todas as páginas e imagens
do site;
• Faça o maior número possível de relatórios.
Download de arquivos
Caso esteja trabalhando em um ambiente multi-usuários, utilize

os métodos de devoluções e retiradas para a transferência de arqui-
vos. Em sites remotos, é possível utilizar as opções Get Files e Put
Files para transferir arquivos.
O primeiro passo é contatar o provedor que vai hospedar o seu
site e verificar como é feito o gerenciamento. Normalmente, eles dis-
ponibilizarão login e senha para que você transfira e gerencie infor-
mações rapidamente.
Após contatar o provedor, faça o download e o upload de todos
os arquivos utilizados em suas páginas. Por isso, foi fundamental, no
ponto de partida, a criação de todas as páginas, imagens e botões
exatamente na mesma página, o que evita erros na hora de efetuar a
transferência de informações.
Para fazer o download de arquivos em servidores remotos, pro-
ceda da seguinte forma:
1. Use o painel de arquivos.
2. Selecione a opção Manage Sites.
Publicando seu site

123
cap15.indd 123 5/6/2006 18:48:12

Figura 15.1.
3. Na caixa Manage Sites, selecione o item desejado (O Chef em

casa).
4. Pressione o botão Edit.
5. Verifique as configurações do site remoto:
Figura 15.2.
6. Dê um clique na guia Advanced.
7. Ative a opção Remote Info, que apresenta as informações do

site remoto.

124
cap15.indd 124 5/6/2006 18:48:26

Figura 15.3.
8. Informe o método de acesso, como, por exemplo, FTP.
9. Entre com as informações necessárias e presisone OK.
10. Clique no botão Done para fechar a janela de gerenciamento

de seu site.
11. No painel Files, utilize o botão Connects to remote host (Figu-

ra 15.4), para que seja aberta uma conexão com o servidor remoto.
Figura 15.4.
12. Se, anteriormente, uma conexão foi feita, o botão irá indicar
Disconnect from remote host. Ignore essa etapa.
13. Caso os arquivos remotos estejam visíveis no painel remoto,

ignore o botão Connect e pressione o botão Get Files.
14. Selecione os arquivos do download.
15. Pressione o botão Get Files (Figura 15.5).
Figura 15.5.
Publicando seu site

125
cap15.indd 125 5/6/2006 18:48:26

16. Para eftuar o download dos arquivos da página, clique no
botão Sim. Agora, se pretende ignorar esses arquivos, pressione o
botão Não.
17. Para evitar essa caixa de diálogos no próximo download, ative

a opção Don´t show me this message again.
Efetuando o upload de arquivos

em servidores remotos
Os comandos Put Files copiam os arquivos do site local para o

site remoto, sem alterar seus status de retirada. Esse processo é
conhecido como upload. Observe:
1. Selecione o arquivo com a primeira página.
2. No painel File, dê um clique no botão Connects to remote host.
3. Será aberta uma conexão com o servidor remoto.
4. Pressione o botão Put Files (Figura 15.6).
Figura 15.6.
5. Para arquivos dependentes, clique em Sim e será feito o upload.
Clique em Cancel, na caixa de diálogos Status, para interromper

a transferência de arquivos.
Sincronizando arquivos nos sites local e remoto
Após criar todos os arquivos (páginas) nos sites local e remoto, é

possível sincronizá-los. No caso do site remoto ser um servidor FTP,
a sincronização utilizará o FTP.
1. Para sincronizar arquivos ou pastas específicas no lugar de sin-

cronizar todo o site, selecione os arquivos ou as pastas desejadas no
painel Files.

126
cap15.indd 126 5/6/2006 18:48:26

2. Dê um clique com o botão direito do mouse em um dos ar-
quivos.
3. Clique na opção Synchronize.
4. Você verá a caixa de diálogos Synchronize Files:
Figura 15.7.
5. Selecione a opção para o site inteiro.
6. Nesse caso, todo o site será sincronizado.
7. Se quiser sincronizar apenas os arquivos selecionados, use a

opção Selected Local Files Only.
8. Na opção Direction, defina uma direção para a cópia dos arqui-

vos. (veja a Tabela 15.1).
9. Pressione Preview para visualizar a sincronização.
Veja, a seguir, as possíveis direções para as cópias dos arquivos.
Opção Descrição
Put newer files to remote Carrega todos os arquivos locais que tenham
datas de modificação mais recentes do que
os seus correspondentes remotos.
Get newer files from remote Efetua o download de todos os arquivos remo-
tos com datas de modificação mais recentes
do que as de seus correspondentes locais.
Get and Put newer files Coloca as versões mais recentes de todos os
arquivos nos sites remoto e local.
Tabela 15.1.
Publicando seu site

127
cap15.indd 127 5/6/2006 18:48:26

Registrando todas as transferências
O Dreamweaver nos permite registrar todas as atividades de

transferência de arquivos com FTP. Caso ocorra um erro durante a
transferência de arquivos, o registro (FTP Log) do site irá auxiliá-lo a
fim de determinar qual foi o problema.
Para exibir o registro, use o painel Results por meio do menu
Window > Results ou da tecla F7 e ative a opção FTP Log:
Figura 15.8.

128
cap15.indd 128 5/6/2006 18:48:27

Untitled-1 1 05/06/2006 14:14:28

Dreamwiver Cs

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Dreamwiver Cs

Enviado por

Direitos autorais:

Formatos disponíveis

Untitled-1 1 05/06/2006 14:14:28

iniciais.indd 1 5/6/2006 19:04:14

Diretor Editorial Revisão

Assistência Editorial Projeto Gráfico

Dados Internacionais de Catalogação na Publicação (CIP)

P659h Pinto, Sandra Rita B.

1.Dreamweaver. – Programa de computador.

Universo dos Livros Editora Ltda.

Conselho Administrativo: Alessandro Gerardi, Alessio Fon Melozo,

iniciais.indd 2 6/6/2006 11:11:34

iniciais.indd 3 5/6/2006 19:04:18

iniciais.indd 4 5/6/2006 19:04:18

Capítulo 1 – Introdução .........................................6

Capítulo 2 – Iniciando o Dreamweaver ..................9

Capítulo 3 – Trabalhando com textos ....................17

Capítulo 4 – Trabalhando com imagens .................24

Capítulo 5 – Tabelas ...............................................29

Capítulo 6 – Folhas de estilos ................................45

Capítulo 7 – Modelos e bibliotecas ........................52

Capítulo 8 – Molduras ............................................64

Capítulo 9 – Camadas ............................................71

Capítulo 11 – Interatividade ..................................86

Capítulo 12 – Formulários .....................................96

Capítulo 13 – Criando banners ..............................107

Capítulo 14 – Editando códigos HTML ...................115

Capítulo 15 – Publicando seu site ..........................123

iniciais.indd 5 5/6/2006 19:04:18

Ao longo de todo o livro, falaremos muito sobre sites, páginas

Nota: toda tag deve ser iniciada e finalizada.

• Hipertexto: conceito que define a navegação entre segmentos

Treinamento prático em Dreamweaver

cap01.indd 6 6/6/2006 11:12:31

Antes de utilizar qualquer tipo de software é importante pegar

cap01.indd 7 6/6/2006 11:12:37

Enumere todas as páginas que devem ser incluídas, assim como

Treinamento prático em Dreamweaver

cap01.indd 8 5/6/2006 14:38:42

• Design: é a área de trabalho integrada, na qual a janela

cap02.indd 9 6/6/2006 11:13:48

Para ocultar a página de abertura que aparece sempre que o

Criando uma página em branco

Para verificar todos os elementos da área de trabalho (workspace),

Treinamento prático em Dreamweaver

cap02.indd 10 6/6/2006 11:13:48

Vejamos os elementos encontrados na área de trabalho:

cap02.indd 11 5/6/2006 14:42:55

• Barra de ferramentas Document: organiza atalhos (botões) que

É importante que antes de dar início à criação do site seja feita

Treinamento prático em Dreamweaver

cap02.indd 12 5/6/2006 14:42:55

Nessa etapa, utilizaremos o Assistente de criação para nos ajudar

Utilize o botão New e a opção Site para visualizar a janela de de-

Na primeira etapa, deve ser definido o nome do site. Para tanto,

cap02.indd 13 5/6/2006 14:42:56

Ao pressionar o botão Next você deve indicar se irá se conectar

Treinamento prático em Dreamweaver

cap02.indd 14 5/6/2006 14:42:56

Criando uma página básica

cap02.indd 15 5/6/2006 14:42:56

Algumas dicas sobre nomes de páginas

Por padrão, todo arquivo salvo possui a extensão .htm, mas, se

Informando o título do site

Treinamento prático em Dreamweaver