Unidad 4. Ejercicio paso a paso: Redefinir el estilo de una etiqueta

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 postresemana.htm, que aparece en el panel Archivos.

    Se abrirá el documento en Dreamweaver.
  5. Haz clic sobre cualquier texto, sin seleccionar.
  6. En el Inspector de propiedades CSS, en el desplegable Fuente elige Arial,Helvetica,sans-serif.
  7. Se abrirá la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta, en Nombre de selector elige body, y en Definición de regla deja Sólo este documento.
  8. Pulsa Aceptar. Observarás como cambia toda la tipografía.
  9. Haz clic en la primera línea Postre de la semana.
  10. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS>.
  11. Cambia el valor de Tamaño a 140%.
  12. Se abrirá la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta. En Nombre de selector, asegúrate de que ya pone h1.
  13. Pulsa Aceptar.
  14. Vamos a editar la regla. Haz clic en el botón Editar regla.
  15. En la categoría Fondo, en Background-color escribe #F9CA69. Pulsa Aceptar.
  16. Haz clic en la segunda línea Boniatos a la mallorquina.
  17. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS>.
  18. Pulsa en el icono I para poner el texto en cursiva.
  19. Se abrirá la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta. En Nombre de selector, asegúrate de que ya pone h2.
  20. Pulsa Aceptar.
  21. En el desplegable Fuente, elige Verdana, Geneva, sans-serif.
  22. Haz clic en el desplegable de color e introduce #6F9DBE.
  23. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige body.
  24. Pulsa el botón Editar regla.
  25. En la categoría Fondo, en background-image elige la imagen fondococina.png que encontrarás en la carpeta imagenes del sitio. Pulsa Aceptar.
  26. Haz clic sobre el botón Guardar todo de la barra de herramientas o pulsa Ctrl + S para guardar los cambios.

   Inicio