Galeria de imagens

Introduo
Quem nunca se deparou com a necessidade de criar uma pequena galeria de imagens, fotos, de
vdeos para inserir seu portflio, fazer um pequeno catlogo? Desde os iniciantes ao de nvel avanado,
j passaram ou passaro por esta obrigao. E um dos recursos mais simples, porm, pouco explorado
para tal fim no Dreamweaver e a aplicao de camadas. Para quem precisa de rapidez e no carece de
dinamismo, actualizaes automticas, ou que nem saiba programar, esta uma boa opo.
Pr-Requisitos

Facilidade com o manuseio do Dreamweaver CS3

Entendimento sobre o conceito de Camadas e DIVs

Entendimento conceitual sobre Behaviors (Comportamentos)

Objectivo
Criar uma galeria que receba contedos diversos, como: textos, imagens, animaes em flash e vdeo
utilizando camadas
Conceitos
Muitos alunos meus, iniciantes no Dreamweaver, tm uma certa dificuldade sobre o entendimento e
funcionalidade das camadas e, a forma mais simples de passar tal conceito que encontrei foi associ-las
a um caderno com folhas soltas onde, de acordo com a necessidade ou ordem de importncia, podemos
desloc-las, umas sobre as outras, alterando sua ordem.
No Dreamweaver no diferente e veremos o porqu agora.
Contedo
Para melhor entendimento de todo o processo, vamos dividi-lo em partes.
Parte 1: Montagem da Estrutura da Galeria Contedo
Nossa galeria ter como base a seguinte estrutura:

Fig. 01: Estrutura da galeria

Para mont-la vamos comear inserindo a camada responsvel pelo contedo de texto. Para isso,
acedermos no painel Insert > Layout o cone Draw AP Div

Fig. 02: Painel Insert Draw AP Div (Inserir > Camada)

e com um clique na rea de desenvolvimento, faamos um retngulo (clicando sobre a borda logo em
seguida) e o configuremos com as seguintes caractersticas:

Fig. 03: Propriedades da Camada Texto

CSS-P Element: Nome que identificar a camada e a diferenciar das demais.
L: Distncia do lado esquerdo | T: Distncia do topo | W: Largura da camada | H: Altura da camada
Bg color: Cor de fundo da camada
Seguindo o mesmo procedimento, vamos criar mais trs camadas com as mesmas caractersticas,
alterando a penas seus nomes(Imagem, Flash e Vdeo respectivamente) e suas cores de fundo para
melhor identific-las adiante.
Aps inserirmos as quatro camadas, teremos a seguinte visualizao no painel CSS:

Fig. 04: Painel CSS de identificao das camadas

Name: Nome da camada
Z: Ordem de visualizao
Vejamos, de acordo com o Z, como esto organizadas as camadas, caso tenhamos que desmembrlas:

Fig. 05: Organizao das camadas

Parte 2: Montagem da Estrutura da Galeria Menu

As camadas que recebero seus respectivos contedos j esto prontas. O prximo passo inserirmos
uma nova camada que conter o menu de acesso s outras camadas.
Se prestarmos bem ateno, perceberemos que as camadas desenvolvidas esto a 25 px do topo, que
por sua vez, possuem uma altura de 300 px. Ento, para que a camada com o menu saia perfeitamente
abaixo das demais, e dando um espao de 2 px para no ficar muito prximo, vejamos na imagem a
seguir:

Fig. 06: Configurao da camada Menu

Vamos clicar dentro desta nova camada e inserir uma tabela com 1 linha e 4 colunas; com largura de
100%, para, em seguida, criarmos os devidos links para as camadas de contedo, como mostra a fig. 01
deste tutorial.
Parte 3: Utilizando Behaviors para Controlar a Exibio das Camadas
Behaviors nada mais do que alguns comportamentos que o Dreamweaver oferece aos
desenvolvedores com scripts pr-configurados e, o que usaremos agora, chama-se Show-Hide
Elements (Exibir-Ocultar Elementos). Este comportamento nos d o controle total sobre quais camadas
sero exibidas e/ou ocultadas no momento em que o usurio clicar em algum link do menu.
Primeiramente, vamos seleccionar a palavra Texto da camada menu e, atravs do painel Tag >
Behaviors > + (sinal de mais), clicaremos em Show-Hide Elements.

Fig. 07: Behaviors

Na janela Show-Hide Elements temos todas as camadas que criamos e os botes responsveis pelo
controle de exibio das mesmas.

Fig. 08: Janela Show-Hide Elements

Elements: Nome de todas as camadas criadas na pgina
Botes: Show (Exibir) | Hide (Ocultar) | Default (Padro)
Vamos entender a lgica desta janela.
Quando clicarmos no link Texto queremos que sejam exibidas as camadas Texto e Menu(clicar no nome
e em seguida no boto Show). O restante deve ser ocultado (Clicar no nome e em seguida no boto
Hide). Ao clicarmos no link Imagem, as camadas Imagem e Menu devem ser exibidas e o restante,
ocultado. E assim sucessivamente.
Parte 4: Ajustes nas Camadas
At aqui foi tudo tranquilo, sem dificuldades, no verdade?!
Para alguns usurios, certamente a galeria j est funcionando ao clicar em seus links. Contudo, caso
isso ainda no ocorreu ainda, vamos fazer alguns ajustes.
Acessando o Painel CSS > AP Elements, onde se encontram todas as camadas, existe na primeira
coluna um olho. Este deve est aberto ou fechado para que os links funcionem. Caso queiramos que, ao
entrar na galeria, o usurio j visualize a camada Flash aberta, devemos fazer a seguinte configurao,
bastando clicar ao lado do nome da camada:

Fig. 09: Ajustes nas Camadas

Devemos ficar atentos camada Menu. Como ela responsvel pela navegao da galeria, ela sempre
deve estar visvel.
Parte 5: Ajustes nos Comportamentos de Ocultao e Exibio
Ao clicarmos em qualquer link da galeria, visualizaremos, no painel Behaviors, o seguinte:

Fig. 10: Ajustes no Painel Behaviors

Temos duas colunas onde, na primeira, consiste a configurao do comportamento. Para que o Behaviors
assuma a funo de clique, precisamos alterar sua configurao para OnClick:

Fig. 11: Configurao do Behaviors para OnClick

Este procedimento deve ser efetuado em todos os links. Mas existe outro ajuste a ser feito, pois em
alguns navegadores, a mosinha do mouse no aparece quando estamos com ele sobre o link. Para
isso acontecer, no Painel Properties > Link vamos inserir o caracter # em todas as camadas.

Fig. 12: Configurao do link

Consideraes Finais
Pronto, pessoal!
Nossa galeria est completa. Agora basta inerirmos o devido contedo. Para isso, basta clicar, no Painel
CSS > AP Elements, na camada desejada, e na rea de desenvolvimento, dentro dela, inserir os devidos
contedos. Vejamos o resultado abaixo:
Espero que tenham gostado.
S para constar, este tutorial tambm est presente no site www.mxstudio.com.br, pois tambm sou
colunista de l.
Um abrao a todos.

http://www.webtutoriais.com/open.php?cut=5470

Dreamweaver - Como criar um formulrio

CRIANDO UM FORMULRIO
1 coloque o ponto de insero onde o formulrio devera ser exibido.
2. Escolha inserir >formulrio ou seleccione a categoria formulrio na barra inserir e clique
no cone de Formulrio Ou ainda seleccione na barra Inserir a guia Formulrio.
O Dreamweaver inserir o formulrio. Com a pgina no modo de visualizao do projecto, os
formulrios so indicados por um contorno pontilhado em vermelho.
Dica
Se este contorno no estiver visvel, verifique se a opo Exibir > Auxlios visuais >Elemento
invisvel est seleccionado.

3 . Na janela do documento, clique no contorno do formulrio para seleccionar o formulrio

ou seleccionar a tag , no selector de tags situado no canto inferior esquerda da janela do
documento.
Propriedades do formulrio
O inspetor de propriedades ser exibido como abaixo:

A - Aco - Identificar o aplicativo do servidor que processa as informao do formulrio,

especificadas como URL. Clique no cone da pasta, para localizar o aplicativo, ou digite o
caminho correspondente a ele, tambm possvel a digitao de um email.
B - formulrio - Defina o nome do formulrio.
C - Mtodo - Define a maneira como sero processados os dados do formulrio. Segue
abaixo as opes;
. Get; Anexa o valor URL que solicita a pgina.
. Post; Incorpora os dados do formulrio solicitao http.
. Padro; Utiliza a definio padro do navegador para enviar os dados do formulrio ao
servidor Normalmente, o padro utilizado o mtodo GET.
D - Tipo de Codificao - permite especificar o tipo de codificao

MIME dos dados enviados ao servidor para processamento.

Inserindo objectos em um formulrio
Para adicionar um objeto de formulrio necessrio que o ponto de insero esteja
Dentro dos limites do formulrio (clique com o mouse dentro da rea pontilhada vermelho),
seleccione o Menu Inserir e na clique na opo Objectos de Formulrio.
Porm, a maneira mais prtica de se inserir objectos em um formulrio utilizando a barra
Inserir, como segue abaixo:

A-Campo de texto-coloca um campo de texto no ponto de insero. Defina o nome, tamanho

e valor inicial no inspector de propriedades.
B- Campo oculoto - coloca um campo oculto no ponto de insero. Defina o nome e valor no
inspector de propriedades
C-rea de texto - insere um campo de texto com vrias linhas no ponto de insero.
D - Caixa de seleo e boto de rdio - colocam os controles correspondentes no ponto de
insero. Defina o nome, valor quando seleccionado e o estado inicial no inspector de
propriedade.
E - Grupo de botes de rdio inserir um grupo de botes de opes no ponto de insero.
F - Menu de lista - coloca uma lista ou menu p-up no ponto de insero. Defina o nome,
tipo e valores da lista no inspector de propriedades.
G - Menu de salto - coloca um menu pop- up de URL s no ponto de insero. A escolha de
um valor nesse menu levar o usurio URL. Defina a lista de valores na caixa de dilogo
que for exibido.
H - Campo de imagens -coloca um campo imagens no ponto insero Defina o nome,
tamanho, texto alternativo e arquivo de origem no inspetor de propriedades.
I - Campo de arquivos - coloca um campo de upload de arquivos no ponto de insero.
Defina o nome, tamanho e valor inicial no inspetor de propriedades.
J - Boto coloca um boto com nome e value padro Enviar no ponto de insero.

Para inserir um boto, coloque o ponto de insero dentro dos limites de um formulrio, os
botes situados fora dos formulrios no aparecero em todos os navegadores. Utilize o
inspetor de propriedades para definir o nome, identificador e a ao. Identificador uma
maneira de associar estruturalmente o identificador do texto ao campo.
k-Conjunto de campos uma tag de conteno para um grupo lgico de elementos do
formulrio.
Criao de nomes de salto
Um menu de salto um menu pop-up em um documento, visvel aus usurios do site, que
lista as opo que estabelecem links a documentos e arquivos. Podem ser criados links a
documentos no seu site da Web, a documentos em outros sites da Web,links de correio
electrnico, links a imagem ou a qualquer tipo de arquivo que passa ser aberto em um
navegado.
Um menu de salto contm trs componentes bsico;
. Um aviso de seleco no menu, como uma descrio da categoria para os itens do menu,
ou instruo, Por exemplo; Escolha uma opo (Opcional)
Uma lista de itens de menu vinculados; um usurio escolhe uma opo e um documento
Um boto Ir (Opcional)
A - Clique no boto com o sinal de adio (+) para adicionar um item de menu.
B - Clique novamente no boto para incluir outro outros itens de menu. Seleccione um item
de menu e clique no boto com sinal de subtraco(-)para remover um item.
C - Seleccione um item de menu e, em seguida, utilize as teclas de seta para percorrer a
lista para cima /baixo.
D - No campo Texto, digite o texto do item de menu que dever aparecer na lista do menu.
Para utilizar um aviso de seleco no menu, como "Escolha uma opo", digite o texto da
Seleco no campo Texto para o primeiro item de menu.
E - Na caixa de texto Aps selecionar, v para a URL, clique no cone de pasta para procurar
o arquivo a ser aberto, ou digite o caminho do arquivo nessa caixa.
F - No menu pop - up Abrir as URLs em, seleccione uma localizao onde o arquivo ser
aberto;
A opo Moldura abre o arquivo na moldura selecionada.
H - Na caixa de texto Nome de menu, digite um nome para o item de menu.
I - em opes, seleccione inserir o boto ir aps o menu para adicionar um boto ir em vez
de aviso de seleco no menu
J - Em Opes, escolha Seleccionar o primeiro item aps a alterao da URL, se for utilizado
um aviso de seleco no menu ( como "Escolha uma opo")

ENVIANDO UM FORMULRIO VIA e-mail

Para enviar os dados de um formulrio para um endereo de email, faa como indicado
abaixo:
Clique no campo de formulrio (em sua linha vermelha), selecione no inspetor de
propriedades o mtodo post e coloque o email de destino na opo ao.
Observao
Os dados do formulrio sero enviados utilizando-se o sorftware de correio que estiver
configurado na mquina

Dreamweaver - como adicionar msica no site

Link para udio
A incorporao de udio encaixa o aparelho de reproduo de som directamente na pgina,
mais o som s ser excludo se os visitantes do seu site contarem como o plug-in apropriado
ao arquivo escolhido. Incorpora os arquivos, se desejar, utilizar o som como msica de fundo
ou se desejar mais controle sobre a prpria apresentao de som.
Para inserir um link de udio, faa como o que se segue abaixo:
1. Seleccione um texto ou imagem no documento.
2. No inspector de propriedades seleccione a caixa Link.
3. Digite o nome do arquivo de udio para qual se deseja criar o link, ou clique no boto
procure para encontr-lo.
Arquivos de udio embutidos
Embutido um arquivo de udio em sua pgina ser aberto um software para reproduo
Do arquivo (media player, por exemplo),mais o arquivo somente ser reproduzido se o
usurio possuir plug-in para o software instalado em seu browser.
Lembrando que, esse arquivo de udio tambm dever estar copiado e guardado juntamente
com os arquivos de seu site. Esses arquivos poder ser utilizado como som de fundo, com a
vantagem de que o usurio poderia controlar o arquivo atravs do software que o est
reproduzindo.
Para embutir arquivos de som em uma pgina, faca como abaixo.
1.Clique no Menu Inserir
2.Selecione a opo Mdia
3.Clique em Plu-ln
4.Na caixa de dilogo que ser exibida, seleccione o arquivo de som ao qual se deseja
embutir na pgina, caso o arquivo no esteja gravado em uma pasta de site Dreamweaver
solicitar o arquivo a ser copiado.

Dica
A Barra Inserir possui um atalho para inserir Mdia, veja;

Observe agora qual a aparncia da mdia inserida no Dreamweaver MX;

J a aparncia no navegador do udio embutido esta;

Dica
No inspector de propriedades existe uma caixa uma caixa chamada Url do Plug-In, digite o
endereo da pgina onde possvel fazer o download do programa necessrio para a
reproduo do arquivo embutido.

Dreamweaver - como criar mapas de imagens

CRIANDO MAPAS DE IMAGENS
Um mapa de imagens uma imagem que serve como dispositivo de navegao. Com um
mapa de imagens, possvel. Criar multimdia ponto activo (rea clicveis) em uma nica
imagem e vincular cada ponto activo a uma URL diferente ou arquivo a ser aberto. possvel
tambm definir onde um documento ser aberto, por exemplo; abrir o documento em uma
moldura de um conjunto de molduras de um documento ou abri-lo em uma nova janela do
navegador.
Para criar um mapa de imagens
1.Insira uma imagem e seleccione-a.
2.Clique na seta de expanso do inspector de propriedades ( na extrema direita inferior da
pgina, dentro do inspector de propriedades ) e observe as opes;

A - MAPA - Digite o nome do mapa.

B - FERRAMENTA PONTO ACTIVO DE PONTEIRO - Ferramenta utilizada para seleccionar as
reas do mapa definido na imagem.
C-ferramenta utilizadas para definir a rea do mapa na imagem como segui abaixo;
. Ferramenta Ponto Activo Rectangular: cria mapas rectangulares
.Ferramentas Ponto Activo Oval; cria mapas ovais
. Ferramentas Ponto Activo Poligonal; cria mapas em qualquer formato.
Para definir uma rea do mapa na imagem, seleccione uma das ferramentas acima, posicione
o mouse por sobre a imagem e utilize o arrastar e soltar observe que o inspector de
propriedades passar a exibir as seguintes opes:

Dreamweaver - como criar texto em flash

Texto Flash
O Texto Flash um texto que quando o utilizador passa o mouse em cima, o mesmo muda
de cor, para inseri-lo no documento siga os seguintes passos:
1.Clique no Menu Inserir (ou utilize a barra inserir)
2.Clique em imagens interactivas
3.Selecione texto flash
Uma caixa, como a que segue, ser exibida;

A - FONTE- seleccione o tipo de letra a ser formatada para o texto flash, assim como o
tamanho o estilo e o negrito.
B - COR - cor do texto para visualizao na pgina. Cor da Imagem Cambivel; cor que ser
exibida quando o mouse deslizar por sobre a imagem.
C - TEXTO - digite o texto que aparecer no boto.
D - LINK- pgina que aparecer quando clicarem por sobre a imagem.
E - DESTINO- definio de onde a pgina ser aberta.
F - COR DE FUNDO - definio da cor de fundo do boto.
G - SALVA COMO - especificao do local onde ficar gravado o texto flash.
DICA

Para testar o texto flash, siga os mesmos passos para testar o Boto flash.

Como criar botes em flash com o dreamweaver

O objecto de boto Flash um boto actualizvel baseado em um modelo Flash. possvel
personalizar um objecto de boto Flash, adicionando texto, cor de fundo e links para
outros arquivos. possvel inserir botes Flash durante o trabalho na visualizao do
projecto ou na visualizao do cdigo.
DICA
necessrio salvar os documentos antes de inserir um objecto de boto ou texto Flash.
Para obter Boto Flash deve-se clicar no menu inserir, seleccione a
opo imagens interactivas > Boto Flash, uma caixa, como abaixo, ser exibida;

A-AMOSTRA-exibe um exemplo do estilo seleccionado.

B- ESTILO - lista de botes pr-definidos, para visualiz-lo observe a caixa Sample.
C- TEXTO DO BOTO- texto que aparecer na parte de cima do boto.
D -FONTE- seleccione o tipo de letra a ser utilizada.
E - Link_ endereo (URL),que ser aberto quando o usurio clicar sobre o boto.
F - Destino - quando o link ser aberto.

G- Cor de Fundo - Cor atribuda ao fundo do boto. (de preferncia a cor do fundo da
pgina).
H - salvar como - especifica o nome do boto e onde ser gravado
Dica
Para testar o boto inserido, clique sobre o mesmo, v at o inspector de propriedades e
escolha a opo Executar, para finalizar ainda no inspector de propriedades, seleccione a
opo Parar.

Dreamweaver - como inserir imagens

Neste tutorial vamos mostrar como inserir imagens.
Como inserir imagens
As imagens costumam ser utilizadas para indicar interfaces grficas (como botes de
navegao), apelo visual (por exemplo; fotografias) ou elementos de design interactivos,
como imagens cambiveis ou um mapa de imagens.
No Dremweaver MX, possvel possvel trabalhar visualizao do projecto ou do cdigo
para inserir imagens em um documento. Ao adicionar imagens em um documento, possvel
definir ou modificar propriedades da imagem e exibir as alteraes directamente na janela do
documento.
Para inserir imagens no Dremweaver seleccione o Menu Inserir e seleccione Imagem,
existindo tambm a opo da barra Inserir. Na caixa de dilogo que ser exibida escolha o
local onde se encontra guardada a imagem escolhida, em seguida clique duas vezes sobre o
nome do arquivo.
Como mencionando em captulo anterior, nem todos os tipos (extenses) de imagens poder
se utilizados pelo Dreamweaver, os mais utilizados so GIF, e PNG.
Propriedades da imagem
Ao seleccionar uma imagem o inspector de propriedades, passara a exibir as informaes da
mesma.

A-LARGURA E ALTURA - permite configura / altura da imagem seleccionada no documento.

B- Orig. - exibe o nome do arquivo inserido, assim como o caminho para a pasta onde o
mesmo est gravado.
C- ALT- Opo que permite que seja exibida uma frase quando o usurio permanece com o
mouse posicionado alguns segundos em cima da imagem no navegador.
D-ALINHAR-alinhamento do texto em relao imagem.
E-ALINHAMENTO-do texto em relao ao documento.
F- BORDA- configurao da espessura da borda da imagem.
IMAGEM CAMBIVEL

Uma imagem cambivel aquele que, quando exibida em um navegador, alterada quando
o ponteiro movido sobre a mesma.
Esse tipo de imagem consiste, de fato, em duas imagens: a imagem primria (exibida
quando a pgina for carregada pela primeira vez) e a imagem secundria (que ser exibida
quando o cursor for deslizado sobre a imagem primria). As imagens cambiveis devero ter
o mesmo tamanho; caso contrrio, o Dreamweaver redimensionar automaticamente a
segunda imagem para que coincida com as propriedades da primeira.
Para inserir uma imagem cambivel no documento deve-se clicar no Menu Inserir (ou utilizar
a barra inserir ), seleccionar o item imagens Interactivas e clicar na opo Imagem
cambivel, seguinte caixa de dilogo ser exibida:

A -NOME DA IMAGEM - d um nome para o conjunto de imagens. (imagem cambivel)

B- IMAGEM ORIGINAL - clique no boto procurar e seleccione a imagem que aparecer
inicialmente, no navegador.
C- IMAGEM CAMBIVEL- clique no boto procurar e seleccione a imagem que substituir a
imagem original.
D - QUANDO TIVER CLICADO, V PARA A URL - digite o nome d pgina a ser visitada
quando o usurio clicar na imagem cambivel.

Dreamweaver - Construir um site do incio

Propriedades da pgina
Quando criamos pginas no Dremweaver, temos que definir algumas coisas bsicas, tais
como; plano de fundo, cores dos textos e dois links, etc. Para isso clique em Modificar e
seleccione a opo Propriedades da pgina, ira aparecer uma caixa como abaixo;

A - Titulo - o nome que aparece na barra de ttulo do navegador, a pgina for carregada.

B-Imagem de Fundo-Uma imagem pode ser seleccionada para compor o fundo da pgina.
C-Fundo - Permite que seja escolhida a cor de fundo da pgina.
D- Texto- Define a cor do texto
E-Links - Define a cor utilizada para os links da pgina.
F-Margens - Define as margens da pgina.
Como trabalhar com textos
Trabalhar com textos uma tarefa bastante simples. H vrias formas de adicionar texto a
um documento, do Dreamweaver. possvel digitar texto diretamente na janela do
documento, recortar e colar ou importar texto de outros documentos.
Sempre que digitarmos um texto no Dreamweaver, suas opes de formatao ficam
registradas no inspetor de propriedades, como segue abaixo;

A- Formato- Permite aplicar estilos em ttulos.

B- Fonte- Opes de vrios tipos de fonte para a formatao de texto. Porm, nem todas as
fontes armazenadas no computador so visualizadas automaticamente pelo Dreamweaver, se
a fonte desejada no estiver na lista seleccione a ltima opo dela (editar lista), e escolha a
fonte desejada.
C- Tamanho - Especifica o tamanho do texto.
D- cor do texto -Item para a escolha da cor do texto.
E - Negrito (Bold)
F - Itlico (Italic)
G - Alinhamentos (esquerda, centralizado, direita e justificado)
H - Marcadores e Numerao
I - Aumentar/ Reduzir recuo do texto.
ESTILOS HTML
Ao configurar estilos HTML podem, possvel aplicar com rapidez e consistncia formatao
de fonte ao texto de documentos,
Os estilos HTML podem consistir em um nico ou em vrios atributos de tag de fonte
HTML, como cor, tamanho da fonte, tamanho, bem como outros atributos de formatao
como negrito ou itlico. Por exemplo; possvel criar um estilo HTML para texto que Arial,
tamanho 4+, verde e itlico. Depois, possvel aplicar rapidamente o estilo seleccionando o
texto em que deseja aplica-lo e, em seguida, seleccionado o estilo HTML do painel Estilos
HTML.
Para criar um estilo HTML deve - se seguir os seguintes passos;
1) Clique no Menu janela

2) Seleccione a opo Estilos HTML

Ao lado direito (nos painis) aparecer o painel como abaixo;

A - Remove formatao que porventura, j tenham sido aplicadas a um texto do documento

activo.
B - Para criar um novo estilo clique no boto como indicado, escolha a opo Nova, a
seguinte caixa ser exibida;

A -Nome - Atribui um nome, escolhido pelo usurio, ao estilo criado.

B - Aplique a - Indica onde dever ser aplicado o estilo criado se a um texto selecionado ou a
um pargrafo onde est posicionado o cursor.
C- Fonte - Seleccionado o tipo da letra a ser utilizada.
D- Tamanho - Seleccione o tamanho de a letra ser aplicado.
E- Cor - Selecciona a cor do estilo.
F - Estilo - Negrito o Itlico
G - Formato - S estar disponvel se o usurio estiver criado um estilo para um pargrafo,
utilizado para escolher um nvel de cabealho.
H - Alinhamento - Alina o estilo da maneira, mas conveniente ao usurio (esquerda direita ou
centralizada).

Criar janela POP-UP

Quem que gosta dos chamadas Janelinhas Pop-up? Os Pop-ups tem se tornado um dos
campees de chateaes do mundo da Internet e para driblar essas chateaes nada melhor
do que criarmos um pop-up bem mais interessante do que uma simples janelinha flutuante.
Uma das alternativas bem atraentes utilizar janelinhas pop-up transparentes. O uso de um
Comportamento do DW (behaviors) pode ser adicionado em camadas que as deixam
transparente. Poderemos adicionar um boto que ao clicar em fechar , aps um tempo
determinado ela "vai desaparecendo" (Efeito Fade) para o usurio. Ou podemos fazer com
que a camada j aparea transparente. Esse recurso s funcionar se voc tiver no seu DW o
comportamento "Opacity Suite". Caso no possua esse comportamento baixe-o
OBS: recomendvel um conhecimento sobre camadas e comportamentos do DW. Veja a
matria que falo sobre esses recursos super teis do DW.
Bom ento mos a obra.
Crie uma imagem no Fireworks ou em um programa grfico de sua preferncia e exporte-a
com o formato "gif" ou "jpeg".
Inserimos na pgina aonde queremos que aparea a popup, uma camada "Menu Inserir
Camada". Seleccione a camada e altere as propriedades de modo que a opo "Imagem de
fundo" fique com o URL do nosso arquivo "gif" ou "jpeg" criado anteriormente bem como
uma ID para essa camada aqui no caso eu dei o nome de "popup" e a figura feita no
Fireworks eu exportei como como "pai.gif".

Com o Comportamento j instalada em seu DW , v no menu "Janela Comportamentos>

Opacity > Fade Opacity

em "Object ID:" insira o mesmo nome anteriormente dado a ID da camada. Aqui no meu

caso seria "popup" que foi o nome que eu dei para a minha camada, em "Start Opacity"
insira 100 (visualizao total) , em "Final Opacity" insira 0 (zero - visualizao nula) e em
"Speed" insira a velocidade do efeito (no exemplo este valor 20). Clique em "OK". No se
esquea de configurar o evento para esse Comportamento sendo "onclick".
Com esse comportamento voc pode tambm optar por: Set Opacity (com um evento ,
coloca sua camada com a opacidade determinada por voc) ou Stop Fade Opacity (com um
evento voc para de aplicar o efeito de opacidade).

Mapeamento de imagens no Dreamweaver

Aprenda a mapear imagens, usando o Dreamweaver. Mapear imagens, voc colocar uma
imagem na sua pgina e colocar um link nessa imagem, mas no na imagem inteira.
Mapear a imagem colocar um link apenas em uma parte d
Hoje vamos a mapear imagens, usando o Dreamweaver.
Mapear imagens, voc colocar uma imagem na sua pgina e colocar um link nessa
imagem, mas no na imagem inteira. Mapear a imagem colocar um link apenas em uma
parte de imagem.

Esse mapeamento ptimo pra splashes e aberturas de sites.

1 Escolha a sua figura. Usarei esta:

Obviamente, coloque essa imagem na sua pgina. Pra fazer isso, basta ir em Insert >>
Image (meu Dreamweaver em Ingls).
Aparecer uma janela, basta escolher a imagem, ou colocar a URL da figura na janela.
2 Em cima da pgina, existem trs abas: Code, Split e Design. Escolha "Design", para
visualizar sua pgina.

Na aba design, clique com o boto direito na figura, e seleccione a ltima opo, Properties
(Propriedades).

3 Aparecer o inspector de Propriedades. Observe que h um quadrado, um circulo e um

Polgono. Com essas ferramentas, seleccione a parte que deseja mapear.

4 No inspector de Propriedades, coloque a URL do link e o tipo da target. Se preferir, faa

isso manualmente no cdigo HTML.

Pronto, voc mapeou a sua imagem!

Rollover Image
Este belo efeito de passar o rato por cima de uma imagem e aparecer outra muito simples
de fazer.
1.

Ir a Window > Objects e clicar no objecto "Rollover Image"

2.

A vai aparecer uma janela para escolher a 1 imagem e a 2 imagem; clique no

1 browse e selecciona a imagem desejada, a mesma coisa para o 2browse.

3.

E a magia est feita

Dreamweaver para criar um menu Pop-up

modo Design.

29. Montando o menu:

30. Mostre a paleta Behaviors, clicando em Window/Behaviors.
31. D um clique no boto Verduras 1.
32. Clique no sinal + da paleta Behaviors.

33. Seleccione a opo Show Pop Up Menu.

34. Aparecer a caixa de dilogo abaixo:

35. As guias Appearance e Advanced, tratam da formatao da aparncia do menu,

use-as como quiser, depois de formatar clique na guia Position para definir em que posio
aparecer o menu em relao ao boto que o activa.

36. Clique em OK e seleccione o outro boto.

37. Repita para este boto os itens, 32, 33, 34 e 35.
38. O ltimo passo alterar o target que est _blank para contedo que o nome
do nosso IFRAME, para faz-lo rapidamente, acesse a vizualizao de cdigo do
Dreamweaver e clique no menu Edit/Find and Replace.
39. Mande localizar _blank e substitua por contedo.