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.

Acerca de los widgets de Spry

Un widget de Spry es un elemento de página que permite la interacción del usuario y, por tanto, ofrece una experiencia más completa. Un widget de Spry consta de las siguientes partes:

Estructura de widget

Bloque de código HTML que define la composición estructural del widget.

Comportamiento del widget

JavaScript que controla la respuesta del widget a los eventos iniciados por el usuario.

Estilo del widget

CSS que especifica el aspecto del widget.

El framework de Spry admite un conjunto de widgets reutilizables escritos en código HTML, CSS y JavaScript estándar. Puede insertar fácilmente estos widgets (el código es HTML y CSS en su forma más sencilla) y, a continuación, aplicar el estilo al widget. Los comportamientos del framework incluyen funciones que permiten a los usuarios mostrar u ocultar contenido de la página, cambiar el aspecto (por ejemplo, el color) de la página, interactuar con los elementos de menú y mucho más.

Cada widget del framework de Spry está asociado a archivos CSS y JavaScript exclusivos. El archivo CSS contiene todo lo necesario para aplicar estilos al widget y el JavaScript dota al widget de su funcionalidad. Cuando inserta un widget a través de la interfaz de Dreamweaver, Dreamweaver vincula automáticamente estos archivos a su página, para que el widget tenga funcionalidad y estilo.

Los archivos CSS y JavaScript asociados a un determinado widget reciben el nombre del widget, por lo que resulta fácil saber la correspondencia entre archivos y widgets. (Por ejemplo, los archivos asociados al widget de acordeón se llaman SpryAccordion.css y SpryAccordion.js). Cuando inserta un widget en una página guardada, Dreamweaver crea un directorio denominado SpryAssets en su sitio y guarda los correspondientes archivos JavaScript y CSS en dicha ubicación.

Recursos y tutoriales sobre widgets de Spry

Los siguientes recursos en línea proporcionan más información sobre la personalización de widgets de Spry.

Muestras de widgets de Spry

Personalización de barras de menús de Spry en Dreamweaver

Widgets de validación de Spry (tutorial en vídeo)

Inserción de un widget de Spry

  1. Seleccione Insertar > Spry y, a continuación, seleccione el widget que desea insertar.

Cuando inserta un widget, Dreamweaver incluye automáticamente los archivos JavaScript y CSS de Spry necesarios en su sitio al guardar la página.

Nota:

También puede insertar widgets de Spry a través de la categoría Spry del panel Insertar.

Selección de un widget de Spry

  1. Mantenga el puntero del ratón sobre el widget hasta que vea el contorno azul en la ficha del mismo.
  2. Haga clic en la ficha del widget en la esquina superior izquierda del widget.

Edición de un widget de Spry

  1. Seleccione el widget que desea editar y realice los cambios en el inspector de propiedades (Ventana > Propiedades).

Para más detalles sobre cómo realizar cambios en widgets específicos, consulte las secciones correspondientes para cada widget.

Aplicación de estilo a un widget de Spry

  1. Localice el archivo CSS correspondiente al widget en la carpeta SpryAssets del sitio y edítelo en función de sus preferencias.

Para más detalles sobre cómo aplicar estilo a widgets específicos, consulte las secciones de personalización correspondientes para cada widget.

Nota:

También puede aplicar formato a un widget de Spry mediante la edición de estilos en el panel CSS, al igual que con cualquier otro elemento con estilo de la página.

Obtención de más widgets

Hay muchos más widgets Web disponibles que los widgets de Spry que se instalan con Dreamweaver. Adobe Exchange ofrece widgets Web desarrollados por otros profesionales creativos.

  1. Seleccione Buscar widgets web en el menú Ampliar Dreamweaver en la barra de la aplicación.

Para ver un vídeo de introducción al uso de los widgets Web, elaborado por el equipo de ingeniería de Dreamweaver, consulte www.adobe.com/go/dw10widgets_es.

Cambio de la carpeta predeterminada de activos de Spry

Cuando inserta un widget, un conjunto de datos o un efecto de Spry en una página guardada, Dreamweaver crea un directorio SpryAssets en su sitio y guarda los correspondientes archivos JavaScript y CSS en dicha ubicación. Puede cambiar la ubicación predeterminada en la que Dreamweaver guarda los activos de Spry si prefiere guardarlos en otro lugar.

  1. Seleccione Sitio > Administrar sitios.
  2. Seleccione el sitio en el cuadro de diálogo Administrar sitios y haga clic en Editar.
  3. En cuadro de diálogo Configuración del sitio, expanda la Configuración avanzada y seleccione la categoría Spry.
  4. Introduzca la ruta de la carpeta que desea utilizar para los activos de Spry y haga clic en Aceptar. También puede hacer clic en el icono de carpeta para localizar una ubicación.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

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