Maquetación - PSD a HTML & CSS | Tutorial [Parte 1]

¡Hola amigos! En mi anterior post, les enseñé como pueden diseñar su propio sitio web en Adobe Photoshop, ahora viene lo divertido, maquetarlo y/o codificarlo, es decir, pasar el archivo .PSD de nuestro diseño a HTML y CSS. Antes de continuar con el post, les aclaro que si necesitan algo, no duden en envíarme un mensaje privado, intentaré responderlo lo más rápido que pueda. Y ahora sin más que agregar, espero que les guste mi post, y no olvides en seguirme! PASO Nº1 Como vieron en mi anterior post, el diseño no lleva muchas imágenes, sólo un pequeño logo con el nombre de nuestro sitio, por lo tanto sólo tendremos que hacer el siguiente recorte. Les sugiero que antes de empezar, hagamos una carpeta en dónde guardaremos el diseño, y dentro de ésta misma carpeta, van a crear una nueva llamada "images", allí irán todos nuestras imágenes, que en éste caso es una sóla. Guardan la siguiente imagen como "logo.png" Luego con la "Herramienta Cuentagotas" extraen el color del texto, fondo, menú, títulos, borde del cuerpo. Ya tenemos nuestras imágenes y cólores html, ahora podemos empezar el maquetado de la web! PASO Nº2 Creamos un nuevo documento llamado "index.html", yo recomiendo hacerlo con 'Notepad++' aunque pueden sin ningún problema hacerlo con un 'Bloc de notas' o 'Notepad'. Introduceremos el siguiente código que sera fundamental para la construcción de nuestra estructura. Recuerden que "" será el enlance y/o relación entre nuestro documento html con nuestra hoja de estilo o archivo css, por lo cual es muy importante. PASO Nº3 Vamos a crear un nuevo documento llamado "styles.css" e ingresaremos el siguiente código, con el cuál podremos el color de fondo de la página; color, tipo, y tamaño de la fuente; y mucho más. body{ font-family:"Helvetica Neue", Arial, Trebuchet MS; color:#606060; font-size:14px; padding:0; margin:0; background-color: #e5e5e5; } PASO Nº4 HTML Vamos a empezar a añadir nuestro correspondiente logo, y recuerden que todo lo que agregaremos a partir de ahora, debe estar entre las etiquetas y , como en la siguiente imagen. CSS Y en referencia a nuestro archivo CSS, pegaremos el siguiente código, que nos permitirá que el "wrap" sólo ocupe un determinado porcentaje de la pantalla en total, por lo que, de ésta forma podremos organizar nuestro contenido más adelante. ¡Lo pegan junto al código que añadimos anteriormente! .wrap{ width:60%; height:auto; margin:0 auto; } .header{ width:100%; height:auto; padding-top:30px; padding-bottom:30px; } .logo{ width:100%; height:71px; background:url(images/logo.png) no-repeat; } PASO Nº5 HTML Ahora llegó el momento de colocar nuestro menú horizontal, puede parecer difícil pero más adelante estoy seguro que les resultará fácil. Así que en nuestro documento HTML, pegaremos el siguiente código, y después de ésto nos debe quedar como en la siguiente imagen. ¡El código debe estar dentro del div "logo"! En dónde aparece el signo "#" lo editan, colocando el URL a donde dirigirá la página al presionar, por ejemplo en "INICIO" o "NOTICIAS", eso también lo pueden editar, obviamente. CSS Mientras tanto, en el documento .css colocan lo siguiente, ésto servirá para modificar la apariencia del menú, como el tamaño y color de fuente, espaciado entre los links, etc. #navbar ul{ list-style-type:none; height:auto; font-size:16px; text-align:center; margin:0; float:right; padding-bottom:30px; padding-top:36px; } #navbar li { display: inline; margin:0; padding:0px 0px 0px 28px; font-weight:bold; } #navbar li a { color:#b1b1b1; text-decoration:none; } Con éste otro código le darán al menú el efecto "active" y "hover" del menú. #navbar li a:hover { color:#5a5a5a; height:22px; background:transparent url(nav_bg.png) 0px -30px no-repeat; } #navbar li.active a { height:22px; background:transparent url(nav_bg.png) 0px -30px no-repeat; margin:0; background-color:#1fb4d9; color:#fff; padding:5px; border-radius:5px; } PASO Nº6 HTML En éste paso, llegó el turno de crear el cuadro, en donde irá todo nuestro contenido, los textos, etc. Para ese ingresaremos un contenedor el cuál estará dentro del "wrap" para que no ocupe toda la pantalla, sino cierta parte. Lo pegan en el documento html entre las etiquetas y y luego del div "header". div class="wrap">