Anda di halaman 1dari 7

Actividades

IV
Desenvolvimento de
Projectos Educativos
em H.T.M.L.

Converter o bloco de links da página pessoal


de texto para gráfico utilizando o Paint Shop
Pro 4 e o MapEdit para mapear a imagem de
forma activar os links já existentes.
Substituição no Terràvista da página
index.html

Na sua página pessoal encontra-se presentemente a seguinte informação,


escrita em modo texto:

Profissão (link para profiss.htm)


Conhecimentos Específicos (link para conhesp.htm)
Interesses
Profissionais (link para profiss1.htm)
Hobbies (link para hobbies.htm )

Com o conjunto de actividades que se segue, a informação presente será


substituída por uma imagem mapeada por forma a oferecer os mesmos links.

1. Instale ou abra o Paint Shop Pro 4 e no menu FILE escolha a opção


NEW. Na janela NEW IMAGE coloque todos os valores iguais ao
apresentados na fig 2. E pressione de seguida o botão OK.

 

Ficará com uma janela de trabalho ocupada por uma área branca:

1
Desenvolvimento de
Projectos Educativos
em H.T.M.L.
2. No círculo assinalado na imagem escolha a cor azul para o rectangulo que
indica a cor de fundo e a cor branca para o que indica a cor da tinta.

3. Escolha a ferramenta balde de tinta e escolha as opções: MATCH MODE:


RGB value; TOLERANCE: 20; FILL STYLE: Linear Gradient.
Pressionando o botão OPTIONS escolha a direcção horizontal (90º) para
a variação da cor.

4. Troque as cores da tinta e do fundo clicando na marca

5. Encha a área da imagem com a cor azul - fazendo um degradé de azul


até branco.

6. Salve a imagem obtida com o formato JPG e o nome de IMGZERO

2
Desenvolvimento de
Projectos Educativos
em H.T.M.L.

7. Crie um a nova imagem com as dimensões: 15 x 15 e encha-a com a cor


amarela uniforme (FILL STYLE: solid), e salve-a na sua disquete de
trabalho com o nome AMARELO.JPG

8. Crie um a nova imagem com as dimensões: 10 x 10 e encha-a com a cor


vermelha uniforme e salve-a na sua disquete de trabalho com o nome
VERMELHO.JPG

9. Crie um a nova imagem com as dimensões: 100 x 15 e encha-a com a cor


azul uniforme, selecione a opção de texto (arial bold - 12 - Antialias) e
escreva Profissão. Centre o texto e guarde esta imagem na sua disquete
de trabalho dando-lhe o nome PROFISSAO.JPG

10. Repita a mesma acção digitando o texto Interesses e salve a imagem


resultante com o nome INTERESSES.JPG na sua disquete de trabalho.

11. Crie um a nova imagem com as dimensões: 100 x 15 e encha-a com a cor
azul uniforme. Selecione a opção de texto com as características: arial
bold, italico, 11, antialias e escreva "profissionais". Centre este texto e
guarde esta imagem na sua disquete de trabalho com o nome
PROFISSI.JPG
12. Repita a actividade anterior, digitando em arial bold, italico, 11, antialias o
texto "hobbies" e salve a imagem resultante com o nome HOBBIES.JPG
na sua disquete de trabalho.

3
Desenvolvimento de
Projectos Educativos
em H.T.M.L.
13. Crie um a nova imagem com as dimensões: 250 x 15 e encha-a com a cor
azul uniforme. Selecione a opção de texto (arial bold 12) e escreva
"Conhecimentos Específicos". Centre o texto e salve esta imagem como
CONHECI.JPG

14. Neste momento podemos começar a montagem final da nossa imagem


que ficará com o aspecto da figura seguinte. Neste processo basta usar a
sequência de comandos COPY - PASTE.

15. Guarde a imagem resultante na sua disquete de trabalho, dando-lhe o


nome GRAFICO1.JPG

16. Com o NETSCAPE COMPOSER edite o ficheiro index.html apagando


nele todo o texto e insira a imagem do ficheiro GRAFICO1.JPG. Centre
esta imagem.

17. Salve o ficheiro index.html

18. Saia do NETSCAPE COMPOSER e inicie uma sessão de trabalho com o


programa de mapeamento de imagens MapEdit(*).

19. Na janela de diálogo que surge assim que o programa se inicia, indique o
nome do ficheiro HTML que contém a imagem que deseja mapear,
escolhendo de seguida o nome desta, de entre todas as que se possam
encontrar referenciadas no documento HTML.

(*)
Ver Parte V do Tutorial - Autoria em World Wide Web

4
Desenvolvimento de
Projectos Educativos
em H.T.M.L.

20. Edite a imagem, definindo as áreas que pretende que constituam os links
com o auxílio das ferramentas de desenho assinaladas na figura seguinte:

5
Desenvolvimento de
Projectos Educativos
em H.T.M.L.

21. Para cada área definida, indique o URL desejado (neste caso, os ficheiros
HTML definidos anteriormente)

22. Repita este procedimento até definir todos os links e abandone a


aoperação do MapEdit tendo o cuidado de gravar o ficheiro index.html

23. Abra de novo o NETSCAPE NAVIGATOR e consulte o código HTML que


foi gerado automaticamente pelo MapEdit.

24. Verifique a funcionalidade dos links que definiu.