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
- 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.
- En el Inspector de propiedades CSS, en el desplegable Fuente elige Arial,Helvetica,sans-serif.
- 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.
- Pulsa Aceptar. Observarás como cambia toda la tipografía.
- Haz clic en la primera línea Postre de la semana.
- En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS>.
- Cambia el valor de Tamaño a 140%.
- Se abrirá la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta. En Nombre de selector, asegúrate de que ya pone h1.
- Pulsa Aceptar.
- Vamos a editar la regla. Haz clic en el botón Editar regla.
- En la categoría Fondo, en Background-color escribe #F9CA69. Pulsa Aceptar.
- Haz clic en la segunda línea Boniatos a la mallorquina.
- En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla CSS>.
- Pulsa en el icono para poner el texto en cursiva.
- Se abrirá la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta. En Nombre de selector, asegúrate de que ya pone h2.
- Pulsa Aceptar.
- En el desplegable Fuente, elige Verdana, Geneva, sans-serif.
- Haz clic en el desplegable de 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.
Octubre-2009.