¿Qué es un Marco de Trabajo Spry?

Son un número de objetos que están basados en CSS, JavaScript y Ajax.
La única cosa que necesitas saber es el diseño de esos ajustes.
Nosotros encontramos en la barra de herramientas “Insertar” bajo la pestaña de “Diseño” o bajo la pestaña “Spry”.

Barra de Menu Spry

El primer ejemplo que voy a discutir es añadir la barra de menu Spy.
Sólo para tu información si tienes los archivos bajados, tienes un ejemplo de todos los elementos Spry que voy a discutir.

La primera cosa que hacer es colocar el cursor en tu documento donde quieras la barra de menu.
Haz click en el botón “Barra de Menu Spry”.

En la primera ventana de diálogo, podemos escoger entre un menu horizontal y vertical.
En éste ejemplo yo escojo “Horizontal”.

Haz click en el botón OK.

Esto añadirá la barra de menu a tu página.
Antes de que hagamos cambios al diseño del nuevo menu insertado, nosotros guardamos nuestra primera página.

Esto desplegará una advertencia de diálogo que nos dirá que archivos necesitamos para estos objetos (la barra) será creada y copiada al mapa de sitio.
Uno de esos archivos está en el formato de archivo CSS el cual podemos adaptar de nuestro menu.

Haz click en el botón Aceptar.

Como puedes ver en la imagen de abajo, el estilo CSS está añadido en el panel de estilos CSS.
Para ajustar los diferentes estilos al suit, primero selecciona el estilo en la parte superior del panel y después cambia las propiedades en la parte baja del panel.
En el principio lucirá un poco visible que línea lo hace, pero cuando empleas un poco de tiempo, estoy seguro que sabrás como funciona.

Lo que puedo decir, la séptima línea, “ul.MenuBarHorizontal ul ul” es la posición del los elementos del menu y submenus.
La décima regla “ul.MenuBarHorizontal a” determina el color de fondo y el color de texto de los elementos del menu.
Y la doceava regla determina el color de fondo y color de texto del elemento de menu donde el puntero del mouse se posiciona.

Para hacer cambios al menu, como el texto, añadir o remover elementos del menu o submenu y añadir vínculos, debemos primero seleccionar la barra de menu.
Mueve el puntero del mouse por encima de la barra de menu y cuando la parte superior izquierda de una caja azul aparezca, hazle click.

Esto abre la ventana de propiedades de la barra menu.
La ventana de Propiedades consiste en tres selecciones. La primera caja es para los elementos de menu, la segunda es para elementos del sub-menu, y la tercera es para los elementos del sub-sub-menu.

Para cambiar el texto de varios elementos del menu, primero selecciona los elementos del menu o submenu en la caja apropiada y cambia el nombre el “Texto” en la ventana de propiedades.

Para asociar el vínculo a un elemento del menu, seleccionas primero y luego escribes o navegas en el “VÍNCULO” al vínculo que quieras agregar.
Si quieres abrir el vínculo en la misma ventana del navegador, deja la casilla en blanco de “Target”, si deseas abrir éste vínculo en una nueva ventana de navegador, escribe _blank en ésta caja.

En “Título”, puedes dar el nombre que aparece cuando el puntero del mouse se mueve encima del elemento del menu.

Para remover un elemento del menu, selecciona el elemento en la caja de la ventana de propiedades y haz click en el botón Eliminar en la parte superior del cuadro.
Para añadir elementos del menu, haz click en el signo más en la parte superior del cuadro.
Para cambiar la posición de un elemento de menu, selecciona un elemento del menu en el cuadro y haz click en las flechas para alzarla o bajarla.

Haciendo click en el botón “Desactivar Estilos” en la parte izquierda inferior de la ventana de propiedades, se desplegará el menu en una “versión texto”. También podemos eliminar elementos aquí seleccionándolos y haciendo click en la tecla eliminar en nuestro teclado.
Si deseas cambiar a “vista normal”, haz click en “Habilitar Estilos” en la ventana de propiedades.

Cursos

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats