Foro de elhacker.net

Media => Diseño Gráfico => Mensaje iniciado por: NelxoN en 9 Abril 2005, 19:11 pm



Título: Menúes drop down (Fireworks)
Publicado por: NelxoN en 9 Abril 2005, 19:11 pm
Macromedia Fireworks brinda la posibilidad de crear, en forma rápida y sencilla, vistosos menúes "drop down" como el que se muestra en la siguiente figura:

(http://www.webexperto.com/articulos/archivos/160/dropdown01.gif)

Para realizarlo debemos seguir los siguientes pasos:

Definimos las secciones

(http://www.webexperto.com/articulos/archivos/160/dropdown02.gif)

Creamos una imagen por cada sección:

(http://www.webexperto.com/articulos/archivos/160/dropdown03.gif)

Rectangle Hotspot Tool

(http://www.webexperto.com/articulos/archivos/160/dropdown04.gif)

or cada sección en la que deseamos incluir un menú drop-down debemos utilizar la herramienta Rectangle Hotspot y especeficar su área:

(http://www.webexperto.com/articulos/archivos/160/dropdown05.gif)

Realizando el menú

Clickeamos con el botón derecho sobre alguna de las secciones y seleccionamos la opción Add Pop-up Menu:

(http://www.webexperto.com/articulos/archivos/160/dropdown06.gif)

Completamos las opciones del menú rellenando los campos Text, Link y Target (opcional), y luego clickeamos sobre el símbolo + para agregar, o sobre -  para quitar los ítems. Una vez terminado, click sobre Next.

(http://www.webexperto.com/articulos/archivos/160/dropdown07.gif)

Definimos los colores de las celdas y el texto, el tipo de fuente, y clickeamos sobre Finish.

(http://www.webexperto.com/articulos/archivos/160/dropdown08.gif)

Una vez completadado el proceso podremos elegir la ubicación del menú despegable simplemente arrastrándolo con el Mouse.

(http://www.webexperto.com/articulos/archivos/160/dropdown09.gif)

Exportando el código

Utilizaremos la opción [Modify] [Fit Canvas] para eliminar los espacios en blanco de la imagen.

(http://www.webexperto.com/articulos/archivos/160/dropdown10.gif)

(http://www.webexperto.com/articulos/archivos/160/dropdown11.gif)

Luego nos dirigimos hacia [File] [Export] y guardamos el trabajo.

Al exportarlo, se van a generar los tres archivos necesarios para hacer funcionar el menú: menu.htm, fw_menu.js y menu.gif.

(http://www.webexperto.com/articulos/archivos/160/dropdown12.gif)

Fuente: Webexperto

---------

Saludos.  :)