Barra de menús

Podemos crear menús de forma muy sencilla haciendo clic en Insertar → Spry → Barra de menús
de Spry:

 Menú 1
o Submenú 1.1
 Subsub 1.1.1
 Subsub 1.1.2
o Submenú 1.2
o Submenú 1.3
 Subsub 1.3.1
 Subsub 1.3.2
 Menú 2
 Menú 3
o Submenú 3.1
 Subsub 3.1.1
 Subsub 3.1.2
o Submenú 3.2
o Submenú 3.3
 Menú 4

El primer cuadro de diálogo que encontraremos será el siguiente:

Aquí podremos seleccionar el diseño para nuestro menú, haz clic en Horizontal o Vertical y pulsa el
botón Aceptar.

Se creará automáticamente el menú, que podrás visualizar desde la vista de Diseño de esta forma:
Haciendo clic en la cabecera azul Barra de menús de Spry podremos ver en el panel Propiedades
las opciones necesarias para configurar nuestro menú:

La creación de elementos es bastante sencilla. Este menú admite hasta 3 niveles diferentes, así
que en principio la primera tarea será definir el primer nivel. Esto lo haremos desde el primer
cuadro de listado.

Añadir y quitar elementos es tan fácil como utilizar los botones , y podemos reorganizarlos
luego utilizando las flechas . Cada uno de estos elementos puede ser modificado para que
muestren el texto que queramos, lo haremos desde las cajas de texto que encontramos a la
derecha.

En Texto escribiremos el literal que queremos que se lea en el menú. Si ese elemento debe
contener un enlace (a una página o a un correo electrónico) lo haremos escribiendo en la caja de
texto Vínculo. Si trabajamos en una página con marcos podremos utilizar el campo Destino para
establecer en cuál de ellos se abrirá el enlace.

Por último, Título contendrá una ayuda contextual que se mostrará en forma de etiqueta al colocar
el ratón sobre el elemento del menú.

Una vez definido el primer nivel, asaremos a crear los hijos de cada elemento. Selecciona uno de
los items y crea las opciones que se desplegarán al colocar el ratón sobre ellos. De nuevo utiliza
los botones y para gestionar los elementos en el segundo listado.

Selecciona cada uno de los elementos de primer nivel y ves creando sus subelementos uno a uno.

Una vez creado un elemento de segundo nivel también seremos capaces de colgar sobre éste otro
elemento de tercer nivel para ello utiliza los botones y y rellena el tercer listado de
elementos.

Al final, dependiendo de lo complejo de nuestro menú, puede resultarnos muy difícil ver su
estructura o recorrer sus elementos. Además, puede que hayamos añadido algún estilo CSS que
Dreamweaver no interpreta como toca. En estos casos, resulta muy útil la opción Desactivar
estilos, que nos mostrará el HTML real del menú: una lista con enlaces.
 Navegación por Fichas
Puedes crear un control como el que mostramos a continuación haciendo clic en Insertar → Spry
→ Paneles en fichas de Spry:

 Ficha 1
 Ficha 2

Contenido de la primera ficha.

Puede contener los elementos que quieras.

Estas fichas son contenedores que admiten todo tipo de elementos HTML. Facilitan la navegación
y son muy útiles para organizar la información y no congestionar la página ni al usuario.

Al insertarla verás que se inserta algo parecido a esto:

Seleccionando el control haciendo clic en la cabecera azul verás lo siguiente en el panel

Propiedades:
Desde aquí podrás añadir tantas fichas como desees y ordenarlas utilizando los botones y
.

Luego selecciona el Panel predeterminado que es el que se mostrará por delante cuando se
visualice la página en el explorador, antes de que el usuario haya pulsado alguna de las fichas.

Para modificar los títulos de ficha simplemente cambia el nombre desde la vista de Diseño.

Puedes modificar su contenido normalmente incluyendo todo tipo de tablas, imágenes o elementos
que hayamos visto hasta ahora. Para pasar del contenido de una ficha a otra sólo coloca el ratón
sobre ella y haz clic sobre el icono con forma de ojo que aparecerá:

Luego modifica el contenido del panel abierto.

Recuerda que el panel que se visualizará primero en la página es el que elijas como
predeterminado en el panel Propiedades.

Control Acordeón
Otro control avanzado que utiliza las ventajas de AJAX y que Spry nos permite utilizar es el
Acordeón:

Sección 1

Coloca el contenido que prefieras en estos contenedores.

Puedes pasar de un contenedor a otro haciendo clic sobre su nombre.

Sección 2

Sección 3
Sección 4

1 2 3
4 5 6

Para utilizarlo haz clic en Insertar → Spry → Acordeón de Spry. Se creará automáticamente un
elemento en tu página parecido a esto:

Este control es tan sencillo de configurar que en el panel Propiedades sólo encontrarás lo
siguiente:

Añade y organiza las secciones utilizando los botones y . Y luego simplemente edita el
contenido de cada una de ellas y su nombre en la cabecera.
Del mismo modo que con las pestañas para ver el contenido de una sección coloca el ratón sobre
su cabecera y haz clic sobre el icono con forma de ojo que aparecerá:

Panel con Contracción

Para terminar con los controles avanzados veremos el panel que puede contraerse de Spry.
Puedes ver un ejemplo aquí:

Mi panel (haz clic)

Este es un panel que se puede contraer.

De esta forma podrás esconder el contenido con un sólo clic.

Pruébalo pulsando sobre la cabecera.

Verás que realmente, funciona como un acordeón con una sola ficha.

Para insertar un panel de este tipo sólo tienes que hacer clic en Insertar → Spry → Panel que
puede contraerse de Spry.

En el panel Propiedades podrás ver sus opciones de configuración:

Desactivando la opción Activar animación eliminarás la animación que se produce al contraer el
panel. Esta opción sólo afecta al comportamiento de apertura o cierre y no tiene mucha más
trascendencia, así que simplemente dependerá de tu gusto y lo que se adapte mejor al diseño de
tu página web.

Puedes decidir si el panel se muestra inicialmente abierto o cerrado en la página seleccionando el

estado en el desplegable Estado predeterminado. Del mismo modo, si mientras trabajas en vista de
Diseño te molesta que esté abierto puedes cerrarlo haciendo clic en el desplegable Mostrar y
seleccionando Cerrado.

Esto último también puedes hacerlo pulsando sobre el icono del ojo que aparecerá en la cabecera
del panel si sitúas el ratón sobre ella:

Para modificar este panel simplemente edita su contenido como en el resto de controles que
hemos visto, Nada más fácil.

27.6. Cambiar Estilos CSS

Al principio de la unidad dijimos que era posible modificar el aspecto de los controles Spry.

Esto es muy sencillo de conseguir. Cada vez que insertamos un control de este tipo se crean dos
nuevos archivos en la carpeta llamada SpryAssets en nuestro sitio. Uno de ellos es un archivo
JavaScript que contiene el código necesario para el buen funcionamiento del control, nunca
modifiques este código, salvo que realmente entiendas qué estás haciendo.

El otro, un archivo CSS, es el que contiene las reglas de estilo que se aplican sobre el control.
Encontrarás una hoja de estilo por cada control.
Para modificar el estilo de alguno de tus controles sólo tendrás que modificar dicho archivo CSS
para adaptarlo a tus necesidades. Para ello puedes emplear el panel Estilos CSS, el Inspector de
propiedades CSS, etc...

Si ves el código fuente del Spry, o la barra de estado, verás que normalmente están formados por
etiquetas div, que tienen asociada una clase ya existiese. No tendrás más que personalizar esa
clase.

Recuerda que si necesitas ayuda con los estilos en cascada puedes visitar de nuevo el tema de
Estilos CSS Avanzados.

Ejercicio propuesto de la Unidad 27 Prueba evaluativa de la Unidad 27