All Articles Dreamweaver
Adición y edición de acordeones de Spry El uso de CSS en Dreamweaver
David Smith on Sun, November 13th 0 comments
Spry Accordions are a delightful way in which to deliver large amounts of information in a confined space. They are also a lot of fun for users if you use them in a clever way. David Smith shows how.

Acordeones de Spry son una deliciosa manera en la que para entregar grandes cantidades de información en un espacio confinado. También son una


Paso 1 - Crear una DIV AP

Me gusta controlar la posición de un Spry, colocándolo dentro de un DIV AP. Para crear una Div PA vaya al Panel de Insertar y seleccione Layout

AP Div Draw

Div PA Dibuja


Utilice el cursor para dibujar un cuadro en la página. El cuadro azul que aparece es la de Div PA.


Paso 2 - La posición y el tamaño de la Div PA

Para mover la Div PA (que es sólo una etiqueta DIV que tiene un poco de CSS para controlar su formato) agarrar el mango blanco pequeño en la parte superior izquierda y arrastre su interposición a la página.

Re-size AP DiV

Cambiar el tamaño de Div PA


Para cambiar el tamaño de la Div PA se pudiera tomar uno de sus puntos de anclaje azules y arrastre hasta el tamaño deseado.


Paso 3 - Inserción de un acordeón de Spry

Haga clic en el interior de la Div PA para activar el cursor en el interior, y luego desde el panel de Insertar elija Diseño

Spry inserted

Spry introducido


Un acordeón de Spry aparece dentro de la Div PA que dibujó.


Paso 4 - Agregar más paneles

El acordeón de Spry utiliza paneles para permitir a los usuarios mostrar u ocultar su contenido en un movimiento similar al de un acordeón, de ahí el nombre. Voy a agregar un poco más.

Con el acordeón de Spry seleccionados (que se puede hacer haciendo clic en la etiqueta de Acordeón de color cian Spry). Usar el Panel de Propiedades para agregar más etiquetas.

Labels in properties

Etiquetas en las propiedades


Utilice el para añadir dos paneles más para que veas esto:

More labels added to spry

Más etiquetas añadidas a spry


Paso 5 - editar el contenido de la Spry

Al pasar el cursor sobre cada ficha de etiqueta en el acordeón de Spry, un símbolo del ojo poco aparecerá. Al hacer clic en este símbolo para abrir el contenido de la pestaña en particular lo que le permite editar.

Eye and contents

Los ojos y el contenido


Resaltar el texto de la etiqueta le permite cambiar el nombre de la etiqueta. Resaltando el texto "Contenidos" le permite editar el texto que figura dentro de la Spry.

Sugerencia: copiar y pegar grandes cantidades de texto aquí.

Filled Spry

Lleno de Spry


Repite esto hasta que tenga el contenido y los nombres de cada etiqueta.

Para ver cómo funciona el acordeón de Spry, poner en Live View y haga clic en cada ficha de paneles a la vez. Bonito, ¿verdad?

Live View Button

Ver en vivo el botón


Mantenga la vista en vivo activa a partir de ahora para que pueda supervisar los cambios que está haciendo.


Paso 6 - Modificar el estilo de las pestañas del panel

Echa un vistazo en el panel Estilos CSS, verá una hoja de estilo llamado SpryAccordion.css:

Spry CSS

Spry CSS


Haga clic en la flecha para revelar el contenido de la hoja de estilos y verá una lista de estilos de clase compuesto, todo lo cual el control de aspectos individuales de la forma en que el acordeón de Spry se ve.

Panel Tab Style

Panel Estilo Tab


Como verán en las propiedades de CSS que el color de fondo por defecto es # CCCCCC. Cambiar este texto a leer # 00CC66 (Consejo: esto puede ser reducido a # 0C6)

Green tabs

Lengüetas verdes


Los paneles cambiará a verde.

. AccordionPanelOpen y AccordionPanelTab. Y el color de fondo a # 0F9.


Paso 7 - Modificar el estilo de la aquí Enfocado

Intente hacer clic en las lengüetas del panel y verás que se vuelven azules. Esto es porque el control de las propiedades CSS Enfocado se establece en azul:

Blue Spry

Azul Spry


Para cambiar a lo siguiente en el CSS:

Para crear un punto culminante de la ficha que está abierto:

  • Select .AccordionFocused, .AccordionPanelOpen and .AccordionPanelTab and set their background color to #9FC


Para asegurarse de que todos los paneles cerrados, mientras que el acordeón de Spry está activo es el mismo verde que los paneles cerrados cuando el acordeón de Spry no está activa:

  • Select .AccordionFocused and .AccordionPanelTab and set their background color to #0C6

Finished Spry

Terminado Spry


Usted podría continuar para agregar o modificar los parámetros en cualquier clase y todos los estilos en la hoja de estilo SpryAccordion.css desee, como los principios son los mismos. Siga adelante y trate de añadir color al texto, o cambiar el tipo de letra, etc, hasta crear un estilo que más le convenga.


Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: