Aprenda a configurar a navegação entre páginas da Web. Vincule arquivos e documentos, atualize, altere e teste links no Dreamweaver.
Antes de criar um link, você deve entender como funcionam caminhos absolutos, relativos a documentos e relativos à raiz do site. Você pode criar vários tipos de links em um documento:
- Um link para outro documento ou para um arquivo, como um arquivo gráfico, de filme, PDF ou de som.
- Um link de âncora nomeado, que salta para um local específico em um documento.
Um link de email, que cria uma nova mensagem de email em branco com o endereço do destinatário já preenchido.
Links nulos e de script, usados para anexar comportamentos a um objeto ou para criar um link que executa o código JavaScript.
Você pode usar o Inspetor de propriedades e o ícone Apontar para arquivo para criar links de uma imagem, objeto ou texto para outro documento ou arquivo.
O Dreamweaver cria os links para outras páginas em seu site usando caminhos relativos a documentos. Você também pode configurar o Dreamweaver para criar novos links usando caminhos da raiz do site.
Sempre salve um novo arquivo antes de criar um caminho relativo a documentos; esse tipo de caminho não é válido sem um ponto inicial definido. Se você criar um caminho relativo a documentos antes de salvar o arquivo, o Dreamweaver usará temporariamente um caminho absoluto começando com arquivo:// até o arquivo ser salvo. Depois que o arquivo for salvo, o Dreamweaver converterá o caminho arquivo:// em um caminho relativo.
Anexar comportamentos JavaScript a links
Você pode anexar um comportamento a qualquer link de um documento. Avalie a possibilidade de usar os seguintes comportamentos ao inserir elementos vinculados em documentos:
Definir texto da barra de status
Determina o texto de uma mensagem e o exibe na barra de status, no canto inferior esquerdo da janela do navegador. Por exemplo, você pode usar esse comportamento para descrever o destino de um link na barra de status em vez de mostrar o URL associado.
Abrir janela do navegador
Abre um URL em uma nova janela. Você pode especificar as propriedades da nova janela, incluindo o nome, o tamanho e seus atributos (se pode ser redimensionada, se tem uma barra de menus, etc.).
Menu de salto
Edita um menu de salto. Você pode alterar a lista de menus, especificar um arquivo vinculado diferente ou alterar o local do navegador no qual o documento vinculado é aberto.
Vincular documentos usando o Inspetor de propriedades
Você pode usar o ícone de pasta do Inspetor de propriedades ou a caixa Link para criar links de uma imagem, objeto ou texto para outro documento ou arquivo.
Clique no ícone de pasta
à direita da caixa Link para navegar até um arquivo e selecioná-lo.O caminho até o documento vinculado aparece na caixa URL. Use o menu pop-up Em relação a na caixa de diálogo Selecionar arquivo para escolher o tipo de caminho (em relação ao documento ou à raiz) e clique em OK. O tipo de caminho selecionado é aplicado somente no link atual. (Você pode alterar a configuração padrão da caixa Em relação a para o site.)
Digite o caminho e o nome de arquivo do documento na caixa Link.
Para vincular-se a um documento do seu site, insira um caminho relativo a um documento ou à raiz do site. Para vincular-se a um documento externo ao seu site, insira um caminho absoluto incluindo o protocolo (como http://). Você pode usar essa abordagem para inserir um link para um arquivo que ainda não foi criado.
Na lista suspensa Destino, selecione um local no qual o documento será aberto:
- _blank carrega o documento vinculado em uma nova janela do navegador não nomeada.
- _parent carrega o documento vinculado no quadro pai ou na janela pai do quadro que contém o link. Se o quadro que contém o link não estiver aninhado, o documento vinculado será carregado na janela completa do navegador.
- _self carrega o documento vinculado no mesmo quadro ou janela do link. Esse destino é o padrão, normalmente não é necessário especificá-lo.
- _top carrega o documento vinculado na janela completa do navegador, removendo todos os quadros.
- _new carrega o arquivo vinculado em uma nova janela.
Vincular documentos usando o ícone Apontar para arquivo
Arraste o ícone Apontar para arquivo
(ícone de destino) à direita da caixa Link no Inspetor de propriedades e aponte para uma âncora visível no documento atual, uma âncora visível em outro documento aberto, um elemento que tenha uma ID exclusiva atribuída a ele ou um documento no painel Arquivos.Arraste a partir da seleção feita com shift e ponte para uma âncora visível no documento atual, uma âncora visível em outro documento aberto, um elemento que tenha uma ID exclusiva atribuída a ele ou um documento no painel Arquivos.
é possível vincular outro documento aberto somente se os documentos não estiverem maximizados na janela Documento. Para dispor os documentos lado a lado, selecione Janela > Organizar > Em cascata ou Janela > Organizar > Lado a lado. Ao apontar para um documento aberto, esse documento vai para o primeiro plano da tela enquanto você seleciona suas opções.
Adicionar um link usando o comando Hiperlink
O comando Hiperlink permite criar um link de texto para uma imagem, objeto ou outro documento ou arquivo.
Siga um destes procedimentos para exibir a caixa de diálogo Hiperlink:
Selecione Inserir > Hiperlink.
Na categoria Comum do painel Inserir, clique no botão Hiperlink.
No campo Texto, digite o texto do link.
No menu suspenso Link, selecione o nome do arquivo ao qual vincular. Também é possível clicar no ícone de pasta
para navegar até o arquivo que você deseja vincular.
Os nomes de todos os quadros nomeados no documento atual aparecem na lista pop-up. Se você especificar um quadro que não existe, a página vinculada será aberta em uma nova janela que tem o nome especificado. Você também pode selecionar um dos seguintes nomes de destino reservados:
- _blank carrega o arquivo vinculado em uma nova janela do navegador não nomeada.
- _parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contém o link. Se o quadro que contém o link não estiver aninhado, o arquivo vinculado será carregado na janela de navegador em tamanho integral.
- _self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino é o padrão, normalmente não é necessário especificá-lo.
- _top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros.
- _new carrega o arquivo vinculado em uma nova janela.
Criação de um link para um documento do Word ou Excel.
Você pode inserir um link para um documento do Microsoft Word ou Excel em uma página existente.
Na Visualização de design, abra página no local que você deseja que o link seja exibido.
Arraste o arquivo do local atual para a página do Dreamweaver, posicionando o link no local desejado. A caixa de diálogo Inserir documento é exibida.
Selecione Criar um link e clique em OK.
Se o documento ao qual você está se vinculando estiver localizado fora da pasta raiz do site, o Dreamweaver solicitará que você copie o documento para a raiz do site.
Ao copiar o documento para a pasta raiz do site, você garantirá que o documento estará disponível quando o site for publicado.
Ao fazer upload da sua página para o servidor Web, envie também o arquivo Word ou Excel. Sua página agora contém um link para o documento Word ou Excel. O texto do link é o nome do arquivo vinculado. Você pode alterar o texto do link na janela Documento se desejar.
Definir o caminho relativo de novos links
Por padrão, o Dreamweaver cria os links para outras páginas em seu site usando caminhos relativos a documentos. Para usar o caminho relativo à raiz do site, defina primeiro uma pasta local no Dreamweaver escolhendo uma pasta raiz local para servir como o equivalente da raiz do documento em um servidor. O Dreamweaver usa essa pasta para determinar os caminhos relativos à raiz do site para arquivos.
A alteração dessa configuração não converterá o caminho de links existentes depois de você clicar em OK. A configuração é aplicada somente a novos links criados com o Dreamweaver.
A configuração do novo caminho é aplicada somente no site atual.
Criar link para um local específico em um documento
Você pode usar o Inspetor de propriedades para criar links para uma seção específica de um documento criando primeiro âncoras nomeadas. As âncoras nomeadas permitem definir marcadores em um documento, que normalmente são colocados em um tópico específico ou na parte superior de um documento. Em seguida, você cria links para essas âncoras nomeadas, que direcionam o visitante rapidamente para a posição especificada.
A criação de um link para uma âncora nomeada é um processo de duas etapas. Primeiro, crie uma âncora nomeada e, em seguida, crie um link para a âncora nomeada.
Criar uma âncora
Na janela Documento, selecione e destaque o item que você deseja definir como uma âncora.
Abra o Inspetor de propriedades e verifique se o item selecionado tem uma ID. Se o campo ID estiver vazio, adicione uma ID. Por exemplo, Âncora.
Depois que você adicionar a ID, observe a alteração no código. id="<ID name>" é inserido no código da sua seleção.
Vincular novamente a uma âncora
Os nomes de âncora diferenciam minúsculas de maiúsculas.
Vincular-se a uma âncora nomeada usando o método de Apontar para arquivo
Na Visualização de design, selecione Exibir > Opções de Visualização de design > Auxílios visuais > Elementos invisíveis para tornar as âncoras visíveis, caso você não as veja.
Clique no ícone Apontar para arquivo
(ícone de destino) à direita da caixa Link no Inspetor de propriedades e arraste-o até a âncora à qual você deseja se vincular: seja uma âncora no mesmo documento ou em outro documento aberto.Arraste com a tecla Shift pressionada na janela Documento desde o texto ou a imagem selecionado até a âncora desejada: seja uma âncora no mesmo documento ou em outro documento aberto.
Criar um link de email
Um link de email abre uma nova janela de mensagem em branco (usando o programa de email associado ao navegador do usuário) quando é clicado. Na janela da mensagem de email, a caixa Para é atualizada automaticamente com o endereço especificado no link de email.
Criar um link de email usando o comando Inserir link de email
Selecione Inserir > Link de email.
Na categoria Comum do painel Inserir, clique no botão Link de email.
Criar um link de email usando o Inspetor de propriedades
Não digite nenhum espaço entre o sinal de dois pontos e o endereço de email.
Preenchimento automático da linha de assunto de um email
A entrada completa deve ser similar ao seguinte:
mailto:someone@yoursite.com?subject=Email do seu site
Criar links nulos e de script
Um link nulo é um link não designado. Use links nulos para anexar comportamentos em objetos ou texto em uma página. Por exemplo, você pode anexar um comportamento em um link nulo para que esse link troque uma imagem ou exiba um elemento absolutamente posicionado (elemento AP) quando o ponteiro for movido sobre o link.
Os links de script executam o código JavaScript ou chamam uma função JavaScript e são úteis para fornecer aos visitantes informações adicionais sobre um item sem que eles precisem sair da página da Web atual. Os links de script também podem ser usados para realizar cálculos, validar formulários ou executar outras tarefas de processamento quando um visitante clica em um item específico.
Criar um link nulo
Criar links de script
Atualizar links automaticamente
O Dreamweaver pode atualizar links para e de um documento sempre que você mover ou renomear o documento em um site local. Esse recurso funciona melhor quando você armazena o site inteiro (ou uma seção inteira) no disco local. O Dreamweaver não altera arquivos na pasta remota até você colocar os arquivos locais nessa pasta ou verificá-los no servidor remoto.
Para agilizar o processo de atualização, o Dreamweaver pode criar um arquivo de cache para armazenar informações sobre todos os links da pasta local. O arquivo de cache é atualizado de forma invisível à medida que você adiciona, altera ou exclui links do site local.
Ativar atualizações automáticas de link
Sempre
Atualiza automaticamente todos os links para e de um documento selecionado sempre que esse documento é movido ou renomeado.
Nunca
Não atualiza automaticamente todos os links para e de um documento selecionado quando esse documento é movido ou renomeado.
Solicitar
Exibe uma caixa de diálogo que lista todos os arquivos afetados pela alteração. Clique em Atualizar para atualizar os links nesses arquivos ou clique em Não atualizar para não alterar os arquivos.
Criar um arquivo de cache para o site
Na primeira vez em que você alterar ou excluir links para arquivos na pasta local depois de iniciar o Dreamweaver, o aplicativo solicitará o carregamento do cache. Se você clicar em Sim, o Dreamweaver carregará o cache e atualizará todos os links para o arquivo que acaba de ser alterado. Se você clicar em Não, a alteração será registrada no cache, mas o Dreamweaver não carregará o cache nem atualizará os links.
O cache talvez demore alguns minutos para ser carregado em sites maiores porque o Dreamweaver deve determinar se o cache está atualizado comparando os carimbos de data/hora dos arquivos do site local com os carimbos de data/hora registrados no cache. Se não tiver alterado nenhum arquivo fora do Dreamweaver, você poderá clicar com segurança no botão “Parar” quando for exibido.
Recriar o cache
Alterar um link no site inteiro
Além de configurar o Dreamweaver para atualizar automaticamente os links sempre que um arquivo for movido ou renomeado, você pode alterar manualmente todos os links (inclusive os links de email, de FTP, nulos e de script) para que eles apontem para outro lugar.
Essa opção é mais útil quando você deseja excluir um arquivo que está vinculado a outros arquivos, mas pode ser usada para outras finalidades. Por exemplo, suponha que você vincula as palavras "filmes deste mês" a /movies/july.html em todo o local. Em 1º de agosto, você teria que alterar esses links para que apontassem para /filmes/agosto.html.
se estiver alterando um link de email, de FTP, nulo ou de script, você não precisa selecionar um arquivo.
Selecione Site > Opções de site > Alterar link no site inteiro.
Alterar todos os links para
Clique no ícone de pasta
para navegar até o arquivo de destino do qual você deseja se desvincular e selecioná-lo. Se estiver alterando um link de email, de FTP, nulo ou de script, digite o texto completo do link que está alterando.
Em links para
Clique no ícone de pasta
para navegar e selecionar o novo arquivo ao qual você deseja vincular. Se estiver alterando um link de email, de FTP, nulo ou de script, digite o texto completo do link de substituição.
O Dreamweaver atualiza todos os documentos vinculados ao arquivo selecionado, fazendo com que eles apontem para o novo arquivo, usando o formato de caminho já utilizado no documento (por exemplo, se o caminho antigo era relativo ao documento, o novo caminho também deve ser relativo ao documento).
Depois de alterar um link no site inteiro, o arquivo selecionado fica órfão (isto é, nenhum arquivo do disco local aponta para ele). Você pode excluí-lo com segurança sem quebrar nenhum link no site local do Dreamweaver.
Como essas alterações ocorrem localmente, você deve excluir de modo manual o arquivo órfão correspondente na pasta remota e colocar ou verificar todos os arquivos nos quais os links foram alterados; caso contrário, os visitantes do site não verão as mudanças.
Testar links no Dreamweaver
Os links não estão ativos no Dreamweaver, isto é, você não pode abrir um documento vinculado clicando no link na janela Documento.
Clique com o botão direito no link e selecione Abrir página vinculada.
Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no link.
O documento vinculado deve residir no disco local.
Veja também
- Tutorial de vídeo: como adicionar hiperlinks a uma imagem inteira ou a uma parte de uma imagem
- Caminhos absolutos, relativos a documentos e relativos à raiz do site
- Tutorial sobre a criação de links
- Aplicação de comportamentos internos do JavaScript
- Trabalho com sites do Dreamweaver
- Corrigir links corrompidos
- Aplicar um comportamento
- Localizar links corrompidos, externos e órfãos
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.