Desenvolvida exclusivamente para o Apostilando.

com por
Marcos Paulo Furlan

1
NDICE
NDICE .......................................................................................................................................... 2
INTRODUO .............................................................................................................................. 4
PROJETO DE UM SITE................................................................................................................ 5
CRIANDO DOCUMENTOS........................................................................................................... 7
Propriedades da pgina .................................................................................. 9
Publicando seu arquivo ................................................................................ 13
INTERFACE ................................................................................................................................ 15
Formas de visualizao............................................................................. 16
Visualizao do Documento ......................................................................... 17
Painis ...................................................................................................... 17
Barra de Propriedades .............................................................................. 18
TRABALHANDO COM TEXTOS................................................................................................ 18
Localizar e Substituir .................................................................................... 19
Pargrafos e Layout ..................................................................................... 20
Pargrafos e Quebras de linha ................................................................. 20
Ttulos ........................................................................................................... 21
Texto Pr-Formatado .................................................................................... 21
Listas ............................................................................................................ 22
Recuando Texto ........................................................................................... 22
Caracteres Especiais em HTML ................................................................... 22
Linhas Horizontais ........................................................................................ 23
IMAGENS .................................................................................................................................... 23
Mapas de Imagem ........................................................................................ 27
Criando Rollovers simples ............................................................................ 28
Image Placeholder ........................................................................................ 29
CONTEDO MULTIMIDIA.......................................................................................................... 30
Insero de Animaes Flash (SWF) ........................................................... 30
Flash Vdeo................................................................................................... 32
HYPERLINKS ............................................................................................................................. 34
Links Absolutos e Relativos .......................................................................... 34
Os nomes de caminho absolutos .............................................................. 34
Criando Links ................................................................................................ 35
ncoras......................................................................................................... 38
Criando a ncora ....................................................................................... 38
Chamando o link da ncora ...................................................................... 38
Links para e-mail .......................................................................................... 39
TABELAS .................................................................................................................................... 39
Clulas .......................................................................................................... 41
Criando um Layout de site com Tabelas ...................................................... 43

2
FOLHAS DE ESTILO .................................................................................................................. 44
Editando uma folha de Estilos ...................................................................... 49
Criando uma classe ...................................................................................... 49
CSS3 ............................................................................................................ 53
Propriedades novas em CSS3 .................................................................. 53
CAMADAS E POSICIONAMENTO ............................................................................................ 56
Posicionamento CSS .................................................................................... 56
Posicionamento absoluto versus relativo .................................................. 57
Criando Camadas ......................................................................................... 57
FORMULRIOS .......................................................................................................................... 59
Os elementos de um Formulrio................................................................... 59
Tipos de campos de formulrio..................................................................... 60
COMPORTAMENTOS ................................................................................................................ 63
Adicionando Comportamentos...................................................................... 64
Pop-ups ........................................................................................................ 64
CONCLUSO ............................................................................................................................. 65

3
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
Javascript. 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.
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.

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.

4
 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 Site do Dreamweaver
Clique nessa opo. Ele vai abrir um assistente de criao do ambiente site.

Nessa etapa voc deve dar um nome ao seu site e a pasta em seu computador
onde sero salvos os arquivos a serem utilizados. D um nome ao seu site e
clique na opo Servers. Clique no sinal de mais (+) para definirmos o servidor.
Se voc ainda no possui um servidor, pode pular esta etapa. Voc pode
tambm montar todas as suas pgina e somente depois enviar os arquivos
para o seu servidor usando um programa de FTP.

5
Clique em Test para verificar a conexo com o servidor.

Clique em Save.
Clique em Save Novamente.

Se voc tem interesse em usar o Dreamweaver para aplicaes

dinmicas conhea o Curso WebKit do Apostilando.com -
http://apostilando.com/pagina.php?cod=30.

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

6
view - em sua mquina) e Remote view (em seu servidor).
3 Permitem 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.
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
9 Permitem 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, Gerenciar Sites.

CRIANDO DOCUMENTOS
O Dreamweaver CS6 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 seu documento HTML, ColdFusion,
PHP, etc..., como pode tambm clicar na opo Mais..., embaixo de todas.

7
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 Criar, ele cria seu primeiro documento HTML.

8
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 Modificar, Propriedades da Pgina.

Na janela que se abre temos vrias categorias, observe que voc pode
configurar diretamente na TAG, ou ento criar um bloco CSS para o mesmo.
recomendvel sempre usar blocos CSS. A primeira delas a Aparncia (CSS),
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.

9
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 Ttulos relativa formatao dos ttulos de sua pgina (O
HTML permite a configurao e utilizao de at 6 tipos de ttulos)

10
A guia Titulo / Codificao, 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.

11
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
Arquivos

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 Web designer 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

12
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

Put File(s) . Ele mostra a tela de conexo.

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

Caso queira, voc pode montar todo o seu site e depois envi-lo para teste.
Caso queira pode tambm usar um programa de FTP Externo ao
Dreamweaver.

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

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

14
INTERFACE
Ao criar seu primeiro arquivo o Dreamweaver ele apresentar na parte superior
a barra de menus. Na direita temos o painel Inserir.

Na 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

15
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.

Dividir : 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.

Cdigo : 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.

16
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.
Para poder ver como ficar a sua pgina, basta clicar no boto
Visualizar/Debug in Browser.

Ao clicar na opo Editar Lista de Navegadores, voc pode definir qual o

navegador de prioridade, adicionar ou remover navegadores, etc.

Painis
O Dreamweaver como os demais programas Adobe possuem para a maioria
de seus comandos painis, posicionadas direita da tela.

17
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

Diferente das verses anteriores, agora a formatao de textos em um
documento no Dreamweaver XHTML, possui na barra apenas a escolha de
TAG para o texto Como Format, Class (classe), e algumas como formatao de
Negrito e itlico. No podemos mudar mais a fonte do texto por esta barra.

18
Para este tipo de mudana ser necessrio trabalharmos com CSS que ser
visto posteriormente.

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>), recurso que era possvel at a verso CS3 do Dreamweaver.
Na opo formato podemos definir se ser somente texto ou ter atribuies de
cabealho (veremos posteriormente).
Temos a opo de atribuir um link ao texto (assunto a ser visto posteriormente).
O uso de marcadores e recuos.
Atravs do Menu Texto 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 Sting de texto por outra.
Para localizar um pedao de texto em seu documento, clique no Menu Editar,
Localizar e Substituir.

19
Pargrafos e Layout
A unidade bsica de texto em HTML o pargrafo. Enquanto o pargrafo o
nome especfico de texto includo pela tal <P>, os pargrafos podem ser mais
amplamente definidos como qualquer bloco de texto especificamente
formatado. Os tipos de pargrafos incluem itens de lista, texto pr-formatado 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
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.

20
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.

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 pr-formatado. 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.

21
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 Texto, Lista, temos ainda a opo de lista de
Definio, que utilizada para sumrios em seu site.

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 Inserir, Caracteres Especiais, Outros.

22
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 Inserir, HTML, Rgua
Horizontal.
Ao criar a linha horizontal e selecion-la voc pode format-la.

IMAGENS
Um dos recursos mais utilizados em Home Pages so imagens, e os formatos
mais utilizados so GIF e JPG, outro formato que vem crescendo na utilizao
em HP o formato PNG, formato reconhecido pela W3C(www.w3c.org).

23
Para inserir uma imagem em sua HP, temos vrias formas, a mais prtica
clicando sobre o boto Inserir Imagens na caixa de Ferramentas , outra
forma, atravs do Menu Inserir.

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.

24
 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 Descrio Longa pode deixar em branco

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:

25
 Permite abrir a imagem no Programa relacionado para edio. No caso um
PNG abre no Adobe Fireworks. J uma imagem JPG ser aberta no Adobe
Photoshop.

Otimizao de Imagem: Permite mudar atributos da imagem.

Ferramenta Cortar, 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.

26
 Redimensionar, ao redimensionar a imagem, possvel deixar a imagem
salva com o novo tamanho.

Permite modificar o brilho e contraste da imagem

Sharpe 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.
L 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).
Aliga 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,
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.

27
Criando Rol overs simples
Um rol over de imagem uma ao de Java Script 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 rol over imagem 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 rol over podemos proceder da seguinte forma,
atravs do boto Rollover Imagem, ou atravs do Menu Inserir, Objetos de
Imagem, Imagem de sobreposio.

28
Imagem 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, Inserir, objeto de imagem,
Image Placeholder, ou clicar no boto junto s opes de imagem da aba
Common.

29
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

Media e depois SWF no painel. . 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 (para
conhecer como usar o recurso de Acessibilidade em Flash, consulte o
apostilando.com sobre o Curso Webkit2). Ento ao inserir sua animao em

30
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.

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 , 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 Parametros 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.

31
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 opo Media e depois em FLV ou no Menu Inserir,

Mdia, Flash Vdeo.

32
Na tela apresentada, necessrio definir o caminho onde est o seu arquivo
FLV, o Skin de controle do vdeo, as dimenses (Use o boto Detectar
tamanho), as opes Iniciar automaticamente e Retroceder automaticamente.

33
HYPERLINKS
O principal elemento que fez com a Internet alcanasse o crescimento 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

34
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.
Se dentro de seu sistema operacional, em sua maioria Windows, letras
maisculas e minsculas em nomes de arquivos so iguais ao sistema. Na
Internet no. Nomes de arquivos com letras maisculas e minsculas s
diferentes. Por conveno procura-se sempre utilizar letras minsculas e sem
espao, quando necessrio deve-se utilizar o underline _.

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.

35
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, Modificar, Propriedades da Pgina CTRL+J), e ao criarmos um link
em nosso 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.

36
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 outro texto e aplique um link nele com a opo de abrir em uma nova
janela.

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

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 Inserir ncora com nome 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.

38
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.

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. comum
tambm utilizar tabelas na construo de sites, mas este um conceito que
est diminuindo, pois aconselhvel o uso de camadas para a construo de
sites.
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 Inserir Tabela, ou no boto de insero
de tabela no painel Inserir.

39
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 clicar no Painel Inserir e mudar para Layout.

40
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.

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.

41
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

42
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

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

43
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.

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

44
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 CS6 reforou bastante o recurso de CSS para formatao nas

pginas.
No topo do painel direita temos a paleta de CSS.

45
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
Nova regra CSS .

46
Marque a opo Redefine um elemento HTML, automaticamente ele mostra o
H1 que relativo ao ttulo de nvel 1. A opo Nome do Seletor: 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.

47
A opo Tipo, permite alterar as configuraes de fonte d a TAG Selecionada.
Na opo Fundo podemos definir as configuraes de plano de fundo da
clula.
Em Bloco, podemos definir as configuraes de pargrafos do texto, como
espaamento entre palavras, alinhamentos, etc.
A opo Caixa permite criar um bloco de nossa TAG definindo largura e altura,
etc.
Em Borda, podemos definir o tipo de borda a aplicar em nossa TAG.
Lista permite alterar as configuraes de nossa lista de marcadores
Posicionamento permite trabalhar com posicionamento da TAG selecionada em
relao ao Documento.
Extenses: Permite definir quebras de pgina, cursor do mouse, e filtros a
serem aplicados ao seu website.
O cdigo HTML

48
A visualizao

Editando uma folha de Estilos

Para alterar algo em sua folha de estilo, clique no boto editar regra , 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.

49
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 >

50
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.
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.

51
Para linkar ao arquivo CSS criado ao documento existente clique no boto
Anexa folha de estilo .

Basta agora todas as formataes a serem feitas no arquivo CSS, sero

aplicadas a todos os documentos ligados ao arquivo css.

52
 Para conhecer mais sobre como aplicar CSS em seus projetos pelo
Dreamweaver conhea nosso curso WebKit
(http://apostilando.com/pagina.php?cod=30).

CSS3
Consiste na incorporao de novos mecanismos para manter um maior
controle sobre o estilo com o qual se mostram os elementos das pginas, sem
ter que recorrer a truques ou hacks, que a muitas vezes complicavam o cdigo
das webs.

Propriedades novas em CSS3

Segue aqui uma lista das principais propriedades que so novidade em CSS3.
Bordas
border-color
border-image
border-radius
box-shadow
Fundos
background-origin
background-clip
background-size
fazer camadas com mltiplas imagens de fundo
Cor
cores HSL
cores HSLA
cores RGBA
Opacidade
Texto
text-shadow
text-overflow

53
Ruptura de palavras longas
Interface
box-sizing
resize
outline
nav-top, nav-right, nav-bottom, nav-left
Seletores
Seletores por atributos
Modelo de caixa bsico
overflow-x, overflow-y
Outros
media queries
criao de mltiplas colunas de texto
propriedades orientadas a discurso ou leitura automtica de pginas web
Web Fonts
Esta lista de novas propriedades de CSS3 foi tirado de:
http://www.css3.info/preview/. um site em ingls, mas pode ser bom visitar
para ir conhecendo mais detalhes sobre CSS3.

Uma pequena amostra de como podemos trabalhar a CSS3. Inicie uma pgina
e nela entre no modo cdigo e adicione a seguinte regra CSS.

54
Aps isso na direita clique em Adicionar Propriedade. Digite border-radius.
Coloque valor 30

Vamos adicionar mais algumas propriedades como uma cor de fundo, cor de
fonte e defina uma dimenso de 200px de largura e 200 px de altura.

Agora basta adicionarmos o elemento HTML e ligar ele a nosso seletor.

55
Dentro de seu documento adicione um DIV chamando o seletor

Salve e teste em seu navegador.

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).

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

56
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
vez de uma tag <DIV>.

Criando Camadas
Para poder criar uma camada voc deve deixar seu painel em Layout e deve
usar um dos dois elementos de criao de camadas.

57
As propriedades de nossa Layer. Da caixa de propriedades so o nome da
layer. A propriedade Overflow (Vis) 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 Esquerda (E) e Topo(T) so relativas ao posicionamento da Layer,
observando que os pontos 0,0 (L, T) ficam no canto superior da pgina.
As dimenses de nossa Layer L (largura) e A (altura) 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.

58
Vis, referente visibilidade da camada.
A opo BG Image permite definir uma imagem de fundo da Layer e a opo
Cor de fundo, permite colocar uma cor de fundo na Layer.
A opo Corte permite recortar nossa Layer
No painel camadas possvel marcar a opo Evitar Sobreposies, isso far
com no seja possvel sobrepor s camadas.

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, JSP, CFM.

Os elementos de um Formulrio
Para inserir um formulrio no Dreamweaver clique no Menu Inserir Formulrios,
ou no painel Formulrios.

59
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 no painel de formulrio.
importante sempre verificar se os campos esto sendo colocados dentro do
retngulo pontilhado que a rea de nosso formulrio.
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.

60
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.

61
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 de selees mltiplas).

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).

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.
<?

62
//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";
$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>";
?>

COMPORTAMENTOS
As ferramentas de comportamento do Dreamweaver permite que voc aplique

63
as aes comuns de JavaScript sem escrever nenhum JavaScript.
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 JavaScript 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 de TGAS Comportamentos (Menu
Janela, Comportamentos).
Para adicionar um comportamento a sua figura basta apenas clicar sobre o
sinal de (+) na esquerda superior do Painel.

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-

64
Up serem muito utilizadas para propaganda em WebSites.

Ao terminar coloque Ok e observe o painel comportamentos. Observe que ele

mostra a ao e o evento que far com que a ao se proceda, mude o Evento
para OnClick.

CONCLUSO
Como pode ser visto nas pginas anteriores o Adobe Dreamweaver um dos
mais complexos e fascinantes programas do mercado de Web design,
logicamente que no foi possvel explorar todas as ferramentas e opes
existentes em um programa to completo como esse, mas com certeza foi
explorado e explicado as mais importantes ferramentas e modos de trabalhar
com este fascinante programa.
Uma abordagem mais completa dele, bem como de todo o processo de criao
de um Website voc pode aprender com o curso WebKit disponvel no
apostilando.com.
Para conhecer mais sobre a utilizao do Adobe Dreamweaver busque pelas
apostilas de truques e dicas e aplicaes no Dreamweaver que o
Apostilando.com disponibiliza.

65
66