Ayuda ejercicios unidad 7: Tablas

Ejercicio 2: Animales

Apartado 1 Para abrir el sitio Animales hay que seleccionarlo en el panel Archivos. Puedes abrir el panel a través del menú Ventana, opción Archivos.

Apartado 2 Para abrir el documento index.htm hay que hacer doble clic sobre él, en el panel Archivos.

Apartado 3 Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.

Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botón para desplegar sus propiedades más avanzadas.

Sitúa el punto de inserción al principio del encabezado y haz clic en el menú Insertar → Tabla.

En Filas escribe 5 y en Columnas 3.

En Ancho de tabla escribe 700 y selecciona Píxeles en el desplegable de al lado.

Pon los campos Grosor del borde, Relleno de celda y Espacio entre celdas a 0.

Haz clic en Aceptar.

Selecciona la segunda celda de la segunda fila de la tabla que acabas de crear y pulsa el botón del inspector de propiedades. Se abrirá una nueva ventana.

Seleccionar Columnas en Dividir, y escribir 2 en Número:.

Hacer clic sobre el botón Aceptar.

Selecciona la primera celda de la primera fila, en An escribir 31. En Al escribir también 31.

Selecciona la tercera celda de la primera fila, en An escribir 31.

Selecciona la primera celda de la última fila, en Al escribir 31.

Selecciona la segunda celda de la segunda fila, en An escribir 150. En Al escribir también 100.

Selecciona la segunda, tercera y cuarta celda de la primera columna y pulsa el botón del inspector de propiedades para combinarlas.

Selecciona la segunda, tercera y cuarta celda de la última columna y pulsa el botón del inspector de propiedades para combinarlas.

Apartado 4 Selecciona la tabla completa y selecciona centro en el campo Alinear del inspector de propiedades.

Crea una Nueva regla CSS. Una clase con nombre contenido. En definición de la regla, elige estiloanimales.css. En Fondo establece background-color a #D6E7DB. Aplícale la clase a la tabla.

Crea una Nueva regla CSS con el selector compuesto .contenido .arriba-izq. En Fondo establece background-color a #EFEFD1, background-image: imagenes/arriba-izq.png; background-repeat: no-repeat;. Asigna la clase a la celda de arriba - izquierda.

Crea otra regla para el selector .contenido .arriba-der, como la anterior, pero empleando la imagen arriba-der.png. Asigna la clase a la celda de arriba - derecha.

Crea otra regla para el selector .contenido .abajo-der, como la anterior, pero empleando la imagen abajo-der.png. Asigna la clase a la celda de abajo - derecha.

Crea otra regla para el selector .contenido .abajo-izq, como la anterior, pero empleando la imagen abajo-izq.png. Asigna la clase a la celda de abajo - izquierda.

Crea otra regla con el selector compuesto .contenido .arriba. En Fondo establece background-color a #EFEFD1, background-image: imagenes/arriba.png; background-repeat: repeat-x;. Asigna la clase a la celda de arriba.

Crea otra regla para el selector .contenido .abajo, como la anterior, pero empleando la imagen abajo.png. Asigna la clase a la celda de abajo.

Crea otra regla con el selector compuesto .contenido .izquierda. En Fondo establece background-color a #EFEFD1, background-image: imagenes/izquierda.png; background-repeat: repeat-y;. Asigna la clase a la celda la izquierda.

Crea otra regla para el selector .contenido .derecha, como la anterior, pero empleando la imagen derecha.png. Asigna la clase a la celda de la derecha.

 

Apartado 5 Sitúa el punto de inserción en la segunda celda de la segunda fila y haz clic en el menú Insertar → Imagen. Selecciona la imagen logo_animales.gif de la carpeta imagenes y haz clic en Aceptar.

Apartado 6 Selecciona las celdas centrales de la segunda fila. Luego, selecciona Centro en Horiz y Medio en Vert.

Apartado 7 Selecciona todo el texto que se encuentra bajo la tabla. Haz clic en el menú Edición → Cortar. Luego sitúate en la segunda celda de la cuarta fila y haz clic en el menú Edición → Pegar. Si al final ha quedado algún elemento vacío, como un párrafo o un encabezado, bórralo.

Apartado 8 Para abrir el documento botones.htm hay que hacer doble clic sobre él, en el panel Archivos.

Selecciona la lista no ordenada encontrarás allí y copialos con la combinación de teclas Ctrl + C.

Sitúate en la tercera celda de la segunda fila y pégalos botones con la combinación de teclas Ctrl + V.

Vuelve al archivo botones.htm. En el panel Estilos CSS, selecciona los estilos que cuelgan de <style>, haz clic derecho y elige Copiar.

Vuelve al archivo index.htm. En el panel Estilos CSS, haz clic derecho sobre estiloanimales.css y elige Pegar.

Apartado 9 En el inspector de propiedades selecciona Derecha en el campo Horiz y Superior en Vert.

Apartado 10 Hacer clic sobre el botón Guardar .

Apartado 11 Repite los apartados 2 al 14 con los archivos consultas.htm, gatos.htm y perros.htm. Lo más cómodo será copiar la tabla completa y reemplazar el contenido central.