Unidad 5. Ejercicio: Redefinir el estilo de una etiqueta
Objetivo
Practicar
las operaciones necesarias para crear un estilo de clase y estilos para etiquetas.
Ejercicio
Si no tienes abierto Dreamweaver,
ábrelo para realizar el ejercicio.
Si no aparece el panel Archivos,
ábrelo a través del menú Ventana,
opción Archivos.
Selecciona el sitio Cocina en el panel Archivos.
Haz doble clic sobre el documento postresemana.htm, que aparece en el panel Archivos.
Se abrirá el documento en Dreamweaver.
Haz clic sobre cualquier texto, sin seleccionar.
Pulsa el botón CSS Designer, se abrirá el panel Diseñador de CSS.
Pulsa el botón Agregar origen CSS del subpanel Fuentes, del menú emergente pulsa Definir en página.
En el subpanel Selectores pulsa el botón Añadir selector y en el nombre del selector deja sólo body.
En el subpanel Propiedades pulsa el icono Texto y en font-family selecciona Baskerville, Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, serif. Observa cómo cambia la tipografía de toda la página.
Haz clic en la primera línea Postre de la semana.
En el Inspector de propiedades CSS, pulsa el botón CSS Designer.
En el subpanel Fuentes del Diseñador de CSS elige <style>.
Pulsa el botón Añadir selector en el subpanel Selectores y escribe h1.
En el subpanel Propiedades pulsa el icono Texto y establece la propiedad font-size en 140%.
Vamos a editar la regla. Haz clic en el botón Editar regla del Inspector de Propiedades.
En la categoría Fondo, en Background-color escribe #F9CA69. Pulsa Aceptar.
Haz clic en la segunda línea Boniatos a la mallorquina.
Pulsa el botón CSS Designer del Inspector de Propiedades y selecciona <style> del subpanel Fuentes.
Pulsa el botón Añadir selector en el subpanel Selectores y escribe h2.
En el subpanel Propiedades pulsa el icono Texto y modifica la propiedades font-style a italic.
En en ese mismo subpanel establece la propiedad font-family en Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif.
Haz doble clic en la propiedad color e introduce #6F9DBE.
En el Inspector de propiedades CSS, en el desplegable Regla de destino elige body.
Pulsa el botón Editar regla.En la categoría Fondo, en background-image elige la imagen fondococina.png que encontrarás en la carpeta imagenes del sitio. Pulsa Aceptar.
Haz clic sobre el botón Guardar todo de la barra de herramientas o pulsa Ctrl + S para guardar los cambios.