Cómo hacer botones rollover en Fireworks

Escrito por brandy alexander | Traducido por daniel gómez villegas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer botones rollover en Fireworks
(Comstock/Comstock/Getty Images)

Un botón rollover es un elemento interactivo en tu sitio web que cambia su aspecto. Al cargar la página, el botón aparece en un estilo particular, pero a medida que el usuario mueve su mouse sobre este elemento, cambia visualmente para reconocer que está realizando esta función. Y, como los enlaces, este botón lleva al usuario a un sitio en la web cuando se hace clic. La aplicación de Adobe Fireworks ofrece herramientas que te permiten crear y diseñar rollovers.

Nivel de dificultad:
Difícil

Otras personas están leyendo

Instrucciones

  1. 1

    Inicia tu aplicación Fireworks. Selecciona "Nuevo" en el menú "Archivo" para crear un nuevo proyecto.

  2. 2

    Haz clic en la opción de forma de rectángulo en el inspector "Propiedades". Arrastra el puntero del mouse sobre la ventana de diseño hasta que la forma tenga el tamaño que desees.

  3. 3

    Haz clic en "Color de relleno" y selecciona un color para el botón. Haz clic en la herramienta "Texto" (que se muestra como una letra "A" mayúscula) en la opción inspector "Propiedades" y escribe el contenido de este botón. Ya has creado el botón en su estado "up", que es como se muestra inicialmente en la página.

  4. 4

    Haz clic en "Fotogramas" bajo el menú "Ventana" y haz clic en "Marcos" en la pestaña que aparece. Haz clic en el botón "Opciones" cerca del título "Páginas y capas y fotogramas" y selecciona la opción "Duplicar fotograma" para crear un botón duplicado para el efecto rollover.

  5. 5

    Haz clic en "Frame 2" que aparece en el panel "Marco" de la ventana para que aparezca el botón de copiar. Utiliza la opción inspector "Propiedades" para dar estilo al botón de manera diferente y crear un estado "sobre". El estado "over" aparece cuando un usuario pasa su mouse sobre el botón.

  6. 6

    Selecciona el botón en la ventana de diseño y ve a "Editar > Insertar > Parte rectangular" en la barra de menú de Fireworks. Selecciona "Parte única" en la ventana de diálogo que aparece. Haz clic en el botón para seleccionar e introducir una dirección de página web en el campo de texto "Enlace" del inspector "Propiedades" para determinar a dónde lleva el botón al visitante cuando hace clic en el botón.

  7. 7

    Haz clic en "Comportamientos" en el menú desplegable "Ventana" y haz clic en el signo más. Selecciona la opción "Rollover simple" en el menú que aparece. Haz clic en "Vista previa" en la parte superior de la ventana de diseño para probar tu botón rollover.

  8. 8

    Haz clic en la opción "Exportar" del menú "Archivo". Selecciona "HTML e Imágenes" desde el menú desplegable "Exportar" para guardar una página HTML con el botón rollover o elige la opción "Sólo imágenes" para guardar sólo la imagen del botón con el efecto rollover.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles