Saites

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 autorizao prvia por escrito da editora,
poder ser reproduzida ou transmitida sejam quais forem os meios empregados: eletrnicos, mecnicos, fotogrficos, gravao ou quaisquer outros.
Diretor Editorial
Luis Matos
Reviso
Luciana Salgado Guimares Moreira
Assistncia Editorial
Monalisa Neves
Erika S
Projeto Grfico
Daniele Ftima
Preparao dos originais

Jeferson Ferreira
Diagramao
Luciane S. Haguihara
Dados Internacionais de Catalogao na Publicao (CIP)

(Cmara Brasileira do Livro, SP, Brasil)
P659h
Pinto, Sandra Rita B.

Treinamento prtico em Dreamweaver/
Sandra Rita B. Pinto So Paulo : Digerati
Books, 2006.
128 p.
ISBN: 85-7702-047-9
1.Dreamweaver. Programa de computador.

2. Web Design. I. Ttulo.
CDD 005.3
Universo dos Livros Editora Ltda.

Rua Haddock Lobo, 347 12 andar
CEP 01414-001 So 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
Prefcio
A diferena entre uma coisa bem-feita e outras no to bem-feitas
o modo como o trabalho comea. Existe um princpio metafsico
que diz que uma coisa no pode nascer maior do que o objeto ou ser
que a gerou. Aplicado ao mundo dos trabalhos profissionais, sobretudo na rea de informtica, esse princpio pode ser bem exemplificado: da baguna no pode nascer algo organizado, da mediocridade no pode nascer nada sensacional, do simplrio no vai surgir
nada sofisticado...
Quando a Internet firmou-se, na dcada de 1990, juntamente com
a multido das empresas pontocom que aproveitaram a exploso da
Rede Mundial para ganhar dinheiro, a programao ou desenho de
pginas em HTML se tornou equivalente a um curso de engenharia
em alguma coisa muito sofisticada, como fazer foguetes ou consertar reatores nucleares. Criou-se at uma profisso, o webdesign, o
desenhista de webs, um sujeito responsvel por tornar uma pgina
funcional e atraente ao mesmo tempo.
Desde o incio da Internet, vrias pesquisas j foram feitas sobre
o tempo que as pessoas gastam olhando uma pgina Web a procura
do que desejam. Os resultados mostram que, se o desenho de uma
pgina no atrai o usurio em at 5 segundos, ele se desliga do
contedo e digita outro endereo. E essa chance nica: ao contrrio do que acontece com o controle remoto da televiso, o usurio
da Internet no d um zapping por tudo que est disponvel e retorna
no final ao mesmo canal.
Bom, no a toa que as empresas pontocom faliram... Pginas
bonitas e atraentes como as que as pesquisas advogam como as
ideais para a conquista da audincia no podem sair de algo to
simples, linear e, literalmente, textual como o HTML. HTML puro,
processado em modo texto, gera contedo escrito formatado e distribudo em certo leiaute uma pgina limpa e organizada (ou nem
tanto, dependendo do designer), mas nada mais que isso. No existem grandes recursos, ou ao menos no existem recursos que valham a pena. Afinal, o maior no pode sair do menor...
Por que no fazer, ento, com que a fonte fique maior? Foi o que
a Macromedia fez ao lanar o Dreamweaver, uma ferramenta grfica
de produo de sites que permite a edio manual de cdigo HTML,
ao mesmo tempo em que possui uma interface no formato inserirarrastar-e-soltar, comum maioria dos programas do Windows.
iniciais.indd 3
5/6/2006 19:04:18
Voc quer trabalhar com formulrios dinmicos e scripts? O Dreamweaver possibilita a insero de objetos de outras linguagens de
programao ainda durante o desenvolvimento da pgina, e ajuda
a atrelar uma ao programada a um objeto criado anteriormente.
Quer cria menus deslizantes? O Dreamweaver foi a primeira ferramenta que possibilitou a criao desse tipo de design, muito antes
das facilidades do Flash e do Java.
Por falar em Flash, o Dreamweaver tambm permite a insero
de contedo Flash dentro de pginas HTML, ou a montagem de banners e janelas de aplicativo. Isso sem falar nas opes de segurana,
servidor FTP prprio, arquivos virtuias...
Largue seus cdigos HTML escritos no Notepad, esquea o
Front Page, relegue os editores de cdigo simpticos ao esquecimento... Se voc quer uma coisa grande, bem-vindo ao mundo do
Dreamweaver.
Tadeu Carmona
iniciais.indd 4
5/6/2006 19:04:18
Sumrio
Captulo 1 Introduo .........................................6
Captulo 2 Iniciando o Dreamweaver ..................9
Captulo 3 Trabalhando com textos ....................17
Captulo 4 Trabalhando com imagens .................24
Captulo 5 Tabelas ...............................................29
Captulo 6 Folhas de estilos ................................45
Captulo 7 Modelos e bibliotecas ........................52
Captulo 8 Molduras ............................................64
Captulo 9 Camadas ............................................71
Captulo 10 Links.................................................79
Captulo 11 Interatividade ..................................86
Captulo 12 Formulrios .....................................96
Captulo 13 Criando banners ..............................107
Captulo 14 Editando cdigos HTML ...................115
Captulo 15 Publicando seu site ..........................123
iniciais.indd 5
5/6/2006 19:04:18
Introduo
Antes de comearmos a elaborar pginas 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 finalidade de utilizar o Dreamweaver, sendo que posso criar pginas em
HTML sem ter que gastar tanto com software?
A resposta simples. O Dreamweaver, alm de ser um editor de
HTML, fornece recursos de projetos diferenciados que permitem codificar e desenvolver pginas, sites e aplicaes Web. E tudo isso
sem considerar que ele auxilia na construo de aplicaes dinmicas 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 permite manipular e codificar de forma rpida todos os projetos, j que
para codificar nessa linguagem preciso no esquecer de inicializar
e finalizar tags.
Conceitos bsicos
Ao longo de todo o livro, falaremos muito sobre sites, pginas
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 necessrio na pgina. Essas tags sempre aparecem entre os
smbolos < >, como, por exemplo, <b> Palavras em negrito</b>.
Ao nos depararmos com o cdigo, o HTML d incio ao recurso negrito e finaliza o comando. Nesse caso, </b> finaliza o recurso de
exibio em negrito;
Nota: toda tag deve ser iniciada e finalizada.
Hipertexto: conceito que define a navegao entre segmentos
de textos fora de uma seqncia linear. Na verdade, como um texto interligado a diversos contedos (links);
Hipermdia: associao entre elementos de mdia, como textos, fotografias, sons e vdeos. Tais elementos possuem relao com
Treinamento prtico 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 outros pontos de vista sobre o tema;
Web: a forma como nos referimos a World Wide Web, a famosa WWW. Se buscarmos apoio na traduo da palavra, teramos
teia, o que no deixa de ser verdade, j que se trata de uma teia de
informaes difundida mundialmente;
Pginas: so arquivos que armazenam um conjunto de informaes. Normalmente, possuem a extenso .html ou .htm;
Site: local na Internet em que so armazenadas e disponibilizadas as Webs. Trata-se de um conjunto de Webs armazenadas em um
ou vrios computadores;
Home page: a primeira pgina, tambm conhecida como pgina de abertura. Pode conter ou no links inseridos a fim de levar o
usurio a outras pginas, assim como um ndice em um livro;
Web server: servidor da Web equipado com software adequado para armazenar as Webs de uma pessoa ou empresa, gerenciando
todo o acesso ao site. Sempre que voc criar um site, dever disponibiliz-lo em um servidor de acesso que ir, de fato, coloc-lo no ar;
Navegador Web: software que permite aos usurios navegarem pela Web. O mais conhecido o Internet Explorer;
Web designer: profissional responsvel por projetar todo o sistema de Webs;
Website: conjunto de pginas 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 vo
acessar. Isso significa que foram feitos os uploads de cada informao 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, definindo como os elementos devem ser distribudos na pgina inicial e escolhendo todos os tpicos, imagens e sons que pretende visualizar.
Para tanto, faa um desenho de toda essa organizao por meio
de links, ou seja, desenhe toda a sua estrutura, qual pgina levar
outra. Veja um exemplo de disponibilizao das informaes:
Introduo
7
cap01.indd 7
6/6/2006 11:12:37
Figura 1.1.
Enumere todas as pginas que devem ser includas, assim como

as que devem fazer parte do menu e da rea de links. Dessa forma,
voc no se perde, pois definiu os tpicos principais de sua pgina e
de todas as outras ligadas a ela.
Agora sim voc pode pr a mo na massa. Para isso, nos prximos captulos exploraremos o Dreamweaver e todas as suas ferramentas.

8
cap01.indd 8
5/6/2006 14:38:42
Iniciando o Dreamweaver
Por padro, o Dreamweaver est localizado na pasta Macromedia. Portanto, caso no possua um atalho na rea de trabalho, voc
deve utilizar o menu Iniciar > Todos os programas > Macromedia > Macromedia Dreamweaver MX 2004 para iniciar a utilizao
do aplicativo.
Ao abrir o Dreamweaver pela primeira vez, ser exibida uma caixa de dilogo que permite ao usurio escolher qual o layout da rea
de trabalho. Vejamos nossas opes:
Figura 2.1.
Design: a rea de trabalho integrada, na qual a janela

Document e todos os painis so ligados por uma janela de aplicao maior. Nesse caso, os painis estaro localizados direita da
tela. o layout mais recomendado para todos os tipos de usurios;
Figura 2.2.
9
cap02.indd 9
6/6/2006 11:13:48
Code: a mesma rea de trabalho, mas, nesse caso, os painis

esto localizados esquerda. Por outro lado, a janela Document exibe o cdigo. Esse tipo de rea de trabalho recomendado aos usurios j acostumados com cdigos e linguagens de programao,
principalmente em HTML.
Figura 2.3.
Para ocultar a pgina de abertura que aparece sempre que o

Dreamweaver carregado, use a opo Dont show again. Se mudar de idia, use o menu Edit > Preferences e ative a opo Show
start page.
Para iniciar o Dreamweaver, utilize a opo Design e um clique
em OK.
Criando uma pgina em branco

Para verificar todos os elementos da rea de trabalho (workspace),
devemos criar uma pgina em branco. Para tanto, siga o menu File >
New; ser apresentada a janela New Document. Isso feito, simplesmente ative a opo Create, sem escolher qualquer outra opo,
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 (botes) que
permitem a insero de vrios objetos, tais como imagens, tabelas,
camadas e outros. Possui vrias categorias, de acordo com o objeto
aplicado no documento, que so alteradas conforme utilizamos a
seta voltada para baixo ao lado da opo Common. Veja as opes
da barra Insert:
11
cap02.indd 11
5/6/2006 14:42:55
Figura 2.6.
Barra de ferramentas Document: organiza atalhos (botes) que

permitem visualizar o documento de forma diferente. So eles os
modos Code, Design e Split, que contm as duas visualizaes e
todas as opes de visualizao do documento e da transferncia
entre o site remoto e local;
Barra de ferramentas Standard: contm atalhos com operaes bsicas do menu, tais como criar um novo arquivo, salvar, recortar, colar e outros;
Barra de status: guarda todas as informaes sobre o documento 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, tambm, a alterao
de cada uma das propriedades;
Grupo de painis: conjunto de painis agrupados sob um ttulo. Esses painis podem ser deslocados na tela e tm a forma de
janelas.
importante que antes de dar incio criao do site seja feita
uma pasta na rea de trabalho do Windows capaz de armazenar todos os objetos e pginas do site. Como vimos, essa pasta vai conter
o site local que futuramente servir para passar as informaes 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 criao para nos ajudar
na criao de um site local. Para isso, abra o menu Site > Manage
Site. Observe a caixa de dilogo que ser aberta:
Figura 2.7.
Utilize o boto New e a opo Site para visualizar a janela de definio de seu site:
Figura 2.8.
Na primeira etapa, deve ser definido o nome do site. Para tanto,

digite MeuSite e pressione o boto 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 usurio se ele deseja trabalhar

com uma tecnologia de servidor ou se o site ser esttico, ou seja,
sem a tecnologia de um servidor; para isso, use a opo No, I do not
want to use a server technology e pressione Next novamente.
Nessa etapa voc deve informar como deseja trabalhar com os arquivos, dos quais, por padro, faz-se cpias locais na mquina e, em
seguida, upload no servidor (Edit local copies on my machine, then
upload to server when ready). Tambm 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 localizao, use a opo
representada pela pasta amarela ao lado do caminho atual e indique
a nova pasta. Para concluir, pressione o boto Salvar.
Figura 2.10.
Ao pressionar o boto Next voc deve indicar se ir se conectar

ao servidor remoto. Nesse caso, use a opo Nome, pois o site remoto ser configurado logo adiante.
Figura 2.11.

14
cap02.indd 14
5/6/2006 14:42:56
A ltima caixa de dilogos vai exibir as informaes de configurao de seu site, tais como nome, local do site, acesso remoto e
teste do servidor. Para finalizar, pressione o boto Done para que o
gerenciador dos sites seja finalizado:
Figura 2.12.
Pressione o boto Done para que seu site seja criado. Note que
o painel File contm a informao do nome de seu site, bem como
a sua localizao:
Figura 2.13.
Criando uma pgina bsica

Para criar uma nova pgina em seu site, siga o menu File > New
e clique na opo Basic Page na lista de categorias e em HTML na
coluna com o tipo de pgina bsica desejada. Depois, pressione o
boto Create.
Crie o hbito de salvar suas pginas logo aps a criao, ou seja,
no 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
rncia sua localizao sero criados nos locais corretos. Para salvar, use o menu File > Save ou o atalho Ctrl + S e indique o nome
da pgina.
Algumas dicas sobre nomes de pginas

Por padro, todo arquivo salvo possui a extenso .htm, mas, se
voc quiser, possvel gravar com a extenso .html; o Dreamweaver
no far distino alguma. No entanto, preciso um certo cuidado com
a criao do nome do arquivo. Para isso, leve em conta o seguinte:
No utilize os caracteres especiais, tais como %, #, &, *, >, <,
?, }, {, !, @ e [;
Procure no utilizar acentos, pois a maior parte dos sistemas
operacionais no 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 feita distino entre letras maisculas e minsculas. O ideal nomear
com todos os caracteres em minscula;
No utilize espaos em branco. Uma boa prtica utilizar caracteres de sublinhado ou hfens para simular espaos, como, por
exemplo, primeira_pagina.htm;
Evite utilizar nmeros como nomes de arquivos.
Informando o ttulo do site

Sempre que uma pgina visualizada, no topo da janela o navegador ir exibir o ttulo da pgina que, por padro, tem o nome do
seu site. Para atribuir um ttulo, digite-o na opo Title e pressione
a tecla Enter. Caso a barra de ferramentas do documento no 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 pgina, portanto, chegou a
hora de adicionar contedo, ou seja, inserir elementos de textos,
imagens e de trabalhar com cores e formataes.
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 aparncia do texto

Para alterar a aparncia do texto, necessrio, 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 utilizando a opo Font, e o tamanho, com a opo Size. Para texto em
negrito e itlico, pressione os botes representados pelas letras B e
I, respectivamente.
Outros estilos podem ser alterados quando utilizamos o menu
Text > Style e clicamos em uma das opes oferecidas.
Trabalhando com formatos de cabealhos

Na opo Format, voc encontrar seis nveis de cabealhos, nomeados de Heading 1 a Heading 6.

17
cap03.indd 17
5/6/2006 14:59:10
Figura 3.2.
Ao utilizar um estilo de cabealho, o Dreamweaver o exibe com

fontes maiores do que o corpo do texto, gerando um espao logo
abaixo do mesmo.
importante saber que, ao escolher uma fonte, ela deve estar
instalada no computador do usurio que visualiza a pgina. Tambm
deve-se levar em conta que cada usurio pode alterar o tamanho de
sua tela, a cor de seu texto bem como o tamanho da fonte empregada na exibio das pginas, portanto, o modo como o tipo de caractere exibido em sua tela pode mudar de um usurio a outro.
Devido a esse fato, a fonte que voc escolher deve estar instalada na mquina de todo mundo. As fontes instaladas instruiro o
navegador para que sejam feitas as mudanas do texto para outra
fonte, ou seja, se ao escolher uma determinada fonte ela no estiver
disponvel em seu computador, automaticamente o navegador far
uma segunda escolha e, caso essa segunda escolha no se encontre, o navegador procurar uma terceira escolha. Se nenhuma delas
estiver instalada no computador do usurio, ser utilizada uma fonte-padro.
Para escolher a lista de fontes, voc deve abrir o menu Text >
Font > Edit Font List. Observe a caixa de dilogo:
Figura 3.3.

18
cap03.indd 18
5/6/2006 14:59:11
Nela voc encontra uma lista de combinaes de fontes e pode

selecionar as que deseja visualizar por meio da opo Available
fonts. Escolha a fonte desejada e pressione <<. Para remover uma
fonte, utilize o sinal de subtrao (-) da seo Font list.
Lembre-se de que as fontes sem serifa, como a Arial e Verdana,
facilitam a leitura na tela do computador, ao contrrio das que possuem serifa, como a Times New Roman e a Script.
Figura 3.4.
Alterando a cor
Para alterar a cor dos seus textos, use a opo Text color presente no inspetor de propriedades. Uma paleta com 216 cores ser
apresentada. Ao dar um clique sobre uma cor, automaticamente o
Dreamweaver vai preencher a opo ao lado com um cdigo hexadecimal.
A forma como esta tabela funciona no nenhum enigma. Basta
saber que cada cor usa uma tabela RGB vermelho (Red), verde
(Green) e azul (Blue). O sistema de numerao hexadecimal tem por
base 16 pontos, utilizando nmeros de 0 a 9 e letras de A a F. Como
cada cor representa um cdigo de seis dgitos, os dois primeiros representam a quantidade de vermelho, os dois seguintes, a quantidade de verde e os dois ltimos, a quantidade de azul. Como exemplo,
imagine o cdigo #00FF00. Nele, indicamos 00 de vermelho, FF de
verde e 00 de azul, portanto, a cor ser um tom de verde. Caso voc
j conhea o cdigo hexadecimal que representa a cor, poder digit-lo na caixa ao lado da opo Text color.
A barra inspetor de propriedades

Alm da definio de fonte e do formato do texto, possvel alinhar e trabalhar com alguns ajustes do pargrafo, utilizando os botes 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 pargrafo com mais de uma linha e selecione-o. Para
criar um recuo, utilize o boto que avana a tabulao. Isso far com
que o texto recue para o prximo ponto de tabulao existente.
Sempre que o boto for pressionado, o seu texto ser mais recuado.
Caso queira retroceder para o ponto anterior da tabulao, use o
boto Desfazer recuo. Observe um exemplo:
Figura 3.6.
Em editores de textos, tais recuos so conhecidos como endentaes, utilizadas de forma a destacar um ou mais pargrafos, diferenciando-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

possvel criar pargrafos com listas numeradas ou com marcadores, fazendo uso dos botes 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 pargrafo e siga o menu Text > List > Ordered List ou use o atalho 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 numerao 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
definio;
Style: estilo da numerao ou dos marcadores;
Start count: quando uma lista numerada, possvel indicar
qual deve ser o nmero inicial da lista. Dessa forma, ao pressionar a
tecla Enter aps cada um dos pargrafos, o Dreamweaver ir numer-los na seqncia;
New style: permite definir o estilo do prximo pargrafo, ou
seja, do prximo item da lista.
Observe a caixa de dilogo:
Figura 3.7.
Listas de definies
Alguns dos pargrafos devem possuir termos importantes e definies desses termos, tais como em um cardpio: voc encontra o
nome do prato e, logo a seguir, os ingredientes (a definio) empregados. Nesse caso, tanto o termo importante quanto a sua definio
devem ficar em pargrafos 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 prxima linha sem criar pargrafos diferentes.
4. Digite os ingredientes do prato.
Repare que o termo (Nome do prato) est na margem esquerda e
todas as suas definies (Ingredientes) esto endentadas nas linhas
seguintes.
Figura 3.8.
Importando texto
Caso voc tenha digitado todo o texto de sua pgina em um processador, basta selecion-lo, copi-lo e col-lo. O Dreamweaver executar
as aes 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 pginas da Web
(.html) pelos processadores. Esses arquivos sero abertos em novas
janelas e determinados trechos podem ser copiados e colados para
a pgina atual.
Aps colar o texto, voc pode trabalhar com os recursos de formatao e recuos de pargrafo, como feito no caso da digitao direta, utilizando a janela de propriedades.
No caso de voc ter importado um arquivo de texto criado no Macintosh, os pargrafos sero apresentados em uma s linha, pois o
Dreamweaver depende de um caractere de avano 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
opo Code Format:

22
cap03.indd 22
5/6/2006 14:59:11
Figura 3.9.
Nesse caso, indique o espaamento das endentaes e, tambm,

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 pargrafo inserido com uma quebra de linha. No caso de
querer uma nova linha sem nenhum espao entre ela e a anterior,
digite o texto e, logo a seguir, pressione as teclas Shift + Enter para
que ele seja inserido na prxima linha, sem a quebra de pargrafo.

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

No h nada melhor do que uma imagem para representar suas
idias, ou vender seu peixe, como muitas pessoas dizem. Portanto, esquea os textos extensos e adote a insero de uma ou mais
imagens, tornando a sua pgina menos cansativa.
Inserindo imagens
D um clique em um pargrafo e siga o menu Insert > Image. A
caixa de dilogos Select Image Source ser exibida:
Figura 4.1.
Para que sejam inseridas imagens em arquivos, ative opo File

System em Select file name from e automaticamente sero exibidas
miniaturas da pasta atualmente aberta (Examinar). O Dreamweaver
pode abrir imagens nos formatos GIF, JPG, JPEG e PNG. Voc ver
as caractersticas da imagem com a opo Image preview, que informar o tamanho em pixels, formato e tamanho em bytes, bem como
o tempo de abertura.
Caso a imagem escolhida no esteja localizada na mesma pasta
em que sua pgina est sendo criada, automaticamente o Dreamweaver vai informar e perguntar se voc gostaria de criar uma cpia
da imagem para a pasta atual. Ao pressionar o boto Sim, preciso
informar a pasta e o nome da imagem inserida. Essa uma forma de
organizar as informaes em seu site, e tambm a melhor maneira
de fazer o download de informaes em uma nica pasta.

24
cap04.indd 24
5/6/2006 15:06:08
Figura 4.2.
Ao gravar a pgina, o Dreamweaver no faz referncias; ele substitui o nome do caminho (path) da localizao da imagem em seu
computador no lugar de criar um link rpido. Por isso, importante
salvar o documento antes de inserir as imagens. Se a imagem estiver fora da pasta em que seu site est, voc ver um alerta referente
inexistncia do arquivo de imagem.
Na caixa de dilogos Select Image Source, encontramos a opo
URL, utilizada para sites dinmicos, ou seja, sempre que seu documento executado em um servidor de aplicativos. Em nosso caso, no utilizamos essa opo por no estarmos criando um site dinmico.
A opo Relative to est configurada por padro como Document,
o que permite escolher como o Dreamweaver faz referncias s imagens. Elas podem ser relativas ao documento, sendo indicado o caminho para a imagem com base na localizao do documento, ou relativas raiz do site, em que o caminho indicado para a imagem com
base na localizao do documento HTML relativo raiz de seu site.
Quando o site grande, ou caso pretenda mover as pginas com certa
freqncia, o ideal utilizar a opo relativa raiz do site (Site Root).
Um atalho para a insero de imagens a barra Insert, na qual
voc encontrar o seguinte boto:
Figura 4.3.
Observao: em um site, o melhor formato para uma imagem

o tipo GIF, pois uma imagem JPEG exibe caractersticas em
demasia, como pequenos quadros carregados de informaes
sobre a cor. Sua qualidade pode ser melhor, mas, em compensao, o tamanho do arquivo muito maior.
Redimensionar imagens
Aps inserir a imagem, clique nela para observar a seguintes
opes 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 alas de seleo

(quadrinhos pretos ao redor da imagem) e arraste para a esquerda
ou direita at torn-la maior. Nesse caso, as especificaes, definidas
em largura e altura da imagem, automaticamente sero redefinidas,
mas, em compensao, a qualidade tambm se altera. A resoluo
da tela, por padro, de 72 dpi (dts por inch pontos por polegada),
sendo que essa no a resoluo ideal para exibir imagens no tamanho que voc alterou. Portanto, a exibio 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 edio para garantir que
seu tamanho e qualidade sejam melhores.
Editando a imagem
Para melhorar a aparncia da imagem utilizando softwares grficos, possvel utilizar a barra de propriedades Edit presente na
barra Properties, que contm os seguintes elementos:
Figura 4.6.
Vinculando imagens a documentos

As imagens inseridas podem guiar o visitante a pginas especficas do site, funcionando como links para botes de navegao. 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 seleo de arquivo.

Indique qual arquivo deve ser aberto e pressione OK.
Figura 4.7.
Dessa forma, sempre que a pgina for aberta e o visitante clicar

na imagem, automaticamente ser aberta a pgina de link escolhida
por voc.
Vinculando arquivos no painel Files

Para criar links com o painel de arquivos (Files), voc deve proceder da seguinte forma:
1. Clique na imagem que dever fazer referncia 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 documentos 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 opo 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 pgina, possvel fazer uso de uma ferramenta poderosa, as conhecidas tabelas.
Elas permitem enquadrar textos ao redor de uma imagem, ajustar
o alinhamento e, tambm, criar blocos de textos com endentaes.
Com esses recursos, voc ter um controle maior sobre a posio
dos elementos da pgina.
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 dilogo, encontramos as opes listadas:

Opo
Descrio
Rows
Columns
Table width
Nmero de linhas.
Nmero de colunas.
Largura da tabela.
Tabelas
29
cap05.indd 29
5/6/2006 17:05:18
Opo
Descrio
Border thickness
Cell padding
Cell spacing
Header
Caption
Align caption
Summary
Espessura da borda em pixels.

Nmero de pixels existentes em uma borda da clula.
Nmero de pixels entre as clulas adjacentes.
Insere linha para o ttulo principal.
Ttulo que ser adicionado tabela.
Alinhamento do ttulo na tabela.
Observaes que voc insere para determinar a utilidade 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 interseo de uma coluna com uma
linha conhecida como clula. Portanto, sua tabela possui 13 clulas, pois a rea em que o ttulo foi digitado (caption) abrange somente uma clula.
Fazendo ajustes no layout

possvel ajustar a largura da tabela utilizando os ponteiros
existentes na borda das clulas. Mantenha o boto do mouse pressionado em um dos ponteiros e arraste at a largura desejada.
Rapidamente, o Dreamweaver vai informar quais so as novas dimenses 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 boto pressionado enquanto arrasta
para a direita, a fim de aumentar, ou para a esquerda, a fim de diminuir a largura da coluna.

30
cap05.indd 30
5/6/2006 17:05:31
Inserindo textos
Para inserir um texto, posicione o cursor na clula em que deseja
visualiz-lo e, simplesmente, digite-o. Para mover de uma clula a
outra, pressione a tecla Tab. Ao mover o cursor para a ltima clula
da tabela e pressionar a tecla Tab, automaticamente o Dreamweaver
gera uma nova linha com o mesmo nmero de colunas da linha anterior. Ou seja, o perfil das clulas anteriores tambm 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 clula.
2. Pressione o boto direito do mouse.
3. Clique na opo Table.
4. Selecione a opo Insert Row, para que seja acrescentada uma
linha acima da posio atual do cursor.
Figura 5.4.
Para inserir colunas, d um clique com o boto direito em alguma

clula e siga o menu Table > Insert Column para acrescentar uma
coluna esquerda da posio do cursor.
Tabelas
31
cap05.indd 31
5/6/2006 17:05:31
Inserindo mais de uma linha ou coluna

No tpico anterior, voc acrescentou somente uma linha tabela.
E, como a colocou acima da posio atual do cursor, fundamental
posicion-lo em uma clula estratgica, pois voc poder inserir linhas na posio 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 clula desejada com o boto direito do mouse.
2. Selecione a opo Table.
3. Clique em Insert Rows or Columns.
4. Especifique o que deseja inserir, a quantidade e o local da insero.
Figura 5.5.
Opo
Descrio
Insert
Para determinar o que deseja inserir, se linhas (rows) ou

colunas (columns).
Number of rows Especifique o nmero de linhas ou colunas que deseja
inserir. Voc pode digitar a opo desejada ou utilizar o
controle deslizante para determinar o nmero correto.

32
cap05.indd 32
5/6/2006 17:05:32
Opo
Descrio
Where
Determine a posio em que as linhas ou colunas devem

ser inseridas: Above the selection, acima da posio do
cursor, Below the selection, abaixo.
Tabela 5.2.
Excluindo uma linha ou coluna

Para excluir uma linha, posicione o cursor na linha desejada, pressione o boto direito do mouse e siga o menu Table > Delete Row.
Nesse caso, todas as clulas da linha sero excludas automaticamente. Para excluir uma coluna, d um clique na coluna usando o
boto direito do mouse e abra o menu Table > Delete Column.
Caso queira desfazer a ltima operao, utilize o menu Edit >
Undo, ou pressione o boto Undo da barra de ferramentas:
Figura 5.6.
Mesclando clulas
Quando inserir ttulo, para que ele seja exibido exatamente no
centro das clulas, voc deve mesclar as clulas adjacentes. Dessa
forma, as clulas 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 clula na qual o texto est digitado e

todas as clulas 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 clulas, usar o boto
direito do mouse e as opes Table > Merge Cells.
Figura 5.8.
Dividindo clulas
Dependendo do trabalho, talvez seja preciso dividir as clulas em
mais de uma. Para isso, posicione o cursor na clula que ser dividida e utilize o menu Modify > Table > Split Cells ou o atalho Ctrl
+ Alt + S.
Especifique o tipo de diviso desejada, se em linhas (row) ou colunas (column), o nmero de clulas e pressione OK.
Figura 5.9.
Selecionando clulas
Posicione o cursor na clula a selecionar e pressione a tecla Ctrl.
Para selecionar mais de uma clula, 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 selecionar as clulas desejadas.
Para mesclar ou dividir clulas, voc deve selecionar mais de uma
linha, coluna e, muitas vezes, at mesmo toda a tabela. Vejamos o
que fazer para selecionar clulas.
Para selecionar toda a tabela, posicione o cursor em sua largura
e selecione a opo Select Table, ou o menu Modify > Table >
Select Table:
Figura 5.10.
Para selecionar uma coluna, faa 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 selecionar mltiplas colunas.
Para selecionar uma linha, faa 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 selecionar vrias 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 clulas no adjacentes, use a tecla Ctrl e

d um clique em cada uma das clulas 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 opes:
Figura 5.15.
Vejamos como trabalhar com cada uma das opes:

Em Table Id, digite um nome para a tabela (Figura 5.16):
Figura 5.16.
Em Rows, especifique o nmero de linhas que deseja e, em

cols, o nmero de colunas (Figura 5.17):
Figura 5.17.
Especifique a largura na opo W e a altura da tabela na opo

H. Nelas, voc poder alterar as unidades de medida, por padro
definidas em pixels (Figura 5.18), para porcentagem. Dessa forma,
poder redimensionar o tamanho levando em conta que a largura e
a altura atuais so 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 opo Cell Pad, especifique o nmero de pixels entre o contedo da clula e o limite, assim como a distncia entre as paredes
(bordas) da clula e o texto digitado. Na opo CellSpace, voc deve
especificar o nmero de pixels entre cada uma das clulas da tabela
(distncia de uma clula a outra). Observe a Figura 5.19:
Figura 5.19.
Na opo 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, possvel

no visualizar essas bordas. Para isso, ative-as com o menu View >
Visual Aids > Table Border. Dessa forma, fica mais fcil visualizar os
delimitadores de cada clula.
Para alterar o alinhamento da tabela com relao pgina, use a
opo Align e escolha o tipo de alinhamento desejado.
Figura 5.21.
Na opo 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 tanto, use a opo Bg Imagem e especifique o nome do arquivo ou, se
preferir, arraste o nome do arquivo, que deve estar na lista de arquivos existentes, para junto dessa opo:

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. prefervel inserir o logotipo em uma determinada clula:
1. Clique na clula desejada.
2. Siga o menu Insert > Image, escolha a imagem desejada e
d OK.
Alterando o layout de uma ou mais clulas

Para alterar o layout de vrias clulas, selecione-as e use a barra
Properties, que apresenta as seguintes opes:
Tabelas
39
cap05.indd 39
5/6/2006 17:05:32
Figura 5.24.
Figuras das opes
Descrio
Permite alterar o estilo dos textos existentes e
tambm as fontes utilizadas pelos estilos.
Permite alterar o estilo do pargrafo, seu tamanho
e a cor da fonte utilizada.
Permite apresentar o texto em negrito e itlico.
Permite alterar o alinhamento do texto na clula.
Permite inserir marcadores, numerao e alterar
recuos do texto na clula.
Permite definir o alinhamento horizontal e vertical
do texto com relao clula. As opes W e H
servem para especificar a largura (width) e altura
da clula (height).
Impede a quebra automtica de textos nas linhas.
Permite formatar as clulas ou linhas selecionadas
como um cabealho de tabela. Por padro, as clulas apresentadas como cabealho (header) so
apresentadas em negrito e no centro.
Permite definir uma imagem de fundo para a clula (Bg), a cor de fundo da clula e a cor da borda
(Brdr).
Tabela 5.3.

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

Aps criar a tabela, possvel 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 boto
Apply:
Figura 5.25.
Tornando as colunas em larguras consistentes

O Dreamweaver pode redimensionar a largura no cdigo HTML
para combin-lo com o aspecto visual da tabela, ou seja, possvel
tornar as clulas consistentes. Para faz-lo, clique em uma clula, abra o menu contextual e selecione a opo 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 so conhecidas como tabelas aninhadas. Para tanto, crie uma tabela e, logo a seguir, posicione o cursor em uma clula
para criar uma nova tabela nessa posio:
Figura 5.27.
Classificando os dados em tabelas

Quando uma tabela tem muitos dados, o Dreamweaver pode
classific-los, ou seja, pode criar uma ordenao para as linhas de
uma tabela ou de uma coluna. Para tanto, selecione a tabela ou uma
clula e siga o menu Commands > Sort Table:
Figura 5.28.
Opo
Descrio
Sort by
Order
Permite especificar qual coluna da tabela ser classificada.

Permite especificar o tipo de classificao (alfabtica ou
numrica), bem como a ordem da classificao (ascendente ou descendente).
Permite incluir outra coluna a classificar. Por exemplo, h
vrias linhas com a classificao de pescados e, dentro
dessa ordenao, voc deseja classificar por pores.
Then by

42
cap05.indd 42
5/6/2006 17:05:33
Opo
Descrio
Sort includes
the first row
Inclui a primeira linha da tabela na classificao. Nesse

caso, se a primeira linha tiver o ttulo das colunas, ela ser
enviada para outro local aps a classificao.
Inclui a linha de cabealhos de colunas na classificao.
Sort headers
rows
Sort footer rows Inclui as linhas de rodap na classificao.
Keep all colors Permite manter as cores das linhas da mesma forma aps
a classificao.
Tabela 5.4.
Inserindo link com textos

Para inserir um link com outra pgina, voc deve selecionar o
texto que vai armazenar o link e, na opo Link, digitar o nome da
pgina ou a imagem para a qual deseja fazer um link. Dessa forma,
quando der um clique no texto, ser apresentada a imagem ou pgina com a qual voc faz referncia (link). Observe:
Figura 5.29.
Removendo o contedo da
clula sem alterar sua estrutura
Ao apagar o contedo de uma clula, voc pode comprometer toda
a estrutura da tabela. Para evitar esse problema, selecione uma ou
mais clulas 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
opo que for mais conveniente (Excel Document, Word Document

ou Tabular Data), especifique o arquivo a ser importado e pressione
o boto Abrir:
Figura 5.30.
Exportando uma tabela

O processo inverso tambm pode ser realizado, ou seja, se voc
criou uma tabela no Dreamweaver, pode envi-la ao Microsoft Excel,
por exemplo. Para tanto, faa o seguinte:
1. Selecione a tabela.
2. Use o menu File > Export > Table. Ser aberta seguinte janela:
Figura 5.31.
3. Indique as opes de exportao, como o delimitador dos dados (Tab, espao, vrgula, ponto-e-vrgula), como devem ser tratadas as quebras de linhas (se no padro Windows, Macinstosh ou
Unix) e pressione Export.
4. Ser aberta a caixa de dilogos Export Table As.
5. Indique o nome que a tabela deve receber e pressione o boto
Salvar.

44
cap05.indd 44
6/6/2006 11:17:20
Folhas de estilos
O Dreamweaver nos permite trabalhar com padres tcnicos da
Web, os conhecidos layouts CSS.
Tais layouts surgiram em 1996 por meio de um rgo do governo
americano que aprovou a primeira verso do Cascading Style Sheets, o principal mtodo 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 pgina.
No Dreamweaver, permitido usar o CSS para adicionar blocos
de contedos e camadas (layers) para criar seu prprio layout.
Ao utilizar o CSS, o Dreamweaver apresenta rguas e guias que
facilitam nossa orientao durante a criao da pgina.
Tipos de estilos utilizados no Dreamweaver

O Dreamweaver possui trs tipos de estilos CSS. Observe:
Custom CSS Styles: tambm conhecidos como Class Style.
Permitem a aplicao de atributos do estilo aos blocos de textos;
HTML tag styles: permitem redefinir a formatao de determinada tag, tais como <font>, <h1> e outros;
CSS selector styles: permite redefinir a formatao de uma determinada combinao de tags em uma clula da tabela, como, por
exemplo, td h1, aplicada sempre que um cabealho h1 for utilizado
em uma tabela.
Criando pginas com os estilos

Para criar uma pgina em branco utilizando o CSS use o menu
File > New. Na lista Category, escolha a opo Page Design (CSS) e
escolha o layout da pgina na opo Page Design:
Figura 6.1.
Folhas de estilos
45
cap06.indd 45
5/6/2006 17:24:01
Ao pressionar o boto 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 pginas, ser apresentada a caixa de dilogos Copy Dependent Files, exibindo uma lista
de cada um dos arquivos dependentes que devem ser salvos:
Figura 6.2.
Pressione o boto Copy files to, navegue at a pasta que possui

as imagens e pressione Copy para que todos os arquivos sejam gravados junto com a pgina.
Pginas baseadas em templates

possvel criar mais de um tipo de documento no Dreamweaver.
Para tanto, vamos criar uma nova pgina baseada em um template, que servir como um modelo para outras pginas criadas. Saiba
como fazer:
1. Crie um novo documento em branco.
2. Abra o menu File > Save As Template.
3. Na opo Site, digite o nome de seu site, no caso, poder ser
O Chef em casa.
4. Informe o nome do modelo na opo Save as e pressione o
boto 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 template que voc pretende utilizar (Modelo1) e pressione o boto Create.
Figura 6.4.
Aps utilizar o modelo, a pgina 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 pgina.
Figura 6.6.
Folhas de estilos
47
cap06.indd 47
5/6/2006 17:24:19
D um clique com o boto direito do mouse sobre um estilo existente e voc ver o menu contextual:
Figura 6.7.
Atalhos do painel de estilos
Figuras Nomes
Descrio
Attach Style Sheet Abre a caixa Link external style sheet, que
permite selecionar uma folha de estilos externa a ser importada do documento atual.
Abre a caixa New CSS Style, que permite seNew CSS Style
lecionar o tipo de estilo a ser criado, se Class
style, HTML tag ou CSS selector.
Abre a caixa CSS Style definition, que perEdit Style Sheet
mite editar qualquer estilo existente no documento atual.
Remove o estilo selecionado do painel CSS
Delete CSS Style
Styles, assim como a formatao de qualquer elemento nele aplicado.
Tabela 6.1.
Criando um estilo CSS

Com a pgina Index aberta, utilize o boto New CSS Style:
Figura 6.8.

48
cap06.indd 48
5/6/2006 17:24:20
Na tabela seguinte, as opes da janela:

Opo
Descrio
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 (contm cdigos,
seletores contextuais e outros).
Permite definir se as folhas sero aplicadas em um novo arDefine in
quivo de folha de estilo ou somente no documento atual.
Tabela 6.2.
Defina as opes da seguinte forma: Name como Ttulos, Selector Type como Class e Define in como This document only. Pressione OK para concluir.
Ser apresentada a caixa de dilogos CSS Style Definition, onde
devem ser informadas as opes de Type (tipo de fonte utilizada),
Background (fundo da pgina), Block (controle de blocos de textos,
tais como alinhamentos verticais, espaamento e outros) Border (especificaes para as bordas da pgina e tabelas), List (formataes
para textos existentes no formato de listas), Positioning (posicionamento de imagens e tabelas) e Extensions (controle para quebra de
pginas).
Aps entrar com todas as especificaes desejadas para cada
uma das opes, pressione o boto 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,
faa o seguinte:
1. Abra o menu Windows > CSS Styles para visualizar a caixa de
estilos aberta.
2. Pressione o boto Attach Style Sheet e ser apresentada a
seguinte janela:
Figura 6.10.
3. Clique na opo Link.

4. No rodap da caixa de dilogos, voc deve ativar a opo
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 alteraes nas folhas de estilos. Veja como fcil:
1. No painel de folhas de estilos, d um clique no nome da folha
de estilo que deseja alterar.
2. Pressione o boto Edit Style Sheet.
Figura 6.12.
3. Clique no estilo que deseja alterar e pressione o boto Edit.

4. Faa todas as alteraes necessrias para o estilo.
5. Pressione o boto OK e, logo depois, o boto Done.
6. Pronto, as formataes sero aplicadas.
Folhas de estilos
51
cap06.indd 51
5/6/2006 17:24:20
Modelos e bibliotecas
Em captulos anteriores, voc aprendeu a criar estilos com os recursos 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 vrias pginas
linkadas em um menu, com cada uma delas representando informaes dos vrios departamentos de sua empresa. Portanto, voc
depende de cada um dos elementos de sua equipe para atualizar
as informaes pertinentes s pginas dos departamentos, e, seguramente, cada um dos funcionrios possui uma idia e um layout
diferente para suas pginas.
O ideal fazer com que cada funcionrio tenha a liberdade para
entrar com as informaes necessrias, mas que utilizem um estilo
projetado por voc, ou seja, est na hora de trabalhar melhor com
modelos. Ento, mos obra.
Criando modelos
Quando criamos um modelo, a primeira coisa a ser feita o projeto da pgina, isto , inserir tabelas, camadas, elementos grficos
e links necessrios ao projeto. Aps todas as definies, contando
com a esttica, apresentao de cores e fontes, use o menu File >
Save as Template. Indique o nome que o novo modelo deve ter e
pressione o boto Save:
Figura 7.1.
Todo arquivo com os dados de uma pgina gravado com a extenso .html. Nesse caso, porm, os modelos so gravados em arquivos com a extenso .dwt, com a localizao tambm em uma
pasta especial, a /Template/information.dwt. justamente essa a
informao que voc visualiza no ttulo de sua janela:
Figura 7.2.

52
cap07.indd 52
5/6/2006 17:42:25
Voc tambm pode dar incio ao seu trabalho criando uma pgina em branco e, logo em seguida, salv-la como um modelo. Voc
quem decide a ordem de criao de seus modelos e projetos
de pginas.
reas editveis
Essa a hora em que vamos definir todos os elementos e reas
que sua pgina deve armazenar, o espao conhecido como rea editvel, ou seja, local em que os dados podem ser inseridos.
Por padro, todas as reas de um moelo so bloqueadas. Caso
alguma informao tenha de ser inserida, preciso criar regies editveis, portanto, toda informao que no for definida como editvel
ser automaticamente bloqueada em sua pgina.
Toda e qualquer alterao na pgina deve ser feita enquanto estiver trabalhando no modelo original. No entanto, pginas que foram
construdas a partir de modelos criados por voc no permitem nenhuma alterao, a no ser nas reas conhecidas como editveis.
Criando um ttulo editvel

Para melhor exemplificar o ttulo editvel, crie uma tabela com
duas colunas e duas linhas.
Na primeira linha, selecione as duas clulas criadas e mescle-as,
a fim de utiliz-las como rea de ttulo. Para isso, selecione as duas
clulas, clique com o boto direito do mouse sobre elas e siga o
menu Table > Merge Cells.
Com o cursor na primeira linha, criaremos a primeira rea editvel. Para isso, use o menu Insert > Templates Objects > Editable
Region. Fornea um nome para a rea editvel e pressione o boto OK:
Figura 7.3.
Outra maneira de criar uma rea editvel , na barra Insert, pressiornar o boto Make Template e, logo aps, a opo Editable Region:
53
cap07.indd 53
5/6/2006 17:42:30
Figura 7.4.
Na hora de inserir reas editveis e outros elementos, como imagens, o ideal criar o hbito de no colocar acentos e outros caracteres especiais, tais como cedilha (), exclamao (!) e outros.
Com o cursor posicionado na clula em que a rea editvel foi criada, voc ver que, na barra de propriedades, aparecer o seguinte:
Figura 7.5.
Ao posicionar o cursor sobre a rea editvel, voc ver, logo acima, o nome da regio:
Figura 7.6.
Caso no esteja vendo o nome da rea editvel, utilize o menu

View > Visual Aids > Invisible Elements.
Aps criar a rea com o ttulo, importante alterar sua aparncia,
ou seja, o tamanho da fonte, a cor dos caracteres e o alinhamento do
texto. Para tanto, selecione a rea abaixo do nome da regio editvel, que tambm 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 ttulo, crie uma na qual
deve ser colocada uma imagem, como uma foto, por exemplo.
Para faz-lo, abra o menu Insert > Image Objects > Image Placeholders. D um nome para a foto e defina suas dimenses (largura
e altura), sua cor de fundo e um possvel texto alternativo. Pressione
o boto OK.
Figura 7.8.
O local para a insero da imagem j est na clula apropriada,

agora voc no poder esquecer de que preciso tornar esta rea
editvel. Para tanto, selecione a rea que acaba de criar, d um clique
sobre a imagem, um clique no boto Template e selecione a opo
Editable Region. Por fim, fornea um nome para a nova rea editvel.
Em sua pgina, voc criou duas rea editveis, ou melhor, duas
reas em que a insero de informaes ser permitida. Para verificar as reas editveis que voc criou, siga o menu Modify >
Templates; as ltimas linhas do menu iro informar todos os nomes
das regies, inclusive aquela na qual seu cursor estiver:
Figura 7.9.
Portanto, preciso lembrar de tudo o que deve ser alterado ou

includo, mesmo os links devem estar em uma regio editvel.
Uma preocupao que devemos ter em conta diz respeito criao 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 editvel, selecione a regio 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 regio editvel de um
arquivo de modelo que possui pginas subseqentes, todas as pginas modificadas na regio que voc tornou editvel sero alteradas, de forma que a regio editvel mude para refletir as alteraes
efetuadas.
Inserindo contedos opcionais

No Dreamweaver, um recurso interessante conhecido como contedo opcional, reas nas quais definimos um contedo que ser oculto ou exibido de acordo com as pginas criadas a partir de um modelo. Para criar uma rea com contedo opcional, faa 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, Pratos, e desabilite a opo Show by default (Exibir por padro). Essa
opo deve estar habilitada quando na maiorira de suas pginas o
contedo for definido como opcional.
3. Pressione o boto OK.
Na pgina que estamos criando, voc definiu que algumas reas
tm contedos opcionais, ou seja, por padro elas ficam ocultas nas
pginas criadas a partir de seu modelo. Ao criar e editar novas pginas, possvel ocultar ou exibir as reas com contedos opcionais.
Vejamos como controlar o contedo 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 opes da regio tornam-se disponveis.
4. Ative a opo Show.
5. Repare que a caixa de opes Value tem seu valor alterado. Ela
passa de oculto (False) para exibido (True).
Regies que se repetem

Algumas vezes, h determinadas reas em uma pgina que devem ser duplicadas, principalmente quando precisamos fazer vrias
entradas. O Dreamweaver pode trabalhar com essas reas e as reconhece como reas repetitivas, permitindo o controle sobre todas.
Para inserir reas repetitivas, selecione, em suas pginas, 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 boto OK:
Figura 7.11.
1. Crie uma tabela com duas linhas e trs colunas.

2. Na nova tabela, digite cabealhos na linha Pratos, na clula
direita, Sobremesas, e na ltima clula, Sopas.
3. Selecione a prxima clula em branco, abaixo do ttulo Pratos.
4. Use o menu Insert > Template Objects > Editable Regions, ou
pressione o boto Editable Region existente na barra Insert.
5. Crie uma rea editvel chamada Pratos.
57
cap07.indd 57
5/6/2006 17:42:31
6. Na prxima clula direita, crie uma rea editvel chamada

Sobremesas.
7. Na ltima clula direita, crie uma regio editvel chamada
Sopas.
8. Pronto, sua tabela dever ter a seguinte aparncia:
Figura 7.12.
Construindo pginas a partir de modelos

Aps definir as reas editveis, aquelas em que seu contedo
pode ser alterado e tambm as reas repetidas de seu site, possvel salvar o modelo criado e fech-lo para que possamos criar uma
pgina estruturada exatamente nesse modelo.
Para criar uma nova pgina, 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 recm criado (Information.dwt) e pressione o boto OK.

Insira o ttulo no local desejado e a foto que pretende colocar em
sua pgina. Repare que voc poder inserir elementos apenas nas
reas editveis.

58
cap07.indd 58
5/6/2006 17:42:31
Observe tambm que em sua pgina aparecem reas bloqueadas

nas quais a cor padro amarelo-fosco e o nome do modelo aparecer no canto superior-direito da pgina.
Caso o cursor esteja posicionado em uma rea bloqueada (regio
no-editvel), o ponteiro do mouse ter a aparncia de um crculo com
uma linha atravessada. Esse ponteiro tambm ser exibido sempre
que estiver em uma rea bloqueada, ou quando receber um clique.
Preencha todo o contedo e grave o arquivo como Pedidos.html.
Nesse caso, voc preencher uma matriz e o modelo original no 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 alteraes.
Para tanto, abra o modelo utilizado com o menu File > Open
Recent, e d um clique no arquivo Information.dwt.
Faa alguma alterao em seu modelo, como, por exemplo, alterar a parncia do ttulo principal, sua fonte ou seu tamanho.
Salve seu modelo e feche o arquivo. Anteriormente, voc pode
ter criado vrias pginas baseadas nesse modelo, mas, agora, fez
alteraes em sua matriz. Ao abrir os arquivos criados estruturados
em seu modelo, as pginas exibidas podem no refletir suas alteraes, portanto, para que elas sejam atualizadas, voc deve manter
o modelo e todas as pginas criadas tambm abertas na tela, pois,
dessa forma, ao alterar o modelo, todas as pginas seguintes, criadas a partir do modelo, sero atualizadas.
Caso o modelo e as pginas estejam fechados, abra-os e utilize o
menu Modify > Templates, selecionando a opo Update Current
Page, para que somente a pgina atual seja alterada.
Mas o que fazer se vrias pginas foram criadas com base nesse
modelo? Ora, basta abrir uma a uma e seguir o mesmo menu Modify
> Templates > Update Current Page. Outra opo verificar a alterao nos modelos, bem como nos links existentes, o que muito
mais conveniente caso vrias pginas tenham sido geradas a partir
de um modelo.
Para atualizar as pginas, use o menu Modify > Templates >
Update Pages. Para verificar o registro das alteraes, marque a
opo Show Log e, ao pressionar o boto Done, automaticamente
59
cap07.indd 59
5/6/2006 17:42:31
sero atualizadas todas as pginas, links e modelos, bem como o

tempo necessrio para todas as atualizaes:
Figura 7.14.
Trabalhando com bibliotecas

Em muitas das pginas criadas, alguns elementos tornam-se repetitivos, como botes, direitos autorais do site e esse tipo de informaes.
Como exemplo, suponha que, por padro, todas as suas pginas
possuem os direitos autorais e a data da ltima atualizao. Essas
informaes fazem parte de mais de quatro pginas criadas em seu
site, portanto, voc dever abri-las uma a uma para alter-las. Ou
seja, preciso selecionar o texto, fazer as alteraes e, logo a seguir,
salvar e fechar a pgina. Imagine ter de fazer isso uma vez por dia em
vrias pginas? Um sufoco, no mesmo?
Dessa forma, podemos chamar esses itens repetidos, tratandoos como elementos, em uma biblioteca de itens e utiliz-los sempre
que forem necessrios.
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 pgina digite o texto 2006, O Chef em Casa.
2. Para inserir a data atualizada, use o menu Insert > Date, selecione o estilo desejado da data e pressione o boto OK.
3. Salve sua pgina.
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 informao que voc acaba de inserir.
7. Arraste at o painel Assets.
8. Clique no ltimo boto 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 boto New Library, na
parte inferior do painel de grupos Library:
Figura 7.16.
Inserindo um item de biblioteca em pginas

Para inserir um item de biblioteca em uma pgina, faa o seguinte:
1. Abra a pgina 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 boto Insert existente no painel Library.
5. Automaticamente, o item ser inserido em sua pgina.
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 referncia a esse item ser feita (um cdigo em HTML inserido), mesmo que voc no 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 extenso .lbi.
Caso tenha removido um item de biblioteca acidentalmente, desde que possua vrias outras pginas com os elementos utilizados,
voc poder recri-lo rapidamente. Para isso, abra a pgina com o
item de biblioteca que voc removeu. Pressione o boto Recreate
existente no painel Assets.
Nesse caso, o item ser recriado com o mesmo nome de item
utilizado na pgina.
Para modificar um item de biblioteca, d um duplo clique sobre o
cone existente no painel Assets e, rapidamente, o mesmo ser aberto em nova janela. Faa todas as alteraes que achar conveniente.
Para atualizar todas as referncias de bibliotecas utilizadas em suas
pginas, siga o menu Modify > Library > Update Pages. Para alterar
somente a pgina corrente, a opo deve ser Modify > Library >
Update Current Page.
Da mesma forma que os modelos, automaticamente o Dreamweaver informa a atualizao de todas as referncias:
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 boto Delete, presente no painel Assets.
Veja, agora, como criar um item de biblioteca que funcionar
como referncia a menus de outras pginas:
1. Crie uma tabela com uma linha e quatro colunas.
2. Digite os textos seguintes como ttulos das colunas: Aulas,
Cardpios, Almoos e Jantares e Home.
3. Selecione o texto e formate da forma desejada.
4. Selecione o item Aulas.
5. Crie um link para a pgina correspondente.
6. Selecione o item Cardpios e crie um link para a pgina correspondente.
7. Selecione o item Almoos e Jantares e crie um link para ele.
8. Selecione o item Home e crie um link para a pgina Index.
9. Selecione a tabela criada.
10. Pressione o boto 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 pginas podem ter um menu criado.
Para isso, arraste o item Menu do painel diretamente para suas pginas.
63
cap07.indd 63
5/6/2006 17:42:31
Molduras
Voc pode dividir a pgina de seu site em vrias regies, sendo que cada uma delas funciona como uma pgina HTML diferente.
Tais divises so conhecidas como molduras ou frames. Um frame
uma parte (regio) 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 pgina no precisar ser recarregada continuamente, alm de que
cada frame conta com barras de rolagem individuais, permitindo
uma aproximao mais individual.
Por outro lado, muitos programadores preferem no trabalhar
com frames, j que estes sobrecarregam suas pginas. Outras desvantagens so o alinhamento grfico, mais difcil, e o teste de navegao, mais demorado.
Criando frames
Para criar um frame, abra um documento e escolha a categoria
Framesets, escolha um tipo de frameset e pressione o boto Create:
Figura 8.1.
Criando frames em documentos em branco

Caso voc tenha criado uma pgina em branco e deseja aplicar
layouts de frames, faa o seguinte:
1. Com o documento aberto, use a barra Insert.

64
cap08.indd 64
5/6/2006 18:06:31
2. Clique na opo Layout.

3. Pressione o boto Frames e d um clique no tipo de frame
desejado.
Figura 8.2.
Visualizando bordas dos frames

Muitas vezes, as bordas de um frame no esto visveis. Para
visualiz-las, use o menu View > Visual Aids e selecione a opo
Frame Borders.
Desenhando frames
Voc pode desenhar frames dentro de frames existentes. Para isso,
use o menu Modify > Frameset e utilize um dos itens disponveis:
Figura 8.3.
Opo
Descrio
Split Frame Left

Split Frame Right
Split Frame Up
Split Frame Down
Cria um frame esquerda do atual.

Cria um frame direita do atual.
Cria um frame acima do atual.
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 selecionado para a esquerda ou para a direita.
Redimensionando frames
A maneira mais rpida de redimensionar um frame manter o
boto 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
pgina atual. Caso algum documento no 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, automaticamente 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 rpida de fazer uma seleo manter a tecla Alt pressionada enquanto
d um clique sobre o frame desejado.
Especificando o contedo de um frame

Com o Dreamweaver, possvel especificar o contedo inicial de
um frame, ou seja, abrir determinada pgina 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 pressione OK.

4. Voc ver, no frame em que o cursor est posicionado, o arquivo aberto:
Figura 8.6.
Salvando frames
Se deseja visualizar sua pgina 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 necessrio salvar todos os arquivos associados a um conjunto 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 opes apresentadas na barra
Properties:
Figura 8.7.
Na tabela seguinte, a definio de cada um dos botes:

Boto
Definio
Permite alterar o formato do pargrafo, do texto e
da fonte utilizada.
Permite aplicar um estilo ao texto, bem como alterar seu tamanho e cor.
Permite aplicar negrito e itlico.
Permite alterar o alinhamento do texto no frame.
Permite aplicar marcadores, numerao 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
dilogos exibida, use a opo Background color.
Propriedades do frame
Selecione um frame e veja as opes da barra Properties:

68
cap08.indd 68
6/6/2006 11:19:24
Figura 8.8.
Nessa barra, possvel visualizar o nmero de linhas (rows) e colunas (columns) do frame, se h bordas (border), bem como a espessura (border width) e a cor (border color) destas. A opo Column
determina qual a medida da coluna do frame em pixels.
Inserindo ttulos em frames

Para inserir um ttulo em um frame, selecione o frame desejado e
digite o ttulo no campo Title, na barra de ferramentas.
Figura 8.9.
Utilizando target
Voc pode adicionar um link em um frame para abrir um documento existente, utilizando um destino (target) para esse link. Para
isso, no modo de visualizao de design, selecione a opo Link,
especifique o arquivo desejado e, na opo Target, selecione o frame, ou janela, no qual o documento linkado deve aparecer. Veja as
opes existentes:
Opo de target Descrio
_blank
_parent
_self
_top
Atribui o documento especificado em uma nova janela

do browser, fazendo com que a janela atual permanea
sem alteraes.
Abre o documento especificado em um frame que originou aquele em que o link aparece.
Abre o documento especificado em link no frame atual,
substituindo o contedo existente.
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
prpria janela, os nomes dos frames no aparecem na lista Target.
Alguns browsers no suportam o trabalho com frames; nesse
caso, o contedo armazenado no arquivo de frame em uma tag
conhecida como noframes.
Para visualizar frames em browsers que no oferecem suporte,
siga o menu Modify > Frameset > Edit Noframes Content e insira o
contedo como em um documento comum.

70
cap08.indd 70
5/6/2006 18:06:50
Camadas
Tambm conhecidas como layers, o Dreamweaver pode trabalhar com camadas, elementos de uma pgina HTML que podem ser
posicionados em qualquer lugar, permitindo a insero de imagens,
textos ou de qualquer outro contedo no corpo do cdigo HTML
(<body>). Uma camada uma tag <div> com posicionamento absoluto ou relativo.
Insero de camadas
Assim como as tabelas e os frames, uma camada pode conter camadas aninhadas. Para desenhar uma camada simples, use a barra
de ferramentas Insert e clique no boto Draw Layer:
Figura 9.1.
Outra maneira de inserir layers seguir o menu Insert > Layer.

Na criao 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 boto do mouse.
Caso no visualize as bordas/marcadores de cdigo das camadas, use o menu View > Visual Aids > Invisible Elements.
Aps criar a primeira camada, mantenha a tecla Ctrl pressionada
enquanto cria novas camadas, sem ter de utilizar o comando novamente.
Caso o cursor esteja posicionado em uma camada, ao criar a prxima, a camada atual se expande para receber a nova; esse recurso
conhecido como camadas aninhadas.
Visualizando a janela do
documento e a de cdigo
Caso voc tenha conhecimentos em cdigos HTML, pode querer
analisar as duas janelas simultaneamente, com um clique no boto
da Figura 9.2:
Camadas
71
cap09.indd 71
5/6/2006 18:14:54
Figura 9.2.
Figura 9.3.
Por padro, o cdigo de uma camada inserido na parte superior da

pgina, logo aps a tag <body>. A tag <div> permite que um pblico
maior visualize suas camadas. Ela cria um posicionamento da camada
em relao 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 padro 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 botes Plus

(+) ou Minus (-).
Repare que ser apresentada uma lista com o nome da camada
acompanhado por um nmero (z), o ndice de camadas criadas.
Ao selecionar uma camada com um clique do mouse, automaticamente seu nome aparecer em negrito. Para selecionar vrias camadas de uma s vez, mantenha pressionada a tecla Shift enquanto
faz a seleo:
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 selecionar mltiplas camadas.
Preferncia de camadas
Para especificar as configuraes padro 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 propriedades na barra Properties:
Figura 9.8.
Nomeando camadas
Cada camada criada vai receber um nome genrico, 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 opo

Layer ID:
Figura 9.10.
Largura e altura das camadas

Para alterar a largura e a altura de uma ou mais camadas, selecione-as e utilize as opes H (height/altura) e W (width/largura) e digite
as medidas em pixels:
Figura 9.11.
Para alterar a posio da camada em sua pgina com relao margem superior e esquerda do documento, use as opes 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, selecione a camada e arraste as alas de redimensionamento at a
largura desejada.
Alterando o posicionamento de uma camada

Para alterar a ordem em que a camada aparece na janela do documento, digite um novo valor do ndice na opo Z-Index:
Figura 9.13.
No exemplo seguinte, possvel observar que, dependendo das

camadas, devemos alterar a ordem de empilhamento. Por padro, a
primeira camada aparece abaixo da segunda, mas o resultado pode
no ser o esperado:
Figura 9.14.
Alterando a cor de fundo da camada

A cor de fundo de uma camada alterada quando utilizamos a
opo Bg color presente na barra Properties:
Figura 9.15.
Para inserir uma imagem no fundo da camada, use a opo Bg

image:
Figura 9.16.
Alterando a visibilidade da camada

Caso no 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 opes de
alinhamento apresentadas.
possvel fazer cortes em uma camada utilizando as seguintes
opes da barra Properties:
Figura 9.18.
Sobreposio de camadas
O Dreamweaver no permite criar uma tabela com camadas sobrepostas. Caso voc pretenda converter as camadas em tabelas,
ser necessrio prevenir-se com relao s sobreposies. 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 opes Most accurate, til para preservar o

layout do texto e Prevent layer overlaps, com a qual nos prevenimos
das sobreposies de camadas.
Na tabela a seguir, saiba a descrio das funcionalidades de cada
uma das opes apresentadas na figura anterior:
Opo
Descrio
Most accurate
Smallest: collapse empty cells
Less than: X pixels wide.
Use transparent GIFs
Center on page
Prevent layer overlaps
Show layers panel
Show grid
Snap to grid
Para maior preciso.

Para fechar clulas vazias.
Menores que X pixels de largura.
Utilizar GIFs transparentes.
Centralizar na pgina.
Evitar sobreposio de camadas
Mostrar o painel camadas.
Mostrar a grade.
Encaixar na grade.
Tabela 9.1.
Convertendo tabelas em camadas

O procedimento contrrio tambm pode ser aplicado, ou seja,
converter uma tabela em layers. Para isso, siga o menu Modify >
Convert > Table to Layers. Aps escolher as opes desejadas,
pressione o boto OK:
Figura 9.20.
Opes de grade e rgua

Quando trabalhar com camadas, ideal utilizar grades e rguas
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, possvel prendlas em pontos pr-determinados das grades. Para isso, use o menu
View > Grid > Snap to grid.
Para configurar as especificaes das grades existentes, siga o
menu View > Grid > Grid Settings. Voc encontrar as seguintes
opes:
Figura 9.22.
Na tabela seguinte, veja o que cada uma das opes possibilita:

Opes
Definies
Color
Show grid
Snap to grid
Spacing
Display
Permite especificar a cor das linhas de grades.

Permite exibir as linhas de grade.
Permite ancorar as camadas e objetos s grades.
Permite especificar o espaamento entre as grades.
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 algumas conexes entre imagens e documentos. Por exemplo, h em
todo site uma pgina inicial (index) que possui chamadas (conexes)
a outras pginas.
O Dreamweaver permite fazer essas conexes criando links para
documentos, imagens, arquivos de som e imagem (multimdia) ou,
ainda, para programas em que podemos fazer o download de outras
informaes.
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 conexo.
Cada pgina em seu site possui um endereo nico, conhecido
como URL (Universal Resource Locator); sempre que voc fizer a
conexo dessa pgina com outro arquivo, ser indicado o caminho
relativo ao documento ou pasta qual ele pertence.
A maioria dos aplicativos de criao de pginas entende que temos trs tipos de caminhos de link de arquivos. So eles:
Caminhos absolutos: aqueles em que so fornecidas as informaes completas para a URL, como, por exemplo http://www.digerati.com.br/livros/dreamweaver.htm, em que tanto no arquivo atual
como no linkado so fornecidas informaes absolutas (completas);
Caminhos relativos ao documento: esse tipo de caminho o mais
apropriado para os links locais da maioria das pginas da Web, pois em
suas especificaes no 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 localizao 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 vrios
servidores ou, at mesmo, um servidor capaz de hospedar vrios
sites diferentes. Por exemplo, /livros/dreamweaver.htm.
Por isso, importante armazenar os arquivos linkados e com imagens na mesma pasta em que est o seu site. Como exemplo, temos
Links
79
cap10.indd 79
5/6/2006 18:24:29
a pgina Index.htm que, por sua vez, chama a pgina Aulas e a pgina
Cardpios. Cada uma dessas pastas abre imagens, fotos e sons que
fazem referncia a outros documentos e mensagens. Para no perder
um tempo no servidor tentando localizar essas informaes, o ideal
armazenar tudo em pastas distintas. Ou seja, quanto s pginas referidas, deixe-as na raiz principal, as imagens, em uma pgina conhecida 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 necessrio digitar o nome do arquivo que deseja linkar:
Figura 10.1.
Para fazer vnculo 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 no

causar erros de digitao, utilizarmos o boto com a pasta amarela
ao lado da palavra Link. Dessa forma, o Dreamweaver procura o arquivo e transcreve, nesse local, todo o caminho:
Figura 10.3.
Sempre que utilizar a pasta amarela para fazer referncia a um

arquivo externo pasta atual, automaticamente o Dreamweaver ir
perguntar se deseja fazer uma cpia desse arquivo, evitando o transtorno 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 utilizamos a opo 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 cdigo HTML ser:
<a href=file:///C:/Documents%20and%20Settings/
Sandra/logos/aulas.JPGAulas</a>
Voc pode criar links com outros documentos, arquivos de imagem, filmes, sons, arquivos PDF, nomes, correios eletrnicos e, tambm, links nulos, que permitem anexar determinado comportamento a um objeto.
Uma maneira rpida de criar esse tipo de link digitar o nome
que lhe pertence na opo 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 opo 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 pgina que deve receber a imagem.
2. Na janela Properties, na opo Src, arraste o nome de um arquivo de imagem.
3. Na opo 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 rpida e eficiente de fazer links dar um clique no

cone Point to file (relgio), 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 viso
global de todos os arquivos que esto dentro da mesma pasta, bem
como dos links gerados. A visualizao atual recebe o nome de Local view:
Figura 10.6.
Para mudar o modo de visualizao, mude a opo Local view

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

essa janela por meio do boto 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 mtodo funciona muito bem quando voc precisa criar links
no site inteiro.
Para retornar janela do Dreamweaver, pressione novamente o
boto Expand/collapse.
Testando
Para verificar os links criados, voc pode test-los simulando a
utilizao no navegador. Para isso, basta pressionar a tecla F12 e dar
um clique em cada link gerado para ver se esto fazendo as referncias corretas.
Links de correio eletrnicos

Um link de correio eletrnico abre uma nova janela de uma nova
mensagem e utiliza o programa de correio eletrnico associado ao
navegador utilizado pelo usurio. Para saber qual esse programa
de correio eletrnico, use o menu Iniciar e clique, com o boto direito do mouse, sobre o cone Internet, ative a opo Propriedades e,
na guia Programas, voc ter todas as informaes necessrias:
Figura 10.10.
Links
83
cap10.indd 83
5/6/2006 18:24:35
Portanto, ao criar um link com um correio eletrnico, automaticamente ser exibida a janela de seu programa de correio.
Para criar um link, faa o seguinte:
1. Digite Fale conosco:
2. Com o ponto de insero logo aps os dois pontos da expresso 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 endereo eletrnico do contato e
pressione OK.
Ao testar seu site, veja que, ao clicar sobre esse endereo, automaticamente o navegador ir exibir uma janela em branco com uma
nova mensagem.
Gerenciando links
Caso voc mude os links de pastas (endereos) ao abrir sua pgina
e utilizar um link ao qual voc se referiu, automaticamente o Dreamweaver busca essa informao na pasta de seu documento atual. Esse
processo pode levar algum tempo, portanto, se a mudana foi feita,
necessrio atualiz-la. Como? Digite os links novamente.
Com esse mtodo voc percorrer link a link, efetuando a troca da informao. Para facilitar seu tabalho, voc pode indicar ao
Dreamweaver que faa a atualizao automaticamente. Veja como
fcil:
1. Use o menu Edit > Preferences.
2. Clique na categoria General.

84
cap10.indd 84
6/6/2006 11:21:00
3. Ative a opo Always (Sempre) da opo Update links when

moving files (Atualizar os links ao mover arquivos) e d OK.
Essa opo far uma atualizao automtica de todos os links
para um documento selecionado, ou de um documento selecionado
que for movido ou renomeado.
A opo Prompt, do mesmo comando, ir exibir uma caixa de
dilogos com uma lista de todos os arquivos alterados. Estando informado, voc deve pressionar o boto Update para que o Dreamweaver faa a atualizao.
Uma maneira rpida de cumprir esse processo de atualizao
criar um arquivo de cach, que armazena todas as informaes sobre
os links e seus respectivos locais no site. Para tanto, faa o seguinte:
1. Siga o menu Site > Manage Sites.
2. Selecione o site desejado com um clique.
3. Pressione o boto Edit.
4. Na caixa de dilogos Local Info, use a opo Enable cache.
Figura 10.12.
Links
85
cap10.indd 85
5/6/2006 18:24:35
Interatividade
O objetivo desse captulo criar interatividade com o visitante da
pgina mediante sobreposies e comportamentos do Dreamweaver.
Antes de qualquer coisa, importante falar um pouco sobre
comportamentos, espcies de aes do usurio (visitante da pgina) combinadas com atividades relativas ao evento disparado.
Por exemplo, quando o usurio movimenta o mouse sobre um
boto, isso dispara um evento (uma ao): alterar a imagem desse boto.
Todos os comportamentos em Dreamweaver so como cdigos
previamente escritos em linguagem JavaScript e podem ser incorporados rapidamente e sem grandes transtornos em seu site.
O Dreamweaver possui vrios comportamentos que lhe so
prprios. Caso tenha conhecimentos em JavaScript, poder crilos e anex-los em seu site. Outra coisa interessante fazer o
download de diversos comportamentos no site do Dreamweaver.
Porm, para faz-lo, preciso associar-se ao Macromedia.com,
uma operao simples e gratuita. Para o ingresso e download, utilize o seguinte endereo: http://www.macromedia.com/exchange/
dreamweaver.
Imagens cambiveis
J vimos o conceito de imagens cambiveis no Captulo 4, imagens
que mudam quando o usurio 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 opo 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 opo Rollover Image.
Como texto alternativo, possvel digitar Pratos Tpicos da Cozinha
Internacional.
Caso queira que sua imagem acesse um determinado site ou local, digite seu endereo na opo When clicked, Go to URL (Quanto
clicado, v para a URL). Dessa forma, quando o visitante clicar sobre
a imagem, ser enviado para uma pgina 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 opo em branco, o Dreamweaver

vai preenche-la com um sinal de link nulo, representado por cerquilha (#). Nesse caso, ser exibida, pelo navegador, a imagem de
uma mozinha apontando para a imagem, fazendo com que o cursor
permanea na mesma pgina. Portanto, no deixe essa opo em
branco, pois ir remover o cdigo em JavaScript que cria a sobreposio de imagens.
Por enquanto, voc est visualizando uma imagem. A interatividade ser percebida somente ao visualizar a pgina em seu navegador, por isso faa um teste pressionando a tecla F12.
Comportamentos
Agora que voc verificou como inserir imagens cambiveis, vamos aprender a criar sobreposies de imagens de forma diferente,
usando os comportamentos do Dreamweaver. D um clique sobre a
imagem cambivel que acabou de inserir e abra o painel de comportamentos 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

adio (+); com ele, inserimos novas aes. Para trocar a imagem,
pressione o sinal de adio e use a opo Swap Image (Permutar
imagem).
A imagem selecionada aparece em uma lista. Altere a imagem
cambivel utilizando a opo 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 processo do exemplo anterior, mas, nesse caso, usou uma ao (comportamento) para obter o mesmo resultado. Outra coisa importante
que, ao fornecer um nome para a imagem, facilitamos sua procura
e insero. Caso o nome no tenha sido definido, aparecer a mensagem unnamed image <img>.
A opo Preload images, por padro, aparece habilitada, indicando que importante pr-carregar as imagens. Nesse caso, as imagens que sero trocadas, substituindo as originais, sero carregadas
junto com o restante da pgina, sobrepondo-as rapidamente e eliminando o atraso que, geralmente, ocorre no download sempre que o
usurio posiciona o ponteiro do mouse sobre a imagem.
Outra opo que vem habilitada por padro Restore images
onMouseOut (Restaurar as imagens onMouseOut), que permite a
reverso para as imagens originais quando o usurio sair.
Aps clicar no boto OK, voc ver o comportamento definido
no painel:
Figura 11.3.
Nesse exemplo, voc tornou uma imagem cambivel. Vejamos,

agora, o que fazer para trocar vrias imagens com um evento:
1. Abra a pgina com as imagens que voc inseriu.
2. Ative o painel de comportamentos (menu Window > Behaviors).
3. Use o sinal de adio.
4. Ative a opo Swap Images.
5. Veja o que acontece caso no 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 opo Browse para trocar a imagem.
8. Indique qual deve ser a imagem cambivel (Set source to).
9. Repita os passos de 6 a 8 at trocar todas as imagens necessrias.
Exibindo mensagens pop-up

possvel apresentar pequenas caixas de dilogos ao usurio
clicando em algum boto ou texto inserido. Para testar esse tipo de
efeito, faa o seguinte:
1. Digite o texto Cardpios.
2. Selecione-o.
3. Use o sinal de adio (+) do painel de comportamentos.
4. Ative a opo Popup Message.
Figura 11.5.
5. Digite a mensagem que o usurio vai visualizar.

Para ver o que ocorre, faa 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 so

as existentes na barra de status. Para tanto, selecione uma imagem
e, novamente, ative o sinal de adio no painel de comportamentos.
Siga o menu Set Text > Set Text of Status Bar. Ser aberta a seguinte janela:
Figura 11.7.
Digite a mensagem que deseja ver na barra de status e pressione OK.

Faa um teste em seu navegador e, ao movimentar o mouse sobre a imagem, ver a mensagem sendo exibida na barra de status
de sua pgina.
Figura 11.8.
Menus flutuantes
Outro comportamento bastante utilizado o que cria menus flutuantes com aes criadas no ambiente JavaScript. Tais menus so
exibidos em navegadores Netscape e em Explorer, mas, provavelmente, no ter os mesmos efeitos se o usurio estiver utilizando o
navegador Opera.
Selecione a imagem desejada e use o sinal de adio do painel
de comportamentos. Ative a opo Show Pop-Up Menu para ver a
caixa de dilogos:
Figura 11.9.

90
cap11.indd 90
5/6/2006 18:31:43
1. Digite Cardpios na opo Text.

2. Na opo Link, digite a pgina que deseja visualizar, por exemplo cardpios.html.
3. Pressione o sinal de adio para criar um novo item de menu.
4. Caso queira criar um subitem de menu, use o boto da Figura
11.10:
Figura 11.10.
5. Aps criar todas as opes do menu, voc ter a seguinte configurao:
Figura 11.11.
Para remover um item do menu, d-lhe um clique e pressione o

sinal de subtrao.
Para mover os itens, voc deve dar um clique na opo desejada
e utilizar as setas para cima ou para baixo.
Concluda a criao de seu menu, pressione OK. Para conferir o
resultado, faa um teste na janela de seu navegador:
Figura 11.12.
Interatividade
91
cap11.indd 91
5/6/2006 18:31:43
Alterando a aparncia do menu

No painel de comportamento, d um duplo clique sobre a ao
Show Pop-Up Menu para ver a caixa de dilogos que acabou de utilizar. D um clique na guia Appearance e veja as opes existentes:
Figura 11.13.
Para alterar a exibio do menu, use as opes Vertical ou Horizontal Menu. As fontes devem ser alteradas por meio da opo
Font, Size, B (negrito) e I (itlico).
As opes de Up state indicam o estado do menu quando o ponteiro do mouse for pressionado e as opes de Over state funcionam quando o ponteiro estiver sobre ele.
Para alterar a aparncia das clulas (bordas ao redor do texto), utilize a guia Advanced, na qual voc encontrar as seguintes opes:
Opo
Descrio
Cell width
Cell height
Cell padding
Text indent
Cell spacing
Show borders
Border width
Shadow
Border color
Highlight
Define a largura da clula.

Define a altura da clula.
Define o espao em branco antes do menu.
Define o espaamento das clulas.
Define o espaamento do texto dentro da clula.
Exibe bordas ao redor das clulas.
Altera a largura da linha de borda das clulas.
Permite definir a cor do sombreamento da clula.
Permite definir a cor da borda das clulas.
Permite definir a cor do brilho das clulas.
Tabela 11.1.

92
cap11.indd 92
6/6/2006 11:21:39
Para definir o posicionamento do menu com relao imagem,

utilize a guia Position:
Figura 11.14.
Incorporando som imagem ou ao texto

Um evento que pode chamar a ateno do visitante de seu site
uma msica ou um sinal sonoro que pode ser incorporado ao texto
selecionado ou imagem. Para tanto, selecione a imagem ou o texto, utilize o sinal de adio do painel de comportamentos e ative a
opo Play Sound.
Indique o nome do arquivo de som que deseja incorporar e pressione 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 visitante pode causar alguns transtornos na hora de exibir e executar
as camadas e animaes. Devido a esse fato, importante detectar
quais os navegadores esto sendo utilizados e tentar redirecionar os
usurios para outra pgina.
Nesse caso, quando o usurio estiver utilizando um navegador
diferente, possvel criar uma pgina esttica sem as camadas ou
animaes, redirecionando-a com navegadores do Explorer 4.0 para
pginas com animaes.
Para verificar esse comportamento, selecione a tag <body> para
redirecionar o usurio antes que a pgina 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 adio e ative a

opo Check Browser:
Figura 11.17.
No caso do Netscape, ou de navegadores mais avanados, como

o Internet Explorer 4.0, direcione a URL (Go to URL), indicando para
qual pgina o visitante dever ir.
As opes de Otherwise permitem o redirecionamento com a
continuidade na pgina.
Caso utilize outros navegadores, marque a opo Other browsers e direcione o visitante para alguma pgina.
A opo URL permite especificar a pgina para a qual os usurios
dos navegadores mais recentes sero redirecionados. Ao pressionar
a tecla OK, ser inserido o cdigo JavaScript na pgina.
Abrindo a janela do navegador

Quando sua pgina for carregada, possvel exibir informaes
como anncios, promoes 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 adio
do painel de comportamentos e a opo Open Browser Window:
Figura 11.18.
Na opo URL to display indique qual pgina (URL) ser exibida.

A largura da janela deve ser definida na opo Window width e a
altura em Window height.
Controle todos os atributos da janela utilizando as opes Navigation toolbar (Barra de ferramenta de navegao), Menu bar (Barra de menus), Location toolbar (Barra de ferramenta local), Status
bar (Barra de status), Scrollbars as needed (Barras de rolagem, se
necessrias), Resize handles (Alas de preenchimento) e Window
name, para definir o nome da janela.
Interatividade
95
cap11.indd 95
5/6/2006 18:31:44
Formulrios
Se pretende interagir com o usurio solicitando informaes,
como o endereo de e-mail do visitante, voc pode contar com os
formulrios que, alm de colher informaes, permitem maior rapidez na venda de seu produto.
Quando falamos de formulrios, falamos tambm de um cdigo-fonte escrito em HTML que armazena as informaes sobre o
formulrio, como, por exemplo, todos os campos e botes que o
usurio visualiza na pgina. Por trs do cdigo-fonte, h os scripts
de processamento, mais conhecidos como aplicativos, que processam todas as informaes enviadas.
A maior parte dos formulrios processada por scripts Commom
Gateway Interface, popularmente chamados de scripts CGI, que, na
verdade, trata-se de um padro de envio de informaes entre um
servidor e um script de processamento. A maioria desses scripts
escrita na linguagem Perl, mas tambm podem ser feitos nas linguagens Java, VBScript, JavaScript e C++.
Antes de criar um formulrio, importante verificar s possvel
executar scripts CGI no seu servidor.
Os objetos dos formulrios

Para acessar a barra de formulrios, siga o menu Insert > Form >
Forms, ou na barra Insert, selecione Forms:
Figura 12.1.
Ao inserir um formulrio, aparecem na tela linhas pontilhadas

vermelhas que servem para identificar visualmente a rea do formulrio. Essa rea reconhecida pelas tags <form> e </form>.
Vejamos os botes de formulrios presentes na barra Forms:
Nome dos botes Descrio
Form
Insere um formulrio na pgina. Sero visualizadas as

tags <form> e </form>, que abrem o formulrio.
importante que todas as informaes estejam inseridas entre as duas tags para que os dados sejam processados pelo navegador.

96
cap12.indd 96
5/6/2006 18:37:23
Nome dos botes
Descrio
TextField
HiddenField
TextArea
CheckBox
Radio Button
Radio Group
List/Menu
Jump Menu
Image Field
File Field
Insere um campo de texto no formulrio.

Insere um campo oculto na pgina.
Insere uma rea de texto no formulrio.
Insere uma caixa de seleo.
Insere um boto de opes.
Insere um grupo de botes de opes.
Insere uma lista de opes.
Insere uma lista de navegao ou um menu pop-up.
Insere uma imagem.
Insere um campo de texto em branco e um boto
Browse (Procurar).
Insere um boto de ao que realiza uma tarefa.
Button
Tabela 12.1.
Construindo o formulrio
Para criar um formulrio, em um documento novo, siga o menu
Insert > Form > Form e note o contorno pontilhado em vermelho
exibido em sua pgina.
Ao selecionar esse contorno, voc ver a barra Properties:
Figura 12.2.
Digite um nome para o formulrio na opo Form Name, como,

por exemplo, Visitantes.
No campo Action (ao do formulrio), especifique o caminho at
a URL na qual reside o script que vai processar as informaes no
servidor. Por exemplo: http://www.digerati.com/cgi-bin/forms.cgi.
Em Method (Mtodo), selecione a opo POST. Dessa forma, todos os valores digitados no formulrio sero enviados ao servidor.
A outra opo existente GET, que serve para enviar as informaes ao servidor e anex-las URL. Porm, essa opo no deve ser
utilizada em formulrios extensos, pois as URLs tm um limite de 8.192
caracteres; caso os dados sejam enormes, os valores podem ficar truncados. importante, tambm, no utulizar o mtodo GET quando as
informaes solicitadas so confidenciais, como nmeros de cartes
de crdito ou dados bancrios, pois esse mtodo no seguro.
Formulrios
97
cap12.indd 97
5/6/2006 18:37:33
Criando campos
Criada a tag de formulrio, possvel, para facilitar o trabalho e
a visualizao, criar uma tabela. Assim, controlamos a largura e a
altura de cada um dos objetos do formulrio. Para tanto, siga o menu
Insert > Table e defina o nmero de linhas e colunas desejadas.
Para criar um campo de texto simples, com uma linha, faa o seguinte:
1. Pressione, na barra Form, o boto TextField.
2. Digite um nome para o campo na opo TextField, presente na
barra Properties do campo.
3. Para especificar a extenso do campo de texto, digite 40 na
opo Char Width.
4. Para especificar o nmero mximo de caracteres no campo,
use a opo Max Chars.
5. Na opo Type, defina como Single line.
6. Para que aparecea um texto inicial, ao carregar o formulriuo
na tela, digite o texto na opo Init val (Valor inicial).
7. Pressione a tecla Enter para criar um novo pargrafo.
Tipos de campos de texto permitidos na opo Type:
Tipo
Descrio
Single line Cria um campo com uma nica linha, para textos curtos, como
nome, endereo, CEP e outros.
Cria um campo de texto maior, no qual podem ser digitadas
Mult line
informaes, como respostas, observaes e outros campos
extensos. possvel determinar o nmero de caracteres ou de
linhas disponveis.
Password Cria um tipo de texto especial no qual o que digitado torna-se
oculto ou ser substitudo por asteriscos ou marcadores. So
utilizados para a insero de senhas e cdigos especiais.
Tabela 12.2.

98
cap12.indd 98
5/6/2006 18:37:33
Exemplo de campos com mltiplas linhas:
Figura 12.3.
A opo Wrap identifica se o texto deve ou no passar automaticamente linha seguinte (Default ou Off). A opo Virtual define
a quebra de linha na rea do texto, ao passo que e a opo Physical
especifica essa quebra quanto aos dados.
Observe um exemplo de um campo de senhas:
Figura 12.4.
Campos ocultos
Alguns elementos em seu formulrios podem ser invisveis para
o usurio, com a finalidade de coletar informaes ou mesmo de
envi-las ao servidor. Todas as informaes contidas em campos
ocultos so transmitidas ao servidor quando o formulrio enviado,
utilizando o nome/valor definido na configurao do campo. Veja
como criar um campo oculto:
1. Em um novo pargrafo, aperte o boto HiddenField.
2. Aparecer um marcador em seu documento.
3. Na barra de propriedades, digite o nome do campo na opo
HiddenField.
4. Em Value, digite Catlogo de Produtos.
Formulrios
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 pgina. Observe o resultado:
Figura 12.5.
Inserindo caixas de seleo

Um campo bastante til em formulrios aquele que permite fazer com que o usurio escolha uma ou mais opes em um grupo de
itens previamente relacionados. Saiba como constru-lo:
1. Em um novo pargrafo, digite a pergunta que deseja fazer ao
usurio. Por exemplo: Qual seu prato preferido?
2. Pressione a tecla Enter para criar uma linha.
3. Use o boto CheckBox name da barra de formulrios.
4. Ser criada uma caixa de seleo.
5. Na barra de propriedades, digite o nome da caixa de seleo,
Carnes.
6. Em Checked value, digite Carnes ao lado do boto criado.
7. Repita os procedimentos dos passos 3 a 6 para inserir novas
opes em seu formulrio.
Figura 12.6.

100
cap12.indd 100
5/6/2006 18:37:33
A opo Initial state serve para definir se, ao carregarmos o formulrio, a opo aparecer como ativa (Checked) ou no (Uncheked).
Botes de opo
Para que o usurio possa selecionar apenas uma opo, voc
deve utilizar o Radio Button. Observe:
1. Em um novo pargrafo, digite Estado Civil.
2. Na barra Form, d um clique no boto Radio Button.
3. Na barra de propriedades, digite o nome do campo como Solteiro.
4. Em Cheked value, digite Solteiro.
5. Em Initial state, escolha a opo Checked para que esta
aparea selecionada quando carregamos o formulrio, ou
Uncheked, para que no aparea selecionada.
6. Para criar uma nova opo, repita os passos de 2 a 5. Observe
o resultado:
Figura 12.7.
Listas de rolagem
Podemos configurar uma lista de opes em um espao limitado por meio do boto List/Menu. Veja como fcil criar esse tipo
de campo:
1. Em um novo pargrafo, digite Escolha um Prato.
2. Pressione Enter e, em seguida, o boto List/Menu.
Formulrios
101
cap12.indd 101
5/6/2006 18:37:33
3. Na barra de propriedades, digite o nome do campo (Carnes)

abaixo da opo List/Menu.
4. Em Type, escolha a opo List, para criar uma lista de pratos
com carne.
5. No campo Height voc deve especificar o nmero de linhas
que sero exibidas pela lista. Digite 3.
6. Se deseja permitir ao usurio a seleo de mais de uma opo,
habilite Allow multiple.
7. D um clique no boto List Values para entrar com as opes
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 adio.
11. Aps inserir todos os itens da lista, pressione o boto OK.
12. O campo Value deve armazenar o texto a ser enviado ao servidor quando o usurio seleciona um item.
Menus pop-up
Outro recurso do boto List/Menu da barra de formulrios o fato
de podermos criar, com facilidade, menus pop-up que permitem a
incluso de vrias opes em espaos limitados. Ao carregarmos o
menu em um navegador, estar visvel somente uma das opes, mas

102
cap12.indd 102
5/6/2006 18:37:33
se clicarmos na seta que indica para baixo nesse mesmo menu, todas
as opes sero exibidas. Em bancos de dados e em outras linguagens, esse tipo de campo conhecido como caixa de combinao.
Para criar um menu pop-up, faa o seguinte:
1. Em um novo pargrafo, digite Cardpios de congelados e pressione Enter.
2. D um clique no boto List/Menu da barra de formulrios.
3. D um nome para o menu utilizando a opo List/Menu.
4. Pressione o boto List Values para criar a lista de elementos.
5. Digite o primeiro elemento da lista na opo Item Label.
6. Em Value digite a informao que ser enviada ao servidor,
Carnes.
7. Para criar mais itens, use o sinal de adio.
8. Repita os passos de 5 a 7 para criar todos os elementos desejados.
9. Para alterar a ordem de exibio, d um clique sobre o elemento 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
possvel criar um menu suspenso com links para outras pginas
de seu site; algo similar ao menu pop-up criado anteriormente, mas,
Formulrios
103
cap12.indd 103
5/6/2006 18:37:33
agora, com a facilidade de se ligar s pginas mais rapidamente.

Saiba como fazer:
1. Em uma rea nova de seu formulrio, digite Escolha sua opo
e pressione Enter.
2. Pressione o boto Jump Menu.
3. Na opo Text, digite o texto que deseja visualizar no menu:
Aulas particulares.
4. Na opo When selected, go to URL, digite o endereo da pgina para a qual deseja ir, ou pressione o boto Browse para localiz-la.
5. A opo Open URLs in permite informar onde devemos abrir
as URLs; a opo padro na janela principal (Main window).
6. Informe o nome do menu na opo Menu name.
7. Para acrescentar um novo item, utilize o sinal de adio.
8. Para excluir um item, d-lhe um clique e pressione o sinal de
subtrao.
9. Ao terminar, pressione o boto OK.
Figura 12.10.
Botes de comando
Criados os campos em seu formulrio, ser interessante enviar
seus dados ao servidor. Para tanto, voc pode criar um boto de
comando conhecido como Submeter ou Enviar, que informa ao navegador o envio de todos os dados de acordo com ao e mtodo
especificados. Outro boto importante o Limpar, que apaga todas
as informaes da pgina e permite a insero de novos dados. Veja
como criar o boto Submeter:

104
cap12.indd 104
5/6/2006 18:37:33
1. Posicione o ponteiro na ltima linha de seu formulrio.

2. D um clique no boto Button, na barra de formulrios.
3. Automaticamente, ser exibido um boto com o texto Submit.
4. Na opo Button da barra de propriedades digite o nome do
boto.
5. Na opo Label digite o texto que deseja ver no boto. Pode
ser Submeter ou Enviar, por exemplo.
6. A ao do boto (Action) deve ser Submit form, para que os
dados sejam enviados ao servidor.
7. Crie outro boto com o nome Limpar, que tem a funo de redefinir o formulrio (Reset form).
Figura 12.11.
Campos de imagem
Uma opo interessante em seu formuliro a de inserir imagens
que podem ser enviadas a outras pginas do site. Esse tipo de campo conhecido como campo de imagem.
Para criar um campo de imagem, use o boto 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 opo abaixo
de Image Field. Para alterar a largura e a altura, utilize as opes W
Formulrios
105
cap12.indd 105
5/6/2006 18:37:34
(width/largura) e H (height/altura). A opo 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 boto Edit image; se necessrio,
altere o alinhamento da imagem utilizando a opo Align.
Se achar interessante que a imagem abra o painel de comportamentos, use o sinal de adio e escolha a opo Go to URL.
Teste seu formulrio pressionando a tecla F12. Ao dar um clique
na imagem, automaticamente voc ser levado para a pgina inicial
definida na opo Alt.
Figura 12.12.
Validando formulrios
Para garantir que os dados digitados pelo usurio so os que
voc realmente definiu, possvel validar seu formulrio para que
seja feita a verificao das informaes e acidentes no aconteam
quando enviarmos dados ao servidor.
Para validar os dados, importante visualizar o painel de comportamento Window > Behaviors. Posicione o cursor no contorno de seu formulrio, escolha o sinal de adio e, depois, a opo
Validate form.
Nesse momento, todos os campos existentes no formulrio sero listados na janela Validate por meio da opo Named Fields.
Selecione um campo da lista e ative a opo
Required ( necessrio). Voc pode definir qual tipo de dado ser
aceito em seu campo com a opo Accept (Aceitar), que permite
qualquer tipo de dado (Anything), nmeros (Number), endereo de
e-mail (Email address) ou um intervalo de nmeros (Number from),
no qual voc deve digitar o intervalo inicial e o final.
Faa isso com cada um dos campos existentes, ou seja, clique
no campo Named Fields, indique se necessrio ou no (Required)
e o tipo de dado que deve receber (Accept). Aps definir todos os
campos, pressione o boto OK.
Para testar seu formulrio, salve a pgina e pressione a tecla F12
para visualizar no navegador. Preencha o campo de e-mail com valores 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 insero de banners,
anncios que chamam a ateno dos usurios.
Por padro, a maioria dos desenvolvedores de pginas insere
banners no topo das pginas. Alguns, porm, adotam a criao de
janelas pop-up, mas, infelizmente, a maior parte dos provedores
consegue bloquear tais janelas. Portanto, a soluo para esse problema pode ser a insero de um banner que flutue sobre a pgina.
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 preferir, voc pode inserir as animaes criadas com o Macromedia Flash:
Figura 13.1.
5. Para criar um efeito de movimento em sua imagem, selecione

a camada.
Tome cuidado para no selecionar apenas a imagem. Para selecionar a camada necessrio dar um clique no canto superior esquerdo da tela (quadradinho no canto superior esquerdo da layer).
6. Para movimentar a imagem, clique-a com o boto direito do
mouse. Use a opo 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 no esteja sendo visualizada, voc pode

ativ-la com o menu Window > Timelines ou utilizando o atalho Alt
+ F9.
8. D um clique na ala da camada (quadradinho no canto superior-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 alteraes efetuadas
na largura e na altura da imagem no provocam efeitos no Netscape.
Figura 13.3.

108
cap13.indd 108
5/6/2006 18:43:06
11. Ative a opo AutoPlay existente na barra Timelines para que

a imagem seja executada ao abrir a pgina.
12. Ao testar a pgina com a tecla F12 voc ver sua imagem sendo movimentada pela tela.
Sempre que quiser animar objetos do tipo imagem, voc, inicialmente, deve inserir uma camada (layer) e, dentro desta, a imagem;
sem ela, ser impossvel criar efeitos de movimentao.
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 pgina com o menu Modify > Page
Properties.
3. Na opo Background image, escolha uma imagem usando o
boto Browse, que deve servir como fundo de pgina.
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 superior) 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 informando quais atributos da imagem podem ser alterados.
10. Automaticamente, o tempo adicionado timeline na primeira 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 animao, na qual voc pode soltar o mouse.
12. Caso uma nova camada seja inserida, o Dreamweaver colocar o objeto na linha seguinte ao canal de animao atual.
13. D um clique na primeira camada e insira uma imagem. Faa
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 animao, representando todos os elementos existentes em sua pgina.
Cada linha pode conter somente uma camada e cada timeline
pode receber apenas um nome. O painel Timelines pode controlar a
posio, a dimenso, 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 nmero um, ou seja, a camada movimenta-se quadro a quadro no tempo definido por voc.
A opo Fps indica o nmero de quadros por segundo que sero
exibidos em sua camada.
Cada quadro define o que deve acontecer com a imagem (camada) na sua pgina. Um quadro define um ponto na animao, bem
como o seu tamanho e sua posio. Tais efeitos so chamados de
interpolao de valores, ou seja, o Dreamweaver cria valores neces-

110
cap13.indd 110
5/6/2006 18:43:06
srios 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 crculos abertos no
incio e no final da barra de animao.
Ao selecionar a opo Loop no painel Timelines ser adiconada ao
ltimo quadro da camada uma ao que retorna a reproduo do movimento ao quadro um, iniciando, novamente, a apresentao do objeto como um loop que, ao chegar ao final, retorna ao ponto de incio.
Posicionando objetos
Para criar uma animao de determinada imagem, podemos utilizar 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 tambm as
propriedades de largura (W) e altura da imagem (H).
6. Salve o arquivo e teste a exibio de movimentao utilizando
a tecla F12 para visualizar seu navegador:
Figura 13.5.
Caso queira inserir alguns caracteres especiais como se fossem

botes, use o menu Insert > HTML > Special Characters:
Criando banners
111
cap13.indd 111
5/6/2006 18:43:06
Figura 13.6.
Controlando a exibio da imagem

At agora, todas as imagens inseridas e animadas ficam passeando pela janela e isso pode ser um pouco desagradvel depois de
alguns segundos de exibio. Portanto, melhor controlar quando
deve ser iniciada e finalizada a exibio da animao. Observe:
1. Selecione a imagem.
2. Isso feito, crie duas reas nas quais o usurio deve dar um
clique.
3. Na primeira rea, o usurio deve ser levado pgina informada na opo de link, ao passo que na outra deve fechar a animao,
como se voc trabalhasse com um banner.
4. Selecione uma das alternativas de mapeamento da imagem,
usando um dos botes 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 usurio dar um clique
com o mouse para ativar determinada pgina (indicada na opo
Src).

112
cap13.indd 112
6/6/2006 11:23:52
6. Na barra Properties, crie um link com a pgina cardapios.html

(opo Src).
7. Na opo 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 usurio posicionar o

mouse na rea indicada e der um clique, ser levado pgina indicada. Portanto, ao mapear a rea dentro da imagem, procure no
faz-lo em um espao pequeno, pois o usurio pode no saber o que
fazer com a imagem danando pela tela.
Fechando o banner
Para parar a exibio do seu banner, preciso criar uma nova
rea dentro da camada, como se estivesse criando um boto. Observe 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 boto Sair nesta camada.
4. Nesse caso, o usurio deve disparar uma ao de fechar o banner e no ativar uma pgina qualquer. Para que funcione corretamente, adicione um evento como os utilizados em comportamentos.
5. Selecione a rea mapeada com o boto Sair.
Criando banners
113
cap13.indd 113
5/6/2006 18:43:06
6. Use o menu Window > Behaviors para abrir o painel de comportamentos no lado direito de sua tela.
7. Pressione o sinal de adio (+), pois um novo comportamento
deve ser adicionado.
8. Clique na opo Show-Hide Layer.
9. Ser apresentada uma caixa de dilogos indicando quais layers
esto ativadas no momento.
10. Caso no tenha fornecido um nome para a primeira camada,
automaticamente ela ser nomeada como Layer1.
11. Indique a ao que deseja para essa layer, que, no caso, deve
ser oculta.
13. Nesse caso, a ao vai ocultar a camada que possui a imagem, fechando a janela atual.
14. Um evento onMouseOver foi criado pelo Dreamweaver indicando que a imagem ser fechada quando o usurio passar o
mouse sobre o boto Sair.
15. Salve o arquivo e teste a sua pgina apertando a tecla F12.
Nesse caso, a imagem ser fechada quando o usurio passar o
mouse sobre o boto. Porm, a ao que deve ser executada o desaparecimento do banner quando o usurio der-lhe um clique, e no
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 opo OnClick far com que a ao 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 aes com um clique sobre a imagem. Ao clicar
sobre o boto Sair, o usurio fechar o banner.

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

At agora, criamos todo o design da pgina sem nos preocuparmos com os cdigos gerados pelo Dreamweaver. Muitas vezes,
preciso acessar o cdigo HTML subjacente pgina, o que proporciona maior controle das alteraes e, tambm, uma tentativa mais
efetiva quanto s solues de alguns problemas da pgina.
Suponha que voc tenha alterado a fonte de um determinado
texto, mas parte dele apresenta-se com a fonte no alterada. Para
resolver esse problema, importante editar o cdigo HTML e mover
suas tags de forma que o texto permanea 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 execuo dos caracteres nesse estilo.
O Dreamweaver permite a visualizao de cdigos quando utilizamos o boto Code, da janela de documento:
Figura 14.1.
O cdigo HTML e a janela de design so visualizadas simultaneamente. Dessa forma, ao mover qualquer elemento da pgina, voc
observar o que ocorre na janela de cdigos, tornando-se fcil perceber as tags bsicas, como por exemplo:

115
cap14.indd 115
5/6/2006 18:46:22
Tag inicial
Tag final
Descrio
<p align= >
</p>
Faz o alinhamento do texto existente dentro das tags.

Altera a cor da fonte do texto
existente dentro da tags.
Aplica itlico nos caracteres das
tags.
Insere a imagem LogosCinza.
gif, da pasta C:\Sandra, com
largura de 209 pixels e altura de
114 pixels, e apresenta o texto
alternativo (alt) como dolma.
<font color = #FF9900 </font>

<i>
</i>
<img src=file:///C|/San- </body>

dra/Desktop/LogosCinza.
GIFwidth=209height=
114alt=dolma></body>
Tabela 14.1.
Ao longo do desenvolvimento de seu site, voc perceber as inmeras tags existentes. No se preocupe em decor-las ou criar uma
lista de tais elementos.
Adicionar comentrios em seu cdigo

Imagine que voc resolveu passar a administrao de sua pgina para outro desenvolvedor, sendo que este no conseguiu perceber quais problemas devem ser solucionados ou melhorados, considerando mais fcil reiniciar o desenvolvimento da pgina do que
consert-la. Para prevenir esse tipo de situao, possvel inserir
comentrios, textos descritivos para transmitir a terceiros as informaes necessrias, tais como a mudana de determinada imagem,
do endereo, e outros dados importantes. Observe:
1. Para inserir comentrios, posicione o cursor no local que deseja comentar.
2. Voc poder estar na visualizao no modo Design ou no modo
Code.
3. Pressione o boto Comment existente na barra Insert.
4. Digite o comentrio necessrio.

116
cap14.indd 116
5/6/2006 18:46:48
Figura 14.2.
Para exibir os marcadores de comentrios, siga o menu View >

Visual Aids > Invisible Elements.
Inserindo palavraschave
Outro recurso interessante inserir palavras-chave que facilitem
a pesquisa em sites de localizao, como o Google por exemplo.
Para tanto, faa o seguinte:
1. Ative a barra de insero HTML:
Figura 14.3.
2. Clique no boto Head.

3. Selecione a opo Keywords.
4. Digite todas as palavras-chave necessrias.
Figura 14.4.
Inserindo descries
Podemos entrar com uma definio para a pgina por meio do
boto Description, presente na barra de insero HTML. Digite a
descrio de seu site e pressione o boto OK.

117
cap14.indd 117
5/6/2006 18:46:48
Figura 14.5.
Ajustando o posicionamento da janela

Com o cdigo 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 cdigos:
Figura 14.6.
4. Nela, Voc encontrar o cdigo:

<a href=# onClick=MM _ openBrWindow(aulas.html,
defi nition,
scrollbars = yes,width =300,height=100)>legu mes
</a>.</font></p>
5. Logo aps o parmetro height (altura), digite uma vrgula,
pois voc acrescentar um parmetro e, depois, o seguinte cdigo:
screenX=0, screenY=0, top=0, left=0
Os parmetros screenX e screenY so utilizados pelo Netscape
e navegadores posteriores, posicionando a janela na parte superior
esquerda da tela. Por outro lado, os parmetros top e left so para
o navegador Internet Explorer, fazendo o mesmo que os parmetros

118
cap14.indd 118
5/6/2006 18:46:48
screenX e screenY. Nesse caso, qualquer um dos navegadores utilizados pelo visitante posicionar a janela no canto superior esquerdo da tela.
Para perceber a diferena, teste sua pgina no navegador e, a
seguir, altere os parmetros para 400 para ver a diferena de posicionamento da janela.
Seletores de tag
O seletor de tags permite que voc acesse mais facilmente a hierarquia de tags HTML, podendo ser til para selecionar um item de
forma mais rpida.
Uma tag difcil 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 seletor de tags:
1. Veja o cdigo HTML de sua pgina pressionando o boto Code.
2. Na barra de tags, voc ver as tags criadas para o ponto em
que seu cursor est dentro do cdigo.
3. D um clique com o boto direito sobre a tag <meta> ou
<head>.
4. Ative a opo Edit Tag:
Figura 14.7.
5. Rapidamente, o Dreamweaver vai exibir a tag selcionada em

uma janela parte, permitindo alteraes:
Figura 14.8.

119
cap14.indd 119
5/6/2006 18:46:48
Tags rpidas
Tags rpidas nos auxiliam a inserir tags HTML com maior rapidez.
Isso bastante til quando, por algum motivo, voc conhece muito
bem os cdigos HTML e resolve escrev-los manualmente.
Vejamos como inserir tags rpidas:
1. Posicione o cursor no ponto de insero entre uma imagem e
um texto.
2. D um clique no boto direito e use a opo Insert Tag. Ser
aberta a seguinte janela:
Figura 14.9.
3. Escolha a opo HTML.

4. Escolha a tag que pretende inserir.
5. Pressione o boto Insert. Sero solicitadas algumas propriedades para inserir a tag.
6. Defina as propriedades e pressione OK.
Limpando tags vazias

Muitas vezes, criamos tags que contm problemas, como redundncia 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 recomendvel que, aps a criao

de seu site, seja executado esse comando a fim de no causar transtornos e lentido em seu carregamento.
Para eliminar essas tags, siga o menu Commands > Clean Up
HTML. Aparecer a seguinte caixa de dilogos:
Figura 14.10.
A partir de dois pontos de opes (Remove e Options), vejamos

as caractersticas dessa caixa:
Opo
Descrio
Empty container tags
Para remover tags vazias, como por exemplo tags

apresentadas como <b> </b>, no possuindo
qualquer texto a deixar em negrito.
Para remover tags redundantes. til quando se
tem um conjunto duplicado de tags dentro de outro que produz o mesmo resultado, conhecidas
como tags duplicadas, como por exemplo <b>
<b> texto negrito </b> </b>.
Para remover comentrios em HTML que no
pertencem ao Dreamweaver. Faz com que todos
os comentrios inseridos pelo Dreamweaver sejam removidos.
O Dreamweaver cria vrias tags que no esto no
padro do HTML, como <mm:libitem>, que indica um item de biblioteca. Apenas o Dreamweaver
reconhece essa marcao, os navegadores iro
ignor-la.
Para remover tags especficas. Permite instruir o
Dreamweaver para que remova as tags digitadas
na caixa de texto.
Redundant nested tags
Non-Dreamweaver
HTML comments
Dreamweaver special
markup
Specific tag(s)

121
cap14.indd 121
5/6/2006 18:46:48
Opo
Descrio
Combine nested <font> Opo til para combinar tags de <font> quando
Tags when possible
formatamos um texto com tags que podem ser
aninhadas.
Show log on
Opo 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 cdigos para o

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

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

Aps testar todo o seu site para verificar possveis erros em diferentes navegadores, est na hora de coloc-lo no ar, ou seja, public-lo.
Para isso, importante que voc obedea aos seguintes procedimentos:
Verifique o desempenho de cada pgina do site para ver se os
links e botes funcionam de forma correta;
Visualize todas as pginas em vrios tipos de navegadores e
plataformas diferentes, verificando todas as fontes e cores utilizadas
pela pgina;
Verifique todos os links rompidos, ajustando-os;
Controle o tempo de download de todas as pginas e imagens
do site;
Faa o maior nmero possvel de relatrios.
Download de arquivos
Caso esteja trabalhando em um ambiente multi-usurios, utilize
os mtodos de devolues e retiradas para a transferncia de arquivos. Em sites remotos, possvel utilizar as opes 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 disponibilizaro login e senha para que voc transfira e gerencie informaes rapidamente.
Aps contatar o provedor, faa o download e o upload de todos
os arquivos utilizados em suas pginas. Por isso, foi fundamental, no
ponto de partida, a criao de todas as pginas, imagens e botes
exatamente na mesma pgina, o que evita erros na hora de efetuar a
transferncia de informaes.
Para fazer o download de arquivos em servidores remotos, proceda da seguinte forma:
1. Use o painel de arquivos.
2. Selecione a opo 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 boto Edit.
5. Verifique as configuraes do site remoto:
Figura 15.2.
6. D um clique na guia Advanced.

7. Ative a opo Remote Info, que apresenta as informaes do
site remoto.

124
cap15.indd 124
5/6/2006 18:48:26
Figura 15.3.
8. Informe o mtodo de acesso, como, por exemplo, FTP.

9. Entre com as informaes necessrias e presisone OK.
10. Clique no boto Done para fechar a janela de gerenciamento
de seu site.
11. No painel Files, utilize o boto Connects to remote host (Figura 15.4), para que seja aberta uma conexo com o servidor remoto.
Figura 15.4.
12. Se, anteriormente, uma conexo foi feita, o boto ir indicar

Disconnect from remote host. Ignore essa etapa.
13. Caso os arquivos remotos estejam visveis no painel remoto,
ignore o boto Connect e pressione o boto Get Files.
14. Selecione os arquivos do download.
15. Pressione o boto 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 pgina, clique no

boto Sim. Agora, se pretende ignorar esses arquivos, pressione o
boto No.
17. Para evitar essa caixa de dilogos no prximo download, ative
a opo Dont 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 pgina.
2. No painel File, d um clique no boto Connects to remote host.
3. Ser aberta uma conexo com o servidor remoto.
4. Pressione o boto 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 dilogos Status, para interromper
a transferncia de arquivos.
Sincronizando arquivos nos sites local e remoto

Aps criar todos os arquivos (pginas) nos sites local e remoto,
possvel sincroniz-los. No caso do site remoto ser um servidor FTP,
a sincronizao utilizar o FTP.
1. Para sincronizar arquivos ou pastas especficas no lugar de sincronizar 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 boto direito do mouse em um dos arquivos.

3. Clique na opo Synchronize.
4. Voc ver a caixa de dilogos Synchronize Files:
Figura 15.7.
5. Selecione a opo para o site inteiro.

6. Nesse caso, todo o site ser sincronizado.
7. Se quiser sincronizar apenas os arquivos selecionados, use a
opo Selected Local Files Only.
8. Na opo Direction, defina uma direo para a cpia dos arquivos. (veja a Tabela 15.1).
9. Pressione Preview para visualizar a sincronizao.
Veja, a seguir, as possveis direes para as cpias dos arquivos.
Opo
Descrio
Put newer files to remote
Carrega todos os arquivos locais que tenham

datas de modificao mais recentes do que
os seus correspondentes remotos.
Efetua o download de todos os arquivos remotos com datas de modificao mais recentes
do que as de seus correspondentes locais.
Coloca as verses mais recentes de todos os
arquivos nos sites remoto e local.
Get newer files from remote
Get and Put newer files
Tabela 15.1.
Publicando seu site

127
cap15.indd 127
5/6/2006 18:48:26
Registrando todas as transferncias

O Dreamweaver nos permite registrar todas as atividades de
transferncia de arquivos com FTP. Caso ocorra um erro durante a
transferncia 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 opo FTP Log:
Figura 15.8.

128
cap15.indd 128
5/6/2006 18:48:27
Untitled-1 1
05/06/2006 14:14:28

Saites

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Saites

Caricato da

Copyright:

Formati disponibili

Untitled-1 1

2006 by Digerati Books

Preparao dos originais

Dados Internacionais de Catalogao na Publicao (CIP)

Pinto, Sandra Rita B.

1.Dreamweaver. Programa de computador.

Universo dos Livros Editora Ltda.

Treinamento prtico em Dreamweaver

o tema escolhido. Em um site de pesquisa, por exemplo, a partir de

Enumere todas as pginas que devem ser includas, assim como

Treinamento prtico em Dreamweaver

Design: a rea de trabalho integrada, na qual a janela

Code: a mesma rea de trabalho, mas, nesse caso, os painis

Para ocultar a pgina de abertura que aparece sempre que o

Criando uma pgina em branco

Treinamento prtico em Dreamweaver

Vejamos os elementos encontrados na rea de trabalho:

Barra de ferramentas Document: organiza atalhos (botes) que

Treinamento prtico em Dreamweaver

Criando um site local

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

A segunda etapa ir perguntar ao usurio se ele deseja trabalhar

Ao pressionar o boto Next voc deve indicar se ir se conectar

Treinamento prtico em Dreamweaver

Criando uma pgina bsica

Algumas dicas sobre nomes de pginas

Informando o ttulo do site

Treinamento prtico em Dreamweaver

Trabalhando com textos

Alterando a aparncia do texto

Trabalhando com formatos de cabealhos

Trabalhando com textos

Ao utilizar um estilo de cabealho, o Dreamweaver o exibe com

Treinamento prtico em Dreamweaver

Nela voc encontra uma lista de combinaes de fontes e pode

A barra inspetor de propriedades

Trabalhando com textos

Trabalhando com recuos

Trabalhando com listas

Treinamento prtico em Dreamweaver

des. Para criar uma lista numerada, d um clique em qualquer ponto

Trabalhando com textos

Treinamento prtico em Dreamweaver

Nesse caso, indique o espaamento das endentaes e, tambm,

Trabalhando com textos

Trabalhando com imagens

Para que sejam inseridas imagens em arquivos, ative opo File

Treinamento prtico em Dreamweaver

Observao: em um site, o melhor formato para uma imagem

Trabalhando com imagens

Para redimensionar, d um clique em uma das alas de seleo

Vinculando imagens a documentos

Treinamento prtico em Dreamweaver

direita do campo Link. Ser exibida a caixa de seleo de arquivo.

Dessa forma, sempre que a pgina for aberta e o visitante clicar

Vinculando arquivos no painel Files

Trabalhando com imagens

6. Arraste o ponteiro at o painel Files.

8. Ao utilizar a opo Map View no painel Files, o seu site ser

Treinamento prtico em Dreamweaver

Ser aberta a seguinte janela:

Nessa caixa de dilogo, encontramos as opes listadas:

Espessura da borda em pixels.