Usando imagens no Dreamweaver

 

Objetivos:

 

Ensinar como usar imagens em seu Dreamweaver, criar mapas de imagens e álbuns de imagens.

 

Autor: Carlos Vitor de Castro

 

Para inserir uma imagem no Dreamweaver, clique no menu Insert/Image. Vale lembrar que a iamgem deve estar na mesma pasta, dos arquivos .HTM ou numa sub-pasta dos seus arquivos .HTM.

 

 

Ou use o botão Images da barra Common.

 

 

Depois de inserida a imagem, podemos usar a Barra de propriedades para alterar seus atributos.

 

Modificando a largura e a altura da imagem

 

Altere a largura e a altura da imagem, no local apontado na imagem abaixo.

 

 

Depois de alterar largura e altura, os valores ficam em negrito para avisá-lo que aquele não é o tamanho original da imagem.

 

 

Clique no lugar indicado pela seta para restaurar os valores de largura e altura, ou em cima da letra “W” para restaurar só a largura e em cima da letra “H” para restaurar só a altura.

 

Alterando o texto alternativo da imagem

 

Texto alternativo é aquela descrição que aparece em cima de algumas imagens na web quando posicionamos o mouse sobre elas.

 

Selecione a imagem e altere seu texto alternativo no local indicado abaixo.

 

 

Quando sua página estiver no ar, o texto alternativo aparecerá assim:

 

 

Inserindo uma borda na imagem

 

Para inserir uma borda na imagem, digite a espessura da borda em píxels no local descrito abaixo.

 

 

Resultado

 

 

Fazendo um texto contornar a imagem

 

Vamos usar recursos de alinhamento de imagem para fazer com que um texto a envolva, vamos alinhar a imagem à direita e à esquerda do texto.

 

Com a imagem inserida digite ou cole um texto com pelo menos 10 linhas ao lado da imagem.

 

Selecione a imagem e altere seu Align para Left.

 

 

Resultado

 

 

Experimente o alinhamento Right também.

 

Se você achar que o texto ficou muito próximo da imagem, podemos aumentar esta distância modificando os atributos HSPACE e VSPACE na barra de Propriedades.

 

 

Resultado

 

 

Usando uma imagem como link

 

Para fazer com que uma imagem se torne um link, selecione-a e digite o nome da página a ser aberta na caixa Link.

 

 

Depois que transformamos uma imagem em link, automaticamente aparece uma borda na imagem, por padrão, esta borda terá a cor azul se o link ainda não tiver sido visitado e púrpura se já tiver sido visitado, se você quiser remover esta borda, altere o valor de Border para 0 (zero) na barra de propriedades.

 

 

Criando um mapa de imagens

 

Um mapa de imagens é um recurso que permite fazer com que apenas um trecho da imagem seja transformada em link.

 

Selecionando sua imagem no Dreamweaver aparecerá em baixo à esquerda de sua barra de propriedades os botões com as formas de mapas de imagem, como mostra a figura abaixo.

 

 

Onde:

 

 

Selecione o mapa retangular e desenhe um retângulo em cima de sua imagem, um pequeno retângulo.

 

 

Com o mapa selecionado, digite a página ou o site que abrirão a partir do link mapeado.

 

 

Criando um álbum de imagens

 

Um álbum de imagens é uma daquelas páginas com miniaturas de imagens que quando clicadas exibem a imagem em outra página em tamanho grande.

 

Para testar este exercício, crie uma nova pasta e coloque pelo menos 10 imagens dentro dela, esta página só pode conter arquivos de imagem e todas as imagens que ai estiverem aparecerão no álbum.

 

1. No seu Dreamweaver crie um novo arquivo.

 

2. Clique no menu Commands/Create web photo álbum.

 

 

3. Quando clicar em OK, o Fireworks será aberto para fazer o trabalho de criação dos arquivos miniatura das imagens, no término do trabalho aparecerá a caixa de diálogo abaixo:

 

 

Resultado:

 

 

Salve seu arquivo e pressione F12 para ver o resultado.

 

O Dreamweaver criou uma página chamada index.htm dentro da pasta principal, e uma página .HTM para cada imagem grande dentro da sub-pasta Pages, é importante que você dê uma olhada na estrutura das pastas criadas e o seu conteúdo para ter uma idéia melhor do trabalho que seu programa fez para você.