Dreamweaver - CS3

Lección 38: Marco de Trabajo Spry (2)

38/58 Lecciones 

Panel Tabulado Spry

Con el botón “Panel Tabulado Spry”, podemos crear una ventana que tiene varias pestañas.
Para crear un panel con pestañas, primero coloca el cursor en tu documento y después haz click en el “Panel Tabulado Spry”.
Otra vez, conseguimos una ventana de advertencia que muestran los archivos necesitados para estos objetos (Panel Tabulado Spry) serán creados y copiados al mapa de sitio.
Haz click en el botón Aceptar.

En el panel de Estilos CSS, podemos aplicar los diferentes estilos a los estilos por defecto, seleccionándolos en la parte media superior y ajustándolos en la media inferior.

Para añadir pestañas, haz click en el signo más en la ventana propiedades y elimina las pestañas, selecciona las pestañas en la ventana y haz click en el signo menos.

Para reponer una pestaña, márcala en la lista y haz click en la flecha que apunta hacia abajo.

Puedes cambiar el texto de las pestañas haciendo doble click en la misma pestaña.
Añadiendo o editando datos a una pestaña está hecho en la misma forma como añadiendo o editando datos en una página.
Primero, selecciona la pestaña, colocando el puntero del mouse sobre la barra de título de la pestaña. Cuando un ícono de ojos aparezcan, haz click en éste y añade los datos. (Texto, imagenes, tablas, no importa que sea).

Spry Accordion

Un objeto Spry accordion es un panel colapsable que guarda una serie de contenido en espacio limitado.
Como un “Panel Tabulado Spry” los paneles accordion puede contener un número de páneles.

Para añadir un “Spry Accordion” widget, primero coloca tu cursor en tu documento y después haz click en “Spry accordion”.
Otra vez aparece una ventana advertencia diciendo que los archivos necesitados para éste objeto (Spry accordion) será creado y copiado al mapa de sitio.

Haz click en el botón Aceptar.

En el panel de estilos CSS, podemos aplicar diferentes estilos a los estilos por defecto, seleccionándolos a la mitad superior y ajustandolos en la parte baja.

Para añadir paneles, haz click en el signo de más en la ventana de propiedades y para eliminar paneles, selecciona el panel en la ventana y haz click en el signo menos.

Para reposición de un panel, seleccionalo en la lista y haz click en la flecha que apunta hacia abajo o hacia arriba.

Puedes cambiar el título del panel seleccionandolo y después cambiándolo.
Añadiendo o editando datos a la pestaña es de la misma forma que añadiendo o editando datos en una página.
Primero, selecciona la pestaña colocando el puntero del mouse sobre la barra de título de la pestaña. Cuando un ícono de ojos aparezcan, haz click en éste ícono y añade los datos.

Panel Spry Colapsable

Un panel colapsable es un panel que guarda los datos en espacios limitados.
Haciendo click en la pestaña del objeto, los usuarios pueden ocultar o desplegar el contenido en el panel colapsable.
El siguiente ejemplo muestra un Panel Colapsable, en carpeta y sin carpeta.

Para añadir un “Panel Spry Colapsable”, similar a todos los otros obejtos en los objetos Spry previos, solo haz click en el botón “Panel Spry Colapsable”.

Si deseas modificar el contenido del “Panel Colapsable” widget, entonces escoge la opción de caja “Mostrar” a “Abrir”, el cual des encarpetará el panel donde puedes seleccionar texto o insertarlo.
Con la configuración de la caja “Estatus por Defecto”, determinamos el estado por defecto (abierto o cerrado} para el objeto “panel colapsable” cuando la página Web es abierta en un navegador.
Cuando la caja “Habilitar animación” es seleccionado, el panel abre y cierra gradualmente y en un momento suave, cuando el visitante hace click en la pestaña panel. Cuando está deshabilitado, el panel abre y cierra abruptamente.

Cualquiera que esté bajo el panel colapsable, sea una imagen, tabla o lo que sea, cuando el panel colapsable es abierto, se cambiará los datos de abajo.

Quizá otro tip:
Si deseas cambiar el ancho de cualquier objeto Spry, selecciona la línea de arriba del panel “Toda regla” y adiciona el atributo “ancho” e introduce el ancho en pixeles.

Increíble! Has completado Lección 38 INICIAR EL PROXIMO LECCIÓN