Vamos a ver como crear en Fireworks una botonera para nuestros?con efecto de rollover para mejorar el aspecto de nuestros menues.

Paso 1

Abrimos el Fireworks y creamos un nuevo documento en el cual vamos a trabajar desde [File / New] con las medidas que necesitemos y seleccionamos un color que fondo...

Paso 2

Una vez obtenida el ?rea en d?nde vamos a trabajar, debemos definir la forma de los botones que vamos a realizar. En nuestro caso utilizamos la herramienta de Rounder Rectagle (rect?ngulo redondeado) y seleccionamos un color m?s oscuro al del fondo...

Paso 3

En este paso le aplicamos un efecto Drop Show sobre todos los rect?ngulos. Esto lo hacemos desde la ventana Effect, aqu? seleccionamos la solapa Effect y aplicamos el efecto [Shadow and Glow / Drop Shadow].

Y luego agregamos el texto con el t?tulo de cada bot?n...

Paso 4

Ya tenemos los 5 botones de nuestra botonera. Ahora debemos realizar el famoso efecto Roll Over, para ello debemos convertir los elementos el botones...

• Seleccionamos el texto del primer bot?n y apretamos la tecla F8 o hacemos click derecho y elegimos la opci?n Convert to Symbol del men? contextual.
• Escribimos un nombre para el bot?n y en Type seleccionamos la opci?n Button.
• Repetimos este paso para cada uno de los botones.

Paso 5

El ?rea del bot?n es resaltada por un peque?o rect?ngulo que rodea al texto, hacemos doble click sobre el primer bot?n y aparecer? en pantalla una ventana en donde cambiaremos el color o forma del texto para cada acci?n. Los que utilizaremos ser?n...

• UP: estado normal.
• OVER: al pasar el mouse por encima.
• DOWN: est? presionado.

En la solapa UP dejaremos el texto tal como est? (color negro), lo copiamos (Ctrol + C) y nos dirigimos a la solapa OVER. Aqu? pegamos el texto (Ctrol + V) y le daremos un color azul y le pondremos negrita c?mo formato de la fuente (doble click sobre la palabra para ver sus propiedades). En la solapa DOWN volvemos a pegar el texto y le ponemos un color que se diferencie del primero, para dejar en claro que fue seleccionado, en nuestro caso le dimos color rojo.

Repetimos este paso con todos los botones realizados.

Paso 6

Apretamos la tecla F12 para ver un preview, observaremos que al pasar el mouse sobre las opciones se realiza el famoso efecto Roll Over que hemos creado en el paso anterior. Ahora guardamos el documento [File / Save As], y luego lo exportamos [File / Export].

Veremos que el Fireworks genera un archivo .htm y al mismo tiempo guarda todas las im?genes de la botonera, solamente debemos editar el archivo html para cambiar los links y adecuar la botonera a nuestro sitio.

Tengan en cuenta que el Fireworks guarda una funci?n JavaScript dentro del archivo, y tambi?n utiliza un evento OnLoad para precargar las im?genes.

Descargue el archivo fuente de la botonera del ejemplo.