Bueno amigos, aquí lo prometido, y quizas unos de los temas MAS importantes y discutidos en la maquetacion web: El uso de las famosas etiquetas <div>
Al final de este artículo, sabrás como estructurar profesionalmente el HTML de tus páginas web, y que las mismas sean 100% compatibles con cualquier navegador.
Veremos aqui el uso de las etiquetas <div> para estructurar el documento de forma correcta.
Si recuerdas uno de los primeros artículos de este blog llamado «El primer secreto para pasar de Psd a Html: la Visualización Mental«, en el mismo te comentaba la gran importancia que tiene poder visualizar imaginariamente las secciones que componen tu página web, antes de comenzar con la codificacion HTML.
Esto es de GRAN importancia cuando uno desea convertir un Psd a Html, correctamente.
(si no recuedas o no leiste el artículo, te pido que lo hagas ahora antes de continuar)
Ok, ahora que ya lo sabes, te voy a explicar la forma correcta de estructurar en un Html, esas secciones.
Estas secciones que definiste mentalmente mirando y analizando tu diseño, las pasaremos al documento HTML con la ayuda de las etiquetas <div>. Con las mismas tendremos un control TOTAL sobre la colocación de los distintos elementos dentro de nuestra página.
Etiquetas <div>
Una etiqueta <div> define un bloque donde incluiremos información dentro de nuestro documento. A este bloque definido con <div> le asignaremos por medio del CSS, las propiedades de posición, tamaño, color, etc etc.
La forma de definir un bloque con la etiqueta <div> dentro de nuestro documento HTML, es la siguiente:
<div>
</div>
Tan simple como eso. Si es asi de simple!!!!
Ahora bien, vamos a hacer un ejemplo REAL de maquetacion web, creando los bloques <div> de las secciones que descubrimos en nuestro documento, cuando hicimos el análisis de las mismas con la «Visualización Mental»
Para este ejemplo, elegí al azar una plantilla web extraida del sitio http://www.templatemonster.com:
Y aqui he hecho MI visualización mental de las secciones del documento:
Ahora bien, vamos a realizar nuestro estructurado de las secciones con las etiquetas <div>.
Para ello abrimos un nuevo documento HTML con las etiquetes basicas (html, header, title y body), y dentro del <body> colocaremos un primer <div> llamado «contenedor», que tiene la función de contener todos los otros bloques del documento.
Luego, dentro del bloque «contenedor», colocamos los bloques (divs) uno debajo del otro, siempre de arriba hacia abajo, asignándole a cada uno, un identificador «id» con el nombre del bloque que hayamos elegido.
Nuestro codigo HTML quedaría entonces así:
<html>
<head>
<title>Estructurado de DIVs</title>
</head>
<body>
<div id=»contenedor»>
<div id=»header»>
</div><div id=»menu»>
</div><div id=»slices»>
</div><div id=»sidebar»>
</div><div id=»cuerpo»>
</div><div id=»footer»>
</div>
</div></body>
</html>
El identificador «id» de cada apertura de bloque <div>, nos servirá para luego aplicarle por medio del CSS, las propiedades de alto, ancho, posición, color, etc etc.
Aplicando propiedades a los DIVs, con CSS
Ahora aplicaremos las propiedades de tamaño y posición a nuestros bloques DIVs, y con esto tendremos la estructura lista para comenzar a volcar los contenidos dentro de los sectores o bloques.
Creamos un nuevo archivo y lo guardamos con el nombre de «estilos.css».
Luego abrimos el archivo HTML donde estan nuestros DIVs y linkemos a nuestro CSS, colocando dentro del HEAD del documento Html, la siguiente linea:
<link href=»estilos.css» rel=»stylesheet» type=»text/css»>
Por lo que nuestro HTML quedaría asi:
<html>
<head>
<title>Estructurado de DIVs</title>
<link href=»estilos.css» rel=»stylesheet» type=»text/css»>
</head>
<body>
<div id=»contenedor»>
<div id=»header»>Texto para #header
</div>
<div id=»menu»>Texto para #menu
</div>
<div id=»slices»>Texto para #slices
</div>
<div id=»sidebar»>Texto para #sidebar
</div>
<div id=»cuerpo»>Texto para #cuerpo
</div>
<div id=»footer»>Texto para #footer
</div>
</div>
</body>
</html>
NOTA: Fíjate, que dentro de cada bloque le agregue un pequeño texto para podamos observarlo en el ejemplo terminado.
Ahora volvemos a nuestro archivo CSS y definiremos las medidas de cada bloque DIV, el tamaño y un color para que lo podamos observar en el ejemplo terminado.
Para ello debemos definir las propiedades de cada bloque, comenzando con el signo «#», seguido del nombre de identificador ID que le dimos al bloque elegido, luego abrimos la llave «{«, colocamos las propiedades una por linea finalizando con «;», y para cerrar colocamos la otra llave «}».
#header {
height: 119px;
width: 968px;
background-color: #F00;
}
#menu {
height: 52px;
width: 968px;
background-color: #00F;
}
#slices {
height: 359px;
width: 968px;
background-color: #FF0;
}
#sidebar {
float: left;
height: 700px;
background-color: #0F0;
width: 317px;
}
#cuerpo {
height: 700px;
background-color: #C60;
}
#contenedor {
width: 968px;
}
#footer {
height: 50px;
width: 968px;
background-color: #C09;
}
Aqui solamente coloqué propiedades de alto (height), ancho (width) y color de fondo (banckground-color) de cada bloque, las cuales debes obtener midiendo cada bloque de tu diseño con cualquier programa de edición de imágenes como Photoshop, y con el mismo programa podemos obtener el color de fondo que le queremos dar al bloque. (aqui solo le puse color de fondo para que los podamos ver)
También puedes colocar cualquier tipo de propiedad como color de texto (color), márgenes del bloque (margin) y muchas vas que ya veremos.
Si te fijas bien, solamente en el bloque #sidebar, agregué una propiedad llamada «float» con el valor «left«, esto es porque por defecto, los bloques DIV’s se van colocando en el HTML, uno de bajo de otro automaticamente. Pero en este caso, hay una columna izquierda (#sidebar), y otra columna derecha mas grande (#cuerpo), que necesitamos que quede a su derecha y no debajo del #sidebar.
Entonces usamos la propiedad «float:» con el valor left para que la columna izquierda (#sidebar), quede flotando contra ese lado, y la derecha (#cuerpo) se acomode a la derecha y no debajo de #sidebar.
Finalizado esto, guarda los 2 documentos.
FELICITACIONES !!!!
Has estructurado profesionalmente tu documento !!!!
Aqui te dejo los archivos para que puedas verlos y practiques con ellos:
Descargar achivos
Ahora solo queda volcar los contenidos de texto e imágenes, dentro de cada bloque DIV y tu pagina estará lista !!!
Esto lo veremos en el próximo articulo.
** ¿ Te ha parecido interesante esta artículo ? **
Imagínate lo que puedes aprender con el Curso Completo de Maquetación !
Psd a Html: hazlo rápido y profesionalmente 
Hola, gracias por tu trabajo, te digo desde el primer video. Tienes un error aquí:
sería:
Muchas gracias y un saludo.
Hola hamirokuay
Gracias por tu comentario y por seguir el blog.
Indicamne donde esta el error y lo corrijo.
Saludos!
Pingback: La conversión de Psd a Html: el “karma” de los diseñadores. | Psd a Html: hazlo rápido y profesionalmente
Como voy al paso 2? Gracias es superutil y bien explicado.
Gracias muy bien explicado ya le boy entendiendo mas =)
Amigo hoy llegue a tu pagina por primera vez buscando aprender como pasar un psd a xhtml.. que buenos articulos has publicado, que lastima todavia no esta el «Paso 2» verdad? ojala lo puedas hacer amigo. lei de uno que dijo que publicaste un video puede ser? me podras pasar el link de donde esta?
Muchas gracias desde ya
Amigo,,,,agradezco que hayas echo este tutorial,,,, yo estoy iniciando en esto de las páginas web y tu informacion me ha sido de bastante utilidad,,,,, gracias por publicar tus conocimientos,,,,,algunos que no tenemos medios economicos para pagar cursos caros solo tenemos como opcion apoyarnos en personas como tú,,,,,,,,GRACIAS
Gracias Hector
Me alegra mucho que sea de utilidad, esa es la idea: poder ayudar.
Te sugiero que te suscribas al blog asi recibes una notificacion cuando postee nueva informacion.
Saludos!
Cristian
Hola Cristian, yo hice un curso de web, y este año, quiero seguir estudiando, hice la estructura del sito con el css, y la alegría que me dió, si bien yo vi todo esto ya, pero repasarlo no me viene nada mal, y como te decía la alegría que me dió, es que vi lo mismo en mozilla y en IE. Lo único, el html en el dreamweaver, en la parte de diseño veo la hoja en blanco, recién puedo verlo en el navegador, sigo con tú curso y espero poder resolver los problemas que tenía antes de entrar con un sitio que se ve bien en chrome y en mozilla y mal en IE, saludos, felicitaciones y gracias.
Me alegra mucho Danny.
Cuando ves todo PERFECTAMENTE igual en varios navegadores, es sinonimo de que has llegado a un buen nivel de maquetacion.
Felicitaciones !!!
Luego habra que ver la forma de optimizar al maximo el codigo para q pese lo menos posible, y para que los buscadores los indexen rapido.
Saludos!
Una cosa Cristian, lo que me extraña, es que en el dreamweaver, veo la hoja en blanco, recién la veo en los navegadores, vinculé la hoja de stilos al index, seguí todos los pasos, como dije, se ve igual en todos los navegadores, pero en la vista de diseño del dreamweaver no. Te dejo el link del sitio que hice, para que si podés me orientes como hacer con internet explorer, no se ve el fondo del encabezado, y el menú se cae a la derecha, <a href="http://miweb.net84.net/" es un sito que armé en el curso, y me quedó pendiente poder resolver lo de IE, desde ya, gracias.
Hola Danny
Efectivamente no se ven el fondo de botonera en IE.
Creo que tienes algun problema con la etiqueta
o los- .
Comprime todo el sitio, subelo a algun servidor gratuito y pasame el link asi lo veo.
Saludos
Cristian
perdón se me mezcló un " la web está en: http://miweb.net84.net/
Hola Cristian, muchas gracias, sos muy amable, ya lo subí este es el link: XXXXXXXXXXXXXX (editado) te agradezco, es mi primer sitio, está un poco desordenado el código, por eso voy a seguir en tú blog, para poder aprender, por que necesito trabajar de esto, por que es lo que más me gusta, un abrazo, saludos.
Danny
Ya detecte tu problema.
Al fondo del DIV #contenedor, debes quitarle la propiedad «background-position: top» y «background-position:right».
Esos valores no son estandar dentro de esa propiedad.
Quitaselos y pruebalo en IE.
🙂
Hola Cristian, un forero de Taringa en comunidad web, me dijo que agregara en head
lo probé en el index, y el slider jquery ahora funciona, lo que no se ve, es el fondo del encabezado y el del menú, que tmb se cae. Disculpá la cantidad de mensajes, pero quería comentarte de mi prueba en dreamweaver, que despues de ver tu tuo me bajé el cs5, y anda un caño, un abrazo!
Danny
Probaste lo que te comente de sacarle el background-position al fondo de #contenedor ??
A mi me resultó y lo veo bien en IE8.
Hola Cristian, le saqué lo que me sugeriste y se perfecto el fondo!!! , una cosa, el menú se cae a hacia la derecha, le agrego «li { display: inline; }» y se ve horizontal, pero el texto del jquery, se altera, no fluye. ¿qué podrá ser?
Muchas gracias por el dato, me fijé en todo, tenía el repeat-x, todo, y ni se me ocurrió,que lo que vos me dijiste podía tener que ver, te cuento de paso, que ya le puse menú horizontal a la estructura del sitio que armamos con vos y funciona perfecto en todos los navegadores, gracias por ayudarnos a crecer! Danny
Cristian, intenté borrar el archivo de megaupload, y no pude, si lo podés ocultar al link, estaría buenísimo, vos das cursos de diseño web en algún lado?
Un abrazo, y prometo ser menos hincha!!! saludos, y sos un ídolo.
Hola Danny
Ya edité el link de Megaupload.
Con respecto a los cursos, justamente ahora estoy terminando de preparar un curso de maquetacion completo, en video.
Ahi volcaré todos, y absolutamente TODOS los conocimientos para que el que tome el curso, aprenda desde 0 , como maquetar profesionalmente con XHTML y CSS.
En un par de semanas lo estaré terminado.
Ya te avisaré!!
un abrazo grande.
Cristian
Hola Cristian, si le saqué el background position al #contenedor, y se ve fantastico el fondo, ese tema, fue instantáneo, le saqué el top y el right, y quedó perfecto, lo que yo te decía es que tuve que agregarle li {display:inline} por que en el IE 7, sin actualizar, es el que tengo yo, se cae el menú hacia la derecha, pero si me decís que en el IE8 se ve bien lo dejo así, por que no creo que alguien tenga IE7 como lo tengo yo con cero actualización, un abrazo.
Buenas Cristian.
¿El paso dos esta creado?
Saludos
Hola Samu
El paso 2 en toda la parte de codificacion en CSS.
Hay varios articulos en el nuevo blog, buscalos allí:
http://www.psdahtmlpasoapaso.com/blog
Saludos!
Cristian