2 COMPORTAMIENTOS_CS6 ....... F.pdf

8/19/2019 2 COMPORTAMIENTOS_CS6 ....... F.pdf

1/23

Estilos CSS

Tema 2. Comportamientos usando capas

Los comportamientos son acciones o efectos aplicables a las capas para que las páginasweb queden más dinámicas e interactivas. Con éstos se va a simular una galería fotográfica,en donde al hacer clic en una imagen, automáticamente ésta se muestre más grande, juntocon todas sus especificaciones.

Galería fotográfica utilizando capas

Inserte una nueva capa y en Propiedades, en la opción Elemento CSS-P, cambie el nombrea Menú.

Amplíe la capa a lo ancho y luego con la tecla F4, oculte los paneles y las propiedades paraque de esta manera se muestre todo el tamaño de la página, así al verla en el navegador, noaparecen descuadradas las capas.


2/23

Luego dentro de la capa agregue las imágenes pequeñas, observe cómo debe quedar.

Después introduzca una nueva capa y asígnele un nombre, en este caso Atleta.


3/23

Posteriormente dentro de la capa se inserta la imagen grande.

En seguida seleccione la capa y en Propiedades, específicamente en la opción Vis, dé clicen el botón y elija la alternativa Hidden para ocultar la capa, tal y como se muestra:


4/23

La capa desaparece, pero en el panel de Elementos PA, es posible ver la capa Atleta con laimagen del ojo cerrado a la izquierda, lo que indica que está oculta, también puede notar queaparece la capa apDiv1, la cual contiene las imágenes.

Si quiere volver a ver la capa Atleta, dé clic en la imagen del ojo.

Observe que la capa y la imagen vuelven a aparecer, mire que ahora la ilustración del ojo ya

está abierta, lo que indica que ya no está escondida.


5/23

Vuelva a ocultar la capa dando clic sobre la imagen del ojo hasta que quede cerrado.

Para aplicar un comportamiento, primero seleccione el objeto al cual se le ve va a asignar, eneste caso, la imagen pequeña de la atleta, luego en el panel derecho, elija la opciónInspector de etiquetas, después escoja Comportamientos; dé clic sobre el botón + y optepor la alternativa Mostrar-Ocultar elementos.

12

3

4


6/23

En la ventana que se enseña, seleccione la capa que se quiere mostrar y que está oculta, eneste caso div “Atleta”, en seguida, dé clic en Mostrar y por último en el botón Aceptar .

Observe el comportamiento que se acaba de crear, el cual indica que al hacer clic en laimagen, se divisa un elemento, en este sentido, la capa con la imagen más grande.

Guarde la página y ábrala en el navegador para ver el comportamiento en funcionamiento,pulse la tecla F12.

Al abrir la página en el navegador, si le aparece la barra de ejecutar scripts o controles ActiveX, dé clic en el botón Permitir contenido bloqueado.

1

2

3


7/23

Vea que la página aún no muestra la imagen oculta.

Para sacarla a relucir, recuerde que se había creado un comportamiento en el cual al hacerclic en la ilustración, automáticamente se muestra la capa con la imagen más grande, en estecaso se hizo clic en la imagen de la atleta, vea que ya aparece la capa con la imagen oculta.


8/23

Si se elige otra imagen con el mismo comportamiento, se vería la figura anterior también, porende, se va a modificar esto, de manera que cuando se ubique el puntero del mouse sobre laimagen, instantáneamente muestre la imagen más grande y que al quitarlo, la imagen se

vuelva a ocultar para así poder presentar a las demás.

Para cambiar dé clic sobre el botón del comportamiento onClick y escoja onMouseOver , elcual indica que al ubicar el mouse sobre el objeto, genere que se muestre un elemento, eneste caso, la capa con la imagen más grande.


9/23

Visualice que el comportamiento se modificó a onMouseOver .

Ahora se necesita otro comportamiento en el cual al quitar el puntero de la imagen, la capacon la figura más grande vuelva a ocultarse.

1

2


10/23

Para lo anterior se debe crear un nuevo comportamiento, recuerde los pasos, seleccione laimagen, luego dé clic en el botón + y elija Mostrar-Ocultar elementos.

En la ventana que aparece, seleccione la capa a ocultar, en este caso div “Atleta”, después

dé clic sobre el botón Ocultar y por último en Aceptar .

1

2

3

3

2

1


11/23

Observe que ya aparece el nuevo comportamiento.

Ahora se modifica el nuevo comportamiento por onMouseOut, el cual al quitar el puntero delmouse de la imagen, hace que automáticamente se oculte la capa que contiene la figura más

grande.

2

1


12/23

Visualice cómo quedan creados y configurados los dos comportamientos aplicados a unelemento, en este caso, a la imagen de la atleta pequeña.

Ahora guarde todos los cambios y contemple la página corriendo en el navegador.

Ubique el puntero del mouse sobre la imagen de la atleta y note que automáticamenteaparece la imagen más grande.


13/23

Luego quite el puntero de la ilustración y observe que la imagen más grande se oculta denuevo.

Los comportamientos funcionan cada vez que se ubique el puntero del mouse sobre laimagen o al quitarse.

Realice el ejemplo para el caso de la imagen del ciclista, creé una nueva capa y llámelaCiclista.


14/23

Inserte la imagen grande en la capa Ciclista.


15/23

Después ponga la capa Ciclista como oculta.

Vea como quedan las capas en los Elementos PA.

Ahora se establecen y se configuran los comportamientos, para ello, seleccione el elemento,en este caso, la imagen pequeña del ciclista; en el panel elija el Inspector de etiquetas,

luego Comportamientos, posteriormente dé clic en el botón + y opte por Mostrar-Ocultarelementos.


16/23

En la ventana que aparece, elija la capa a exhibir, en este caso div “ciclista” (Mostrar),luego dé clic en el botón Mostrar y posteriormente en Aceptar .

1

2

3

4

1

2

3


17/23

Visualice como queda el comportamiento.

Ahora se va a modificar por onMouseOver .


18/23

Vea como queda.

Agregue un nuevo comportamiento, dé clic en el botón + y luego en Mostrar-Ocultarelementos.

En la ventana que emerge escoja la capa a ocultar, en este caso div “Ciclista” (Ocultar),luego dé clic en el botón Ocultar y posteriormente en Aceptar .


19/23

Así queda creado el comportamiento.

1

2

3


20/23

Modificar por onMouseOut.

Observe cómo quedan creados y configurados los comportamientos.


21/23

Guarde cambios y abra la página en el navegador.

Ubique el puntero del mouse sobre la imagen del ciclista y vea que automáticamente aparecela imagen más grande.

Al quitar el puntero, la imagen más grande vuelve a ocultarse.


22/23

Con las dos ilustraciones configuradas, puede ubicar el puntero del mouse tanto en la figurade la atleta como en la del ciclista y automáticamente se mostrará la imagen más grande.Como práctica y ejercicio, configure los comportamientos a las demás imágenes.

Todo lo anterior es una forma fácil de crear una galería fotográfica.


23/23

Referencias

Servicio Nacional de Aprendizaje, SENA. (2009). Diseño web con Adobe

Dreamweaver CS3. Colombia: Autor.

Fotolia. (2004). Imágenes de alta definición para todos sus usos profesionales.Consultado el 11 de diciembre de 2013 en:http://co.fotolia.com/?utm_source=Google&utm_medium=cpc&utm_campaign=Fotolia_ CO%20Brand&tmad=c&tmcampid=6&tmplaceref=CO&gclid=CPbuw5KPv7sCFUtp7AodkiMAKg

Control del documento

Nombre Cargo Dependencia Fecha

Autor

José Geovanny Angulo Imbachi

Instructor

Centro deTeleinformática y

ProducciónIndustrial. Regional

Cauca

Diciembrede 2013

Guillermo AlexanderBurgos Ibarra

Instructor

Centro deTeleinformática y

Producción

Industrial. RegionalCauca

Diciembrede 2013

Adaptación

Rachman BustilloMartínez

Guionista -Línea de

Producción

Centro Agroindustrial.

Regional Quindío

Diciembrede 2013

Andrés FelipeVelandia Espitia

Integraciónde

Contenidos y Actividades

Centro Agroindustrial.

Regional Quindío

Diciembrede 2013
http://co.fotolia.com/?utm_source=Google&utm_medium=cpc&utm_campaign=Fotolia_CO%20Brand&tmad=c&tmcampid=6&tmplaceref=CO&gclid=CPbuw5KPv7sCFUtp7AodkiMAKghttp://co.fotolia.com/?utm_source=Google&utm_medium=cpc&utm_campaign=Fotolia_CO%20Brand&tmad=c&tmcampid=6&tmplaceref=CO&gclid=CPbuw5KPv7sCFUtp7AodkiMAKghttp://co.fotolia.com/?utm_source=Google&utm_medium=cpc&utm_campaign=Fotolia_CO%20Brand&tmad=c&tmcampid=6&tmplaceref=CO&gclid=CPbuw5KPv7sCFUtp7AodkiMAKghttp://co.fotolia.com/?utm_source=Google&utm_medium=cpc&utm_campaign=Fotolia_CO%20Brand&tmad=c&tmcampid=6&tmplaceref=CO&gclid=CPbuw5KPv7sCFUtp7AodkiMAKghttp://co.fotolia.com/?utm_source=Google&utm_medium=cpc&utm_campaign=Fotolia_CO%20Brand&tmad=c&tmcampid=6&tmplaceref=CO&gclid=CPbuw5KPv7sCFUtp7AodkiMAKghttp://co.fotolia.com/?utm_source=Google&utm_medium=cpc&utm_campaign=Fotolia_CO%20Brand&tmad=c&tmcampid=6&tmplaceref=CO&gclid=CPbuw5KPv7sCFUtp7AodkiMAKghttp://co.fotolia.com/?utm_source=Google&utm_medium=cpc&utm_campaign=Fotolia_CO%20Brand&tmad=c&tmcampid=6&tmplaceref=CO&gclid=CPbuw5KPv7sCFUtp7AodkiMAKg

Documents

2 COMPORTAMIENTOS_CS6 ....... F.pdf