Dreamweaver
Content
Galeria de imagens
Introdução
Quem nunca se deparou com a necessidade de criar uma pequena galeria de imagens, fotos, de
vídeos… para inserir seu portfólio, fazer um pequeno catálogo? Desde os iniciantes ao de nível avançado,
já passaram ou passarão por esta obrigação. E um dos recursos mais simples, porém, pouco explorado
para tal fim no Dreamweaver e a aplicação de camadas. Para quem precisa de rapidez e não carece de
dinamismo, actualizações automáticas, ou que nem saiba programar, esta é uma boa opção.
Pré-Requisitos
Facilidade com o manuseio do Dreamweaver CS3
Entendimento sobre o conceito de Camadas e DIV’s
Entendimento conceitual sobre Behaviors (Comportamentos)
Objectivo
Criar uma galeria que receba conteúdos diversos, como: textos, imagens, animações em flash e vídeo
utilizando camadas
Conceitos
Muitos alunos meus, iniciantes no Dreamweaver, têm 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 importância, podemos
deslocá-las, umas sobre as outras, alterando sua ordem.
No Dreamweaver não é diferente e veremos o porquê agora.
Conteúdo
Para melhor entendimento de todo o processo, vamos dividi-lo em partes.
Parte 1: Montagem da Estrutura da Galeria – Conteúdo
Nossa galeria terá como base a seguinte estrutura:
Fig. 01: Estrutura da galeria
Para montá-la vamos começar inserindo a camada responsável pelo conteúdo 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, façamos um retângulo (clicando sobre a borda logo em
seguida) e o configuremos com as seguintes características:
Fig. 03: Propriedades da Camada “Texto”
CSS-P Element: Nome que identificará a camada e a diferenciará das demais.
L: Distância do lado esquerdo | T: Distância do topo | W: Largura da camada | H: Altura da camada
Bg color: Cor de fundo da camada
Seguindo o mesmo procedimento, vamos criar mais três camadas com as mesmas características,
alterando a penas seus nomes(Imagem, Flash e Vídeo respectivamente) e suas cores de fundo para
melhor identificá-las adiante.
Após inserirmos as quatro camadas, teremos a seguinte visualização no painel CSS:
Fig. 04: Painel CSS de identificação das camadas
Name: Nome da camada
Z: Ordem de visualização
Vejamos, de acordo com o “Z“, como estão organizadas as camadas, caso tenhamos que desmembrálas:
Fig. 05: Organização das camadas
Parte 2: Montagem da Estrutura da Galeria – Menu
As camadas que receberão seus respectivos conteúdos já estão prontas. O próximo passo é inserirmos
uma nova camada que conterá o menu de acesso às outras camadas.
Se prestarmos bem atenção, perceberemos que as camadas desenvolvidas estão a 25 px do topo, que
por sua vez, possuem uma altura de 300 px. Então, para que a camada com o menu saia perfeitamente
abaixo das demais, e dando um espaço de 2 px para não ficar muito próximo, vejamos na imagem a
seguir:
Fig. 06: Configuração 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 conteúdo, como mostra a fig. 01
deste tutorial.
Parte 3: Utilizando Behaviors para Controlar a Exibição 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
serão exibidas e/ou ocultadas no momento em que o usuário clicar em algum link do menu.
Primeiramente, vamos seleccionar a palavra Texto da camada menu e, através 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 botões responsáveis pelo
controle de exibição das mesmas.
Fig. 08: Janela Show-Hide Elements
Elements: Nome de todas as camadas criadas na página
Botões: Show (Exibir) | Hide (Ocultar) | Default (Padrão)
Vamos entender a lógica desta janela.
Quando clicarmos no link Texto queremos que sejam exibidas as camadas Texto e Menu(clicar no nome
e em seguida no botão Show). O restante deve ser ocultado (Clicar no nome e em seguida no botão
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, não é verdade?!
Para alguns usuários, certamente a galeria já está funcionando ao clicar em seus links. Contudo, caso
isso ainda não 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 usuário já visualize a camada Flash aberta, devemos fazer a seguinte configuração,
bastando clicar ao lado do nome da camada:
Fig. 09: Ajustes nas Camadas
Devemos ficar atentos à camada Menu. Como ela é responsável pela navegação da galeria, ela sempre
deve estar visível.
Parte 5: Ajustes nos Comportamentos de Ocultação e Exibição
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 configuração do comportamento. Para que o Behaviors
assuma a função de “clique”, precisamos alterar sua configuração para “OnClick“:
Fig. 11: Configuração 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 “mãosinha” do mouse não 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: Configuração do link
Considerações Finais
Pronto, pessoal!
Nossa galeria está completa. Agora basta inerirmos o devido conteúdo. Para isso, basta clicar, no Painel
CSS > AP Elements, na camada desejada, e na área de desenvolvimento, dentro dela, inserir os devidos
conteúdos. Vejamos o resultado abaixo:
Espero que tenham gostado.
Só para constar, este tutorial também está presente no site www.mxstudio.com.br, pois também sou
colunista de lá.
Um abraço a todos.
http://www.webtutoriais.com/open.php?cut=5470
Dreamweaver - Como criar um formulário
CRIANDO UM FORMULÁRIO
1 coloque o ponto de inserção onde o formulário devera ser exibido.
2. Escolha inserir >formulário ou seleccione a categoria formulário na barra inserir e clique
no ícone de Formulário Ou ainda seleccione na barra Inserir a guia Formulário.
O Dreamweaver inserirá o formulário. Com a página no modo de visualização do projecto, os
formulários são indicados por um contorno pontilhado em vermelho.
Dica
Se este contorno não estiver visível, verifique se a opção Exibir > Auxílios visuais >Elemento
invisível está seleccionado.
3 . Na janela do documento, clique no contorno do formulário para seleccionar o formulário
ou seleccionar a tag , no selector de tags situado no canto inferior esquerda da janela do
documento.
Propriedades do formulário
O inspetor de propriedades será exibido como abaixo:
A - Acção - Identificar o aplicativo do servidor que processa as informação do formulário,
especificadas como URL. Clique no ícone da pasta, para localizar o aplicativo, ou digite o
caminho correspondente a ele, também é possível a digitação de um email.
B - formulário - Defina o nome do formulário.
C - Método - Define a maneira como serão processados os dados do formulário. Segue
abaixo as opções;
. Get; Anexa o valor á URL que solicita a página.
. Post; Incorpora os dados do formulário á solicitação http.
. Padrão; Utiliza a definição padrão do navegador para enviar os dados do formulário ao
servidor Normalmente, o padrão utilizado é o método GET.
D - Tipo de Codificação - permite especificar o tipo de codificação
MIME dos dados enviados ao servidor para processamento.
Inserindo objectos em um formulário
Para adicionar um objeto de formulário necessário que o ponto de inserção esteja
Dentro dos limites do formulário (clique com o mouse dentro da área pontilhada vermelho),
seleccione o Menu Inserir e na clique na opção Objectos de Formulário.
Porém, a maneira mais prática de se inserir objectos em um formulário é utilizando a barra
Inserir, como segue abaixo:
A-Campo de texto-coloca um campo de texto no ponto de inserção. Defina o nome, tamanho
e valor inicial no inspector de propriedades.
B- Campo oculoto - coloca um campo oculto no ponto de inserção. Defina o nome e valor no
inspector de propriedades
C-Área de texto - insere um campo de texto com várias linhas no ponto de inserção.
D - Caixa de seleção e botão de rádio - colocam os controles correspondentes no ponto de
inserção. Defina o nome, valor quando seleccionado e o estado inicial no inspector de
propriedade.
E - Grupo de botões de rádio inserir um grupo de botões de opções no ponto de inserção.
F - Menu de lista - coloca uma lista ou menu pó-up no ponto de inserção. 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 inserção. A escolha de
um valor nesse menu levará o usuário á URL. Defina a lista de valores na caixa de diálogo
que for exibido.
H - Campo de imagens -coloca um campo imagens no ponto inserção 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 inserção.
Defina o nome, tamanho e valor inicial no inspetor de propriedades.
J - Botão coloca um botão com nome e value padrão Enviar no ponto de inserção.
Para inserir um botão, coloque o ponto de inserção dentro dos limites de um formulário, os
botões situados fora dos formulários não aparecerão em todos os navegadores. Utilize o
inspetor de propriedades para definir o nome, identificador e a ação. Identificador é uma
maneira de associar estruturalmente o identificador do texto ao campo.
k-Conjunto de campos é uma tag de contenção para um grupo lógico de elementos do
formulário.
Criação de nomes de salto
Um menu de salto é um menu pop-up em um documento, visível aus usuários do site, que
lista as opção 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
electrónico, links a imagem ou a qualquer tipo de arquivo que passa ser aberto em um
navegado.
Um menu de salto contém três componentes básico;
. Um aviso de selecção no menu, como uma descrição da categoria para os itens do menu,
ou instrução, Por exemplo; Escolha uma opção (Opcional)
Uma lista de itens de menu vinculados; um usuário escolhe uma opção e um documento
Um botão Ir (Opcional)
A - Clique no botão com o sinal de adição (+) para adicionar um item de menu.
B - Clique novamente no botão para incluir outro outros itens de menu. Seleccione um item
de menu e clique no botão com sinal de subtracção(-)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 selecção no menu, como "Escolha uma opção", digite o texto da
Selecção no campo Texto para o primeiro item de menu.
E - Na caixa de texto Após 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 localização onde o arquivo será
aberto;
A opção 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 opções, seleccione inserir o botão ir após o menu para adicionar um botão ir em vez
de aviso de selecção no menu
J - Em Opções, escolha Seleccionar o primeiro item após a alteração da URL, se for utilizado
um aviso de selecção no menu ( como "Escolha uma opção")
ENVIANDO UM FORMULÁRIO VIA e-mail
Para enviar os dados de um formulário para um endereço de email, faça como indicado
abaixo:
Clique no campo de formulário (em sua linha vermelha), selecione no inspetor de
propriedades o método post e coloque o email de destino na opção ação.
Observação
Os dados do formulário serão enviados utilizando-se o sorftware de correio que estiver
configurado na máquina
Dreamweaver - como adicionar música no site
Link para áudio
A incorporação de áudio encaixa o aparelho de reprodução de som directamente na página,
mais o som só será excluído se os visitantes do seu site contarem como o plug-in apropriado
ao arquivo escolhido. Incorpora os arquivos, se desejar, utilizar o som como música de fundo
ou se desejar mais controle sobre a própria apresentação de som.
Para inserir um link de áudio, faça 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 botão
procure para encontrá-lo.
Arquivos de áudio embutidos
Embutido um arquivo de áudio em sua página será aberto um software para reprodução
Do arquivo (media player, por exemplo),mais o arquivo somente será reproduzido se o
usuário possuir plug-in para o software instalado em seu browser.
Lembrando que, esse arquivo de áudio também 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 usuário poderia controlar o arquivo através do software que o está
reproduzindo.
Para embutir arquivos de som em uma página, faca como abaixo.
1.Clique no Menu Inserir
2.Selecione a opção Mídia
3.Clique em Plu-ln
4.Na caixa de diálogo que será exibida, seleccione o arquivo de som ao qual se deseja
embutir na página, caso o arquivo não esteja gravado em uma pasta de site Dreamweaver
solicitará o arquivo a ser copiado.
Dica
A Barra Inserir possui um atalho para inserir Mídia, veja;
Observe agora qual a aparência da mídia inserida no Dreamweaver MX;
Já a aparência no navegador do áudio embutido é esta;
Dica
No inspector de propriedades existe uma caixa uma caixa chamada Url do Plug-In, digite o
endereço da página onde é possível fazer o download do programa necessário para a
reprodução do arquivo embutido.
Dreamweaver - como criar mapas de imagens
CRIANDO MAPAS DE IMAGENS
Um mapa de imagens é uma imagem que serve como dispositivo de navegação. Com um
mapa de imagens, é possível. Criar multimídia ponto activo (área clicáveis) em uma única
imagem e vincular cada ponto activo a uma URL diferente ou arquivo a ser aberto. É possível
também 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 expansão do inspector de propriedades ( na extrema direita inferior da
página, dentro do inspector de propriedades ) e observe as opções;
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 opções:
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 visualização na página. Cor da Imagem Cambiável; cor que será
exibida quando o mouse deslizar por sobre a imagem.
C - TEXTO - digite o texto que aparecerá no botão.
D - LINK- página que aparecerá quando clicarem por sobre a imagem.
E - DESTINO- definição de onde a página será aberta.
F - COR DE FUNDO - definição da cor de fundo do botão.
G - SALVA COMO - especificação do local onde ficará gravado o texto flash.
DICA
Para testar o texto flash, siga os mesmos passos para testar o Botão flash.
Como criar botões em flash com o dreamweaver
O objecto de botão Flash é um botão actualizável baseado em um modelo Flash. É possível
personalizar um objecto de botão Flash, adicionando texto, cor de fundo e links para
outros arquivos. É possível inserir botões Flash durante o trabalho na visualização do
projecto ou na visualização do código.
DICA
É necessário salvar os documentos antes de inserir um objecto de botão ou texto Flash.
Para obter Botão Flash deve-se clicar no menu inserir, seleccione a
opção imagens interactivas > Botão Flash, uma caixa, como abaixo, será exibida;
A-AMOSTRA-exibe um exemplo do estilo seleccionado.
B- ESTILO - lista de botões pré-definidos, para visualizá-lo observe a caixa Sample.
C- TEXTO DO BOTÃO- texto que aparecerá na parte de cima do botão.
D -FONTE- seleccione o tipo de letra a ser utilizada.
E - Link_ endereço (URL),que será aberto quando o usuário clicar sobre o botão.
F - Destino - quando o link será aberto.
G- Cor de Fundo - Cor atribuída ao fundo do botão. (de preferência a cor do fundo da
página).
H - salvar como - especifica o nome do botão e onde será gravado
Dica
Para testar o botão inserido, clique sobre o mesmo, vá até o inspector de propriedades e
escolha a opção Executar, para finalizar ainda no inspector de propriedades, seleccione a
opção Parar.
Dreamweaver - como inserir imagens
Neste tutorial vamos mostrar como inserir imagens.
Como inserir imagens
As imagens costumam ser utilizadas para indicar interfaces gráficas (como botões de
navegação), apelo visual (por exemplo; fotografias) ou elementos de design interactivos,
como imagens cambiáveis ou um mapa de imagens.
No Dremweaver MX, é possível é possível trabalhar visualização do projecto ou do código
para inserir imagens em um documento. Ao adicionar imagens em um documento, é possível
definir ou modificar propriedades da imagem e exibir as alterações directamente na janela do
documento.
Para inserir imagens no Dremweaver seleccione o Menu Inserir e seleccione Imagem,
existindo também a opção da barra Inserir. Na caixa de diálogo 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 capítulo anterior, nem todos os tipos (extensões) de imagens poderá
se utilizados pelo Dreamweaver, os mais utilizados são GIF, e PNG.
Propriedades da imagem
Ao seleccionar uma imagem o inspector de propriedades, passara a exibir as informações 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- Opção que permite que seja exibida uma frase quando o usuário permanece com o
mouse posicionado alguns segundos em cima da imagem no navegador.
D-ALINHAR-alinhamento do texto em relação à imagem.
E-ALINHAMENTO-do texto em relação ao documento.
F- BORDA- configuração da espessura da borda da imagem.
IMAGEM CAMBIÁVEL
Uma imagem cambiável é 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 primária (exibida
quando a página for carregada pela primeira vez) e a imagem secundária (que será exibida
quando o cursor for deslizado sobre a imagem primária). As imagens cambiáveis deverão ter
o mesmo tamanho; caso contrário, o Dreamweaver redimensionará automaticamente a
segunda imagem para que coincida com as propriedades da primeira.
Para inserir uma imagem cambiável no documento deve-se clicar no Menu Inserir (ou utilizar
a barra inserir ), seleccionar o item imagens Interactivas e clicar na opção Imagem
cambiável, seguinte caixa de diálogo será exibida:
A -NOME DA IMAGEM - dê um nome para o conjunto de imagens. (imagem cambiável)
B- IMAGEM ORIGINAL - clique no botão procurar e seleccione a imagem que aparecerá
inicialmente, no navegador.
C- IMAGEM CAMBIÁVEL- clique no botão procurar e seleccione a imagem que substituirá a
imagem original.
D - QUANDO TIVER CLICADO, VÁ PARA A URL - digite o nome dá página a ser visitada
quando o usuário clicar na imagem cambiável.
Dreamweaver - Construir um site do início
Propriedades da página
Quando criamos páginas no Dremweaver, temos que definir algumas coisas básicas, tais
como; plano de fundo, cores dos textos e dois links, etc. Para isso clique em Modificar e
seleccione a opção Propriedades da página, ira aparecer uma caixa como abaixo;
A - Titulo - É o nome que aparece na barra de título do navegador, a página for carregada.
B-Imagem de Fundo-Uma imagem pode ser seleccionada para compor o fundo da página.
C-Fundo - Permite que seja escolhida a cor de fundo da página.
D- Texto- Define a cor do texto
E-Links - Define a cor utilizada para os links da página.
F-Margens - Define as margens da página.
Como trabalhar com textos
Trabalhar com textos é uma tarefa bastante simples. Há várias formas de adicionar texto a
um documento, do Dreamweaver. É possível digitar texto diretamente na janela do
documento, recortar e colar ou importar texto de outros documentos.
Sempre que digitarmos um texto no Dreamweaver, suas opções de formatação ficam
registradas no inspetor de propriedades, como segue abaixo;
A- Formato- Permite aplicar estilos em títulos.
B- Fonte- Opções de vários tipos de fonte para a formatação de texto. Porém, nem todas as
fontes armazenadas no computador são visualizadas automaticamente pelo Dreamweaver, se
a fonte desejada não estiver na lista seleccione a última opção 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 - Itálico (Italic)
G - Alinhamentos (esquerda, centralizado, direita e justificado)
H - Marcadores e Numeração
I - Aumentar/ Reduzir recuo do texto.
ESTILOS HTML
Ao configurar estilos HTML podem, é possível aplicar com rapidez e consistência formatação
de fonte ao texto de documentos,
Os estilos HTML podem consistir em um único ou em vários atributos de tag de fonte
HTML, como cor, tamanho da fonte, tamanho, bem como outros atributos de formatação
como negrito ou itálico. Por exemplo; é possível criar um estilo HTML para texto que é Arial,
tamanho 4+, verde e itálico. Depois, é possível 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 opção Estilos HTML
Ao lado direito (nos painéis) aparecerá o painel como abaixo;
A - Remove formatação que porventura, já tenham sido aplicadas a um texto do documento
activo.
B - Para criar um novo estilo clique no botão como indicado, escolha a opção Nova, a
seguinte caixa será exibida;
A -Nome - Atribui um nome, escolhido pelo usuário, ao estilo criado.
B - Aplique a - Indica onde deverá ser aplicado o estilo criado se a um texto selecionado ou a
um parágrafo 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 Itálico
G - Formato - Só estará disponível se o usuário estiver criado um estilo para um parágrafo, é
utilizado para escolher um nível de cabeçalho.
H - Alinhamento - Alina o estilo da maneira, mas conveniente ao usuário (esquerda direita ou
centralizada).
Criar janela POP-UP
Quem é que gosta dos chamadas Janelinhas Pop-up? Os Pop-ups tem se tornado um dos
campeões de chateações do mundo da Internet e para driblar essas chateações 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 botão que ao clicar em fechar , após um tempo
determinado ela "vai desaparecendo" (Efeito Fade) para o usuário. Ou podemos fazer com
que a camada já apareça transparente. Esse recurso só funcionará se você tiver no seu DW o
comportamento "Opacity Suite". Caso não possua esse comportamento baixe-o
OBS: É recomendável um conhecimento sobre camadas e comportamentos do DW. Veja a
matéria que falo sobre esses recursos super úteis do DW.
Bom então mãos a obra.
Crie uma imagem no Fireworks ou em um programa gráfico de sua preferência e exporte-a
com o formato "gif" ou "jpeg".
Inserimos na página aonde queremos que apareça a popup, uma camada "Menu Inserir
Camada". Seleccione a camada e altere as propriedades de modo que a opção "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 (visualização total) , em "Final Opacity" insira 0 (zero - visualização nula) e em
"Speed" insira a velocidade do efeito (no exemplo este valor é 20). Clique em "OK". Não se
esqueça de configurar o evento para esse Comportamento sendo "onclick".
Com esse comportamento você pode também 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 página e colocar um link nessa imagem, mas não 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 página e colocar um link nessa
imagem, mas não 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 página. Pra fazer isso, basta ir em Insert >>
Image (meu Dreamweaver é em Inglês).
Aparecerá uma janela, basta escolher a imagem, ou colocar a URL da figura na janela.
2º Em cima da página, existem três abas: Code, Split e Design. Escolha "Design", para
visualizar sua página.
Na aba design, clique com o botão direito na figura, e seleccione a última opção, Properties
(Propriedades).
3º Aparecerá o inspector de Propriedades. Observe que há um quadrado, um circulo e um
Polàgono. 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, faça
isso manualmente no código 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 2ºbrowse.
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 botão “Verduras 1”.
32. Clique no sinal “+” da paleta Behaviors.
33. Seleccione a opção “Show Pop Up Menu”.
34. Aparecerá a caixa de diálogo abaixo:
35. As guias Appearance e Advanced, tratam da formatação da aparência do menu,
use-as como quiser, depois de formatar clique na guia Position para definir em que posição
aparecerá o menu em relação ao botão que o activa.
36. Clique em OK e seleccione o outro botão.
37. Repita para este botão os itens, 32, 33, 34 e 35.
38. O último passo é alterar o target que está _blank para conteúdo que é o nome
do nosso IFRAME, para fazê-lo rapidamente, acesse a vizualização de código do
Dreamweaver e clique no menu Edit/Find and Replace.
39. Mande localizar _blank e substitua por conteúdo.
Introdução
Quem nunca se deparou com a necessidade de criar uma pequena galeria de imagens, fotos, de
vídeos… para inserir seu portfólio, fazer um pequeno catálogo? Desde os iniciantes ao de nível avançado,
já passaram ou passarão por esta obrigação. E um dos recursos mais simples, porém, pouco explorado
para tal fim no Dreamweaver e a aplicação de camadas. Para quem precisa de rapidez e não carece de
dinamismo, actualizações automáticas, ou que nem saiba programar, esta é uma boa opção.
Pré-Requisitos
Facilidade com o manuseio do Dreamweaver CS3
Entendimento sobre o conceito de Camadas e DIV’s
Entendimento conceitual sobre Behaviors (Comportamentos)
Objectivo
Criar uma galeria que receba conteúdos diversos, como: textos, imagens, animações em flash e vídeo
utilizando camadas
Conceitos
Muitos alunos meus, iniciantes no Dreamweaver, têm 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 importância, podemos
deslocá-las, umas sobre as outras, alterando sua ordem.
No Dreamweaver não é diferente e veremos o porquê agora.
Conteúdo
Para melhor entendimento de todo o processo, vamos dividi-lo em partes.
Parte 1: Montagem da Estrutura da Galeria – Conteúdo
Nossa galeria terá como base a seguinte estrutura:
Fig. 01: Estrutura da galeria
Para montá-la vamos começar inserindo a camada responsável pelo conteúdo 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, façamos um retângulo (clicando sobre a borda logo em
seguida) e o configuremos com as seguintes características:
Fig. 03: Propriedades da Camada “Texto”
CSS-P Element: Nome que identificará a camada e a diferenciará das demais.
L: Distância do lado esquerdo | T: Distância do topo | W: Largura da camada | H: Altura da camada
Bg color: Cor de fundo da camada
Seguindo o mesmo procedimento, vamos criar mais três camadas com as mesmas características,
alterando a penas seus nomes(Imagem, Flash e Vídeo respectivamente) e suas cores de fundo para
melhor identificá-las adiante.
Após inserirmos as quatro camadas, teremos a seguinte visualização no painel CSS:
Fig. 04: Painel CSS de identificação das camadas
Name: Nome da camada
Z: Ordem de visualização
Vejamos, de acordo com o “Z“, como estão organizadas as camadas, caso tenhamos que desmembrálas:
Fig. 05: Organização das camadas
Parte 2: Montagem da Estrutura da Galeria – Menu
As camadas que receberão seus respectivos conteúdos já estão prontas. O próximo passo é inserirmos
uma nova camada que conterá o menu de acesso às outras camadas.
Se prestarmos bem atenção, perceberemos que as camadas desenvolvidas estão a 25 px do topo, que
por sua vez, possuem uma altura de 300 px. Então, para que a camada com o menu saia perfeitamente
abaixo das demais, e dando um espaço de 2 px para não ficar muito próximo, vejamos na imagem a
seguir:
Fig. 06: Configuração 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 conteúdo, como mostra a fig. 01
deste tutorial.
Parte 3: Utilizando Behaviors para Controlar a Exibição 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
serão exibidas e/ou ocultadas no momento em que o usuário clicar em algum link do menu.
Primeiramente, vamos seleccionar a palavra Texto da camada menu e, através 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 botões responsáveis pelo
controle de exibição das mesmas.
Fig. 08: Janela Show-Hide Elements
Elements: Nome de todas as camadas criadas na página
Botões: Show (Exibir) | Hide (Ocultar) | Default (Padrão)
Vamos entender a lógica desta janela.
Quando clicarmos no link Texto queremos que sejam exibidas as camadas Texto e Menu(clicar no nome
e em seguida no botão Show). O restante deve ser ocultado (Clicar no nome e em seguida no botão
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, não é verdade?!
Para alguns usuários, certamente a galeria já está funcionando ao clicar em seus links. Contudo, caso
isso ainda não 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 usuário já visualize a camada Flash aberta, devemos fazer a seguinte configuração,
bastando clicar ao lado do nome da camada:
Fig. 09: Ajustes nas Camadas
Devemos ficar atentos à camada Menu. Como ela é responsável pela navegação da galeria, ela sempre
deve estar visível.
Parte 5: Ajustes nos Comportamentos de Ocultação e Exibição
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 configuração do comportamento. Para que o Behaviors
assuma a função de “clique”, precisamos alterar sua configuração para “OnClick“:
Fig. 11: Configuração 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 “mãosinha” do mouse não 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: Configuração do link
Considerações Finais
Pronto, pessoal!
Nossa galeria está completa. Agora basta inerirmos o devido conteúdo. Para isso, basta clicar, no Painel
CSS > AP Elements, na camada desejada, e na área de desenvolvimento, dentro dela, inserir os devidos
conteúdos. Vejamos o resultado abaixo:
Espero que tenham gostado.
Só para constar, este tutorial também está presente no site www.mxstudio.com.br, pois também sou
colunista de lá.
Um abraço a todos.
http://www.webtutoriais.com/open.php?cut=5470
Dreamweaver - Como criar um formulário
CRIANDO UM FORMULÁRIO
1 coloque o ponto de inserção onde o formulário devera ser exibido.
2. Escolha inserir >formulário ou seleccione a categoria formulário na barra inserir e clique
no ícone de Formulário Ou ainda seleccione na barra Inserir a guia Formulário.
O Dreamweaver inserirá o formulário. Com a página no modo de visualização do projecto, os
formulários são indicados por um contorno pontilhado em vermelho.
Dica
Se este contorno não estiver visível, verifique se a opção Exibir > Auxílios visuais >Elemento
invisível está seleccionado.
3 . Na janela do documento, clique no contorno do formulário para seleccionar o formulário
ou seleccionar a tag , no selector de tags situado no canto inferior esquerda da janela do
documento.
Propriedades do formulário
O inspetor de propriedades será exibido como abaixo:
A - Acção - Identificar o aplicativo do servidor que processa as informação do formulário,
especificadas como URL. Clique no ícone da pasta, para localizar o aplicativo, ou digite o
caminho correspondente a ele, também é possível a digitação de um email.
B - formulário - Defina o nome do formulário.
C - Método - Define a maneira como serão processados os dados do formulário. Segue
abaixo as opções;
. Get; Anexa o valor á URL que solicita a página.
. Post; Incorpora os dados do formulário á solicitação http.
. Padrão; Utiliza a definição padrão do navegador para enviar os dados do formulário ao
servidor Normalmente, o padrão utilizado é o método GET.
D - Tipo de Codificação - permite especificar o tipo de codificação
MIME dos dados enviados ao servidor para processamento.
Inserindo objectos em um formulário
Para adicionar um objeto de formulário necessário que o ponto de inserção esteja
Dentro dos limites do formulário (clique com o mouse dentro da área pontilhada vermelho),
seleccione o Menu Inserir e na clique na opção Objectos de Formulário.
Porém, a maneira mais prática de se inserir objectos em um formulário é utilizando a barra
Inserir, como segue abaixo:
A-Campo de texto-coloca um campo de texto no ponto de inserção. Defina o nome, tamanho
e valor inicial no inspector de propriedades.
B- Campo oculoto - coloca um campo oculto no ponto de inserção. Defina o nome e valor no
inspector de propriedades
C-Área de texto - insere um campo de texto com várias linhas no ponto de inserção.
D - Caixa de seleção e botão de rádio - colocam os controles correspondentes no ponto de
inserção. Defina o nome, valor quando seleccionado e o estado inicial no inspector de
propriedade.
E - Grupo de botões de rádio inserir um grupo de botões de opções no ponto de inserção.
F - Menu de lista - coloca uma lista ou menu pó-up no ponto de inserção. 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 inserção. A escolha de
um valor nesse menu levará o usuário á URL. Defina a lista de valores na caixa de diálogo
que for exibido.
H - Campo de imagens -coloca um campo imagens no ponto inserção 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 inserção.
Defina o nome, tamanho e valor inicial no inspetor de propriedades.
J - Botão coloca um botão com nome e value padrão Enviar no ponto de inserção.
Para inserir um botão, coloque o ponto de inserção dentro dos limites de um formulário, os
botões situados fora dos formulários não aparecerão em todos os navegadores. Utilize o
inspetor de propriedades para definir o nome, identificador e a ação. Identificador é uma
maneira de associar estruturalmente o identificador do texto ao campo.
k-Conjunto de campos é uma tag de contenção para um grupo lógico de elementos do
formulário.
Criação de nomes de salto
Um menu de salto é um menu pop-up em um documento, visível aus usuários do site, que
lista as opção 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
electrónico, links a imagem ou a qualquer tipo de arquivo que passa ser aberto em um
navegado.
Um menu de salto contém três componentes básico;
. Um aviso de selecção no menu, como uma descrição da categoria para os itens do menu,
ou instrução, Por exemplo; Escolha uma opção (Opcional)
Uma lista de itens de menu vinculados; um usuário escolhe uma opção e um documento
Um botão Ir (Opcional)
A - Clique no botão com o sinal de adição (+) para adicionar um item de menu.
B - Clique novamente no botão para incluir outro outros itens de menu. Seleccione um item
de menu e clique no botão com sinal de subtracção(-)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 selecção no menu, como "Escolha uma opção", digite o texto da
Selecção no campo Texto para o primeiro item de menu.
E - Na caixa de texto Após 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 localização onde o arquivo será
aberto;
A opção 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 opções, seleccione inserir o botão ir após o menu para adicionar um botão ir em vez
de aviso de selecção no menu
J - Em Opções, escolha Seleccionar o primeiro item após a alteração da URL, se for utilizado
um aviso de selecção no menu ( como "Escolha uma opção")
ENVIANDO UM FORMULÁRIO VIA e-mail
Para enviar os dados de um formulário para um endereço de email, faça como indicado
abaixo:
Clique no campo de formulário (em sua linha vermelha), selecione no inspetor de
propriedades o método post e coloque o email de destino na opção ação.
Observação
Os dados do formulário serão enviados utilizando-se o sorftware de correio que estiver
configurado na máquina
Dreamweaver - como adicionar música no site
Link para áudio
A incorporação de áudio encaixa o aparelho de reprodução de som directamente na página,
mais o som só será excluído se os visitantes do seu site contarem como o plug-in apropriado
ao arquivo escolhido. Incorpora os arquivos, se desejar, utilizar o som como música de fundo
ou se desejar mais controle sobre a própria apresentação de som.
Para inserir um link de áudio, faça 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 botão
procure para encontrá-lo.
Arquivos de áudio embutidos
Embutido um arquivo de áudio em sua página será aberto um software para reprodução
Do arquivo (media player, por exemplo),mais o arquivo somente será reproduzido se o
usuário possuir plug-in para o software instalado em seu browser.
Lembrando que, esse arquivo de áudio também 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 usuário poderia controlar o arquivo através do software que o está
reproduzindo.
Para embutir arquivos de som em uma página, faca como abaixo.
1.Clique no Menu Inserir
2.Selecione a opção Mídia
3.Clique em Plu-ln
4.Na caixa de diálogo que será exibida, seleccione o arquivo de som ao qual se deseja
embutir na página, caso o arquivo não esteja gravado em uma pasta de site Dreamweaver
solicitará o arquivo a ser copiado.
Dica
A Barra Inserir possui um atalho para inserir Mídia, veja;
Observe agora qual a aparência da mídia inserida no Dreamweaver MX;
Já a aparência no navegador do áudio embutido é esta;
Dica
No inspector de propriedades existe uma caixa uma caixa chamada Url do Plug-In, digite o
endereço da página onde é possível fazer o download do programa necessário para a
reprodução do arquivo embutido.
Dreamweaver - como criar mapas de imagens
CRIANDO MAPAS DE IMAGENS
Um mapa de imagens é uma imagem que serve como dispositivo de navegação. Com um
mapa de imagens, é possível. Criar multimídia ponto activo (área clicáveis) em uma única
imagem e vincular cada ponto activo a uma URL diferente ou arquivo a ser aberto. É possível
também 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 expansão do inspector de propriedades ( na extrema direita inferior da
página, dentro do inspector de propriedades ) e observe as opções;
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 opções:
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 visualização na página. Cor da Imagem Cambiável; cor que será
exibida quando o mouse deslizar por sobre a imagem.
C - TEXTO - digite o texto que aparecerá no botão.
D - LINK- página que aparecerá quando clicarem por sobre a imagem.
E - DESTINO- definição de onde a página será aberta.
F - COR DE FUNDO - definição da cor de fundo do botão.
G - SALVA COMO - especificação do local onde ficará gravado o texto flash.
DICA
Para testar o texto flash, siga os mesmos passos para testar o Botão flash.
Como criar botões em flash com o dreamweaver
O objecto de botão Flash é um botão actualizável baseado em um modelo Flash. É possível
personalizar um objecto de botão Flash, adicionando texto, cor de fundo e links para
outros arquivos. É possível inserir botões Flash durante o trabalho na visualização do
projecto ou na visualização do código.
DICA
É necessário salvar os documentos antes de inserir um objecto de botão ou texto Flash.
Para obter Botão Flash deve-se clicar no menu inserir, seleccione a
opção imagens interactivas > Botão Flash, uma caixa, como abaixo, será exibida;
A-AMOSTRA-exibe um exemplo do estilo seleccionado.
B- ESTILO - lista de botões pré-definidos, para visualizá-lo observe a caixa Sample.
C- TEXTO DO BOTÃO- texto que aparecerá na parte de cima do botão.
D -FONTE- seleccione o tipo de letra a ser utilizada.
E - Link_ endereço (URL),que será aberto quando o usuário clicar sobre o botão.
F - Destino - quando o link será aberto.
G- Cor de Fundo - Cor atribuída ao fundo do botão. (de preferência a cor do fundo da
página).
H - salvar como - especifica o nome do botão e onde será gravado
Dica
Para testar o botão inserido, clique sobre o mesmo, vá até o inspector de propriedades e
escolha a opção Executar, para finalizar ainda no inspector de propriedades, seleccione a
opção Parar.
Dreamweaver - como inserir imagens
Neste tutorial vamos mostrar como inserir imagens.
Como inserir imagens
As imagens costumam ser utilizadas para indicar interfaces gráficas (como botões de
navegação), apelo visual (por exemplo; fotografias) ou elementos de design interactivos,
como imagens cambiáveis ou um mapa de imagens.
No Dremweaver MX, é possível é possível trabalhar visualização do projecto ou do código
para inserir imagens em um documento. Ao adicionar imagens em um documento, é possível
definir ou modificar propriedades da imagem e exibir as alterações directamente na janela do
documento.
Para inserir imagens no Dremweaver seleccione o Menu Inserir e seleccione Imagem,
existindo também a opção da barra Inserir. Na caixa de diálogo 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 capítulo anterior, nem todos os tipos (extensões) de imagens poderá
se utilizados pelo Dreamweaver, os mais utilizados são GIF, e PNG.
Propriedades da imagem
Ao seleccionar uma imagem o inspector de propriedades, passara a exibir as informações 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- Opção que permite que seja exibida uma frase quando o usuário permanece com o
mouse posicionado alguns segundos em cima da imagem no navegador.
D-ALINHAR-alinhamento do texto em relação à imagem.
E-ALINHAMENTO-do texto em relação ao documento.
F- BORDA- configuração da espessura da borda da imagem.
IMAGEM CAMBIÁVEL
Uma imagem cambiável é 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 primária (exibida
quando a página for carregada pela primeira vez) e a imagem secundária (que será exibida
quando o cursor for deslizado sobre a imagem primária). As imagens cambiáveis deverão ter
o mesmo tamanho; caso contrário, o Dreamweaver redimensionará automaticamente a
segunda imagem para que coincida com as propriedades da primeira.
Para inserir uma imagem cambiável no documento deve-se clicar no Menu Inserir (ou utilizar
a barra inserir ), seleccionar o item imagens Interactivas e clicar na opção Imagem
cambiável, seguinte caixa de diálogo será exibida:
A -NOME DA IMAGEM - dê um nome para o conjunto de imagens. (imagem cambiável)
B- IMAGEM ORIGINAL - clique no botão procurar e seleccione a imagem que aparecerá
inicialmente, no navegador.
C- IMAGEM CAMBIÁVEL- clique no botão procurar e seleccione a imagem que substituirá a
imagem original.
D - QUANDO TIVER CLICADO, VÁ PARA A URL - digite o nome dá página a ser visitada
quando o usuário clicar na imagem cambiável.
Dreamweaver - Construir um site do início
Propriedades da página
Quando criamos páginas no Dremweaver, temos que definir algumas coisas básicas, tais
como; plano de fundo, cores dos textos e dois links, etc. Para isso clique em Modificar e
seleccione a opção Propriedades da página, ira aparecer uma caixa como abaixo;
A - Titulo - É o nome que aparece na barra de título do navegador, a página for carregada.
B-Imagem de Fundo-Uma imagem pode ser seleccionada para compor o fundo da página.
C-Fundo - Permite que seja escolhida a cor de fundo da página.
D- Texto- Define a cor do texto
E-Links - Define a cor utilizada para os links da página.
F-Margens - Define as margens da página.
Como trabalhar com textos
Trabalhar com textos é uma tarefa bastante simples. Há várias formas de adicionar texto a
um documento, do Dreamweaver. É possível digitar texto diretamente na janela do
documento, recortar e colar ou importar texto de outros documentos.
Sempre que digitarmos um texto no Dreamweaver, suas opções de formatação ficam
registradas no inspetor de propriedades, como segue abaixo;
A- Formato- Permite aplicar estilos em títulos.
B- Fonte- Opções de vários tipos de fonte para a formatação de texto. Porém, nem todas as
fontes armazenadas no computador são visualizadas automaticamente pelo Dreamweaver, se
a fonte desejada não estiver na lista seleccione a última opção 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 - Itálico (Italic)
G - Alinhamentos (esquerda, centralizado, direita e justificado)
H - Marcadores e Numeração
I - Aumentar/ Reduzir recuo do texto.
ESTILOS HTML
Ao configurar estilos HTML podem, é possível aplicar com rapidez e consistência formatação
de fonte ao texto de documentos,
Os estilos HTML podem consistir em um único ou em vários atributos de tag de fonte
HTML, como cor, tamanho da fonte, tamanho, bem como outros atributos de formatação
como negrito ou itálico. Por exemplo; é possível criar um estilo HTML para texto que é Arial,
tamanho 4+, verde e itálico. Depois, é possível 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 opção Estilos HTML
Ao lado direito (nos painéis) aparecerá o painel como abaixo;
A - Remove formatação que porventura, já tenham sido aplicadas a um texto do documento
activo.
B - Para criar um novo estilo clique no botão como indicado, escolha a opção Nova, a
seguinte caixa será exibida;
A -Nome - Atribui um nome, escolhido pelo usuário, ao estilo criado.
B - Aplique a - Indica onde deverá ser aplicado o estilo criado se a um texto selecionado ou a
um parágrafo 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 Itálico
G - Formato - Só estará disponível se o usuário estiver criado um estilo para um parágrafo, é
utilizado para escolher um nível de cabeçalho.
H - Alinhamento - Alina o estilo da maneira, mas conveniente ao usuário (esquerda direita ou
centralizada).
Criar janela POP-UP
Quem é que gosta dos chamadas Janelinhas Pop-up? Os Pop-ups tem se tornado um dos
campeões de chateações do mundo da Internet e para driblar essas chateações 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 botão que ao clicar em fechar , após um tempo
determinado ela "vai desaparecendo" (Efeito Fade) para o usuário. Ou podemos fazer com
que a camada já apareça transparente. Esse recurso só funcionará se você tiver no seu DW o
comportamento "Opacity Suite". Caso não possua esse comportamento baixe-o
OBS: É recomendável um conhecimento sobre camadas e comportamentos do DW. Veja a
matéria que falo sobre esses recursos super úteis do DW.
Bom então mãos a obra.
Crie uma imagem no Fireworks ou em um programa gráfico de sua preferência e exporte-a
com o formato "gif" ou "jpeg".
Inserimos na página aonde queremos que apareça a popup, uma camada "Menu Inserir
Camada". Seleccione a camada e altere as propriedades de modo que a opção "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 (visualização total) , em "Final Opacity" insira 0 (zero - visualização nula) e em
"Speed" insira a velocidade do efeito (no exemplo este valor é 20). Clique em "OK". Não se
esqueça de configurar o evento para esse Comportamento sendo "onclick".
Com esse comportamento você pode também 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 página e colocar um link nessa imagem, mas não 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 página e colocar um link nessa
imagem, mas não 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 página. Pra fazer isso, basta ir em Insert >>
Image (meu Dreamweaver é em Inglês).
Aparecerá uma janela, basta escolher a imagem, ou colocar a URL da figura na janela.
2º Em cima da página, existem três abas: Code, Split e Design. Escolha "Design", para
visualizar sua página.
Na aba design, clique com o botão direito na figura, e seleccione a última opção, Properties
(Propriedades).
3º Aparecerá o inspector de Propriedades. Observe que há um quadrado, um circulo e um
Polàgono. 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, faça
isso manualmente no código 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 2ºbrowse.
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 botão “Verduras 1”.
32. Clique no sinal “+” da paleta Behaviors.
33. Seleccione a opção “Show Pop Up Menu”.
34. Aparecerá a caixa de diálogo abaixo:
35. As guias Appearance e Advanced, tratam da formatação da aparência do menu,
use-as como quiser, depois de formatar clique na guia Position para definir em que posição
aparecerá o menu em relação ao botão que o activa.
36. Clique em OK e seleccione o outro botão.
37. Repita para este botão os itens, 32, 33, 34 e 35.
38. O último passo é alterar o target que está _blank para conteúdo que é o nome
do nosso IFRAME, para fazê-lo rapidamente, acesse a vizualização de código do
Dreamweaver e clique no menu Edit/Find and Replace.
39. Mande localizar _blank e substitua por conteúdo.
