CÓMO: Crear hipervínculos personalizados mediante hojas de estilo en cascada en FrontPage 2003

Seleccione idioma Seleccione idioma
Id. de artículo: 825450 - Ver los productos a los que se aplica este artículo
Para ver una versión de este artículo para Microsoft FrontPage 2002, consulte 287706.
Expandir todo | Contraer todo

En esta página

Resumen

En este artículo se explica cómo crear hipervínculos personalizados utilizando hojas de estilo en cascada (CSS) en Microsoft Office FrontPage 2003. Se incluyen ejemplos que muestran cómo utilizar las funciones de estas hojas para personalizar los hipervínculos.

Nota
En este artículo se utilizan funciones de hojas de estilo en cascada que tal vez no sean compatibles con todos los exploradores Web. Para obtener más información, vea la Ayuda de FrontPage. Para ello, haga clic en Ayuda de Microsoft FrontPage, en el menú Ayuda, escriba compatibilidad con hojas de estilo en cascada en la barra Buscar y, a continuación, presione ENTRAR para ver los temas que se devuelven.

Crear hipervínculos personalizados utilizando hojas de estilo en cascada

En los siguientes ejemplos se muestra cómo crear hipervínculos personalizados utilizando las funciones de las hojas de estilo en cascada:

Microsoft proporciona ejemplos de programación con fines ilustrativos únicamente, sin ninguna garantía tanto expresa como implícita, incluyendo, entre otras, las garantías implícitas de comerciabilidad e idoneidad para un fin determinado. En este artículo se da por supuesto que ya conoce el lenguaje de programación que se muestra, así como las herramientas empleadas para crear y depurar procedimientos. Los profesionales de soporte técnico de Microsoft pueden explicarle la funcionalidad de un determinado procedimiento, pero no modificarán estos ejemplos para ofrecer mayor funcionalidad ni crearán procedimientos adaptados a sus necesidades específicas. Si tiene poca experiencia en programación, quizá desee ponerse en contacto con un Microsoft Certified Solution Partner o con la línea del servicio de consultoría que se ofrece, mediante pago, llamando al Centro de Atención al Cliente de Microsoft en el número 902 197 198. Para obtener más información acerca de los Certified Partners, consulte el siguiente sitio Web de Microsoft:
https://solutionfinder.microsoft.com/
Para obtener más información acerca de las opciones de soporte técnico disponibles con Microsoft, consulte el siguiente sitio Web de Microsoft:
http://support.microsoft.com/default.aspx?scid=fh;ES-ES;CNTACT
Nota
Si copia los ejemplos directamente desde este artículo y los pega en FrontPage, tal vez reciba un mensaje de error o la página no se muestre correctamente. Los corchetes angulares (<y>), también, podrían aparecer como código HTML. Para evitar este comportamiento, pegue primero el ejemplo de código en un documento en blanco en el Bloc de notas y, a continuación, cópielo del Bloc de notas a la página en FrontPage.

Ejemplo 1: Crear hipervínculos en que sólo los subrayados se muestren en un color diferente

En este ejemplo se cambia el formato del texto del hipervínculo para que aparezca en el mismo color que el texto del documento. De este modo, sólo el subrayado del hipervínculo se muestra en un color diferente. Para crear el hipervínculo personalizado, siga estos pasos:
  1. Inicie FrontPage y cree una página en blanco nueva.
  2. En el menú Vista, seleccione Página y, a continuación, en la parte inferior de la página, haga clic en Código.
  3. Inserte el código siguiente en el área <head></head> de la 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. Inserte el código siguiente en el área <body></body> de la página:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p>
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p>
    
  5. En el menú Archivo, haga clic en Guardar.
  6. En el cuadro de diálogo Guardar como, especifique la ubicación donde desee guardar el archivo, escriba Ejemplo1 en el cuadro Nombre de archivo y, a continuación, haga clic en Guardar.
  7. En el menú Archivo, seleccione Vista previa en el explorador y, a continuación, haga clic en el explorador Web en el que desee mostrar la vista previa de la página.

Ejemplo 2: Crear hipervínculos que utilicen botones activables

En este ejemplo se crean hipervínculos con botones activables con un fondo en color sólido. Para crear el hipervínculo personalizado, siga estos pasos:
  1. Inicie FrontPage y cree una página en blanco nueva.
  2. En el menú Vista, seleccione Página y, a continuación, en la parte inferior de la página, haga clic en Código.
  3. Inserte el código siguiente en el área <head></head> de la 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. Inserte el código siguiente en el área <body></body> de la página:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p>
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p>
    
  5. En el menú Archivo, haga clic en Guardar.
  6. En el cuadro de diálogo Guardar como, especifique la ubicación donde desee guardar el archivo, escriba Ejemplo2 en el cuadro Nombre de archivo y, a continuación, haga clic en Guardar.
  7. En el menú Archivo, seleccione Vista previa en el explorador y, a continuación, haga clic en el explorador Web en el que desee mostrar la vista previa de la página.

Ejemplo 3: Crear hipervínculos que utilicen botones con contorno

En este ejemplo se crean hipervínculos con un botón activable con contorno. Alrededor del texto del hipervínculo aparece un cuadro de color que crea un efecto de contorno. Para crear el hipervínculo personalizado, siga estos pasos:
  1. Inicie FrontPage y cree una página en blanco nueva.
  2. En el menú Vista, seleccione Página y, a continuación, en la parte inferior de la página, haga clic en Código.
  3. Inserte el código siguiente en el área <head></head> de la 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. Inserte el código siguiente en el área <body></body> de la página:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p>
    <p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p>
    
  5. En el menú Archivo, haga clic en Guardar.
  6. En el cuadro de diálogo Guardar como, especifique la ubicación donde desee guardar el archivo, escriba Ejemplo3 en el cuadro Nombre de archivo y, a continuación, haga clic en Guardar.
  7. En el menú Archivo, seleccione Vista previa en el explorador y, a continuación, haga clic en el explorador Web en el que desee mostrar la vista previa de la página.

Ejemplo 4: Crear hipervínculos que utilizan un formato de texto diferente

En este ejemplo se da formato a los hipervínculos para que utilicen texto sin subrayado, en cursiva y en minúsculas. Al mover el puntero sobre el hipervínculo, además, el texto pasa a mayúsculas. Para crear el hipervínculo personalizado, siga estos pasos:
  1. Inicie FrontPage y cree una página en blanco nueva.
  2. En el menú Vista, seleccione Página y, a continuación, en la parte inferior de la página, haga clic en Código.
  3. Inserte el código siguiente en el área <head></head> de la 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. Inserte el código siguiente en el área <body></body> de la página:
    <p>Please see <a href="http://www.microsoft.com">http://WWW.microsoft.COM</a> for more.</p>
    <p>Please see <a href="http://www.msn.com">http://WWW.msn.COM</a> for more.</p>
    
  5. En el menú Archivo, haga clic en Guardar.
  6. En el cuadro de diálogo Guardar como, especifique la ubicación donde desee guardar el archivo, escriba Ejemplo4 en el cuadro Nombre de archivo y, a continuación, haga clic en Guardar.
  7. En el menú Archivo, seleccione Vista previa en el explorador y, a continuación, haga clic en el explorador Web en el que desee mostrar la vista previa de la página.

Referencias

Para obtener más información sobre las hojas de estilo en cascada en FrontPage 2003, vea la Ayuda de FrontPage. Para ello, en el menú Ayuda, haga clic en Ayuda de Microsoft Office FrontPage. En el cuadro Buscar, escriba hojas de estilo en cascada y, a continuación, presione ENTRAR para ver los temas que se devuelven.

Referencias

Para obtener información adicional, haga clic en los números de artículo siguientes para verlos en Microsoft Knowledge Base:
196488 Fs000: What Are Cascading Style Sheets?
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

Propiedades

Id. de artículo: 825450 - Última revisión: lunes, 13 de agosto de 2007 - Versión: 2.2
La información de este artículo se refiere a:
  • Microsoft Office FrontPage 2003
Palabras clave: 
kbhowto KB825450

Enviar comentarios

 

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