Uso del widget de acordeón de spry en dreamweaver

Uso del widget de acordeón de Spry en Dreamweaver

Uso del widget de acordeón de Spry Creatividad y diseño Marketing y análisis Adobe

DREAMWEAVER

Aprendizaje y asistencia

PDF y firmas electrónicas

Introducción

Guía del usuario



Soluciones e

Tutoriales

EN ESTA PÁGINA Acerca del widget de acordeón Inserción y edición del widget de acordeón Personalización del widget de acordeón Se aplica a: Dreamweaver Última publicación: 5 de enero de 2017

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 del widget de acordeón Un widget de acordeón es un conjunto de paneles que pueden contraerse y que tienen capacidad para almacenar una gran cantidad de contenido en un espacio reducido. Los visitantes pueden hacer clic en la ficha del panel para mostrar u ocultar el contenido almacenado en el acordeón. Los paneles del acordeón se amplían o contraen en función de las fichas que elijan los visitantes.

Solamente puede haber un panel de contenido abierto y visible en un acordeón en cada momento.

En el siguiente ejemplo se muestra un widget de acordeón, con el primer panel ampliado:

https://helpx.adobe.com/la/dreamweaver/using/spry-accordion-widget.html[24/05/2018 11:38:14 p. m.]

Uso del widget de acordeón de Spry en Dreamweaver

Widget de acordeón

A. Ficha de panel acordeón B. Contenido del panel acordeón C. Panel acordeón (abierto)

El código HTML predeterminado del widget de acordeón consta de una etiqueta div externa que contiene todos los paneles, una etiqueta div para cada panel, y una etiqueta div de encabezado y una div de contenido dentro de la etiqueta de cada panel. El número de paneles individuales que puede contener un widget de acordeón es ilimitado. El código HTML del widget de acordeón también incluye etiquetas script en el encabezado del documento y detrás del formato HTML del acordeón.

Para una explicación detallada sobre el funcionamiento del widget de acordeón, incluida una descripción completa del código del widget de acordeón, consulte www.adobe.com/go/learn_dw_spryaccordion_es.

Para ver un tutorial acerca del widget de acordeón, consulte www.adobe.com/go/vid0167_es.

Inserción y edición del widget de acordeón

Inserción del widget de acordeón 1

Seleccione Insertar > Spry > Acordeón de Spry.

https://helpx.adobe.com/la/dreamweaver/using/spry-accordion-widget.html[24/05/2018 11:38:14 p. m.]

Uso del widget de acordeón de Spry en Dreamweaver

Nota: También puede insertar un widget de acordeón a través de la categoría Spry del panel Insertar.

Adición de un panel a un widget de acordeón 1

Seleccione un widget de acordeón en la ventana de documento.

2

En el inspector de propiedades (Ventana > Propiedades), haga clic en el botón Más (+) de Paneles.

3

(Opcional) Seleccione el texto del panel en la vista de Diseño y modifíquelo para cambiar su nombre.

Eliminación de un panel de un widget de acordeón 1

Seleccione un widget de acordeón en la ventana de documento.

2

En el menú Paneles del inspector de propiedades (Ventana > Propiedades), seleccione el nombre del panel que desea eliminar y, a continuación, haga clic en el botón Menos (-).

Apertura de un panel para su edición 1

Siga uno de estos procedimientos:

Pase el puntero del ratón por la ficha del panel que desea abrir en la vista de Diseño y, a continuación, haga clic en el icono de ojo que aparece a la derecha de la ficha.

Seleccione un widget de acordeón en la ventana de documento y, a continuación, haga clic en el nombre del panel para editarlo en el menú Paneles del inspector de propiedades (Ventana > Propiedades).

https://helpx.adobe.com/la/dreamweaver/using/spry-accordion-widget.html[24/05/2018 11:38:14 p. m.]

Uso del widget de acordeón de Spry en Dreamweaver

Cambio del orden de los paneles 1

Seleccione un widget de acordeón en la ventana de documento.

2

En el inspector de propiedades (Ventana > Propiedades), seleccione el nombre del panel Acordeón que desea mover.

3

Haga clic en las flechas arriba o abajo para mover el panel en la dirección deseada.

Personalización del widget de acordeón Aunque el inspector de propiedades permite realizar cambios simples a un widget de acordeón, no admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un widget de acordeón y crear un acordeón con el estilo que desee.

Para realizar una consulta rápida sobre el cambio de los colores del widget de acordeón, consulte el artículo de David Powers Quick guide to styling Spry tabbed panels, accordions, and collapsible panels (guía rápida sobre la aplicación de estilo a paneles en ficha, acordeones y paneles que pueden contraerse de Spry).

Para ver una lista detallada de tareas de estilo, consulte www.adobe.com/go/learn_dw_spryaccordion_custom_es.

Todas las reglas CSS de los siguientes temas se refieren a las reglas predeterminadas que se encuentran en el archivo SpryAccordion.css. Dreamweaver guarda el archivo SpryAccordion.css en la carpeta SpryAssets de su sitio cuando crea un widget de acordeón de Spry. Este archivo también contiene información comentada sobre los distintos estilos que se pueden aplicar al widget, por lo que puede resultar útil consultarlo.

Nota: Aunque es fácil editar las reglas para el widget de acordeón directamente en el archivo CSS, también puede utilizar el panel Estilos CSS para editar el código CSS del acordeón. El panel Estilos CSS resulta útil para ubicar las clases CSS asignadas a partes distintas del widget, en especial si utiliza el modo Actual del panel.

https://helpx.adobe.com/la/dreamweaver/using/spry-accordion-widget.html[24/05/2018 11:38:14 p. m.]

Uso del widget de acordeón de Spry en Dreamweaver

Aplicación de estilo al texto del widget de acordeón

Puede aplicar estilo al texto de un widget de acordeón estableciendo las propiedades para todo el contenedor del widget de acordeón o para los componentes del widget de forma individual.

1

Para modificar el estilo del texto de un widget de acordeón, utilice la tabla siguiente para ubicar la regla CSS correspondiente y, a continuación, añada sus propias propiedades y valores de estilo de texto:

Texto que se modifica

El texto de todo el acordeón (incluye tanto el panel de ficha como el de contenido)

Solo el texto de las fichas de los paneles del acordeón

Solo el texto de los paneles de contenido del acordeón

Regla CSS correspondiente .Accordion o .AccordionPanel

.AccordionPanelTab

.AccordionPanelConten t

Ejemplo de propiedades y valores que se añaden

font: Arial; fontsize:medium;

font: Arial; fontsize:medium;

font: Arial; fontsize:medium;

Cambio de los colores de fondo del widget de acordeón 1

Para modificar los colores de fondo de partes distintas de un widget de acordeón, utilice la tabla siguiente para ubicar la regla CSS correspondiente y, a continuación, añada o modifique las propiedades y valores de color de fondo:

Parte del widget que se cambia

Color de fondo de las fichas

Regla CSS correspondiente

.AccordionPanelTab

https://helpx.adobe.com/la/dreamweaver/using/spry-accordion-widget.html[24/05/2018 11:38:14 p. m.]

Ejemplo de propiedades y valores que se añaden o modifican

background-color:

Uso del widget de acordeón de Spry en Dreamweaver

de los paneles del acordeón

Color de fondo de los paneles de contenido del acordeón

Color de fondo del panel del acordeón abierto

Color de fondo de las fichas de los paneles al pasar

Color de fondo de la ficha del panel abierto al pasar el puntero del ratón

#CCCCCC; (Valor predeterminado). .AccordionPanelConten t

.AccordionPanelOpen .AccordionPanelTab

.AccordionPanelTabHov er

.AccordionPanelOpen .AccordionPanelTabHov

background-color: #CCCCCC;

background-color: #EEEEEE; (Valor predeterminado).

color: #555555; (Valor predeterminado).

color: #555555; (Valor predeterminado).

er

Limitación del ancho de un acordeón

De forma predeterminada, el widget de acordeón se amplía para llenar el espacio disponible. No obstante, puede limitar el ancho de un widget de acordeón estableciendo una propiedad de ancho para el contenedor del acordeón.

1

Abra el archivo SpryAccordion.css y localice la regla .Accordion CSS. Esta regla define las propiedades del elemento de contenedor principal del widget de acordeón.

Nota: También puede seleccionar el widget de acordeón y buscar en el panel Estilos CSS (Ventana > Estilos CSS) para localizar la regla. Asegúrese de que el panel está en modo Actual.

2

Añada una propiedad y un valor de ancho a la regla, por ejemplo, width: 300px;.

https://helpx.adobe.com/la/dreamweaver/using/spry-accordion-widget.html[24/05/2018 11:38:14 p. m.]

Uso del widget de acordeón de Spry en Dreamweaver

Páginas relacionadas El panel Estilos CSS en modo Actual

Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

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

^ Volver arriba

DREAMWEAVER < Ver todas las aplicaciones

Aprendizaje y asistencia Introducción Guía del usuario Tutoriales

Pregunte a la comunidad Publique sus preguntas para que le respondan expertos en la materia.

Preguntar ahora

Contacto Ayuda en directo con uno de nuestros consejeros Comenzar

¿Le ha servido de ayuda esta página?

https://helpx.adobe.com/la/dreamweaver/using/spry-accordion-widget.html[24/05/2018 11:38:14 p. m.]

Sí

No

Uso del widget de acordeón de Spry en Dreamweaver

Productos

Blogs y comunidad

Asistencia técnica

Adobe

Acrobat Reader DC

Adobe Flash Player

Adobe Air

Adobe Shockwave Player

Cambiar región ∨ Copyright © 2018 Adobe. All rights reserved. / Privacidad (ACTUALIZACIÓN) / Condiciones de uso

https://helpx.adobe.com/la/dreamweaver/using/spry-accordion-widget.html[24/05/2018 11:38:14 p. m.]

/ Cookies / AdChoices