La opción jQuery UI Tab en Dreamweaver facilita la adición de una serie de paneles que muestran u ocultan el contenido correspondiente a una serie de pestañas. Similar a los paneles plegables, esta función de interfaz de usuario de jQuery le permite mostrar más información en menos espacio dentro de una ventana del navegador.
Al igual que los paneles de acordeón, los paneles con pestañas se pueden utilizar para mostrar texto, imágenes y multimedia.
Al crear paneles con pestañas con el widget jQuery UI en Dreamweaver, puede especificar el orden de las pestañas, controlando eficazmente el contenido que aparece cuando se carga la página por primera vez.
Coloque el cursor en una página en la que desee que aparezca el panel con fichas.
Seleccione Insert→jQuery UI→Tabs, o haga clic en el elemento Pestañas en el panel Insertar interfaz de usuario de jQuery. Se inserta un panel con pestañas en la página y los archivos CSS correspondientes aparecen en el panel Fuente de CSS Designer.
En el espacio de trabajo principal, seleccione el texto Tab1, Tab2 y Tab 3 sucesivamente, y luego reemplace cada encabezado de tabulación con el texto que desee que aparezca en el área de tabulación del panel. Por defecto, el texto en el área de Tabulaciones es en negrita y negro, pero puede cambiar el formato alterando la regla CSS correspondiente.
Para ajustar el tamaño de cada ficha, seleccione la ficha y, a continuación, utilice la configuración de altura y anchura del inspector de propiedades.
Para añadir contenido, seleccione la palabra Contenido en el área principal de cualquier panel de pestañas seleccionado y, a continuación, introduzca texto, imágenes o multimedia. Del mismo modo, inserte las imágenes en los paneles como lo haría en cualquier otro lugar de una página: Elija Insert→Image→Image y luego seleccione el archivo GIF, JPEG o PNG que desee mostrar. También puede añadir archivos multimedia o de Photoshop si desea utilizar Dreamweaver para optimizar sus imágenes.
Por ejemplo, para editar el color del texto o la fuente en las pestañas, seleccione la casilla alrededor de la pestaña y la casilla alrededor del estilo se seleccionará automáticamente en el panel de selección de CSS Designer.
Para editar el número u orden de los paneles con pestañas, haga clic en la pestaña azul jQuery Tabs en la parte superior del conjunto de paneles en el área de diseño. Haga clic fuera del área del cuadro azul y el inspector de propiedades volverá a su configuración predeterminada.
Para añadir pestañas, haga clic en el icono del signo más (+) en el inspector de propiedades.
Para cambiar el orden de las pestañas, seleccione el nombre de la pestaña en el inspector de propiedades y utilice las flechas del campo Paneles para mover el panel. Los paneles y sus pestañas correspondientes aparecen en la página web en el orden en que aparecen en el inspector de propiedades.
Seleccione el panel de la lista desplegable Paneles que desea que se muestre cuando se cargue la página en un navegador web.
Seleccione File→Save 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 funciones de la interfaz de usuario de jQuery funcionen, debe cargar estos archivos en su servidor web cuando cargue la página web.
Haga clic en el icono del globo terráqueo 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 que los controles ActiveX obtengan una vista previa de la página en su ordenador.
