Como criar hiperlinks para sites do Adobe Muse

Neste artigo, você aprenderá como trabalhar com hiperlinks no Adobe Muse. É possível usar hiperlinks para criar links para sites externos, arquivos para download, endereços de e-mail e muito mais. Os arquivos para download podem ser PDF, DOC, PPT, TXT, rich media ou outros tipos de arquivos que deseja compartilhar com os visitantes do site, mas não são atualmente compatíveis com a interface do Adobe Muse. Você pode criar links para arquivos carregados atualmente em sua conta de hospedagem do Adobe Muse e arquivos hospedados em sites de terceiros.

Vídeo | Como criar um hiperlink

Adicione links de ancoragem em uma página

Nesta seção, você aprenderá como conectar itens de menu com dois elementos de Regiões de ancoragem, a fim de adicionar os links de ancoragem ao menu manual. Siga estas etapas:

1. Clique em qualquer local na página para selecioná-la (de modo que o Indicador de seleção exiba a palavra: Página). Em seguida, clique no item de menu de widget (contêiner de widget) duas vezes. A primeira vez seleciona o widget de menu manual inteiro e a segunda seleciona o item de menu. O Indicador de seleção exibe as palavras: Item de menu.
2. Clique no menu Hiperlinks para exibir a lista completa de páginas e de marcas de ancoragem do site. Na seção Computador, localize a página certa e observe que as marcas de ancoragem que você criou são listadas diretamente sob ela. Selecione a marca de ancoragem adequada para vinculá-la ao item de menu.

3. Repita a etapa 2 para adicionar mais links de ancoragem.
4. Escolha Arquivo > Propriedades do site. Na guia Layout, verifique se a caixa de seleção Permitir estado ativo para links de ancoragem está selecionada. Essa opção está ativada por padrão para todos os sites novos, mas se você estiver editando um site antigo, talvez seja necessário marcar a caixa de seleção.
5. Escolha Arquivo > Visualizar página no navegador.

À medida que você clicar nos links para ver as diferentes regiões da página, observe que o status ativo correspondente no menu de navegação é exibido. Esse recurso do site ajuda a orientar os visitantes para que eles identifiquem qual seção estão exibindo. Saia do navegador e volte para o Adobe Muse.

Tente também rolar para cima ou para baixo na página e veja como o código na página detecta o local de cada marca de ancoragem e atualiza o estado ativo do menu manual à medida que a página passa em cada região da página. Essa técnica funciona em páginas que rolam vertical e horizontalmente.

Nota: uma página deverá ser suficientemente alta ou larga para ter espaço para que as marcas de ancoragem passem para cada região. Se as regiões de página estiverem muito próximas para que o conteúdo se ajuste à janela de um navegador sem rolagem, as marcas de ancoragem não aparecerão para passar para a próxima região.

6. Saia do navegador e volte para o Adobe Muse.

Na próxima seção, você verá como adicionar links de download, para permitir que os visitantes façam download de formatos de arquivo, como PDF, DOC, MP3, MOV, PSD e JPEG de alta resolução.

Dica: se você estiver trabalhando com outros designers em um projeto de site, poderá até vincular a arquivos de origem do .Muse, para que os membros da equipe possam fazer download deles diretamente do site.

Trabalhar com links de ancoragem

Criar Regiões de ancoragem em uma página da Web é uma maneira fácil de segregar visualmente diferentes seções de uma página. Cada uma dessas seções pode ser facilmente acessada por meio de Links de ancoragem, desenvolvidos para facilitar a navegação em uma página.

Em um design concluído, uma página da Web deve incluir links de ancoragem que permitem que os visitantes passem verticalmente para a região que exibe o menu correspondente. Imagine que adicionar marcas de ancoragem é como se você estivesse colocando um marcador em qualquer lugar de uma página. Quando os visitantes clicarem em um link para essa âncora, o link será rolado para páginas mais longas até a seção específica em que o marcador está localizado.

1. Clique no botão Âncora na área de navegação superior para carregar a ferramenta Âncora.

2. Clique uma vez na parte superior da página, acima da navegação do site de nível superior na área de cabeçalho. Você poderá mover o retângulo de cabeçalho para fora da visualização temporariamente, se desejar. Se você mover o conteúdo do cabeçalho, não se esqueça de movê-lo de volta ao local depois.
3. Na caixa de diálogo Renomear uma âncora exibida, insira o nome da âncora.

4. Repita as etapas 1 a 3 para definir as Regiões de ancoragem e adicionar mais Links de ancoragem.

Depois de adicionar um widget de Menu na próxima etapa, você vinculará os botões a marcas de ancoragem para criar a navegação que permite aos visitantes acessar a página para ler cada menu.

Adicionar links a arquivos para download

1. Ao editar uma página no modo de exibição Design, use a ferramenta Texto para criar um novo quadro de texto, perto do canto superior direito do quadro de texto do menu Café da manhã. Digite as palavras: Menu de download.
2. Com o quadro de texto ainda selecionado, use o painel Texto para aplicar as seguintes configurações:
   • Fonte da Web: Kaushan Script (ou qualquer fonte de script de sua preferência)
   • Tamanho da fonte: 14
   • Cor: #EEE5C4 (na parte 3, você renomeou essa amostra de cor como menu creme)
   • Entrelinha: 57%
   • Alinhamento: Centralizado
3. Use o menu Preenchimento para definir a cor de preenchimento como Nenhuma. Clique na pasta próximo à seção Imagem e navegue para selecionar o arquivo na pasta de arquivos de exemplo chamada download-bg.png para definir a imagem de fundo. Verifique se o menu Ajuste está definido com o Tamanho original e a Posição é centralizada.

4. Clique fora do menu Preenchimento para fechá-lo. Se necessário, use a ferramenta Seleção para redimensionar o quadro de texto e reposicioná-lo, para que seja centralizado no canto superior direito do quadro de texto do menu Café da manhã.

5. Com o quadro de texto ainda selecionado, use o menu Vínculos do Painel de controle para selecionar a opção Vincular ao arquivo. Na caixa de diálogo Importar exibida, procure o arquivo e clique em Abrir para selecioná-lo

Nota: quando você navega para selecionar um arquivo usando o recurso Vincular ao arquivo, esse arquivo se torna um dos ativos de site carregados quando o site é publicado ou incluídos nos arquivos de site quando ele é exposto. É uma prática recomendada copiar os arquivos que você deseja vincular de e para o site na pasta do site local, junto com qualquer outro arquivo de imagem usados no seu site.

Agora, o link para o arquivo PDF já foi adicionado. Se você observar o painel Ativos, verá que o arquivo aparece agora como um dos ativos do site.

6. Selecione o quadro de texto com a ferramenta Seleção. Copie o quadro de texto de Menu de download e cole-o, posicionando-o no canto superior direito do menu Almoço. Repita esta etapa mais duas vezes, para criar cópias posicionadas nos cantos superiores direitos dos menus Jantar e Sobremesa.

Em um projeto real, você poderá vincular a quatro menus de arquivo separados, para oferecer aos visitantes quatro arquivos PDF diferentes que podem ser baixados e usados para exibição e impressão de menus. Entretanto, para este tutorial, o botão Download é vinculado ao mesmo arquivo PDF em cada região da página.

7. Escolha Arquivo > Visualizar página no navegador. Clique em um dos itens do menu Horizontal, para ir para esse menu na página. Observe que, à medida que você rola para baixo para ver os menus Jantar e Sobremesa, o cabeçalho é exibido sobre o outro conteúdo da página. Esse comportamento ocorre porque a página alimentos usa a página-mestre de primeiro plano e o conteúdo de cabeçalho da página foi movido para o primeiro plano.
8. Clique no link Menu de download e veja como o download do arquivo PDF é realizado no seu computador.

Dependendo do navegador usado e das preferências do navegador, você verá comportamentos diferentes. Alguns navegadores exibirão o PDF na janela do navegador, enquanto outros simplesmente transferirão o arquivo PDF para o seu computador, onde será possível abri-lo usando o Acrobat Pro ou o Acrobat Reader.

Criar links para endereços de e-mail

Se você estiver usando o Adobe Muse há algum tempo, talvez perceba que o menu Vínculos foi reorganizado recentemente em seções para facilitar a localização de nomes de página e itens que podem ser vinculados. Nesta seção, você verá com mais detalhes o modo como o menu Links é estruturado e como filtrar itens na lista de menus. Você também verá como adicionar links de endereços de e-mail.

1. Clique na seta para baixo no menu Vínculos para visualizar a lista completa exibida.

2. O menu Links é estruturado em seções. A opção Links usados recentemente exibe todos os links para sites externos adicionados ao site. Você pode inserir qualquer URL diretamente no campo Links, para vincular a páginas da Web externas.
3. A seção Desktop contém as páginas do site atual. Observe que as marcas de ancoragem adicionadas à página alimentos são listadas em ordem alfabética sob essa página. Isso significa que é possível criar âncoras de mesmo nome em várias páginas de um site e você ainda poderá identificá-las facilmente, à medida que você configura links. Neste site de exemplo, há apenas um layout Desktop, mas se o site contiver layouts alternativos para Telefone ou Tablet, essas seções são exibidas com o conjunto de páginas correspondente.
4. A seção Arquivos no final inclui o recurso Vincular ao arquivo e todos os arquivos disponíveis para download que foram adicionados ao site atual. Como você adicionou recentemente um link ao arquivo KatiesCafeMenu.pdf, o nome do arquivo é listado nesta seção, facilitando a revinculação a um ativo comum de várias páginas no site.
5. Se você quiser adicionar um link de e-mail (que, quando clicado, abre o cliente de e-mail do visitante e uma nova mensagem a ser iniciada com o endereço de e-mail no campo Para), e insira o endereço de e-mail com o prefixo mailto: no campo de menu Link, desta forma:
   
   mailto:email@address.com
   
   
6. Às vezes, a lista de itens no menu Links pode ficar muito longa e difícil de navegar em sites maiores. Se você estiver procurando uma página específica, uma âncora, um arquivo, ou uma URL externo para vincular, digite as primeiras letras do link no campo de menu Links e os itens correspondentes serão exibidos. Isso permite filtrar rapidamente na lista e encontrar os itens que você deseja vincular.

Adicionar links a sites externos

Agora que os botões de ícone de mídia social estão na posição, você adicionará os links externos a cada um dos sites de rede social.

1. Selecione o ícone de Facebook e digite (ou copie/cole) o link na página do Facebook do Katie's Cafe no campo de menu Link, dessa forma: http://www.facebook.com/KatiesCafeSF
2. Selecione o ícone do Google+ e digite (ou copie/cole) o seguinte link na página Katie's Cafe no Google+: https://plus.google.com/u/1/117800212967830061444/posts
3. Selecione o ícone do Twitter e digite (ou copie/cole) o seguinte link na página do Katie's Cafe no Twitter: http://twitter.com/katiescafesf
4. Clique no ícone do Facebook novamente para selecioná-lo. Clique na palavra sublinhada azul: Links localizada à esquerda do menu Links. Na caixa de diálogo exibida, marque a caixa de seleção chamada: Abrir link em uma nova janela ou guia.
5. Repita a etapa 4 para configurar os links do Google+ e do Twitter para também abrirem em uma nova janela do navegador.

Essa é uma convenção de design comum na Web: links que vão para outras páginas do mesmo site são abertos na mesma janela do navegador (o que acontece por padrão no Adobe Muse) e links para páginas em outros sites são abertos em uma nova janela ou guia.

Identificar o URL de um arquivo em preparação para adicionar o link

Para preparar o link antes de adicioná-lo a uma página no site do Adobe Muse, você usará um navegador para visitar o arquivo carregado ativo. Siga estas etapas.

1. Inicie um navegador de sua escolha.
2. Navegue até seu site ou um site de terceiros que contém o arquivo dependente carregado. Você pode usar um mecanismo de pesquisa, como Google, ou digitar nome de o domínio do site diretamente na barra de endereços do navegador.

3. Depois de acessar a página inicial do site desejado, clique na navegação do site ou digite o URL completo na barra de endereços do navegador para acessar o arquivo dependente específico. Depois de concluir essa etapa, o navegador irá exibir, reproduzir ou baixar o arquivo que você está acessando.
4. Quando tiver certeza de que você inseriu o URL correto para acessar o arquivo carregado, selecione todo o conteúdo da barra de endereços do navegador e escolha Editar > Copiar. Se preferir, você pode usar os atalhos de teclado Command+C (Mac) ou Control+C (Windows).

Neste ponto, o URL para o arquivo dependente foi copiado para a área de transferência. Tome cuidado para não copiar nenhum outro item, até depois cole o URL do arquivo dependente para o campo Hiperlink, conforme descrito na próxima seção.

Criar links para um arquivo externo

Após carregar um arquivo dependente com êxito, acessá-lo por meio de um navegador e copiar a URL do arquivo, a última etapa envolve a criação de um link em uma página do site do Adobe Muse. Siga estas etapas:

1. Inicie o Adobe Muse. Clique duas vezes na miniatura da página para abri-la no modo de exibição Design.
2. Selecione o texto, insira uma imagem ou um retângulo que deseja que seja o "botão" no qual os visitantes clicarão para baixar ou acessar o arquivo dependente.
3. Com o texto ou elemento de página selecionado, clique no campo suspenso Hiperlink e cole a URL (o caminho todo) do arquivo dependente, copiada anteriormente.

Se quiser definir o link para abrir em uma nova janela do navegador, clique no rótulo Hiperlink imediatamente à esquerda da janela Hiperlink. Na caixa de diálogo que é exibida, ative a caixa de seleção ao lado da opção Abrir o link em uma nova janela ou guia, conforme mostrado a seguir.

Salve a página e publique as alterações no site.

Acesse a página em um navegador. Clique no texto ou no botão vinculado para verificar se o link funciona como esperado.

Para obter mais dicas sobre como trabalhar com o Adobe Muse, visite a página de Ajuda e tutoriais do Adobe Muse ou a página de Eventos do Adobe Muse para assistir a webinars ao vivo e gravados.