REPITO ESTO LO BUSQUE EL AUTOR ES @arucordoba ESTO SE PUBLICO EN SU BLOG ES: http://interacciondigital.net/tutoriales/como-pasar-de-psd-a-html-css-paso-a-paso/ Vamos a utilizar un PSD gratuito que pueden descargar desde aquí: http://www.bevelandemboss.net/website-template-crisp-presentation como resultado buscamos algo como la siguiente imagen. Igualmente pueden descargar una copia del PSD con las secciones marcadas que les dejo acá. Queremos llegar a esto: Primero que todo, debemos tener claras las secciones del sitio, para eso dibujo sobre el diseño las secciones y les doy el nombre, nos quedaría algo así: Una vez que tenemos bien claras las secciones pasamos a crear las carpetas a donde estarán nuestros archivos: El HTML, que quedaría así: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Pasemos a recortar las imágenes… Empecemos con el fondo, podemos ver que es una imagen que se repite a lo ancho de la página, entonces usamos la herramienta de selección en photoshop (atajo M) y hacemos una selección de 11px de ancho por 1200px de largo exactamente como muestra la siguiente imagen, vamos a Archivo–>Guardar para web y dispositivos (File–>Save for Web and Devices si tenemos el photoshop en inglés) y lo guardamos como body_bg.jpg: Ahora recortamos el logo, yo lo hice de 201×51 pixeles y lo guardé como logo_bg.jpg no lo guardé con transparencia (png) ya que el fondo es blanco y no lo necesitamos. Pasamos al menú top, como vemos tiene un fondo en grandiente y divisores, para el fondo recortaremos una sección de 1×49 pixeles y la guardamos como nav_top_bg.jpg, al recorte lo hacemos como muestra la siguiente imagen: Ahora debemos cortar los divisores, el recorte será muy parecido, pero esta vez de ancho serán 2px y de alto la misma que el anterior (49px) y le daremos el nombre de separa_nav_top_bg.jpg, lo recortamos así: Al slider no lo haremos con jQuery, lo dejaremos para el próximo tutorial, ya que quiero focalizarme en la maquetación de un sitio ahora, así que cortaremos el slider completo, incluyendo los botones, lo salvamos como dummy_slider.jpg con una medida de 847×97 pixeles. Ahora debemos cortar cada uno de los íconos del menú dentro de la sección de contenido, cada una de las tres imágenes tiene un tamaño diferente, todas en PNG-24 para respetar la transparencia en gradiente: Por otro lado, ocultamos los íconos y recortamos el fondo completo del menú, con una medida de 596×75 pixeles lo guardamos como bg_menu_contenido.jpg como verán, los nombres de las imágenes las hago lo más intuitivo posible, para después con sólo leer el nombre recordar y saber a qué sección pertenecen, les debería quedar algo así: Ahora recortaremos las imágenes que se muestran en la sección “What we do the best” con un tamaño de 102×102 pixeles las guardé como prev01.jpg y prev02.jpg respectivamente. Por último recortamos un triangulito de la sección que muestra los datos de contacto en la página, como verán es un tríangulo q se repite a lo alto según el tamaño del div que lo contenga, me queda una imagen de 12×11 pixeles a la cual le puse el nombre de direccion_bg.jpg, podría haberla guardado como png, pero no me pareció relevante ya que no creo cambiar el fondo de color, muestro como lo recorté: Les debería quedar algo así en la carpeta imgs: Comencemos con el CSS: Creamos un archivo style.css dentro de la carpeta css que habíamos hecho antes. Yo personalmente utilizo el Notepad++ para escribir código, es rápido, liviano y GRATIS!, lo pueden descargar de acá: http://notepad-plus-plus.org/ igualmente pueden utilizar el que quieran, el resultado final es indiferente del soft utilizado para hacerlo. Empecemos con un reset, yo utilizo el de Eric Meyer: http://meyerweb.com/eric/tools/css/reset/ esto es para poner los valores de márgenes, rellenos en cero, para que todos los navegadores interpreten nuestra página de igual manera, copiamos y pegamos el código de la página anterior y lo pegamos en nuestro CSS. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 html,body,div,span,applet,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre, a,abbr,acronym,address,big,cite,code, del,dfn,em,font,img,ins,kbd,q,s,samp, small,strike,strong,sub,sup,tt,var, b,u,i,center, dl,dt,dd,ol,ul,li, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body{ line-height:1; } ol,ul{ list-style:none; } blockquote,q{ quotes:none; } blockquote:before,blockquote:after, q:before,q:after{ content:''; content:none; } /*remembertodefinefocusstyles!*/ :focus{ outline:0; } /*remembertohighlightinsertssomehow!*/ ins{ text-decoration:none; } del{ text-decoration:line-through; } /*tablesstillneed'cellspacing="0"'inthemarkup*/ table{ border-collapse:collapse; border-spacing:0; } Ahora pasaremos a darle forma a cada div que creamos anteriormente en el HTML, colocando las respectivas alturas y posiciones, la imágen de las secciones coloreadas puede ayudarnos mucho en esta etapa. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 /*===========*/ /*=Maquetaciýn */ /*===========*/ #contenedor{ width: 960px; margin: 38px auto 0 auto; } #header{ height: 109px; } #slider{ height: 197px; } #principal{ height: 758px; } #contenido{ /* width: 645px; Esto es sin posisionar los textos y contenidos, en realidad tiene un margin-left de 73px*/ width: 572px; float: left; } #sidebar{ width: 315px; float: left; } #footer{ /* height: 98px; Hay que restarle los 40px del padding top que le agregamos*/ height: 58px; } Ahí tenemos una maquetación muy básica de las secciones creadas en el HTML, ahora debemos completarlo, así que dejemos por un rato el css y rellenemos nuestra página de contenido. Sección de header 1 2 3 4 5 6 7 8 9 10 11 Al logo lo hacemos con un texto con la etiqueta h1 que luego reemplazaremos con la imágen recortada. El menú es simplemente una lista desordenada de 4 elementos. 1 2 3 Aquí como mencioné anteriormente debería ir el slider que explicaré como colocarlo en el próximo tutorial, por ahora solamente creamos un div con la clase img_slider que será ocupado por el recorte que hicimos del mismo. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ¿Complicadísimo no? jajaja, la verdad que es muy simple, solamente texto, pero igualmente debemos darle sus clases para poder ubicarlos luego en la página. Con esto damos por terminado el HTML, deberían ver en su navegador algo muy feo sin estilos, ni colores ni coherencia, así que manos a la obra nuevamente, tomate 5 minutos, preparate un café y volvé que seguimos con el estilo…. Aplicando CSS Bueno….voy a tratar de explicar la máxima cantidad de puntos, tal vez a alguien más experimentado le parezca aburrido, pero siempre es bueno refrescar y afirmar los conocimientos. Empecemos por los estilos “fijos”, son los que se repiten varias veces en el html, recordemos que aplicamos el reset anteriormente. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .clear{ clear: both; } body{ background:url(../imgs/body_bg.png) repeat-x; font-family: Arial, Helvetica, sans-serif; font-weight: 100; font-size: 10pt; color: #7b5a47; } a{ color: #7b5a47; font-weight: bold; } Como ven aquí le doy estilo a lo que usamos anteriormente (el div vacío con la clase clear), lo que hace esto es “limpiar” cualquier float que quede del div anterior, se puede usar clear: left, right o both que sirve para ambos lados y es la que uso siempre. Ahora al body le aplicamos el fondo repetido en el eje x, tamaño y tipo de letra predominante en la página y el color. Como se podrán dar cuenta el tamaño predominante no es 10pt sino 12pt según photoshop, pero me gusta siempre empezar con 10pt y después variar el tamaño asignandole valores en em (se van a dar cuenta de que les hablo más adelante) 1em equivale a la medida de la letra “m” del tamaño de letra que estemos utilizando (osea una “m” de 10pt). Como se puede apreciar en la página todos los enlaces están en negrita, es por eso que el estilo que le damos a los links es bold y el color #7b5a47; que vendría a ser un marrón oscuro. Pasemos al header… 1 2 3 4 5 6 7 8 9 10 11 12 13 14 h1.logo{ background: url(../imgs/logo_bg.png) no-repeat; width:201px; height:51px; float: left; margin-left:65px; } h1.logo a{ display: block; width: 100%; height: 100%; text-indent: -9999px; } Reemplazamos al H1 con clase logo por la imagen recortada, le asignamos el ancho y alto exacto de la misma, le damos un margen izquierdo para que no quede “pegado” al borde y lo flotamos a la izquierda para que el menú top no quede abajo sino que se ubique a la derecha del logo. Luego decimos que todos los enlaces (a) que se encuentren dentro de un H1 con clase logo se muestre como bloque y ocupen el máximo de ancho y alto posible (osea los valores de su parent que son 201×51 pixeles). con la propiedad text-indent: -9999px; enviamos el texto fuera de la pantalla, esto es para que se vea sólo la imágene que colocamos y el texto exista pero no se vea. Pasemos al menú… 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 #nav_top{ float:right; width: 419px; height: 19px; padding: 15px 0px 15px 35px; margin-right: 20px; text-align: center; background: url(../imgs/nav_top_bg.png) repeat-x; border: 1px solid #ded5cf; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #nav_top li{ display: block; float: left; margin-right: 20px; padding-right: 20px; height: 35px; background: url(../imgs/separa_nav_top_bg.png) no-repeat right bottom; text-decoration: none; } #nav_top li:last-child{ background: none; } Primero al menú lo flotamos hacia la derecha, le asignamos las medidas y repetimos en x el fondo que recortamos antes, le damos el bordeado sólido de 1px con el color correspondiente. Como pueden ver le estamos dando un redondeado a las puntas del menú, con la propiedad border-radius lo hacemos, para que lo pueda interpretar mozilla añadimos -moz-border-radius: 10px y para que la gama de wbekit lo muestre como queremos agregamos -webkit-border-radius: 10px; #nav_top li significa que afectaremos TODOS los li que estén dentro de un elemento con id=nav_top: Los hacemos bloques y los flotamos a la izquierda para que esté uno al lado del otro, luego damos un margin-left y un padding-left iguales de 20px esto es para que entre cada uno de ellos exista la misma separación. background: url(../imgs/separa_nav_top_bg.png) no-repeat right bottom; con esto decimos que a cada elemento li agregue el divisor, que no se repita y que lo agregue a la derecha y abajo. Aquí vemos que sucede algo que no queremos, y es que el último elemento también tiene un divisor, cómo lo eliminamos?? con una pseudo-clase: #nav_top li:last-child esto afectará solo al último elemento li que se encuentre dentro del div con id nav_top. 1 2 3 4 5 6 7 8 #nav_top li a{ font-size: 1.2em; text-decoration: none; } #nav_top li a:hover,a:active{ color: #d17b00; } Ahora quitamos el subrayado de los enlaces que se encuentren en un li y a la vez en el div con id nav_top y le aplicamos el tamaño de 1.2em, osea que el tamaño de letra sea 1.2 “m” de 10pt…..se entiende? espero… a:hover -> Cuando el mouse pasa por encima del enlace el color será #d17b00 a:active -> Cuando es presionado el enlace el color será #d17b00 Slider…..muy simple 1 2 3 4 5 6 7 8 9 10 11 /* Este sólo es el estilo para posicionar la imágen del slider falso ya que veremos luego cómo colocar un slider funcional usando jQuery */ .img_slider{ width: 847px; height: 100%; margin: 0 auto; background: url(../imgs/dummy_slider.jpg) no-repeat; } Pasemos al contenido… 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #contenido{ margin-top: 50px; } h2.titulo{ font-size: 1.4em; margin-bottom: 25px; } .desc{ width: 480px; line-height: 1.1em; font-size: 1.1em; } Le damos un margen superior de 50px, al título un tamaño y un margen inferior para separar el texto descriptivo al cual le damos un ancho fijo de 480px, tamaño y una separación entre renglones de 1.1em. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 .menu_contenido{ margin-top: 50px; width: 596px; height: 75px; position: relative; left:-25px; background: url(../imgs/bg_menu_contenido.png) no-repeat; margin-bottom: 40px; } .nav2{ display: block; width: 685px; height: 50px; padding-top: 15px; margin-left: 40px; } .nav2 li{ display: block; float: left; list-style: none; margin-left: 10px; padding-left: 10px; } .nav2 li a{ color: #523c2f; text-decoration: none; font-size: 1.2em; letter-spacing: .1em; } Al cuadro q va a contener los 3 botones le damos su tamaño y el fondo que recortamos antes, como pueden ver tiene position relative, esto es porque quiero “empujar” un poco este cuadro, que salga del contenedor, lo saco -25px de izquierda con respecto a su parent (osea #contenido) Para los botones no hay mucho que explicar ya que se repiten las propiedades del menú anterior, cambian los valores. Podemos ver en el HTML que a cada li le dimos una clase diferente, esto es porque cada li muestra una imágen diferente con respecto al otro, al estilo lo podemos hacer así: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 .ideas{ display: block; height: 46px; width: 152px; padding-top: 18px; background: url(../imgs/lampara.png) no-repeat; } .execution{ display: block; height: 46px; width: 166px; padding-top: 18px; background: url(../imgs/lapiz.png) no-repeat; } .passion{ display: block; height: 42px; width: 153px; margin-top: 3px; padding-top: 15px; background: url(../imgs/corazon.png) no-repeat; } .ideas a{ padding-left: 80px; } .execution a{ padding-left: 50px; } .passion a{ padding-left: 60px; } Como cada imágen es diferente las medidas de ancho y alto varían de uno a otro, pero la idea es la misma, luego a cada enlace de cada uno de los li le damos un relleno izquierdo como para posicionar el texto como nos parezca adecuado. Pasemos a la muestra de productos… 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .preview{ margin-top: 45px; } .preview img{ border: 5px solid #c8bbab; float: left; margin-right: 24px } h3{ margin-bottom: 15px; font-size: 1.3em; } Aquí no hay mucho que explicar, solamente que separamos la imágen del resto del texto, le damos un borde ancho, lo flotamos a la izquierda para que el texto que sigue no quede abajo de la imágen y al título un tamaño de 1.3em. Sidebar El sidebar es REALMENTE simple, hay mucha cantidad de texto y si entendieron lo anterior a esta sección la pueden hacer solos, igualmente explicaré paso a paso como vengo tratando de hacerlo, no sé a ustedes, pero amí ya se me terminó el café, voy por otro… Segundo y creo que último café, si, ya falta poquito y terminamos. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 #sidebar{ margin-top: 30px; padding: 20px; padding-left: 40px; } #sidebar p{ margin-bottom: 15px; width: 240px; line-height: 1em; } .noticia{ margin-bottom: 45px; } Como vemos aquí damos las dimensiones que contendrán las noticias y la dirección en la barra lateral, a esto lo logramos agregando un relleno de 20px pero uno de 40 del lado izquierdo, las noticias que agreguemos tendrán una separación inferior de 45px con respecto a la siguiente. 1 2 3 4 .linea_divisora{ border-bottom: 1px solid #d2cdbf; margin-bottom: 45px; } Esto es sólo para crear la línea divisora entre las noticias y la dirección. Nada del otro mundo. 1 2 3 4 5 6 7 8 9 .direccion{ width: 200px; background: url(../imgs/direccion_bg.jpg) repeat-y; padding-left: 20px; } .direccion li{ padding-bottom: 3px; } La dirección se encuentra en un cuadro de un anchod e 200px y tiene un fondo de triangulitos que se repiten a lo alto y está posicionado por defecto a la izquierda, le damos un padding-left de 20px para que el texto no esté sobre el fondo. Luego damos una separación inferior entre cada elemento li de 3px. Footer…lo más fácil para el último. 1 2 3 4 5 6 7 8 9 10 11 12 #footer{ padding-top: 40px; /* Esto afecta la sección Maquetación, está comentado.*/ } .copyright{ float: left; } .autor{ float: right; } Algo para explicar?? naa, si llegaste acá entendiste todo supongo. Espero que lo hayan logrado, cualquier duda o consulta no dejen de escribirme, igualmente si encuentran errores, o correcciones por hacer son SIEMPRE bienvenidas, estamos para aprender y evolucionar. En el post que viene veremos como agregar el slider y configurarlo a nuestro gusto en el sitio creado.