Unidad 4. Ejercicio paso a paso: Modificar el estilo de una lista

Objetivo

Practicar las operaciones necesarias para crear un estilo de clase y estilos para etiquetas.

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 menu.htm, que aparece en el panel Archivos.
   
   Se abrirá el documento en Dreamweaver.
5. Inserta los siguientes párrafos:
   Quiénes somos
   Plato Semana
   Postre Semana
   Tu Receta
6. Selecciona todos los párrafos y pulsa el botón para convertirlo en una lista no ordenada.
7. Haz clic sobre la etiqueta <ul> de la barra de estado para seleccionar la lista.
8. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS> y pulsa en Editar regla.
9. Se abrirá la ventana Nueva regla CSS. En Tipo de selector asegúrate de que está elegido Clase.
10. En Nombre de selector, escribe .menu, y en Definición de regla deja Sólo este documento.
11. Pulsa Aceptar.
12. En la categoría Tipo, en Font-weight, selecciona bold, y en Font-size 12px.
13. En la categoría Cuadro, en Width introduce 100px. Padding, deja marcado Igual para todo e introduce 0 en Top. En Margin, desmarca Igual para todo e introduce auto en Left y Right.
14. En la categoría Lista, en List-style-type selecciona none.
15. Pulsa Aceptar.
16. Aplícale la clase a la lista desde el desplegable Clase del Inspector de propiedades HTML.
17. Haz clic en el primer elemento de la lista.
18. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS> y pulsa en Editar regla.
19. Observa que aparece el selectir compuesto .menu li. Es decir, el estilo afectará a los elementos de lista que estén dentro de una lista con la clase menu. Pulsa Aceptar.
20. En la categoría Fondo, en background-color introduce #FFF, en background-image pulsa Examinar y elige fondo-menu.png de la carpeta imagenes.
21. En Background-repeat elige repeat-x y en background-position (Y) elige bottom.
22. En la categoría Bloque, en Text-align, selecciona center.
23. En la categoría Cuadro, en Margin, desmarca Igual para todo e introduce 10 en Bottom.
24. En la categoría Borde, en Style, deja marcado Igual para todo y elige solid en Top. En Width introduce 1. Desmarca Igual para todo en Color e introduce, de arriba a abajo, #999, #333, #333, #999.
25. Pulsa Aceptar.
26. Haz clic en el primer elemento de la lista.
27. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS> y pulsa en Editar regla.
28. Observa que aparece el selector compuesto .menu li. Complétalo para que quede .menu li:hover (cuando el cursor esté sobre el elemento). Pulsa Aceptar.
29. En la categoría Fondo, en background-color introduce #FFEDCF y pulsa Aceptar.
30. Haz clic sobre el botón Guardar de la barra de herramientas o pulsa Ctrl + S para guardar los cambios.