iMeil - Tutorial HTML Intermedio - Estructura de un sitio con CSS

Selecciona tema:

Tutorial HTML Nivel Intermedio Capítulo 1 - Estructura de un sitio con CSS

Estás a punto de conocer cómo se debe estructurar un sitio web siendo CSS quien asigne las dimensiones para cada división del mismo. Debes poner mucha atención, porque es aquí donde los buenos sitios web se distinguen de aquéllos considerados del montón. Así que te sugiero repitas, una y otra vez, los pasos presentados, pues es un tema que debes manejar al dedillo.

Por regla general, un sitio web se estructura como se aprecia en la siguiente figura:

Estructura de página web con CSS

Visualízalo así: requieres tener tres renglones y, dentro del segundo renglón, debes tener tres columnas. Cada columna cumple con una función espécifica. Por ejemplo, la primera se utiliza frecuentemente para presentar las opciones de navegación principales del sitio o de una sección.

La columna central es la encargada de los contenidos de la página en cuestión y, por último, la tercera columna, a la derecha, se utiliza muy seguido para colocar soporte a nuestras actividades, como el registro a un newsletter, banners publicitarios o links a material de otras secciones, por mencionar sólo algunas opciones.

El modelo del gráfico, arriba presentado, es el que utilizaremos para esta explicación. No obstante, al desarrollar el sitio que se utiliza en el tutorial, conocerás una opción algo diferente.

Al grano.

En el bloc de notas, pasa al archivo pruebaCSS.html y anota lo siguiente:

Como ya se ha explicado en el tema HTML y CSS, esta es la forma correcta en que debe iniciar toda página web. Ahora anota lo siguiente:

<head>
<title>Mi primera página ASP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(prueba.css);</style>
</head>
<body>
Mi primera página ASP
</body>
</html>

Has establecido los encabezados (<HEAD>) y designado el inicio y final del documento HTML, además de implementar las etiquetas para el cuerpo (<BODY>) de la página.

Dentro de las etiquetas body vamos a remover el texto Mi primera página ASP y colocar lo siguiente:

Ajá, "top" nos indica que ahí, en esa zona, deberán aparecer los contenidos de la parte superior. Entre otros, nuestro logo, menú y opciones de contacto.

Mientras que "contenidos" nos indica que ahí deberá colocarse el texto, imágenes y cualquier cosa que sea el cuerpo o material de la página.

Finalmente, "pie" es la zona del pie de página.

Hasta el momento, el código que debe tener el archivo pruebaCSS.html es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" /> <head>
<title>Mi primera página ASP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(prueba.css);</style>
</head>
<body>
<div id="contenedor">
<div id="top"></div>
<div id="contenidos"></div>
<div id="pie"></div>
</div>
</body>
</html>

Si vualizas, en el navegador, esta página, podrás darte cuenta que sólo se ve el título de la misma. Antes de movernos al archivo prueba.css, coloca un texto descriptivo para cada ID que se ha creado:

<div id="top">Esta es la parte superior</div>
<div id="contenidos">Aquí van los contenidos</div>
<div id="pie">Aquí va el pie de página</div>

¡Espera! Si no lo has notado, debemos crear, en el segundo renglón, tres columnas. Así que debemos agregar el código siguiente para ello:

<div id="top">Esta es la parte superior</div>
<div id="contenidos">
<div class="izquierda">Zona izquierda</div>
<div class="contenido">Zona contenidos</div>
<div class="derecha">Zona derecha</div>
</div>
<div id="pie">Aquí va el pie de página</div>

Si visualizas estos cambios, en el navegador, notarás que se agregan como renglón... ¡y así debe ser! Es a través de CSS que les vamos a alinear. Pasemos al archivo prueba.css, coloca lo siguiente:

* {
margin:0;
padding:0;
}

Lo que acabas de hacer es indicar a HTML que no asigne ningún espacio predeterminado a la página y a las diferentes etiquetas o elementos HTML que presentan espacios por sí mismos en forma normal. Indicar que no asigne espacios te permite controlar las dimensiones, en forma casi exacta, tanto en Internet Explorer como en Firefox. Ahora implementa lo siguiente:

* {
margin:0;
padding:0;
}

body {
font:normal 13px arial,verdana;
color:#333;
margin-left:50%;
}

margin-left:50% indica que todos los contenidos, incluídos dentro de las etiquetas <body>, deberán recorrerse hacia la derecha de la página en un 50%, es decir, iniciarán desde el centro de la página. Es así como vamos a centrarlos.

Líneas arriba hemos omitido olímpicamente al DIV cuyo id lleva por nombre "contenedor". Es este elemento el que va a rematar la obra de centrar los contenidos en pantalla. Agrégale en el archivo CSS con lo siguiente:

* {
margin:0;
padding:0;
}

body {
font:normal 13px arial,verdana;
color:#333;
margin-left:50%;
}

#contenedor {
position:relative;
width:970px;
height:100%;
margin-left:-485px;
margin-top:5px;
margin-bottom:5px;
padding:6px;
padding-top:15px;
background:#fff;
border:3px solid #e0e1e1;
}

Lo explico en forma rápida. Se indica que todos los contenidos incluídos bajo el elemento, cuya clase o estilo es "contenedor", deberán recorrerse 485 pixeles hacia la izquierda, cantidad que es la mitad del ancho de 970 piexeles que se ha asignado a dicho elemento. Se asignan margenes pues se está agregando un borde sólido de 3 pixeles.

Posteriormente, y a través del newsletter, se explicará con más detalle esta onda, así que no lo pienses más, regístrate al newsletter y no hagas olas.

Los cambios aún no son visibles del todo, así que vamos a agregar el código para los siguientes DIVs, ¿estás conmigo? Ok, ya te veo

... agrega lo siguiente:

#top {
position:relative;
width:970px;
height:70px;
border:1px solid #ccc;
}

#contenidos {
position:relative;
width:970px;
height:100%;
}

#pie {
position:relative;
clear:both;
width:970px;
height:70px;
border:1px solid #ccc;
}

Hemos asignado una posición relativa a cada elemento, con lo cual nos aseguramos que no se amontonarán unos con otros. La posición es relativa al elemento inmediatamente superior que les contiene. Hasta el momento todos son relativos al elemento DIV cuyo id es "contenedor".

Se ha agregado un borde a los DIVs cuyo id son "top" y "pie" con la finalidad de poder observar cómo se va estructurando la página visualmente.

Procedemos a agregar las columnas del segundo renglón, que serán las encargadas de presentar los contenidos de nuestra página. Agrega lo siguiente:

.izquierda {
float:left;
width:140px;
padding-left:0px;
margin-right:10px;
background:#fff;
}

.contenido {
position:relative;
float:left;
width:570px;
padding:6px;
margin-bottom:25px;
}

.derecha {
position:relative;
float:left;
width:180px;
border:1px solid #ccc;
height:100%;
padding:5px;
color:#666;
margin-left:15px;
}

Con lo anterior, se han asignado dimensiones, márgenes y rellenos a cada columna, de tal forma que los contenidos se distribuyan en forma adecuada y visiblemente agradable. float:left;, en compañía de position:relative;, se utiliza para que las columnas aparezcan en la forma que se observa en el gráfico del inicio.

No expicaré más sobre este asunto, pues es tratado, con mayor exactitud, al desarrollar el sitio dentro del Capítulo 3.

Por tanto, el tratamiento de HTML y CSS lo doy por concluído y nos vamos, sin escalas y vía fast track, al mundo ignominioso de las Active Server Pages (ASP) y PHP, donde aprenderás los aspectos dinámicos del sitio... y para el cual espero que ya tengas instalado y corriendo IIS en tu computadora -- además, claro, de tener instalado PHP en tu Windows.

Registro al Newsletter
Mantente al día con tutoriales más cortos sobre desarrollo de sitios web. Políticas de Privacidad
Términos de uso