Efectos Spry Tema 2. Efectos Spry Los efectos de Spry son mejoras visuales que permiten que una página web sea mucho más vistosa e interactiva, son utilizados constantemente para crear efectos animados como transiciones, además son aplicables a elementos HTML.
Cómo crear una barra de menú Spry A continuación se va a insertar un nuevo sitio web llamado Unidad 3, luego se va crear una nueva página con el nombre de index ; posteriormente se incluirá una capa, tal y como se indica en los siguientes pasos.
Ubique el puntero del mouse dentro de la nueva capa, observe un fondo de color amarillo.
Dé clic sobre la opción Insertar , luego opte por la alternativa Spry y por último seleccione Barra de menús Spry. 1
3
2
Aparece la siguiente ventana la cual indica el tipo de menú que se puede crear dentro de la página web, en el ejemplo se emplea la opción Horizontal, posteriormente dé clic en Aceptar .
Dé clic sobre la opción Insertar , luego opte por la alternativa Spry y por último seleccione Barra de menús Spry. 1
3
2
Aparece la siguiente ventana la cual indica el tipo de menú que se puede crear dentro de la página web, en el ejemplo se emplea la opción Horizontal, posteriormente dé clic en Aceptar .
2 1
Divisar como aparece la barra de menú Spry mostrando unas propiedades, las cuales se modificarán para así adecuar según necesidades propias.
Cada elemento del primer cuadro corresponde a una de las opciones del menú.
Los elementos del segundo cuadro pertenecen a los submenús de cada elemento del primer cuadro.
Los elementos del tercer cuadro conciernen a los submenús de cada elemento de los submenús del segundo, por ende, este sería el último nivel de ordenamiento de las opciones del menú Spry.
Es posible darle un nombre a la
para así identificarla.
Con los signos
puede agregar o eliminar menús.
Con los signos
cambia la posición de un menú.
En
altera el nombre del menú por el que se indique.
En inserta un hipervínculo a otra página, dependiendo de la opción del menú que se tenga seleccionada. En se agrega un título, el cual sirve para identificar la página. Destino es la posición en donde se va a mostrar la página sobre la cual se va a acceder por medio del hipervínculo. Una vez explicadas las propiedades de la barra de menú Spry, se procede a su configuración.
Para modificarle el nombre a un elemento de la barra del menú, seleccionarlo, y luego en la opción Texto digitar lo que desee. Por ejemplo, al Elemento 1 se le asignó el nombre Inicio.
2 1
Contemple cómo queda configurado en la barra.
Cambie el nombre de los demás elementos, tal y como se muestra.
Observe el resultado de la barra de menú Spry.
Ahora se van a eliminar los submenús del elemento Inicio, seleccione cada ítem y dé clic en el botón .
Note que debe quedar vacío.
Ahora modifique el nombre de los submenús del elemento Deportes de la siguiente manera.
Mire cómo quedan configurados los elementos del menú Deportes.
Ahora se van a eliminar los submenús del elemento Fútbol.
Visualice.
Ahora se van a crear los submenús pero del elemento Caminata. 3 4 1
2
3 4 1
2
Observe la configuración de los submenús del elemento Caminata.
Listo ya se tiene creada, diseñada y configurada la barra de menú Spry.
Guarde cambios, automáticamente se crea una carpeta en el sitio web llamada SpryAssets, allí se almacenan todos los efectos Spry aplicados a la página.
Pulse F12 y examine cómo se muestra la barra en el navegador. Si llega a aparecer la barra de controles ActiveX, haga clic en el botón Permitir contenido bloqueado.
Así se muestra la barra en la página web, note que al ubicar el puntero del mouse en una de las opciones del menú, automáticamente se muestra un fondo azul.
Analice que al acercar el puntero del mouse al elemento Deportes, éste instantáneamente muestra los submenús, y si se ubica en el elemento Caminata, también exhibe sus elementos.
Cómo cambiar el color de fondo a la barra de menú Spry A través de los estilos que se crean automáticamente al configurar la barra, es posible modificar el color de fondo de la misma. En el panel de la derecha busque la ficha Estilos CSS, en la opción Todas las reglas, dé clic en ul.MenuBarHorizontal a, debajo se muestran las propiedades para esa regla, para cambiar el color de fondo, presione el botón background-color y elija el de su preferencia; en Color , modifique el color al texto de la barra de menú Spry.
1
2
3
4
Escoja el color de fondo a aplicar en la barra, en este caso es azul oscuro. Así queda la barra de menú Spry:
1
2
3
4
Ahora se cambia el color al texto de la barra de menú, en este ejemplo a blanco.
Detalle la modificación de la barra de menú Spry:
Guarde, luego oprima F12 y vea la barra del menú en el navegador web.
Observe que aún al seleccionar un elemento del menú, este aparece sobre el fondo azul rey. A continuación se va a explicar cómo escoger el de su preferencia.
Cómo cambiar el color del sobre fondo a la barra de menú Spry En el panel de la derecha busque la ficha Estilos CSS, en la opción Todas las reglas, dé clic sobre
debajo se presentan las propiedades para esa regla, para modificar el color, diríjase al botón background-color y escoja; en la propiedad Color cambia el color al texto de la barra de menú Spry.
1
2
3
Modifique el color de fondo a amarillo, es decir en el background-color y a negro para el texto en Color . Background-color
Color
1 1 2
2
Contemple.
Guarde y analice cómo funciona la barra del menú Spry en el navegador. Observe que efectivamente el color de sobre fondo ya cambia a amarillo y el texto a negro.
Hipervínculos en la barra de menú Spry Los hipervínculos funcionan de la misma manera como ya se ha venido estudiando en el programa de formación, más sin embargo este es un ejemplo de cómo se hace. Primero recuerde que para crear o configurar un hipervínculo, la página a la cual se va a acceder ya debe estar creada y configurada, en este caso se va a crear un hipervínculo a la opción Aeróbicos de la barra del menú Spry. Dé clic sobre la alternativa Aeróbicos y luego en Vínculo seleccione el ícono de la carpeta.
1
2
Elija la página sobre la cual va a acceder el hipervínculo, en este caso Aeróbicos, luego dé clic sobre el botón Aceptar .
Así queda configurado el hipervínculo el cual apunta a la página Aerobicos.html
Guarde y pulse F12 para ejecutar el hipervínculo y verificar que acceda a la página escogida, después dé clic en Aeróbicos.
Observe que automáticamente ingresa a la página de Aeróbicos.
Según lo aprendido, cree los demás hipervínculos para las otras páginas, y logre que desde cada una se pueda regresar a la página inicial.
Cómo crear paneles en fichas Spry Los paneles de fichas muestran diferentes contenidos en una sola página. Inserte una nueva capa en donde se indica a continuación.
Ubique el puntero del mouse dentro de la capa, luego dé clic en Insertar , después elija la opción Spry y posteriormente opte por Paneles en fichas de Spry. 1
3 2
Observe como se muestra el panel de fichas y sus propiedades.
Para cambiar el nombre de las fichas, se hace desde la misma ficha. Seleccionar el nombre, borrarlo y digitar el nuevo, en este caso Portátil1.
Realice lo mismo para la ficha 2, esta vez se digitó Portátil2 .
Note como quedan configuradas las fichas en las propiedades.
Al igual que en la barra del menú, es posible agregar o eliminar fichas con los signos Para cambiar de posición las fichas use los signos
.
.
Para modificar el color de texto de las fichas seleccione el nombre, en este caso Portátil1 y en Propiedades la opción CSS; después elija el color azul.
1
2
3 4
Repita lo mismo para la otra ficha.
Cómo agregar los contenidos de las fichas Primero elija la ficha a la cual va a adicionarle contenido, en este caso Portátil1, ubicada en Propiedades.
Borre y digite el nuevo contenido en la ficha.
También se puede insertar una imagen, para esto, ubique el puntero del mouse debajo del título que se escribió.
Haga clic en Insertar y luego en Imagen.
Busque y elija la imagen que desea insertar, después presione Aceptar .
Pulse nuevamente Aceptar .
Detalle la manera en queda insertada la imagen.
Haga lo mismo para la otra ficha, en Propiedades opte por Portátil2.
Borre y escriba el nuevo contenido, posteriormente agregue la imagen.
Guarde y presione la tecla F12 para visualizar la página en el navegador.
Si hace clic en la otra ficha, automáticamente ésta modifica su contenido.
Para cambiar el color de fondo al seleccionar las fichas, elija del panel derecho la alternativa Estilos CSS, después en Todas las reglas, busque SpryTabbedPanels.css, luego dé clic sobre .TabbedPanelsTab y en propiedades, en background-color , escoja un color.
1 2 3
4
Posteriormente en el background-color , haga clic, en este ejemplo en el color azul oscuro.
Para modificar el color del texto, seleccione el nombre, es decir Portátil1 y en Propiedades, la alternativa CSS, posteriormente escoja el color blanco.
1
4
2
3
Haga lo mismo a ambas fichas.
Para el color del contenido de las fichas, dé clic en el estilo .TabbedPanelsContentGroup y escoja el color deseado, en este caso el color azul oscuro.
1
2
3 4
Observe.
Seleccione el texto del contenido de la ficha y modifique el color a blanco.
1
4 2
3
Analice.
Guarde, pulse F12 y observe cómo se ve en el navegador, note que la ficha seleccionada tiene un color de fondo distinto a la que no lo está.
Para cambiar el fondo de la ficha seleccionada, elija el estilo .TabbedPanelsTabSelected y modifique el fondo a color amarillo y el del texto a azul oscuro. Vea como quedan las dos fichas.
Guarde, después oprima F12 y visualice en el navegador, note que la ficha activa Portátil1 tiene el color de fondo amarillo.
Si elige la ficha Portátil2 , lo mismo.
Cómo crear un acordeón de Spry El acordeón permite mostrar el contenido de un tema y ocultar otro y viceversa, tal y como se muestra a continuación. Agregue una nueva capa en donde se indica.
Coloque el puntero del mouse dentro de la capa, luego haga clic en Insertar , después seleccione la opción Spry y elija Acordeón de Spry. 1
3 2
Contemple cómo se ve el acordeón, conformado por una etiqueta (nombre) y un contenido.
Observe que las propiedades del acordeón son similares a la de la fichas Spry, funcionan de igual manera. Los nombres de las etiquetas y el contenido se cambian en el mismo acordeón.
Seleccione el acordeón, después borre y digite el nuevo nombre en las etiquetas.
Ahora en el acordeón Árbol de Navidad va a agregar contenido, esto se hace de la misma forma que en las fichas Spry. Adicione una imagen en el contenido del acordeón, asimismo escriba texto si así lo desea y ubique el puntero dentro del acordeón.
Incorpore la figura.
Posteriormente en Propiedades del acordeón, opte por Muñecos Navideños.
Sitúe el puntero del mouse dentro del acordeón.
Inserte la ilustración.
Guarde, luego presione F12 para ver la página y los cambios en el navegador, detalle que automáticamente aparece el contenido del acordeón Árbol de Navidad.
Haga clic sobre el acordeón Muñecos de Navidad, después mire que el acordeón Árbol de Navidad se oculta instantáneamente o viceversa.
Para modificar el fondo del título del acordeón del estilo SpryAccordion.css, escoja la alternativa .AccordionFocused .AccordionPanelTab, después en background-color elija azul oscuro.
Posteriormente para modificar el fondo del acordeón que no está seleccionado, debe elegir la opción .AccordionFocused .AccordionPanelOpen .AccordionPanelTab y en background-color optar por el azul.
Observe.
Para cambiar el color del texto seleccione los títulos de los acordeones y en Propiedades, específicamente en CSS, elija el color, en este ejemplo blanco.
Fíjese como queda.
Guarde pulsando la tecla F12 y examine el trabajo en el navegador.
Si da clic en la opción Muñecos Navideños se esconde Árbol de Navidad y queda la seleccionada.
