Aplicación de efectos de Spry en Dreamweaver

Buscar
Nota:

Los widgets de Spry se han sustituido por widgets jQuery en Dreamweaver CC y versiones posteriores. Aunque todavía pueden modificarse los widgets de Spry existentes en la página, no se pueden agregar nuevos widgets de Spry.

Introducción a los efectos de Spry

Los efectos de Spry son mejoras visuales que se pueden aplicar a casi cualquier elemento de una página HTML mediante JavaScript. Los efectos se utilizan con frecuencia para resaltar información, crear transiciones animadas o modificar una página visualmente durante algún tiempo. Puede aplicar efectos a elementos HTML sin tener que utilizar otras etiquetas personalizadas.

Nota:

Para aplicar un efecto a un elemento, debe estar seleccionado o tener un ID. Por ejemplo, si va a aplicar un resaltado a una etiqueta div que no está seleccionada, ésta debe tener un valor de ID válido. Si el elemento no dispone aún de un ID, tendrá que añadir uno al código HTML.

Los efectos pueden modificar la opacidad, escala y posición del elemento, así como las propiedades de estilo, como el color de fondo. Puede crear efectos visuales interesantes mediante la combinación de una o varias propiedades.

Los efectos están basados en Spry y, por lo tanto, cuando un usuario hace clic en un elemento con un efecto, no es necesario actualizar toda la página HTML, sino que solo se actualiza de forma dinámica dicho elemento.

Spry incluye estos efectos:

Aparecer/Desvanecer

Hace que aparezca o desaparezca el elemento.

Resaltado

Cambia el color de fondo de un elemento.

Persiana

Simula la persiana de una ventana que sube o baja para ocultar o mostrar el elemento.

Deslizar

Mueve el elemento hacia arriba o hacia abajo.

Aumentar/Reducir

Aumenta o reduce el tamaño del elemento.

Agitar

Simula la agitación del elemento de izquierda a derecha.

Arrinconar

Hace que desaparezca el elemento por la esquina superior izquierda de la página.

Nota:

Cuando utiliza un efecto, se añaden varías líneas de código al archivo en la vista de Código. Una línea identifica el archivo SpryEffects.js, necesario para incluir efectos. Si elimina esta línea del código, no funcionarán los efectos.

Para una introducción más detallada de los efectos Spry disponibles en el framework de Spry, visite www.adobe.com/go/learn_dw_spryeffects_es.

Aplicación de un efecto Aparecer/Desvanecer

Nota:

Puede utilizar este efecto con cualquier elemento HTML excepto con applet, body, iframe, object, tr, tbody o th.

  1. (Opcional) Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto.
  2. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el icono de signo más (+) y seleccione Efectos > Aparecer/Desvanecer en el menú.
  3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha seleccionado un elemento, elija <Selección actual>.
  4. En el cuadro Duración del efecto, defina el tiempo, en milisegundos, que desea que dure el efecto.
  5. Seleccione el efecto que desea aplicar: Desvanecer o Aparecer.
  6. En el cuadro Desvanecer desde, defina el porcentaje de opacidad que desea que tenga el efecto cuando aparezca.
  7. En el cuadro Desvanecer hasta, defina el porcentaje de opacidad que desea que tenga el efecto cuando desaparezca.
  8. Seleccione Alternar efecto si desea que el efecto sea reversible, es decir, que desaparezca y aparezca (y viceversa) con clics sucesivos.

Aplicación de un efecto Persiana

Nota:

Solo puede utilizar este efecto con los siguientes elementos HTML: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu o pre.

  1. (Opcional) Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto.
  2. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el icono de signo más (+) y seleccione Efectos > Persiana del menú.
  3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha seleccionado un elemento, elija <Selección actual>.
  4. En el cuadro Duración del efecto, defina el tiempo, en milisegundos, que desea que dure el efecto.
  5. Seleccione el efecto que desea aplicar: Subir persiana o Bajar persiana.
  6. En el cuadro Subir desde/Bajar desde, defina el punto de inicial de desplazamiento de la persiana como porcentaje o como número de píxeles. Estos valores se calculan desde la parte superior del elemento.
  7. En el cuadro Subir hasta/Bajar hasta, defina el punto de final de desplazamiento de la persiana como porcentaje o como número de píxeles. Estos valores se calculan desde la parte superior del elemento.
  8. Seleccione Alternar efecto si desea que el efecto sea reversible, es decir, que la persiana suba y baje con clics sucesivos.

Aplicación de un efecto Aumentar/Reducir

Nota:

Puede utilizar este efecto con los siguientes elementos HTML: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu o pre.

  1. (Opcional) Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto.
  2. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el icono de signo más (+) y seleccione Efectos > Aumentar/Reducir del menú emergente.
  3. Seleccione el ID del elemento en el menú emergente Elemento de destino. Si ya ha seleccionado un elemento, elija <Selección actual>.
  4. En el cuadro Duración del efecto, defina el tiempo, en milisegundos, que desea que dure el efecto.
  5. Seleccione el efecto que desea aplicar: Aumentar o Reducir.
  6. En el cuadro Aumentar/Reducir desde, defina el tamaño del elemento cuando se inicie el efecto. Puede elegir un porcentaje o un valor en píxeles.
  7. En el cuadro Aumentar/Reducir hasta, defina el tamaño del elemento cuando finalice el efecto. Puede elegir un porcentaje o un valor en píxeles.
  8. Si elige Píxeles en los cuadros Aumentar/Reducir Desde o Hasta, se activa el campo ancho/alto. En función de la opción elegida, el elemento aumentará o disminuirá de tamaño proporcionalmente.
  9. Seleccione si desea que el elemento aumente o disminuya de tamaño en la esquina superior izquierda de la página o en el centro de la misma.
  10. Seleccione Alternar efecto si desea que el efecto sea reversible, es decir, que el elemento aumente o disminuya de tamaño con clics sucesivos.

Aplicación de un efecto Resaltado

Nota:

Puede utilizar este efecto con cualquier elemento HTML excepto applet, body, frame, frameset o noframes.

  1. (Opcional) Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto.
  2. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el icono de signo más (+) y seleccione Efectos > Resaltado del menú.
  3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha seleccionado un elemento, elija <Selección actual>.
  4. En el cuadro Duración del efecto, defina el tiempo, en milisegundos, que desea que dure el efecto.
  5. Seleccione el color con el que desea que se inicie el resaltado.
  6. Seleccione el color con el que desea que se finalice el resaltado. Este color se mantiene solamente el tiempo definido en Duración del efecto.
  7. Seleccione el color del elemento una vez finalizado el resaltado.
  8. Seleccione Alternar efecto si desea que el efecto sea reversible, es decir, que vaya de un color a otro del resaltado con clics sucesivos.

Aplicación de un efecto Agitar

Nota:

Puede utilizar este efecto con los siguientes elementos HTML: address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre o table.

  1. (Opcional) Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto.
  2. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el icono de signo más (+) y seleccione Efectos > Agitar del menú.
  3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha seleccionado un elemento, elija <Selección actual>.

Aplicación de un efecto Deslizar

Para que el efecto Deslizar funcione correctamente, el elemento de destino debe estar rodeado por una etiqueta contenedora que tenga un ID exclusivo. La etiqueta contenedora que rodee al elemento de destino deberá ser una etiqueta blockquote, dd, form, div o center.

La etiqueta del elemento de destino debe ser una de las siguientes: blockquote, dd,div, form, center, table, span, input, textarea, select o image.

  1. (Opcional) Seleccione la etiqueta contenedora del contenido al que desea aplicar el efecto.
  2. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el icono de signo más (+) y seleccione Efectos > Deslizar del menú.
  3. Seleccione el ID de la etiqueta contenedora en el menú Elemento de destino. Si el contenedor ya está seleccionado, elija <Selección actual>.
  4. En el cuadro Duración del efecto, defina el tiempo, en milisegundos, que desea que dure el efecto.
  5. Seleccione el efecto que desea aplicar: Deslizar arriba o Deslizar abajo.
  6. En el cuadro Deslizar arriba desde, defina el punto de inicial de deslizamiento como porcentaje o como número de píxeles.
  7. En el cuadro Deslizar arriba hasta, defina el punto de final de deslizamiento como porcentaje o como número positivo de píxeles.
  8. Seleccione Alternar efecto si desea que el efecto sea reversible, es decir, que el elemento se deslice hacia arriba y hacia abajo con clics sucesivos.

Aplicación de un efecto Arrinconar

Nota:

Este efecto solo se puede utilizar con los siguientes objetos HTML: address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu o pre.

  1. (Opcional) Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto.
  2. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el icono de signo más (+) y seleccione Efectos > Arrinconar del menú.
  3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha seleccionado un elemento, elija <Selección actual>.

Adición de otro efecto

Puede asociar varios comportamientos de efectos al mismo elemento para obtener resultados interesantes.

  1. (Opcional) Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto.
  2. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el icono de signo más (+) y seleccione un efecto del menú Efectos.
  3. Seleccione el ID del elemento en el menú desplegable Elemento de destino. Si ya ha seleccionado un elemento, elija <Selección actual>.

Eliminación de un efecto

Puede quitar uno o varios comportamientos de efectos de un elemento.

  1. (Opcional) Seleccione el elemento de contenido o de diseño al que desea aplicar el efecto.
  2. En el panel Comportamientos (Ventana > Comportamientos), haga clic en el efecto que desea eliminar de la lista de comportamientos.
  3. Siga uno de estos procedimientos:

    • Haga clic en el botón Quitar evento de la barra de títulos del subpanel (-).

    • Haga clic con el botón derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en el comportamiento y seleccione Eliminar comportamiento.

Logotipo de Adobe

Inicia sesión en tu cuenta

Vínculos rápidos

Ver todos los planes Administrar los planes

Avisos legales    |    Política de privacidad en línea