Para maquetar una página web necesitamos dos herramientas fundamentales:
– Un editor de texto. Yo uso SublimeText.
– Un navegador web.
Antes de empezar es el momento de echar un rápido vistazo de nuevo al wireframe que realizamos previamente:
En este boceto están definidas claramente tres partes en nuestro sitio:
– Cabecera
– Contenido
– Pie
Cada una de ellas corresponderá a un div (sección) dentro de nuestro HTML. (Si en este punto no sabes que es un div, te recomiendo esta lectura antes de seguir con el tutorial.) Una vez entendido este concepto podemos empezar a teclear en nuestro archivo HTML.
Recomiendo tener siempre una plantilla base.html que podría ser como la que muestro a continuación:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Título de la página</title>
</head>
<body>
Contenido de la página
</body>
</html>
En esta página podrás entender a qué corresponde cada una de las etiquetas.
Si copias y pegas esta misma estructura en tu editor de texto, lo guardas como index.html y lo abres desde un navegador, comprobarás que tu página web ya funciona.
Puedes ver la demostración aquí.
Volvemos entonces al principio para maquetar nuestro sitio web. Dijimos que está estructurada en tres grandes bloques a los que hemos llamado cabecera, contenido y pie. Nuestro archivo HTML quedaría de la siguiente manera:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<div id="contenedor_global">
<div id="cabecera">
</div>
<div id="contenido">
</div>
<div id="pie">
</div>
</div>
</body>
</html>
Aquí apreciamos que los 3 divs que componen la página los he metido dentro de otro al que he llamado «contendor_global«. ¿Por qué? Pues como vemos en la página que estamos maquetando, el contenido de la misma aparece centrado en la pantalla y no alineado a la izquierda o a la derecha. Por eso colocamos todo el interior dentro de un bloque que los contiene a todos, de este va a depender que centremos el todo.
Ahora vamos a comenzar a introducir el código CSS y vamos comprobando poco a poco que la página está funcionando.
body {
background:#fff;
color:#333;
}
#contenedor_global {
width:930px;
padding:0 35px;
margin:0 auto;
}
#cabecera {
width:930px;
padding:0px;
height:178px;
margin:0px;
background:#d9d9d9;
}
#contenido {
width:930px;
height:730px;
padding:0px;
margin:0px;
float:left;
background:#d5f0f0;
}
#pie {
width:930px;
height:86px;
padding:0px;
margin:0px;
float:left;
background:#b3f9d3;
}
Este archivo deberá guardarse con una extensión .css. y será enlazado desde index.html de la siguiente manera:
<link href="estilos/home.css" rel="stylesheet" type="text/css">
Quedando siempre entre las etiquetas <head> y </head>, ahora, nuestro index.html queda así:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Título de la página</title>
<link href="estilos/home.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor_global">
<div id="cabecera">
cabecera
</div>
<div id="contenido">
contenido
</div>
<div id="pie">
pie
</div>
</div>
</body>
</html>
Visualiza el ejemplo o descarga el archivo.
- pasar de PSD a HTML y CSS | definiendo los pasos
- pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web
- pasar de PSD a HTML y CSS | maquetando una web desde cero
- pasar de PSD a HTML y CSS | maquetar un menu
- pasar de PSD a HTML y CSS | introducir un vídeo de vimeo o youtube
- pasar de PSD a HTML y CSS | crear varias columnas en html y css
- pasar de PSD a HTML y CSS | maquetar el pie de página
Increíble tutorial, llevo días aprendiendo a programar y con esta página me resulta tan rápido adquirir conocimientos que estoy disfrutando al máximo!!
Muchas gracias por tu trabajo.