De todo un poco
Páginas: 5 (1098 palabras)
Publicado: 28 de julio de 2010
Maquetar una Página con CSS.
Tutorial que muestra cómo hacer una página web maquetada utilizando únicamente CSS, sin tablas, con una distribución de 2 columnas, una cabecera, un pie de página y con diseño de anchura fija o fluido.
Empezaremos mostrando los dos ejemplos de maquetación que vamos a realizar con este tutorial, siempre con dos columnas, dejando la columna con los enlaces de labarra de navegación a la izquierda o la derecha.
* Maquetación con dos columnas y enlaces a la izquierda:
* Maquetación con dos columnas y enlaces a la derecha:
Desarrollo de la Página y la hoja de Estilos.
Como primer paso, vamos a crear dos nuevos documentos uno de tipo HTML y otro de tipo CSS, y en la cabecera <head> del documento HTML, enlazaremos con una hoja de estilosexterna.
<head>
<title>Maquetación con Hojas de Estilo</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
El código HTML.
El código HTML de los dos ejemplos es el mismo, y es básicamente este:
<body>
<div id="contenedor">
<div id="cabecera">Cabecera de Página</div><div id="cuerpo">
<div id="lateral">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li><li><a href="#">Enlace 5</a></li>
</ul>
</div>
<div id="principal">
<p>Esta página muestra una maquetación a dos columnas con CSS, sin utilizar tablas. Además de las dos columnas, para completar la estructura típica de una web, se coloca una cabecera y un pie de página.</p>
<p>El ejemplo ……</p>
</div>
</div>
<div id="pie">© Universidad Tecnológica de León. 2010</div>
</div>
</body>
</html>
Se puede ver que tenemos una capa contenedor, que engloba a todo el código. Luego, dentro del contenedor tenemos otras tres capas:La cabecera, el cuerpo y el pie de página. La cabecera y el pie de página son dos capas tal cual, que ocupan todo el espacio del contenedor. El lugar donde tendremos las dos columnas es el cuerpo.
Dentro del cuerpo tenemos dos partes, para codificar cada una de las dos columnas. Una parte, que hemos llamado "lateral", con una lista de enlaces (sería la barra de navegación) y otra parte con eltexto de la página, que hemos llamado "principal".
El código CSS
Como habíamos adelantado, veremos dos variantes de codificación a dos columnas, con los enlaces a la izquierda y a la derecha. No obstante, la mayor parte del código CSS de ambos ejemplos es la misma, pues sólo varía la declaración de estilos de la capa "lateral" y de la capa "principal".
Maquetar con los enlaces a laizquierda:
Veamos primero el código CSS para maquetar la página con los enlaces a la izquierda.
body
{
font-size: 8pt;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ebebeb;
}
#contenedor
{
text-align: left;
width: 770px;
margin: auto;
}
#cabecera
{
background-color: #d0d0ff;
color: #330;font-size: 12pt;
font-weight: bold;
padding: 3 3 3 10px;
}
#cuerpo
{
margin: 10 0 10 0px;
}
#lateral
{
width: 160px;
background-color: #999;
float: left;
}
#lateral ul
{
margin: 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li
{
background-color: #ffc;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
border-top: solid #009;...
Tutorial que muestra cómo hacer una página web maquetada utilizando únicamente CSS, sin tablas, con una distribución de 2 columnas, una cabecera, un pie de página y con diseño de anchura fija o fluido.
Empezaremos mostrando los dos ejemplos de maquetación que vamos a realizar con este tutorial, siempre con dos columnas, dejando la columna con los enlaces de labarra de navegación a la izquierda o la derecha.
* Maquetación con dos columnas y enlaces a la izquierda:
* Maquetación con dos columnas y enlaces a la derecha:
Desarrollo de la Página y la hoja de Estilos.
Como primer paso, vamos a crear dos nuevos documentos uno de tipo HTML y otro de tipo CSS, y en la cabecera <head> del documento HTML, enlazaremos con una hoja de estilosexterna.
<head>
<title>Maquetación con Hojas de Estilo</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
El código HTML.
El código HTML de los dos ejemplos es el mismo, y es básicamente este:
<body>
<div id="contenedor">
<div id="cabecera">Cabecera de Página</div><div id="cuerpo">
<div id="lateral">
<ul>
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li><li><a href="#">Enlace 5</a></li>
</ul>
</div>
<div id="principal">
<p>Esta página muestra una maquetación a dos columnas con CSS, sin utilizar tablas. Además de las dos columnas, para completar la estructura típica de una web, se coloca una cabecera y un pie de página.</p>
<p>El ejemplo ……</p>
</div>
</div>
<div id="pie">© Universidad Tecnológica de León. 2010</div>
</div>
</body>
</html>
Se puede ver que tenemos una capa contenedor, que engloba a todo el código. Luego, dentro del contenedor tenemos otras tres capas:La cabecera, el cuerpo y el pie de página. La cabecera y el pie de página son dos capas tal cual, que ocupan todo el espacio del contenedor. El lugar donde tendremos las dos columnas es el cuerpo.
Dentro del cuerpo tenemos dos partes, para codificar cada una de las dos columnas. Una parte, que hemos llamado "lateral", con una lista de enlaces (sería la barra de navegación) y otra parte con eltexto de la página, que hemos llamado "principal".
El código CSS
Como habíamos adelantado, veremos dos variantes de codificación a dos columnas, con los enlaces a la izquierda y a la derecha. No obstante, la mayor parte del código CSS de ambos ejemplos es la misma, pues sólo varía la declaración de estilos de la capa "lateral" y de la capa "principal".
Maquetar con los enlaces a laizquierda:
Veamos primero el código CSS para maquetar la página con los enlaces a la izquierda.
body
{
font-size: 8pt;
font-family: Verdana, Geneva, Arial, Helvetica, Sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ebebeb;
}
#contenedor
{
text-align: left;
width: 770px;
margin: auto;
}
#cabecera
{
background-color: #d0d0ff;
color: #330;font-size: 12pt;
font-weight: bold;
padding: 3 3 3 10px;
}
#cuerpo
{
margin: 10 0 10 0px;
}
#lateral
{
width: 160px;
background-color: #999;
float: left;
}
#lateral ul
{
margin: 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li
{
background-color: #ffc;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
border-top: solid #009;...
Leer documento completo
Regístrate para leer el documento completo.