ubiquitour.com

Cómo utilizar el Widget de información sobre herramientas Spry en Dreamweaver CS4

Una de las nuevas herramientas de Spry de Adobe Dreamweaver CS4 es el widget de información sobre herramientas. El marco Spry de Adobe utiliza una combinación de CSS y JavaScript para mejorar características de la página web. El widget de información sobre herramientas es similar a lo que sucede cuando se utiliza un atributo title en una etiqueta, excepto esta descripción Spry tiene una hoja de estilo y un archivo JavaScript a lo que se puede personalizar. Aquí es cómo trabajar con él.

Instrucciones

1 Crear el texto en Dreamweaver donde desea agregar la información sobre herramientas. En este ejemplo destaqué el acrónimo STEM.

2Cómo utilizar el Widget de información sobre herramientas Spry en Dreamweaver CS4

En la categoría Spry de la barra Insertar, seleccione el icono Descripción Spry. En el diseño del espacio de trabajo clásico de la barra Insertar es el último icono Spry de la derecha.

3Cómo utilizar el Widget de información sobre herramientas Spry en Dreamweaver CS4

El término llega envuelto en una etiqueta span en el código que se activará la descripción. Un div que contiene el contenido de tooltip (ocultado por el CSS hasta que se necesite) también se agrega a la página. En la vista Diseño se ve un cuadro azul con la etiqueta de información sobre herramientas Spry donde escribe el contenido que desea que aparezca en la descripción. Tenga en cuenta que normalmente aparecen en la parte inferior de la página, que usted tenga que desplazarse para encontrar el cuadro del contenido de la descripción. Está cerca de la oración del ejemplo aquí porque eso es todo el contenido de la página de ejemplo.

4 Guarde la página. Dreamweaver le avisará que hay dos archivos dependientes necesarios. Haga clic en aceptar y los archivos se agregarán a una carpeta denominada SpryAssets en el sitio raíz. No olvide cargar esta carpeta en el servidor.

5Cómo utilizar el Widget de información sobre herramientas Spry en Dreamweaver CS4

Puede establecer algunas propiedades para la descripción del uso de las propiedades. Haga clic en la etiqueta de Descripción azul para ver la descripción del inspector de propiedades. Por ejemplo, puede establecer comportamiento horizontal de desplazamiento y el ratón en las propiedades.

6 Verás un nuevo archivo CSS en el panel CSS llamado SpryTooltip.css. Utilice esta hoja de estilo para establecer colores y color de fondo y otras propiedades relacionadas con el aspecto de la descripción.

Consejos y advertencias

  • Si nos fijamos en la vista Código, verá un operador de JavaScript que Dreamweaver inserta al final de la página. Se trata además del archivo JavaScript que se guarda en la carpeta SpryAssets.