X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Adición y edición de acordeones de Spry El uso de CSS en Dreamweaver
Traducido por Google Translate

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.


David Smith

David Smith | Articles by this author

David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link