3. pasar de PSD a HTML y CSS | maquetando una web desde cero 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: XHTML <!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> 123456789 <!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: XHTML <!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> 123456789101112131415161718 <!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; } 123456789101112131415161718192021222324252627282930313233343536 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: XHTML <link href="estilos/home.css" rel="stylesheet" type="text/css"> 1 <link href="estilos/home.css" rel="stylesheet" type="text/css"> Quedando siempre entre las etiquetas <head> y </head>, ahora, nuestro index.html queda así: XHTML <!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> 12345678910111213141516171819202122 <!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 Comparte con tus amigos 🙂 Una Respuesta Aitor 21 febrero, 2017 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. Responder Hacer Comentario Cancelar Respuesta Su dirección de correo electrónico no será publicada.ComentarioNombre* Email* Sitio Web Guardar mi nombre, correo electrónico y sitio web en este navegador para la próxima vez que haga un comentario.
Aitor 21 febrero, 2017 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. Responder
