Trabajo con el widget de paneles en fichas de Spry en Dreamweaver
Trabajo con el widget de Marketing paneles en fichas de Spry Creatividad y diseño y análisis PDF y firmas electrónicas Adobe
DREAMWEAVER
Aprendizaje y asistencia
Introducción
Guía del usuario
Soluciones e
Tutoriales
EN ESTA PÁGINA Acerca del widget de paneles en fichas Inserción y edición del widget de paneles en fichas Personalización del widget de paneles en fichas 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 paneles en fichas Un widget de paneles en fichas es un conjunto de paneles que pueden almacenar contenido en un espacio reducido. Los visitantes pueden hacer clic en la ficha del panel para mostrar u ocultar el contenido almacenado en los paneles en fichas a los que desean acceder. Los paneles del widget se amplían o contraen en función de las fichas que elijan los visitantes. Solamente puede haber un panel de contenido abierto en un widget de paneles de fichas en cada momento. En el siguiente ejemplo se muestra un widget de paneles en fichas, con el tercer panel abierto:
https://helpx.adobe.com/mx/dreamweaver/using/spry-tabbed-panels-widget.html[24/05/2018 11:38:37 p. m.]
Trabajo con el widget de paneles en fichas de Spry en Dreamweaver
Widget de Paneles en fichas
A. Ficha B. Contenido C. Widget de Paneles en fichas D. Panel en ficha
El código HTML de un widget de paneles en fichas consta de una etiqueta div externa que contiene todos los paneles, una lista de fichas, una etiqueta div que contiene todos los paneles y una etiqueta div para cada panel de contenido. El código HTML del widget de paneles en fichas también incluye etiquetas script en el encabezado del documento y detrás del formato HTML del widget de paneles en fichas. Para una explicación detallada sobre el funcionamiento del widget de paneles en fichas, incluida una anatomía completa del código del widget, consulte www.adobe.com/go/learn_dw_sprytabbedpanels_es.
Inserción y edición del widget de paneles en fichas
Inserción del widget de paneles en fichas 1
Seleccione Insertar > Spry > Paneles en fichas de Spry.
Nota: También puede insertar un widget de paneles en fichas a través de la categoría Spry del panel Insertar.
Adición de un panel a un widget de paneles en fichas https://helpx.adobe.com/mx/dreamweaver/using/spry-tabbed-panels-widget.html[24/05/2018 11:38:37 p. m.]
Trabajo con el widget de paneles en fichas de Spry en Dreamweaver
1
Seleccione un widget de paneles en fichas 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 de la ficha en la vista de Diseño y modifíquelo para cambiar su nombre.
Eliminación de un panel de un widget de paneles en fichas 1
Seleccione un widget de paneles en fichas 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 paneles en fichas en la ventana de documento y, a continuación, haga clic en el nombre del panel que desea editar en el menú Paneles del inspector de propiedades (Ventana > Propiedades).
Cambio del orden de los paneles 1
Seleccione un widget de paneles en fichas en la ventana de documento. 2
En el inspector de propiedades (Ventana > Propiedades), seleccione el nombre del panel que desea mover. https://helpx.adobe.com/mx/dreamweaver/using/spry-tabbed-panels-widget.html[24/05/2018 11:38:37 p. m.]
Trabajo con el widget de paneles en fichas de Spry en Dreamweaver
3
Haga clic en las flechas arriba o abajo para mover el panel en la dirección deseada.
Definición del panel abierto predeterminado
Puede definir el panel del widget de paneles en fichas que se abre de forma predeterminada al abrir la página en un navegador. 1
Seleccione un widget de paneles en fichas en la ventana de documento. 2
En el inspector de propiedades (Ventana > Propiedades), seleccione el panel que desea configurar para que se abra de forma predeterminada en el menú emergente Estado predeterminado.
Personalización del widget de paneles en fichas Aunque el inspector de propiedades permite realizar cambios simples a un widget de paneles en fichas, no admite tareas de estilo personalizadas. Puede modificar las reglas CSS de un widget de paneles en fichas y crear un widget con el estilo que desee. Para realizar una consulta rápida sobre el cambio de los colores del widget de paneles en fichas, 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_sprytabbedpanels_custom_es. Todas las reglas CSS de los siguientes temas se refieren a las reglas predeterminadas que se encuentran en el archivo SpryTabbedPanels.css. Dreamweaver guarda el archivo SpryTabbedPanels.css en la carpeta SpryAssets de su sitio cuando crea un widget de paneles en fichas de Spry. Este archivo también contiene información comentada de utilidad sobre los distintos estilos que se pueden aplicar al widget.
Nota:
https://helpx.adobe.com/mx/dreamweaver/using/spry-tabbed-panels-widget.html[24/05/2018 11:38:37 p. m.]
Trabajo con el widget de paneles en fichas de Spry en Dreamweaver
Aunque es fácil editar las reglas para el widget de paneles en fichas directamente en el archivo CSS, también puede utilizar el panel Estilos CSS para editar el código CSS del widget. 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.
Aplicación de estilo al texto del widget de paneles en fichas
Puede aplicar estilo al texto de un widget de paneles en fichas estableciendo las propiedades para todo el contenedor del widget de paneles en fichas o para los componentes del widget de forma individual. 1
Para modificar el estilo del texto de un widget de paneles en fichas, utilice la tabla siguiente para ubicar la regla CSS correspondiente y, a continuación, añada sus propiedades y valores de estilo de texto:
Texto que se modifica
Todo el texto del widget
Solo el texto de las fichas del panel
Solo el texto de los paneles de contenido
Regla CSS correspondiente .TabbedPanels
.TabbedPanelsTabGroup o .TabbedPanelsTab
.TabbedPanelsContentG roup o
Ejemplo de propiedades y valores que se añaden
font: Arial; fontsize:medium;
font: Arial; fontsize:medium;
font: Arial; fontsize:medium;
.TabbedPanelsContent
Cambio de los colores de fondo del widget de paneles en fichas 1
Para modificar los colores de fondo de partes distintas de un widget de paneles en fichas, 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:
https://helpx.adobe.com/mx/dreamweaver/using/spry-tabbed-panels-widget.html[24/05/2018 11:38:37 p. m.]
Trabajo con el widget de paneles en fichas de Spry en Dreamweaver
Color que se va a cambiar
Color de fondo de las fichas del panel
Color de fondo de los paneles de contenido
Regla CSS correspondiente
.TabbedPanelsTabGroup o .TabbedPanelsTab
.Tabbed PanelsContentGroup o
Ejemplo de propiedades y valores que se añaden o modifican
background-color: #DDD; (Valor predeterminado).
background-color: #EEE; (Valor predeterminado).
.TabbedPanelsContent
Color de fondo de la ficha seleccionada
Color de fondo de la fichas del panel al pasar el puntero del ratón
.TabbedPanelsTabSelec ted
.TabbedPanelsTabHover
background-color: #EEE; (Valor predeterminado).
background-color: #CCC; (Valor predeterminado).
Limitación del ancho de paneles en fichas
De forma predeterminada, el widget de paneles en fichas se amplía para llenar el espacio disponible. No obstante, puede limitar el ancho de un widget de paneles en fichas estableciendo una propiedad de ancho para el contenedor. 1
Abra el archivo SpryTabbedPanels.css y localice la regla CSS .TabbedPanels. Esta regla define las propiedades del elemento de contenedor principal del widget de paneles en fichas.
Nota: También puede seleccionar el widget de paneles en fichas 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/mx/dreamweaver/using/spry-tabbed-panels-widget.html[24/05/2018 11:38:37 p. m.]
Trabajo con el widget de paneles en fichas 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
https://helpx.adobe.com/mx/dreamweaver/using/spry-tabbed-panels-widget.html[24/05/2018 11:38:37 p. m.]
Trabajo con el widget de paneles en fichas de Spry en Dreamweaver
¿Le ha servido de ayuda esta página?
Sí
No
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/mx/dreamweaver/using/spry-tabbed-panels-widget.html[24/05/2018 11:38:37 p. m.]
/ Cookies / Opciones de publicidad