1

2

NDICE
NDICE .......................................................................................................................................... 2
INTRODUO .............................................................................................................................. 5
PROJETO DE UM SITE ................................................................................................................ 6
CRIANDO DOCUMENTOS ......................................................................................................... 14
Propriedades da pgina ................................................................................ 16
Publicando seu arquivo ................................................................................ 19
INTERFACE ................................................................................................................................ 20
Formas de visualizao ............................................................................. 21
Visualizao do Documento ......................................................................... 22
Paletas ...................................................................................................... 23
Barra de Propriedades .............................................................................. 23
TRABALHANDO COM TEXTOS ................................................................................................ 23
Localizar e Substituir .................................................................................... 25
Pargrafos e Layout ..................................................................................... 25
Pargrafos e Quebras de linha ................................................................. 25
DIV e SPAN .................................................................................................. 26
Ttulos ........................................................................................................... 26
Texto Pr-Formatado .................................................................................... 27
Listas ............................................................................................................ 27
Recuando Texto ........................................................................................... 28
Caracteres Especiais em HTML ................................................................... 28
Linhas Horizontais ........................................................................................ 29
IMAGENS .................................................................................................................................... 29
Mapas de Imagem ........................................................................................ 32
Criando Rollovers simples ............................................................................ 33
Image Placeholder ........................................................................................ 33
Barras de Navegao ................................................................................... 34
Inserindo HTML gerado No Fireworks .......................................................... 34
CONTEDO MULTIMIDIA .......................................................................................................... 35
Insero de Animaes Flash (SWF) ........................................................... 35
Inserindo Botes e Textos do Flash ............................................................. 37
Flash Vdeo ................................................................................................... 38
Plug-ins ......................................................................................................... 39
Image Viewer ................................................................................................ 40
HYPERLINKS ............................................................................................................................. 43
Links Absolutos e Relativos .......................................................................... 43
Os nomes de caminho absolutos .............................................................. 43
Criando Links ................................................................................................ 44
ncoras......................................................................................................... 46
3
Criando a ncora ....................................................................................... 46
Chamando o link da ncora ...................................................................... 46
Links para e-mail .......................................................................................... 46
TABELAS .................................................................................................................................... 47
Clulas .......................................................................................................... 49
Criando um Layout de site com Tabelas....................................................... 50
FOLHAS DE ESTILO .................................................................................................................. 52
Editando uma folha de Estilos ...................................................................... 55
Criando uma classe ...................................................................................... 55
Aplicando CSS em nosso layout exemplo .................................................... 56
CAMADAS E POSICIONAMENTO ............................................................................................ 64
Posicionamento CSS .................................................................................... 64
Posicionamento absoluto versus relativo .................................................. 64
Criando Camadas ......................................................................................... 65
Escolhendo as TAGS ................................................................................... 66
Aninhando Camadas .................................................................................... 67
Criando nosso layout com DIVS ................................................................... 67
FRAMES ..................................................................................................................................... 69
Criando os Frames ....................................................................................... 69
Salvando Frames .......................................................................................... 71
Alterando as propriedades de suas molduras ............................................... 72
Criando Frames Embutidos (IFRAME) ......................................................... 72
FORMULRIOS .......................................................................................................................... 74
Os elementos de um Formulrio ................................................................... 74
Tipos de campos de formulrio ..................................................................... 74
Menu de Salto ............................................................................................... 79
COMPORTAMENTOS ................................................................................................................ 80
Adicionando Comportamentos ...................................................................... 80
Pop-ups ........................................................................................................ 81
Ocultar Mostrar camadas .............................................................................. 81
Validando Formulrios .................................................................................. 83
SPY (AJAX NO DREAMWEAVER) ............................................................................................ 85
Spry Menu Bar .............................................................................................. 87
Spry Accordion ............................................................................................. 88
Spry Effects .................................................................................................. 89
Appear/ Fade ............................................................................................ 90
Blind .......................................................................................................... 90
Grow/ Shrink ............................................................................................. 91
Shake ........................................................................................................ 92
Squish ....................................................................................................... 93
Slide .......................................................................................................... 93
Highlight .................................................................................................... 94
EXTENSES DO DREAMWEAVER .......................................................................................... 95
4
Instalando uma nova extenso ..................................................................... 96
CONCLUSO ............................................................................................................................. 98

5

INTRODUO
O Dreamweaver no s outra ferramenta de visual de HTML. Ele faz o que
todos os melhores editores fazem: cria tabelas, edita quadros e alterna
facilmente da visualizao de pginas para visualizao HTML.
Mas o Dreamweaver vai alm dos outros editores para permitir criar animaes
e pginas dinmicas (DHTML). O Dreamweaver suporta completamente as
folhas de estilo em cascata (CSS), bem como camadas e comportamento de
J avaScript. Ele tambm inclui sua prpria ferramenta de animao DHTML. E
um cliente FTP repleto de recursos, que incluem mapas visuais do site, est
embutido dentro dele.
Entre as principais novidades da verso CS3, est a nova aba SPRY, que um
framework para utilizao de tecnologia AJ AX
(http://pt.wikipedia.org/wiki/AJ AX_(programao).
Outra grande novidade pelo fato de parti-la dessa verso o Dreamweaver
fazer parte da Adobe, ento o dreamweaver possui uma integrao muito boa
com o Photoshop.
Integrao com o Adobe Device Central, que possibilita voc visualizar seu site
em um aparelho de celular.
Quando iniciar o Dreamweaver pela primeira vez, voc ver uma janela
principal, que permite a voc criar documentos estticos (HTML) e dinmicos
como Coldfusion, PHP, ASP, ASP. NET e arquivos CSS.
6

Nessa tela, voc tem na esquerda os documentos abertos recentemente ou
abrir um arquivo existente. Na tela central, podemos definir os tipos de arquivos
a serem criados. Na tela da direita ele apresenta alguns templates. Na opo
Extend, existe o link Dreamweaver Exchange, que permite voc acesse o setor
do site da Adobe onde poder ter acesso a extenses dos programas Adobe.
Embora no seja um pr-requisito para utilizar o Dreamweaver, de
extrema importncia que ao criar um site voc tenha uma base da linguagem
HTML. Pois mesmo para o entendimento do que ser apresentado durante
essa apostila, para muitas coisas ele ser necessrio.
PROJETO DE UM SITE
No Dreamweaver podemos editar pginas HTML nicas como podemos
gerenciar sites, ou seja, controlar todo o projeto que est sendo feito, o que
recomendado para a construo de seu site.
Na tela que se abre na coluna do meio temos a opo Dreamweaver Site
Clique nessa opo. Ele vai abrir um assistente de criao do ambiente site.
7


Nessa etapa voc deve dar um nome ao seu site e caso j tenha um domnio
para ele pode preencher o campo URL. Ainda nessa tela, podemos observar
que acima temos dois modos de criar nosso ambiente de site a opo Basic a
que estamos utilizando ou a opo Advanced que permite preencher todas as
etapas da opo Basic mais rapidamente. D um nome ao seu site e clique
em NEXT.
8


Na segunda etapa deve-se definir se vai ou no trabalhar com pginas
dinmicas (ASP, PHP, ASP. net, CFM, etc..).
No caso eu escolhi a opo PHP MySQL, pois os servidores onde sero
testado os arquivos de nossa apostila do suporte a essa tecnologia.
Contedo dinmico o contedo de um site que apresentado ao
visitante atravs de requisies feitas no servidor onde ele est hospedado.
Atravs de contedo dinmico podemos acessar a bancos de dados, e pginas
que so montadas de acordo com as solicitaes feitas pelo visitante.
Se voc no vai utilizar contedo dinmico, voc pode marcar No, i do not
9
want to use a server technology.
Clique em NEXT, na etapa seguinte, necessrio direcionar o site para a pasta
em seu computador onde ficaro os arquivos de seu site.

No caso escolhi a opo de editar os arquivos localmente e fazer o upload para
o servidor remoto
Na prxima etapa necessrio definir como ser feita a conexo com seu
servidor. Se voc ainda no possui um servidor para hospedar seu site, nessa
etapa escolha None. Mas caso j tenha um servidor para hospedar seu site
escolha FTP (File Transfer Protocol).
Se essa for a sua opo ser necessrio preencher os campos do endereo
FTP (esse endereo fornecido pelo seu provedor de hospedagem). Na
segunda opo onde na imagem aparece www" a pasta para seu site.
10
Alguns servidores de hospedagem solicitam que seu site fique dentro de uma
pasta, a maior deles usa a pasta www" ou public_html, mas isso deve ser
verificar com seu servidor de hospedagem.

aconselhvel sempre clicar no boto Test Connection para ver se houve
comunicao.

A etapa seguinte somente ser disponvel se voc preencheu os dados para
comunicao FTP.
11

Voc deve preencher o endereo de seu site. Caso voc esteja testando seu
site somente localmente, essa etapa no ser mostrada
a opo Yes, enable check in and check out e No, do not enable check in
and check out.
Essa opo permite ao se trabalhar em site de forma colaborativa, onde mais
de uma pessoa manipule o site que quando um profissional pegar um arquivo
no servidor para alterao ele marca o mesmo como check in caso outro
profissional venha a precisar do mesmo arquivo, ele avisar que o mesmo j
est marcado e s libera para alterao do mesmo quando for dada a ele a
opo check out.
12

Somente marque a opo de Yes, enable check in and check out, caso tenha
mais de uma pessoa criando/alterando o site.
Clique em Next, ser apresentada uma tela de resumo, pode concluir o
assistente.
13

Na barra lateral direita agora ele mostra as configuraes de seu ambiente
Site.

1 No Dreamweaver possvel se trabalhar em
vrios projetos de site, caso precise alternar
entre eles, basta clicar nessa opo.
2 Aqui temos a viso de seu site local (Local
view - em sua mquina) e Remote view (em seu servidor).
3Permitem conectar / desconectar com seu servidor.
4 Permitem dar um Refresh (recarregamento) em sue site. Isso til caso
voc venha a editar algum arquivo de site fora do Dreamweaver, situao
comum com imagens e animaes flash.
14
5 Permitem baixar de seu servidor arquivo para alterao local.
6 Permitem subir para seu servidor algum arquivo local.
7 Permitem dar check out em um arquivo
8 Permitem dar check in em um arquivo
9Permitem expandir a tela de site, ele vai mostrar duas colunas, a da
esquerda so sua mquina e a da direita o seu servidor.
Caso seja necessrio alterar qualquer configurao de seu site, basta clicar no
Menu Site, Manage Sites, escolhe o site a ser reconfigurado e clicar no boto
Edit.
CRIANDO DOCUMENTOS
O Dreamweaver CS3 tem entre suas propriedades a possibilidade de se criar
sites dentro de padres da W3C (www3c.org) que rgo que cuida das
especificaes tcnicas de desenvolvimentos de tecnologias aplicadas web
sites.
Ento ao se criar uma pgina HTML, ele vai criar ela no padro XHTML, que
um padro que permite uma validao correta para suas pginas.

XHTML uma reformulao da linguagem HTML (Hypertext Markup
language) baseada na XML (Extensible Markup Language). Em
termos de sintaxe, a XHTML no to tolerante como a HTML. Isso
ocorre porque a XHTML utiliza as rgidas regras de XML para realizar as
marcaes em um documento. Por padro a XHTML separa a TAG (elemento
que permite definir qual comando ser utilizado) e as propriedades para a
mesma.
Voc pode atravs da tela de abertura criar sue documento HTML, ColdFusion,
PHP, etc..., como pode tambm clicar na opo More..., embaixo de todas.
15

Essa opo abre a possibilidade de se criar os diversos tipos de documentos,
alm de utilizar um tipo de layout, na direita da tela tm a opo de escolha do
tipo de documento HTML, o padro XHTML 1.0 Transitional, mas voc pode
escolher outro tipo de documento. Para saber mais sobre XHTML
(http://pt.wikipedia.org/wiki/XHTML).
Ao Clicar em Create, ele cria seu primeiro documento HTML.

16
Propriedades da pgina
As propriedades da pgina so elementos que se aplicam a uma pgina inteira,
em vez de somente a um objeto na pgina. As propriedades visuais incluem o
ttulo da pgina, uma cor de fundo ou imagem e as cores do texto e do link.
Outras propriedades de pgina incluem a codificao de documento e as
pastas de site, se houver.
Clique em Modify, Page Properties.

Na janela que se abre temos vrias categorias, a primeira delas a
Appearance (Aparncia), nessa categoria podemos definir o tipo de fonte da
pgina, estilo (negrito e itlico), tamanho. Cor de texto e cor de fundo, imagem
de fundo e as propriedades dessa imagem (se ele se repetira ou no) e
margens.
Na guia links, podemos definir como sero apresentados os links, quando os
mesmos forem textos.
17

Podemos definir a fonte dos mesmos tamanho, cd do link (forma como ele vai
aparecer na pgina), Rollover links (muda a cor do texto quando link ao se
passar o mouse sobre ele), Visited Links (cor a ser mostrada em links j
visitados pelo visitante de seu site), Active Links (cor do texto a ser mostrada
quando clicado sobre o link). Underline Style: como deve ser aplicado o
sublinhado em seus links, no caso da imagem est para ser mostrado
conforme o mouse passar pelo link.
A terceira Categoria Headings relativa formatao dos ttulos de sua pgina
(O HTML permite a configurao e utilizao de at 6 tipos de ttulos)

18
A guia Title / Encoding, como o prprio nome diz referente ao ttulo da pgina
(o mesmo que aparece na janela de seu navegador) e a codificao do HTML a
ser utilizada.

A ltima guia referente imagem de rastreamento.
Ao se clicar em OK, ele retorna a pgina do Dreamweaver, voc pode observar
que no topo da janela aparece como documento no salvo o tipo de documento
e o asterisco representa que o
arquivo no foi salvo, ele sempre ir aparecer quando voc modificar seu
documento. Para voc salvar rapidamente um documento ao qual se esta
trabalhando use as teclas de atalho CTRL+S.
O arquivo por padro ser salvo com a extenso html. Se o arquivo a ser salvo
for primeira pgina de seu site ele deve ter o nome de index (index.html).
Observe que o arquivo agora mostrada na direita junto dentro da aba Files

19
O nome index deve ser dado ao arquivo que ser mostrado em seu
site quando o visitante digitar o seu domnio, como por exemplo
http://www.multimidiaearte.com, ao digitar o endereo ele vai procurar em seu
diretrio o arquivo index, no caso index.html, e vai mostrar ele na tela do
navegador. Alguns webdesigners optam por usar o nome default, caso exista
os dois arquivos, a preferncia fica para o index.

A extenso html deve ser utilizada em pginas web que no
contenham blocos de cdigos dinmicos. Pginas que contenham
blocos de cdigo PHP devem ser salvas com essa extenso. Outro
fator importante que as maiorias dos servidores de hospedagem utilizam
como sistema operacional e servidor web Linux+Apache, isso far com que o
reconhecimento dos arquivos seja Case Sensitive (diferenciem maisculas de
minsculas), ou seja, Arquivo e diferente de ARQUIVO e diferente de arquivo.
Publicando seu arquivo
Para publicar o arquivo recm criado, voc pode na aba files clicar no boto Pu
File(s) . Ele mostra a tela de conexo.

Ao trmino ele mostra ao lado do arquivo enviado um aviso em verde.

Para poder ver o arquivo publicado, clique onde est escrito Local view e
escolha Remote View.
20

Voc pode tambm ter uma janela onde fique fcil de arrastar arquivos de uma
janela para outra. Basta clicar no ltimo boto da aba.


INTERFACE
Ao criar seu primeiro arquivo o Dreamweaver ele apresentar na parte superior
a barra de menus, abaixo dela temos a barra de Insero de contedo, essa
barra pode ser vista de duas formas em forma de Menu.

21
Onde as opes esto junto palavra Common (flechinha) ao se clicar nessa
opo ela vai mostrar as demais opes de botes de insero, a ultima opo
desse menu, chamam-se Show as Tabs, que permite visualizar as opes em
forma de abas na parte superior.

No final dessa barra temos um boto que permite voltar visualizao de
Menus (Show as Menu), a forma de utilizao fica ao gosto de cada
profissional, em nossa apostila a deixaremos na opo de abas.
Abaixo dessa barra temos a barra de documentos.

Nessa barra para cada documento aberto ele mostrar uma aba, abaixo dessa
aba temos os botes de forma de visualizao do documento, de ttulo do
documento, checagem de compatibilidade com navegadores, checagem de
erros de sintaxe de cdigo, comunicao com o servidor de hospedagem,
previso do documento no navegador, recarregamento da pgina (opo
interessante quando a mesma foi manipulada fora do Dreamweaver com o
documento aberto), opes de visualizao de componentes auxiliares na
pgina, Visual Aids.
Formas de visualizao
No Dreamweaver possvel trabalha com seu documento de trs formas:
Design : Essa forma a que mais se aproxima dos editores de textos
comuns, pois toda visual, bastando inserir contedos no documento e digitar
os textos.
Split : Essa opo divide a sua tela em duas partes, sendo a de cima a
pgina sendo vista atravs de cdigos e a parte de baixo de forma design.
22

Code : Essa opo vai mostrar o seu documento sendo visto atravs da
codificao HTML, quando se tem conhecimento de cdigos HTML, em
algumas situaes essa forma de visualizao se torna mais rpida e pratica.


Visualizao do Documento
sempre importante ao desenvolver um site que ele tenha um comportamento
semelhante nos principais navegadores (Internet Explorer e Firefox), como o
Dreamweaver tambm da suporte ao device Central que permite ver seu site
em celulares.
23
Para poder ver como ficar a sua pgina, basta clicar no boto preview/Debug
in Browser.

Ao clicar na opo Edit Browser List, voc pode definir qual o navegador de
prioridade, adicionar ou remover navegadores, etc...
Paletas
O Dreamweaver como os demais programas Adobepossuem para a maioria
de seus comandos paletas, posicionadas direita da tela.

Voc pode habilitar / desabilitar as paletas atravs do Menu Window.
Barra de Propriedades
Na parte inferior de seu documento, ser mostrada a barra de propriedades,
essa barra dinmica de acordo com o que est selecionado em seu
documento. Quando no h nada selecionado ele mostrar as propriedades de
texto do documento.

TRABALHANDO COM TEXTOS
A formatao de textos dentro de um documento HTML muito semelhante
24
formatao em editores de texto, com algumas ressalvas
Podemos adicionar observaes de textos invisveis chamados comentrios,
como anotaes para seus documentos.

Para formatar o seu texto depois de digit-lo, ou copi-lo e col-lo em seu
documento, basta apenas selecion-lo e atravs da barra de propriedades voc
pode format-lo.
No desenvolvimento de sites atualmente, no se formata mais o
texto diretamente em sua TAG de chamada exemplo (<font face=
Arial >texto </font>, cria-se um estilo para a fonte e aplica-se esse
estilo na fonte (se o estilo for somente a uma palavra ficaria <span style= font-
family: Arial >texto</span>).
Na opo formato podemos definir se ser somente texto ou ter atribuies de
cabealho (veremos posteriormente).
Na opo para escolha da fonte o prprio Dreamweaver define tipos de letras
seguras para a WEB, voc deve lembrar que as letras so processadas na
mquina do usurio, ento o cuidado com a escolha das letras deve ser
grande, mas voc pode editar a lista existente, assim como criar uma nova
lista.

No prximo quadro podemos definir qual o tamanho da letra.
Depois temos a cor da letra, a HTML baseia-se no padro RGB de cores e os
valores so mostrados em cdigos Hexadecimais. Temos ao lado estilos de
25
texto como Negrito e itlico alm dos alinhamentos bsicos como esquerda
centro, direita e justificado.
Ao lado temos a opo de atribuir um link ao texto (assunto a ser visto
posteriormente). O uso de marcadores e recuos.
Atravs do Menu Text temos outras opes de formatao como: Estilos
variados de formatao como, por exemplo, sublinhado, nfase, citao etc...
Localizar e Substituir
O Dreamweaver pode pesquisar seu documento e localizar um pedao de texto
especifico. Ele tambm pode substituir uma string de texto por outra.
Para localizar um pedao de texto em seu documento, clique no Menu edit,
Find and Replace.

Pargrafos e Layout
A unidade bsica de texto em HTML o pargrafo. Enquanto o pargrafo o
nome especfico de texto includo pela tag <P>, os pargrafos podem ser mais
amplamente definidos como qualquer bloco de texto especificamente
formatado. Os tipos de pargrafos incluem itens de lista, texto preformatado e
divises.
Pargrafos e Quebras de linha
Na HTML existe uma diferena entre pargrafos HTML, com os pargrafos
utilizados em um editor de Textos como o Microsoft Word por exemplo. Na
HTML o pargrafo faz um espaamento duplo entre um pargrafo e outro e
permite por padro os alinhamentos, esquerdo (padro), centro, direita e
26
justificado.
J as quebras de linhas apenas quebram a linha na posio e o que vier depois
da quebra ser colocado na prxima linha, como um pargrafo de editor de
textos.

DIV e SPAN
H outros tipos de blocos de texto que voc talvez encontre <div>e <span>. A
TAG <div> significa diviso e utilizada para marcar blocos de texto que
(geralmente) se distribuem por mais de um pargrafo. Voc no pode terminar
a diviso dentro de um pargrafo, porque a TAG </div> automaticamente
quebra o pargrafo. A TAG <span>por outro lado, pode ser utilizada para
marcar uma rea dentro de um bloco de texto individual, como dentro de um
pargrafo ou blockquote.
Essas duas TAGS so principalmente utilizadas em conjuno com folhas de
estilo.
Ttulos
Pense em ttulos (Tambm chamados de cabealhos) como sendo o mesmo
que as manchetes de um jornal. Eles so maiores que o corpo do texto de um
artigo e geralmente esto em negrito. Os tamanhos de ttulos vo de 1 a 6,
sendo que o maior 1.
27

Texto Pr-Formatado
Em geral quando voc cola texto na janela de documento, ele no retm
nenhuma formatao dele. Isso inclui quebras de linha, quebras de pargrafos,
espaamento, tabulaes, tabelas formatadas com texto e outras mais.
Se voc formatou texto em outro programa e deseja reter sua forma, voc pode
inseri-lo no cdigo de HTML da pgina como texto preformatado. Nenhuma das
outras convenes de HTML controlar esse texto; por exemplo, em HTML,
somente um espao digitado ser exibido, mesmo se voc digitar 50 espaos
em uma linha. No texto pr-formatado, qualquer forma do texto feita com
espaos ou quebras de linha ser preservada.
Listas
O Dreamweaver suporta diretamente dois tipos de listas, numeradas
(Ordenadas) e com marcadores (No Ordenadas). E lista de Definies.
Podemos utilizar as propriedades do pargrafo para criar listas ou o Menu
Texto, lista, sendo que no Menu Text, List, temos ainda a opo de lista de
Definio, que utilizada para sumrios em seu site.
28

Recuando Texto
No h tabulaes em HTML comum, o tipo de recuo de pargrafos com cinco
espaos utilizados em outros tipos de publicao geralmente substitudo
configurando cada pargrafo como uma linha de espao em branco.
Mas existem recuos de pargrafos, chamados <blockquote> que faz este
processo.
Este tipo de recuo pode ser feito atravs da barra de propriedades ou do menu
Texto.
Caracteres Especiais em HTML
H uma variedade de caracteres especiais em HTML que voc pode querer
utilizar em suas pginas. O Dreamweaver possui alguns destes smbolos, e
podem ser utilizados a partir do menu Insert, Special Caracteres, ou atravs da
aba Text do Dreamweaver.
29


Linhas Horizontais
Uma linha horizontal uma linha que atravessa a pgina horizontalmente e
fornece uma diviso explicita em vez de implcita entre as partes de um
documento.
Para criar uma linha horizontal, clique no Menu Insert Horizontal Rule, ou clique
no boto, na caixa de ferramentas (Aba HTML).
Ao criar a linha horizontal e selecion-la voc pode format-la.
Voc pode tambm deixar visvel barra de texto:

IMAGENS
Um dos recursos mais utilizados em Home Pages so imagens, e os formatos
mais utilizados so GIF e J PG, outro formato que vem crescendo na utilizao
em HP o formato PNG, formato reconhecido pela W3C(www.w3c.org).
Para inserir uma imagem em sua HP, temos vrias formas, a mais prtica
clicando sobre o boto Insert Image na caixa de Ferramentas , outra forma,
atravs do Menu Insert.
30
aconselhvel que voc coloque todas as imagens de seu site em uma nica
pasta, pois isto vai facilitar o seu trabalho e organizao do site.


Voc pode criar sua pasta de imagens, diretamente pela paleta files do
dreamweaver, basta apenas clicar com o boto direito do mouse em alguma
rea vazia dela e depois clicar na opo New Folder.
Ao se escolher a imagem a ser inserida, com definimos no inicio do projeto de
nosso site utilizaremos XHTML ele abre uma janela pedindo as teclas de
acessibilidade, no campo ALT, deve-se preencher a descrio da imagem, no
campo Long description pode deixar em branco

31
Ao adicionar imagem a barra de propriedades modifica-se para a
configurao da imagem.

Quando voc tem uma figura selecionada a barra de propriedades da figura lhe
mostra a largura (W) e altura(H) da imagem. A opo Src corresponde ao local
de sua imagem, A opo Alt preenchida anteriormente, a opo Class, permite
atribuir uma classe a imagem, estudaremos as classes posteriormente.
A opo link permite transformar a sua imagem em um link, veremos esse
assunto posteriormente. E temos as ferramentas de edio.
Ao se redimensionar uma imagem por suas alas ao lado das medidas de
Altura e largura, o Dreamweaver mostrar um boto circular que permite
retornar as dimenses originais da imagem. .
Entre as opes de manipulao para uma imagem temos:
Permite otimizar a imagem

32
Ferramenta Crop, permite recortar a sua imagem, ao estar com a imagem
selecionada e clicar sobre essa ferramenta, ele mostrar sob a sua imagem as
alas de recorte, defina o corte e pressione ENTER. Importante, ao ser
recortada a imagem somente possvel voltar atravs de o comando desfazer.
Resample, ao redimensionar a imagem, possvel deixar a imagem salva
com o novo tamanho.
Permite modificar o brilho e contraste da imagem

Sharpen permite trabalhar o desfoque da imagem


Ainda temos como propriedades da imagem a opo V Space Permite
colocar um espaamento vertical entre a imagem e demais objetos, H Space
Permite colocar um espaamento horizontal entre a imagem e demais objetos.
Low Src Caso a sua imagem venha a ser muito pesada, e demora em
abrir, pode-se definir uma imagem em baixa qualidade para ser aberta antes.
Border Permite definir se sua imagem ter bordas ou no. A o colocar link
em sua imagem e no utilizar borda preencha o campo com 0(zero).
Align Permite definir o alinhamento da imagem em relao vertical.
Mapas de Imagem
Podemos inserir uma imagem em seu documento atribuir a esta imagem
pontos ativos que faam a ligao com outros documentos, este processo
chamado de Mapa de imagens.
Quando voc insere uma imagem, automaticamente na barra de propriedades,
33
sero mostradas as ferramentas de pontos ativos retangular, elptica e
polgono. Ao desenhar o ponto ativo na barra de propriedades ser mostrada
uma janela para que se faa o link.

Criando Rollovers simples
Um rollover de imagem uma ao de J avaScript que deixar voc trocar a
fonte de uma imagem por outro arquivo de imagem, de modo que quando voc
o mouse sobre uma imagem, outra imagem aparecer.
O objeto rollover image define um simples comportamento que realiza trs
coisas: as imagens so pr-carregadas quando a pgina carrega, quando o
mouse passa sobe a imagem especificada um arquivo diferente de imagem
exibido, e quando os usurios movem o mouse para fora da imagem, imagem
original restaurada.
Para inserir uma figura de rollover podemos proceder da seguinte forma,
atravs do boto Rollover Image, ou atravs do Menu Insert, Image Objects,
Rollover Image.

Image Placeholder
Image Placeholder um objeto do Dreamweaver que voc pode acrescentar
em seu documento no espao onde ficar uma imagem, mas que ainda no
est pronta, mas que permite que voc v diagramando seu HTML, Para inserir
uma imagem placeholder, voc pode clicar no menu, Insert, Image Objects,
Image Placeholder, ou clicar no boto junto s opes de imagem da aba
Common.
34

Barras de Navegao
Um dos recursos interessantes do Dreamweaver a criao de barras de
Navegao, necessrio que se crie s imagens que faro parte de sua barra
de navegao, os mesmos podem ser criados em qualquer programa de
imagens.
Clique no Menu Insert, Image, Objects, Navigation Bar, ou pelo boto junto s
opes de imagem da aba Common.

Defina o nome do elemento em sua barra de navegao, quais sero as
imagens ativa sobreposta e inativa, defina tambm apara onde ser levado o
link.
Inserindo HTML gerado No Fireworks
O AdobeFireworks um programa da Adobedestinado principalmente
criao de objetos grficos e layout para sites, banners para web etc...
Mas dentro dele podemos gerar toda a interface de um site e criar o HTML sem
programar uma linha. Este contedo gerado pode ser aproveitado no
35
Dreamweaver, para isso na caixa de ferramentas, clique no Boto Fireworks
HTML.

CONTEDO MULTIMIDIA
A Web atual rica em recursos de multimdia, como vdeos, udio, efeitos,
etc..., claro que tudo isso depende de diversos fatores, como principalmente
velocidade de conexo e boa distribuio do contedo no site.
O Dreamweaver permite inserir de forma fcil em suas pginas HTML contedo
multimdia, tornando assim seu site mais rico e interativo.
Insero de Animaes Flash (SWF)
Atualmente quando se pensa em animao para pginas WEB, j se pensa em
tecnologia Flash, isso com razo, segundo a Adobe 98% dos computadores
com acesso a internet, possuem alguma verso do plug-in do flash instalados,
e caso o computador no possua, ao acessar uma pgina que contenha a
animao em Flash ele automaticamente baixa o mesmo e solicita uma
autorizao para a instalao do mesmo.
Para se inserir uma arquivo SWF (aplicao criada no flash e publicada,
cuidado, no correto e nem possvel de visualizao colocar o FLA, que um
arquivo de projeto), clique no menu Insert, Media Flash, ou clique sobre o boto
insert Flash na barra. . Dois conceitos atualmente muito debatidos e
utilizados na web atual so usabilidade (http://pt.wikipedia.org/wiki/Usabilidade) e
acessibilidade (http://pt.wikipedia.org/wiki/Acessibilidade), e o flash sempre foi considerado
um vilo em relao a esses assuntos, mas na ltima verso a Adobe j
trabalhou e melhorou o flash em relao a isso. Ento ao inserir sua animao
em flash no dreamweaver ele apresentar uma tela onde voc pode adicionar
alguns elementos de acessibilidade como um Title, teclas de acesso e ordem
de tabulao do swf em sua pgina.
36

Na janela que se abre, localize seu arquivo SWF e insira-o na pgina. Observe
que ele vai aparecer em sua pgina como um retngulo cinza com o smbolo
do flash. A barra de propriedades agora se modifica para configurao do
SWF.

Pela barra podemos configurar a dimenso do SWF, se ele ficar em looping e
se iniciar automaticamente, o espaamento vertical e horizontal, a qualidade,
a forma de escala (Scale), quando seu filme possuir elementos que fiquem fora
do palco do Flash e interajam com o filme em tempo de animao, coloque No
Border. O alinhamento do flash em relao ao local onde est inserido, cor de
fundo para o filme.
Para poder visualizar o filme dentro do Dreamweaver, basta clicar no boto
Play.
A opo Parameters permite que voc adicione parmetros ao seu filme. Um
dos parmetros mais utilizados quando se utiliza banners flutuantes, que
muitas vezes se torna necessrio que o fundo de seu filme fique transparente
onde no existe animao. Ai utiliza-se o parmetro wmode com valor
transparent.
37


Inserindo Botes e Textos do Flash
O Dreamweaver se integra facilmente as outras ferramentas da Adobe e
podemos inserir dentro dele facilmente componentes do Flash.
O prprio Dreamweaver j possui alguns exemplos de botes e textos prontos,
e voc pode criar seus componentes no Flash e depois inseri-los dentro de sua
pgina no Dreamweaver.
Para inserir um boto do Flash, clique no Menu Insert, Media Flash Button, ou
atravs do boto Flash Button na barra de ferramentas.

A opo Flash texto permite inserir um Flash de texto com a opo de se
colocar links no texto, e mudana de cor na rolagem.
38
Flash Vdeo
Um dos grande recursos criado ultimamente para disponibilizao de vdeos na
WEB foi o formato FLV (Flash Vdeo), pois permite a publicao de vdeo em
websites, sem a necessidade de um servidor de Streaming, plug-ins, etc...,
basta apenas que o navegador do usurio tenha o plug-in do Flash instalado
(98 % dos computadores o tem), o maior cone de sucesso do Flash vdeo ao
o site YOUTUBE (www.youtube.com), que atualmente sinnimo de vdeo na
Internet.
Para se inserir um arquivo FLV em HTML com o Dreamweaver muito fcil.
Clique na barra de ferramentas no boto Flash Vdeo ou no
Menu Insert, Media, Flash Vdeo.

Na tela apresentada, necessrio definir o caminho onde est o seu arquivo
FLV, o Skin de controle do vdeo, as dimenses (Use o boto Detect Size), as
opes Auto play (inicia automaticamente) e Auto Rewind (reinicia
automaticamente) so opcionais, e a ltima tela uma mensagem a ser
mostrada caso o usurio no tenha o plug-in do flash.
39



O Formato Flash Vdeo criado pela Macromedia , e comprada
pela Adobe, atualmente o formato mais recomendvel para
distribuio de vdeos na WEB. Para transformar seu vdeo AVI,
MOV, etc... em FLV necessrio um programa de converso, pois ele usa
como compactador do vdeo o plug-in OnVp6 ou OnVP7, o Adobe Flash
possui junto a ele o Flash Vdeo Encoder, que faz essa converso, mas j
existem alguns conversores de vdeo que fazem essa converso.
Plug-ins
Para adicionar outros tipos de arquivos multimdia em seu website necessrio
adio de um recurso chamado de Plug-in, para inserir um plug-in no
Dreamweaver. Boto Plug in na barra de ferramentas .
Na janela que se abre voc deve localizar no projeto de seu site o arquivo a ser
publicado. Os demais acertos do arquivo devem ser feitos pela barra de
propriedades, como tamanho, borda, na opo Plug-in URL, somente preencha
se voc souber o caminho para que o mesmo possa ser baixado caso o
usurio de seu site no o localize.

Podemos acrescentar alguns parmetros em nosso arquivo de multimdia,
clique no boto Parameters.
40

Observe na imagem acima que adicionei dois parmetros um para que ele me
mostre os controles do filme como volume, play, pause stop. E outro para que o
filme inicie automaticamente.
Para arquivos que venha a ser publicados como plug-ins
recomendvel utilizar para vdeo o formato WMV (Windows media
vdeo) e para udio o formato wma (Windows media udio),
existem diversos conversores no mercado que permite gerar esse tipo de
arquivo. A Microsoft disponibiliza o programa Windows Media, que
freeware, para converter formatos padres de vdeo para wmv, e arquivos de
udio para wma. Caso voc precise converter um arquivo que esteja em CD de
udio para wma, pode utilizar o Windows Media Player para fazer a converso.
Image Viewer
Atualmente pela possibilidade se colocar contedo multimdia em websites, um
uso muito comum, criar slideshow com imagens, esse recurso normalmente
feito pelo Adobe Flash, mas o Dreamweaver possui um recurso bem
interessante para esse tipo de aplicao, ele mesmo gera o arquivo SWF e lista
as imagens que voc definir para serem colocadas como slide Show, podendo
definir, se as mesmas tero controles de avano e retrocesso, se ficaro em
looping, possibilidade de se acrescentar legendas e hyperlinks nas imagens a
serem mostradas.
Para criar o slideshow, clique no Menu Insert, Media Image Viewer, a primeira
tela necessrio definir o nome que ser criado seu SWF.
41

Aps salvar o seu Viewer, a barra de propriedades, vai mostrar as
configuraes para alterao.

Na barra lateral direita ser criada uma paleta chamada Flash Element,
atravs dela podemos manipular as propriedades de nosso visualizador.

Na propriedade ImageURLS, onde devemos definir as imagens as quais
42
vamos utilizar em nosso slideshow. Ao se clicar no campo onde esto os
colchetes ([]), ele abrir uma nova janela onde ao se clicar no sinal de mais (+)
ele abre uma campo para voc selecionar a imagem a ser colocada.

Ao clicar em Image Links, podemos definir o site / arquivo que ser aberto ao
se clicar na imagem

Ao finalizar a escolha das imagens, clique em OK.

Caso voc queira que seu slideshow inicie automaticamente, basta mudar na
43
propriedade SlideAutoPlay que est como No para Yes. Na opo SlideLoop
voc pode definir para o slideShow fiquem looping. Em TransitionsType,
pode-se definir o tipo de transio que as imagens tero.
HYPERLINKS
O principal elemento que fez com a Internet crescesse como est atualmente
o fato de que podemos rapidamente mudar de contedo atravs de simples
clique de mouse, os chamados Hyperlinks.
Podemos criar links para todos os tipos de arquivos existentes, mas somente
alguns podem ser abertos nos navegadores, os demais, sero salvos no
computador do usurio.
Links Absolutos e Relativos
Antes de comear a colocar os links em suas pginas da WEB, voc deve estar
ciente dos diferentes tipos de nomes de caminho que voc pode utilizar para
vincular a outro documento na Internet
Os nomes de caminho absolutos
Apontam para uma localizao na Internet fora do site no qual a pgina atual
est localizada. No nome de caminho http://www.adobe.com.br/index.html o
documento index.html est localizado dentro da raiz do site.
Os nomes de caminhos relativos
Apontam para links dentro do mesmo site, por exemplo, no site atual
http://www.seusite.com.br/ preciso fazer um link para o arquivo
imagens.html, ento por estar no mesmo diretrio somente ligo ao nome do
arquivo, j se preciso linkar para uma imagem localizada na pasta imagem,
fao da seguinte forma imagem/figura.gif que o link vai procurar dentro da
pasta imagem o arquivo figura.gif.
Em servidores Windows no existe a diferenciao entre maiscula e
minsculas no nome e extenso dos arquivos, nem sobre acentuao e
espaos.
Mas na internet, a grande maioria de servidores operam com o Sistema
Operacional LINUX que baseado na UNIX, ento sempre procure utilizar nos
nomes dos arquivos de seu site, letras minsculas, sem acentuao e sem
44
espaos, pois se voc colocar letra maiscula no nome de um arquivo e fizer o
link com letra minscula o arquivo no ser encontrado.
Criando Links
Crie um texto e o selecione e observe que na barra de barra de propriedades
ele lhe d opo de criar um link, crie o link para este texto. Se voc no sabe
o nome correto de seu link, clique na pasta amarela direita da caixa de link.


Defina o arquivo ao qual ser ligado e no menu pop onde voc pode especificar
se que o link relativo pgina, ou site Root para fazer o link relativo a uma
localizao central em seu site da WEB.

Podemos tambm para criar um link arrastar point to file diretamente at o
arquivo a ser linkado.
Observe que quando aplicamos as configuraes de Propriedades na Pgina
(menu, Modify, Page Properties CTRL+J ), e ao criarmos um link em nosso
45
texto o mesmo j fica sendo mostrado com as configuraes de estilo.
Mude a visualizao para Split para que voc possa ver o estilo definido para
links (TAG a) e o mesmo aplicado no seu documento.


Observe que abaixo do campo link temos um campo chamado Target (alvo),
quando o campo fica vazio,ao se clicar sobre o link no navegador, ele abre na
pgina atual do link sobrepondo-a. Se eu precisar que o link abra em uma nova
janela, basta eu especificar nesse campo a opo _blank. As demais opes
so:
_parent Carrega o link no frame de nvel superior ao atual
_self Carrega o link na mesma janela ou frame
_top Remove todos os frames e carrega o link em uma janela inteira.
Crie um outro texto e aplique um link nele com a opo de abrir em uma nova
janela.


Um item muito importante quando se faz links para um endereo
46
absoluto como no exemplo sempre colocar o protocolo a ser utilizado, no
caso http://, pois se fosse colocado somente www.multimidiaearte.com o
mesmo seria interpretado como um subdiretrio com esse nome, por esse
motivo foi usado http://www.multimidiaearte.com.

ncoras
Permite criar links internos na mesma pgina, facilitando assim a navegao
em documentos longos.
Criando a ncora
Primeiro defina os links que vo chamar a ncora dentro de sua pgina.
Depois atribua a um texto, figura ou espao em branco a sua ncora, atravs
do Menu Insert Named Anchor.

junto ao local onde a ncora ser criada aparecer uma marca .
Chamando o link da ncora
Para criar agora o link para esta ncora na caixa de links digite
#nomedancora. Se a ncora estiver em outro documento coloque
documento.htm/#nomedaancora.

Links para e-mail
Podemos tambm atribuir link para e-mail, atravs de textos ou imagens, o que
muda a forma de chamada, para se criar o link para um e-mail, deve-se usar
mailto:endereco@seuemail.com.br.
47

Essa forma de link para e-mail tem um problema que ao ser clicado
no link ele vai abrir o programa de e-mail padro (outlook Express,
outlook, etc...), e muitos usurios no utilizam programas de e-mail, acessam o
e-mail atravs dos prprios webmails (hotmail.com, gmail.com, yahoo.com),
ento nesses casos aconselhvel ao se criar o link colocar o e-mail para
onde ser apontado o link.
TABELAS
A funcionalidade da tabela foi adicionada a HTML para simplificar a
apresentao de dados tabulares, como relatrios cientficos. Atualmente a
utilizao das tabelas tem crescido e tomando o lugar do Frames na
distribuio de dados em um site.
Para criar uma tabela muito importante que a mesma seja planejada e
rascunha antes para depois minimizar o seu trabalho.
Para inserir uma tabela clique no boto Insert Table, ou no boto de insero
de tabela na barra de propriedades, ela est disponvel na aba Common e
Layout.

48
Defina nmero de linhas e colunas desejadas, se quer borda e qual ser a sua
espessura, defina a largura de sua tabela em relao largura da tabela (em
Pixels ou em porcentagem), o espaamento entre as clulas e o espaamento
entre a clula e o seu contedo (Cell padding e Cell Spacing).

Na barra de propriedades da tabela podemos alterar as propriedades de nossa
tabela. Podemos tambm alterar o alinhamento da tabela, a cor de fundo da
tabela, cor de borda e imagem de fundo da tabela.
Ao se clicar na Aba Layout, no meio da barra, temos tambm os botes de
manipulao de nossa tabela.

Se voc clicar com o boto direito de seu mouse em qualquer clula de sua
tabela, ele habilita tambm as opes de manipulao de nossa tabela.

Para podermos selecionar as clulas (TD), linhas (TR) ou toda nossa tabela
(Table), podemos usar o rodap do Dreamweaver.

49
Clulas
Ao clicar em uma clula, ou selecionar mais de uma clula, a barra de
propriedades muda para a formatao de texto e abaixo as propriedades
referentes s clulas.

As possibilidades de alterao das clulas so a opo de mesclar duas ou
mais clulas (na imagem o boto est inativo por termos apenas uma clula
selecionada), ao lado do boto mesclar temos o boto dividir clulas, ao clicar
sobre ele podemos dividir em colunas ou linhas.

Ao lado temos as opes de definir as dimenses da clula largura (W width)
e altura (H height), as dimenses podem ser aplicadas em pixels ou em
porcentagem, sendo que em pixels.
A opo No wrap tem como objetivo impedir que o contedo quebre para a
linha de baixo da clula ao alcanar a largura da clula.
A opo Header permite atribuir clula a propriedade de clula de cabealho
(ttulo), acrescenta um negrito e um peso maior fonte.
Podemos tambm acrescentar cor de fundo e de borda a nossa tabela, bem
como imagem de fundo.
Tabela normal

Tabela Modificada
50

Na aba Layout podemos inserir / excluir linhas e colunas em nossa tabela
atravs de botes .
Podemos tambm desenhar nossa tabela, na aba Layout clique no boto
Layout , ser mostrada uma tela, pode confirmar a mesma.
O modo layout permite que voc mesmo possa desenhar a sua tabela e as
clulas que vo compor a tabela .

Criando um Layout de site com Tabelas

Crie um novo documento HTML e salve-o como index.html (caso ele avise que
j existe um arquivo com esse nome, pode substituir).
Faa as mesmas configuraes com anteriormente de Propriedades da Pgina.
Crie uma tabela com 780px de largura, com 4 linhas e 3 colunas

51
Na barra de propriedades, clique no boto Align e mude para center.


Mescle a primeira linha e acrescente uma imagem para ser o nosso topo.

Mescle tambm as demais linhas, deixando todas sem divisas de colunas.
Divida a segunda linha de acordo com quantidade botes que voc vai
precisar. No caso foi feito uma diviso em 5 colunas.

divida a prxima linha de acordo com desenho de seu layout no caso foi
dividido em trs colunas e a primeira coluna dividida em e duas linhas.
A ltima linha foi deixada como nica, pois ale teremos as informaes de
rodap.

52
No fiz agora os links, nem a formatao das demais pginas, pois faremos
isso posteriormente atravs de configurao de estilos CSS.
FOLHAS DE ESTILO
O CSS (Cascading Style Sheet) ou folhas de estilo em cascata o recurso
coreto de formatao de elementos dentro de seu documento HTML, seguindo
os padres de internet atuais recomendados deve-se sempre utilizar a CSS
para formatao e posicionamento de TAGS HTML.
Em nosso primeiro exemplo ao configurarmos nossa pgina com margens,
definio de cores e texto para textos e links, e por trabalharmos com XHTML,
todas essas formataes so atribudas em cdigo de CSS.

O Dreamweaver CS3 reforou bastante o recurso de CSS para formatao nas
pginas.
No topo das paletas direita temos a paleta de CSS.
53

Para se trabalhar com as folhas de estilo necessrio algum conhecimento de
HTML, pois ela baseia-se na formatao das TAGS HTML e suas funes.
Podemos alterar as propriedades de uma tag existente, como podemos criar
classes e identificadores para as TAGS onde podemos ter dentro de uma folha
de estilo TAGS <TABLE>de tabelas com duas ou mais formataes.
Criando uma folha de estilo baseada em uma TAG existente.
Para criar uma folha de estilo simples clique no painel CSS clique no boto
New CSS Style .

Marque a opo Redefine HTML Tag, automaticamente ele mostra o H1 que
relativo ao ttulo de nvel 1. A opo Define in: permite definir a formatao em
um arquivo de folha de estilos, ou somente no documento atual.
Ao clicar em OK ele abre a janela onde podemos definir a forma que ter a
nossa TAG H1.
54

A opo Type, permite alterar as configuraes de fonte d a TAG Selecionada.
Na opo Background podemos definir as configuraes de plano de fundo da
clula.
Em Block, podemos definir as configuraes de pargrafos do texto, como
espaamento entre palavras, alinhamentos, etc...
A opo Box permite criar um bloco de nossa TAG definindo largura e altura,
etc...
Em Border, podemos definir o tipo de borda a aplicar em nossa TAG.
List permite alterar as configuraes de nossa lista de marcadores
Position permite trabalhar com posicionamento da TAG selecionada em relao
ao Documento.
Extensions: Permite definir quebras de pgina, cursor do mouse, e filtros a
serem aplicados ao seu website.
O cdigo HTML

A visualizao

55
Editando uma folha de Estilos
Para alterar algo em sua folha de estilo, clique no boto edit Style Sheet ,
ser perguntado, qual o estilo existente que voc quer alterar.
Criando uma classe
As classes permitem que se crie uma formatao especial que possa ser
adicionada dentro de outras TAGS, por exemplo, preciso formatar as clulas de
uma tabela com duas cores diferentes, posso criar duas classes e aplicar
dentro delas, apelas clicando na tabela e depois clicando nas classes no painel
de estilos.

A formatao da Classe igual formatao de uma TAG HTML, a diferena
que necessrio atribuir a classe a TAG.
Depois de criar a classe, selecione o elemento que vai receber a classe e
aplique ela ao contedo selecionado pela barra de propriedades.

Em algumas situaes ser necessrio aplicar o estilo em Tags no
selecionveis pelo modo visual do Dreamweaver, nesses casos necessrio
aplicar o estilo pelo modo de cdigo, basta apenas aps o nome da TAG digitar
<TAG class=nomedaclasse >
O modo de aplicao de CSS que vimos at o momento est diretamente
aplicado no documento.
Caso tenhamos formataes de CSS que sejam aplicadas a diversos
documentos, podemos gerar um documento com a extenso CSS e criar um
link em cada documento para esse arquivo, isso alm de padronizar seu site,
far com qualquer alterao de formatao, afetar em todos os documentos.
56
Para utilizar a formatao de CSS atravs de um arquivo externo, crie um novo
documento, e escolha a opo CSS.

Coloque a formatao desejada de seu CSS nesse documento.
Para linkar ao arquivo CSS criado ao documento existente clique no boto
Attach Style Sheet .

Basta agora todas as formataes a serem feitas no arquivo CSS, sero
aplicadas a todos os documentos ligados ao arquivo css.
Aplicando CSS em nosso layout exemplo
Vamos aproveitar o documento criado anteriormente e vamos aplicar CSS no
mesmo, como nosso layout servir de exemplo para as demais pginas, vamos
criar nosso arquivo de css externo e depois vamos linkar ele.
Crie um novo arquivo CSS.
57

volte ao seu documento index e deixe a visualizao em formato de cdigo.
Como ns j temos um estilo CSS dentro dele, selecione e copie.

cole-o no arquivo CSS, e depois apague de seu index as tags <style></style>.
importe apenas lembrar que utilizamos esse procedimento apenas para
ganharmos tempo, poderamos j ter criado todo nosso CSS diretamente no
arquivo css.
Salve seu arquivo css como estilos. css.
58

Vamos agora linkar nosso arquivo css ao documento index.html, com o
documento index.html aberto, clique na paleta de CSS no boto Attach Style
Sheet .


Vamos agora finalizar a formao de nosso layout.
59
Atualmente nosso layout est da seguinte forma:

Vamos mudar a cor de nosso background (fundo de nossa pgina). Na aba
CSS Styles, selecionando o boto All, vai aparecer todos as tags que j fazem
parte de nosso estilo, observe que temos a opo body, podemos alterar as
suas propriedades dando um duplo clique na tag.

60
podemos tambm alterar as propriedades de uma tag pela prpria paleta

Caso no aparea s propriedades da tag selecionada necessrio
expandir a paleta, para que isso seja possvel, basta apenas posicionar o
mouse entre o final de uma paleta e o inicio de outra, o cursos de seu mouse
vai se transformar em uma flecha de duas pontas mantenha o mouse
pressionado e aumente sua paleta.
A primeira alterao que vou fazer aplicar uma borda em volta de minha
tabela. Eu poderia aplicar esse estilo diretamente na TAG table, mas isso
afetaria qualquer pgina que tenha ligao com meu arquivo de CSS e
contenha uma tabela. Ento vou criar uma classe e aplicar essa classe
somente nessa tabela.
Para criar uma classe, clique no boto New CSS Rule .

61
Observe que dentro de Seletor Type devemos marcar a opo Class (can aply
to any tag). Depois devemos preencher o nome de nossa classe e onde vamos
criar a nossa classe. Pressione OK e ser aberto a janela de configurao de
estilos de nossa classe.
Como vamos alterar a borda de nossa tabela clique na opo Border.

Voc pode configurar o estilo de borda de sua classe, a largura do contorno e a
cor. Como est marcada a caixa Same for all, indicia que o que for aplicado a
Top ser aplicado tambm s demais, caso essa caixa seja desmarcada voc
poder definir propriedades diferentes para cada uma das posies de borda.
Ao terminar de aplicar clique em OK.
Para aplicar a classe em sua tabela necessrio selecionar a sua tabela. Para
fazer isso clique na tag <table> no rodap do Dreamweaver

Depois basta aplicar a classe pela barra de propriedades.
62

Uma outra forma de se aplicar a classe em uma tag pelo cdigo. Coloque seu
documento na visualizao CODE e localize a tag <table>, dentro dela voc
pode digitar class=bordatabela, lembrando que bordatabela o nome de
nossa classe.

Como a classe criada est dentro de nosso arquivo de estilo, necessrio
alm de salvar o documento html, salvar tambm o arquivo CSS. Ento clique
no Menu File, Save All.
Crie suas classe e aplique em seu layout.
No layout em uso crie uma classe chamada menu e apliquei diretamente na tag
TD (clula da tabela).

Para poder aplicar um cor de fundo em nossos ttulo internos que esto como
Ttulos de nvel 1, usei um recurso chamado DIV.
Foi criado uma classe para o background dos ttulos e aplicado dentro de um
elemento DIV.
63

Podemos tambm acrescentar um estilo a somente uma TAG, um recurso
interessante quando o estilo for pouco utilizado em seu site. Aplicamos um
estilo de padding margem esquerda em uma TAG.



Conforme j dito nessa apostila o conhecimento bsico da linguagem
HTML realmente necessrio para poder aproveitar todo os recursos que o
Dreamweaver fornece ao usurio. A formatao CSS um grande recurso de
formatao de seu HTML e uma das formas de voc deixar seu site dentro de
norma pela W3C(www.w3c.org).
64
CAMADAS E POSICIONAMENTO
As camadas fazem parte do mundo das folhas de estilo em cascata e da
Dynamic HTML. Uma camada um recipiente para contedo de HTML,
normalmente definido pelas TAGS <DIV> ou <SPAN>, que voc pode
posicionar em qualquer lugar em uma pgina.
As camadas so denominadas camadas, porque podem ser posicionadas em
trs dimenses. Voc pode configurar uma localizao absoluta ou relativa
para uma camada ao longo dos eixos x e y da pgina. A terceira dimenso
denominada ndice Z e permite que as camadas se sobreponham.
Os designers realmente adoram as camadas por sua versatilidade: voc pode
ocultar as camadas (por visibilidade) ou at partes das camadas (com o ndice
Z ou com o recorte de reas) quando uma pgina inicialmente carrega. Ento,
voc pode escrever um script que far com que as reas ocultas apaream
depois que certa quantidade de tempo ou quando certo evento de usurio
acontece.
Posicionamento CSS
Voc pode aplicar posicionamento de CSS para um bloco de texto, um
elemento do tipo bloco, uma imagem ou uma camada. H duas maneiras de
aplicar posicionamento: uma criar uma classe de estilo e aplic-la s
selees ou blocos de texto que voc quer posicionar na pgina. A outra criar
uma camada na janela de documento que voc pode modificar
independentemente de criar um estilo.
Posicionamento absoluto versus relativo
A posio de um elemento de HTML pode ser absoluta, relativa ou esttica.
O posicionamento normal chamado esttico e faz com que o elemento seja
posicionado dentro do fluxo normal do texto.
O posicionamento relativo significa que a posio de uma camada ou outro
elemento definida em relao ao canto superior esquerdo do recipiente pai.
Entretanto, o elemento relativo est includo no fluxo da pgina e tambm
embutido ele no causa quebras de linha automticas.
Para garantir as propriedades inline, uma tag <SPAN>deve ser utilizada em
65
vez de uma tag <DIV>.
Criando Camadas
Para poder criar uma camada voc deve deixar sua aba em Layout e deve usar
um dos dois elementos de criao de camadas.



As propriedades de nossa Layer. Da caixa de propriedades so o nome da
layer. A propriedade Overflow como a Layer vai se comportar no documento,
o padro visvel, mas podemos definir ela como Hidden (escondida), existe
esse recurso, pois podemos atravs de scripts deixar ela visvel em atravs de
botes, textos e imagens. Scroll (com barras de rolagem), que manter barras
de rolagem em sua layer, isso permite que ela tenha um tamanho menor que o
seu contedo. Auto que mostrar as barras de rolagem somente quando forem
necessrias.
A opo Left(L) e Top(T) so relativas ao posicionamento da Layer,
observando que os pontos 0,0 (L, T) ficam no canto superior da pgina.
66
As dimenses de nossa Layer W (width) e H (height) so representadas
sempre em pixels.
Z-index relativo ao empilhamento de nossas camadas, isso permite que
possamos colocar uma layer sobre a outra, a camada de Z-index maior sempre
ficar acima da outra. Um detalhe importante, animaes em SWF sempre
ficaro acima da layers independente do Z-index, sendo necessrio o uso do
parmetro de Transparncia (conforme visto no captulo de Multimdia).

Vis, referente visibilidade da camada.
A opo BG Image permite definir uma imagem de fundo da Layer e a opo
BG Color, permite colocar uma cor de fundo na Layer.
A opo Clip permite recortar nossa Layer
No painel camadas possvel marcar a opo Prevent Overlaps, isso far
com no seja possvel sobrepor s camadas.
Escolhendo as TAGS
H duas tags utilizadas na criao de camadas. As tags <DIV>e <SPAN>
criam o que chamado de camada marquee. A tag <DIV> utilizada
posicionamento absoluto, uma quebra de pargrafo cerca a tag<DIV>. Se
preferir criar uma camada embutida sem quebras de pargrafo utilize a tag
<SPAN>.
Uma das principais vantagens das camadas que se pode posicion-las e
67
arrast-las para qualquer posio de sua pgina, basta apenas clicar sobre o
quadradinho no topo e arrast-la ou alterar as propriedades Esquerda e Alto na
barra de propriedades.
Para redimensionar as camadas pode-se utilizar as alas de
redimensionamento ou atravs da largura e altura na caixa de propriedades.
Aninhando e Sobrepondo Camadas.
Aninhando Camadas
A coisa mais interessante sobre as camadas que voc pode colocar uma
camada entro de outra ou pode criar duas camadas que se sobrepem.
Para sobrepor duas ou mais camadas, somente mover uma sobre a outra.
Para aninhar uma camada dentro de uma camada, basta criar a primeira
camada e depois criar a segunda camada dentro da primeira.
No painel Camadas voc tem as camadas sendo mostradas, clique sobre a
segunda camada criada e arraste-a sobre a primeira camada com a tecla CTRL
pressionada e observe que a camada fica como uma subdiviso da primeira.
Criando nosso layout com DIVS
Primeiro crie uma DIV que ser o quadro de nosso site. Defina pela barra de
propriedades suas propriedades.

depois crie a segunda DIV que far parte do topo de nosso site.


Para que a layer criada fique dentro de nossa layer bloco, clique sobre ela na
paleta AP Elements, pressione a tecla CTRL, e mantendo ela pressionada
arraste ela para cima de bloco. Ela ficar como sendo filha da layer principal.
68

Veja como ficou a paleta de layers para nosso layout.

69

FRAMES
A construo de pginas em Frames embora seja possvel e considerada
ultrapassada e fora de padres de layout atuais e futuros. Mas em algumas
situaes ela pode se tornar muito teis.
Embora uma pgina baseada em frames funcione como uma nica pgina
WEB, cada frame, contm um nico documento de HTM que pode incluir
contedos completamente separados e barras de rolagem independente. A
cola que une esses documentos chamada documento de definio de
frameset ou pgina de frameset um frameset um conjunto de frames e a
pgina de frameset que define como um conjunto.
Criando os Frames
Para criar frames clique no Menu File New, e escolha Framesets
70

Ao clicar no boto Create, ser solicitado que se de nome aos Frames que
compe o seu Layout, voc pode deixar os nomes padres ou modificar de
uma forma que facilite a identificao posterior.

Podemos alterar as propriedades de nosso frames colocando bordas, cores
para a borda, largura para a borda definir unidade de medida atravs da barra
de propriedades dos frames.

Podemos acrescentar novas molduras criando novas subdivises em nossos
71
frames.
No topo digite o ttulo de seu site ou importe uma figura que seja o titulo.
Na parte esquerda defina alguns texto para os nossos links e na direita coloque
um contedo qualquer.
O seu layout pode estar parecido conforme abaixo.

Agora vamos criar nossos links, para dentro de nosso frame. Selecione a
palavra Principal e ligue ao arquivo principal e na barra de propriedades, onde
diz destino escolha o frame onde voc quer abrir o link, no caso mainFrame.

Salvando Frames
Existe um cuidado muito grande ao salvar uma pgina com Frames, pois uma
frame como o nosso exemplo possui 4 (quatro) pginas abertas, o topo, o
menu, o miolo e o quadro principal que armazena o frame.
Para salvar todas as pginas do frames, clique no Menu File Save All (salvar
todos). Observe que o Frame quadro, ser o primeiro a ser salvo (ele mostra
uma borda grossa em volta de todos os frames. Depois ele vai salvar o miolo,
72
observe que o miolo ficar agora com a borda mais grossa. O terceiro Frame a
ser salvo o menu. Finalizando o processo de salvar os Frames, ser salvo o
topo.
Alterando as propriedades de suas molduras
Para modificar o nome e as propriedades de suas molduras individualmente,
chame o painel Frames.
Podemos definir qual ser a pgina a ser aberta dentro do Frame, formatao
das bordas, definir qual ser o nome de nosso frame, se ser possvel
redimensionamento, como ser a paginao e largura e altura da margem.

Criando Frames Embutidos (IFRAME)
Existe uma TAG chamada <IFRAME>para fazer os frames aparecerem dentro
de uma pgina.
Para poder introduzi-la proceda da seguinte maneira abra o visualizador de
cdigo do HTML e insira a seguinte TAG <IFRAME SRC= arquivo.htm
></IFRAME>. As propriedades do IFRAME so as mesmas do FRAME.

Podemos tambm acrescentar IFRAME, pelo assistente de TAG do
Dreamweaver. Clique no Menu Insert TAG, Clique em HTML TAGS, Page
elements, General, Iframe.
73

Depois clique em Insert, e especifique as propriedades de seu Iframe.

Em Source, devemos colocar qual ser a pgina a ser aberta no IFRAME, em
Name, deve-se colocar um nome para o IFRAME ( imprescindvel o
preenchimento desse campo, caso que faa link para abrir outras pginas
dentro do IFRAME).
Width e Height para definir a largura e altura do IFRAME.
Margin width e Margin Height para definir as margens de IFRAME e do
contedo interno e externo dele.
74
Alignment, forma de alinhamento do contedo dentro do IFRAME
Scrolling, definio de como sero apresentadas s barras de rolagem (A
opo Auto apresentar as barras de rolagem somente quando necessrias).
Show Borders, permitir ter ou no bordas em seu IFRAME.
FORMULRIOS
O Dreamweaver possui todos os recursos para a criao de um formulrio,
inclusive para formulrios dinmicos que atribuam envios para pginas
dinmicas como ASP, PHP, J SP, CFM.
Os elementos de um Formulrio
Para inserir um formulrio no Dreamweaver clique no Menu Insert Form, ou
deixe visvel a Aba Form do Dreamweaver.


Ser acrescentado ao seu documento rea de seu formulrio, essa rea
representada com uma linha pontilhada de vermelho.

Na barra de propriedades deve-se definir qual ser o nome do formulrio a
forma de envio. A forma de envio pode ser para um arquivo dinmico (ASP,
PHP, etc...) que vai tratar os dados postados no formulrio e enviar para um
banco de dados ou direcionar para um e-mail, ou diretamente para um e-mail.
necessrio tambm definir o Mtodo a ser utilizado POST ou GET.
Tipos de campos de formulrio
Para inserir os objetos do formulrio, clique no Menu Insert Form Objects, ou
clicar nos botes correspondentes na Aba de formulrio.
importante sempre verificar se os campos esto sendo colocados dentro do
retngulo pontilhado que a rea de nosso formulrio.
75
Caixas de Texto : Permitem que se entre com textos e nmeros. Pode ser
de linha simples, multilinha Chamados de caixas de comentrios, e senha
onde ele mascara tudo o que for digitado com sinais de (*) asteriscos.

Ao acrescentar um campo de texto necessrio preencher alguns campos de
propriedades. Devemos dar um nome ao nosso campo de texto, definir o
numero de caracteres visveis (Char width), isso implicar no tamanho do
campo do formulrio. Max Chars define um nmero mximo de caracteres que
poder ser preenchido no campo.
Caixas de Seleo : So as caixas de checagem que permitem que se
selecione vrios para preferncias do visitante e podem ter o seu estado inicial
selecionado ou no.

Ao se criar um grupo de opes de marcao as opes devero sempre
pertencer ao mesmo grupo.
Boto de Opo : Permitem que o usurio faa apenas a seleo de um
objeto entre vrias opes possveis e tambm podem ter o seu estado inicial
selecionado ou no.

Ao se criar um grupo de opes de marcao as opes devero sempre
pertencer ao mesmo grupo.
Menu de Lista: Permitem que se criem menus de listagem para escolha do
usurio.
76

Ao criar o menu de lista na barra de propriedades necessrio clicar no boto
Lista Values e preencher o Label (nome que vai aparecer ao usurio) e valor do
campo ao ser selecionado.
O padro do campo ser uma lista, mas podemos definir ele tambm como
uma lista. Ao campo ser definido como uma lista podemos definir quantas
linhas sero visveis e se ser possvel selecionar mais de um item na lista
(basta marcar o campo Selections Allow multiple).



Botes : Permitem que se crie botes de ao de enviar (Action Submit
Form), e limpar campos (Action Reset Form), ou para eventos atravs de
linguagens de scripts (None).

Crie um layout de formulrio conforme a seguir.
77

No campo Nome coloque o textfield como nome.

Para o campo e-mail preencha email e para o campo comentrios coloque
comentrios.
Voc pode observar que no mtodo de envio de nosso formulrio o mesmo
envia os dados para um documento chamado env_contato.php. Caso voc
no tenha preenchido esse campo, basta apenas clicar na tag <form> no
rodap do Dreamweaver.
Esse arquivo env_contato.php, ser o arquivo que vai receber os dados
postados no formulrio. O cdigo que vamos criar ser na linguagem PHP.
Crie o seu arquivo env_contato.php, o visualize pelo modo COD e acrescente o
seguinte cdigo onde ficar a sua resposta.
<?
//Recebendo os dados do formulrio.
$nome = $_POST[" nome" ];
$email = $_POST[" email" ];
$assunto = $_POST[" assunto" ];
$mensagem=$_POST[" comentario" ];
//Setando o restante das variveis para o disparo do email
$destinatario = " seumail@seuprovedor.com.br" ;
78
$formato = " \nContent-type: text/html\n" ;
//Incluindo os campos nome e email no corpo da mensagem.
$msg = " - Nome: " .$nome." <br>- Assunto: " .$assunto." <br>- Mensagem:
" .$mensagem;
//Enviando o email
mail(" $destinatario" ," $assunto" ," $msg" ," from: " .$email.$formato);
//Criando a mensagem de confirmao de envio de email.
echo " <div align=center>Mensagem enviada com sucesso! Aguarde um
retorno. Clique <a href='index.php'> <b>aqui</b> </a> para
retornar.</div>" ;
?>


79

Menu de Salto
J unto criao do Formulrio existe uma opo chamada J ump Menu, que
permite criar um menu de lista, que ao ser selecionado direcional para um link
ou URL.
Para criar seu menu de Salto, clique no boto J ump Menu na Aba Form

Na primeira parte da janela vai aparecer o primeiro elemento a ser colocado no
menu, na opo Text deve-se definir qual ser o nome a ser apresentado, na
opo When selected, go to URL voc deve preencher com o link a ser aberto
ou URL, para criar o seu segundo elemento clique no sinal de mais (+) no topo
da janela. Repita o processo para os demais campos a serem criados.
Aps definido todos os campos necessrio definir a forma de abertura dos
links, um nome para seu menu e as opes.
A opo Insert GO Button after menu criar junto ao menu de lista um boto
80
que permitir ir para o destino do link, com ele desmarcado, ao selecionar ele
far o link ao ser selecionado.
COMPORTAMENTOS
As ferramentas de comportamento do Dreamweaver permite que voc aplique
as aes comuns de J avaScript sem escrever nenhum J avaScript.
Voc pode fazer algo acontecer em uma pgina quando seus usurios
carregam uma pgina, clicam em um objeto ou movem o mouse pela tela.
Logicamente que o Dreamweaver possui as rotinas mais comuns de javascript,
pois o J avaScript uma linguagem de scripts Orientada a Objetos e a sua
estrutura e construo depende do seu conhecimento em relao linguagem
Adicionando Comportamentos
Adicionar um comportamento a uma pgina incrivelmente simples o
complicado so os detalhes. Todos os comportamentos do Dreamweaver so
adicionados e editados com o inspetor Behaviors.
Para adicionar um comportamento a sua figura basta apenas clicar sobre o
sinal de (+) na esquerda superior do Painel.

81
Pop-ups
Importe uma imagem qualquer e clique sobre ela, depois chame as opes de
comportamentos e escolha Open Browser Window (Abrir uma janela de
navegador), esta uma das opes mais comuns pelo fato de as janelas Pop-
Up serem muito utilizadas para propaganda em WebSites.

Ao terminar coloque Ok e observe o painel behaviors. Observe que ele mostra
a ao e o evento que far com que a ao se proceda, mude o Evento para
OnClick.

Ocultar Mostrar camadas
Atualmente muitos usurios utilizam bloqueadores de janelas pop-up, embora
seja possvel configurar e at mesmo autorizar abertura de janela pop-up, a
maioria dos usurios de Internet simplesmente a ignoram. Um dos recursos
que tem crescido ultimamente so os chamados banners flutuantes que so
Layers com a publicidade que antes eram utilizadas dentro das janelas pop-up,
necessrio apenas criar dentro dessa janela a possibilidade de se fechar a
Layer (assim ela vai aparecer para o usurio, mas na realidade ela ficar
oculta).
82
Para criar seu banner flutuante, proceda da seguinte forma:
1 Crie uma layer, de um nome a ela e coloque dentro dela o contedo a ser
mostrado. aconselhvel nomear a sua layer

2 possvel definir textos, imagens e mapas de imagens para chamarem o
comportamento que permitir fechar a janela. No caso da imagem acima foi
definido um texto fechar.
3 Selecione o texto e no painel Behaviors, clique na opo Show / Hide
Layers.

4 Na janela aberta vai aparecer sobre as layers existentes em seu
documento, selecione a Layer a ser fechada e clique no boto Hide.
5 Na paleta Behaviors ele vai mostrar o comportamento criado, necessrio
mudar o comportamento para fechar a Layer. Coloque como opo onClick,
pois somente ao ser clicado no texto que ser fechada a Layer.

83
Validando Formulrios
Um dos recursos importantes hoje para a comunicao entre o visitante de um
site a possibilidade de ele fazer contato com o responsvel pelo site. A
melhor forma desse contato atravs de um formulrio. E para certificarmos
que os dados sejam enviados ao destinatrio, podemos validar nosso
formulrio.
Abra nosso formulrio:

Nosso objetivo fazer com que esses campos no possam ser enviados em
branco e que o campo e-mail precise de um e-mail vlido (no impede de ser
enviado algo como teste@teste.com .
Clique dentro da rea de seu formulrio e na paleta Behaviors, clique na opo
validate Form, ser aberta a janela onde vo aparecer os campos de nosso
formulrio.

Observe que ele mostra o tipo de campo text, o nome do campo e o nome do
formulrio, no caso contato.
Para o campo nome, basta apenas clicar sobre ele e marcar a opo
Required, isso far com o campo seja obrigatrio.
84
Para o campo e-mail, marque a opo Required e marque tambm o radio
button Email address, isso far com ele aceite apenas endereos de e-mail.
Para o campo assunto, marque apenas Required.
Teste seu formulrio e faa o envio sem preencher os campos. Observe que
ele mostra as mensagens, mas com os textos em ingls.

Vamos arrumar nossos textos para que fiquem em portugus. Nas opes de
visualizao do Dreamweaver clique na opo CODE
Voc pode observar que o Dreamweaver faz todo o trabalho de cdigo para
voc.

Vamos ento modificar os textos de respostas para nosso idioma.
Localize a linha mude para digite um endereo
de e-mail vlido.
Localize a linha mude para requerido ou campo(s)
obrigatrio(s).
Localize agora e mude para Foram
encontrados os seguintes erros.
Salve e teste novamente seu formulrio.
85



SPY (AJAX NO DREAMWEAVER)
O framework Spry so bibliotecas no formato J avaScript e CSS, as quais
permitem aos usurios do Dreamweaver desenvolver interfaces mais ricas e
dinmicas. Alm de possibilitar a exibio de dados no formato XML e criar
elementos interativos em pginas que exibem contedo dinmico sem a
necessidade de tais pginas se carregarem por completo.
O Dreamweaver CS3 disponibiliza o Spry em duas perspectivas, uma para
designers e outra para programadores. Os designers podero criar efeitos
visuais como Appear, Fade, Blinds (Up e Down), Grow, Shake, Slide, entre
vrios outros. J os programadores tero facilidades ao trabalhar com o Ajax e
86
na exibio de dados armazenados em arquivos XML. Alm desses recursos,
tantos para designers quanto para programadores, o Spry oferece alguns
widgets que auxiliam na validao de formulrios.
Vamos analisar a interface do Dreamweaver CS3 e localizar os recursos do
Spry. Nas abas da Insert Bar localizam praticamente todos os recursos do
framework em questo. Vamos analisar:
A aba Spry, como demonstrada na imagem abaixo.

Disponibiliza 13 recursos, divididos em trs grupos. O primeiro deles - da
esquerda para a direita - so utilizados para se trabalhar com dados em
arquivos XML; o segundo e o terceiro so os widgets oferecidos pelo Spry,
utilizados na validao de formulrios e na criao de elementos de interface,
respectivamente.
Esses grupos de recursos localizados na aba Spry, esto localizados, tambm,
em outras abas. Uma vez que cada grupo de recursos corresponde a
finalidades distintas. O que significa dizer que na aba Data, teremos o primeiro
grupo; na aba Forms o segundo e na aba Layout o terceiro grupo.
Os demais recursos oferecidos pelo Spry so os efeitos, effects. Ambos esto
localizados na opo Effects do painel Behaviors, como ilustrado na imagem a
seguir:

Quando voc seleciona algum recurso do spry no Documento window do
Dreamweaver, o Property inspector atualizado e exibe as configuraes de
recurso em questo, veja um exemplo:
87


Spry Menu Bar
O Spry Menu Bar, vem a facilitar a criao de menus.
Crie um novo documento e clique sobre o boto Spry Menu Bar, o
Dreamweaver vai solicitar que voc salve seu documento para dar
continuidade. Ao salvar o documento, ele vai criar uma nova pasta em seu
projeto chamada SryAssets e vai solicitar o layout de menu que voc quer criar.

Ao clicar em OK ele vai montar o menu de acordo com o solicitado.

Para poder remover / acrescentar itens, alterar os itens de seu menu, voc
deve utilizar a barra de propriedades.

88

Para poder alterar as propriedades de formatao de nossa aplicao Spry,
voc deve alterar o seu CSS.

Spry Accordion
Clique no boto Spry Accordion, ser necessrio salvar seu documento.
O Dreamweaver vai mostrar em sua rea de trabalho a estrutura do Menu
Accordion. As alteraes nele devem ser feitas atravs da caixa de
Ferramentas.
89



Voc pode acrescentar qualquer contedo HTMl dentro da rea Content do
Spry Accordion.
Para alterar as propriedades do seu Spry necessrio utilizar a paleta de CSS.

Spry Effects
O Effects um conjunto de efeitos visuais do Frameworks Spry, que pode ser
adicionado em diversos elementos do HTML. No Dreamweaver os efeitos
podem ser adicionados no modo Design, sem a necessidade de trabalhar
diretamente com cdigo, facilitando ainda mais a adio desses efeitos. O
Effects fica localizado no Painel de Behaviors (Windows >Behaviors) como um
comportamento normal, podendo ser ativado com diversos eventos.
90
Appear/ Fade
Esse efeito faz o elemento selecionado ir aparecendo ou surgindo na tela.
Pode usar este efeito com todos os objetos do HTML exceto o applet, body,
iframe, tr, tbody, ou th.Para aplic-lo voc deve selecionar aonde ser ativado,
podendo ser o prprio elemento, depois ir ao Painel Behaviors do
Dreamweaver (Windows >Behaviors), clicar no boto adicionar comportamento
(+), selecionar a opo Effects e depois o Appear/Fade. A janela de
configurao do efeito fade ira se abrir para podemos configur-lo.

Target Element: Selecionar o ID do objeto ou elemento onde ser aplicado o
efeito. Se voc j estiver selecionado o objeto, pode escolher <Current
Selection>.
Effect duration: Tempo de durao do efeito em milissegundos.
Effect: Tipo de efeito podendo ser o Fade aonde a camada vai sumindo aos
poucos, ou Appear aonde a camada vai aparecendo.
From: Tamanho da camada em porcentagem quando o efeito iniciar.
To: Tamanho da camada porcentagem quando o efeito terminar
Blind
Esse efeito faz a camada selecionada subir ou descer lentamente semelhante
a uma cortina que sendo aberta ou fechada. Pode ser usado somente com
estes objetos do HTML: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p,
ol, ul, li, applet, center, dir, menu, ou pr. Para aplic-lo voc deve selecionar
aonde ser ativado, podendo ser o prprio elemento, depois ir ao Painel
Behaviors do Dreamweaver (Windows >Behaviors), clicar no boto adicionar
91
comportamento (+), selecionar a opo Effects e depois o Blind. A janela de
configurao do efeito Blind vai se abrir para podemos configur-lo.

Target Element: Selecionar o ID do objeto ou elemento onde ser aplicado o
efeito.
Effect duration: Tempo de durao do efeito em milisegundos.
Effect: Tipo de efeito podendo ser o Blind Up aonde a camada vai subindo, ou
Blind Down aonde a camada vai descendo na tela.
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar.
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar.
Grow/ Shrink
Esse efeito faz o elemento selecionado crescer ou diminuir. Pode ser usado
com estes objetos do HTML: address, dd, div, dl, dt, form, p, ol, ul, applet,
center, dir, menu, o pre. Para aplic-lo voc deve selecionar aonde ser
ativado, podendo ser o prprio elemento, depois ir ao Painel Behaviors do
Dreamweaver (Windows >Behaviors), clicar no boto adicionar comportamento
(+), selecionar a opo Effects e depois o Grow/ Shrink. A janela de
configurao do efeito Grow/ Shrink vai se abrir para podemos configur-lo.
92

Target Element: Selecionar o ID do objeto ou elemento onde ser aplicado o
efeito. Se voc j estiver selecionado o objeto, pode escolher <Current
Selection>.
Effect duration: Tempo de durao do efeito em milisegundos.
Effect: Tipo de efeito podendo ser Grow aonde a camada vai crescer, ou
Shrink aonde a camada vai diminuir na tela.
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar.
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar.
To: Para que local a camada deve ir quando o efeito for selecionado podendo
ser ao centro ou a esquerda superior.
Shake
Esse efeito faz o elemento selecionado dar uma tremida. Voc pode usar este
efeito com estes objetos do HTML: address, blockquote, dd, div, dl, dt, fieldset,
form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu,
pre, ou table. Para aplic-lo voc deve selecionar aonde ser ativado, podendo
ser o prprio elemento, depois ir ao Painel Behaviors do Dreamweaver
(Windows > Behaviors), clicar no boto adicionar comportamento (+),
selecionar a opo Effects e depois o Shake. A janela de configurao do efeito
Shake vai se abrir para podemos configur-lo.
93

Target Element: Selecionar o ID do objeto ou elemento onde ser aplicado o
efeito. Se voc j estiver selecionado o objeto, pode escolher <Current
Selection>.
Squish
Esse efeito faz o elemento selecionado desaparecer. Voc pode usar este
efeito com estes objetos do HTML: address, dd, div, dl, dt, form, img, p, ol, ul,
applet, center, dir, menu, or pre. Para aplic-lo voc deve selecionar aonde
ser ativado, podendo ser o prprio elemento, depois ir ao Painel Behaviors do
Dreamweaver (Windows >Behaviors), clicar no boto adicionar comportamento
(+), selecionar a opo Effects e depois o Squish. A janela de configurao do
efeito Squish vai se abrir para podemos configur-lo.

Target Element: Selecionar o ID do objeto ou elemento onde ser aplicado o
efeito. Se voc j estiver selecionado o objeto, pode escolher <Current
Selection>.
Slide
Esse efeito faz uma transio podendo ser para cima ou para baixo. Voc pode
usar este efeito com estes objetos do HTML: blockquote, dd, div, form, or
cente. Esse efeito requer uma nica tag ID e os efeitos dentro do elemento com
tag ID. Para aplic-lo voc deve selecionar aonde ser ativado, podendo ser o
prprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows >
Behaviors), clicar no boto adicionar comportamento (+), selecionar a opo
Effects e depois o Shake. A janela de configurao do efeito Shake vai se abrir
94
para podemos configur-lo.

Target Element: Selecionar o ID do objeto ou elemento onde ser aplicado o
efeito. Se voc j estiver selecionado o objeto, pode escolher <Current
Selection>.
Effect duration: Tempo de durao do efeito em milisegundos
Effect: Tipo de efeito podendo ser Slide UP aonde a camada vai subir, ou Slide
Down aonde a camada vai descendo na tela
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar
Highlight
Esse efeito faz o elemento selecionado ir trocando as cores. Pode ser usado
com todos os objetos do HTML exceto o applet, body, frame, frameset, ou
noframes. Para aplic-lo voc deve selecionar aonde ser ativado, podendo ser
o prprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows >
Behaviors), clicar no boto adicionar comportamento (+), selecionar a opo
Effects e depois o Highlight. A janela de configurao do efeito Highlight ira se
abrir para podemos configur-lo.
95

Target Element: Selecionar o ID do objeto ou elemento onde ser aplicado o
efeito. Se voc j estiver selecionado o objeto, pode escolher <Current
Selection>.
Effect duration: Tempo de durao do efeito em milisegundos.
Start Color: Cor com qual o efeito vai iniciar.
End Color: Cor com qual o efeito vai terminar.
Color after Effect: Esta cor dura somente durante a durao do efeito

EXTENSES DO DREAMWEAVER
A Macromedia fornece aos usurios extenses para serem utilizadas em seus
aplicativos, mais especificamente Flash e Dreamweaver e Fireworks. Para que
se possa instalar uma extenso necessrio ter instalado o Extension
Manager.
Voc pode fazer o download de extenses do dreamweaver no seguinte site:
http://www.adobe.com/cfusion/exchange/
96

Observe que algumas extenses so pagas.
Para poder baixar uma extenso ser necessrio que voc possua um
cadastro no site, no existe custo para usar os recursos do site, o que pode
ocorrer e voc encontrar uma extenso que precise ser comprada, pois como o
site uma comunidade, alguns desenvolvedores criam extenso e as
vendem pelo site.


Instalando uma nova extenso
Aps fazer o download da extenso d um duplo clique sobre a extenso e
aceite as normas de uso.
97

Ser mostradas a tela com as extenses instaladas.

Observe que ele mostra as extenses instaladas, uma breve descrio do que
ela faz e como se deve acessar a ela pelo Dreamweaver.
Vamos testar a aplicao dessa extenso.
Clique no Menu Insert, media, Iphone Style Menu
98

Ser solicitado que seja salvo o arquivo SWF. Salve seu arquivo. Se for um
HTML novo ele tambm solicitar que o arquivo seja salvo.
Ser acrescentada ao seu dreamweaver uma paleta chamada Flash element,
atravs dela voc poder alterar as propriedades de seu menu.
No endereo http://f-source.com/accordion-menu/iphone/#menu_config voc poder acessar a
todas as propriedades e como proceder a todas as alteraes em seu menu

importante lembrar que o exemplo usado acima funciona para essa
extenso, cada extenso ter as suas propriedades e funes.
CONCLUSO
Como pode ser visto nas pginas anteriores o Adobe Dreamweaver um dos
mais complexos e fascinantes programas do mercado de Webdesign,
logicamente que no foi possvel explorar todas as ferramentas e opes
existente em um programa to completo como esse, mas com certeza foi
explorado e explicado as mais importantes ferramentas e modos de trabalhar
99
com este fascinante programa.
Como auxilio em seu aprendizado, procure sempre consultar o HELP (tecla de
atalho F1) do programa.

Procure tambm sempre atualizar seu programa com os UPDATES fornecidos
pelo site oficial do fabricante www.adobe.com.br ou www.adobe.com.
Bem como das novidades que esto fase de testes. http://labs.adobe.com/.