Unidad 7. Ejercicio: Modificar el estilo de la tabla

Objetivo

Practicar cómo definir las propiedades de estilo de una tabla y de sus celdas.

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 Cocina en el panel Archivos.
4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.
5. Se abrirá el documento en Dreamweaver.
   Lo primero que vamos a hacer será editar el selector body,td,th creado por Dreamweaver para que no se produzcan conflictos.
6. Abre el panel Estilos CSS (menú Ventana → Estilos CSS).
7. Haz clic en la vista todo. Selecciona el selector body,th,td. Haz clic derecho sobre él y elige Editar selector. Cámbialo por sólo body.
8. Si no aparece el inspector de propiedades CSS, ábrelo a través del menú Ventana, opción Propiedades.
9. En le desplegable Regla de destino del Inspector de propiedades CSS, selecciona <Nueva regla CSS>, y pulsa el botón Editar regla.
10. En Tipo de Selector selecciona clase.
11. En nombre escribe sedes.
12. Y en Definición de regla selecciona Sólo en este documento. Si pensamos emplear este mismo estilo en tablas de otras páginas, entonces lo guardaríamos en la hoja de estilos.
13. En la categoría Tipo, cambia font-size a 80% y color #333.
14. En la categoría Fondo, cambia background-color a #82C7F8.
    
15. En la categoría Bloque, cambia text-align a center;
16. En la categoría Cuadro, en Margin, desmarca Igual para todo, y en Left y Right selecciona auto.
17. Pulsa Aceptar para guardar los cambios.
18. Selecciona la tabla haciendo clic sobre su borde, y en el desplegable Clase elige sedes.
19. Haz clic sobre una celda. En la barra de estado, haz clic sobre <tr> para seleccionar la fila.
20. Inspector de propiedades CSS, selecciona <Nueva regla CSS>, y pulsa el botón Editar regla para definir el estilo de las filas.
21. Observa que ya aparece el selector compuesto .sedes tr. Pulsa Aceptar.
22. En la categoría Fondo, en background-image elige la imagen fondo-sedes.png de la carpeta imagenes.
23. En Background-repeat elige repeat-x y en background-position (Y) elige top. Pulsa Aceptar.
24. Haz clic sobre la celda donde pone Sedes de cocina.
25. Inspector de propiedades CSS, selecciona <Nueva regla CSS>, y pulsa el botón Editar regla para definir el estilo de las filas.
26. Observa que aparece el selector compuesto .sedes tr th. Complétalo para que quede .sedes tr th.titulo y pulsa Aceptar.
27. En Tipo, cambia el tamaño de la fuente a 16px y su color a #7F5717.
28. En fondo, haz que el color sea #F8C982 y que se muestre la imagen imagenes/fondo-sedes-tit.png, repitiéndose en horizontal (x) y colocada arriba. Pulsa Aceptar.
29. Si no se ha aplicado la clase, selecciona la celda y en el Inspector de propiedades HTML, en clase elige titulo.
30. Haz clic en la celda Valencia y arrastra hasta la celda Barcelona.
31. Inspector de propiedades CSS, selecciona <Nueva regla CSS>, y pulsa el botón Editar regla para definir el estilo de las filas.
32. Observa que aparece el selector compuesto .sedes tr td. Complétalo para que quede .sedes tr td.ciudad y pulsa Aceptar.
33. En Tipo, cambia el color a #069 y font-weight a bold.
34. En fondo, haz que el color sea #BDE2FC y que se muestre la imagen imagenes/fondo-sedes-ciudad.png, repitiéndose en horizontal (x) y colocada arriba. Pulsa Aceptar.
35. Si se han deseleccionado, haz clic en la celda Valencia y arrastra hasta la celda Barcelona.
36. Con las celdas seleccionadas, en el Inspector de propiedades HTML, en clase elige ciudad.
37. Haz clic en el borde izquierdo de la fila Horario para seleccionarla completa.
38. En el Inspector de propiedades CSS, selecciona <Nueva estilo en línea>.
39. En el Inspector de propiedades CSS, pulsa el icono Cursiva .
40. Haz clic sobre el botón Guardar de la barra de herramientas, o pulsa Ctrl + S.

El aspecto que te debe de haber quedado debe de ser el siguiente:

La completaremos en los siguientes ejercicios.