Unidad 5. Ejercicio: 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. Recuerda que este archivo lo creamos en ejercicios anteriores.

    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. Debes hacerlo desde el Inspector de propiedades HTML.
  7. Haz clic sobre la etiqueta <ul> de la barra de estado para seleccionar la lista.
  8. Pulsa el botón CSS Designer del Inspector de propiedades,, se abrirá el panel Diseñador de CSS.
  9. Pulsa el botón Agregar origen CSS del subpanel Fuentes, del menú emergente pulsa Definir en página.
  10. En el subpanel Selectores pulsa el botón Añadir selector y en la caja de texto escribe .menu.
  11. En el subpanel Propiedades pulsa el icono Texto y en la propiedad Font-weight, selecciona bold, y en Font-size 12px.
  12. En el subpanel Propiedades pulsa el icono Diseño , en la propiedad Width introduce 100px, en Margin, haz clic en el esquema para establecer auto en Left y Right.
  13. En el subpanel Propiedades pulsa el icono Texto y en la propiedad List-style-type selecciona none.
  14. Aplícale la clase a la lista desde el desplegable Clase del Inspector de propiedades HTML.
  15. Haz clic en el primer elemento de la lista.
  16. Pulsa el botón CSS Designer del Inspector de propiedades,, se abrirá el panel Diseñador de CSS.
  17. En el subpanel Fuentes del Diseñador de CSS elige <style>.
  18. Pulsa el botón Añadir selector en el subpanel Selectores, si no aparece .menu li, escríbelo en la caja de texto. Es decir, el estilo afectará a los elementos de lista que estén dentro de una lista con la clase menu.
  19. En el subpanel Propiedades pulsa el icono Fondo y en la propiedad background-color introduce #FFF, en background-image haz clic en la caja de texto y despues en el icono Examinar y elige fondo-menu.png de la carpeta imagenes.
  20. En Background-repeat elige repeat-x y en background-position (Y) elige bottom.
  21. En el subpanel Propiedades pulsa el icono Texto y en la propiedad Text-align, selecciona center.
  22. En el subpanel Propiedades pulsa el icono Diseño y en la propiedad Margin establece un valor de 10 en Bottom.
  23. En el subpanel Propiedades pulsa el icono Diseño y en la propiedad Borde, en Style, elige solid.
  24. Ahí mismo establece el color como sigue: Top #999, Right, #333, Bottom #333 y Left #999.
  25. Haz clic en el primer elemento de la lista.
  26. Pulsa el botón CSS Designer del Inspector de propiedades,, se abrirá el panel Diseñador de CSS.
  27. En el subpanel Fuentes del Diseñador de CSS elige <style>.
  28. Pulsa el botón Añadir selector en el subpanel Selectores, escribe .menu li:hover (cuando el cursor esté sobre el elemento).
  29. En el subpanel Propiedades pulsa el icono Fondo y en la propiedad background-color introduce #FFEDCF
  30. Haz clic sobre el botón Guardar de la barra de herramientas o pulsa Ctrl + S para guardar los cambios.

Marzo-2015
Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.