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!

Endereço de Email:

Não perca os artigos anteriores:

Adobe Dreamweaver CS5

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 <img> :

<img src="fonte_da_sua_imagem.jpg">

A tag <img> 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á!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos

RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz