AGRUPAMENTO DE ESCOLAS DE ALMEIRIM

CURSO PROFISSIONAL: TÉCNICO DE MULTIMÉDIA

Ano letivo
DISCIPLINA: TÉCNICAS MULTIMÉDIA | MÓDULO 4 2018/2019

2.ºANO

Nome: _____________________________________________ Nº_______ Turma: ______

Ficha nº11
Objetivos específicos da sessão: Inserir e modificar as propriedades das imagens;
recortar e controlar a luminosidade e o contraste de uma imagem; criar um efeito de
rollover com imagens.

As imagens são geralmente utilizadas para adicionar uma componente gráfica às

interfaces, tais como, botões de navegação, fotografias, elementos interativos do género de
imagens e rollover ou um mapa de imagem. Na construção de páginas para a internet,
geralmente são utilizados três formatos de imagens que são visualizados pela maioria dos
browsers:

Gif (Graphic Interchange Format) – É um dos mais populares formatos de imagens na

web. Permite ter um máximo de 256 cores. Este formato é indicado para cartoons, logos,
imagens com áreas transparentes e animações;
JPEG (Joint Photographic Experts Group) – Foi desenvolvido especificamente para
fotografia e imagens de alta qualidade. Suporta imagens com milhões de cores (24 bits).
Este formato é indicado para imagens obtidas a partir do scanner, imagens que utilizem
texturas e gradientes e imagens que necessitem de mais que 256 cores;
PNG (Portable Network Graphic) – Formato de imagem versátil, no entanto, nem em
todos os browsers é possível visualizar imagens neste formato. Pode apresentar milhões
de cores (323 bits) e suporta transparência.

Inserir uma imagem

Quando insere uma imagem num documento, o Dreamweaver gera automaticamente
uma referência ao ficheiro da imagem no código HTML. Para assegurar que esta
referência está correta, o ficheiro da imagem deve estar no mesmo local do site ou
numa subpasta de imagens do site. SE não estiver na mesma pasta e não tiver sido
configurada uma pasta para guardar as imagens, o Dreamweaver pergunta se
pretende copiar o ficheiro para a mesma pasta do site.
Após optar por copiar a imagem será solicitado o local onde pretende guardar a
mesma.

Exercício nº1
Para inserir uma imagem numa página deverá:
 1. Posicionar o cursor no local onde pretende inserir a imagem.
2. Na barra de menus, escolher Insert seguido da opção Image.
3. Entretanto surge uma caixa de diálogo.
4. Em Select file name from selecionar a opção File system para inserir uma
imagem a partir de um ficheiro.
5. Escolher a imagem que pretende inserir na página.
6. Pressionar o botão OK.
7. Entretanto surge uma caixa de diálogo para configurar as opções de
acessibilidade da tag da imagem, nomeadamente texto alternativo e o URL de
um ficheiro que permite obter mais informações sobre a imagem.
Se não for introduzida nenhuma informação e pressionar no botão Cancel, a
imagem aparece no documento, mas o Dreamweaver não configura opções de
acessibilidade.

8. Pressionar o botão OK.

Inserir uma imagem placeholder

Uma imagem placeholder é um gráfico utilizado antes de ter a imagem final disponível
para inserir na página.

Exercício nº2
Para inserir um image placeholder deverá:
1. Posicionar o cursor no local onde pretende inserir o image placeholder.
2. Na barra de menus, escolher Insert seguido da opção Image Objects e o
comando Image Placeholder.
3. Entretanto surge uma caixa de diálogo para configurar os parâmetros do
objeto.
4. Em Name, deve atribuir um nome para o objeto (não utilizar acentuação nem
espaçamentos, assim como não deve começar o nome por um número).
5. Definir a largura e a altura em pixels nos parâmetros Width e Height
respetivamente.
6. Em Color, especificar uma cor de fundo.
7. Em Alternate Text, pode optar por definir um texto alternativo.
Página 2 de 7
 8. Pressionar OK.
Para substituir a imagem placeholder pela imagem final que pretende que fique no
documento, deverá fazer duplo clique sobre a image placeholder e depois selecionar a
imagem que pretende inserir.

Propriedades de uma imagem

Depois de inserir uma imagem, pode selecioná-la e, no painel Properties, visualizar as
seguintes propriedades:

W e H – Largura e altura da imagem em pixels;

Src – Localização da imagem;
Link – Especifica uma hiperligação para a imagem;
Alt – Especifica um texto alternativo;
Edit – Executa o programa associado ao ficheiro da imagem para ser editada. Estão
também disponíveis outros comandos de edição de imagem, tais como, otimização,
corte, escalonamento, luminosidade e contraste;
Class – Aplicação de um estilo CSS;
Map e ferramentas Hotspot – Permitem criar um mapa de imagem;
V Space e H Space – Cria um espaçamento em pixels na vertical e na horizontal;
Target – Especifica o frame ou a janela na qual a hiperligação deverá abir. A opção
_blank abre a hiperligação numa nova janela do browser; _parent abre a hiperligação
no mesmo frameset ou na mesma janela que contém a hiperligação; _self abre a
hiperligação no mesmo frame ou na mesma janela; _top abre a hiperligação numa
janela do browser ocupando todo o ecrã (fullscreen) e eliminando os frames;
Low Src – Especifica uma imagem que deverá aparecer antes de a imagem principal
ser carregada;
Border – Limite em pixels da imagem;
Align – Alinhamento da imagem.

Página 3 de 7
Alinhar uma imagem
Para alinhar uma imagem selecionada, deverá utilizar a função de alinhamento no
painel Properties onde pode encontrar os seguintes tipos de alinhamento da imagem
com os outros objetos:
Default – Geralmente especifica um alinhamento à linha base;
Baseline e Bottom – Alinha a base do texto (ou outro elemento no mesmo parágrafo)
ao fundo do objeto selecionado;
Top – Alinha a imagem ao item mais acima na linha atual;
TextTop – Alinha o topo da imagem com o topo do carácter mais alto na linha de
texto;
Absolute Middle – Alinha o meio da imagem com o meio do texto na linha actual;
Absolute Bottom – Alinha o fundo da imagem com o fundo da linha do texto;
Left – Alinha a imagem à esquerda;
Right – Alinha a imagem à direita.

Poderá ainda utilizar os botões de alinhamento no painel Properties para definir o

alinhamento da imagem na horizontal.

Redimensionar uma imagem

Depois de inserir uma imagem na página, pode ajustá-la em termos de tamanho. Para
tal, deverá selecionar a imagem e executar um dos seguintes passos:
 No painel Properties, ajustar os valores de largura e de altura;
 Arrastar os pontos do limite inferior, esquerdo ou do canto inferior direito da
imagem.

Ferramentas de edição de imagens

Depois de apresentadas as propriedades das imagens, existe algumas ferramentas
que permitem a edição de uma imagem diretamente no Dreamweaver ou através de
um programa de edição associado àquele tipo de imagem. Vamos então através dos
seguintes exercícios aprender a recortar imagens e controlar a luminosidade e o
contraste.

Exercício nº3
Ao longo deste exercício iremos aprender como recortar uma imagem no
Dreamweaver. Para tal, deverá efetuar os seguintes passos:
1. Selecionar a imagem que pretende recortar.
2. No painel Properties, ativar a ferramenta Crop.

Página 4 de 7
 3. Entretanto surge uma caixa a informar de que a ação que iremos fazer poderá
ser anulada através do comando Edit > Undo.

4. Pressionar o botão Ok.

5. Arrastar os pontos do limite inferior, esquerdo ou do canto inferior direito da
imagem para definir que pretendemos mantê-la visível.
6. Depois de definida a área, pressionar a tecla Enter para recortar a imagem.

Exercício nº4
Ao longo deste exercício iremos aprender como controlar a luminosidade e/ou
contraste de uma imagem diretamente no Dreamweaver. Para tal, deverá efetuar os
seguintes passos:
1. Selecionar a imagem que pretende ajustar.
2. No painel Properties, ativar a ferramenta Brightness and Contrast.

3. Entretanto surge uma caixa a informar de que a ação que iremos fazer poderá
ser anulada através do comando Edit >Undo.

4. Pressionar o botão Ok.

5. Entretanto surge uma caixa onde poderá controlar a luminosidade (brightness)
e o contraste (contrast) da imagem. Com a opção Preview activada, à medida
que faz o ajuste dos parâmetros poderá ver a sua aplicação direta na imagem.

6. Após efetuar os respetivos ajustes pressionar o botão Ok.

Criar um rollover
Página 5 de 7
Um rollover é uma imagem que, quando visualizada num browser, muda quando o
utilizador passa com o cursor do rato por cima. Consiste então em duas imagens: a
imagem inicial, apresentada quando a página é carregada, e uma imagem secundária,
que é visualizada quando o utilizador passa com o cursor do rato por cima da imagem
inicial. As duas imagens deverão ter o mesmo tamanho. Caso contrário, o
Dreamweaver ajusta a segunda imagem ao tamanho da imagem inicial. Geralmente o
rollover é utilizado para a criação de botões de navegação.

Exercício nº5
Para criar um rollover numa página deverá:
1. Posicionar o cursor no local onde pretende inserir o rollover image.
2. Na barra de menus, escolher Insert seguido da opção Image Objects e o
comando Rollover Image.
3. Entretanto surge uma caixa de diálogo.
4. Na caixa de texto Image name, inserir um nome para o rollover.
5. Em Original image, fazer clique em Browser… para selecionar a imagem
inicial que é apresentada quando a página é carregada.
6. Em Rollover image, fazer clique em Browse… para selecionar a imagem que
é visualizada quando o utilizador passa com o cursor do rato por cima da
imagem inicial.
7. Se quiser que a imagem de rollover seja carregada na cache do browser assim
que a página é carregada, activar a opção Preload rollover image.
8. Na caixa de texto Alternate texto poderá optar por escrever um texto
alternativo que aparecerá quando o utilizador passar com o rato por cima da
imagem.
9. Na caixa de texto When clicked, Go to URL definir a hiperligação que deverá
ser executada quando o utilizador fizer clique sobre a imagem de rollover.

10. Pressionar o botão Ok.

11. Para pré-visualizar o rollover no browser, na barra de menus, escolher File
seguido da opção Preview in Browser ou pressionar a tecla F12.

Página 6 de 7
 Bom Trabalho!

Professora:
Teresa Marcelino

Página 7 de 7