Unidad 8. 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 Diseñador de CSS (menú Ventana → Diseñador de CSS).
7. Haz clic en Todas las fuentes del subpanel Fuentes.
8. En el subpanel Selectores, da doble clic en el selector body,th,td para que puedas modificarlo a sólo body.
9. En el subpanel Fuentes, haz clic en estilococina.css para poder crear una clase que nos va a servir para todas las páginas del sitio que quedarán al final.
10. En ese mismo subpanel Selectores, haz clic en el botón Añadir selector.
11. En la caja de texto escribe .sedes (no olvides el punto a la izquierda, para que quede definido como una clase).
12. Pulsa el icono Texto del subpanel Propiedades.
13. Cambia font-size a 80% y color #333.
14. Cambia text-align a center;
15. Pulsa el icono Fondo, cambia background-color a #82C7F8.
    
16. Pulsa el icono Diseño, en el esquema de Margin, establece los valores de izquierda y derecha en auto.
17. Selecciona la tabla haciendo clic sobre su borde, y en el desplegable Clase del Inspector de Propiedades elige sedes.
18. Haz clic sobre una celda. En la barra de estado, haz clic sobre <tr> para seleccionar la fila.
19. En el Inspector de propiedades CSS, pulsa el botón CSS Designer.
20. En el subpanel Fuentes, selecciona estilococina.css
21. Pulsa el botón Añadir selector del subpanel Selectores.
22. En la caja de texto escribe .sedes tr.
23. Pulsa el icono Fondo del subpanel Propiedades, en background-image elige la imagen fondo-sedes.png de la carpeta imagenes.
24. En Background-repeat elige repeat-x y en background-position (Y) elige top.
25. Haz clic sobre la celda donde pone Sedes de cocina.
26. Si no está abierto el panel Diseñador de CSS, puedes abrirlo con el botón CSS Designer del Inspector de propiedades, o con el menú Ventana Ventana → Diseñador de CSS.
27. Selecciona estilococina.css del subpanel Fuentes.
28. Pulsa el botón Añadir selector del subpanel Selectores. En la caja de texto escribe .sedes tr th.titulo.
29. Pulsa el icono Texto del subpanel Propiedades y cambia el tamaño de la fuente a 16px y su color a #7F5717.
30. Pulsa el icono 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.
31. Si no se ha aplicado la clase, selecciona la celda y en el Inspector de propiedades HTML, en clase elige titulo.
32. Haz clic en la celda Valencia y arrastra hasta la celda Barcelona.
33. Si no está abierto el panel Diseñador de CSS, puedes abrirlo con el botón CSS Designer del Inspector de propiedades, o con el menú Ventana Ventana → Diseñador de CSS, para definir el estilo de las filas.
34. Selecciona estilococina.css y pulsa el botón para añadir un selector.
35. En la caja de texto escribe .sedes tr td.ciudad. Observa que Dreamweaver va autocompletando el selector hasta donde es posible.
36. En Texto, cambia el color a #069 y font-weight a bold.
37. 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.
38. Si se han deseleccionado, haz clic en la celda Valencia y arrastra hasta la celda Barcelona.
39. Con las celdas seleccionadas, en el Inspector de propiedades HTML, en clase elige ciudad.
40. Haz clic en el borde izquierdo de la fila Horario para seleccionarla completa.
41. En el Inspector de propiedades CSS, selecciona <Nueva estilo en línea>.
42. En el Inspector de propiedades CSS, pulsa el icono Cursiva .
43. 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.