|
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:
| Código: |
|
* {
margin: 0px;
padding: 0px;
}
body {
background: #d6e0d1;
background-image:url(img/fondo_trucos.jpg);
background-repeat:repeat-x;
font-family: 'Trebuchet MS', Arial, Helvetica,
serif;
}
#centro {
visibility: visible;
margin-left: -380px;
position: absolute;
left: 50%;
witdh: 760px;
}
.contenido {
width: 760px;
background-color: #fff;
padding: 5px;
border: 1px solid #c0c0c0;
margin: 10px auto 10px;
} |
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):
| Código: |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
....
....
<LINK rel="stylesheet" type="text/css" href="estilos/styles_trucos.css"
/>
</head>
<body>
<div id="centro">
<div class="contenido">
.....
.....
.....
</div>
</div>
</body>
</html> |
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. |
