5/7/2018 Crear un menú desplegable con Fireworks y Dreamweaver - slidepdf.com

http://slidepdf.com/reader/full/crear-un-menu-desplegable-con-fireworks-y-dreamweaver 1/10

 

Crear un menú desplegable con Fireworks y Dreamweaver 

En el siguiente tip veremos una manera fácil de hacer un menú emergente en un

 

documento HTML usando Adobe Fireworks y en menor medida Adobe Dreamweaver .

 

Para realizar este Tip hemos utilizado las versiones 8 de los programas, a esperas del

 

lanzamiento oficial del Creative Suite CS3.

 Antes que nada, hacemos una imagen, a la que luego agregaremos el menú emergente

 

interactivo, esta imagen la insertamos en un archivo HTML utilizando Dreamweaver . A

 

continuación, seleccionamos la imagen en cuestión y, dentro del panel "propiedades" del

 

Dreamweaver , clicamos al botón "Editar ".

 

Dreamweaver  

 Abriremos la imagen en cuestión en Fireworks.

 

Nos preguntará si deseamos utilizar el archivo mismo (*.jpg?) o usar el original (*.png), es

 

recomendable usar el archivo original (*.png), ya que si nos equivocamos, o luego

 

queremos agregarle mas datos al menú, siempre podremos editarlo sin necesidad de

 

empezar de nuevo. Esto es debido a que Fireworks almacena en los archivos png estos

 

datos y otros.

 

Nota:No es lo mismo un png exportado con Fireworks que uno que guardamos

 

normalmente.

Una vez tenemos la imagen abierta:

5/7/2018 Crear un menú desplegable con Fireworks y Dreamweaver - slidepdf.com

http://slidepdf.com/reader/full/crear-un-menu-desplegable-con-fireworks-y-dreamweaver 2/10

 

 

Fi reworks 

En el panel de Herramientas de Fireworks, en Web, seleccionamos "Herramienta de

 

zona interactiva":

Fi reworks 

Podemos observar que si mantenemos pulsado el ratón encima del botón de selección de

 

la herramienta, se despliegan mas opciones para dibujar zonas interactivas de formas

 

circulares o de forma poligonal (libre). En nuestro caso, nos será suficiente con una forma

 

rectangular.

 

Dibujamos una forma rectangular encima de la imagen, justo encima del dibujo del botón

 

"Menú":

Fi reworks 

5/7/2018 Crear un menú desplegable con Fireworks y Dreamweaver - slidepdf.com

http://slidepdf.com/reader/full/crear-un-menu-desplegable-con-fireworks-y-dreamweaver 3/10

 

 

Observaremos que en el centro de este recuadro de color verde claro, aparece un

 

botoncito redondo con forma de mirilla telescópica. Hacemos clic en él, y en el menú que

 

se abre, seleccionamos "Añadir menú emergente":

 

Fi reworks 

Sea abre una ventana llamada "Editor de menú emergente". Esta ventana consta de 4

 

Pestañas:

y  Contenido

y   Aspecto

 

y   Avanzado

y  Posición

En la primera pestaña (Contenido), es donde pondremos todos los menús y submenús

 

que deseamos poner, junto con sus links (y la forma en que queremos que se abran esos

 

links dentro del Html, el "destino"):

5/7/2018 Crear un menú desplegable con Fireworks y Dreamweaver - slidepdf.com

http://slidepdf.com/reader/full/crear-un-menu-desplegable-con-fireworks-y-dreamweaver 4/10

 

F 

Hagamos un ejemplo:

 

Suponiendo que quiera hacer un menú que sea algo así:

 

y  Opera en el Vacío

 

y  Cap .1

 

y  Cap. 2

 

y  Cap. 3

 

y  Cap. ...

 

y  Foros

y  Falsh

y   ActionScript

 

y  Diseño

y  ...

y  ...

Pues nos quedaría algo así:

5/7/2018 Crear un menú desplegable con Fireworks y Dreamweaver - slidepdf.com

http://slidepdf.com/reader/full/crear-un-menu-desplegable-con-fireworks-y-dreamweaver 5/10

 

 

Fi reworks 

Nota: usamos el botón para hacer submenús.

 

Pasmos a la siguiente pestaña, la de "Aspecto".

 

 Aquí seleccionaremos como queremos que sean los botones del menú, si el menú debe

 

ser vertical o horizontal, el tipo y el tamaño de la letra de los elementos del menú. Bueno,

 

esto va a gusto de cada uno...

5/7/2018 Crear un menú desplegable con Fireworks y Dreamweaver - slidepdf.com

http://slidepdf.com/reader/full/crear-un-menu-desplegable-con-fireworks-y-dreamweaver 6/10

 

 

Fi reworks 

Bien, hecho esto, pasamos a la siguiente pestaña, "Avanzado".

 

 Aquí podemos definir el tamaño de las celdas (Altura y Anchura, o Relleno de Celda),

 

definir el tiempo entre que sacamos el ratón de encima el menú, y este desaparece

 

(Demora de menú, en milisegundos). También podemos definir el desplazamiento del

 

texto dentro de los elementos del menú (Sangría de texto; si es positivo, se desplaza

 

hacia la derecha); si ponemos bordes y el color de estos, ... Esto también va a gustos:

5/7/2018 Crear un menú desplegable con Fireworks y Dreamweaver - slidepdf.com

http://slidepdf.com/reader/full/crear-un-menu-desplegable-con-fireworks-y-dreamweaver 7/10

 

 

Fi reworks 

Pasamos a la ultima pestaña, "Posición". En esta, definimos la posición en la que

 

aparecerá el menú respecto del recuadro creado con la "Herramienta de zona interactiva",

 

al inicio.

También definimos la posición de los elementos submenú (Cap.1 ?) respecto de el

 

elemento superior del menú (Oev ?):

5/7/2018 Crear un menú desplegable con Fireworks y Dreamweaver - slidepdf.com

http://slidepdf.com/reader/full/crear-un-menu-desplegable-con-fireworks-y-dreamweaver 8/10

 

 

Fi reworks 

Una vez definidos estos parámetros, hacemos clic en "Listo". Ya tenemos nuestro menú

 

emergente.

 

 Aún estamos En Fireworks, en el escenario nos quedará algo así:

 

Fi reworks 

Opcional : S er i a recomendable guardar una copi a del  archi vo or i g i nal ( archi vo->guardar  

 

como) en este  punto, a f i n de  poder  rev i sar  el  menú si n tener que crearlo de nuevo mas 

 

tarde. 

5/7/2018 Crear un menú desplegable con Fireworks y Dreamweaver - slidepdf.com

http://slidepdf.com/reader/full/crear-un-menu-desplegable-con-fireworks-y-dreamweaver 9/10

 

Y ya está, simplemente darle al botón "listo" (posición superior izquierdo del Fireworks)

 

para volver al Dreamweaver. Una vez en el Dreamweaver , solo nos hace falta guardar el

 

Html, al ejecutarlo saldrá el menú.

 

Hasta aquí era lo necesario para hacer el menú. 

 

Para los que quieran saberlo, vamos a explicar un poco lo que pasó:

 

Cuando estemos en el Dreamweaver , vemos que aparece algo así:

 

Dreamweaver  

Como podemos apreciar, se trata de un  javascipt que ha creado el Dremweaver a partir 

 

de la información recibida del Fireworks:

Si nos fijamos, en el directorio donde guardamos el documento HTML, se crean unos

 

archivos, los cuales son usados por el navegador al visualizar la pagina.

5/7/2018 Crear un menú desplegable con Fireworks y Dreamweaver - slidepdf.com

http://slidepdf.com/reader/full/crear-un-menu-desplegable-con-fireworks-y-dreamweaver 10/10