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".

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:



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



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ú":



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":



Sea abre una ventana llamada "Editor de menú emergente". Esta ventana consta de 4 Pestañas:

• Contenido
  
• Aspecto
  
• Avanzado
  
• 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"):

Hagamos un ejemplo:

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

• Opera en el Vacío
  • Cap .1
    
  • Cap. 2
    
  • Cap. 3
    
  • Cap. ...
• Foros
  • Falsh
    
  • ActionScript
    
  • Diseño
    
  • ...
  
  
• ...

Pues nos quedaría algo así:


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



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:



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 ?):



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í:



Opcional: Seria recomendable guardar una copia del archivo original (archivo->guardar como) en este punto, a fin de poder revisar el menú sin tener que crearlo de nuevo mas tarde.

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í:



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.

Esos archivos son:

• Un documento CSS
  
• Un documento JS (javascript)
  
• Las imágenes de los botones del menú (en las diferentes posiciones del ratón)
  
• Una imagen de una flechita (para los submenús)

[ Descargar los archivos ]

Nota: Evidentemente esos archivos han de cargarse al servidor donde pondremos nuestra web.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.