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.
Top Related