Por

Carlos Jos
Certificado no Macromedia Authorized Training Program.
Em Dreamweaver MX Fast Track e Developer

Captulo1 Conhecendo o Macromedia Dreamweaver MX 2004 ...............................................................3

Introduo ...............................................................................................................................3
Destaques: ...................................................................................................................................3
Requisitos de Sistema ....................................................................................................................3
Interface do Dreamweaver MX 2004 ............................................................................................4
Painel Insert .............................................................................................................................4
Barra de Ferramenta de Documentos (Toolbars Document) ............................................................5
Barra de Status.........................................................................................................................6
Properties Inspector ..................................................................................................................6
Painis Laterais .........................................................................................................................7
Menu Contextual .......................................................................................................................7
Captulo 2 Configurando seu Site ......................................................................................................8
Captulo 3 Criando um novo documento e formatando texto ............................................................... 13
Criando um novo documento .................................................................................................... 14
Appearance ................................................................................................................................ 15
Links.......................................................................................................................................... 16
Headings .................................................................................................................................... 16
Title / Encoding ........................................................................................................................... 17
Tracing Image............................................................................................................................. 18
Trabalhando com textos ........................................................................................................... 18
Inserindo e formatando um texto .................................................................................................. 18
Captulo 4 Configurando Hiperlinks.................................................................................................. 19
Link relativo ........................................................................................................................... 19
Link Absoluto .......................................................................................................................... 20
Link de email .......................................................................................................................... 20
Link Interno............................................................................................................................ 20
Captulo 5 Criando image Map ........................................................................................................ 22
Inserindo uma imagem no documento ....................................................................................... 22
Captulo 6 Trabalhando com tabelas ................................................................................................ 24
Criando uma tabela simples no standart view ............................................................................. 24
Propriedade de uma tabela, pelo properties inspector. ................................................................. 25
Propriedade de uma clula, pelo properties inspector. .................................................................. 26
Captulo 7 Projetando um layout de um documento........................................................................... 28
Captulo 8 Criando uma library ....................................................................................................... 30
Criando uma library ................................................................................................................. 30
Captulo 9 Criando Templates ou Samples........................................................................................ 32
Definindo as reas editveis ..................................................................................................... 32
Criando uma novo documento a partir de uma template............................................................... 33
Alterando um template ............................................................................................................ 34
Captulo 10 Efeitos de boto........................................................................................................... 35
Boto rollover ......................................................................................................................... 35
Barra de navegao (navigation bar) ......................................................................................... 36
Boto de Flash ........................................................................................................................ 37
Captulo 11- usando frames .............................................................................................................. 38
Criando os frames (molduras)...................................................................................................38
Como criar um conjunto de molduras......................................................................................... 38
Propriedades dos Frames ......................................................................................................... 40
Captulo 12 Formulrios ................................................................................................................. 41
Criando um formulario ............................................................................................................. 41
Captulo 13 Trabalhando com CSS Style .......................................................................................... 44
Criando um novo CSS Style ......................................................................................................45
Alterando um CSS Style criado..................................................................................................46
Anexando um arquivo de CSS Style externo ao nosso documento ................................................. 47
Aplicando um CSS Style em texto.............................................................................................. 47
Captulo 14 Usando Behaviors ........................................................................................................ 48
Captulo 15 Usando Draw Layer ...................................................................................................... 50
Como criar um Layers .............................................................................................................. 50
Para selecionar uma camada, siga um dos procedimentos abaixo:................................................. 50
Convertendo uma tabela em layer ............................................................................................. 51
Convertendo um layer em tabela............................................................................................... 52
O Behavior Show Hide Layer.....................................................................................................52
Captulo 16 Publicando o Site ......................................................................................................... 53
Publicando um site local via FTP ................................................................................................ 53

Captulo1 Conhecendo o Macromedia

Dreamweaver MX 2004
Introduo
O Dreamweaver MX 2004 um editor profissional de HTML, que
projeta e gerencia sites e aplicativos para a Internet.
A atual verso, trs inmeras novidades e novos recursos para
facilitar o uso e gerar uma maior produtividade em seus trabalhos. A
tecnologia Roundtrip HTML do Dreamweaver, importa documentos HTML
feitos em outros aplicativos ou at mesmo feito por um desenvolvedor,
sem alterar ou adicionar cdigo extra.
Os recursos de edio visual do Dreamweaver MX 2004, so do
tipo WYSIWYG(What You See Is What You Get - O que voc v o que
voc adquire). Permitindo adicionar rapidamente imagens, textos e
funcionalidades aos seus documentos HTML, sem ter que voc escreva
uma linha de cdigo ou at mesma saiba programar para HTML.
Uma grande novidade desta verso que foi criado um ambiente
exclusivo para desenvolvedores, para assim ter uma maior diversidade
entre os profissionais como Webdesigners e Webmasters.
Destaques:
O Dreamweaver MX 2004 permite a insero de cdigos HTML
direto no codigo-fonte.
A rea de trabalho pode ser totalmente personalizada conforme as
suas preferncias.
Tem suporte as principais tecnologias utilizadas atualmente na
Internet. Como por exemplo: ColdFusion, PHP, ASP JavaScript,
ASP VBScript, ASP .NET C#, ASP .NET VB, JSP, JavaScript, XML e
CSS.
Podemos estender as funcionalidades do Dreamweaver MX 2004,
com a instalao de extenses, que so pequenos aplicativos.
Requisitos de Sistema
Windows
Processador Pentium II ou equivalente com 300 Mhz ou superior;
Windows 98/Me/NT 4.0 com Server Pack 3 ou superior/2000/XP;
Verso 4 ou superior do Internet Explorer ou Netscape;
96 Mb de memria (128 MB recomendado);
275 Mb de espao no HD quanto maior melhor;

Interface do Dreamweaver MX 2004

Esta a nova interface do programa, esta no a primeira tela
que mostrada logo da abertura do programa, mas iremos falar da
primeira tela mas adiante.

Minimizar e Maximizar painis

Painel Insert

O painel Insert dividido em varias categorias:

Common: Possui os elementos comuns a serem utilizados em
seus documentos, Hyperlinks, Email Link, Named Anchor, Table,
Date e Comment, foram criados novos grupos na categoria
, Media
, Templates
, que
Common, que so: Images
antes eram categorias.
Layout: Define o tipo de visualizao, tambm podemos desenhar
tableas, layers e frames nesta nova verso 2004.
Forms: Contm todos os elementos de formulrio.

Text: Contm elementos referentes aos tesxtos.

HTML: Esta nova categoria traz elementos da linguagem HTML,
como Head, Tables, Frames e Script, incorporou o Horizontal Rule,
que antes era da categoria Common.
Application: Contm elementos utilizados para a criao de
aplicaes utilizando acesso a uma base de dados.
Flash Elements: Importe um elemento de Flash em uma pgina
e personalize as suas propriedades dentro do Dreamweaver MX
2004.
Favorites: Nesta nova categoria podemos personalizar com os
elementos de varias categorias, ou os elementos mais usados e
assim gerar uma produtividade, pois os elementos que queremos
j esto todos a mo.
Podemos mudar a forma de visualizao do painel Insert deixando igual
verso anterior.
A ltima opo quando
clicamos no boto de categorias,
nos
possibilita
fazer
esta
mudana.
Para voltar a visualizao
padro do painel Insert, clique
no cone no canto superior direito
no final do painel.

Barra de Ferramenta de Documentos (Toolbars Document)

Esta barra configura a visualizao do documento entre outros:

Code: Exibe o cdigo-fonte HTML
Split: Divide a janela exibindo o cdigo-fonte HTML e ao mesmo
tempo o design do documento.

Design: Exibe o design do documento, este mais usado por quem

no tem nenhum conhecimento de HTML.
Title: Define o titulo do documento, aquele que aparece na parte
superior do navegador.
No Browser Check Errors: Para checar erros de navegador,
podemos informar quais navegadores.
File Management: Permite gerenciar os documentos do site,
principalmente quando estamos trabalhando com um provedor online ou off-line, para fazer transferncias (put) de arquivos ou
baixar (get) arquivos.
Preview / Debug in Browser: Permite uma visualizao prvia
no navegador antes da publicao.
Refresh: Atualiza o documento.
View Options: Opes referentes visualizao de vrios
elementos no documento inclusive elementos invisveis, tais
como: named anchor, layers, image map, rules, grids e etc.

Barra de Status

Nela contm informaes importantes do documento, como o

quick tag, window size e tempo de carregamento do documento.
No lado esquerdo, uma referencia rpida aos comandos de HTML
que esto no documento.
No lado direito o tamanho da janela e o tempo de carregamento.

Properties Inspector

Exibe as propriedades de cada elemento usado no documento.

Quando selecionamos um texto, ele mostra as propriedades de
formatao do mesmo e assim por diante.

Painis Laterais
Os
painis
laterais
auxiliam
no
desenvolvimento e criao do site.
Os painis mais importantes so: Files,
Application, Design, Tag Inspector e Frames.
Podemos ocultar/exibir o Painel Lateral
clicando na setinha que fica na linha divisria.
Podemos ainda oculta/exibir o Painel
Lateral e o Properties Inspector com (F4).

Menu Contextual
O menu contextual acionado com o
clique do boto direito do mouse, sobre um
link, um texto ou rea de trabalho.
Os itens so variveis de acordo com o
local onde o menu acionado.

Captulo 2 Configurando seu Site

Para que serve? Para que voc possa gerenciar todos os seu
documentos HTML gerados pelo Dreamweaver MX 2004.
Trabalhamos com vrios documentos HTML, j pensou em mudar
um link em um documento que esta ligado a outros dez (10). Com este
gerenciamento, assim que voc mudar este link o Dreamweaver
pergunta se voc quer atualizar tambm os outros dez documentos que
esto apontando para este. Vamos l criar o nosso site local.
Um site local, a rea de armazenamento de todos os seus
documentos HTML, suas imagens, do seu site.
Precisamos dar um nome e informar uma pasta no HD para este
armazenamento. Precisamos criar um novo site para cada novo projeto.
Vamos l, no painel lateral FILES, clique no cone
deste painel, e escolha: Site > New Site...

de opes

Nesta primeira janela vamos definir o nome do site que iremos

trabalhar, lembramos que este nome e apenas para identificar o projeto.
Clique em Next >

Nesta janela vamos deixar a primeira opo marcada, pois em

nosso curso no vamos trabalhar com script de servidor, esse outro
curso que o Ibratec oferece, que Macromedia Dreamweaver com
Banco de Dados.
Clique em Next >

Nesta janela vamos informar a pasta local em seu HD onde vamos

armazenar todo o nosso site. Use a opo acima como exemplo de
pasta.
Clique em Next >

Nesta janela vamos deixar como mostra, pois no vamos trabalhar

com um servidor, como j foi mencionado em outro curso ser
abordado.
Clique em Next >

Pronto, acabamos de configurar o nosso site, para finalizar clique em

Done.

Captulo 3 Criando um novo documento e

formatando texto
No Captulo 1, mencionei que iria falar da primeira tela do novo
Dreamweaver MX 2004, pois bem vamos a ela. Logo abaixo podemos
observar:

Esto minimizados os painis laterais e o properties inspector,

para uma melhor visualizao desta nova janela, que sempre ira
aparecer como um menu principal de inicio de decumentos.
Open a recent item: Para facilitar ele traz um histrico dos
documentos que foram abertos mas recente.
Create New: Traz todas as opes de tecnologias para a criao
de um novo documento, em nosso curso vamos trabalhar com
HTML
Create from samples: Criar um documento baseado em um
modelo.

Criando um novo documento

Para criar um novo documento HTML em branco, proceda assim:
em Create New, escolha HTML.
Se por acaso voc j esta com um documento aberto, proceda
assim: Menu > File > New...

Ao abrir a janela New Document escolha na Category > Basic Page

> HTML, clique no boto Create.

Pronto j estamos com o nosso novo documento, agora vamos

modificar as suas propriedades. No menu > Modify > Page Properties...
Vamos ver cada uma das categorias da janela Page Properties.

Appearance
Page Font: define a fonte padro para todo o documento.
Size: define o tamanho padro da fonte para todo o documento.
Text Color: define a cor do texto do documento.
Background Color: define a cor de fundo da pgina. Para
escolher nova cor, clique no quadradinho de cor ao lado ou digite
o cdigo da cor.
Background Image: define a imagem de fundo da pgina se
houver. Clique em Browse para selecionar. Se no houver
imagem, deixe o campo em branco.
Left Margin: define um valor em plxels para a margem esquerda
(valor aceito pelo Internet Explorer). Se no quiser margem,
digite 0.
Top Margin: define um valor em pixels para a margem do alto
(valor aceito pelo Internet Explorer). Se no quiser margem,
digite 0.
Margin Width: especifica um valor em plxels para a largura da
margem (valor aceito pelo Netscape). Se no quiser margem,
digite 0.
Margin Height: especifica um valor em plxels para a altura da
margem (valor aceito pelo Netscape). Se no quiser margem,
digite 0.

Links
Link Font: define a fonte para todos os links.
Size: define o tamanho da fonte para todos os links.
Link Color: especifica a cor de todos os links.
Rollover Links: especifica a cor quando o mouse passar nos
links.
Visited Links: define a cor dos links para os endereos que j
foram visitados pelo usurio.
Active Links: especifica a cor dos links ativos no documento.
Essa cor mostrada no exato momento em que o usurio clica em
um link.
Underline Style: especifica como ser o estilo dos links, com
underline, sem underline, underline s quando o mouse passar e
etc.

Headings
Heading Font: define a fonte para todos os titulo e subttulos.
Heading 1 at o 6: estes so elementos de HTML para a
formatao de ttulos e subttulos, voc escolhe tamanhos e cores
diferentes para cada um dos 6 itens.

Title / Encoding
Title: define o ttulo da pgina. O ttulo exibido no alto da janela do
navegador, que o mesmo mostrado na barra de ferramentas do
Dreamweaver MX.
Encoding: define a codificao do documento.

Tracing Image
Tracing Image:define a imagem a ser usada como um rascunho
de fundo de pgina, ela no aparece no navegador. A sua funo e
servir como um guia de um layout para posicionar os elementos
do documento exatamente onde mostra a imagem de rascunho.
Transparency: define a opacidade da imagem de rascunho,
quanto menor o valor mais transparente fica.

Trabalhando com textos

A forma de formatao de texto que o Dreamweaver usa
semelhante a um editor de texto comum.
Inserindo e formatando um texto

Observe que foi inserido o mesmo texto que digitei acima, como
um editor de texto comum, eu selecionei o que queria e no properties
inspector, formatei todo o texto.
Uma grande novidade desta verso, poder formatar todo o texto
usando o painel lateral TAG, como mostra a figura.
Aproveitando criei uma lista ordenada e uma no ordenada. O
interessante de tudo isso que os cones de formatao de texto como:
negrito, itlico, alinhamento esquerda, alinhamento direita,
centralizado, justificado, marcadores, numeradores, recuo de pargrafo,
so exatamente iguais a um editor de texto bem conhecido, facilitando
assim o aprendizado.

Captulo 4 Configurando Hiperlinks

Precisamos
interligar
nossos
documentos,
para
isso
o
Dreamweaver oferece varias formas de criar os hipelinks para
documentos, imagens, arquivo de multimdia.
Temos os seguintes tipos de hiperlinks:
Link relativo: quando vinculamos documentos que esto na
mesma pasta de trabalho.
Link absoluto: quando vinculamos a uma URL externa,
informando protocolo, nome de servidor com o caminho e o nome
do arquivo.
Link de email: quando vinculamos um endereo de correio
eletrnico para abrir o gerenciador de email instalado na maquina
do usurio.
Link interno: esse do tipo ancora, aponta para dentro do
mesmo documento.

Link relativo
Como mostra a figura abaixo, foi selecionada a imagem sobre
editora e no campo Link, foi informado o nome do documento ao qual
ser criado o vnculo.

Link Absoluto
Para nosso link absoluto, vamos imaginar que em nosso
documento existe um link para o site do Ibratec. Observe a figura
abaixo:

Foi selecionado o texto e no campo link digitado todo o caminho

absoluto. Em target, foi informado para abrir uma nova janela do
navegador, podemos ainda informar:_self (mesma janela).

Link de email
Aproveitando o mesmo documento, selecionei o texto Fale
Conosco, e no painel Insert, dei um clique no cone de um envelope

Abriu a janela Email Link, agora s escrever o texto e informar

um email vlido. Vale lembrar que este tipo de link abre um gerenciador
de email instalado na maquina do usurio.

Link Interno
Para criar um link interno, isto , vincular uma palavra ou imagem
a outro, no mesmo documento.
Para isso devemos criar o ponto de localizao do alvo de nosso
vinculo, uma ncora que far a ligao entre nosso menu e o local de
destino.

No exemplo abaixo observe onde foi criado o Named Anchor e o

link aponta para #link_absoluto, (#) o vinculo juntamente com o
nome.

No navegador fica assim:

Captulo 5 Criando image Map

Um mapa de imagem uma imagem dividida em regies ou
pontos ativos, quando o usurio clicar no ponto ativo ser exibido um
novo documento.
Vamos utilizar o poperties inspector para criar e configurar os
nossos mapas de imagem. Para isso precisamos inserir uma imagem.

Inserindo uma imagem no documento

No painel insert, categoria common, clique em
abaixo:

, para abrir a janela

Na figura acima observamos trs reas em destaque, primeiro o

Map, onde podemos criar mapas de imagem do tipo: retangular, elptica
e poligonal.
A segunda o Edit, com novas ferramentas para edio de imagens
dentro do Dreamweaver. A primeira opo j existia: "Edit". Ao lado,
temos a ferramenta "Optimize in Fireworks" . A seguinte "Crop" (corta
a imagem). A prxima "Resample" (com esta ferramenta voc pode
diminuir uma imagem). Prosseguindo, teremos "Brightness and
Contrast" para brilho e contraste e "Sharpen" para tratar a imagem.
A terceira, so as opes de alinhamento de uma imagem,
clicando no menu suspenso temos todas as opes de alinhamento. Os
botes de alinhamento ( esquerda, direita e No centro) tambm
podem ser utilizados para colocar os elementos selecionados.
Abaixo vamos ver como configurar os pontos ativos de um mapa
de imagem:
Ponto ativo

Nome do mapa de imagem

Informe o link

s escolher uma das trs opes de mapa e desenhar por cima

da imagem e configurar as propriedades.

Captulo 6 Trabalhando com tabelas

As tabelas so uma ferramenta de desenho de muito avanada
para organizar os dados e as imagens em uma pgina HTML. As tabelas
proporcionam aos Webdesigners os meios de adicionar uma estrutura
horizontal e vertical a uma pgina.
Elas consistem de trs componentes bsicos:
linhas (espaamento horizontal)
colunas (espaamento vertical)
clulas (o recipiente criado pela interseo de uma linha e uma
coluna)
Utilize as tabelas para organizar os dados tabulares, desenhar
colunas em um documento ou organizar texto e imagens em seus
documentos. Aps a criao da tabela, a aparncia e a estrutura
podem ser facilmente modificadas. O contedo pode ser includo;
adicione, exclua, divida ou mescle as linhas e colunas; modifique
as propriedades da tabela, das linhas ou clulas, para adicionar
cor e alinhamento, e para copiar e colar clulas.
O modo de criao de uma tabela pode variar de acordo com o tipo de
visualizao do documento: Standart View ou Layout View.

Criando uma tabela simples no standart view

No painel insert, categoria common, clique no cone table. Na
verso 2004 aparece a seguinte janela para nos auxiliar na criao de
uma tabela.

Rows: define o nmero total de linhas da tabela.

Columns: define o nmero total de colunas da tabela.
Cell Padding: indica o espao entre o contedo da clula e a sua
parede. Para no deixar espao, digite o valor 0.
Ceill Spacing: indica o espao entre cada clula, excluindo a
borda. Para no deixar espao, digite 0.
Width: especifica a largura da tabela. O valor pode ser em pixeis
ou porcentagem. O valor em pixels fixo, j o valor em
porcentagem far com que o tamanho da tabela varie conforme a
largura do navegador e resoluo de vdeo do usurio.
Border thickness: define a largura da borda. Para a borda ficar
invisvel, digite o valor 0.
Aperte OK, para confirmar as configuraes da tabela.

Propriedade de uma tabela, pelo properties inspector.

Nesta nova verso, contamos com este recurso a mais como mostra no
detalhe, menus contextuais para as clulas e para a tabela.
Table Id: especifica um nome para a tabela.
Rows: exibe ou define o nmero de linha da tabela.
Cols: exibe ou define o nmero de colunas da tabela.
W: largura que a tabela possui em pixels ou porcentagem.
H: altura da tabela. Se nada estiver preenchido, a altura
automtica.
CellPad: define o espaamento do contedo da clula em relao
s suas paredes.
Cellspace: define o espaamento entre as clulas.

Align: define o alinhamento da tabela. A opo Default,

geralmente, deixa a tabela alinhada esquerda. As outras opes
so: esquerda (Left), direita (Right) ou central (Center).
Border: especifica a largura da borda da tabela.
Bg Color: especifica a cor de fundo da tabela. Clique no quadrado
cinza para escolher a cor.
Brdr Color: especifica a cor da borda.
Bg Image: especifica uma imagem de fundo para toda a tabela.
No campo disponvel, voc digita o caminho da imagem ou
seleciona a imagem atravs do cone de pasta ao lado do campo.
Clear Columns Widths: limpa a largura das colunas. Corresponde ao
campo W.
Clear Rows Heights: limpa a altura das linhas. O campo H do
properties inspector limpo.
Convert Table Widths to pixels: converte a largura da tabela para o
valor em pixels. til para fazer a converso de porcentagem para pixels.
Convert Table Widths to Percents: converte a largura da tabela para
o valor em porcentagem. til para fazer a converso de pixels para
porcentagem.
Convert Tabie Heights to Plixels: converte a altura da tabela para o
valor em pixels. il para fazer a converso de porcentagem para pixels.
Convert Table HeIghts to Percents: converte a altura da tabela para
o valor em porcentagem. til para fazer a converso de pixels para
porcentagem.

Propriedade de uma clula, pelo properties inspector.

Quando clicamos dentro de uma clula, temos as seguintes opes no
properties inspector:

Horiz: define o alinhamento horizontal do contedo da clula. As

opes so: default (esquerda), left (esquerda), center (centro) e
right (direita).
Vert: define o alinhamento vertical do contedo da clula. As
opes so: default (normalmente, no meio), top (alto), middle
(meio) bottom (embaixo), baseline (base).
No Wrap: se voc deixar marcada essa opo, no ocorrer
quebra automtica de linha dependendo do contedo da clula.

Header: formata a clula com essa opo marcada como um head

de tabela. Corresponde tag <thead> ou <th>. til para DHTML.
Como padro, ao aplicar esse recurso, o texto digitado ficar no
centro e em negrito.
Embaixo da palavra "cell", h dois cones: enquanto o primeiro
no tem funo e inativo, o segundo permite que voc faa um split
(diviso) na clula. Com isso, a clula fica dividida ao meio.
Voc pode aplicar um split vrias vezes em cada clula. Quando
voc aplica o split, abre-se uma janela perguntando se voc quer dividir
a clula em colunas (Columns) ou em linhas (Rows) e quantas divises
quer fazer.
O cone que esta inativo, s fica ativo quando duas ou mais clulas
esto selecionadas, serve para mesclar as clulas em uma nica.
Voc pode determinar tambm a altura da clula. Basta inserir o
valor no campo H. Isso serve, inclusive, para clulas que sofreram split.
Com isso, voc pode criar layouts bem interessantes.
Obs.: podemos ainda colocar uma tabela dentro de outra, para
chegar ao layout que desejamos.

Captulo 7 Projetando um layout de um

documento
O layout de uma documento uma parte importante do projeto de
um site. O termo layout de documento ou pgina se refere aparncia
que o documento ter no navegador, como a posio de um menu ou as
imagens, por exemplo. O Dreamweaver proporciona diversas maneiras
de criar e controlar o layout do documento.
Um mtodo comum de criar o layout de pgina consiste na
utilizao de tabelas HTML, como foi visto no Captulo anterior. No
entanto, as tabelas podem ser de difcil utilizao, porque elas no
foram originalmente criadas para o layout de pgina, mas sim para
exibir dados tabulares.
O Dreamweaver conta com a visualizao de layout view. Na
visualizao de layout view possvel projetar a pgina utilizando
tabelas como estrutura subjacente. possvel desenhar clulas (clulas
de tabela) na pgina com facilidade e, em seguida mov-las para onde
desejar. O layout pode ter uma largura fixa ou se expandir, at ocupar
toda a janela do navegador.
Ainda possvel dispor as suas pginas utilizando tabelas segundo
a maneira tradicional (conforme vimos no captulo anterior), ou
utilizando camadas (LAYERS) e depois convertendo-as em tabelas. No
entanto, a visualizao de layout do Dreamweaver a forma mais fcil
de definir o layout da pgina ou documento.
Para utilizar a visualizao de layout, necessrio sair da
visualizao padro do Dreamweaver (Standart view). Mude para a
categoria Layout como mostra abaixo:

Segue abaixou uma viso geral de como desenhar um layout de

documento.

Frames
Layout Table

Draw layout cell

Clula

Tabela

Captulo 8 Criando uma library

As library (bibliotecas) contm elementos de documentos como,
por exemplo, imagens, textos entre outros elementos a serem usado ou
atualizados em seu site.
A grande vantagem de trabalhar com uma library em seu site, o
seguinte, digamos um menu de seu site tem que acrescentar mais um
item, mas como este menu uma library, basta alterar a library, pois os
documentos que possuem esta library tambm sero atualizados
automaticamente.
O Dreamweaver MX armazena os itens da library na pasta library,
que esta na raiz do site local.

Criando uma library

Por exemplo vamos definir o menu que aparece logo abaixo com uma
library.
No menu Modify > Library > Add objects to library...
Quando a janela library abrir, digite o nome do novo item.

Quando voc cria uma

library, o objeto fica
amarelo e protegido.

Pronto, agora s aplicar esta library em todos os seus

documentos, para alterar qualquer coisa em sua library menu, clique no
boto, Detach from original.
Uma janela de aviso aparecera pedindo a confirmao e
atualizao de todos os documentos que usam esta library.

Confirme clicando em sim.

Captulo 9 Criando Templates ou Samples

Um template (modelo) um documento que pode ser utilizados
como base para outros documentos, para que todos tenham a mesma
aparncia. Podemos ainda especificar reas fixas (no editveis) e reas
que podem sofrer alteraes.
Se seu site tem documentos que contm o mesmo menu, o
mesmo cabealho, e o mesmo rodap, enfim, a mesma estrutura, mas
rpido criar um template.
O documento que vemos no exemplo abaixo tem a mesma
estrutura, variando o contedo das informaes do lado direito.
No painel insert, categoria common, temos o cone make
template, clique nele com o documento que voc deseja criar como
template. A janela save as template ser aberta.

Definindo as reas editveis

No painel insert, categoria common, clique na setinha preta que esta ao
laodo do cone Make template e escolha Editable Region.

Defina um nome para sua rea editvel, e ok. Bom meu documento
ficou assim:

Neste caso foi selecionada a tabela interia como rea editvel.

Criando uma novo documento a partir de uma template

No menu > File > New..., quando a janela New Document abrir,
selecione a guia Template e escolha o template que acabamos de criar,
como mostra abaixo:

Observe que apenas a rea que voc criou esta disponvel para ser
editada, isso ai!

Alterando um template
No painel lateral > Files, abra o template que voc criou, ele esta
na pasta template.
Faa as mudanas que deseja, salve e pronto!

Captulo 10 Efeitos de boto

muito legal poder fazer estes efeitos sem ter que programar
uma linha sequer de javascript.
Vamos criar um boto rollover, uma barra de navegao e de
quebra botes de flash sem ter que ir fazer isso l no flash, ou mesmo
saber usar o flash.

Boto rollover
Posicione o cursor no local onde voc deseja inserir o boto
rollover, vale lembrar que estamos trabalhando com imagens, que pelo
menos tem que ser feito antes.
No painel insert, categoria common, clique na setinha preta ao
lado do cone images, escolha rollover image. Configure como mostra:

Observe que estamos trabalhando com duas imagens iguais, alterando

apenas a cor da seta para a rollover image. Ok!

Barra de navegao (navigation bar)

Esse um pouquinho mais complexo pois precisarem de quatro
imagens para cada boto da barra de navegao.
No painel insert, categoria common, clique na setinha preta ao
lado do cone de Images e escolha Navigation bar. Configure como
mostra:

Adiciona/
Retira
um boto

Sobe ou desce um
boto

Nome do boto
normal
Mouse por cima
Clicado
Clicado como mouse por cima

Define um boto clicado

Boto de Flash
No painel insert, categoria common, clique na setinha preta ao lodo do
cone Media e escolha Flash Button. Configure como segue:

O arquivo *.swf, ser salvo na raiz do seu site local, e isso!

Captulo 11- usando frames

Os frames (molduras) so compostas de dois elementos principais
um conjunto de frames e os frames individuais. Um conjunto de
frames um documento HTML que define a estrutura de um conjunto de
frames em um documento.
A definio do conjunto de frames abrange informaes sobre o
nmero de frames exibidos em uma pgina, o tamanho dos frames, a
origem da pgina carregada em um frame e outras propriedades que
podem ser definidas.
Uma pgina HTML com um conjunto de frames no exibida em
um navegador, ela apenas armazena as informaes sobre a maneira
como os frames em uma pgina sero exibidas.
Geralmente, os frames definem uma rea de navegao e uma
rea de contedo em uma pgina da Web.
Quando um documento do Dreamweaver dividido em frames,
so criados documentos HTML separados para o conjunto de frames e
para cada novo frame. O conjunto de frames chamado de frame-pai e
um frame chamada de frame-filho.
O que o usurio percebe como uma nica pgina da Web com dois
frames constitui, na verdade, trs arquivos distintos: o arquivo do
conjunto de frames e dois arquivos com o contedo que aparece dentro
dos frames. A alterao das propriedades dos frames e dos conjuntos de
frames permite redimensionar os frames e utilizar os vnculos e os
destinos para controlar o contedo de um frame.

Criando os frames (molduras)

Os frames podem ser criadas modificando em um documento
existente do Dreamweaver, dividindo-o em reas de documento
adicionais. H vrias maneiras de criar um conjunto de frames: voc
pode desenh-lo ou selecionar entre vrios conjuntos de frames
predefinidos.

Como criar um conjunto de molduras

Antes de criar um conjunto de frames ou trabalhar com frames,
torne visveis as bordas do frame na janela do documento.
Para exibir as bordas do frame em um documento, escolha View >
Visual Aids > Frame Borders. Quando as bordas da moldura forem
exibidas, ser adicionado espao em volta da borda do documento,
fornecendo-lhe um indicador visual das reas do frame no documento.

No painel Layout, clique na setinha preta ao lado do cone Frames e

escolha a opo como mostra abaixo:

Observe abaixo
anteriormente.

diviso

dos

frames,

como

foi

explicador

Frame 2

Frame 1
Frame pai

Frame 3

Quando salvarmos as pginas, deveremos escolher a opo File >

Save All. Isso far com que sejam salvas os trs frames filhos e tambm
o frame pai.
Nota: se sua pgina for a inicial do seu site, dever ser salva com
o nome index.htm, para que abra-se automaticamente ao ser digitado o
endereo do site.

Propriedades dos Frames

Borders: especifica se o frame exibir ou no as bordas.

Default: exibe bordas.
Yes: exibe bordas.
No: no exibe bordas.
Border Width: especifica a largura da borda. Se no quiser borda, alm
de especificar No Item acima, digite o nmero 0.
Border Colro: especifica a cor da borda. Basta digitar o cdigo da cor
ou efetuar a seleo da tonalidade no painel de cores.
Columns ou Rows: conforme o tipo de frame criado, exibido o
tamanho da coluna ou linha. Esse tamanho (largura ou altura) do frame
um valor expresso em plxels, porcentagem ou valor relativo. Uma
outra maneira de especificar o tamanho do frame arrastar a sua borda
com o mouse.
No lado esquerdo do Inspetor de Propriedades, temos a definio
do frame em nmero de linhas e colunas. No lado direito do Inspector, o
layout do frame reproduzido.

Captulo 12 Formulrios
Os formulrios permitem coletar informaes dos usurios. Entre
os usos mais comuns dos formulrios, destacam-se as pesquisas,
formulrios de pedidos e interfaces de busca.
Utilize o Dreamweaver para criar formulrios, adicionar objetos a
eles e (atravs da utilizao de comportamentos) para validar as
informaes digitadas pelo usurio.
Os formulrios do Dreamweaver podem incluir objetos padro,
como campos de texto, botes, campos de imagens, caixas de seleo,
botes de opo, menus de lista, campos de arquivos e campos ocultos.
No painel insert, categoria Forms, para poder aplicar os objetos de
formulrios, selecionando o comando Forms na caixa superior. Observe
o exemplo abaixo:
O primeiro boto do painel forms o que insere o prprio form
(recipiente para os elementos que formaro o formulrio). preciso
clicar nele para proceder com o preenchimento.

Criando um formulario
Posicione o cursor onde ser inserido o form, primeiro elemento
do apainel insert, categoria forms. Ao ser inserido o Dreamweaver
marca a rea com uma linha tracejada vermelha.
Dentro da linha vermelha nosso form, insira uma tabela para
melhor organizar os elementos de formulrio, que vamos inserir.

O nosso formulrio deve ficar assim:

Cada item de nosso formulrio acima, tem que ser configurado, de

acordo com suas propriedades no properties inspector.
Abaixo segue relao de todos os elementos de formulrio.

Insert Form (Inserir Formulrio)

Insert Text Field (Campo texto)
Insert Hidden Fields (Arquivos Ocultos)
Insert Textarea (Texto de multiplas linhas)
Insert Checkbox (Caixa de verificao)
Insert Radio Button (Boto de opo)
Insert Radio Group (Grupo de boto de opo)
Insert List/Menu (Menu de lista)
Insert Jump Menu (Menu de links/escolha)
Insert Image Field (Campo de Imagem)
Insert File Field (Campo de Arquivo)
Insert Button (Botes)
Insert Label (Etiqueta)
Insert Fielset

Form: insere o formulrio propriamente dito, um recipiente dos

campos de formulrios que segue logo abaixo.
Text Field: alfabtico ou numrico. O texto digitado pode ser
exibido como uma linha simples, linhas mltiplas, marcadores ou
asteriscos (com a finalidade de proteger as senhas).
Hidden Fields: permitem armazenar informaes (como o
destinatrio dos dados do formulrio ou o assunto do formulrio)
que no forem relevantes ao usurio, mas que sero utilizadas
pelo aplicativo que processa o formulrio.
TextArea: campo de texto com mltiplas linhas.
Checkbox: permitem mltiplas respostas em um nico grupo de
opes.
Radio Button: representam opes exclusivas. A seleo de um
dos botes do grupo cancela a seleo de todos os outros.
Radio Group: insere um grupo de boto de opo.
List/Menu: apresentam um conjunto de valores que os usurios
podero escolher. O objeto poder apresentar um menu pop-up,
que aparecer apenas quando o usurio clicar no nome do objeto
(e aceitar apenas uma opo), ou uma caixa de listagem, que
sempre exibir os valores em uma lista de rolagem (e aceitar
mais de uma opo).
Jump Menu: permite inserir um menu no qual cada opo se
vincula a um documento ou arquivo.
Image Field: podem ser utilizados no lugar dos botes Enviar.
File Field: permitem que o usurio procure os arquivos nos discos
rgidos, carregando-os como dados do formulrio.
Button: realizam tarefas quando forem clicados, como o envio e
redefinio dos formulrios. possvel digitar um identificador
personalizado para um boto ou utilizar um dos identificadores
predefinidos.
Label: insere textos entre as tags <label> e </label>
Fieldset: o texto inserido diretamente no cdigo-fonte,
semelhante ao label.

Captulo 13 Trabalhando com CSS Style

Um estilo um grupo de atributos de formatao que controla a
aparncia de uma faixa de texto de um nico documento. A folha de
estilos CSS pode ser utilizada para controlar vrios documentos
simultaneamente e inclui todos os estilos de um documento.
A vantagem de utilizar as folhas de estilos CSS em relao aos
estilos HTML que, alm de estarem vinculadas a vrios documentos,
quando um estilo CSS for atualizado ou alterado, a formatao de todos
os documentos que utilizam essa folha de estilos especfica ser
tambm automaticamente atualizada.
Os estilos CSS so identificados pelo nome ou pelo rtulo HTML, o
que permite alterar o atributo de um estilo e exibir as modificaes no
texto inteiro ao qual esse estilo foi aplicado. Os estilos CSS nos
documentos HTML podem controlar a maioria dos atributos tradicionais
de formatao de texto, como fonte, tamanho e alinhamento. Eles
podem especificar tambm atributos exclusivos de HTML, como
posicionamento, efeitos especiais e imagens cambiveis pelo mouse.
Nunca houve tanta interao com as folhas de estilo como existe
nesta verso do Dreamweaver. Ao abrir as propriedades de pgina, j
encontram opes que criam os CSS padres do site com fonte,
tamanho, cor, tipo, margem de pgina etc... Na edio do site, as
modificaes feitas por voc vo sendo transformadas em novos
estilos... por exemplo: Se voc coloca uma cor e negrito numa parte do
texto, um novo CSS criado na hora, sempre seguindo a seguinte
nomenclatura: style1, style2 ... No painel de propriedades, sempre que
voc selecionar um objeto, a caixa "Style" vai aparecer e nela, voc ter
todos os estilos criados...

Criando um novo CSS Style

Se o painel lateral no estiver aparecendo o painel Design, habilite ele
para que possamos criar nossos CSS. Menu > Window > Design.

Vamos clicar no segundo cone que aparece na parte inferior direito do

. Vamos analisa a janela New CSS
painel Design, New CSS Style
Style.

Name: especifica o nome para o estilo. Observe que o estilo criado ter
o nome unnamed. Voc Pode inserir qualquer nome, desde que
mantenha o ponto. Exemplo: .titulo1.
Selector Type: especifica o tipo de estilo a ser criado:
Class (can apply to any tag) cria uma class, que pode ser aplicado a
qualquer tag.
Tag (redefines the look of a specific tag): cria um novo visual para
as tags do HTML.

Advanced (Ids, contextual selectors, etc): para a criao de style

de link, os seletores link, hover, visited, etc.
Define In: especifica se o estilo ser vinculado ou no. Se escolher o
item New Style Sheet File, o estilo ser vinculado, criando um arquivo
externo para armazenar o CSS (*.CSS). Se escolher This Document
Only, no ser vinculado, gerando to o cdigo CSS junto do HTML.
Vamos escolher: Class (can apply to any tag) e em Define In: This
Document Only, de uma nome de titulo1 e ok!.
Vamos formatar no .titulo1 como segue abaixo:

Aps a sua confirmao, observe que no painel lateral design, j

contamos com o nosso primeiro CSS Style criado. Como foi
mencionando no properties inspector, tambm consta o nosso CSS
Style, de uma forma mais visual facilitando assim a escolha dos estilos.

Alterando um CSS Style criado

No painel lateral Design, o terceiro cone nos possibilita isto o Edit
Selecione o estilo que deseja altera e pronto cline no Edit
Style...
Style.

Anexando um arquivo de CSS Style externo ao nosso

documento
No painel lateral Design, o primeiro cone nos possibilita isto o Attach
Style Sheet
Com esse procedimento,
estamos anexando um arquivo
ao documento que esta aberto.
Vamos repetir este mesmo
procedimento para todos os
nossos documento do nosso
site.

Aplicando um CSS Style em texto

Selecione o texto que voc deseja aplicar o estilo, igual a um
editor de texto, aps a seleo escolha o CSS Style que deseja para este
texto.
Ao clicar no CSS Style .titulo1, por exemplo ser aplicada a
formatao que criamos para esse estilo no texto selecionado.

Captulo 14 Usando Behaviors

Um behavior ou comportamento, uma combinao entre um
evento e uma ao. Por exemplo: quando o usurio mover o mouse
sobre uma imagem (um evento), esta poder ser realada (uma ao).
Uma ao consiste de cdigo previamente escrito em JavaScript, que
realiza determinadas tarefas, como a abertura da janela de um
navegador.
Os eventos so definidos pelos navegadores para cada elemento
da pgina; por exemplo: onMouseOver, onMouseOut e onClick so
eventos associados a vnculos na maior parte dos navegadores,
enquanto que onLoad um evento associado a imagens e ao corpo do
documento.
Os eventos que podem ser utilizados para disparar uma
determinada ao variam de acordo com o navegador utilizado.
Ao aplicar um comportamento a um elemento do seu documento,
voc estar especificando uma ao e o evento que a disparar.
Vamos ao painel lateral Tag, escolha a guia Behaviors, como
mostra abaixo:
Os rtulos selecionados aparecero
no alto do painel.
Aes (+) exibe uma lista de aes
que podem ocorrer. A escolha de
uma ao acarretar o aparecimento
da caixa de dilogo Parmetros.
Excluir (-) remove uma determinada ao e o evento a ela associada da
lista do inspetor de comportamentos.
SHOW EVENTS FOR especifica os navegadores nos quais o
comportamento dever funcionar. A seleo feita neste menu
determinar os eventos que aparecero no menu pop-up Events. Clique
no (+) e faa agora esta especificao.
Botes de setas acima e abaixo movem a ao selecionada para cima ou
para baixo na lista de comportamentos. As aes sero executadas na
ordem especificada.

Events exibe todos os eventos que podem disparar a ao. Os eventos

que aparecero dependero do objeto selecionado. Se os eventos
esperados no aparecerem, certifique-se de que o objeto correto esteja
selecionado.
Os diversos navegadores reconhecem de maneira diversa os
eventos relacionados aos vrios objetos. Escolha os navegadores nos
quais o comportamento dever funcionar, no menu pop-up EVENTS For:
Apenas os eventos reconhecidos pelos navegadores selecionados
aparecero no menu pop-up EVENTS.
Vou destacar alguns behavior interessantes:
Call Javascript: chama uma funo ou cdigo que deseja
executar.
Change Property: esse bem legal, ele muda as propriedades
de alguns objetos, por exemplo cor de segundo plano de um
Layer.
Check Browser: verifica o tipo do navegado do usurio.
Check Plugin: muito til para verificar por exemplo se o
usurio tem o plugin do flash, se no direcione ele para o site da
macromedia e fazer o download do mesmo.
Drag Layer: dependendo do efeito que deseja, este bem
interessante, pois possibilita o usurio arrastar e soltar uma layer
(camada).
Go to URL: podemos criar um redirecionamento associado ao
evento onload, para pginas que mudaram de endereo.
Open Browser Window: quem nunca sonhou em criar aquelas
adorveis janelas pop-up, quando entramos em um site, abre em
mdia umas 200 (risos). Tambm serve para ao clicar em um link
abrir uma nova janela do navegador.
Set Text: se deseja colocar um texto na barra de status do
navegador ou em um frame.
Show Pop-Up Menu: muito bom este behavior, para habilitar,
ele tem que ser associado a uma imagem.
Validate Form: esse behavior garante que os campos de
formulrio sejam realmente preenchidos, fazendo assim uma
critica antes que os dados sejam enviados, avisando quais campos
precisam ainda ser preenchido.
Eu no esqueci do behavior Timeline, que nesta verso 2004 ele foi
retirado, s mandando um Email-assinado para a macromedia para
reclamar.
O behavior Show Hide Layers, ser abordado no prximo Captulo.

Captulo 15 Usando Draw Layer

Os layer ou camadas, proporcionam aos Webdesigners um
controle preciso, em nvel de pixels, sobre o posicionamento exato dos
elementos.
A colocao dos elementos da pgina em camadas permite
determinar quais objetos aparecem na frente de outros, e quais esto
fora de lugar ou ocultos. Ultimamente tenho visto uns efeitos bem legais
em alguns sites.

Como criar um Layers

Crie as layers utilizando o Draw Layer
, que estas localizado no
Painel Insert, categoria Layout, para fazer a insero, s arrastar e
soltar como desenhar.
Uma vez criada a layer, utilize o painel
lateral Design, guia Layers para selecionar,
aninh-la dentro de outra layer ou alterar a
sua ordem de empilhamento e modificar o
nome da mesma.
As propriedades padro das layers
(Layer ID, visibilidade (Vis), altura (H), largura (W), etc.) so
especificadas no properties inspector

Para selecionar uma camada, siga um dos procedimentos

abaixo:
Clique no marcador da camada, na janela do documento, que
representa o local da layer no cdigo HTML. Se o marcador da
layer no estiver visvel, escolha Exibir > Elementos invisveis
(View > Visual Aids > Invisibles Elements).
Clique na ala de seleo da layer. Se a ala no estiver visvel,
clique em qualquer ponto dentro da layer para torn-la visvel.

Clique em uma borda da layer.

Se nenhuma layer estiver ativa ou selecionada, mantenha
pressionada a tecla Shift enquanto clica dentro de uma layer.
Se houver mltiplas layer selecionadas, clique dentro de uma
delas enquanto mantm pressionadas as teclas Control e Shift (no
Windows). Esse procedimento cancelar a seleo de todas as
outras layers.
Clique no nome da layer, no painel lateral Design, guia Layers.

Camada inserida (sem seleo)

Camada clicada pode-se

escrever ou inserir figuras, etc.

Camada Selecionada, verificar

paleta de propriedades

A partir da seleo da layer, poderemos arrast-la ou dimensionla, exatamente como se faz com um objeto qualquer. Todo o contedo
da layer ir acompanhar os movimentos ou a sua nova localizao.

Convertendo uma tabela em layer

Acione o menu > Modify > Convert > Tables to Layers.

Convertendo um layer em tabela

Acione o menu > Modify > Convert > Layers to Tables.

O Behavior Show Hide Layer

Ele responsvel pela ao de visibilidade do(s) layer(s) que
contm em seu documento.
Ao aplicar esta ao, a janela Show Hide Layer aberta, selecione
o layer que deseja e clique nos botes: Show (visvel), Hide (oculto) ou
Default.
Essa ao muito interessante ao se aplicar em botes ou
imagens com links, associados aos eventos do tipo: onClick,
onMouseOver, etc. Assim, no momento exato que se quer, o layer pode
ser exibido ou escondido.

Captulo 16 Publicando o Site

Ao concluir o seu site, precisamos enviar os documento e pastas,
ou seja, o site local para o servidor da Web. Quando os arquivos so
transferidos de um site local para um servidor, o Dreamweaver MX
mantm uma estrutura de pastas exata em ambos os sites. Se uma
pasta no existir no servidor, o Dreamweaver criar uma pasta. Esse
recurso garante que os links relativos criados no site local continuaro a
funcionar no servidor, porque os sites so idnticos.

Publicando um site local via FTP

Como mostra a figura ao lado, vamos clicar
no menu suspenso do painel lateral Files e
escolher > Remote View.
Aparece uma mensagem pedindo para que
voc defina o site remoto, clique nesta opo
e veja a figura abaixo, pois ela retrata as
configuraes que voc tem que fazer.
Vale a pena lembrar que o endereo de FTP,
login e senha, o provedor do servidor devera
lhe informar.
Connects/
Disconnects
remote host

Dados
fornecidos
pelo servidor

Marque esta opo

para fazer upload
automtico de seu
documento, assim
que forem salvos,
se voc tem banda
larga.