Unidad 6. Diseño y Usabilidad (III)

6.4. Fondo

Ya hemos comentado que el fondo del texto debe de tener un buen contraste. Así que las zonas de nuestra página destinadas a contener texto tendrán un fondo normalmente de un color, evitando utilizar imágenes que puedan dificultar la lectura.

Pero es habitual que las páginas no ocupen todo el contenido, dejando márgenes laterales. Por ejemplo, pensemos en una página con una columna central de ancho fijo. A los lados quedan huecos, que no suelen tener el mismo fondo que el texto. Para esto es muy común utilizar imágenes. Si decidimos utilizarlas, debemos de elegir una imagen que no resulte demasiado llamativa, para que no desvíe la atención del contenido de la página.

En nuestro ejemplo, vamos a utilizar dos fondos. Uno para el texto, para el contenido de la página general. Escogemos el color más claro de nuestra paleta, #F5E4CC. En contraste, utilizaremos un fondo oscuro para la página. Hemos escogido el tono más oscuro de la paleta #3D2E2A.

Por lo tanto, desde el editor de CSS de KompoZer, añadimos al selector body el color para el fondo (background-color: #3D2E2A;).

Como el contenido ya lo tenemos en una división, lo que vamos a hacer es darle una clase, que vamos a llamar contenido. En KompoZer, creamos una nueva regla de estilo, para el selector div.contenido. Le daremos el color de fondo más claro (background-color:#F5E4CC;), y un poco de margen para que se muestre el color (margin: 20px;) oscuro del fondo. También le daremos un poco de margen interno (padding: 20px;) para que el texto no quede pegado a los bordes.

En resumen, hemos definido la siguiente clase:

div.contenido {
		margin: 20px;
		padding: 20px;
		background-color: #f5e4cc;
		}

Una vez creada la clase, se la vamos a asignar a las divisiones correspondientes. No tenemos más que hacer clic en el texto que está dentro de la división a la que le queremos asignar la clase, y en la barra de estado de KompoZer, hacer clic derecho sobre la etiqueta div. En el menú, elegimos clases → contenido.

Aplica las clases pie y contenido a los elementos correspondientes de todas las páginas creadas hasta ahora.

Al final, el sitio nos habrá quedado como podemos ver aquí.

Ejercicio propuesto la Unidad 6

Prueba evaluativa de la Unidad 6

 Cursos Informática Gratuitos