Crear una página web enmarcada

Cuando hablo de una página web enmarcada me refiero a hacer algo similar a lo que estás viendo en el monitor de tu ordenador en estos momentos. Existe una zona activa de una anchura determinada rodeada de una porción, podemos llamarla marco, en la que se utiliza un degradado de color de arriba a abajo. Además, también hay un margen en la parte superior y otro en la inferior.

Para conseguir este diseño debemos crear una hoja de estilos con los siguientes elementos:

Estas son las definiciones que hemos hecho:

• Definición de valores para los atributos margin y padding.

• Características de body. Va indicado el color de fondo, que coincide con el color más suave en la imagen que muestra el degradado; esta imagen (distintas tonalidades de verde, de más oscuro a más claro) se referencia en línea siguiente. Se indica también que dicha imagen (almacenada en la carpeta img dentro de la que guarda la hoja de estilos) sólo se va a repetir horizontalmente (he utilizado una imagen de 13x258 píxeles). También va especificada la familia de la fuente que se va a utilizar.

• La etiqueta centro sirve para centrar la página en la ventana del navegador web. La zona de contenido tiene una anchura de 760 píxeles.

• La clase contenido es la que muestra las características del recuadro que encierra, valga la redundancia, todo el contenido de la página. Se indican la anchura, tal como aparece en centro, el color de fondo, la separación entre el borde y el propio contenido (padding), el tamaño y el color del borde, y el margen superior e inferior del recuadro.

El diseño de la página tendría un aspecto similar al siguiente (el nombre de la hoja de estilos es styles_trucos.css y está almacenada en la carpeta estilos):

Las líneas de puntos en la cabecera deberás sustituirlas por los meta que consideres oportuno, por los javascript que necesites utilizar en esa zona, y por otras referencias. El resto de líneas, las de la zona del cuerpo, encierran todo el contenido.