Cómo crear paneles con pestañas con jQuery en Dreamweaver

Cómo crear paneles con pestañas con jQuery en Dreamweaver - dummies

La opción jQuery UI Tab en Dreamweaver hace que sea más fácil agregar una serie de paneles que muestran u ocultan el contenido correspondiente a una serie de pestañas. De forma similar a los paneles plegables, esta característica jQuery UI le permite mostrar más información en menos espacio dentro de una ventana del navegador.

Al igual que en los paneles de acordeón, los paneles con pestañas se pueden usar para mostrar texto, imágenes y multimedia.

Cuando crea paneles con pestañas con el widget jQuery UI en Dreamweaver, puede especificar el orden de las pestañas, controlando efectivamente qué contenido aparece cuando la página se carga por primera vez.

Siga estos pasos para crear un grupo de paneles con pestañas:

  1. Coloque el cursor en la página donde desea que aparezca el panel con pestañas.

  2. Elija Insertar → Interfaz de usuario jQuery → Pestañas, o haga clic en el elemento Pestañas en el panel Insertar interfaz de usuario jQuery.

    Se inserta un panel con pestañas en la página y los archivos CSS correspondientes aparecen en el panel Fuente del diseñador de CSS.

  3. En el espacio de trabajo principal, seleccione el texto Tab1, Tab2, y Tab 3 uno por uno y luego reemplace cada encabezado con el texto que desea que aparezca en la pestaña del panel zona.

    Puede editar el contenido de las pestañas solo en el área de trabajo, no en el inspector de propiedades. De forma predeterminada, el texto en el área de la pestaña es en negrita y negro, pero puede cambiar ese formato alterando la regla de CSS correspondiente.

  4. Para ajustar el tamaño de cada pestaña, seleccione la pestaña y luego use las configuraciones de Altura y Ancho en el inspector de propiedades.

    Con una pestaña individual seleccionada, el inspector de propiedades muestra la configuración de esa pestaña específicamente.

  5. Para agregar contenido, seleccione la palabra Contenido en el área principal de cualquier panel de pestañas seleccionado y luego ingrese texto, imágenes o multimedia.

    Puede copiar texto en un panel pegándolo de la misma forma que pegaría el texto en cualquier otro lugar de la página. Del mismo modo, inserte imágenes en paneles como lo haría en cualquier otro lugar de una página: elija Insertar → Imagen → Imagen y luego seleccione el archivo GIF, JPEG o PNG que desea visualizar. También puede agregar archivos multimedia o de Photoshop si desea usar Dreamweaver para optimizar sus imágenes.

  6. Para cambiar la apariencia de una pestaña o un panel, como la cara o el color de la fuente, edite la regla CSS correspondiente.

    Por ejemplo, para editar el color del texto o la fuente en las pestañas, seleccione el cuadro alrededor de la pestaña y el cuadro de estilo se selecciona automáticamente en el panel Selector de CSS Designer.

  7. Para editar el número o el orden de los paneles con pestañas, haga clic en la pestaña azul jQuery Tabs en la parte superior del panel que se encuentra en el área de diseño.

    Cuando hace clic en la pestaña azul, la configuración del panel aparece en el inspector de propiedades. Haga clic fuera del área en recuadro azul, y el inspector de propiedades regresa a su configuración predeterminada.

  8. Para agregar pestañas, haga clic en el ícono del signo más (+) en el inspector de propiedades.

    Aparecen nuevas pestañas en el espacio de trabajo.

  9. Para cambiar el orden de las pestañas, seleccione el nombre de la pestaña en el inspector de propiedades y luego use las flechas en el campo Paneles para mover el panel.

    Los nombres de los paneles se mueven hacia arriba y hacia abajo en el menú a medida que se cambia el orden. Los paneles y sus pestañas correspondientes aparecen en la página web en el orden en que aparecen en el inspector de propiedades.

  10. Seleccione el panel en la lista desplegable Paneles que desea mostrar cuando la página se carga en un navegador web.

    La lista desplegable corresponde a los nombres que asigna a cada pestaña en el espacio de trabajo.

  11. Elija Archivo → Guardar para guardar la página; cuando aparezca el cuadro de diálogo Copiar archivos dependientes, haga clic en Aceptar para generar automáticamente todos los archivos relacionados.

    Para que las características de la interfaz de usuario de jQuery funcionen, debe cargar estos archivos en su servidor web cuando cargue la página web.

  12. Haga clic en el icono de globo en la parte superior del espacio de trabajo y seleccione un navegador para obtener una vista previa de su trabajo en un navegador.

    Dependiendo de su navegador web, es posible que tenga que permitir controles ActiveX para obtener una vista previa de la página en su computadora.