COMO: Criar hiperligações personalizadas utilizando folhas de estilos em cascata no FrontPage 2003

Traduções de Artigos Traduções de Artigos
Artigo: 825450 - Ver produtos para os quais este artigo se aplica.
Para obter uma versão deste artigo referente ao Microsoft FrontPage 2002, consulte 287706.
Expandir tudo | Reduzir tudo

Nesta página

Sumário

Este artigo descreve como criar hiperligações personalizadas utilizando folhas de estilos em cascata (CSS, cascading style sheets) no Microsoft Office FrontPage 2003. Contém exemplos que demonstram como utilizar funcionalidades de folhas de estilos em cascata para criar hiperligações personalizadas.

Nota: este artigo utiliza funcionalidades de folhas de estilos em cascata que poderão não ser suportadas em todos os browsers. Para obter mais informações, consulte a ajuda do FrontPage. Para o fazer, clique em Ajuda do Microsoft Office FrontPage no menu Ajuda, escreva compatibilidade de folhas de estilos em cascata na caixa Procurar e prima ENTER para visualizar os tópicos apresentados.

Este artigo poderá conter hiperligações para conteúdo em inglês (ainda não traduzido).

Criar hiperligações personalizadas utilizando folhas de estilos em cascata

Os exemplos que se seguem demonstram como criar hiperligações personalizadas utilizando as funcionalidades de folhas de estilos em cascata.

A Microsoft fornece exemplos de programação apenas a título informativo, sem garantia expressa ou implícita, incluindo, sem limitação, as garantias implícitas de comercialização e/ou adequação a um fim específico. Este artigo pressupõe que o utilizador conhece a linguagem de programação apresentada e as ferramentas utilizadas para criar e depurar procedimentos. Os técnicos de suporte da Microsoft podem ajudar a explicar a funcionalidade de um determinado procedimento, mas não modificarão estes exemplos para proporcionarem funcionalidades adicionais nem criarão procedimentos adaptados às necessidades específicas do utilizador. Nota: poderá receber uma mensagem de erro ou a página poderá não ser correctamente apresentada se copiar directamente os exemplos deste artigo e os colar no FrontPage. Os parênteses em ângulo (< e >) poderão ser apresentados como código HTML. Para contornar este comportamento, cole primeiro o exemplo de código num documento em branco do Bloco de notas e, em seguida, copie o exemplo de código desse documento para a página do FrontPage.

Exemplo 1: Criar hiperligações em que apenas o sublinhado é apresentado numa cor diferente

Este exemplo formata o texto da hiperligação com a mesma cor do texto do documento. Apenas o sublinhado da hiperligação é apresentado numa cor diferente. Para criar a hiperligação personalizada, siga estes passos:
  1. Inicie o FrontPage e crie uma nova página em branco.
  2. No menu Ver, clique em Página e, na parte inferior da página, clique em Código.
  3. Insira o seguinte código na área <head></head> da página:
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { color: black; text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px }
    a:link    { border-bottom-color: blue }
    a:visited { border-bottom-color: purple }
    a:hover   { border-bottom-color: green }
    a:active  { border-bottom-color: red }
    </style>
    
  4. Insira o seguinte código na área <body></body> da página:
    <p>Consulte <a href="http://www.microsoft.com/portugal">http://www.microsoft.com/portugal</a> 
    para obter mais informações.</p>
    <p>Consulte <a href="http://www.msn.com">http://www.msn.com</a> para obter mais informações.</p>
    
  5. No menu Ficheiro, clique em Guardar.
  6. Na caixa de diálogo Guardar como, especifique a localização onde pretende guardar o ficheiro, escreva Exemplo1 na caixa Nome de ficheiro e clique em Guardar.
  7. No menu Ficheiro, aponte para Pré-visualizar no browser e clique no browser que pretende utilizar para pré-visualizar a página.

Exemplo 2: Criar hiperligações com botões sensíveis ao rato

Este exemplo cria hiperligações com botões do tipo sensível ao rato, com o fundo de uma só cor. Para criar a hiperligação personalizada, siga estes passos:
  1. Inicie o FrontPage e crie uma nova página em branco.
  2. No menu Ver, clique em Página e, na parte inferior da página, clique em Código.
  3. Insira o seguinte código na área <head></head> da página:
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { text-decoration: none; padding: 3px }
    a:link    { color: white; background-color: blue }
    a:visited { color: white; background-color: purple }
    a:hover   { color: white; background-color: green }
    a:active  { color: white; background-color: red }
    </style>
    
  4. Insira o seguinte código na área <body></body> da página:
    <p>Consulte <a href="http://www.microsoft.com/portugal">http://www.microsoft.com/portugal</a> 
    para obter mais informações.</p>
    <p>Consulte <a href="http://www.msn.com">http://www.msn.com</a> para obter mais informações.</p>
    
  5. No menu Ficheiro, clique em Guardar.
  6. Na caixa de diálogo Guardar como, especifique a localização onde pretende guardar o ficheiro, escreva Exemplo2 na caixa Nome de ficheiro e clique em Guardar.
  7. No menu Ficheiro, aponte para Pré-visualizar no browser e clique no browser que pretende utilizar para pré-visualizar a página.

Exemplo 3: Criar hiperligações com botões delineados

Este exemplo cria hiperligações com um botão do tipo sensível ao rato, delineado. É apresentada uma caixa colorida em redor do texto da hiperligação, que cria o efeito de contorno. Para criar a hiperligação personalizada, siga estes passos:
  1. Inicie o FrontPage e crie uma nova página em branco.
  2. No menu Ver, clique em Página e, na parte inferior da página, clique em Código.
  3. Insira o seguinte código na área <head></head> da página:
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { color: black; text-decoration: none; border-style: solid; border-width: 2px; padding: 2px }
    a:link    { border-color: blue }
    a:visited { border-color: purple }
    a:hover   { border-color: green }
    a:active  { border-color: red }
    </style>
    
  4. Insira o seguinte código na área <body></body> da página:
    <p>Consulte <a href="http://www.microsoft.com/portugal">http://www.microsoft.com/portugal</a> 
    para obter mais informações.</p>
    <p>Consulte <a href="http://www.msn.com">http://www.msn.com</a> para obter mais informações.</p>
    
  5. No menu Ficheiro, clique em Guardar.
  6. Na caixa de diálogo Guardar como, especifique a localização onde pretende guardar o ficheiro, escreva Exemplo3 na caixa Nome de ficheiro e clique em Guardar.
  7. No menu Ficheiro, aponte para Pré-visualizar no browser e clique no browser que pretende utilizar para pré-visualizar a página.

Exemplo 4: Criar hiperligações com formatação de texto diferente

Este exemplo formata a hiperligação com texto não sublinhado, itálico, em minúsculas. Quando mover o ponteiro sobre a hiperligação, o texto da mesma será convertido em maiúsculas. Para criar a hiperligação personalizada, siga estes passos:
  1. Inicie o FrontPage e crie uma nova página em branco.
  2. No menu Ver, clique em Página e, na parte inferior da página, clique em Código.
  3. Insira o seguinte código na área <head></head> da página:
    <style>
    body      { color: black; background-color: white; font-family: arial }
    a         { text-decoration: none; font-style: italic; text-transform: lowercase }
    a:link    { color: blue; font-weight: bold }
    a:visited { color: purple }
    a:hover   { color: green; text-transform: uppercase }
    a:active  { color: red  }
    </style>
    
  4. Insira o seguinte código na área <body></body> da página:
    <p>Consulte <a href="http://www.microsoft.com/portugal">http://WWW.microsoft.COM/portugal</a> 
    para obter mais informações.</p>
    <p>Consulte <a href="http://www.msn.com">http://WWW.msn.COM</a> para obter mais informações.</p>
    
  5. No menu Ficheiro, clique em Guardar.
  6. Na caixa de diálogo Guardar como, especifique a localização onde pretende guardar o ficheiro, escreva Exemplo4 na caixa Nome de ficheiro e clique em Guardar.
  7. No menu Ficheiro, aponte para Pré-visualizar no browser e clique no browser que pretende utilizar para pré-visualizar a página.

Referências

Para obter mais informações sobre folhas de estilos em cascata no FrontPage 2003, consulte a ajuda do FrontPage. Para o fazer, no menu Ajuda, clique em Ajuda do Microsoft Office FrontPage. Na caixa Procurar, escreva folhas de estilos em cascata e prima ENTER para visualizar os tópicos apresentados.

Referências

Para obter informações adicionais, clique nos números de artigo que se seguem para visualizar os artigos na base de dados de conhecimento da Microsoft (KB, Microsoft Knowledge Base):
196488 FP2000: O que são folhas de estilos em cascata?
205996 HOW TO: Create Cascading Style Sheets in FrontPage 2000
240972 HOW TO: Remove Underlines from Hyperlinks in FrontPage 2000
222949 FP2000: Creating Hover Effects for Form Buttons using DHTML and CSS

Propriedades

Artigo: 825450 - Última revisão: 28 de fevereiro de 2007 - Revisão: 2.2
A informação contida neste artigo aplica-se a:
  • Microsoft Office FrontPage 2003
Palavras-chave: 
kbhowto KB825450

Submeter comentários

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com