Guia Dreamweaver – Como Começar? (Parte IV)

Dreaweaver é um programa completo para o desenvolvimento e gestão de websites, que trabalha com tecnologias como HTML, XHTML, CSS, Javascript e PHP, entre outros. Um detalhe importantíssimo que Dreamweaver tem, é que se você começou a fazer o seu website em um outro programa qualquer, não terá de começar de novo se pretender mudar para Dreamweaver – O programa não irá destruir/alterar o código que você criou! Nesta quarta parte do Guia Dreamweaver, vamos-lhe mostrar como perceber e trabalhar com imagens dentro desta aplicação. Está pronto para começar?

Nesta quarta parte do Guia Dreamweaver, vamos-lhe continuar a mostrar como dar os primeiros passos na criação da sua página web, fazendo a introdução ao trabalho com imagens em Dreamweaver. Quer receber este e outros conteúdos no e-mail? Insira o seu e-mail abaixo e subscreva!

A velha máxima que diz que uma imagem vale mais que mil palavras nunca fez tanto sentido como nos dias de hoje. Numa altura em que a web se baseia maioritariamente em imagens, criações de alta qualidade com criatividade e muita inspiração são uma constante numa era digital em que uma imagem vale cada vez mais. Que o digam os designers desta era  que constroem as suas páginas web baseadas maioritariamente em imagens, criando um efeito visual fantástico e atrativo para os visitantes. É isso que se pretende numa página web, que o visitante goste do que vê e volte mais tarde, volte amanha, depois de amanhã e por aí adiante. Se você não é tão adepto do uso de imagens com tanta frequência, continuará a necessitar de saber trabalhar com elas em Dreamweaver e neste Guia Dreamweaver – Como Começar (Parte IV) vamos-lhe indicar como o fazer correctamente.

1. ADICIONAR IMAGENS

Se é da velha escola gosta de escrever o seu código manualmente, uma demonstração de conhecimento e natureza pela programação web. Para os novatos que querem adicionar imagens manualmente, o processo é simples, utilizando a tag :

1	<img src="fonte_da_sua_imagem.jpg">

A tag por natureza indica ao navegador que estamos a inserir uma imagem, e a propriedade “src” indica o caminho para a imagem. É um processo simples que não rouba muito tempo.

Se pretender inserir uma imagem através dos menus, escolha uma zona da sua página web onde quer inserir a imagem e de seguida clique no menu Inserir -> Imagem. Note que os formatos WEB são .GIF, .JPG e .PNG

Depois de escolher a imagem em questão, clicar em OK.

2. ADICIONAR UM POSICIONADOR DE IMAGENS

É possível adicionar imagens utilizando também um posicionador de imagens. Um posicionador de imagens é nada mais nada menos do que um sítio onde você poderá colocar a imagem, um género de divisória.

Para adicionar um posicionador de imagens, clique em Inserir -> Objetos de Imagem -> Alocador de espaço de imagem.

Depois irá abrir uma janela onde irá inserir alguns dados: Nome do posicionador, largura e altura, cor e texto alternativo. Preencha de acordo com o necessário e de acordo com a sua preferência. Clique em OK para continuar.

Neste momento já temos o nosso posicionador de imagem criado.

O próximo passo é colocar uma imagem. Para inserir uma imagem, vá até ao campo “Orig” nas propriedades e clique na pasta para procurar o ficheiro.

Seleccione o ficheiro e clique em OK.

O posicionador de imagem será ajustado automaticamente de acordo com o tamanho da imagem. Se pretender pode adicionar um link no campo “Link” por baixo do campo “Orig”.

3. IMAGEM DE SOBREPOSIÇÃO

Uma imagem de sobreposição é uma imagem que será substituída por outra mediante uma condição. São especialmente usadas para botões, em que quando o rato passa por cima, a imagem é substituída por outra instantaneamente, criando a ilusão de estar a clicar num botão real. No entanto a sua utilização não se prende somente a esse caso, podendo ser utilizada sempre que necessitar ou quiser trocar uma imagem por outra. Outro exemplo em que pode ser utilizada esta técnica é em páginas web de lojas, você tem uma imagem de um produto e quando o visitante passa com o rato em cima da imagem do produto, você troca a imagem por outra igual mas com um texto a dizer “Compre agora!”. Existem variadíssimas opções para utilizar as imagens de sobreposição. Para utilizar, siga o exemplo abaixo:

Neste exemplo vamos apenas trocar a imagem da Escola Criatividade pela imagem da Escola Dinheiro quando o rato passar por cima.

Primeiro passo é ir no menu Inserir -> Objetos de Imagem -> Imagem de Sobreposição

De seguida preencha os campos de acordo com a sua preferência, indicando qual a imagem original e qual a que vai sobrepor. Clique OK

E já temos uma sobreposição de imagens feita com sucesso. Para ver o resultado prima F12, e se ainda não guardou o ficheiro, guarde-o, é um passo necessário.

Eis o resultado:

ESTÁ A ACOMPANHAR?

Não perca a continuação deste artigo, deixe o seu feedback com um comentário, subscreva a nossa newsletter gratuita e receba os próximos conteúdos diretamente na sua caixa de email.

Abraço e até já!

Posted in: Aulas Tutorias,Tutoriais