Unidad 23. Ejercicio: Uso del Widget de jQuery Tab

Objetivo

Practicar el uso del Widget de jQuery Tab para presentar información en una página web.

Ejercicio

1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.
2. Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos.
3. Selecciona el sitio Parquenatural de la carpeta ejercicios en el panel Archivos.
4. Haz doble clic sobre el documento especies.htm, que aparece en el panel Archivos.
5. Se abrirá el documento en Dreamweaver.
6. Haz doble clic sobre el documento base.htm que aparece en el panel de Archivos del mismo sitio.
7. Guarda el archivo como especies_alternativa2.htm.
8. Modifica el título Método de borrado por Especies del parque.
9. Borra el resto del texto de la página.
10. Haz clic abajo del título.
11. Haz clic en el menú Insertar, opción jQuery UI y luego en Tab.
12. En donde dice Ficha 1 escribe Nutria, en Ficha 2 escribe Buitre leonado y, finalmente, Ficha 3 sustitúyelo por Gineta.
13. Copia el texto que corresponde a Nutria de la página especies.htm y pégala en Contenido 1 de la página especies_alternativa.htm
14. Abajo del texto inserta la imagen nutria.jpg de la carpeta imagenes del sitio parquenatural
15. Pasa el cursor sobre el título Buitre leonado para que aparezca el icono del lado derecho y haz clic en él.
16. Una vez abierto el panel, copia el texto que le corresponde a Buitre leonado de la página especies.htm a la página especies_alternativa.htm
17. Inserta debajo del texto la imagen buitre_leonado.jpg
18. Cambia a la vista En vivo.
19. Con el widget Tab funcionando, haz clic sobre el título Gineta para que se abra el panel.
20. Haz doble clic sobre el texto Contenido 3.
21. Copia el texto correspondiente a Gineta de la página especies.htm a la página especies_alternativa.htm
22. Inserta debajo del texto la imagen gineta.jpg
23. Haz clic en el icono de la barra de estado para abrir la ventana Vista rápida de elementos.
24. Haz clic en la etiqueta div #Tab1 para seleccionar el widget.
25. Modifica la propiedad Event en el Inspector de propiedades a mouseover para que los paneles se desplieguen al pasar el cursor.
26. Guarda la página y prueba el resultado en la vista En vivo.