Dreamweaver Mx Hyperlinks

Hyperlinks Inserindo Links É vital importância a navegabilidade de um site na Web, ou seja, a facilidade de o utilizador navegar entre as páginas, opções e sites na internet. Para isso, você deve estabelecer conexões entre as páginas por meio dos hyperlinks

O Dreamweaver permite ao profissional vínculos em qualquer texto ou imagem em qualquer local da página. E esses vínculos se dividem em três tipos básicos:

Links Locais – Estabelecem conexões entre as páginas de um site.

Links Globais – Permitem navegar de um site para páginas de outro site na Internet.

Links Internos – O utilizador pode navegar entre áreas diferentes da mesma página. Esse tipo de vínculo é também chamado de Âncora.

Observação – Quando você digitar um caminho, ou nome de página numa caixa de vínculo (Link), ou de fonte de arquivo, faça sempre em letras minúsculas e sem espaço, pois, na inernet, os endereços não têm espaços, pois, na internet, os endereços não têm espaços nem letras maiúsculas.

Três passos para inserir um Link Local no Dreamweaver 1º Passo - Seleccionar a zona do link – zona sensível. 2º Passo - Seleccionar o ficheiro que fica vinculado ao clique na zona do link zona sensível. 3º Passo - Seleccionar o Target ou Destino – A caixa de Target vai especificar onde a página vinculada no 2º passo vai abrir, se é num frame específico, numa outra página, ou na mesma página.

1 / 10

Inserindo Links Locais

1º Passo – Neste caso zona de link é palavra “Livros”

2º Passo – Neste caso vai abrir um ficheiro chamado livros.htm

3º Passo – Target (destino)

Dica - No caso de estabelecer link com um ficheiro já existente, como no caso anterior, é possível seleccionar o ficheiro no directório, clicando na pasta amarela ao lado do campo.

As opções padrão que temos disponíveis em Target (Destino) são :

_Blank – Quando essa opção estiver seleccionada, a página vinculada abrirá em outra janela do navegador.

2 / 10

_Parent – Carrega a página vinculada no mesmo frame que contém o vínculo. Mas se esse frame não estiver aninhado, o arquivo vinculado abrirá na janela inteira do navegador. _Self – Esta é a opção padrão do Dreawmweaver. Ela está implícita, não sendo necessário especificá-la. Ela carrega o ficheiro na mesma janela ou frame que o vínculo. _Top – Carrega a página vinculada na janela inteira do navegador, limpando todos os frames existentes.

Inserindo Links Globais Links globais, ou externos, são vínculos com páginas de outos Websites, estabelecendo a navegação entre sites da Internet.

A única diferença dos links locais é que os globais precisam, necessariamente, conter toda a URL da página vinculada .

Exemplo : Link para o site da Editora Érica URL : http://editoraerica.com.pt

Dica – Em links globais costuma-se usar muito a opção _Blank. Assim o utilizador permanece no seu site enquanto navega em outro site.

3 / 10

Inserindo Links Globais - Exemplo 1º Passo

2º Passo - http://editoraerica.com.pt

3º Passo - _Blank

Links Internos – Âncoras Normalmente as âncoras são usadas em páginas com extenso conteúdo e, consequentemente, uma grande rolagem vertical do navegador

4 / 10

Inserir Links Internos – Âncoras 1º Passo - Seleccionar a zona de Âncora

2º Passo – No Inspector de Propriedades, escreva “#colera” no campo de Link, sendo que “colera” é o nome que estamos dando à âncora, e o sinal “#” indica que e vínculo será para um ponto específico nessa mesma página.

Observação – Os nomes de âncoras, assim como os dos links, não permitem acentos e letras maiúsculas.

5 / 10

3º Passo – Agora você precisa definir o alvo do link, ou seja, para onde o utilizador quando clique no vínculo. Coloque o cursor do rato posicionado antes do título “Cólera”, abaixo do menu horizontal É ali que será o alvo.

6 / 10

4º Passo – Inserir a âncora (Menu Insert). Quando abrir a janela de diálogo, digite “colera”, na caixa de texto, pois é o nome que você deu a essa âncora no passo 2.

7 / 10

Vinculando Imagens Assim como os textos, as imagens de uma página pode se transformar em links, bastando colocar um vínculo a uma imagem pré-seleccionada. 1º Passo - Seleccionar a imagem. 2º e 3 Passo - È como efectuamos para os texto.

2º Passo - Seleccionar o ficheiro que fica vinculado ao clique na zona do link zona sensível

3º Passo - Seleccionar o Target ou Destino – A caixa de Target vai especificar onde a página vinculada no 2º passo vai abrir, se é num frame específico, numa outra página, ou na mesma página. O Dreamweaver disponibiliza, também, a opção ALT, que tem como a função de mostrar uma legenda quando o rato é posicionado sobre a imagem. Assim o utilizador é informado do que se trata aquela figura. Neste caso foi colocado “Fortaleza – Natal”.

8 / 10

O Menu de Salto Este é um menu pop-up no qual pode inserir opções e criar vínculos para elas. Cada vez que o utilizador escolher uma opção, ela já o leva automaticamente à página vinculada. Este tipo de menu é muito usado em portais da inernet ou sites maiores, usualmente no topo, facilitando a navegação do utilizador pelos diversos canais ou secções do site, mas pode também ser aplicado de diversas maneiras. Menu => Insert => Form Object => Jump Menu ou Barra Insert - Form

1º - Opção escreva na caixa “Text” :”Seleccione uma Categoria”. 2º - Na caixa do vínculo “When selected, go to url: ” digite o sinal ”#”. Clique no sinal “+” (adição) para criar um a nova opção. 3º - Depois, para criar outra opção, digite “Opção 1” na caixa Texto. Então escolha qualquer página que você já tenha no site. 4º Repita esses procedimentos para criar todas as opções desejadas.

9 / 10

Mapa de Imagens Mapas de imagens são utilizados quando há necessidade vínculos em apenas uma parte de uma imagem, e não em uma imagem toda. Assim você pode definir “pontos activos” de link dentro de uma figura.

1º Passo

Ferramenta de Selecção

2º Passo

3º Passo

10 / 10