Es muy común ver
menús interesantes en diferentes páginas web. Antes del advenimiento de
los estilos CSS, solo podía hacerse en Flash.
Pero ahora Dreamweaver puede hacer menús bastante interesantes… tal
vez no tienen la misma calidad gráfica que los de se pueden hacer con Flash,
pero igual de funcionales.
Estos son los
famosos Spry Menus. Spry signfica ágil, algo que se mueve de forma
ligera y rápida. Pero en lo referente a sitios web, parece que es un
estándar propuesto por Adobe para crear contenido dinámico en páginas
web. Para los que gustan de explicaciones más técnicas, Spry framework es
una biblioteca programada en Javascript que provee la funcionalidad
que ofrece AJAX (nada
que ver con el jabón)
que permite crear páginas Web 2.0 de forma sencilla. Si quieres ver una
galería de ejemplos, visita los demos de
Adobe.
A continuación
presento un tour paso por paso de lo que hay que hacer para crear un menú Spry.
Antes que nada,
comencé con una página nueva en un sitio (que ahorita no tiene nada).
Puse una imagen y modifiqué sus propiedades para que no se viera tan feo.
Posicioné el cursor abajo de la imagen. Hasta ahorita, mi ventana de
Dreamweaver se ve así:
Para insertar un
menú Spry hay dos formas: voy al menú Insert, Layout Objects y Spry Menu Bar
como se ve en la siguiente figura:
También puedo ir
a la pestaña Spry y doy clic sobre Spry Menu Bar como se ve en esta figura (hay
un círculo rojo alrededor de la opción Spry Menu Bar):
.png)
Independientemente
de cual de las formas prefieras seleccionar esta opción, aparece una ventana
como esta que te pregunta la distribución del menú. En mi caso voy a
elegir la opción horizontal:
Al presionar Ok
mi página se ve así:
Y la barra de
propiedades se ve así:
Lo primero que
voy a hacer es llenar el menú con las opciones que quiero. Dreamweaver
automáticamente lo llena con Item 1, Item 2, etc. pero todo el mundo debe
cambiarlo (al menos que su sitio web tenga una página “Item 1”, otra cuyo tema
sea “Item 2”, etc.). Esto se hace de forma sencilla: mientras tengo el
menú Spry seleccionado, hago clic sobre el elemento que quiero cambiar (en este
caso, “Item 1”) y luego cambio el texto en la propiedad Text. Al dar
Enter después de escribir el nuevo valor, se actualiza mi menú. La barra
de propiedades se ve así:
De igual manera
puedo cambiar el resto de elementos. Si quiero eliminar alguno, lo
selecciono y presiono el botón –. Si quiero agregar uno nuevo, presiono
el botón +. Y puedo seleccionar un elemento y usar los triángulos hacia
arriba y hacia abajo para cambiar el orden en el que aparecen.
Al terminar de
modificar estas opciones, el panel de propiedades se ve así (aunque no ponga la
imagen, también se ven estos cambios en la vista diseño de mi sitio):
Si te fijas,
tengo 3 ventanas de opciones. Estas permiten que tenga un menú principal
y hasta 2 subniveles. En mi caso, voy a modificar las opciones de Sitios
(que tiene las opciones Item 1.1, Item 1.2 e Item 1.3) para poner vínculos a
mis sitios. Cambiar nombres se hace igual que como expliqué con
anterioridad, solo que ahora voy a cambiar la propiedad Link. Así se
ve con el primero cambiado:
Fíjate que en Link puse
la dirección de la página que quiero abrir. Como no es parte de este
sitio, tuve que anteponer http:// a la dirección. En el campo Target escribí _blank para
que lo abra en otra ventana o pestaña (de acuerdo a la manera en que tengan
configurado el navegador), pero si pongo _self o lo dejo sin nada lo
abre en esta misma ventana.
Cambié el resto
de los elementos y así quedó mi ventana de propiedades (todos los URLs que
escribí con Link no se ven completos, pero los escribí bien):
Y la página en
vista diseño se ve así (bueno, solo puse un pedazo de la ventana del sitio: el
único que cambió):
Con el menú de
Archivos voy a usar todos los submenus posibles. El primero es el que dice
Archivos, va a tener 3 submenus: PDF, DOC y PNG, y adentro de cada uno de estos
va a haber ligas para bajar a diferentes archivos. Antes de hacer esto,
copié unos cuantos archivos a mi sitio (se copian a la misma carpeta donde
tienes almacenado tu sitio). Organicé los archivos en carpetas
correspondientes para que no hubiera demasiado relajo en mi sitio. La
ventana del sitio quedó así:
Fui agregando
los submenus de la misma manera en que lo hice con anterioridad, solo que en
esta ocasión las ligas (propiedad Link) son internas, es decir, liga a archivos
que están en el sitio. Por esto, en lugar de escribir un link comenzando
con http://, presioné el botón de carpeta que está de lado derecho del
campo Link para seleccionar el archivo deseado.
Cuando terminé la ventana de propiedades quedó así:
BIBLIOGRAFIA
No hay comentarios:
Publicar un comentario