Mapeando imagens

Mapeando imagens com o Microsoft FrontPage 2002

Neste tutorial pretendemos mostrar como criar vários links para diferentes partes de um site usando uma imagem, através de uma ferramenta do Microsoft Front Page 2000 e posteriores.

Maiores informações sobre o programa podem ser obtidas em http://www.microsoft.com/brasil/produtos/display.asp?p=15.

Teremos como exemplo um pequeno mapa da Região Sudeste de nosso país, onde deveremos criar uma divisão entre os 4 estados (Rio de Janeiro, Espírito Santo, Minas Gerais e São Paulo) e então inserir links para diferentes destinos (páginas dentro do próprio site, outros sites, imagens, etc). Digamos que queremos fazer um site sobre notícias dos 4 estados da região. Então faremos um link em cada divisão da imagem para uma página com o conteúdo referente àquele estado.

Estando a trabalhar no Front Page, basta então habilitar a barra de ferramentas com as funções que precisaremos usar neste tutorial. Ela é a barra Figuras, que pode ser acessada no menu Exibir > Barras de ferramentas > Figuras.

Quando então clicarmos em uma figura qualquer no nosso projeto, surgirá a barra acima. Os botões envolvidos pela marcação em vermelho serão os usados. Com o botão em formato de seta faremos a seleção da figura a ser mapeada.

Com os botões em formas geométricas (retângulo, círculo e polígono) faremos a marcação dos pontos ativos (que são exatamente as regiões de divisão da imagem). Com o botão de seta e um pequeno retângulo azul podemos realçar tais pontos ativos.

Deveremos então clicar no botão de forma que desejamos usar e fazer a divisão da imagem. Como o mapa é de forma irregular, usaremos no exemplo o botão Ponto de acesso em forma de polígono.

Após clicarmos nele, iremos na imagem e escolheremos um vértice qualquer do "estado" para o qual queremos criar um ponto de acesso e percorreremos com o mouse todos os outros vértices, sempre clicando em cada um, para que então seja criado um vértice também no mapeamento.

Após criarmos o ponto de acesso para os estados do Rio de Janeiro e São Paulo, o resultado é o seguinte:

Bem, na figura acima vemos a marcação que foi feita por cima do mapa original. Vamos ver então somente a marcação do mapa para links:

Para inserirmos os links para cada estado devemos dar um duplo clique na região desejada. Será então aberta a seguinte janela:

No campo de endereço deveremos colocar o caminho que queremos que seja aberto. Podemos criar uma Dica de tela usando o botão de mesmo nome, para que um texto seja exibido quando o cursor do mouse é passado sobre esta área da imagem. No botão Quadro de destino... podemos escolher como será a abertura deste link (podemos definir que seja aberta uma nova janela, escolher um frame da página, abrir no lugar da página atual, etc).

Se quisermos inserir um link único para todo o resto da imagem, de forma que ao clicarmos foras dos mapas do Rio de Janeiro e de São Paulo também seja aberta uma nova página, basta repetirmos a operação acima, efetuando o duplo-clique em qualquer área não mapeada.

Para finalizar, vamos ver como ficaria nosso mapa ao passarmos com o ponteiro do mouse sobre o estado do Rio de Janeiro:

Como este exemplo foi criado a partir da primeira imagem do tutorial, ainda é possível ver o resultado do mapeamento que foi feito. Temos um link específico para os estados do Rio e de São Paulo, e um link único para todo o resto da imagem, que teoricamente abriria uma página com informações sobre Minas Gerais e Espírito Santo. Só não tente clicar na imagem, pois nada será aberto (é apenas um exemplo, lembrem-se ).

Transição de Páginas no FrontPage

Descrição

Como o próprio nome já diz, transição de página é o efeito que é exibido quando um visitante entra ou sai de um site ou página. Neste tutorial aprenderemos como criar esse efeito que, apesar de simples e rápido, deixa seu site ou suas páginas mais dinâmicas.

Criando Transição de Páginas
Crie sua página normalmente e depois aplique o efeito.

1. Clique no menu Formatar > Transição de página

Aparecerá a caixa de diálogo Transições de página

2. Em Evento, selecione quando o efeito será aplicado.

3. Em Duração (segundos), digite o tempo que o efeito levará para ser completado.

4. Em Efeito de transição, selecione o tipo do efeito.

5. Clique em OK

Você pode usar na mesma página, um evento/efeito para entrar na página e outro para sair. Para isso basta repetir os passos acima para cada evento/efeito.


Veja alguns exemplos:

Exemplo 01
Neste exemplo foi usado o Evento: Entrar na página e o Efeito: Geométrico

Exemplo 02
Neste exemplo foram utilizados dois eventos e dois efeitos.
Evento1: Entrar na página - Efeito1: Abrir círculo
Evento2: Sair da página - Efeito2: Revelar para baixo


Observação: o efeito funcionará somente quando a transição entre uma página e outra for feita na mesma janela. Ou seja, ele não funcionará se o link abrir uma nova janela.

Este efeito só é visto através do Navegador: a "aba" Visualizar do FrontPage, neste caso, não mostrará o efeito. Para vê-lo, salve sua página e clique no botão Visualizar no navegador na Barra de Ferramentas Padrão ou clique em Arquivo > Visualizar no navegador.

Use este efeito para destacar apenas algumas partes do site, como por exemplo, entrar e sair do site ou alguma página que queira destacar. Evite usá-lo indiscriminadamente, pois apesar de atraente à primeira vista, pode tornar-se cansativo afugentando os visitantes.

FrontPage Efeitos Dinâmico

Descobrindo os Efeitos de HTML Dinâmico do FrontPage

Descrição
HTML Dinâmico ou DHTML é uma nova tecnologia usada na Web que torna os elementos de uma página muito mais dinâmicos. Com o DHTML é possível dinamizar quase tudo que se encontra em uma página, como textos, imagens, links, posição do elemento, etc. Tudo pode ser mudado dinamicamente,graças ao DHTML. O DHTML dá a sua página maior interatividade, onde as imagens aparecem e desaparecem, textos voam...

Neste tutorial aprenderemos como criar esses efeitos usando o recurso disponível no FrontPage 2002/2003.

Criando Efeitos de HTML Dinâmico (DHTML)
1. Posicione o cursor do mouse no local onde você quer inserir o efeito.

2. Clique no menu Formatar > Efeitos de HTML Dinâmico, aparecerá a seguinte Barra de Ferramentas:

3. Em Ao, selecione um dos eventos (ação) disponíveis.

4. Em Aplicar, selecione um dos efeitos disponíveis e depois selecione o tipo de configuração.

5. Botão Realçar os efeitos de HTML Dinâmico . É aconselhável deixá-lo habilitado, dessa maneira poderemos ver exatamente onde está sendo aplicado o efeito. Sendo visível apenas na "aba" Normal.

Vamos ver como isso funciona na prática: clique aqui para abrir uma página com três exemplos


Observações:
- este tipo de efeito só é visto uma vez. Para revê-lo você deve clicar no botão "Atualizar" do navegador (ou na tecla F5)

- salve sua página e os arquivos incorporados (se for o caso). Clique na "aba" Visualização do FrontPage ou no botão Visualizar no Navegador na Barra de Ferramenta Padrão, para ver os efeitos funcionando.

- ao salvar a página, o FrontPage cria, automaticamente, o arquivo animate.js (ele é o script que faz o efeito funcionar), em C:\Meus Documento\Minhas Webs (ou caminho similar no Win 2000 e Win XP). Este arquivo deverá ser transferido para a raiz do seu site no servidor, caso contrário o efeito criado não funcionará. Ele deve ficar "solto" na raiz do site, assim com a página Index.

- apenas o Netscape e Internet Explorador 4 ou superior suportam o DHTML.

Bom, chegamos ao final de mais um tutorial. No entanto, vou dar mais uma dica: existem muitos outros "Scripts" de DHTML disponíveis para download na internet, baixe-os e dinamize ainda mais seu site